Search completed in 1.21 seconds.
KeyboardEvent.key - Web APIs
the
keyboardevent interface's
key read-only property returns the value of the
key pressed by the user, taking into consideration the state of modifier
keys such as shift as well as the
keyboard locale and layout. its value is determined as follows:
key values see a full list of
key values. if the pressed
key has a printed representation, the returned value is a non-empty unicode character string containing the printable representation of the
key. if the pressed
key is a control or special character, the returned value is one of the pre-defined
key values. if the
keyboardevent represents the press of a dead
key, the
key value must be "dead". ...
...list of
key values. if the pressed
key has a printed representation, the returned value is a non-empty unicode character string containing the printable representation of the
key. if the pressed
key is a control or special character, the returned value is one of the pre-defined
key values. if the
keyboardevent represents the press of a dead
key, the
key value must be "dead". some specialty
keyboard
keys (such as the extended
keys for controlling media on multimedia
keyboards) don't generate
key codes on windows; instead, they trigger wm_appcommand events. these events get mapped to dom
keyboard events, and are listed among the "virtual
key codes" for windows, even though they aren't actually
key codes. if the
key cannot be identified, the returned value is unidentified. ...
...pecialty
keyboard
keys (such as the extended
keys for controlling media on multimedia
keyboards) don't generate
key codes on windows; instead, they trigger wm_appcommand events. these events get mapped to dom
keyboard events, and are listed among the "virtual
key codes" for windows, even though they aren't actually
key codes. if the
key cannot be identified, the returned value is unidentified.
keyboardevent sequence every
keyboardevent is fired in a pre-determined sequence. for a given
key press, the sequence of
keyboardevents fired is as follows assuming that event.preventdefault is not called: a
keydown event is first fired. ...
...And 22 more matches
KeyframeEffect.setKeyframes() - Web APIs
the set
keyframes() method of the
keyframeeffect interface replaces the
keyframes that make up the affected
keyframeeffect with a new set of
keyframes. syntax existing
keyframeeffect.set
keyframes(
keyframes); parameters
keyframes a
keyframe object or null. if set to null, the
keyframes are replaced with a sequence of empty
keyframes. there are two different ways to format
keyframes: an array of objects (
keyframes) consisting of properties and values to iterate over. this is the canonical format returned by the get
keyframes() method. element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, color: "#000" } ], 2000); offsets for each
keyframe can be specified by providing an offset value. element.animate([ { opacity: 1 },...
... 2000); offsets for each
keyframe can be specified by providing an offset value. element.animate([ { opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 } ], 2000); note: offset values, if provided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order. it is not necessary to specify an offset for every
keyframe.
keyframes without a specified offset will be evenly spaced between adjacent
keyframes. the easing to apply between
keyframes can be specified by providing an easing value as illustrated below. element.animate([ { opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the s...
...ffset will be evenly spaced between adjacent
keyframes. the easing to apply between
keyframes can be specified by providing an easing value as illustrated below. element.animate([ { opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the specified easing only applies from the
keyframe where it is specified until the next
keyframe. any easing value specified on the options argument, however, applies across a single iteration of the animation — for the entire duration. an object containing
key-value pairs consisting of the property to animate and an array of values to iterate over. element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff...
...And 13 more matches
KeyboardEvent.initKeyEvent() - Web APIs
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
keyboardevent.init
keyevent() method is used to initialize the value of an event created using document.createevent("
keyboardevent"). events initialized in this way must have been created with the document.createevent("
keyboardevent") method. init
keyevent() must be called to set the event before it is dispatched. do not use this method anymore, use the
keyboardevent() constructor instead. this method is based on early drafts of document object model (dom) level 2 events specification and is ...
...must have been created with the document.createevent("
keyboardevent") method. init
keyevent() must be called to set the event before it is dispatched. do not use this method anymore, use the
keyboardevent() constructor instead. this method is based on early drafts of document object model (dom) level 2 events specification and is implemented in gecko-based browsers; other browsers implemented
keyboardevent.init
keyboardevent based on early drafts of document object model (dom) level 3 events specification. favor the modern constructor structure as the only cross-browser way of building events. ...
...ead. this method is based on early drafts of document object model (dom) level 2 events specification and is implemented in gecko-based browsers; other browsers implemented
keyboardevent.init
keyboardevent based on early drafts of document object model (dom) level 3 events specification. favor the modern constructor structure as the only cross-browser way of building events. syntax event.init
keyevent (type, bubbles, cancelable, viewarg, ctrl
keyarg, alt
keyarg, shift
keyarg, meta
keyarg,
keycodearg, charcodearg) parameters type is a domstring representing the type of event. bubbles is a boolean indicating whether the event should bubble up through the event chain or not (see bubbles). cancelable is a boolean i indicating whether the event can...
...And 12 more matches
KeyboardEvent.shiftKey - Web APIs
the
keyboardevent.shift
key read-only property is a boolean that indicates if the shift
key was pressed (true) or not (false) when the event occurred. ...
... the
keyboardevent.shift
key read-only property is a boolean that indicates if the shift
key was pressed (true) or not (false) when the event occurred. ...
... the
keyboardevent.shift
key read-only property is a boolean that indicates if the shift
key was pressed (true) or not (false) when the event occurred. ...
...And 8 more matches
KeyboardEvent.ctrlKey - Web APIs
the
keyboardevent.ctrl
key read-only property returns a boolean that indicates if the control
key was pressed (true) or not (false) when the event occured. ...
... the
keyboardevent.ctrl
key read-only property returns a boolean that indicates if the control
key was pressed (true) or not (false) when the event occured. ...
... the
keyboardevent.ctrl
key read-only property returns a boolean that indicates if the control
key was pressed (true) or not (false) when the event occured. ...
...And 7 more matches
KeyframeEffect.KeyframeEffect() - Web APIs
the
keyframeeffect() constructor of the web animations api returns a new
keyframeeffect object instance, and also allows you to clone an existing
keyframe effect object instance. syntax var
keyframes = new
keyframeeffect(element,
keyframeset,
keyframeoptions); var
keyframes = new
keyframeeffect(source
keyframes); parameters the first type of constructor (see above) creates a completely new
keyframeeffect object instance. its parameters are: element the dom element to be animated, or null.
keyframeset an
keyframe object or null.
keyframeoptions optional either an integer representing the animation's duration (in milliseconds), or an object containing one or more of the following: delay optional the number of milliseconds to delay the start of the animation. defaults to ...
...lts to 1, and can also take a value of infinity to make it repeat for as long as the element exists. composite determines how values are combined between this animation and the element's underlying values. iterationcomposite determines how values build from iteration to iteration in the current animation. ...
...as long as the element exists. composite determines how values are combined between this animation and the element's underlying values. iterationcomposite determines how values build from iteration to iteration in the current animation. the second type of constructor (see above) creates a clone of an existing
keyframeeffect object instance. its parameter is as follows: source
keyframes a
keyframeeffect object that you want to clone. ...
...And 6 more matches
MediaKeySession.onkeystatuseschange - Web APIs
this interface inherits from the extendableevent interface. ...
... this interface inherits from the extendableevent interface. ...
... this interface inherits from the extendableevent interface. ...
...And 4 more matches
PublicKeyCredentialCreationOptions.pubKeyCredParams - Web APIs
the pub
keycredparams property of the public
keycredentialcreationoptions dictionary is an array whose elements are objects describing the desired features of the credential to be created. these objects define the type of public-
key and the algorithm used for cryptographic signature operations. if this array contains multiple elements, they are sorted by descending order of preference. syntax pub
keycredparams = public
keycredentialcreationoptions.pub
keycredparams value an array whose elements are objects with the following properties: type a string describing type of public-
key credential to be created. as of this writing (march 2019), only "public-
key" may be used. alg a numeric identifier for the algorithm to be used to generate the
key pair. the links between identifier and algo...
...for the algorithm to be used to generate the
key pair. the links between identifier and algorithms are defined in this iana registry (e.g. -7 indicates the elliptic curve algorithm ecdsa with sha-256). though those elements are sorted by preference (the first element being the most prefered), it is up to the client to choose among those elements for building the credential. ...
...ithm to be used to generate the
key pair. the links between identifier and algorithms are defined in this iana registry (e.g. -7 indicates the elliptic curve algorithm ecdsa with sha-256). though those elements are sorted by preference (the first element being the most prefered), it is up to the client to choose among those elements for building the credential. ...
...And 4 more matches
KeyboardEvent.initKeyboardEvent() - Web APIs
canbubblearg whether or not the event can bubble. cancelablearg whether or not the event can be canceled. ...
... canbubblearg whether or not the event can bubble. cancelablearg whether or not the event can be canceled. ...
...ethod was introduced in draft of dom level 3 events, but deprecated in newer draft. gecko won't support this feature since implementing this method as experimental broke existing web apps (see bug 999645). web applications should use constructor instead of this if it's available. ...
...And 3 more matches
KeyboardEvent.keyCode - Web APIs
the deprecated
keyboardevent.
keycode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed
key. this is usually the decimal ascii (rfc 20) or windows 1252 code corresponding to the
key. if the
key can't be identified, this value is 0. you should avoid using this if possible; it's been deprecated for some time. instead, you should use
keyboardevent.code, if it's implemented. unfortunately, some browsers still don't have it, so you'll have to be careful to make sure you use one which is supported on all target browsers. web developers shouldn't use the
keycode attribute for printable characters when handling
keydown and
keyup events. ...
...possible; it's been deprecated for some time. instead, you should use
keyboardevent.code, if it's implemented. unfortunately, some browsers still don't have it, so you'll have to be careful to make sure you use one which is supported on all target browsers. web developers shouldn't use the
keycode attribute for printable characters when handling
keydown and
keyup events. as described above, the
keycode attribute is not useful for printable characters, especially those input with the shift or alt
key pressed. when implementing a shortcut
key handler, the
keypress event is usually better (at least when gecko is the runtime in use). see gecko
keypress event for details. ...
... printable characters when handling
keydown and
keyup events. as described above, the
keycode attribute is not useful for printable characters, especially those input with the shift or alt
key pressed. when implementing a shortcut
key handler, the
keypress event is usually better (at least when gecko is the runtime in use). see gecko
keypress event for details. example window.addeventlistener("
keydown", function (event) { if (event.defaultprevented) { return; // should do nothing if the default action has been cancelled } var handled = false; if (event.
key !== undefined) { // handle the event with
keyboardevent.
key and set handled true. } else if (event.
keycode !== undefined) { // handle the event with
keyboardevent.
keycode and set handled true. } if (handled) {...
...d set handled true. } else if (event.
keycode !== undefined) { // handle the event with
keyboardevent.
keycode and set handled true. } if (handled) { // suppress "double action" if event handled event.preventdefault(); } }, true); specifications specification status comment document object model (dom) level 3 events specificationthe definition of '
keyboardevent.
keycode' in that specification. obsolete initial definition; specified as deprecated ...
KeyboardEvent.altKey - Web APIs
the
keyboardevent.alt
key read-only property is a boolean that indicates if the alt
key (option or ⌥ on os x) was pressed (true) or not (false) when the event occured. syntax var alt
keypressed = instanceof
keyboardevent.alt
key return value boolean examples <html> <head> <title>alt
key example</title> <script type="text/javascript"> function showchar(e){ alert( "
key keydown: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "alt
key keydown: " + e.alt
key + "\n" ); } </script> </head> <body on
keydown="showchar(event);"> <p> press any character
key, with or without holding down the alt
key.<br /> you can also use the shift
key together with the alt
key. </p> </body> </html> specifications specification status comment ...
... obsolete initial definition. ...
... obsolete initial definition. ...
KeyboardEvent.metaKey - Web APIs
the
keyboardevent.meta
key read-only property returning a boolean that indicates if the meta
key was pressed (true) or not (false) when the event occurred. some operating systems may intercept the
key so it is never detected. note: on macintosh
keyboards, this is the ⌘ command
key. on windows
keyboards, this is the windows
key (⊞ windows). at least as of firefox 48, the ⊞ windows
key is not considered the "meta"
key.
keyboardevent.meta
key is false when the ⊞ windows is pressed. ...
...) or not (false) when the event occurred. some operating systems may intercept the
key so it is never detected. note: on macintosh
keyboards, this is the ⌘ command
key. on windows
keyboards, this is the windows
key (⊞ windows). at least as of firefox 48, the ⊞ windows
key is not considered the "meta"
key.
keyboardevent.meta
key is false when the ⊞ windows is pressed. ...
...he event occurred. some operating systems may intercept the
key so it is never detected. note: on macintosh
keyboards, this is the ⌘ command
key. on windows
keyboards, this is the windows
key (⊞ windows). at least as of firefox 48, the ⊞ windows
key is not considered the "meta"
key.
keyboardevent.meta
key is false when the ⊞ windows is pressed. syntax var meta
keypressed = instanceof
keyboardevent.meta
key return value a boolean example function ismeta
key(e) { alert("meta
key = " + e.meta
key); } <button onclick="ismeta
key(event)">click me with the meta
key</button> specifications specification status comment document object model (dom) level 3 events specificationthe definition of '
keyboardevent.meta
key' in that specification. obsolete in...
KeyframeEffect.getKeyframes() - Web APIs
the get
keyframes() method of a
keyframeeffect returns an array of the computed
keyframes that make up this animation along with their computed offsets. syntax var
keyframes =
keyframeeffect.get
keyframes(); parameters none. return value returns a sequence of objects with the following format: property value pairs as many property value pairs as are contained in each
keyframe of the animation. offset the offset of the
keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @
keyframes. this will be null if the
keyframe is automatically spaced using
keyframeeffect.spacing. ...
...rs as are contained in each
keyframe of the animation. offset the offset of the
keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @
keyframes. this will be null if the
keyframe is automatically spaced using
keyframeeffect.spacing. computedoffset the computed offset for this
keyframe, calculated when the list of computed
keyframes was produced according to
keyframeeffect.spacing. unlike offset, above, the computedoffset is never null. easing the timing function used from this
keyframe until the next
keyframe in the series. composite the
keyframeeffect.composite operation used to combine the values specified in this
keyframe with the underlying value. this wil...
...ed from this
keyframe until the next
keyframe in the series. composite the
keyframeeffect.composite operation used to combine the values specified in this
keyframe with the underlying value. this will be absent if the composite operation specified on the effect is being used. examples in the red queen race example, we can inspect alice and the redqueen's animation to see its individual
keyframes like so: // return the array of
keyframes redqueen_alice.effect.get
keyframes(); specifications specification status comment web animationsthe definition of '
keyframeeffect.get
keyframes()' in that specification. working draft editor's draft. ...
CSSKeywordValue.CSSKeywordValue() - Web APIs
the css
keywordvalue constructor creates a new css
keywordvalue object which represents css
keywords and other identifiers. syntax var css
keywordvalue = new css
keywordvalue(val) parameters value sets or returns the value of the new css
keywordvalue. examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector. ...
...ns the value of the new css
keywordvalue. examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector. #myelement { display: flex; } <div id="myelement">check the developer tools to see the log in the console and to inspect the style attribute on this div.</div> let
keyword = new css
keywordvalue('initial'); let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display',
keyword); console.log( myelement.get('display').value); // 'initial' console.dir(
keyword ); specifications specification status comment css typed om level 1the definition of 'css
keywordvalue' in that specification. working dr...
MediaKeyStatusMap.keys() - Web APIs
the
keys property of the media
keystatusmap interface returns a new iterator object, containing
keys for each element in the status map, in insertion order. syntax var iterator = media
keystatusmap.
keys() parameters none. returns a new iterator. specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...efinition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
KeyboardEvent.keyIdentifier - Web APIs
the deprecated
keyboardevent.
keyidentifier read-only property returns a "
key identifier" string that can be used to determine what
key was pressed. its non-deprecated replacement is
keyboardevent.
key. specifications not part of any current specification. this property was part of an old draft of the dom level 3 events specification, but it was removed in later drafts in favor of
keyboardevent.
key. ...
KeyboardLayoutMap.keys - Web APIs
the
keys read-only property of the
keyboardlayoutmap interface returns a new array iterator object that contains the
keys for each index in the array. syntax iterator =
keyboardlayoutmap.
keys value an iterator. specifications specification status comment
keyboard mapthe definition of '
keys' in that specification. editor's draft initial definition. ...
Key Values - Web APIs
the tables below list the standard
key values in various categories of
key, with an explanation of what the
key is typically used for. corresponding virtual
keycodes for common platforms are included where available. ...
... the tables below list the standard
key values in various categories of
key, with an explanation of what the
key is typically used for. corresponding virtual
keycodes for common platforms are included where available. ...
... the tables below list the standard
key values in various categories of
key, with an explanation of what the
key is typically used for. corresponding virtual
keycodes for common platforms are included where available. ...
...And 232 more matches
Enc Dec MAC Output Public Key as CSR
2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...include #include #include #include #include /* nss headers */ #include #include #include #include #include #include #include #include #include #include #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define default_
key_bits 1024 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enc
key_header "-----begin wrapped enc
key-----" #define enc
key_trailer "-----end wrapped enc
key-----" #define mac
key_header "-----begin wrapped mac
key-----" #define mac
key_trailer "-----end wrapped mac
key-----" #define iv_header ...
...And 93 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
nss sample code 6: encryption/decryption and mac and output public as a pkcs 11 csr. generates encryption/mac
keys and outputs public
key as pkcs11 certificate signing request /* this source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...rg/mpl/2.0/. ...
...And 61 more matches
SubtleCrypto.wrapKey() - Web APIs
the wrap
key() method of the subtlecrypto interface "wraps" a
key. this means that it exports the
key in an external, portable format, then encrypts the exported
key. wrapping a
key helps protect it in untrusted environments, such as inside an otherwise unprotected data store or in transmission over an unprotected network. as with subtlecrypto.export
key(), you specify an export format for the
key. to export a
key, it must have crypto
key.extractable set to true. but because wrap
key() also encrypts the
key to be imported, you also need to pass in the
key that must be used to encrypt it. this is sometimes called the "wrapping
key". the inverse of wrap
key() is subtlecrypto.unwrap
key(): while wrap
key is composed of export + encrypt, unwrap
key is composed of import + decrypt. syntax const re...
... have crypto
key.extractable set to true. but because wrap
key() also encrypts the
key to be imported, you also need to pass in the
key that must be used to encrypt it. this is sometimes called the "wrapping
key". the inverse of wrap
key() is subtlecrypto.unwrap
key(): while wrap
key is composed of export + encrypt, unwrap
key is composed of import + decrypt. syntax const result = crypto.subtle.wrap
key( format,
key, wrapping
key, wrapalgo ); parameters format is a string describing the data format in which the
key will be exported before it is encrypted. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublic
keyinfo format. jwk: json web
key format.
key is the crypto
key to wrap. ...
... to use aes-ctr, pass an aesctrparams object. to use aes-cbc, pass an aescbcparams object. ...
...And 58 more matches
Keyboard Shortcuts - Archive of obsolete content
« previousnext » you could use
keyboard event handlers to respond to the
keyboard. however, it would be tedious to do that for every button and menu item (though it could be necessary when one's
key commands are only triggered when the user is focused on a particular element). creating a
keyboard shortcut xul provides methods in which you can define
keyboard shortcuts. we've already seen in the section on menus that we can define an attribute called access
key which specifies the
key which a user can press to activate the menu or menu item. in the example below, the file menu can be selected by pressing alt + f together (or some other
key combination for a specific platform). once the file menu is open, the close menu item can be selected by pressing c. example 1 : source ...
...ey which specifies the
key which a user can press to activate the menu or menu item. in the example below, the file menu can be selected by pressing alt + f together (or some other
key combination for a specific platform). once the file menu is open, the close menu item can be selected by pressing c. example 1 : source view <menubar id="sample-menubar"> <menu id="file-menu" label="file" access
key="f"> <menupopup id="file-popup"> <menuitem id="close-command" label="close" access
key="c"/> </menupopup> </menu> </menubar> you can also use the access
key attribute on buttons. when the
key is pressed in this case, the button is selected. you might want to set up more general
keyboard shortcuts however. for example, pressing ctrl + c to copy text to the clipboard. although shor...
...menupopup> </menu> </menubar> you can also use the access
key attribute on buttons. when the
key is pressed in this case, the button is selected. you might want to set up more general
keyboard shortcuts however. for example, pressing ctrl + c to copy text to the clipboard. although shortcuts such as this might not always be valid, they will usually work any time the window is open. usually, a
keyboard shortcut will be allowed at any time and you can check to see whether it should do something using a script. for example, copying text to the clipboard should only work when some text is selected.
key element xul provides an element,
key, which lets you define a
keyboard shortcut for a window. ...
...And 52 more matches
SubtleCrypto.unwrapKey() - Web APIs
the unwrap
key() method of the subtlecrypto interface "unwraps" a
key. this means that it takes as its input a
key that has been exported and then encrypted (also called "wrapped"). it decrypts the
key and then imports it, returning a crypto
key object that can be used in the web crypto api. as with subtlecrypto.import
key(), you specify the
key's import format and other attributes of the
key to import details such as whether it is extractable, and which operations it can be used for. but because unwrap
key() also decrypts the
key to be imported, you also need to pass in the
key that must be used to decrypt it. this is sometimes called the "unwrapping
key". ...
...api. as with subtlecrypto.import
key(), you specify the
key's import format and other attributes of the
key to import details such as whether it is extractable, and which operations it can be used for. but because unwrap
key() also decrypts the
key to be imported, you also need to pass in the
key that must be used to decrypt it. this is sometimes called the "unwrapping
key". the inverse of unwrap
key() is subtlecrypto.wrap
key(): while unwrap
key is composed of decrypt + import, wrap
key is composed of encrypt + export. syntax const result = crypto.subtle.unwrap
key( format, wrapped
key, unwrapping
key, unwrapalgo, unwrapped
keyalgo, extractable,
keyusages ); parameters format is a string describing the data format of the
key to unwrap. it can be one of the followi...
...t, wrap
key is composed of encrypt + export. syntax const result = crypto.subtle.unwrap
key( format, wrapped
key, unwrapping
key, unwrapalgo, unwrapped
keyalgo, extractable,
keyusages ); parameters format is a string describing the data format of the
key to unwrap. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublic
keyinfo format. jwk: json web
key format. wrapped
key is an arraybuffer containing the wrapped
key in the given format. unwrapping
key is the crypto
key to use to decrypt the wrapped
key. the
key must have the unwrap
key usage set. ...
...And 46 more matches
Desktop mouse and keyboard controls - Game development
that way we can broaden the list of supported platforms. we'll look at this below. it's also easier to test control-independent features like gameplay on desktop if you develop it there, so you don't have to push the files to a mobile device every time you make a change in the source code. ...
...ote: the captain rogers: battle at andromeda is built with phaser and managing the controls is phaser-based, but it could also be done in pure javascript. the good thing about using phaser is that it offers helper variables and functions for easier and faster development, but it's totally up to you which approach you chose. ...
... done in pure javascript. the good thing about using phaser is that it offers helper variables and functions for easier and faster development, but it's totally up to you which approach you chose. pure javascript approach let's think about implementing pure javascript
keyboard/mouse controls in the game first to see how it would work. ...
...And 42 more matches
Encrypt Decrypt MAC Keys As Session Objects
nss sample code 4: encryption/decryption and mac
keys using session. generates encryption/mac
keys and uses session objects. /* this source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...de #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enc
key_header "-----begin aes
key ckaid-----" #define enc
key_trailer "-----end aes
key ckaid-----" #define mac
key_header "-----begin mac
key ckaid-----" #define mac
key_trailer "-----end mac
key ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer ...
...---" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { sym
key = 0, mac
key = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify '...
...And 41 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
encryption and decryption allow two communicating parties to disguise information they send to each other. ...
... encryption and decryption allow two communicating parties to disguise information they send to each other. ...
...of many products such as signed and encrypted email, single sign-on, and secure sockets layer (ssl) communications. this document introduces the basic concepts of public-
key cryptography. for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." public-
key cryptography is a set of well-established techniques and standards for protecting communications from eavesdropping, tampering, and impersonation attacks. encryption and decryption allow two communicating parties to disguise information they send to each other. the sender encrypts, or scrambles, information before sending it. the receiver decrypts, or unscrambles, the information after receivi...
...And 38 more matches
KeyboardEvent - Web APIs
keyboardevent objects describe a user interaction with the
keyboard; each event describes a single interaction between the user and a
key (or combination of a
key with modifier
keys) on the
keyboard. the event type (
keydown,
keypress, or
keyup) identifies what kind of
keyboard activity occurred. note:
keyboardevent events just indicate what interaction the user had with a
key on the
keyboard at a low level, providing no contextual meaning to that interaction. when you need to handle text input, use the input event instead.
keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
keyboardevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor
keyboard...
...p"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
keyboardevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor
keyboardevent() creates a new
keyboardevent object. constants the
keyboardevent interface defines the following constants. ...
...And 38 more matches
Example and tutorial: Simple synth keyboard - Web APIs
this article presents the code and working demo of a video
keyboard you can play using the mouse. the
keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume slider beneath the
keyboard. this example makes use of the following web api interfaces: audiocontext, oscillatornode, periodicwave, and gainnode. because oscillatornode is based on audioscheduledsourcenode, this is to some extent an example for that as well. the video
keyboard html there are three primary components to the display for our virtual
keyboard. the first is the musical
keyboard itself. ...
...nterfaces: audiocontext, oscillatornode, periodicwave, and gainnode. because oscillatornode is based on audioscheduledsourcenode, this is to some extent an example for that as well. the video
keyboard html there are three primary components to the display for our virtual
keyboard. the first is the musical
keyboard itself. we draw this in a pair of nested <div> elements so that we can make the
keyboard horizontally scrollable if all the
keys don't fit on the screen, without having them wrap around. the
keyboard first, we create space to build the
keyboard into. ...
...e three primary components to the display for our virtual
keyboard. the first is the musical
keyboard itself. we draw this in a pair of nested <div> elements so that we can make the
keyboard horizontally scrollable if all the
keys don't fit on the screen, without having them wrap around. the
keyboard first, we create space to build the
keyboard into. we will be programmatically constructing the
keyboard, because doing so gives us the flexibility to configure each
key as we determine the appropriate data for the corresponding note. in our case, we get each
key's frequency from a table, but it could be calculated algorithmically as well. ...
...And 36 more matches
SubtleCrypto.importKey() - Web APIs
the import
key() method of the subtlecrypto interface imports a
key: that is, it takes as input a
key in an external, portable format and gives you a crypto
key object that you can use in the web crypto api. the function accepts several import formats: see supported formats for details. syntax const result = crypto.subtle.import
key( format,
keydata, algorithm, extractable, usages ); parameters format is a string describing the data format of the
key to import. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublic
keyinfo format. jwk: json web
key format.
keydata is an arraybuffer, a typedarray, a dataview, or a jsonweb
key object containing the
key in the given format. algorithm is a dictionary object d...
... for hmac: pass an hmacimportparams object. ...
...format. jwk: json web
key format.
keydata is an arraybuffer, a typedarray, a dataview, or a jsonweb
key object containing the
key in the given format. algorithm is a dictionary object defining the type of
key to import and providing extra algorithm-specific parameters. for rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep: pass an rsahashedimportparams object. for ecdsa or ecdh: pass an ec
keyimportparams 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. for pbkdf2 : pass the string pbkdf2. ...
...And 35 more matches
KeyboardEvent: code values - Web APIs
the following tables show what code values are used for each native scancode or virtual
keycode on major platforms. the reason is that some browsers choose to interpret physical
keys differently, there are some differences in which
keys map to which codes. these tables show those variations when known. code values code values on windows this table shows the windows scan codes representing
keys and the
keyboardevent.code values which correspond to those hardware
keys. only
keys which generate scan codes on windows are listed. ...
... choose to interpret physical
keys differently, there are some differences in which
keys map to which codes. these tables show those variations when known. code values code values on windows this table shows the windows scan codes representing
keys and the
keyboardevent.code values which correspond to those hardware
keys. only
keys which generate scan codes on windows are listed. ...
... "digit4" "digit4" 0x0007 "digit5" "digit5" 0x0008 "digit6" "digit6" 0x0009 "digit7" "digit7" 0x000a "digit8" "digit8" 0x000b "digit9" "digit9" 0x000c "minus" "minus" 0x000d "equal" "equal" 0x000e "backspace" "backspace" 0x000f "tab" "tab" 0x0010 "
keyq" "
keyq" 0x0011 "
keyw" "
keyw" 0x0012 "
keye" "
keye" 0x0013 "
keyr" "
keyr" 0x0014 "
keyt" "
keyt" 0x0015 "
keyy" "
keyy" 0x0016 "
keyu" "
keyu" 0x0017 "
keyi" "
keyi" 0x0018 "
keyo" "
keyo" 0x0019 "
keyp" "
keyp" 0x001a "bracketleft" "bracketleft" 0x00...
...And 34 more matches
SubtleCrypto.deriveKey() - Web APIs
the derive
key() method of the subtlecrypto interface can be used to derive a secret
key from a master
key. it takes as arguments some initial
key material, the derivation algorithm to use, and the desired properties for the
key to derive. it returns a promise which will be fulfilled with a crypto
key object representing the new
key. it's worth noting that the three
key derivation algorithms you can use have quite different characteristics and are appropriate in quite different situations. see supported algorithms for some more detail on this. syntax const result = crypto.subtle.derive
key( algorithm, base
key, derived
keyalgorithm, extractable,
keyusages ); parameters algorithm is an object defining the derivation algorithm to use. to use ecdh, pass an ecdhk...
...r some more detail on this. syntax const result = crypto.subtle.derive
key( algorithm, base
key, derived
keyalgorithm, extractable,
keyusages ); parameters algorithm is an object defining the derivation algorithm to use. to use ecdh, pass an ecdh
keyderiveparams object. to use hkdf, pass an hkdfparams object. to use pbkdf2, pass a pbkdf2params object. base
key is a crypto
key representing the input to the derivation algorithm. if algorithm is ecdh, then this will be the ecdh private
key. otherwise it will be the initial
key material for the derivation function: for example, for pbkdf2 it might be a password, imported as a crypto
key using subtlecrypto.import
key(). derived
keyalgorithm is an object defining the algorithm the derived
key will be used for. ...
... the input to the derivation algorithm. if algorithm is ecdh, then this will be the ecdh private
key. otherwise it will be the initial
key material for the derivation function: for example, for pbkdf2 it might be a password, imported as a crypto
key using subtlecrypto.import
key(). derived
keyalgorithm is an object defining the algorithm the derived
key will be used for. for hmac: pass an hmac
keygenparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass an aes
keygenparams object. extractable is a boolean indicating whether it will be possible to export the
key using subtlecrypto.export
key() or subtlecrypto.wrap
key(). ...
...And 32 more matches
SubtleCrypto.exportKey() - Web APIs
the export
key() method of the subtlecrypto interface exports a
key: that is, it takes as input a crypto
key object and gives you the
key in an external, portable format. to export a
key, the
key must have crypto
key.extractable set to true.
keys can be exported in several formats: see supported formats in the subtlecrypto.import
key() page for details.
keys are not exported in an encrypted format: to encrypt
keys when exporting them use the subtlecrypto.wrap
key() api instead. syntax const result = crypto.subtle.export
key(format,
key); parameters format is a string value describing the data format in which the
key should be exported. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublic
keyinfo format. jwk: json web
key format. ...
...encrypt
keys when exporting them use the subtlecrypto.wrap
key() api instead. syntax const result = crypto.subtle.export
key(format,
key); parameters format is a string value describing the data format in which the
key should be exported. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublic
keyinfo format. jwk: json web
key format.
key is the crypto
key to export. return value result is a promise. if format was jwk, then the promise fulfills with a json object containing the
key. otherwise the promise fulfills with an arraybuffer containing the
key. exceptions the promise is rejected when one of the following exceptions is encountered: invalidaccesserror raised when trying to export a non-extractable k...
... exceptions the promise is rejected when one of the following exceptions is encountered: invalidaccesserror raised when trying to export a non-extractable
key. notsupported raised when trying to export in an unknown format. typeerror raised when trying to use an invalid format. examples note: you can try the working examples out on github. raw export this example exports an aes
key as an arraybuffer containing the bytes for the
key. see the complete code on github. /* export the given
key and write it into the "exported-
key" space. ...
...And 30 more matches
KeyboardEvent.getModifierState() - Web APIs
the
keyboardevent.getmodifierstate() method returns the current state of the specified modifier
key: true if the modifier is active (that is the modifier
key is pressed or locked), otherwise, false. syntax var active = event.getmodifierstate(
keyarg); returns a boolean parameters
keyarg a modifier
key value. the value must be one of the
keyboardevent.
key values which represent modifier
keys, or the string "accel" . this is case-sensitive. modifier
keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...y is pressed or locked), otherwise, false. syntax var active = event.getmodifierstate(
keyarg); returns a boolean parameters
keyarg a modifier
key value. the value must be one of the
keyboardevent.
key values which represent modifier
keys, or the string "accel" . this is case-sensitive. modifier
keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...e one of the
keyboardevent.
key values which represent modifier
keys, or the string "accel" . this is case-sensitive. modifier
keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
...And 29 more matches
nsIWindowsRegKey
xpcom/ds/nsiwindowsreg
key.idlscriptable this interface is designed to provide scriptable access to the windows registry system. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) the interface represents a single
key in the registry. this interface is highly win32 specific. ...
... designed to provide scriptable access to the windows registry system. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) the interface represents a single
key in the registry. this interface is highly win32 specific. ...
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) the interface represents a single
key in the registry. this interface is highly win32 specific. ...
...And 26 more matches
HTTP Public Key Pinning (HPKP) - HTTP
web clients such as browsers trust a lot of these cas, which can all create certificates for arbitrary domain names. ...
...web clients such as browsers trust a lot of these cas, which can all create certificates for arbitrary domain names. ...
...web clients such as browsers trust a lot of these cas, which can all create certificates for arbitrary domain names. ...
...And 25 more matches
SpiderMonkey 1.8.5
please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. ...
... please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. ...
... please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. ...
...And 24 more matches
IDBKeyRange - Web APIs
the idb
keyrange interface of the indexeddb api represents a continuous interval over some data type that is used for
keys. records can be retrieved from idbobjectstore and idbindex objects using
keys or a range of
keys. you can limit the range using lower and upper bounds. for example, you can iterate over all values of a
key in the value range a–z. a
key range can be a single value or a range with upper and lower bounds or endpoints. if the
key range has both upper and lower bounds, then it is bounded; if it has no bounds, it is unbounded. a bounded
key range can either be open (the endpoints are excluded) or closed (the endpoints are included). ...
...or example, you can iterate over all values of a
key in the value range a–z. a
key range can be a single value or a range with upper and lower bounds or endpoints. if the
key range has both upper and lower bounds, then it is bounded; if it has no bounds, it is unbounded. a bounded
key range can either be open (the endpoints are excluded) or closed (the endpoints are included). ...
...value or a range with upper and lower bounds or endpoints. if the
key range has both upper and lower bounds, then it is bounded; if it has no bounds, it is unbounded. a bounded
key range can either be open (the endpoints are excluded) or closed (the endpoints are included). ...
...And 23 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
introduction the technique described here does not involve any hacking. instead, you make your custom button as a self-contained extension. you can use the sample code provided here to make buttons that do various useful things. if you know how to program in javascript, then you can write your own code that does other things. you can use this page if all you really want is a button for some special purpose. ...
...ting point if you plan to write a more complex extension. note that this extension is very simplified. use other tutorials and articles to find out more—the main extensions page here is a good starting point. in particular, the articles creating toolbar buttons and building an extension explain the process in more detail. ...
...o write a more complex extension. note that this extension is very simplified. use other tutorials and articles to find out more—the main extensions page here is a good starting point. in particular, the articles creating toolbar buttons and building an extension explain the process in more detail. supported applications you can use the steps on this page only with seamon
key 1.x versions. ...
...And 22 more matches
KeyboardEvent.code - Web APIs
the
keyboardevent.code property represents a physical
key on the
keyboard (as opposed to the character generated by pressing the
key). in other words, this property returns a value that isn't altered by
keyboard layout or the state of the modifier
keys. if the input device isn't a physical
keyboard, but is instead a virtual
keyboard or accessibility device, the returned value will be set by the browser to match as closely as possible to what would happen with a physical
keyboard, to maximize compatibility between physical and virtual input devices. ...
...yboard layout or the state of the modifier
keys. if the input device isn't a physical
keyboard, but is instead a virtual
keyboard or accessibility device, the returned value will be set by the browser to match as closely as possible to what would happen with a physical
keyboard, to maximize compatibility between physical and virtual input devices. this property is useful when you want to handle
keys based on their physical positions on the input device rather than the characters associated with those
keys; this is especially common when writing code to handle input for games that simulate a gamepad-like environment using
keys on the
keyboard. ...
...n physical and virtual input devices. this property is useful when you want to handle
keys based on their physical positions on the input device rather than the characters associated with those
keys; this is especially common when writing code to handle input for games that simulate a gamepad-like environment using
keys on the
keyboard. be aware, however, that you can't use the value reported by
keyboardevent.code to determine the character generated by the
keystroke, because the
keycode's name may not match the actual character that's printed on the
key or that's generated by the computer when the
key is pressed. ...
...And 21 more matches
Gecko Keypress Event
gecko 1.9
key handling changed significantly after beta 5 (bug 359638, bug 429510 and the bugs on which they depend). the changes were risky so late in the release schedule, but they were necessary for fixing the many
key handling bugs. charcode of dom
keypress event if a
keypress event is fired without any modifier
keys (ctrl/alt(option)/meta(win/command)), then the properties of the event are the same as they were in gecko1.8.1. that is, when the currently selected
keyboard layout produces a unicode character (according to the current state of capslock and numlock), the charcode property contains that character. when the
keypress event includes modifier
keys, sometimes the charcode value is replaced with an ascii character according to the following rules. ...
...of the event are the same as they were in gecko1.8.1. that is, when the currently selected
keyboard layout produces a unicode character (according to the current state of capslock and numlock), the charcode property contains that character. when the
keypress event includes modifier
keys, sometimes the charcode value is replaced with an ascii character according to the following rules. the accel
key depends on the platform. ctrl is the accel
key on windows and linux, while meta (i.e. command) is the accel
key on mac. when the accel
key is down, the charcode of a
keypress event may be replaced with a character from a latin
keyboard layout only when the original character is not an ascii character. ...
... the charcode value depends on the state of capslock and numlock (except they are currently ignored if alt (option) is down on mac - see bug 432953). ...
...And 19 more matches
SpiderMonkey Build Documentation
building spidermon
key obsolete: the canonical documentation now lives at: https://firefox-source-docs.mozilla.org/js/build.html. use these instructions to build the latest spidermon
key source code. before you begin, make sure you have the right build tools for your computer: linux, windows, mac, others. when building a version older than 28, you'll additionally need nspr. and of course, you'll need to get the spidermon
key source code. non-developer (optimized) build use these steps if you want to install spidermon
key for production use or run performance benchmarks. ...
...you begin, make sure you have the right build tools for your computer: linux, windows, mac, others. when building a version older than 28, you'll additionally need nspr. and of course, you'll need to get the spidermon
key source code. non-developer (optimized) build use these steps if you want to install spidermon
key for production use or run performance benchmarks. (if you want to use spidermon
key as a library in your c++ application, or work on improving spidermon
key itself, do a developer/debug build instead, as described below.) cd js/src # this name should end with "_opt.obj" to make the version control system ignore it. mkdir build_opt.obj cd build_opt.obj /bin/sh ../configure.in # use "mozmake" on windows make a few notes about this: the most common build problems are depen...
... a developer/debug build instead, as described below.) cd js/src # this name should end with "_opt.obj" to make the version control system ignore it. mkdir build_opt.obj cd build_opt.obj /bin/sh ../configure.in # use "mozmake" on windows make a few notes about this: the most common build problems are dependency problems. see the build prerequisites page for your platform. spidermon
key does not support building in your source directory. you must configure and build in a separate build directory, as shown above. note: if you are on mac and getting an error similar to "checking whether the c compiler (gcc-4.2 ) works... no configure: error: installation or configuration problem: c compiler cannot create executables." you can try configuring like so: cc=clang cxx=clang++...
...And 18 more matches
SpiderMonkey 1.8.7
draft in progress - this is a draft, and right now it's mostly just a copy of the 1.8.5 release notes. xxx needs updating the mozilla javascript team is pleased to announce the release of spidermon
key 1.8.5. you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz (md5 checksum: a4574365938222adca0a6bd33329cb32). spidermon
key 1.8.5 is the javascript engine that shipped in firefox 4.0. it is much faster than spidermon
key 1.8, implements es-5 (ecma 262, 5th edition), and contains many new language and api features, described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or, file bugs at bugzilla.mozilla.org under product: core, component: javascript ...
...the jit is supported only on x86, x86_64 and arm architectures. ...
... contains many new language and api features, described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or, file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. —22 march 2011 platform support spidermon
key 1.8.7 is supported on all the platforms where firefox 10 runs. spidermon
key 1.8.7 includes type inference, which boosts the speed of the jägermon
key jit by about 30% over version 1.8.5. type inference largely obviates tracemon
key, so the tracemon
key jit has been removed. the jit is supported only on x86, x86_64 and arm architectures. on other platforms, the jit is simply disabled; javascript code runs in an interpreter, as in previous versions. it's the same language, j...
...And 18 more matches
IDBIndex.getKey() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired. ...
... return value an idbrequest object on which subsequent events related to this operation are fired. ...
... return value an idbrequest object on which subsequent events related to this operation are fired. ...
...And 18 more matches
Bookmark Keywords - Archive of obsolete content
practically every web surfer has bookmarks, of course, and power surfers usually have hundreds stuffed into folders within folders. in addition to being handy pointers to useful resources, bookmarks in mozilla can be used to make the address bar itself a power tool. searches, lookups, package tracking, and even word definitions can all be retrieved from user-customized bookmarks. ...
... power surfers usually have hundreds stuffed into folders within folders. in addition to being handy pointers to useful resources, bookmarks in mozilla can be used to make the address bar itself a power tool. searches, lookups, package tracking, and even word definitions can all be retrieved from user-customized bookmarks. the
key to this ability, if you'll pardon the pun, is the ability to add a
keyword to any mozilla bookmark. under ordinary circumstances, this might be used to reduce typing of a common url: http://www.cnn.com/ could be given the
keyword cnn. once that's done, all it takes to go to the cnn home page would be to type <tt>cnn</tt> into the address bar. mozilla will automatically expand the
keyword to the corresponding bookmarked url, and load up the site. that's pretty intere...
...e given the
keyword cnn. once that's done, all it takes to go to the cnn home page would be to type <tt>cnn</tt> into the address bar. mozilla will automatically expand the
keyword to the corresponding bookmarked url, and load up the site. that's pretty interesting on its own, but mozilla takes it a step further by allowing the user to define an "entry point" for added information. for example, a
keyworded bookmark could be set up so that a user could type <tt>google spam and eggs</tt> and thereby trigger a google search for the words "spam and eggs." because these tools require bookmarks with specific
keywords in order to work, they will be referred to hereafter as
keymarks, as distinct from regular bookmarks. laying the groundwork we're going to pick a relatively easy example to illustra...
...And 17 more matches
key - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the
key element defines a window-global
keyboard shortcut and must be placed inside a
keyset element. when a
key matching the attributes on the
key element is pressed, the command will be fired on the
key element. the
key pressed must match the
key attribute (or
keycode attribute) as well as the modifiers attribute in order for the
key element to be activated. for the shortcut defined using the
key element to work, you must specify a command attribute (or an oncommand handler) on the
key element. ...
...ey element is pressed, the command will be fired on the
key element. the
key pressed must match the
key attribute (or
keycode attribute) as well as the modifiers attribute in order for the
key element to be activated. for the shortcut defined using the
key element to work, you must specify a command attribute (or an oncommand handler) on the
key element. to display the shortcut defined with the
key element in the ui, you can use <menuitem
key="
key element's id" command="command id" .../>. in order to use (non-default)
key commands within specific elements, you will need to listen for
key events. more information is available in the xul tutorial. ...
... disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. ...
...And 17 more matches
<keygen> - HTML: Hypertext Markup Language
content categories flow content, phrasing content, interactive content, listed, labelable, submittable, resettable form-associated element, palpable content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. ...
...asing content, interactive content, listed, labelable, submittable, resettable form-associated element, palpable content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents any element that accepts phrasing content. permitted aria roles none dom interface html
keygenelement attributes this element includes the global attributes. autofocus this boolean attribute lets you specify that the 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, which is a boolean. challenge a challenge string that is subm...
... this element includes the global attributes. autofocus this boolean attribute lets you specify that the 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, which is a boolean. challenge a challenge string that is submitted along with the public
key. defaults to an empty string if not specified. disabled this boolean attribute indicates that the form control is not available for interaction. form the form element that this element is associated with (its form owner). the value of the attribute must be an id of a <form> element in the same document. if this attribute is not specified, this element must be a descendant of a <form> element.
...And 16 more matches
Keyboard-navigable JavaScript widgets - Accessibility
overview web applications often use javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same
keyboard functionality that their desktop counterparts do. this document describes techniques to make javascript widgets accessible with the
keyboard. using tabindex by default, when people use the tab
key to browse a webpage, only interactive elements (like links, form controls) get focused. ...
...their desktop counterparts do. this document describes techniques to make javascript widgets accessible with the
keyboard. using tabindex by default, when people use the tab
key to browse a webpage, only interactive elements (like links, form controls) get focused. with the tabindex global attribute, authors can make other elements focusable, too. when set to 0, the element becomes focusable by
keyboard and script. when set to -1, the element becomes focusable by script, but it does not become part of the
keyboard focus order. the order in which elements gain focus when using a
keyboard, is the source order by default. in exceptional circumstances, authors may want to redefine the order. to do this, authors can set tabindex to any positive number. warning: avoid using positive values for...
...browsers: tabindex attribute focusable with mouse or javascript via element.focus() tab navigable not present follows the platform convention of the element (yes for form controls, links, etc.). follows the platform convention of the element. negative (i.e. tabindex="-1") yes no; author must focus the element with focus() in response to arrow or other
key presses. zero (i.e. tabindex="0") yes in tab order relative to element's position in document (note that interactive elements like <a> have this behavior by default, they don't need the attribute). positive (e.g. tabindex="33") yes tabindex value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab ord...
...And 14 more matches
Using the Places keywords API
using the places
keywords api the places
keywords api allows to assign a
keyword to an url.
keywords represent an alias for the given url in the autocomplete (aka awesomebar) field, with smart replacement of query terms. a
keyword can only be associated to a given url, it's not possible to associate the same
keyword with multiple urls (doing so will just update the url it's pointing to). each
keyword can be associated with post data, in such a case a post action will be executed when the given url is selected from the awesomebar. different
keywords can reference the same url, if their post data differ.
keywords in firefox are currently created through the add
keyword for this search contextual menu option in form text fields. ...
...eyword can be associated with post data, in such a case a post action will be executed when the given url is selected from the awesomebar. different
keywords can reference the same url, if their post data differ.
keywords in firefox are currently created through the add
keyword for this search contextual menu option in form text fields. note this is the same feature previously known as bookmark
keywords, the
key difference is that
keywords are not bound to a specific bookmark, but to a specific url. ...
...from the awesomebar. different
keywords can reference the same url, if their post data differ.
keywords in firefox are currently created through the add
keyword for this search contextual menu option in form text fields. note this is the same feature previously known as bookmark
keywords, the
key difference is that
keywords are not bound to a specific bookmark, but to a specific url. using the
keywords api the
keywords api is a promise-based api available through the placesutils module: components.utils.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazymodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); setting a
keyword for an url the insert() method accepts a
keyword entry object describing the
keyword to insert. it has the following prop...
...And 13 more matches
IDBIndex.openKeyCursor() - Web APIs
the open
keycursor() method of the idbindex interface returns an idbrequest object, and, in a separate thread, creates a cursor over the specified
key range, as arranged by this index. the method sets the position of the cursor to the appropriate
key, based on the specified direction. if the
key range is not specified or is null, then the range includes all the
keys. a success event is always fired on the result object. if at least one
key matches the
key range, then the result property of the event is set to the new idbcursor object; the
key property of the cursor object is set to the found
key and the primary
key property is set to the the corresponding primary
key of the found record. if no
keys match the
key range, then then the result property of the event is set to null. ...
... least one
key matches the
key range, then the result property of the event is set to the new idbcursor object; the
key property of the cursor object is set to the found
key and the primary
key property is set to the the corresponding primary
key of the found record. if no
keys match the
key range, then then the result property of the event is set to null. note: cursors returned by open
keycursor() do not make the referenced value available as idbindex.opencursor does. this makes obtaining a list of
keys much more efficient. note: this feature is available in web workers. ...
... direction optional the cursor's direction. ...
...And 13 more matches
accesskey - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: in the whatwg spec, it says you can specify multiple space-separated characters, and the browser will use the first one it supports. however, this does not work in most browsers. ie/edge uses the first one it supports without problems, provided there are no conflicts with other commands. ...
...ttps://github.com/mdn/interactive-examples and send us a pull request. note: in the whatwg spec, it says you can specify multiple space-separated characters, and the browser will use the first one it supports. however, this does not work in most browsers. ie/edge uses the first one it supports without problems, provided there are no conflicts with other commands. ...
...ecify multiple space-separated characters, and the browser will use the first one it supports. however, this does not work in most browsers. ie/edge uses the first one it supports without problems, provided there are no conflicts with other commands. ...
...And 12 more matches
PopupKeys - Archive of obsolete content
cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. ...
...cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. ...
...cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. ...
...And 11 more matches
SpiderMonkey Internals
this document is talking about partially obsolete things. design walk-through at heart, spidermon
key is a fast interpreter that runs an untyped bytecode and operates on values of type js::value—type-tagged values that represent the full range of javascript values. in addition to the interpreter, spidermon
key contains a just-in-time (jit) compiler, a garbage collector, code implementing the basic behavior of javascript values, a standard library implementing ecma 262-5.1 §15 with various extensions, and a few public apis. ...
...::value—type-tagged values that represent the full range of javascript values. in addition to the interpreter, spidermon
key contains a just-in-time (jit) compiler, a garbage collector, code implementing the basic behavior of javascript values, a standard library implementing ecma 262-5.1 §15 with various extensions, and a few public apis. interpreter like many portable interpreters, spidermon
key's interpreter is mainly a single, tremendously long function that steps through the bytecode one instruction at a time, using a switch statement (or faster alternative, depending on the compiler) to jump to the appropriate chunk of code for the current instruction. a js-to-js function call pushes a javascript stack frame without growing the c stack. but since js-to-c-to-js call stacks are common,...
...y long function that steps through the bytecode one instruction at a time, using a switch statement (or faster alternative, depending on the compiler) to jump to the appropriate chunk of code for the current instruction. a js-to-js function call pushes a javascript stack frame without growing the c stack. but since js-to-c-to-js call stacks are common, the interpreter is reentrant. some spidermon
key bytecode operations have many special cases, depending on the type of their arguments. common cases are inlined in the interpreter loop, breaking any abstractions that stand in the way. so optimizations such as dense arrays and the property cache are, alas, not transparently tucked away in the jsarray.* and jsobj.* files. both guest-star in jsinterp.cpp (to thunderous applause from firefox users)...
...And 11 more matches
IDBKeyRange.bound() - Web APIs
loweropen optional indicates whether the lower bound excludes the endpoint value. the default is false. ...
... loweropen optional indicates whether the lower bound excludes the endpoint value. the default is false. ...
... loweropen optional indicates whether the lower bound excludes the endpoint value. the default is false. ...
...And 11 more matches
PublicKeyCredentialCreationOptions - Web APIs
the public
keycredentialcreationoptions dictionary of the web authentication api holds options passed to navigators.credentials.create() in order to create a public
keycredential. properties public
keycredentialcreationoptions.rp an object describing the relying party which requested the credential creation. public
keycredentialcreationoptions.user an object describing the user account for which the credential is generated. public
keycredentialcreationoptions.challenge a buffersource, emitted by the relying party's server and used as a cryptographic challenge. this value will be signed by the authenticator and the signature will be sent back as part of authenticatorattestationresponse.attestationobject. ...
...edentialcreationoptions.user an object describing the user account for which the credential is generated. public
keycredentialcreationoptions.challenge a buffersource, emitted by the relying party's server and used as a cryptographic challenge. this value will be signed by the authenticator and the signature will be sent back as part of authenticatorattestationresponse.attestationobject. public
keycredentialcreationoptions.pub
keycredparams an array of element which specify the desired features of the credential, including its type and the algorithm used for the cryptographic signature operations. this array is sorted by descending order of preference. ...
...ed by the authenticator and the signature will be sent back as part of authenticatorattestationresponse.attestationobject. public
keycredentialcreationoptions.pub
keycredparams an array of element which specify the desired features of the credential, including its type and the algorithm used for the cryptographic signature operations. this array is sorted by descending order of preference. public
keycredentialcreationoptions.timeout optional a numerical hint, in milliseconds, which indicates the time the caller is willing to wait for the creation operation to complete. this hint may be overridden by the browser. public
keycredentialcreationoptions.excludecredentials optional an array of descriptors for existing credentials. this is provided by the relying party to avoid creating new public ...
...And 11 more matches
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
by convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the html standard. 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. <kbd> may be nested in various combinations with the <samp> (sample output) element to represent various forms of input or output based on visual cues. ...
...accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. usage notes other elements can be used in tandem with <kbd> to represent more specific scenarios: nesting a <kbd> element within another <kbd> element represents an actual
key or other unit of input as a portion of a larger input. see representing
keystrokes within an input below. nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system. see echoed input, below, for an example. nesting a <samp> element inside a <kbd> element, on the other hand, represents input which is based on text presented by the system,...
...yed on the screen. see the example under representing onscreen input options below. you can define a custom style to override the browser's default font selection for the <kbd> element, although the user's preferences may potentially override your css. ...
...And 11 more matches
Extensions support in SeaMonkey 2 - Archive of obsolete content
starting with seamon
key 2 alpha 1 seamon
key supports toolkit/-style extensions. these type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions. the basics to support seamon
key 2 as a target application, you need to add it to the list of target applications in the extension's install.rdf file. the code for that will look something like this: <em:targetapplication> <!-- seamon
key --> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0</em:minversion> <em:maxversion>2.*</em:maxversion> </description> </em:targetapplication> the install.js is not supported any more and should be removed. differences as compared to other toolkit/-based applications you need to overlay/open ...
... <em:minversion>2.0</em:minversion> <em:maxversion>2.*</em:maxversion> </description> </em:targetapplication> the install.js is not supported any more and should be removed. differences as compared to other toolkit/-based applications you need to overlay/open different chrome urls as compared to firefox. ...
...there are exceptions, but these are few and far between. seamon...
...And 10 more matches
SpiderMonkey: The Mozilla JavaScript runtime
jsapi cookbook shows the jsapi translation of some commonly used javascript expressions and statements. ...
... jsapi cookbook shows the jsapi translation of some commonly used javascript expressions and statements. ...
... jsapi cookbook shows the jsapi translation of some commonly used javascript expressions and statements. ...
...And 10 more matches
PublicKeyCredential - Web APIs
the public
keycredential interface provides information about a public
key / private
key pair, which is a credential for logging in to a service using an un-phishable and data-breach resistant asymmetric
key pair instead of a password. it inherits from credential, and was created by the web authentication api extension to the credential management api. other interfaces that inherit from credential are passwordcredential and federatedcredential. note: this api is restricted to top-level contexts. use from within an <iframe> element will not have any effect. properties public
keycredential.type read only secure context inherited from credential. always set to public-
key for public
keycredential instances. ...
...e credential management api. other interfaces that inherit from credential are passwordcredential and federatedcredential. note: this api is restricted to top-level contexts. use from within an <iframe> element will not have any effect. properties public
keycredential.type read only secure context inherited from credential. always set to public-
key for public
keycredential instances. public
keycredential.id read only secure context inherited from credential and overridden to be the base64url encoding of public
keycredential.rawid. ...
...ted to top-level contexts. use from within an <iframe> element will not have any effect. properties public
keycredential.type read only secure context inherited from credential. always set to public-
key for public
keycredential instances. public
keycredential.id read only secure context inherited from credential and overridden to be the base64url encoding of public
keycredential.rawid. public
keycredential.rawid read only secure context an arraybuffer that holds the globally unique identifier for this public
keycredential. this identifier can be used to look up credentials for future calls to credentialscontainer.get. public
keycredential.response read only secure context an instance of an authenticatorresponse object. it is either of type authenticatorattestationresponse if the publick...
...And 10 more matches
@keyframes - CSS: Cascading Style Sheets
the @
keyframes css at-rule controls the intermediate steps in a css animation sequence by defining styles for
keyframes (or waypoints) along the animation sequence. this gives more control over the intermediate steps of the animation sequence than transitions. syntax @
keyframes slidein { from { transform: translatex(0%); } to { transform: translatex(100%); } } values <custom-ident> a name identifying the
keyframe list. this must match the identifier production in css syntax. from a starting offset of 0%. to an ending offset of 100%. <percentage> a percentage of the time through the animation sequence at which the specified
keyframe should occur. description javascript can access the @
keyframes at-rule with the css object model interface css
keyframesrule. to ...
...> a name identifying the
keyframe list. this must match the identifier production in css syntax. from a starting offset of 0%. to an ending offset of 100%. <percentage> a percentage of the time through the animation sequence at which the specified
keyframe should occur. description javascript can access the @
keyframes at-rule with the css object model interface css
keyframesrule. to use
keyframes, create a @
keyframes rule with a name that is then used by the animation-name property to match an animation to its
keyframe declaration. each @
keyframes rule contains a style list of
keyframe selectors, which specify percentages along the animation when the
keyframe occurs, and a block containing the styles for that
keyframe. ...
...this can be used to animate an element from its initial state and back. ...
...And 10 more matches
SpiderMonkey 1.8
the mozilla javascript team is pleased to announce the release of spidermon
key 1.8 release candidate 1. you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js-1.8.0-rc1.tar.gz (md5 checksum: eaad8815dcc66a717ddb87e9724d964e). spidermon
key 1.8 is the javascript engine that shipped in firefox 3.0. it is much faster than spidermon
key 1.7 and contains a few new language features and api features, described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or, file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. —9 march 2009 known issues spidermon
key 1.8 has one known significant regression from 1.7. in js_threadsafe builds, some objects are...
...ermon
key 1.8 has one known significant regression from 1.7. in js_threadsafe builds, some objects are not safe to be shared among threads. this includes iterators and generators (bug 349263) and arrays (bug 417501). in short, applications that share objects among threads in such a way that two threads could access an array, iterator, or generator object at the same time should not use spidermon
key 1.8. there is a minor known bug in the new javascript 1.8 functionality. when javascript 1.8 support is enabled, the parser accepts some incorrect programs by inserting a semicolon where it should instead throw a syntaxerror (bug 384758). this bug will be fixed in 1.8.1. migrating to spidermon
key 1.8 spidermon
key 1.8 is not binary-compatible with previous releases. it is source-compatib...
...a minor known bug in the new javascript 1.8 functionality. when javascript 1.8 support is enabled, the parser accepts some incorrect programs by inserting a semicolon where it should instead throw a syntaxerror (bug 384758). this bug will be fixed in 1.8.1. migrating to spidermon
key 1.8 spidermon
key 1.8 is not binary-compatible with previous releases. it is source-compatible with spidermon
key 1.7 though, which means you can probably just recompile and relink your application. a handful of changes are not backwards-compatible: the result of assigning to a property with a setter has changed (bug 312354). in javascript 1.7 and earlier, x = [].length = "7"; would store the number 7 in x. now this statement stores the string "7" in x. the new behavior conforms to the ecmascript standard...
...And 9 more matches
CSSKeyframeRule - Web APIs
it has no specific methods. ...
...it has no specific methods. ...
...it has no specific methods. ...
...And 9 more matches
IDBObjectStore.getKey() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired. ...
... return value an idbrequest object on which subsequent events related to this operation are fired. ...
... return value an idbrequest object on which subsequent events related to this operation are fired. ...
...And 9 more matches
SpiderMonkey releases
our continuous integration system does produce a tarball that is built into a binary that runs our smoke tests, but we do not maintain it nor actively test its suitability for general embedding. we have periodically created "releases", but they are best-effort and incomplete. we do happily accept patches, and make some effort to keep the tip of the gecko tree minimally working as an embeddable source package. we are very limited in our ability to support older versions, including those labeled as "releases" on this page. ...
...support older versions, including those labeled as "releases" on this page. ...
...sions, including those labeled as "releases" on this page. ...
...And 8 more matches
Document: keydown event - Web APIs
the
keydown event is fired when a
key is pressed. unlike the
keypress event, the
keydown event is fired for all
keys, regardless of whether they produce a character value. bubbles yes cancelable yes interface
keyboardevent event handler property on
keydown the
keydown and
keyup events provide a code indicating which
key is pressed, while
keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by
keydown and
keyup, but as 97 by
keypress. an uppercase "a" is reported as 65 by all events. ...
...ble yes interface
keyboardevent event handler property on
keydown the
keydown and
keyup events provide a code indicating which
key is pressed, while
keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by
keydown and
keyup, but as 97 by
keypress. an uppercase "a" is reported as 65 by all events. since firefox 65, the
keydown and
keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see
keydown and
keyup events are now fired during ime composition for more useful details). ...
..., a lowercase "a" will be reported as 65 by
keydown and
keyup, but as 97 by
keypress. an uppercase "a" is reported as 65 by all events. since firefox 65, the
keydown and
keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see
keydown and
keyup events are now fired during ime composition for more useful details). ...
...And 8 more matches
Document: keyup event - Web APIs
the
keyup event is fired when a
key is released. bubbles yes cancelable yes interface
keyboardevent event handler property on
keyup the
keydown and
keyup events provide a code indicating which
key is pressed, while
keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by
keydown and
keyup, but as 97 by
keypress. an uppercase "a" is reported as 65 by all events. note: if you're looking for a way to react to changes in an input's value, you should use the input event. some changes are not detectable by
keyup, for example pasting text from the context menu in a text input. ...
... was entered. for example, a lowercase "a" will be reported as 65 by
keydown and
keyup, but as 97 by
keypress. an uppercase "a" is reported as 65 by all events. note: if you're looking for a way to react to changes in an input's value, you should use the input event. some changes are not detectable by
keyup, for example pasting text from the context menu in a text input. since firefox 65, the
keydown and
keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see
keydown and
keyup events are now fired during ime composition for more useful details). ...
... should use the input event. some changes are not detectable by
keyup, for example pasting text from the context menu in a text input. since firefox 65, the
keydown and
keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see
keydown and
keyup events are now fired during ime composition for more useful details). to ignore all
keyup events that are part of composition, do something like this (229 is a special value set for a
keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("
keyup", event => { if (event.iscomposing || event.
keycode === 229) { return; } // do something }); examples this example logs the
keyboardevent.code value whenever you release a
key. addeventli...
...And 8 more matches
Element: keydown event - Web APIs
the
keydown event is fired when a
key is pressed. unlike the
keypress event, the
keydown event is fired for all
keys, regardless of whether they produce a character value. bubbles yes cancelable yes interface
keyboardevent event handler property on
keydown the
keydown and
keyup events provide a code indicating which
key is pressed, while
keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by
keydown and
keyup, but as 97 by
keypress. an uppercase "a" is reported as 65 by all events.
keyboard events are only generated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1". ...
...vide a code indicating which
key is pressed, while
keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by
keydown and
keyup, but as 97 by
keypress. an uppercase "a" is reported as 65 by all events.
keyboard events are only generated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1". since firefox 65, the
keydown and
keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see
keydown and
keyup events are now fired during ime composition for more useful details). ...
...nts.
keyboard events are only generated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1". since firefox 65, the
keydown and
keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see
keydown and
keyup events are now fired during ime composition for more useful details). ...
...And 8 more matches
IDBCursor.continuePrimaryKey() - Web APIs
this method is only valid for cursors coming from an index. using it for cursors coming from an object store will throw an error. ...
... this method is only valid for cursors coming from an index. using it for cursors coming from an object store will throw an error. ...
... this method is only valid for cursors coming from an index. using it for cursors coming from an object store will throw an error. ...
...And 8 more matches
Keyboard API - Web APIs
the
keyboard api provides methods for working with a physical
keyboard that is attached to a device running a browser. it provides several capabilities.
keyboard mapping provides an interface for retrieving the string generated by particular physical
key on a
keyboard to correctly identify that
key to a user.
keyboard locking enables a web page to capture
keys that are normally reserved by the user agent or the underlying operating system. the intended use of the
keyboard api is by web applications such as games or remote access apps that provide a full-screen immersive experience. ...
... for retrieving the string generated by particular physical
key on a
keyboard to correctly identify that
key to a user.
keyboard locking enables a web page to capture
keys that are normally reserved by the user agent or the underlying operating system. the intended use of the
keyboard api is by web applications such as games or remote access apps that provide a full-screen immersive experience.
keyboard api concepts and usage
keyboard mapping on physical
keyboards, the code attribute contains the physical location of the
key that was pressed, and the
key attribute contains the string generated by pressing the
key at that physical location on the
keyboard. ...
... the
keyboard api is by web applications such as games or remote access apps that provide a full-screen immersive experience.
keyboard api concepts and usage
keyboard mapping on physical
keyboards, the code attribute contains the physical location of the
key that was pressed, and the
key attribute contains the string generated by pressing the
key at that physical location on the
keyboard. the
key value takes into account the
keyboard's locale (for example, 'en-us'), layout (for example, 'qwerty'), and modifier-
key state (shift, control, etc.). historically there has been no way to retrieve that information. the
keyboard map api provides a way to retrieve the string generated by a particular
key press, through the
keyboard interface and the
keyboardlayoutmap interface. ...
...And 8 more matches
hotkeys - Archive of obsolete content
assign hot
key combinations to functions in your add-on. usage to define a hot
key combination, create a hot
key object, passing it the combination and a function to be called when the user presses that combination. for example, this add-on defines two hot
key combinations, to show and hide a panel: // define
keyboard shortcuts for showing and hiding a custom panel. var { hot
key } = require("sdk/hot
keys"); var showhot
key = hot
key({ combo: "accel-shift-o", onpress: function() { showmypanel(); } }); var hidehot
key = hot
key({ combo: "accel-alt-shift-o", onpress: function() { hidemypanel(); } }); choosing hot
keys hot
keys should be chosen with care. it's very easy to use combinations that clash with hot
keys defined for firefox or for other add-ons. the following commonly ...
...for example, accel-s is typically used to save a file, but if you use it for something completely different, then it would be extremely confusing for users. ...
...for example, accel-s is typically used to save a file, but if you use it for something completely different, then it would be extremely confusing for users. ...
...And 7 more matches
enumKeys - Archive of obsolete content
enum
keys enumerates the registry sub
keys for the given
key. method of winreg object syntax string enum
keys ( string
key, int sub
keyindex ); parameters the enum
keys method has the following parameters:
key the
key path to the appropriate location in the
key hierarchy, such as "software\\netscape\\navigator\\mail". sub
keyindex an integer representing the 0-based index of the sub
key being sought. returns the name if it succeeded; null if the referenced value does not exist. description enum
keys can be used to iterate through the sub
keys at a given
key location. the following example shows how to use enum
keys to find the plugins subdirectory below the various mozilla-based browser installations. ...
...ing the 0-based index of the sub
key being sought. returns the name if it succeeded; null if the referenced value does not exist. description enum
keys can be used to iterate through the sub
keys at a given
key location. the following example shows how to use enum
keys to find the plugins subdirectory below the various mozilla-based browser installations. ...
...sed index of the sub
key being sought. returns the name if it succeeded; null if the referenced value does not exist. description enum
keys can be used to iterate through the sub
keys at a given
key location. the following example shows how to use enum
keys to find the plugins subdirectory below the various mozilla-based browser installations. ...
...And 7 more matches
accesskey - Archive of obsolete content
« xul reference home attribute of: button, checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton, textbox access
key type: character this should be set to a character that is used as a shortcut
key. this should be one of the characters that appears in the label attribute for the element. on non-macintosh platforms, the character on the element's label matching the access
key is underlined. for example, when a menu labeled 'file' has an access
key of 'f', the generated label will be 'file'. when the user presses a modifier
key specific to the platform (eg, control* on windows, command* on macintosh) and the access
key, the element will be focused and/or activated from anywhere in the window. on the macintosh, labels are never u...
...ing the access
key is underlined. for example, when a menu labeled 'file' has an access
key of 'f', the generated label will be 'file'. when the user presses a modifier
key specific to the platform (eg, control* on windows, command* on macintosh) and the access
key, the element will be focused and/or activated from anywhere in the window. on the macintosh, labels are never underlined, however access
keys can still be used by pressing the letter combined with the command
key. *(these are the
keys corresponding to event.ctrl
key and event.meta
key respectively when listening to
key events) although the value is case insensitive, a letter with the case matching the access
key attribute will be used if both cases exist in the label. otherwise, if the label has two or more characters which are same ...
...e used by pressing the letter combined with the command
key. *(these are the
keys corresponding to event.ctrl
key and event.meta
key respectively when listening to
key events) although the value is case insensitive, a letter with the case matching the access
key attribute will be used if both cases exist in the label. otherwise, if the label has two or more characters which are same as its access
key, the first of those characters in the label will be underlined. if a label doesn't have the specified character, the character will be appended to the label with parentheses. for example, when an access
key of an 'open' label is 'a', the generated label will be 'open (a)'. however, if the last character of the label is an ellipsis or a colon, the access
key text is inserted before them. this allo...
...And 7 more matches
Paddle and keyboard controls - Game development
he following just below your drawball() function: function drawpaddle() { ctx.beginpath(); ctx.rect(paddlex, canvas.height-paddleheight, paddlewidth, paddleheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } allowing the user to control the paddle we can draw the paddle wherever we want, but it should respond to the user's actions. it's time to implement some
keyboard controls. we will need the following: two variables for storing information on whether the left or right control button is pressed. two event listeners for
keydown and
keyup events. we want to run some code to handle the paddle movement when the buttons are pressed. two functions handling the
keydown and
keyup events the code that will be run when the buttons are pressed. the ability ...
...e run when the buttons are pressed. the ability to move the paddle left and right pressed buttons can be defined and initialized with boolean variables like in the example. add these lines somewhere near the rest of your variables: var rightpressed = false; var leftpressed = false; the default value for both is false because at the beginning the control buttons are not pressed. to listen for
key presses, we will set up two event listeners. add the following lines just above the setinterval() line at the bottom of your javascript: document.addeventlistener("
keydown",
keydownhandler, false); document.addeventlistener("
keyup",
keyuphandler, false); when the
keydown event is fired on any of the
keys on your
keyboard (when they are pressed), the
keydownhandler() function will be executed. t...
... the following lines just above the setinterval() line at the bottom of your javascript: document.addeventlistener("
keydown",
keydownhandler, false); document.addeventlistener("
keyup",
keyuphandler, false); when the
keydown event is fired on any of the
keys on your
keyboard (when they are pressed), the
keydownhandler() function will be executed. the same pattern is true for the second listener:
keyup events will fire the
keyuphandler() function (when the
keys stop being pressed). ...
...And 7 more matches
SpiderMonkey 24
these release notes are an incomplete draft and were initially seeded from the spidermon
key 17 release notes, so they're not necessarily complete or fully accurate. the mozilla javascript team is pleased to announce the release of spidermon
key 24. you can download full source code here: https://ftp.mozilla.org/pub/mozilla.org/js/mozjs-24.2.0.tar.bz2 (sha1: ce779081cc11bd0c871c6f303fc4a0091cf4fe66) spidermon
key 24 is the javascript engine that shipped in firefox 24. it continues to improve performance over previous spidermon
key releases, with a significantly improved garbage collector, a new jit compilation mode, and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozil...
...or, a new jit compilation mode, and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. — dec 16, 2013 the download url still available, but spidermon
key not release alone! get it here mozilla-esr24 if the download url is outdate you will find it in "firefox extended support release 24" package on hg release platform support spidermon
key 24 is supported on all the platforms where firefox 24 runs. compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. (this change was motivated by garbage collector improvements, w...
...4 runs. compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. (this change was motivated by garbage collector improvements, which lean quite heavily on c++'s support for raii through constructors and destructors.) if you are compiling with microsoft's visual studio, note that the minimum supported version is msvc10/2010: msvc8/9 support has been dropped. spidermon
key 24 includes a just-in-time compiler (jit) that compiles javascript to machine code, for a significant speed increase. it is supported on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in previous versions. it's the same language, just no...
...And 7 more matches
SpiderMonkey 31
these release notes are incomplete. the mozilla javascript team is pleased to announce the release of spidermon
key 31. spidermon
key 31 is the javascript engine that shipped in firefox 31. it continues to improve performance over previous spidermon
key releases, with a significantly improved garbage collector and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. ...
...eases, with a significantly improved garbage collector and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. the download url is outdated and spidermon
key not release alone! get it here mozilla-esr31 you will find it in "firefox extended support release 31" package on hg release platform support spidermon
key 31 is supported on all the platforms where firefox 31 runs. compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. if you are compiling with microsoft's visual studio, note that the minimum supported version i...
...it is supported on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. ...
...And 7 more matches
Element: keyup event - Web APIs
the
keyup event is fired when a
key is released. bubbles yes cancelable yes interface
keyboardevent event handler property on
keyup the
keydown and
keyup events provide a code indicating which
key is pressed, while
keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by
keydown and
keyup, but as 97 by
keypress. an uppercase "a" is reported as 65 by all events. since firefox 65, the
keyup and
keydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see
keydown and
keyup events are now fired during ime composition for more useful details). ...
..., a lowercase "a" will be reported as 65 by
keydown and
keyup, but as 97 by
keypress. an uppercase "a" is reported as 65 by all events. since firefox 65, the
keyup and
keydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see
keydown and
keyup events are now fired during ime composition for more useful details). ...
...a" is reported as 65 by all events. since firefox 65, the
keyup and
keydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see
keydown and
keyup events are now fired during ime composition for more useful details). to ignore all
keyup events that are part of composition, do something like this (229 is a special value set for a
keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("
keyup", event => { if (event.iscomposing || event.
keycode === 229) { return; } // do something }); examples addeventlistener
keyup example this example logs the
keyboardevent.code value whenever you release a
key inside the <input> element. <input placeholder="click here, then press and rele...
...And 7 more matches
MediaKeySession - Web APIs
this value is determined by the cdm and measured in milliseconds since january 1, 1970, utc. ...
...this value is determined by the cdm and measured in milliseconds since january 1, 1970, utc. ...
...this value is determined by the cdm and measured in milliseconds since january 1, 1970, utc. ...
...And 7 more matches
PushSubscription.getKey() - Web APIs
auth: an authentication secret, as described in message encryption for web push. returns an arraybuffer. ...
... auth: an authentication secret, as described in message encryption for web push. returns an arraybuffer. ...
... auth: an authentication secret, as described in message encryption for web push. returns an arraybuffer. ...
...And 7 more matches
Keyframe Formats - Web APIs
element.animate(),
keyframeeffect.
keyframeeffect(), and
keyframeeffect.set
keyframes() all accept objects formatted to represent a set of
keyframes. there are several options to this format, which are explained below. syntax there are two different ways to format
keyframes: an array of objects (
keyframes) consisting of properties and values to iterate over. this is the canonical format returned by the get
keyframes() method. element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, color: "#000" } ], 2000); offsets for each
keyframe can be specified by providing an offset value. element.animate([ { opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 } ], 2000); not...
... 2000); offsets for each
keyframe can be specified by providing an offset value. element.animate([ { opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 } ], 2000); note: offset values, if provided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order. it is not necessary to specify an offset for every
keyframe.
keyframes without a specified offset will be evenly spaced between adjacent
keyframes. the easing to apply between
keyframes can be specified by providing an easing value as illustrated below. element.animate([ { opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the s...
...ffset will be evenly spaced between adjacent
keyframes. the easing to apply between
keyframes can be specified by providing an easing value as illustrated below. element.animate([ { opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the specified easing only applies from the
keyframe where it is specified until the next
keyframe. any easing value specified on the options argument, however, applies across a single iteration of the animation — for the entire duration. an object containing
key-value pairs consisting of the property to animate and an array of values to iterate over. element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff...
...And 7 more matches
Object.keys() - JavaScript
the object.
keys() method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.
keys(obj) parameters obj the object of which the enumerable's own properties are to be returned. return value an array of strings that represent all the enumerable properties of the given object. description object.
keys() returns an array whose elements are strings corresponding to the enumerable properties found directly upon object. the ordering of the properties is the same as that given by loopin...
...urned. return value an array of strings that represent all the enumerable properties of the given object. description object.
keys() returns an array whose elements are strings corresponding to the enumerable properties found directly upon object. the ordering of the properties is the same as that given by looping over the properties of the object manually. ...
...e elements are strings corresponding to the enumerable properties found directly upon object. the ordering of the properties is the same as that given by looping over the properties of the object manually. ...
...And 7 more matches
XUL Accesskey FAQ and Policies - Archive of obsolete content
what is an access
key? an access
key is an underlined letter in a web page, menu or dialog that indicates to a user a quick,
keyboard method of simulating a click on that element. for example, an apply button may have the letter a underlined. on windows and unix, pressing alt+a is a convenient way to push that button. on macintosh, access
keys are available only in html not in xul, and they are activated using ctrl+letter instead of alt. how is an access
key added to a form control? ...
... indicates to a user a quick,
keyboard method of simulating a click on that element. for example, an apply button may have the letter a underlined. on windows and unix, pressing alt+a is a convenient way to push that button. on macintosh, access
keys are available only in html not in xul, and they are activated using ctrl+letter instead of alt. how is an access
key added to a form control? ...
...element. for example, an apply button may have the letter a underlined. on windows and unix, pressing alt+a is a convenient way to push that button. on macintosh, access
keys are available only in html not in xul, and they are activated using ctrl+letter instead of alt. how is an access
key added to a form control? an access
key can be added to an html or xul form control or label by using the access
key attribute. for example, here's how we add an access
key to a xul button: <button label="apply instantly" access
key="a" /> apply instantly - or - <button label="apply instantly" access
key="a" /> apply instantly in mozilla, we use dtd's for one more layer of abstraction, for purposes of internationalization. the above example should say: <button label="apply in...
...And 6 more matches
SpiderMonkey 45
it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. ...
...it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. ...
...it also contains new language and api features described in detail below. ...
...And 6 more matches
Document: keypress event - Web APIs
the
keypress event is fired when a
key that produces a character value is pressed down. examples of
keys that produce a character value are alphabetic, numeric, and punctuation
keys. examples of
keys that don't produce a character value are modifier
keys such as alt, shift, ctrl, or meta. since this event has been deprecated, you should look to use beforeinput or
keydown instead. interface
keyboardevent bubbles yes cancelable yes default action varies:
keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener
keypress example this example logs the
keyboardevent.code value whenever you press a
key. <p>press inside this iframe first to focus it, then try pre...
...ace
keyboardevent bubbles yes cancelable yes default action varies:
keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener
keypress example this example logs the
keyboardevent.code value whenever you press a
key. ...
...ardevent bubbles yes cancelable yes default action varies:
keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener
keypress example this example logs the
keyboardevent.code value whenever you press a
key. ...
...And 6 more matches
IDBIndex.getAllKeys() - Web APIs
count optional the number records to return. if this value exceeds the number of records in the query, the browser will only retrieve the first item. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. ...
... count optional the number records to return. if this value exceeds the number of records in the query, the browser will only retrieve the first item. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. ...
... count optional the number records to return. if this value exceeds the number of records in the query, the browser will only retrieve the first item. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. ...
...And 6 more matches
KeyboardEvent.which - Web APIs
the which read-only property of the
keyboardevent interface returns the numeric
keycode of the
key pressed, or the character code (charcode) for an alphanumeric
key pressed. syntax var
keyresult = event.which; return value
keyresult contains the numeric code for a particular
key pressed, depending on whether an alphanumeric or non-alphanumeric
key was pressed. please see
keyboardevent.charcode and
keyboardevent.
keycode for more details. ...
...f the
key pressed, or the character code (charcode) for an alphanumeric
key pressed. syntax var
keyresult = event.which; return value
keyresult contains the numeric code for a particular
key pressed, depending on whether an alphanumeric or non-alphanumeric
key was pressed. please see
keyboardevent.charcode and
keyboardevent.
keycode for more details. ...
...ressed. syntax var
keyresult = event.which; return value
keyresult contains the numeric code for a particular
key pressed, depending on whether an alphanumeric or non-alphanumeric
key was pressed. please see
keyboardevent.charcode and
keyboardevent.
keycode for more details. ...
...And 6 more matches
PublicKeyCredential.getClientExtensionResults() - Web APIs
note: extensions are optional and different browsers may recognize different extensions. ...
... note: extensions are optional and different browsers may recognize different extensions. ...
... note: extensions are optional and different browsers may recognize different extensions. ...
...And 6 more matches
PublicKeyCredentialRequestOptions - Web APIs
the public
keycredentialrequestoptions dictionary of the web authentication api holds the options passed to navigator.credentials.get() in order to fetch a given public
keycredential. properties public
keycredentialrequestoptions.challenge a buffersource, emitted by the relying party's server and used as a cryptographic challenge. this value will be signed by the authenticator and the signature will be sent back as part of authenticatorassertionresponse.signature. public
keycredentialrequestoptions.timeout optional a numerical hint, in milliseconds, which indicates the time the caller is willing to wait for the retrieval operation to complete. this hint may be overridden by the browser. ...
...s a cryptographic challenge. this value will be signed by the authenticator and the signature will be sent back as part of authenticatorassertionresponse.signature. public
keycredentialrequestoptions.timeout optional a numerical hint, in milliseconds, which indicates the time the caller is willing to wait for the retrieval operation to complete. this hint may be overridden by the browser. public
keycredentialrequestoptions.rpid optional a usvstring which indicates the relying party's identifier (ex. "login.example.org"). if this option is not provided, the client will use the current origin's domain. ...
... a numerical hint, in milliseconds, which indicates the time the caller is willing to wait for the retrieval operation to complete. this hint may be overridden by the browser. public
keycredentialrequestoptions.rpid optional a usvstring which indicates the relying party's identifier (ex. "login.example.org"). if this option is not provided, the client will use the current origin's domain. public
keycredentialrequestoptions.allowcredentials optional an array of credentials descriptor which restricts the acceptable existing credentials for retrieval. ...
...And 6 more matches
Keyboard - Accessibility
to be fully accessible, a web page must be operable by someone using only a
keyboard to access and control it. this includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a
keyboard for input whenever possible. focusable elements should have interactive semantics if an element can be focused using the
keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). note: one important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="applica...
...g the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode"). most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. however, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers
keyboard events. see also tabindex global html attribute global event handlers: on
keydown global event handlers: on
keyup avoid using tabindex attribute greater than zero the tabindex attribute indicates that an element is focusable using the
keyboard. a value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the html document...
...a better strategy is to structure the html document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values. ...
...And 6 more matches
key - XPath
this function is an xslt-specific addition to xpath. ...
... this function is an xslt-specific addition to xpath. ...
... this function is an xslt-specific addition to xpath. ...
...And 6 more matches
setRootKey - Archive of obsolete content
setroot
key changes the root
key being accessed. method of winreg object syntax void setroot
key ( int
key ); parameters the method has the following parameter:
key an integer representing a root
key in the registry. returns nothing. description the setroot
key changes the root
key. when you create a winreg object, it is set to access
keys under the h
key_classes_root portion of the registry. if you want to access
keys in another portion, you must use this method to change the root
key. on 16-bit windows platforms, h
key_classes_root is the only valid value and this method does nothing. these root
keys are represented as fields of the winreg object. ...
...create a winreg object, it is set to access
keys under the h
key_classes_root portion of the registry. if you want to access
keys in another portion, you must use this method to change the root
key. on 16-bit windows platforms, h
key_classes_root is the only valid value and this method does nothing. these root
keys are represented as fields of the winreg object. ...
...t is set to access
keys under the h
key_classes_root portion of the registry. if you want to access
keys in another portion, you must use this method to change the root
key. on 16-bit windows platforms, h
key_classes_root is the only valid value and this method does nothing. these root
keys are represented as fields of the winreg object. ...
...And 5 more matches
Accesskey display rules - Archive of obsolete content
each controls of xul can have an access
key which is specified by access
key attribute or access
key property (see access
key attribute document for the detail). xul elements display their access
keys in their label automatically if it's necessary. this document describes the rules of generating a label text. xul elements don't display any access
keys on mac xul elements don't display any access
keys on mac. because macos x doesn't have the conception of access
key function on its native widgets/applications. basic access
key display rules on non-mac platforms, a character which is same as its access
key is underlined. e.g., when an access
key of "file" is 'f', the generated label will be "file". ...
...ents don't display any access
keys on mac. because macos x doesn't have the conception of access
key function on its native widgets/applications. basic access
key display rules on non-mac platforms, a character which is same as its access
key is underlined. e.g., when an access
key of "file" is 'f', the generated label will be "file". if a label has two or more characters which are same as its access
key, the first character of them will be underlined. if a label doesn't have the character, xul elements append the access
key character with parentheses. e.g., when an access
key of "open" is 'a', the generated label will be "open (a)". however, if the last character of the label is an ellipsis or a colon, the access
key text is inserted before them. ...
...which are same as its access
key, the first character of them will be underlined. if a label doesn't have the character, xul elements append the access
key character with parentheses. e.g., when an access
key of "open" is 'a', the generated label will be "open (a)". however, if the last character of the label is an ellipsis or a colon, the access
key text is inserted before them. i.e., when an access
key of "open…" is 'a', the generated label will be "open (a)…". and also when an access
key of "your name:" is 'b', the generated label will be "your name (b):". this document calls the appended text "access
key text". always appends access
key text the basic rules are enough for western locales. however, in some locales, e.g., japanese localized build, its most ui labels don't have alphabets but a...
...And 5 more matches
Getting SpiderMonkey source code
you can get the spidermon
key source code in gzipped form or directly from the mercurial repository. downloading gzipped spidermon
key source code you can download gzipped spidermon
key source code from the following urls: http://ftp.mozilla.org/pub/spidermon
key/releases/ http://ftp.mozilla.org/pub/spidermon
key/prereleases/ here is a command-line example of downloading and unzipping spidermon
key source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermon
key/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell. ...
...e is a command-line example of downloading and unzipping spidermon
key source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermon
key/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell. getting the latest spidermon
key source code from mercurial the mercurial repository at https://hg.mozilla.org/mozilla-central/ hosts the latest spidermon
key sources. mercurial is also known as hg. ...
... hg clone https://hg.mozilla.org/mozilla-central/ cd js/src to avoid getting the full change history, click the zip or gz links at https://hg.mozilla.org/index.cgi/mozilla-central/file/tip. this fetches a snapshot of the current mozilla tree. ...
...And 5 more matches
SpiderMonkey 38
spidermon
key 38 is outdated and contains known security vulnerabilities. these release notes are incomplete. the mozilla javascript team is pleased to announce the release of spidermon
key 38. spidermon
key 38 is the javascript engine that shipped in firefox 38. it continues to improve performance over previous spidermon
key releases, with xxx blah blah blah. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. ...
... compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. ...
...our experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. — sep 17, 2015 the download url is outdated and spidermon
key not release alone! get it here mozilla-esr38 you will find it in "firefox extended support release 38" package on hg release platform support spidermon
key 38 is supported on all the platforms where firefox 38 runs. compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. if you are compiling with microsoft's visual studio, note that the minimum supported version is msvc10/2010. spidermon
key 38 includes a just-in-time compiler (jit) that compiles javascript to machine code, for a significant speed increase. it is suppor...
...And 5 more matches
nsIBidiKeyboard
widget/public/nsibidi
keyboard.idlscriptable this interface lets the application detect bidirectional writer users, and do some magic for them. ...
... widget/public/nsibidi
keyboard.idlscriptable this interface lets the application detect bidirectional writer users, and do some magic for them. ...
... widget/public/nsibidi
keyboard.idlscriptable this interface lets the application detect bidirectional writer users, and do some magic for them. ...
...And 5 more matches
All keyboard shortcuts - Firefox Developer Tools
opening and closing tools these shortcuts work in the main browser window to open the specified tool. the same shortcuts will work to close tools hosted in the toolbox, if the tool is active. for tools like the browser console that open in a new window, you have to close the window to close the tool. ...
... opening and closing tools these shortcuts work in the main browser window to open the specified tool. the same shortcuts will work to close tools hosted in the toolbox, if the tool is active. for tools like the browser console that open in a new window, you have to close the window to close the tool. ...
...9 shift + f9 * shift + f9 open debugger 3 ctrl + shift + z cmd + opt + z ctrl + shift + z 1. unlike the other toolbox-hosted tools, this shortcut does not also close the web console. instead, it focuses on the web console's command line. to close the web console, use the global toolbox shortcut of ctrl + shift + i (cmd + opt + i on a mac). 2. before firefox 55, the
keyboard shortcut was ctrl + shift + q (cmd + opt + q on a mac). 3. starting in firefox 71. before firefox 66, the letter in this shortcut was s. toolbox these shortcuts work whenever the toolbox is open, no matter which tool is active. command windows macos linux cycle through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right t...
...And 5 more matches
CSSKeywordValue - Web APIs
methods inherits methods from cssstylevalue. examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector. ...
... methods inherits methods from cssstylevalue. examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector. ...
... methods inherits methods from cssstylevalue. examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector. ...
...And 5 more matches
CacheStorage.keys() - Web APIs
return value a promise that resolves with an array of the cache names inside the cachestorage object. examples in this code snippet we wait for an activate event, and then run a waituntil() block that clears up any old, unused caches before a new service worker is activated. ...
... return value a promise that resolves with an array of the cache names inside the cachestorage object. examples in this code snippet we wait for an activate event, and then run a waituntil() block that clears up any old, unused caches before a new service worker is activated. ...
... return value a promise that resolves with an array of the cache names inside the cachestorage object. examples in this code snippet we wait for an activate event, and then run a waituntil() block that clears up any old, unused caches before a new service worker is activated. ...
...And 5 more matches
HTMLMediaElement.setMediaKeys() - Web APIs
recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
...And 5 more matches
IDBKeyRange.lower - Web APIs
the lower read-only property of the idb
keyrange interface returns the lower bound of the
key range. note: this feature is available in web workers. syntax var lower = my
keyrange.lower value the lower bound of the
key range (can be any type.) example the following example illustrates how you'd use a
key range. here we declare
keyrangevalue = idb
keyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. ...
... = idb
keyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. after declaring the
key range, we log its lower property value to the console, which should appear as "f". ...
...nd lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. after declaring the
key range, we log its lower property value to the console, which should appear as "f". ...
...And 5 more matches
IDBKeyRange.lowerBound() - Web APIs
the lowerbound() method of the idb
keyrange interface creates a new
key range with only a lower bound. by default, it includes the lower endpoint value and is closed. note: this feature is available in web workers. syntax var myidb
keyrange = idb
keyrange.lowerbound(lower); var myidb
keyrange = idb
keyrange.lowerbound(lower, open); parameters lower specifies the lower bound of the new
key range. open optional indicates whether the lower bound excludes the endpoint value. the default is false. return value idb
keyrange: the newly created
key range. exceptions this method may raise a domexception of the following type: exception description dataerror the value parameter passed was not a valid
key. example the following example...
...e lower bound excludes the endpoint value. the default is false. return value idb
keyrange: the newly created
key range. exceptions this method may raise a domexception of the following type: exception description dataerror the value parameter passed was not a valid
key. example the following example illustrates how you'd use a lower bound
key range. here we declare
keyrangevalue = idb
keyrange.lowerbound("f", false); — a range that includes the value "f" and everthing after it. we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. ...
...use a lower bound
key range. here we declare
keyrangevalue = idb
keyrange.lowerbound("f", false); — a range that includes the value "f" and everthing after it. we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. this means that the cursor will only retrieve the record with the
key value "f" and all that come after it. if we used idb
keyrange.lowerbound("f", true);, then the range would not include "f"; only the values after it. ...
...And 5 more matches
IDBKeyRange.lowerOpen - Web APIs
the loweropen read-only property of the idb
keyrange interface returns a boolean indicating whether the lower-bound value is included in the
key range. note: this feature is available in web workers. syntax var loweropen = my
keyrange.loweropen value a boolean: value indication true the lower-bound value is not included in the
key range. false the lower-bound value is included in the
key range. example the following example illustrates how you'd use a
key range. here we declare
keyrangevalue = idb
keyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransact...
...illustrates how you'd use a
key range. here we declare
keyrangevalue = idb
keyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. after declaring the
key range, we log its loweropen property value to the console, which should appear as "true": the lower bound is open, so won't be included in the range. ...
...ction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. after declaring the
key range, we log its loweropen property value to the console, which should appear as "true": the lower bound is open, so won't be included in the range. ...
...And 5 more matches
IDBKeyRange.upper - Web APIs
the upper read-only property of the idb
keyrange interface returns the upper bound of the
key range. note: this feature is available in web workers. syntax var upper = my
keyrange.upper value the upper bound of the
key range (can be any type.) example the following example illustrates how you'd use a
key range. here we declare
keyrangevalue = idb
keyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. ...
... = idb
keyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. after declaring the
key range, we log its upper property value to the console, which should appear as "w". ...
...nd lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. after declaring the
key range, we log its upper property value to the console, which should appear as "w". ...
...And 5 more matches
IDBKeyRange.upperBound() - Web APIs
the upperbound() method of the idb
keyrange interface creates a new upper-bound
key range. by default, it includes the upper endpoint value and is closed. note: this feature is available in web workers. syntax var myidb
keyrange = idb
keyrange.upperbound(upper[, open=false]) parameters bound specifies the upper bound of the new
key range. open indicates whether the upper bound excludes the endpoint value. the default is false. optional return value idb
keyrange: the newly created
key range. exceptions this method may raise a domexception of the following type: exception description dataerror the value parameter passed was not a valid
key. example the following example illustrates how you'd use an upper bound
key range. here we declare ...
...dpoint value. the default is false. optional return value idb
keyrange: the newly created
key range. exceptions this method may raise a domexception of the following type: exception description dataerror the value parameter passed was not a valid
key. example the following example illustrates how you'd use an upper bound
key range. here we declare
keyrangevalue = idb
keyrange.upperbound("f"); — a range that includes the value "f" and everything before it. we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. ...
... example the following example illustrates how you'd use an upper bound
key range. here we declare
keyrangevalue = idb
keyrange.upperbound("f"); — a range that includes the value "f" and everything before it. we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. if we used idb
keyrange.upperbound("f", true);, then the range excludes "f"; and instead only includes the values before it. ...
...And 5 more matches
IDBKeyRange.upperOpen - Web APIs
the upperopen read-only property of the idb
keyrange interface returns a boolean indicating whether the upper-bound value is included in the
key range. note: this feature is available in web workers. syntax var upperopen = my
keyrange.upperopen value a boolean: value indication true the upper-bound value is not included in the
key range. false the upper-bound value is included in the
key range. example the following example illustrates how you'd use a
key range. here we declare
keyrangevalue = idb
keyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransact...
...illustrates how you'd use a
key range. here we declare
keyrangevalue = idb
keyrange.upperbound("f", "w", true, true); — a range that includes everything between "f" and "w" but not including them — since both the upper and lower bounds have been declared as open (true). we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. after declaring the
key range, we log its upperopen property value to the console, which should appear as "true": the upper bound is open, so won't be included in the range. ...
...ction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. after declaring the
key range, we log its upperopen property value to the console, which should appear as "true": the upper bound is open, so won't be included in the range. ...
...And 5 more matches
PublicKeyCredential.response - Web APIs
the response read-only property of the public
keycredential interface is an authenticatorresponse object which is sent from the authenticator to the user agent for the creation/fetching of credentials. the information contained in this response will be used by the relying party's server to verify the demand is legitimate. an authenticatorresponse is either: an authenticatorattestationresponse (when the public
keycredential is created via credentialscontainer.create()) an authenticatorassertionresponse (when the public
keycredential is obtained via credentialscontainer.get()). ...
...torresponse is either: an authenticatorattestationresponse (when the public
keycredential is created via credentialscontainer.create()) an authenticatorassertionresponse (when the public
keycredential is obtained via credentialscontainer.get()). in order to validate the creation of credentials, a relying party's server needs both: this response the extensions of the client (given by public
keycredential.getclientextensionresults()) to validate the demand. note: when validating the fetching of existing credentials, the whole public
keycredential object and the client extensions are necessary for the relying party's server. ...
...this object contains data from the client (authenticatorresponse/clientdatajson) and from the authenticator. ...
...And 5 more matches
PublicKeyCredentialCreationOptions.authenticatorSelection - Web APIs
authenticatorselection, an optional property of the public
keycredentialcreationoptions dictionary, is an object giving criteria to filter out the authenticators to be used for the creation operation. syntax authenticatorselection = public
keycredentialcreationoptions.authenticatorselection value an object with the following properties: authenticatorattachmentoptional a string which is either "platform" or "cross-platform". the former describes an authenticator which is bound to the client and which is generally not removable. the latter describes a device which may be used across different platform (such as a usb or nfc device). ...
...noptions.authenticatorselection value an object with the following properties: authenticatorattachmentoptional a string which is either "platform" or "cross-platform". the former describes an authenticator which is bound to the client and which is generally not removable. the latter describes a device which may be used across different platform (such as a usb or nfc device). requireresident
keyoptional 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. the values may be: "required": user verification is required, the operation will fail if the response does not...
...erification is prefered, the operation will not fail if the response does not have the uv flag (as part of the authenticatordata property of authenticatorattestationresponse.attestationobject) "discouraged": user verification should not be employed as to minimize the user interaction during the process. the default value is "preferred". ...
...And 5 more matches
PublicKeyCredentialCreationOptions.excludeCredentials - Web APIs
excludecredentials, an optional property of the public
keycredentialcreationoptions dictionary, is an array whose elements are descriptors for the public
keys already existing for a given user. this is provided by the relying party's server if it wants to prevent creation of new credentials for an existing user. syntax excludecredentials = public
keycredentialcreationoptions.excludecredentials value an array whose elements are objects with the following properties: type a string describing type of public-
key credential to be created. as of this writing (march 2019), only "public-
key" may be used. id a buffersource matching an existing public
key credential identifier (public
keycredential.rawid). ...
... transports optional an array of strings describing the possible transports between the client and the authenticator. ...
...f the strings may be: "usb": the authenticator can be contacted via a removable usb link "nfc": the authenticator may be used over nfc (near field communication) "ble": the authenticator may be used over ble (bluetooth low energy) "internal": the authenticator is specifically bound to the client device (cannot be removed). ...
...And 5 more matches
PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
allowcredentials is an optional property of the public
keycredentialrequestoptions dictionary which indicates the existing credentials acceptable for retrieval. this is an array of credential descriptors. note: public
keycredentialcreationoptions.excludecredentials may be used during the creation of the credentials in order to avoid creating new credentials for an existing user with existing public
key credential. contrary to allowcredentials, it is used to filter out credentials. syntax allowcredentials = public
keycredentialrequestoptions.allowcredentials value an array whose elements are objects with the following properties: type a string describing type of public-
key credential to be created. as of this writing (march 2019), only "public-
key" may be used. id a buffersource m...
... transports optional an array of strings describing the possible transports between the client and the authenticator. ...
... transports optional an array of strings describing the possible transports between the client and the authenticator. ...
...And 5 more matches
SubtleCrypto.generateKey() - Web APIs
use the generate
key() method of the subtlecrypto interface to generate a new
key (for symmetric algorithms) or
key pair (for public-
key algorithms). syntax const result = crypto.subtle.generate
key(algorithm, extractable,
keyusages); parameters algorithm is a dictionary object defining the type of
key to generate and providing extra algorithm-specific parameters. for rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep: pass an rsahashed
keygenparams object. for ecdsa or ecdh: pass an ec
keygenparams object. for hmac: pass an hmac
keygenparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass an aes
keygenparams object. ...
...d providing extra algorithm-specific parameters. for rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep: pass an rsahashed
keygenparams object. for ecdsa or ecdh: pass an ec
keygenparams object. for hmac: pass an hmac
keygenparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass an aes
keygenparams object. extractable is a boolean indicating whether it will be possible to export the
key using subtlecrypto.export
key() or subtlecrypto.wrap
key().
keyusages is an array indicating what can be done with the newly generated
key. possible values for array elements are: encrypt: the
key may be used to encrypt messages. decrypt: the
key may be used to decrypt messages. sign: the
key may be used to sign messages. verify: the
key may be used to verify signatures. derivek...
...ubtlecrypto.export
key() or subtlecrypto.wrap
key().
keyusages is an array indicating what can be done with the newly generated
key. possible values for array elements are: encrypt: the
key may be used to encrypt messages. decrypt: the
key may be used to decrypt messages. sign: the
key may be used to sign messages. verify: the
key may be used to verify signatures. derive
key: the
key may be used in deriving a new
key. derivebits: the
key may be used in deriving bits. wrap
key: the
key may be used to wrap a
key. unwrap
key: the
key may be used to unwrap a
key. return value result is a promise that fulfills with a crypto
key (for symmetric algorithms) or a crypto
keypair (for public-
key algorithms). exceptions the promise is rejected when the following excepti...
...And 5 more matches
TouchEvent.metaKey - Web APIs
specifications specification status comment touch events – level 2 draft non-stable version. ...
... specifications specification status comment touch events – level 2 draft non-stable version. ...
... specifications specification status comment touch events – level 2 draft non-stable version. ...
...And 5 more matches
Public-Key-Pins-Report-Only - HTTP
note: public
key pinning mechanism was deprecated in favor of certificate transparency and expect-ct header. the http public-
key-pins-report-only response header was used to send reports of pinning violation to the report-uri specified in the header but, unlike public-
key-pins still allows browsers to connect to the server if the pinning is violated. the header is silently ignored in modern browsers as support for hpkp has been removed. use certificate transparency and the expect-ct header instead. for more information, see the public-
key-pins header reference page and the http public
key pinning article. ...
...the server if the pinning is violated. the header is silently ignored in modern browsers as support for hpkp has been removed. use certificate transparency and the expect-ct header instead. for more information, see the public-
key-pins header reference page and the http public
key pinning article. header type response header forbidden header name no syntax public-
key-pins-report-only: pin-sha256="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha256="<pin-value>" the quoted string is the base64 encoded subject public
key information (spki) fingerprint. it is possible to specify multiple pins for different public
keys. some bro...
... includesubdomains optional if this optional parameter is specified, this rule applies to all of the site's subdomains as well. ...
...And 5 more matches
Keyed collections - JavaScript
« previousnext » this chapter introduces collections of data which are indexed by a
key; map and set objects contain elements which are iterable in the order of insertion. maps map object ecmascript 2015 introduces a new data structure to map values to values. a map object is a simple
key/value map and can iterate its elements in insertion order. the following code shows some basic operations with a map. see also the map reference page for more examples and the complete api. you can use a for...of loop to return an array of [
key, value] for each iteration. let sayings = new map(); sayings.set('dog', 'woof'); sayings.set('cat', 'meow'); sayings.set('elephant', 'toot'); sayings.size; // 3 sayings.get('dog'); // woof sayings.get('fox'); // undefined sayings.has('bird'); /...
...amples and the complete api. you can use a for...of loop to return an array of [
key, value] for each iteration. let sayings = new map(); sayings.set('dog', 'woof'); sayings.set('cat', 'meow'); sayings.set('elephant', 'toot'); sayings.size; // 3 sayings.get('dog'); // woof sayings.get('fox'); // undefined sayings.has('bird'); // false sayings.delete('dog'); sayings.has('dog'); // false for (let [
key, value] of sayings) { console.log(
key + ' goes ' + value); } // "cat goes meow" // "elephant goes toot" sayings.clear(); sayings.size; // 0 object and map compared traditionally, objects have been used to map strings to values. objects allow you to set
keys to values, retrieve those values, delete
keys, and detect whether something is stored at a
key. map objects, however, have a few more a...
...goes ' + value); } // "cat goes meow" // "elephant goes toot" sayings.clear(); sayings.size; // 0 object and map compared traditionally, objects have been used to map strings to values. objects allow you to set
keys to values, retrieve those values, delete
keys, and detect whether something is stored at a
key. map objects, however, have a few more advantages that make them better maps. the
keys of an object are strings or symbols, where they can be of any value for a map. you can get the size of a map easily, while you have to manually keep track of size for an object. the iteration of maps is in insertion order of the elements. an object has a prototype, so there are default
keys in the map. (this can be bypassed using map = object.create(null).) these three tips can help you to ...
...And 5 more matches
keyTimes - SVG: Scalable Vector Graphics
the
keytimes attribute represents a list of time values used to control the pacing of the animation. each time in the list corresponds to a value in the values attribute list, and defines when the value is used in the animation. each time value in the
keytimes list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the duration of the animation element. ...
...et into the duration of the animation element. ...
... each successive time value must be greater than or equal t...
...And 5 more matches
GCIntegration - SpiderMonkey Redirect 1
this page is intended to explain the changes that are happening, with a focus on how they will affect gecko code that uses jsapi. at a high level, there are three issues to be aware of: interactions between the garbage collector and the cycle collector incremental garbage collection moving garbage collection the apis for gc/cc interaction and incremental gc are already in place. development of moving gc (both generational and compacting) is under way, but only in the javascript shell so far. we're still thinking about how the apis for moving gc should work. ...
...egistered in the cross-compartment wrapper map. now, on to the details... gc/cc interaction <to be done later.> incremental gc incremental gc divides gc marking into time slices. in between these slices, non-gc code is allowed to run. done naively, this technique can lead to reachable object not being marked. consider the following example. {{ svg{source: "http://people.mozilla.org/~wmcclos
key/incremental1.svg", embedding: "iframe", height:"130"} }} assume object b is already marked, as in the leftmost frame, while objects a and c have not been marked yet. in the middle frame some code creates a pointer from b to c and destroys the pointer from a to c. in the last frame, a gets marked by the gc. the problem is that c is never marked even though it's reachable. this will likely lead to...
...gc. the problem is that c is never marked even though it's reachable. this will likely lead to a crash if c is accessed via b. write barriers all the schemes for preventing this sort of thing require write barriers. every time a pointer is updated, a small amount of code runs that may mark one of the objects involved in the update. this only happens if an incremental gc is in progress. spidermon
key uses a simple barrier commonly called a "snapshot at the beginning" barrier. the fundamental invariant that this barrier guarantees is that any object reachable when the incremental gc started will be marked. in addition, objects allocated during the incremental gc are marked unconditionally. at the end of the gc, any reachable object must have been newly allocated or else reachable at the beginn...
...And 4 more matches
Cache.keys() - Web APIs
the available options are: ignoresearch: a boolean that specifies whether the matching process should ignore the query string in the url. ...
...the available options are: ignoresearch: a boolean that specifies whether the matching process should ignore the query string in the url. ...
...the available options are: ignoresearch: a boolean that specifies whether the matching process should ignore the query string in the url. ...
...And 4 more matches
Element: keypress event - Web APIs
the
keypress event is fired when a
key that produces a character value is pressed down. examples of
keys that produce a character value are alphabetic, numeric, and punctuation
keys. examples of
keys that don't produce a character value are modifier
keys such as alt, shift, ctrl, or meta. since this event has been deprecated, you should look to use beforeinput or
keydown instead. interface
keyboardevent bubbles yes cancelable yes default action varies:
keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener
keypress example this example logs the
keyboardevent.code value whenever you press a
key after focussing the <input> element. <div> <label for="sam...
...ventlistener
keypress example this example logs the
keyboardevent.code value whenever you press a
key after focussing the <input> element. ...
...eypress example this example logs the
keyboardevent.code value whenever you press a
key after focussing the <input> element. ...
...And 4 more matches
IDBKeyRange.includes() - Web APIs
the includes() method of the idb
keyrange interface returns a boolean indicating whether a specified
key is inside the
key range. note: this feature is available in web workers. syntax var isincluded = my
keyrange.includes(
key) parameters
key the
key you want to check for in your
key range. this can be any type. return value a boolean. exceptions this method may raise a domexception of the following type: attribute description dataerror the supplied
key was not a valid
key. ...
...ote: this feature is available in web workers. syntax var isincluded = my
keyrange.includes(
key) parameters
key the
key you want to check for in your
key range. this can be any type. return value a boolean. exceptions this method may raise a domexception of the following type: attribute description dataerror the supplied
key was not a valid
key. example var
keyrangevalue = idb
keyrange.bound('a', 'k', false, false); var myresult =
keyrangevalue.includes('f'); // returns true var myresult =
keyrangevalue.includes('w'); // returns false polyfill the includes() method was added in the second edition of the indexed db specification. ...
... was not a valid
key. example var
keyrangevalue = idb
keyrange.bound('a', 'k', false, false); var myresult =
keyrangevalue.includes('f'); // returns true var myresult =
keyrangevalue.includes('w'); // returns false polyfill the includes() method was added in the second edition of the indexed db specification. for browsers that do not support it, the following polyfill can be used. ...
...And 4 more matches
IDBKeyRange.only() - Web APIs
the only() method of the idb
keyrange interface creates a new
key range containing a single value. note: this feature is available in web workers. syntax var myidb
keyrange = idb
keyrange.only(value); parameters value is the value for the new
key range. return value idb
keyrange: the newly created
key range. exceptions this method may raise a domexception of the following types: exception description dataerror the value parameter passed was not a valid
key. example the following example illustrates how you'd use an only
key range. here we declare a
keyrangevalue = idb
keyrange.only("a"); — a range that only includes the value "a". we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstor...
... dataerror the value parameter passed was not a valid
key. example the following example illustrates how you'd use an only
key range. here we declare a
keyrangevalue = idb
keyrange.only("a"); — a range that only includes the value "a". we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. this means that the cursor will only retrieve the record with the
key value "a". ...
...evalue = idb
keyrange.only("a"); — a range that only includes the value "a". we open a transaction (using idbtransaction) and an object store, and open a cursor with idbobjectstore.opencursor, declaring
keyrangevalue as its optional
key range value. this means that the cursor will only retrieve the record with the
key value "a". ...
...And 4 more matches
KeyboardEvent.location - Web APIs
the
keyboardevent.location read-only property returns an unsigned long representing the location of the
key on the
keyboard or other input device. possible values are: constant value description dom_
key_location_standard 0 the
key has only one version, or can't be distinguished between the left and right versions of the
key, and was not pressed on the numeric
keypad or a
key that is considered to be part of the
keypad. dom_
key_location_left 1 the
key was the left-hand version of the
key; for example, the left-hand control
key was pressed on a standard 101
key us
keyboard. this value is only used for
keys that have more than one possible location on the
keyboard. ...
... right versions of the
key, and was not pressed on the numeric
keypad or a
key that is considered to be part of the
keypad. dom_
key_location_left 1 the
key was the left-hand version of the
key; for example, the left-hand control
key was pressed on a standard 101
key us
keyboard. this value is only used for
keys that have more than one possible location on the
keyboard. dom_
key_location_right 2 the
key was the right-hand version of the
key; for example, the right-hand control
key is pressed on a standard 101
key us
keyboard. this value is only used for
keys that have more than one possible location on the
keyboard. dom_
key_location_numpad 3 the
key was on the numeric
keypad, or has a virtual
key code that corresponds to the numeric
keypad. ...
...on of the
key; for example, the right-hand control
key is pressed on a standard 101
key us
keyboard. this value is only used for
keys that have more than one possible location on the
keyboard. dom_
key_location_numpad 3 the
key was on the numeric
keypad, or has a virtual
key code that corresponds to the numeric
keypad. note: when numlock is locked, gecko always returns dom_
key_location_numpad for the
keys on the numeric pad. otherwise, when numlock is unlocked and the
keyboard actually has a numeric
keypad, gecko always returns dom_
key_location_numpad too. on the other hand, if the
keyboard doesn't have a
keypad, such as on a notebook computer, some
keys become numpad only when numlock is locked. ...
...And 4 more matches
KeyframeEffect - Web APIs
the
keyframeeffect interface of the web animations api lets us create sets of animatable properties and values, called
keyframes. these can then be played using the animation() constructor. constructor
keyframeeffect() returns a new
keyframeeffect object instance, and also allows you to clone an existing
keyframe effect object instance. properties
keyframeeffect.target gets and sets the element, or originating element of the pseudo-element, being animated by this object. this may be null for animations that do not target a specific element or pseudo-element.
keyframeeffect.pseudoelement gets and sets the selector of the pseudo-element being animated by this object. this may be null for animations that do not target a pseudo-element. ...
... methods this interface inherits some of its methods from its parent, animationeffect. ...
... may be null for animations that do not target a specific element or pseudo-element.
keyframeeffect.pseudoelement gets and sets the selector of the pseudo-element being animated by this object. this may be null for animations that do not target a pseudo-element.
keyframeeffect.iterationcomposite gets and sets the iteration composite operation for resolving the property value changes of this
keyframe effect.
keyframeeffect.composite gets and sets the composite operation property for resolving the property value changes between this and other
keyframe effects. methods this interface inherits some of its methods from its parent, animationeffect. ...
...And 4 more matches
PublicKeyCredential.id - Web APIs
the id read-only property of the public
keycredential interface is a domstring, inherited from credential, which represents the identifier of the current public
keycredential instance. this property is a base64url encoded version of public
keycredential.rawid. note: this property may only be used in top-level contexts and will not be available in an <iframe> for example. syntax id = public
keycredential.id value a domstring being the base64url encoded version of public
keycredential.rawid. ...
...nts the identifier of the current public
keycredential instance. this property is a base64url encoded version of public
keycredential.rawid. note: this property may only be used in top-level contexts and will not be available in an <iframe> for example. syntax id = public
keycredential.id value a domstring being the base64url encoded version of public
keycredential.rawid. ...
...lue a domstring being the base64url encoded version of public
keycredential.rawid. ...
...And 4 more matches
PublicKeyCredential.rawId - Web APIs
the rawid read-only property of the public
keycredential interface is an arraybuffer object containing the identifier of the credentials. the public
keycredential.id property is a base64url encoded version of this identifier. note: this property may only be used in top-level contexts and will not be available in an <iframe> for example. syntax rawid = public
keycredential.rawid value a arraybuffer containing the identifier of the credentials. this identifier is expected to be globally unique and is appointed for the current public
keycredential and its associated authenticatorassertionresponse. examples var options = { challenge: new uint8array(26) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26...
...que and is appointed for the current public
keycredential and its associated authenticatorassertionresponse. ...
...
keycredential and its associated authenticatorassertionresponse. ...
...And 4 more matches
URLSearchParams.keys() - Web APIs
living standard initial definition. ...
... living standard initial definition. ...
... living standard initial definition. ...
...And 4 more matches
Public-Key-Pins - HTTP
note: public
key pinning mechanism was deprecated in favor of certificate transparency and expect-ct header. the http public-
key-pins response header used to associate a specific cryptographic public
key with a certain web server to decrease the risk of mitm attacks with forged certificates, however, it has been removed from modern browsers and is no longer supported. use certificate transparency and expect-ct header instead. for more information, see the http public
key pinning article. ...
...ublic
key with a certain web server to decrease the risk of mitm attacks with forged certificates, however, it has been removed from modern browsers and is no longer supported. use certificate transparency and expect-ct header instead. for more information, see the http public
key pinning article. header type response header forbidden header name no syntax public-
key-pins: pin-sha256="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha256="<pin-value>" the quoted string is the base64 encoded subject public
key information (spki) fingerprint. it is possible to specify multiple pins for different public
keys. some browsers might allow other hashing algorithms than ...
... includesubdomains optional if this optional parameter is specified, this rule applies to all of the site's subdomains as well. report-uri="<uri>" optional if this optional parameter is specified, pin validation failures are reported to the given url. ...
...And 4 more matches
Merging TraceMonkey Repo - Archive of obsolete content
merge via hg merge you may see a number of conflicts. ...
... merge via hg merge you may see a number of conflicts. ...
... merge via hg merge you may see a number of conflicts. conflicting files can be listed via hg resolve -l. ...
...And 3 more matches
isKeyWritable - Archive of obsolete content
is
keywritable returns whether the given registry
key is writable or not. method of winreg object syntax boolean is
keywritable( string
key); parameters the method has the following parameter:
key a string representing the path to the
key returns a boolean value: true if the
key is writable; false if not. ...
... is
keywritable returns whether the given registry
key is writable or not. method of winreg object syntax boolean is
keywritable( string
key); parameters the method has the following parameter:
key a string representing the path to the
key returns a boolean value: true if the
key is writable; false if not. ...
... returns whether the given registry
key is writable or not. method of winreg object syntax boolean is
keywritable( string
key); parameters the method has the following parameter:
key a string representing the path to the
key returns a boolean value: true if the
key is writable; false if not. ...
...And 3 more matches
keyExists - Archive of obsolete content
keyexists returns whether the
key exists. method of winreg object syntax boolean
keyexists ( string
key); parameters the method has the following parameter:
key a string representing the path to the
key returns boolean value description if the user does not have read access to the given
key, this will also return false. ...
...s whether the
key exists. method of winreg object syntax boolean
keyexists ( string
key); parameters the method has the following parameter:
key a string representing the path to the
key returns boolean value description if the user does not have read access to the given
key, this will also return false. ...
...
key exists. method of winreg object syntax boolean
keyexists ( string
key); parameters the method has the following parameter:
key a string representing the path to the
key returns boolean value description if the user does not have read access to the given
key, this will also return false. ...
...And 3 more matches
keyset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element for
key elements. the
keyset and its descendants are not displayed. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a container element for
key elements. the
keyset and its descendants are not displayed. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a container element for
key elements. the
keyset and its descendants are not displayed. more information is available in the xul tutorial. ...
...And 3 more matches
SpiderMonkey 1.8.8
these release notes are an incomplete draft and were initially seeded from the 1.8.5 release notes, so lots of the information here isn't actually new to spidermon
key 1.8.8 (nor is it even the case that the version number will be 1.8.8!). the mozilla javascript team is pleased to announce the release of spidermon
key 1.8.8. you can download full source code here: insert-actual-link-when-the-release-happens (md5 checksum: insert-actual-hash-here). spidermon
key 1.8.8 is the javascript engine that shipped in firefox 10.0. it continues to improve performance over previous spidermon
key releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code. it also contains new language and api features described in detail below. please ...
...oduction of type inference to enable faster jitted code. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. —insert-actual-release-date-here platform support spidermon
key 1.8.8 is supported on all the platforms where firefox insert-actual-firefox-version-number-here runs. spidermon
key 1.8.8 includes a just-in-time compiler (jit) that compiles javascript to machine code, for a significant speed increase. it is supported on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. on all other platforms the ji...
...ler (jit) that compiles javascript to machine code, for a significant speed increase. it is supported on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in previous versions. it's the same language, just not as fast. migrating to spidermon
key 1.8.8 the following features in earlier versions of spidermon
key have been dropped. the jsresolve_classname and jsresolve_with resolve flags (passed to jsclass.resolve when jsclass.flags contains jsclass_new_resolve) have been removed. spidermon
key 1.8.8 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have ...
...And 3 more matches
SpiderMonkey 17
these release notes are an incomplete draft and were initially seeded from the (now-defunct) 1.8.8 release notes, which were themselves seeded from the 1.8.5 release notes, so lots of the information here isn't actually new to spidermon
key 17. the mozilla javascript team is pleased to announce the release of spidermon
key 17. you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5 checksum: 20b6f8f1140ef6e47daa3b16965c9202). spidermon
key 17 is the javascript engine that shipped in firefox 17. it continues to improve performance over previous spidermon
key releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code. it also contains new language and api features described in...
...and with the introduction of type inference to enable faster jitted code. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. — 25 march 2013 platform support spidermon
key 17 is supported on all the platforms where firefox 17 runs. spidermon
key 17 includes a just-in-time compiler (jit) that compiles javascript to machine code, for a significant speed increase. it is supported on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. on all other platforms the jit is simply disabled; javascript code runs in...
...ler (jit) that compiles javascript to machine code, for a significant speed increase. it is supported on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in previous versions. it's the same language, just not as fast. migrating to spidermon
key 17 the following features in earlier versions of spidermon
key have been dropped. the jsresolve_classname and jsresolve_with resolve flags (passed to jsclass.resolve when jsclass.flags contains jsclass_new_resolve) have been removed. spidermon
key 17 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have change...
...And 3 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
this interface inherits from the extendableevent interface. ...
... this interface inherits from the extendableevent interface. ...
... this interface inherits from the extendableevent interface. ...
...And 3 more matches
IDBObjectStore.openKeyCursor() - Web APIs
the open
keycursor() method of the idbobjectstore interface returns an idbrequest object whose result will be set to an idbcursor that can be used to iterate through matching results. used for iterating through the
keys of an object store with a cursor. to determine if the add operation has completed successfully, listen for the results’s success event. syntax var request = objectstore.open
keycursor(); var request = objectstore.open
keycursor(query); var request = objectstore.open
keycursor(query, direction); parameters query optional the
key range to be queried. if a single valid
key is passed, this will default to a range containing only that
key. if nothing is passed, this will default to a
key range that selects all the records in this object store. direction optional an idbc...
...brequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror this idbobjectstore or idbindex has been deleted. transactioninactiveerror this idbobjectstore's transaction is inactive. ...
...t object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror this idbobjectstore or idbindex has been deleted. transactioninactiveerror this idbobjectstore's transaction is inactive. ...
...And 3 more matches
Keyboard - Web APIs
the
keyboard interface of the the
keyboard api provides functions that retrieve
keyboard layout maps and toggle capturing of
key presses from the physical
keyboard. a list of valid code values is found in the ui events
keyboardevent code values spec. properties none. methods
keyboard.getlayoutmap() returns a promise that resolves with an instance of
keyboardlayoutmap which is a map-like object with functions for retrieving the strings associated with specific physical
keys.
keyboard.lock() returns a promise after enabling the capture of
keypresses for any or all of the
keys on the physical
keyboard.
keyboard.unlock() unlocks all
keys captured by the lock() method and returns synchronously. example the following example demonstrates how to get the location- or l...
...ng the strings associated with specific physical
keys.
keyboard.lock() returns a promise after enabling the capture of
keypresses for any or all of the
keys on the physical
keyboard.
keyboard.unlock() unlocks all
keys captured by the lock() method and returns synchronously. example the following example demonstrates how to get the location- or layout-specific string associated with the
key that corresponds to the 'w'
key on an english qwerty
keyboard. if (navigator.
keyboard) { var
keyboard = navigator.
keyboard;
keyboard.getlayoutmap() .then(
keyboardlayoutmap => { var up
key =
keyboardlayoutmap.get('
keyw'); window.alert('press ' + up
key + ' to move up.'); }); } else { // do something else. ...
... editor's draft adds lock() and unlock(). ...
...And 3 more matches
KeyboardEvent.charCode - Web APIs
the charcode read-only property of the
keyboardevent interface returns the unicode value of a character
key pressed during a
keypress event. do not use this property, as it is deprecated. use the
key property instead. syntax var code = event.charcode; return value a number that represents the unicode value of the character
key that was pressed. ...
...stead. syntax var code = event.charcode; return value a number that represents the unicode value of the character
key that was pressed. example html <p>type anything into the input box below to log a <code>charcode</code>.</p> <input type="text" /> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.queryselector('#log'); input.addeventlistener('
keypress', function(e) { log.innertext = `
key pressed: ${string.fromcharcode(e.charcode)}\ncharcode: ${e.charcode}`; }); result notes in a
keypress event, the unicode value of the
key pressed is stored in either the
keycode or charcode property, but never both. ...
...vascript let input = document.queryselector('input'); let log = document.queryselector('#log'); input.addeventlistener('
keypress', function(e) { log.innertext = `
key pressed: ${string.fromcharcode(e.charcode)}\ncharcode: ${e.charcode}`; }); result notes in a
keypress event, the unicode value of the
key pressed is stored in either the
keycode or charcode property, but never both. if the
key pressed generates a character (e.g., 'a'), charcode is set to the code of that character; charcode respects the letter case (in other words, charcode takes into account whether the shift
key is held down). otherwise, the code of the pressed
key is stored in
keycode. when one or more modifier
keys are pressed, there are some complex rules for charcode. see gecko
keypress event for details. charc...
...And 3 more matches
Navigator.requestMediaKeySystemAccess() - Web APIs
the navigator.requestmedia
keysystemaccess() method returns a promise which delivers a media
keysystemaccess object that can be used to access a particular media
key system, which can in turn be used to create
keys for decrypting a media stream. this method is part of the encrypted media extensions api, which brings support for encrypted media and drm-protected video to the web. this method may have user-visible effects such as asking for permission to access one or more system resources. consider that when deciding when to call requestmedia
keysystemaccess(); you don't want those requests to happen at inconvenient times. ...
...ncrypted media and drm-protected video to the web. this method may have user-visible effects such as asking for permission to access one or more system resources. consider that when deciding when to call requestmedia
keysystemaccess(); you don't want those requests to happen at inconvenient times. as a general rule, this function should be called only when it's about time to create and use a media
keys object by calling the returned media
keysystemaccess object's createmedia
keys() method. syntax promise = navigator.requestmedia
keysystemaccess(
keysystem, supportedconfigurations); parameters
keysystem a domstring identifying the
key system. for example com.example.somesystem or org.w3.clear
key. supportedconfigurations a non-empty array of media
keysystemconfiguration objects. the first...
...r.requestmedia
keysystemaccess(
keysystem, supportedconfigurations); parameters
keysystem a domstring identifying the
key system. for example com.example.somesystem or org.w3.clear
key. supportedconfigurations a non-empty array of media
keysystemconfiguration objects. the first element with a satisfiable configuration will be used. return value a promise that, when resolved, delivers a media
keysystemaccess object to your fulfillment handler function. ...
...And 3 more matches
PublicKeyCredentialCreationOptions.challenge - Web APIs
the challenge property of the public
keycredentialcreationoptions dictionary is a buffersource used as a cryptographic challenge. this is randomly generated then sent from the relying party's server. this value (among other client data) will be signed by the authenticator, using its private
key, and must be sent back for verification to the server as part of authenticatorattestationresponse.attestationobject. note: when the credential is retrieved with a navigator.credentials.get() call, the signature of the challenge is contained in authenticatorassertionresponse.signature. note: a challenge will be at least 16 bytes long. syntax challenge = public
keycredentialcreationoptions.challenge value a buffersource which is at least 16 bytes long. contains a cryptographic challenge emitte...
...) call, the signature of the challenge is contained in authenticatorassertionresponse.signature. note: a challenge will be at least 16 bytes long. syntax challenge = public
keycredentialcreationoptions.challenge value a buffersource which is at least 16 bytes long. contains a cryptographic challenge emitted from the relying party's server which must be signed by the authenticator's private
key and sent back (within the response) to the relying party's server for verification. ...
...hallenge will be at least 16 bytes long. syntax challenge = public
keycredentialcreationoptions.challenge value a buffersource which is at least 16 bytes long. contains a cryptographic challenge emitted from the relying party's server which must be signed by the authenticator's private
key and sent back (within the response) to the relying party's server for verification. ...
...And 3 more matches
PublicKeyCredentialCreationOptions.extensions - Web APIs
extensions, an optional property of the public
keycredentialcreationoptions dictionary, is an object providing the client extensions and their input values. extensions are values requesting additional processing by the client and by the authenticator. for instance, extensions may be used for: backward compatibility with the legacy fido js api, knowing the user verification process, etc. note: an analogous option exists for the fetching operation (navigators.credentials.get()), see public
keycredentialrequestoptions.extensions. syntax extensions = public
keycredentialcreationoptions.extensions value an object with various
keys and values. here is the current (as of march 2019) list of potential extensions which may be used during the registration operation. warning! as of june...
...firefox does not seem to support any extension. also chrome doesn't plan to support any other extension in future extension identifier type description authnsel array of buffersource authenticator selection. ...
...me biometric data that the previous authentication. loc boolean location. if true, the client outputs a coordinates object representing the geolocation of the authenticator. uvm boolean user verification method. if true, the client outputs an array of arrays with 3 values containing information about how the user was verified (e.g. fingerprint, pin, pattern), how the
key is protected, how the matcher (tool used for the authentication operation) is protected. biometricperfbounds object with two numerical properties: far and frr biometric authenticator performance bounds. the client must not use any authenticator with false acceptance rate (far) and false rejection rate (frr) below the inputs. the client outputs true if this was taken into account. ...
...And 3 more matches
keyPoints - SVG: Scalable Vector Graphics
the
keypoints attribute indicates the simple duration of an animation. ...
... default value none animatable no <number> [; <number>] ;? this value defines a semicolon-separated list of floating point values between 0 and 1 and indicates how far al...
... default value none animatable no <number> [; <number>] ;? this value defines a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the motion path ...
...And 3 more matches
keySplines - SVG: Scalable Vector Graphics
the
keysplines attribute defines a set of bézier curve control points associated with the
keytimes list, defining a cubic bézier function that controls interval pacing. this attribute is ignored unless the calcmode attribute is set to spline. if there are any errors in the
keysplines specification (bad values, too many or too few values), the animation will not occur. ...
...he animation will not occur. ...
...re using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60"
keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attributename="cy" dur="4s" calcmode="spline" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10"
keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> </circle> </svg> usage notes value <control-point> [ ; <control-point> ]* ;?
...And 3 more matches
Simple SeaMonkey build
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. ...
...ibcurl4-openssl-dev libnotify-dev libxt-dev libiw-dev libidl-dev mesa-common-dev autoconf2.13 yasm libgtk2.0-dev libdbus-1-dev libdbus-glib-1-dev python-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libpulse-dev ubuntu linux # for ubuntu 12.04 lts (precise pangolin), replace the following line with: sudo apt-get build-dep thunderbird sudo apt-get build-dep seamon
key sudo apt-get install zip unzip mercurial g++ make autoconf2.13 yasm libgtk2.0-dev libglib2.0-dev libdbus-1-dev libdbus-glib-1-dev libasound2-dev libcurl4-openssl-dev libnotify-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libiw-dev libxt-dev mesa-common-dev libpulse-dev fedora linux centos rhel: sudo yum groupinstall 'development tools' 'development librari...
...you will arrive in your windows user home directory which is likely to contain spaces in its path (e.g. c:\users\myaccount). this can lead to problems later in the building stage. to avoid that, create a directory without spaces in its path (e.g. mkdir /c/mozilla-src) and switch to it before building (cd /c/mozilla-src). problems? see windows build prerequisites. building seamon
key building seamon
key requires at least 2 gb of disk space and 256 mb of available ram. # get the source # for aurora, use https://hg.mozilla.org/releases/comm-aurora/ and comm-aurora instead # for beta, use https://hg.mozilla.org/releases/comm-beta/ and comm-beta instead # for release, use https://hg.mozilla.org/releases/comm-release/ and comm-release instead hg clone https://hg.mozilla.org/comm-...
...And 2 more matches
sslkey.html
this page is part of the ssl reference that we are migrating into the format described in the mdn style guide. if you are inclined to help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference
key functions chapter 6
key functions this chapter describes two functions used to manipulate private
keys and
key databases such as the
key3.db database provided with communicator. sec
key_getdefault
keydb sec
key_destroyprivate
key sec
key_getdefault
keydb returns a handle to the default
key database opened by nss_init. syntax #include <
key.h> #include <
keyt.h> sec
keykeydbhandle *sec
key_getdefault
keydb(void); returns the function returns a handle of type sec
keykeydbhandle. d...
...
key3.db database provided with communicator. sec
key_getdefault
keydb sec
key_destroyprivate
key sec
key_getdefault
keydb returns a handle to the default
key database opened by nss_init. syntax #include <
key.h> #include <
keyt.h> sec
keykeydbhandle *sec
key_getdefault
keydb(void); returns the function returns a handle of type sec
keykeydbhandle. description nss_init opens the certificate,
key, and security module databases that you specify for use with nss. sec
keykeydbhandle returns a handle to the
key database opened by nss_init. sec
key_destroyprivate
key destroys a private
key structure. ...
...t.h> sec
keykeydbhandle *sec
key_getdefault
keydb(void); returns the function returns a handle of type sec
keykeydbhandle. description nss_init opens the certificate,
key, and security module databases that you specify for use with nss. sec
keykeydbhandle returns a handle to the
key database opened by nss_init. sec
key_destroyprivate
key destroys a private
key structure. syntax #include <
key.h> #include <
keyt.h> void sec
key_destroyprivate
key(sec
keyprivate
key *
key); parameter this function has the following parameter:
key a pointer to the private
key structure to destroy. description certificate and
key structures are shared objects. ...
...And 2 more matches
SpiderMonkey Internals: Thread Safety
a program typically has only one jsruntime, even if it has many threads. each runtime has one or more jscompartments. ...
...a program typically has only one jsruntime, even if it has many threads. each runtime has one or more jscompartments. ...
...a program typically has only one jsruntime, even if it has many threads. each runtime has one or more jscompartments. ...
...And 2 more matches
CryptoKey - Web APIs
the crypto
key interface of the web crypto api represents a cryptographic
key obtained from one of the subtlecrypto methods generate
key(), derive
key(), import
key(), or unwrap
key(). for security reasons, the crypto
key interface can only be used in a secure context. properties crypto
key.type string which may take one of the following values: "secret": this
key is a secret
key for use with a symmetric algorithm. "private": this
key is the private half of an asymmetric algorithm's crypto
keypair. "public": this
key is the public half of an asymmetric algorithm's crypto
keypair. crypto
key.extractable boolean indicating whether or not the
key may be extracted using subtlecrypto.export
key() or subtlecrypto.wrap
key(). true: the
key may be extracted. false the k...
.... "private": this
key is the private half of an asymmetric algorithm's crypto
keypair. "public": this
key is the public half of an asymmetric algorithm's crypto
keypair. crypto
key.extractable boolean indicating whether or not the
key may be extracted using subtlecrypto.export
key() or subtlecrypto.wrap
key(). true: the
key may be extracted. false the
key may not be extracted. export
key() or wrap
key() will throw an exception if used to extract this
key. crypto
key.algorithm an object describing the algorithm for which this
key can be used and any associated extra parameters. aes
keygenparams if the algorithm is any of the aes variants. rsahashed
keygenparams if the algorithm is any of the rsa variants. ec
keygenparams if the algorithm is any of the ec variants. hm...
... or wrap
key() will throw an exception if used to extract this
key. crypto
key.algorithm an object describing the algorithm for which this
key can be used and any associated extra parameters. aes
keygenparams if the algorithm is any of the aes variants. rsahashed
keygenparams if the algorithm is any of the rsa variants. ec
keygenparams if the algorithm is any of the ec variants. hmac
keygenparams if the algorithm is hmac. crypto
key.usages an array of strings, indicating what can be done with the
key. possible values for array elements are: "encrypt": the
key may be used to encrypt messages. "decrypt": the
key may be used to decrypt messages. "sign": the
key may be used to sign messages. "verify": the
key may be used to verify signatures. ...
...And 2 more matches
GlobalEventHandlers.onkeypress - Web APIs
the on
keypress property of the globaleventhandlers mixin is an eventhandler that processes
keypress events. the
keypress event should fire when the user presses a
key on the
keyboard. however, in practice browsers do not fire
keypress events for certain
keys. the on
keypress event handler has been deprecated. you may want to use on
keydown instead. syntax target.on
keypress = functionref; value functionref is a function name or a function expression. the function receives a
keyboardevent object as its sole argument. examples basic example this example logs the
keyboardevent.code value whenever you press a
key inside the <input> element. html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onk...
...ef is a function name or a function expression. the function receives a
keyboardevent object as its sole argument. examples basic example this example logs the
keyboardevent.code value whenever you press a
key inside the <input> element. html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.on
keypress = log
key; function log
key(e) { log.textcontent += ` ${e.code}`; } result filter
keys with a regular expression this example filters the characters typed into a form field using a regular expression. html <label>enter numbers only: <input> </label> javascript function numbersonly(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const input = documen...
... /* type the word "exit" in any point of your page... ...
...And 2 more matches
Headers.keys() - Web APIs
the headers.
keys() method returns an iterator allowing to go through all
keys contained in this object. the
keys are bytestring objects. note: this method is available in web workers. syntax headers.
keys(); return value returns an iterator. ...
...turns an iterator allowing to go through all
keys contained in this object. the
keys are bytestring objects. note: this method is available in web workers. syntax headers.
keys(); return value returns an iterator. ...
...ator allowing to go through all
keys contained in this object. the
keys are bytestring objects. note: this method is available in web workers. syntax headers.
keys(); return value returns an iterator. ...
...And 2 more matches
IDBCursor.key - Web APIs
the
key read-only property of the idbcursor interface returns the
key for the record at the cursor's position. if the cursor is outside its range, this is set to undefined. the cursor's
key can be any data type. note: this feature is available in web workers. syntax var
key = cursor.
key; value a value of any type. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. within each iteration we log the
key of the cursor to the console, something like this (its the album title in each case, which is our
key). the cursor does not require us to select the data based on a
key; we can just grab all of it. also note that in each iteration of the loop, you can grab data from the current rec...
... recommendation browser compatibility ...
...var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.
key); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of '
key' in that specification. recommendation indexed database api draftthe definition of '
key' in that specification. recommendation browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobile...
...And 2 more matches
IDBCursor.primaryKey - Web APIs
the primary
key read-only property of the idbcursor interface returns the cursor's current effective
key. if the cursor is currently being iterated or has iterated outside its range, this is set to undefined. the cursor's primary
key can be any data type. note: this feature is available in web workers. syntax var value = cursor.primary
key; value a value of any data type. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. ...
...e, this is set to undefined. the cursor's primary
key can be any data type. note: this feature is available in web workers. syntax var value = cursor.primary
key; value a value of any data type. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. within each iteration we log the primary
key of the cursor to the console, something like this (its the album title in each case, which is our primary
key): hemispheres the cursor does not require us to select the data based on a
key; we can just grab all of it. also note that in each iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo. for a complete working example, see our idb...
... recommendation browser co...
...And 2 more matches
IDBIndex.keyPath - Web APIs
the
keypath property of the idbindex interface returns the
key path of the current index. if null, this index is not auto-populated. note: this feature is available in web workers. syntax var my
keypath = myindex.
keypath; value any data type that can be used as a
key path. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary
key. the
key path of the current index is logged to the console: it should be returned as lname. finally, we iterate through each reco...
...ach record, and insert the data into an html table. ...
... recommendation browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. deskto...
...And 2 more matches
IDBLocaleAwareKeyRange - Web APIs
...
...ce, idb
keyrange. bear in mind however that idblocaleaware
keyrange has its own implementation of idb
keyrange.bound. this is because when you use bound(), it checks if lower bound < upper bound, and throws an exception if that’s not the case. with locale-aware indexes, the meaning of < depends on the locale, so for example in lithuanian y is sorted between i and k. the only difference between idb
keyrange and idblocaleaware
keyrange is that the latter doesn’t do the aforementioned check. developers should always use idblocaleaware
keyrange when dealing with locale-aware indexes. ...
... not the case. with locale-aware indexes, the meaning of < depends on the locale, so for example in lithuanian y is sorted between i and k. the only difference between idb
keyrange and idblocaleaware
keyrange is that the latter doesn’t do the aforementioned check. developers should always use idblocaleaware
keyrange when dealing with locale-aware indexes. ...
...And 2 more matches
IDBObjectStore.keyPath - Web APIs
the
keypath read-only property of the idbobjectstore interface returns the
key path of this object store. if this property is null, the application must provide a
key for each modification operation. note: this feature is available in web workers. syntax var my
keypath = objectstore.
keypath; value any value type. example in the following code snippet, we open a read/write transaction on our database and add some data to an object store using add(). after the object store has been created, we log objectstore.
keypath to the console. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialis...
...rything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
... recommendation browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...And 2 more matches
KeyboardEvent() - Web APIs
the
keyboardevent() constructor creates a new
keyboardevent. syntax event = new
keyboardevent(typearg,
keyboardeventinit); values typearg is a domstring representing the name of the event.
keyboardeventinitoptional is a
keyboardeventinit dictionary, having the following fields: "
key", optional and defaulting to "", of type domstring, that sets the value of
keyboardevent.
key. "code", optional and defaulting to "", of type domstring, that sets the value of
keyboardevent.code. "location", optional and defaulting to 0, of type unsigned long, that sets the value of
keyboardevent.location. "ctrl
key", optional and defaulting to false, of type boolean, that sets the value of
keyboardevent.ctrl
key. ...
..."", of type domstring, that sets the value of
keyboardevent.
key. "code", optional and defaulting to "", of type domstring, that sets the value of
keyboardevent.code. "location", optional and defaulting to 0, of type unsigned long, that sets the value of
keyboardevent.location. "ctrl
key", optional and defaulting to false, of type boolean, that sets the value of
keyboardevent.ctrl
key. "shift
key", optional and defaulting to false, of type boolean, that sets the value of
keyboardevent.shift
key. "alt
key", optional and defaulting to false, of type boolean, that sets the value of
keyboardevent.alt
key. "meta
key", optional and defaulting to false, of type boolean, that sets the value of
keyboardevent.meta
key. "repeat", optional and defaulting to false, of type boolean, that sets the valu...
...tional and defaulting to false, of type boolean, that sets the value of
keyboardevent.shift
key. "alt
key", optional and defaulting to false, of type boolean, that sets the value of
keyboardevent.alt
key. "meta
key", optional and defaulting to false, of type boolean, that sets the value of
keyboardevent.meta
key. "repeat", optional and defaulting to false, of type boolean, that sets the value of
keyboardevent.repeat. "iscomposing", optional and defaulting to false, of type boolean, that sets the value of
keyboardevent.iscomposing. "charcode", optional and defaulting to 0, of type unsigned long, that sets the value of the deprecated
keyboardevent.charcode. "
keycode", optional and defaulting to 0, of type unsigned long, that sets the value of the deprecated
keyboardevent.
keycode. "whic...
...And 2 more matches
KeyframeEffect.iterationComposite - Web APIs
specifications specification status comment web animations level 2the definition of 'iterationcomposite' in that specification. ...
... specifications specification status comment web animations level 2the definition of 'iterationcomposite' in that specification. ...
... specifications specification status comment web animations level 2the definition of 'iterationcomposite' in that specification. ...
...And 2 more matches
MouseEvent.altKey - Web APIs
the mouseevent.alt
key read-only property is a boolean that indicates whether the alt
key was pressed or not when a given mouse event occurs. be aware that the browser can't always detect the alt
key on some operating systems. on some linux variants, for example, a left mouse click combined with the alt
key is used to move or resize windows. note: on macintosh
keyboards, this
key is also known as the option
key. syntax var alt
keypressed = instanceofmouseevent.alt
key return value a boolean, where true indicates that the
key is pressed, and false indicates that the
key is not pressed. example this example logs the alt
key property when you trigger a click event. ...
... or resize windows. note: on macintosh
keyboards, this
key is also known as the option
key. syntax var alt
keypressed = instanceofmouseevent.alt
key return value a boolean, where true indicates that the
key is pressed, and false indicates that the
key is not pressed. example this example logs the alt
key property when you trigger a click event. ...
... obsolete no change from document object model (dom) level 2 events specification. ...
...And 2 more matches
MouseEvent.ctrlKey - Web APIs
the mouseevent.ctrl
key read-only property is a boolean that indicates whether the ctrl
key was pressed or not when a given mouse event occurs. note: on macintosh
keyboards, this
key is the control
key. syntax var ctrl
keypressed = instanceofmouseevent.ctrl
key return value a boolean, where true indicates that the
key is pressed, and false indicates that the
key is not pressed. example this example logs the ctrl
key property when you trigger a click event. ...
... a given mouse event occurs. note: on macintosh
keyboards, this
key is the control
key. syntax var ctrl
keypressed = instanceofmouseevent.ctrl
key return value a boolean, where true indicates that the
key is pressed, and false indicates that the
key is not pressed. example this example logs the ctrl
key property when you trigger a click event. ...
... obsolete no change from document object model (dom) level 2 events specification. ...
...And 2 more matches
MouseEvent.metaKey - Web APIs
the mouseevent.meta
key read-only property is a boolean that indicates whether the meta
key was pressed or not when a given mouse event occurs. be aware that many operating systems bind special functionality to the meta
key, so this property may be false even when the
key is actually pressed. on windows, for example, this
key may open the start menu. note: on macintosh
keyboards, this
key is the command
key (⌘). on windows
keyboards, this
key is the windows
key (⊞). syntax var meta
keypressed = instanceofmouseevent.meta
key return value a boolean, where true indicates that the
key is pressed, and false indicates that the
key is not pressed. example this example logs the meta
key property when you trigger a click event. ...
...is
key is the command
key (⌘). on windows
keyboards, this
key is the windows
key (⊞). syntax var meta
keypressed = instanceofmouseevent.meta
key return value a boolean, where true indicates that the
key is pressed, and false indicates that the
key is not pressed. example this example logs the meta
key property when you trigger a click event. ...
... obsolete no change from document object model (dom) level 2 events specification. ...
...And 2 more matches
MouseEvent.shiftKey - Web APIs
the mouseevent.shift
key read-only property is a boolean that indicates whether the shift
key was pressed or not when a given mouse event occurs. syntax var shift
keypressed = instanceofmouseevent.shift
key return value a boolean, where true indicates that the
key is pressed, and false indicates that the
key is not pressed. example this example logs the shift
key property when you trigger a click event. ...
...at indicates whether the shift
key was pressed or not when a given mouse event occurs. syntax var shift
keypressed = instanceofmouseevent.shift
key return value a boolean, where true indicates that the
key is pressed, and false indicates that the
key is not pressed. example this example logs the shift
key property when you trigger a click event. ...
... obsolete no change from document object model (dom) level 2 events specification. ...
...And 2 more matches
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web APIs
isuserverifyingplatformauthenticatoravailable() is a static method of the public
keycredential interface that returns a promise which resolves to true if a user-verifying platform authenticator is available. a user-verifying platform authenticator is a kind of multi-factor authenticator that is part of the client device (it is generally not removable) and that involves an action from the user in order to identify them. at the time of this writing, this method's result only resolves to true on windows when windows hello capabilities are available (on recent versions of this os). note: this method may only be used in top-level contexts and will not be available in an <iframe> for example. syntax public
keycredential.isuserverifyingplatformauthenticatoravailable() parameters none. ret...
...nticatoravailable() parameters none. return value a promise which resolves to a boolean indicating whether or a not a user-verifying platform authenticator is available. as of today (march 2019), this is basically indicating if windows hello may be used with the web authentication api and that the user has accepted its use. ...
...sically indicating if windows hello may be used with the web authentication api and that the user has accepted its use. note: this is a static method which is directly called on the public
keycredential interface and not on an instance. note: in earlier versions of the specification, the boolean also conveyed the consent of the user to disclose such an authenticator existed. ...
...And 2 more matches
PublicKeyCredentialCreationOptions.attestation - Web APIs
attestation is an optional property of the public
keycredentialcreationoptions dictionary. this is a string whose value indicates the preference regarding the attestation transport, between the authenticator, the client and the relying party. the attestation is a mean for the relying party to verify the origin of the authenticator with an attestation certificate authority. the information contained in the attestation may thus disclose some information about the user (e.g. which device they are using). syntax attestation = public
keycredentialcreationoptions.attestation value a string which may be "none": the relying party is not interested in this attestation. this avoids making a check with the attestation certificate authority and asking the user consent for sharing identifying inf...
...sking the user consent for sharing identifying information. "indirect": the client may change the assertion from the authenticator (for instance, using an anonymization ca). this value is used when the relying party wishes to verify the attestation. "direct": the relying party wants to receive the attestation as generated by the authenticator. the default value is "none". ...
...ed by the authenticator. the default value is "none". ...
...And 2 more matches
PublicKeyCredentialCreationOptions.rp - Web APIs
the rp property of the public
keycredentialcreationoptions dictionary is an object describing the relying party which requested the credential creation (via navigator.credentials.create()). syntax relyingpartyobj = public
keycredentialcreationoptions.rp properties icon optional an url as a usvstring value which points to an image resource which can be the logo/icon of the relying party. id a domstring uniquely identifying a relying party. the default value of this property is the domain of the current document (e.g. "login.example.com"). it may be overridden with a suffix of the current domain (e.g. "example.com"). name a domstring giving a human-readable name for the relying party. this property is intended for display (e.g. "example corp"). ...
...ing party. id a domstring uniquely identifying a relying party. the default value of this property is the domain of the current document (e.g. "login.example.com"). it may be overridden with a suffix of the current domain (e.g. "example.com"). name a domstring giving a human-readable name for the relying party. this property is intended for display (e.g. "example corp"). ...
...ing a human-readable name for the relying party. this property is intended for display (e.g. "example corp"). ...
...And 2 more matches
TouchEvent.shiftKey - Web APIs
specifications specification status comment touch events – level 2 draft non-stable version. ...
... specifications specification status comment touch events – level 2 draft non-stable version. ...
... specifications specification status comment touch events – level 2 draft non-stable version. ...
...And 2 more matches
x-ms-acceleratorkey - HTML: Hypertext Markup Language
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. ...
... 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. ...
...andard 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 x-ms-accelerator
key attribute accessibly declares that an accelerator
key has been assigned to an element: the element is activated via javascript when the
key(s) are pressed on a
keyboard. this proprietary property is specific to internet explorer and microsoft edge. x-ms-accelerator
key exposes a notification in the accessibility tree, for screen readers and other assistive technologies, that an accelerator
key exists for that element. this attribute does not provide the accelerator
key behavior. you must provide javascript event handlers, like onk...
...And 2 more matches
handler.ownKeys() - JavaScript
the handler.own
keys() method is a trap for reflect.own
keys(). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const p = new proxy(target, { own
keys: function(target) { } }); parameters the following parameter is passed to the own
keys() method. this is bound to the handler. target the target object. return value the own
keys() method must return an enumerable object. description the handler.own
keys() method is a trap for reflect.own
keys(). ...
...rs the following parameter is passed to the own
keys() method. this is bound to the handler. target the target object. return value the own
keys() method must return an enumerable object. description the handler.own
keys() method is a trap for reflect.own
keys(). interceptions this trap can intercept these operations: object.getownpropertynames() object.getownpropertysymbols() object.
keys() reflect.own
keys() invariants if the following invariants are violated, the proxy will throw a typeerror: the result of own
keys() must be an array. the type of each array element is either a string or a symbol. the result list must contain the
keys of all non-configurable own properties of the target object. if the target object is not extensible, then the result list must contain all...
...reflect.own
keys() invariants if the following invariants are violated, the proxy will throw a typeerror: the result of own
keys() must be an array. the type of each array element is either a string or a symbol. the result list must contain the
keys of all non-configurable own properties of the target object. if the target object is not extensible, then the result list must contain all the
keys of the own properties of the target object and no other values. examples trapping of getownpropertynames the following code traps object.getownpropertynames(). ...
...And 2 more matches
Reflect.ownKeys() - JavaScript
the static reflect.own
keys() method returns an array of the target object's own property
keys. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.own
keys(target) parameters target the target object from which to get the own
keys. return value an array of the target object's own property
keys. exceptions a typeerror, if target is not an object. description the reflect.own
keys method returns an array of the target object's own property
keys. its return value is equivalent to object.getownpropertynames(target).concat(object.getownpropertysymbols(target)). ...
...ect from which to get the own
keys. return value an array of the target object's own property
keys. exceptions a typeerror, if target is not an object. description the reflect.own
keys method returns an array of the target object's own property
keys. its return value is equivalent to object.getownpropertynames(target).concat(object.getownpropertysymbols(target)). ...
...et the own
keys. return value an array of the target object's own property
keys. exceptions a typeerror, if target is not an object. description the reflect.own
keys method returns an array of the target object's own property
keys. its return value is equivalent to object.getownpropertynames(target).concat(object.getownpropertysymbols(target)). ...
...And 2 more matches
deleteKey - Archive of obsolete content
returns 0 if it succeeded; a nonzero number if it failed to schedule the deletion. for a list of possible values, see return codes. ...
... returns 0 if it succeeded; a nonzero number if it failed to schedule the deletion. for a list of possible values, see return codes. ...
... returns 0 if it succeeded; a nonzero number if it failed to schedule the deletion. for a list of possible values, see return codes. ...
... returns 0 if it succeeded; a nonzero number if it failed to schedule the deletion. for a list of possible values, see return codes. ...
FC_GenerateKeyPair
name fc_generate
keypair - generate a new public/private
key pair syntax ck_rv fc_generate
keypair( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_attribute_ptr ppublic
keytemplate, ck_ulong uspublic
keyattributecount, ck_attribute_ptr pprivate
keytemplate, ck_ulong usprivate
keyattributecount, ck_object_handle_ptr phpublic
key, ck_object_handle_ptr phprivate
key ); parameters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. ppublic
keytemplate [in] pointer to the public
key template. uspublic
keyattributecount [in] number of attributes in the public
key template. pprivate
keytemplate [in] pointer to the private
key template. ...
...te
keyattributecount, ck_object_handle_ptr phpublic
key, ck_object_handle_ptr phprivate
key ); parameters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. ppublic
keytemplate [in] pointer to the public
key template. uspublic
keyattributecount [in] number of attributes in the public
key template. pprivate
keytemplate [in] pointer to the private
key template. usprivate
keyattributecount [in] number of attributes in the private
key template. phpublic
key [out] pointer to the location to receive the handle of the new public
key. phprivate
key [out] pointer to the location to receive the handle of the new private
key. description fc_generate
keypair generates a public/private
key pair, creating new
key objects. the handles of new
keys are returned. a user must log int...
.... phpublic
key [out] pointer to the location to receive the handle of the new public
key. phprivate
key [out] pointer to the location to receive the handle of the new private
key. description fc_generate
keypair generates a public/private
key pair, creating new
key objects. the handles of new
keys are returned. a user must log into the token (to assume the nss user role) before calling fc_generate
keypair. ...
...andle of the new public
key. phprivate
key [out] pointer to the location to receive the handle of the new private
key. description fc_generate
keypair generates a public/private
key pair, creating new
key objects. the handles of new
keys are returned. a user must log into the token (to assume the nss user role) before calling fc_generate
keypair. ...
FC_WrapKey
name fc_wrap
key - wrap a
key syntax ck_rv fc_wrap
key( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_object_handle hwrapping
key, ck_object_handle h
key, ck_byte_ptr pwrapped
key, ck_ulong_ptr puswrapped
keylen ); parameters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. hwrapping
key [in] pointer to the public
key template. h
key [in] number of attributes in the public
key template. pwrapped
key [out] pointer to the location to receive the wrapped
key or null. puswrapped
keylen [in, out] pointer to length of wrapped
key buffer. description fc_wrap
key wraps (encrypts) a
key. ...
... hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. hwrapping
key [in] pointer to the public
key template. h
key [in] number of attributes in the public
key template. pwrapped
key [out] pointer to the location to receive the wrapped
key or null. puswrapped
keylen [in, out] pointer to length of wrapped
key buffer. description fc_wrap
key wraps (encrypts) a
key. if pwrapped
key is null the length of the wrapped
key is returned in puswrapped
keylen and fc_wrap
key may be called again with pwrapped
key set to retrieve the wrapped
key. ...
...ive the wrapped
key or null. puswrapped
keylen [in, out] pointer to length of wrapped
key buffer. description fc_wrap
key wraps (encrypts) a
key. if pwrapped
key is null the length of the wrapped
key is returned in puswrapped
keylen and fc_wrap
key may be called again with pwrapped
key set to retrieve the wrapped
key. a user must log into the token (to assume the nss user role) before calling fc_wrap
key. ...
...ut] pointer to length of wrapped
key buffer. description fc_wrap
key wraps (encrypts) a
key. if pwrapped
key is null the length of the wrapped
key is returned in puswrapped
keylen and fc_wrap
key may be called again with pwrapped
key set to retrieve the wrapped
key. a user must log into the token (to assume the nss user role) before calling fc_wrap
key. ...
NSS Key Functions
this chapter describes two functions used to manipulate private
keys and
key databases such as the
key3.db database provided with nss. this was converted from "chapter 6:
key functions". back to the nss reference main page. sec
key_getdefault
keydb sec
key_destroyprivate
key sec
key_getdefault
keydb returns a handle to the default
key database opened by nss_init. syntax include <
key.h> include <
keyt.h> sec
keykeydbhandle *sec
key_getdefault
keydb(void); returns the function returns a handle of type sec
keykeydbhandle. description nss_init opens the certificate,
key, and security module databases that you specify for use with nss. sec
keykeydbhandle returns a handle to the
key database opened by nss_init. sec
key_destroyprivate
key destroys a private
key structure. syntax include ...
... include <
keyt.h> sec
keykeydbhandle *sec
key_getdefault
keydb(void); returns the function returns a handle of type sec
keykeydbhandle. description nss_init opens the certificate,
key, and security module databases that you specify for use with nss. sec
keykeydbhandle returns a handle to the
key database opened by nss_init. sec
key_destroyprivate
key destroys a private
key structure. syntax include <
key.h> include <
keyt.h> void sec
key_destroyprivate
key(sec
keyprivate
key *
key); parameter this function has the following parameter:
key a pointer to the private
key structure to destroy. description certificate and
key structures are shared objects. ...
...nit. sec
key_destroyprivate
key destroys a private
key structure. syntax include <
key.h> include <
keyt.h> void sec
key_destroyprivate
key(sec
keyprivate
key *
key); parameter this function has the following parameter:
key a pointer to the private
key structure to destroy. description certificate and
key structures are shared objects. when an application makes a copy of a particular certificate or
key structure that already exists in memory, ssl makes a shallow copy--that is, it increments the reference count for that object rather than making a whole new copy. when you call cert_destroycertificate or sec
key_destroyprivate
key, the function decrements the reference count and, if the reference count reaches zero as a result, both frees the memory and sets all the bits to zero. the use of the wor...
...making a whole new copy. when you call cert_destroycertificate or sec
key_destroyprivate
key, the function decrements the reference count and, if the reference count reaches zero as a result, both frees the memory and sets all the bits to zero. the use of the word "destroy" in function names or in the description of a function implies reference counting. never alter the contents of a certificate or
key structure. if you attempt to do so, the change affects all the shallow copies of that structure and can cause severe problems. ...
Rebranding SpiderMonkey (1.8.5)
for example: ../configure --enable-ctypes --with-system-nspr note: your desired configuration may be different. the only required part in this step is the ../configure command. so far, so good. now for the tricky parts. ...
...for example: ../configure --enable-ctypes --with-system-nspr note: your desired configuration may be different. the only required part in this step is the ../configure command. so far, so good. now for the tricky parts. ...
...for example: ../configure --enable-ctypes --with-system-nspr note: your desired configuration may be different. the only required part in this step is the ../configure command. so far, so good. now for the tricky parts. we need to perform a recursive find and replace text operation on all files in the current directory. ...
...e the manual editing process, this has been discouraged due to the fact that these files are automatically generated and very little constant data can be depended upon. it also allows these instructions to apply to a wide range platforms without introducing more software dependencies. save the file and exit the editor. you may now perform the build and installation of your custom branded spidermon
key library: make note: depending on your system you may need administrative rights to perform the installation: make install the following information isn't technically needed for using your library but it will help other applications use your library. your rebranded library has been succesfully built and installed to libdir as specified in ./config/autoconf.mk. a pkgconfig file has also been inst...
SpiderMonkey compartments
a compartment is a new concept with spidermon
key 1.8.5. compartments are used to create multiple javascript memory heaps, which avoids having one heap for all javascript objects. each compartment is a separate javascript heap. in previous versions of spidermon
key, the garbage collector would walk the entire heap of all javascript objects when garbage collection was needed. with compartments, garbage collection can run per compartment. this can result in significant performance improvements in some applications. an object in one compartment cannot touch an object in another compartment, except through a cross-compartment wrapper. compartment example the firefox browser embeds spidermon
key. in firefox 4 and above, compartments are used and all javascript objects that belong to a c...
...d to touch objects in the same compartment. this invariant is very useful for security purposes. the javascript engine enforces this requirement at a very low level. it means that a "google.com" object can never accidentally leak into an untrusted website such as "evil.com". only a special object type can cross the compartment boundaries. we call these objects cross-compartment wrappers. ...
...objects that are found to be disconnected from the graph are discarded. ...
...mpartment. objects that are found to be disconnected from the graph are discarded. ...
JSProtoKey
this article covers features introduced in spidermon
key 24 possible standard object prototype types. value prototype in javascript jsproto_null a dummy
key for invalid prototype. mxr search for jsproto_null jsproto_object object mxr search for jsproto_object jsproto_function function mxr search for jsproto_function jsproto_array array mxr search for jsproto_array jsproto_boolean boolean mxr search for jsproto_boolean jsproto_json json mxr search for jsproto_json jsproto_date date mxr search for jsproto_date jsproto_math math mxr search for jsproto_math jsproto_number number mxr search for jsproto_number jsproto...
...t8clampedarray jsproto_proxy proxy mxr search for jsproto_proxy jsproto_weakmap weakmap mxr search for jsproto_weakmap jsproto_map map mxr search for jsproto_map jsproto_set set mxr search for jsproto_set jsproto_dataview dataview mxr search for jsproto_dataview jsproto_symbol symbol added in spidermon
key 38 mxr search for jsproto_symbol jsproto_sharedarraybuffer sharedarraybuffer (nightly only) mxr search for jsproto_sharedarraybuffer jsproto_intl intl mxr search for jsproto_intl jsproto_typedobject typedobject (nightly only) mxr search for jsproto_typedobject jsproto_generatorfunction generatorfunction added in spidermon
key 31 ...
... intl mxr search for jsproto_intl jsproto_typedobject typedobject (nightly only) mxr search for jsproto_typedobject jsproto_generatorfunction generatorfunction added in spidermon
key 31 mxr search for jsproto_generatorfunction jsproto_simd simd (nightly only) mxr search for jsproto_simd jsproto_weakset weakset added in spidermon
key 38 mxr search for jsproto_weakset jsproto_sharedint8array sharedint8array (nightly only) mxr search for jsproto_sharedint8array jsproto_shareduint8array shareduint8array (nightly only) mxr search for jsproto_shareduint8array jsproto_sharedint16array sharedint16array (nightly only) mxr search for jsproto_sharedint16array jsproto_shar...
...some of them are nightly only (depends on each option). see also bug 789635 bug 645416 - added jsproto_symbol bug 769872 - added jsproto_intl bug 792439 - added jsproto_weakset...
SpiderMonkey 52
it also contains new language and api features described in detail below. ...
...it also contains new language and api features described in detail below. ...
...it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. you may wish to make the bugs block bug 837921 (aliased as "sm.embedding"). ...
.... it also contains new language and api features described in detail below. ...
Setting up CDT to work on SpiderMonkey
eclipse's cdt has some pretty decent features that make it an attractive environment to work in when you are interested in getting code hints, autocompletion, function, and field usage information and general ide goodness for c/c++. there is a guide for setting up cdt to work with the mozilla codebase, but it does not cover setting things up for just spidermon
key instead of the whole mozilla codebase. hence, here is a short-ish guide for doing just that. step 1 - preparing a spidermon
key build for cdt to index all code, spidermon
key has to be built with debug information. the full process of and requisites for doing so are described here. please follow those instructions up until the point of invoking configure. the initial build was in clang, so the modified build commands look like th...
...uch more detail for the entire mozilla codebase. luckily, improvements in cdt have reduced the basic process to manageable five steps: download and extract "eclipse ide for c/c++ developers" from the eclipse downloads page. start eclipse and create a workspace somewhere. select "new > makefile project with existing code" from the "file" menu. give the project a name that you like ("spidermon
key" has a nice ring to it) and use the "browser…" button to select your checkout's js/src folder for the "existing code location". choose the correct toolchain for your platform (i.e. macos x gcc on mac) and click "finish". at this point, the indexer starts running and already produces a pretty decent index of much of spidermon
key. still, there are a quite a few things that cdt does not pick up...
...tings" group tab, deactivate "use default build command". instead, change "build command" to read make -w (this is required because cdt needs detailed information about which directories make operates on, which using -w causes make to provide). change the "build location" to the build directory configured in step 1. for me, that means changing "build directory" to read ${workspace_loc:/spidermon
key/_dbg.obj}. under "behavior", make sure that "enable parallel build" is deactivated, as cdt’s indexer will freak out otherwise. remove "all" from "build (incremental build)". deactivate "clean" so that your builds do not take ages. if you want to use ccache: select "c/c++ general", then "preprocessor include patterns". under the "providers" group tab, select "cdt gcc build output parser" and...
...tring |(ccache) to the end of the "compiler command pattern" text input. start the build by selecting "build all" from the "project" menu. start the indexer by either: selecting "index > rebuild" from the project's context menu located in the project explorer window, or selecting "c/c++ index > rebuild" from the "project" menu. and that is pretty much it: large parts of spidermon
key should now be indexed. unfortunately, there are also large parts that are not properly indexed, leading to errors and warnings being shown for perfectly valid code, but i find that the parts that do work do so nicely enough to make it totally worth it. ...
DefaultKeyBinding
« nsiaccessible page summary provides localized string of global
keyboard accelerator for default action, such as ctrl+o for open file (ctrl + o). ...
... « nsiaccessible page summary provides localized string of global
keyboard accelerator for default action, such as ctrl+o for open file (ctrl + o). ...
... « nsiaccessible page summary provides localized string of global
keyboard accelerator for default action, such as ctrl+o for open file (ctrl + o). ...
... « nsiaccessible page summary provides localized string of global
keyboard accelerator for default action, such as ctrl+o for open file (ctrl + o). ...
KeyboardShortcut
« nsiaccessible page summary provides localized string of access
key name, such as alt+d (alt + d). the modifier may be affected by user and platform preferences. usually alt+letter (alt + letter), or just the letter alone for menu items. ...
... « nsiaccessible page summary provides localized string of access
key name, such as alt+d (alt + d). the modifier may be affected by user and platform preferences. usually alt+letter (alt + letter), or just the letter alone for menu items. ...
... « nsiaccessible page summary provides localized string of access
key name, such as alt+d (alt + d). the modifier may be affected by user and platform preferences. usually alt+letter (alt + letter), or just the letter alone for menu items. ...
... « nsiaccessible page summary provides localized string of access
key name, such as alt+d (alt + d). the modifier may be affected by user and platform preferences. usually alt+letter (alt + letter), or just the letter alone for menu items. ...
CSSKeyframesRule - Web APIs
the css
keyframesrule interface describes an object representing a complete set of
keyframes for a css animation. it corresponds to the contents of a whole @
keyframes at-rule. it implements the cssrule interface with a type value of 7 (cssrule.
keyframes_rule). properties as a cssrule, css
keyframesrule also implements the properties of these interfaces. it has two properties : css
keyframesrule.name represents the name of the animation, used by the animation-name property. css
keyframesrule.cssrules read only returns a cssrulelist of the css rules in the media rule. methods as a cssrule, css
keyframesrule also implements the methods of that interface. ...
...also implements the properties of these interfaces. it has two properties : css
keyframesrule.name represents the name of the animation, used by the animation-name property. css
keyframesrule.cssrules read only returns a cssrulelist of the css rules in the media rule. methods as a cssrule, css
keyframesrule also implements the methods of that interface. it has three specific methods: css
keyframesrule.appendrule() inserts a new
keyframe rule into the current css
keyframesrule. the parameter is a domstring containing a
keyframe in the same format as an entry of a @
keyframes at-rule. if it contains more than one
keyframe rule, a domexception with a syntax_err is thrown. css
keyframesrule.deleterule() deletes a
keyframe rule from the current css
keyframesrule. the parameter is the index...
...le.appendrule() inserts a new
keyframe rule into the current css
keyframesrule. the parameter is a domstring containing a
keyframe in the same format as an entry of a @
keyframes at-rule. if it contains more than one
keyframe rule, a domexception with a syntax_err is thrown. css
keyframesrule.deleterule() deletes a
keyframe rule from the current css
keyframesrule. the parameter is the index of the
keyframe to be deleted, expressed as a domstring resolving as a number between 0% and 100%. css
keyframesrule.findrule() returns a
keyframe rule corresponding to the given
key. the
key is a domstring containing an index of the
keyframe to be returned, resolving to a percentage between 0% and 100%. if no such
keyframe exists, findrule returns null. specification specification status ...
... a number between 0% and 100%. css
keyframesrule.findrule() returns a
keyframe rule corresponding to the given
key. the
key is a domstring containing an index of the
keyframe to be returned, resolving to a percentage between 0% and 100%. if no such
keyframe exists, findrule returns null. specification specification status comment css animationsthe definition of 'css
keyframesrule' in that specification. working draft initial definition ...
HTMLKeygenElement - Web APIs
note: this page describes the
keygen element interface as specified, not as currently implemented by gecko. see bug 101019 for details and status. the <
keygen> elements expose the html
keygenelement interface, which provides special properties and methods (beyond the regular element object interface they also have available to them by inheritance) for manipulating the layout and presentation of
keygen elements. properties autofocus is a boolean that reflects the autofocus html attribute, indicating that the form control should have input focus when the page loads. challenge is a domstring that reflects the challenge html attribute, containing a challenge string that is packaged with the submitted
key. form read only is a htmlformelement that indicates the control's for...
...n that reflects the autofocus html attribute, indicating that the form control should have input focus when the page loads. challenge is a domstring that reflects the challenge html attribute, containing a challenge string that is packaged with the submitted
key. form read only is a htmlformelement that indicates the control's form owner, reflecting the form html attribute if it is defined.
keytype is a domstring that reflects the
keytype html attribute, containing the type of
key used. labels read only unimplemented (see bug 556743) is a nodelist that represents a list of label elements associated with this
keygen element. name is a domstring that reflects the name html attribute, containing the name for the control that is submitted with form data. type read only is a domstri...
... validationmessage read only is a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any). this is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. ...
...alized message that describes the validation constraints that the control does not satisfy (if any). this is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. validity read only is a validitystate representing the validity states that this element is in. willvalidate is a boolean that is always false because
keygen objects are never candidates for constraint validation. methods name & arguments return description checkvalidity() boolean always returns true because
keygen objects are never candidates for constraint validation. setcustomvalidity(in domstring error) void sets a custom validity message for the element. if this message is not the empty strin...
KeyboardEvent.isComposing - Web APIs
obsolete initial definition. ...
... obsolete initial definition. ...
... obsolete initial definition. ...
...turns a boolean value indicating if the event is fired within a composition session, i.e. after compositionstart and before compositionend. syntax var bool = event.iscomposing; example var kbdevent = new
keyboardevent("synthetic
key", false); console.log(kbdevent.iscomposing); // return false specifications specification status comment ui eventsthe definition of '
keyboardevent.prototype.iscomposing' in that specification. working draft document object model (dom) level 3 events specificationthe definition of '
keyboardevent.prototype.iscomposing' in that specification. obsolete initial definition. ...
KeyboardLayoutMap - Web APIs
the
keyboardlayoutmap interface of the the
keyboard api is a map-like object with functions for retrieving the string associated with specific physical
keys. a list of valid
keys is found in the ui events
keyboardevent code values specification. properties
keyboardlayoutmap.entries read only returns an array of a given object's own enumerable property [
key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
keyboardlayoutmap.
keys read only returns a new array iterator object that contains the
keys for each index in the array.
keyboardlayoutmap.size read only returns the number of elements in the
keyboardlayoutmap object. ...
...[
key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
keyboardlayoutmap.
keys read only returns a new array iterator object that contains the
keys for each index in the array.
keyboardlayoutmap.size read only returns the number of elements in the
keyboardlayoutmap object.
keyboardlayoutmap.values read only returns a new array iterator object that contains the values for each index in the
keyboardlayoutmap object. methods
keyboardlayoutmap.foreach() read only executes a provided function once for each element of
keyboardlayoutmap.
keyboardlayoutmap.get() returns the element with the given
key from the
keyboardlayoutmap object. ...
...rdlayoutmap object.
keyboardlayoutmap.values read only returns a new array iterator object that contains the values for each index in the
keyboardlayoutmap object. methods
keyboardlayoutmap.foreach() read only executes a provided function once for each element of
keyboardlayoutmap.
keyboardlayoutmap.get() returns the element with the given
key from the
keyboardlayoutmap object.
keyboardlayoutmap.has() returns a boolean indicating whether the
keyboardlayoutmap object has an element with the specified
key. examples the following example demonstrates how to get the location- or layout-specific string associated with the
key that corresponds to the 'w'
key on an english qwerty
keyboard. ...
... returns the element with the given
key from the
keyboardlayoutmap object.
keyboardlayoutmap.has() returns a boolean indicating whether the
keyboardlayoutmap object has an element with the specified
key. examples the following example demonstrates how to get the location- or layout-specific string associated with the
key that corresponds to the 'w'
key on an english qwerty
keyboard. var
keyboard = navigator.
keyboard;
keyboard.getlayoutmap() .then(
keyboardlayoutmap => { var up
key =
keyboardlayoutmap.get('
keyw'); window.alert('press ' + up
key + ' to move up.'); }) specifications specification status comment
keyboard mapthe definition of '
keyboardlayoutmap' in that specification. editor's draft initial definition. ...
KeyframeEffectOptions - Web APIs
properties composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. ...
... properties composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. ...
... properties composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. ...
...s value set, an animation with 2 iterations would end halfway through a third iteration. defaults to 0.0. iterations optional the number of times the animation should repeat. defaults to 1, and can also take a value of infinity to make it repeat for as long as the element exists. specifications specification status comment web animations level 2the definition of '
keyframeeffectoptions' in that specification. draft added the iterationcomposite option. web animationsthe definition of '
keyframeeffectoptions' in that specification. working draft initial definition. ...
MediaKeyMessageEvent - Web APIs
the media
keymessageevent interface of the encryptedmediaextensions api contains the content and related data when the content decryption module generates a message for the session. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</...
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/media
keymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">media
keymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor ...
...eevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">media
keymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor media
keymessageevent() creates a new instance of media
keymessageevent. properties inherits properties from its parent, event. media
keymessageevent.message read only returns an arraybuffer with a message from the content decryption module. messages vary by
key system. media
keymessageevent.messagetype read only indicates the type of message. may be one of license-request, license-renewal, licens...
... module. messages vary by
key system. media
keymessageevent.messagetype read only indicates the type of message. may be one of license-request, license-renewal, license-release, or individualization-request. methods inherits methods from its parent, event. examples // tbd specifications specification status comment encrypted media extensionsthe definition of 'media
keymessageevent' in that specification. recommendation initial definition. ...
MediaKeySession.onmessage - Web APIs
this interface inherits from the extendableevent interface. ...
... this interface inherits from the extendableevent interface. ...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/media
keysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">media
keysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax media
keysession.
...} specifications specification status comment encrypted media extensionsthe definition of 'onmessage' in that specification. recommendation initial definition. ...
NodeList.keys() - Web APIs
the nodelist.
keys() method returns an iterator allowing to go through all
keys contained in this object. the
keys are unsigned integer. syntax nodelist.
keys(); return value returns an iterator. ...
... the
keys are unsigned integer. syntax nodelist.
keys(); return value returns an iterator. ...
...e unsigned integer. syntax nodelist.
keys(); return value returns an iterator. ...
...ax nodelist.
keys(); return value returns an iterator. ...
PublicKeyCredentialCreationOptions.timeout - Web APIs
the timeout property, of the public
keycredentialcreationoptions dictionary, represents an hint, given in milliseconds, for the time the script is willing to wait for the completion of the creation operation. this property is optional and merely is a hint which may be overridden by the browser. note: an analogous option exists for the fetching operation (navigators.credentials.get()), see public
keycredentialrequestoptions.timeout. syntax timeout = public
keycredentialcreationoptions.timeout value a numerical hint, expressed in milliseconds, giving the time to wait for the creation operation to complete. examples var public
key = { timeout: 6000, // accepting to wait for a minute before giving up. challenge: new uint8array(26) /* this actually is given from the server */, rp: {...
... to complete. examples var public
key = { timeout: 6000, // accepting to wait for a minute before giving up. ...
... timeout: 6000, // accepting to wait for a minute before giving up. ...
...challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pub
keycredparams: [ { type: "public-
key", alg: -7 } ] }; navigator.credentials.create({ public
key }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public
key credentials level 1the definition of '...
PublicKeyCredentialCreationOptions.user - Web APIs
it may be the full name of the user (e.g. "john doe"). this is not intended to store the login of the user (see name below). icon optional an url as a usvstring value which points to an image resource which can be the avatar image for the user. id a buffersource uniquely identifying a given user. ...
... link the user account with its corresponding credentials. this value will later be used when fetching the credentials in authenticatorassertionresponse.userhandle. name a domstring giving a human-readable name for the user's identifier (e.g. "jdoe@example.com").this property is intended for display and may be use to distinguish different account with the same displayname. ...
...challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { // to be changed for each user id: new uint8array.from(window.atob("laegmlkjnrlkgnamlafalfka="), c=>c.charcodeat(0)); name: "jdoe@example.com", displayname: "john doe", icon: "https://gravatar.com/avatar/jdoe.png" }, pub
keycredparams: [ { type: "public-
key", alg: -7 } ] }; navigator.credentials.create({ public
key }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status ...
... navigator.credentials.create({ public
key }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public
key credentials level 1the definition of 'user' in that specification. recommendation initial definition. ...
PublicKeyCredentialRequestOptions.challenge - Web APIs
the challenge property of the public
keycredentialrequestoptions dictionary is a buffersource used as a cryptographic challenge. this is randomly generated then sent from the relying party's server. this value (among other client data) will be signed by the authenticator's private
key and produce authenticatorassertionresponse.signature which should be sent back to the server as part of the response. note: when the credential is created with a navigator.credentials.create() call, the signature of the challenge is contained within authenticatorattestationresponse.attestationobject. note: a challenge will be at least 16 bytes long. syntax challenge = public
keycredentialrequestoptions.challenge value a buffersource which is at least 16 bytes long. contains a cryptographic challenge e...
...ignature of the challenge is contained within authenticatorattestationresponse.attestationobject. note: a challenge will be at least 16 bytes long. syntax challenge = public
keycredentialrequestoptions.challenge value a buffersource which is at least 16 bytes long. contains a cryptographic challenge emitted from the relying party's server which must be signed by the authenticator's private
key and sent back (within the response) to the relying party's server for verification. ...
...value a buffersource which is at least 16 bytes long. contains a cryptographic challenge emitted from the relying party's server which must be signed by the authenticator's private
key and sent back (within the response) to the relying party's server for verification. ...
... recommendation initial definition. ...
PublicKeyCredentialRequestOptions.extensions - Web APIs
extensions, an optional property of the public
keycredentialrequestoptions dictionary, is an object providing the client extensions and their input values. extensions are values requesting additional processing by the client and by the authenticator. for instance, extensions may be used for: backward compatibility with the legacy fido js api, knowing the user verification process, etc. note: an analogous option exists for the creation operation (navigators.credentials.create()), see public
keycredentialcreationoptions.extensions. syntax extensions = public
keycredentialrequestoptions.extensions value an object with various
keys and values. here is the current (as of march 2019) list of potential extensions which may be used during the registration operation. warning! as of ju...
...me biometric data that the previous authentication. loc boolean location. if true, the client outputs a coordinates object representing the geolocation of the authenticator. uvm boolean user verification method. if true, the client outputs an array of arrays with 3 values containing information about how the user was verified (e.g. fingerprint, pin, pattern), how the
key is protected, how the matcher (tool used for the authentication operation) is protected. note: extensions are optional and different browsers may recognize different extensions. all extensions are optional for the client to process them: if a browser does not know a given extension, that will not cause any failure, the extension simply will not be processed. examples var options = { ...
...ptional for the client to process them: if a browser does not know a given extension, that will not cause any failure, the extension simply will not be processed. ...
... recommendation initial definition. ...
TouchEvent.ctrlKey - Web APIs
specifications specification status comment touch events – level 2 draft non-stable version. ...
... specifications specification status comment touch events – level 2 draft non-stable version. ...
... specifications specification status comment touch events – level 2 draft non-stable version. ...
... specifications specification status comment touch events – level 2 draft non-stable version. ...
Public-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
public-
key cryptography — or asymmetric cryptography — is a cryptographic system in which
keys come in pairs. the transformation performed by one of the
keys can only be undone with the other
key. one
key (the private
key) is kept secret while the other is made public. when used for digital signatures, the private
key is used to sign and the public
key to verify. this means that anyone can verify a signature, but only the owner of the corresponding private
key could have generated it. when used for encryption, the public
key is used to encrypt and the private
key is used to decrypt. this gives public-
key encryption systems an advantage over symmetric encryption systems in that the encryption
key can be made public. ...
...one can verify a signature, but only the owner of the corresponding private
key could have generated it. when used for encryption, the public
key is used to encrypt and the private
key is used to decrypt. this gives public-
key encryption systems an advantage over symmetric encryption systems in that the encryption
key can be made public. anyone could encrypt a message to the owner of the private
key, but only the owner of the private
key could decrypt it. however, they are typically much slower than symmetric algorithms and the size of message they can encrypt is proportional to the size of the
key, so they do not scale well for long messages. ...
... to the owner of the private
key, but only the owner of the private
key could decrypt it. however, they are typically much slower than symmetric algorithms and the size of message they can encrypt is proportional to the size of the
key, so they do not scale well for long messages. as a result, it's common for an encryption system to use a symmetric algorithm to encrypt the message, then a public-
key system to encrypt the symmetric
key. this arrangement can confer the benefits of both systems. commonly used public-
key cryptosystems are rsa (for both signing and encryption), dsa (for signing) and diffie-hellman (for
key agreement). ...
Building SpiderMonkey with UBSan
ndefined -fno-sanitize=alignment,float-cast-overflow,float-divide-by-zero,vptr -dxmalloc=myxmalloc" \ cc="$llvm_root/build/release+asserts/bin/clang" \ cxx="$llvm_root/build/release+asserts/bin/clang++" \ cflags="$sanflag" \ cxxflags="$sanflag" \ moz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3. use the script to compile spidermon
key. ...
...ot/build/release+asserts/bin/clang" \ cxx="$llvm_root/build/release+asserts/bin/clang++" \ cflags="$sanflag" \ cxxflags="$sanflag" \ moz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3. use the script to compile spidermon
key. ...
...oz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3. use the script to compile spidermon
key. this enables all the cheap undefined behavior checks other than: alignment, which hits known bugs in spidermon
key, and is more implementation-defined (slow on x86 / crash on arm) than undefined behavior float-cast-overflow, which hits known bugs in spidermon
key, and isn't exploited by today's compilers float-divide-by-zero, which jesse doesn't think is actually undefined behavior (aside from the question of whether cpu overflow flags are set) vptr, a check that requires rtti, which is disabled by default in spidermon
key 4. when you hit a bug and want a stack trace, run under gdb with a breakpoint at the end of __ubsan::diag::~diag(). the stack tra...
NSS Key Log Format
key logs can be written by nss so that external programs can decrypt tls connections. wireshark 1.6.0 and above can use these log files to decrypt packets. you can tell wireshark where to find the
key file via edit→preferences→protocols→ssl→(pre)-master-secret log filename.
key logging is enabled by setting the environment variable ssl
keylogfile to point to a file. note: starting with nss 3.24 (used by firefox 48 and 49 only), the ssl
keylogfile approach is disabled by default for optimized builds using the makefile (those using gyp via build.sh are not affected). distributors can re-enable it at compile time though (using the nss_allow_ssl
keylogfile=1 make variable) which is done for the official firefox binaries. (see bug 1188657.) notably, debian does not have this option e...
...comment lines begin with a sharp character ('#') and are ignored. secrets follow the format <label> <space> <clientrandom> <space> <secret> where: <label> describes the following secret. <clientrandom> is 32 bytes random value from the client hello message, encoded as 64 hexadecimal characters. <secret> depends on the label (see below). ...
...traffic_secret: the hex-encoded handshake traffic secret for the server side (for tls 1.3) client_traffic_secret_0: the first hex-encoded application traffic secret for the client side (for tls 1.3) server_traffic_secret_0: the first hex-encoded application traffic secret for the server side (for tls 1.3) early_exporter_secret: the hex-encoded early exporter secret (for tls 1.3, used for 0-rtt
keys in older quic drafts). exporter_secret: the hex-encoded exporter secret (for tls 1.3, used for 1-rtt
keys in older quic drafts) the rsa form allows ciphersuites using rsa
key-agreement to be logged and was the first form supported by wireshark 1.6.0. it has been superseded by client_random which also works with other
key-agreement algorithms (such as those based on diffie-hellman) and is supp...
FC_DeriveKey
name fc_derive
key - derive a
key from a base
key syntax ck_rv fc_derive
key( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_object_handle hbase
key, ck_attribute_ptr ptemplate, ck_ulong usattributecount, ck_object_handle_ptr ph
key ); parameters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. hbase
key [in] handle of the base
key. pwrapped
key [in] pointer to the wrapped
key. ptemplate [in] pointer to the list of attributes for the new
key. usattributecount [in] number of attributes in the template. ph
key [out] pointer to the location to receive the handle of the new
key. description fc_derive
key derives (decrypts) a
key and creates a new
key object. a user must log into the token (to assume the nss user role) before call...
...in] pointer to the wrapped
key. ptemplate [in] pointer to the list of attributes for the new
key. usattributecount [in] number of attributes in the template. ph
key [out] pointer to the location to receive the handle of the new
key. description fc_derive
key derives (decrypts) a
key and creates a new
key object. a user must log into the token (to assume the nss user role) before calling fc_derive
key. ...
... to the list of attributes for the new
key. usattributecount [in] number of attributes in the template. ph
key [out] pointer to the location to receive the handle of the new
key. description fc_derive
key derives (decrypts) a
key and creates a new
key object. a user must log into the token (to assume the nss user role) before calling fc_derive
key. ...
FC_UnwrapKey
name fc_unwrap
key - unwrap a
key syntax ck_rv fc_unwrap
key( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_object_handle hunwrapping
key, ck_byte_ptr pwrapped
key, ck_ulong uswrapped
keylen, ck_attribute_ptr ptemplate, ck_ulong usattributecount, ck_object_handle_ptr ph
key ); parameters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. hunwrapping
key [in] handle of the ket to use for unwrapping. pwrapped
key [in] pointer to the wrapped
key. uswrapped
keylen [in] length of the wrapped
key. ptemplate [in] pointer to the list of attributes for the unwrapped
key. usattributecount [in] number of attributes in the template. ph
key [out] pointer to the location to receive the handle of the unwrapped
key. ...
...m to use. hunwrapping
key [in] handle of the ket to use for unwrapping. pwrapped
key [in] pointer to the wrapped
key. uswrapped
keylen [in] length of the wrapped
key. ptemplate [in] pointer to the list of attributes for the unwrapped
key. usattributecount [in] number of attributes in the template. ph
key [out] pointer to the location to receive the handle of the unwrapped
key. description fc_unwrap
key unwraps (decrypts) a
key and creates a new
key opbject. if pwrapped
key is null the length of the wrapped
key is returned in puswrapped
keylen and fc_unwrap
key may be called again with pwrapped
key set to retrieve the wrapped
key. a user must log into the token (to assume the nss user role) before calling fc_unwrap
key. ...
...
key. description fc_unwrap
key unwraps (decrypts) a
key and creates a new
key opbject. if pwrapped
key is null the length of the wrapped
key is returned in puswrapped
keylen and fc_unwrap
key may be called again with pwrapped
key set to retrieve the wrapped
key. a user must log into the token (to assume the nss user role) before calling fc_unwrap
key. ...
JS::ProtoKeyToId
this article covers features introduced in spidermon
key 38 convert a jsproto
key to js id. syntax void js::proto
keytoid(jscontext *cx, jsproto
key key, js::mutablehandleid idp); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext.
key jsproto
key the prototype
key to convert. vp js::mutablehandleid out parameter. *idp receives the converted id. description js::proto
keytoid converts a specified js prototype
key key, to a js id. js::proto
keytoid stores a jsid to *idp. ...
...uest. in a js_threadsafe build, the caller must be in a request on this jscontext.
key jsproto
key the prototype
key to convert. vp js::mutablehandleid out parameter. *idp receives the converted id. description js::proto
keytoid converts a specified js prototype
key key, to a js id. js::proto
keytoid stores a jsid to *idp. ...
...afe build, the caller must be in a request on this jscontext.
key jsproto
key the prototype
key to convert. vp js::mutablehandleid out parameter. *idp receives the converted id. description js::proto
keytoid converts a specified js prototype
key key, to a js id. js::proto
keytoid stores a jsid to *idp. ...
JS_IdToProtoKey
this article covers features introduced in spidermon
key 31 convert a js id to a jsproto
key. syntax jsproto
key js_idtoproto
key(jscontext *cx, js::handleid id); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. id js::handleid the property identifier to convert. description js_idtoproto
key converts a specified js id, id, to a prototype
key. on success, js_idtoproto
key returns a jsproto
key. otherwise it returns jsproto_null. ...
... runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. id js::handleid the property identifier to convert. ...
...mation. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. id js::handleid the property identifier to convert. ...
GetKeyBindings
« nsiaccessible page summary this method provides array of localized string of global
keyboard accelerator for the given action index supported by accessible. nsidomdomstringlist get
keybindings( in pruint8 aactionindex ); parameters aactionindex[in] index of the given action. return values returns array of localized string of global
keyboard accelerator. exceptions thrown ns_error_invalid_arg the given index doesn't correspond to default action (not zero). remark
key bindings are supported for default action only. ...
...idomdomstringlist get
keybindings( in pruint8 aactionindex ); parameters aactionindex[in] index of the given action. return values returns array of localized string of global
keyboard accelerator. exceptions thrown ns_error_invalid_arg the given index doesn't correspond to default action (not zero). remark
key bindings are supported for default action only. ...
...indings( in pruint8 aactionindex ); parameters aactionindex[in] index of the given action. return values returns array of localized string of global
keyboard accelerator. exceptions thrown ns_error_invalid_arg the given index doesn't correspond to default action (not zero). ...
CryptoKeyPair - Web APIs
the crypto
keypair dictionary of the web crypto api represents a
key pair for an asymmetric cryptography algorithm, also known as a public-
key algorithm. a crypto
keypair object can be obtained using subtlecrypto.generate
key(), when the selected algorithm is one of the asymmetric algorithms: rsassa-pkcs1-v1_5, rsa-pss, rsa-oaep, ecdsa, or ecdh. it contains two properties, which are both crypto
key objects: a private
key property containing the private
key and a public
key property containing the public
key. properties crypto
key.private
key a crypto
key object representing the private
key. for encryption and decryption algorithms, this
key is used to decrypt. for signing and verification algorithms it is used to sign. crypto
key.public
key a crypto
key object representing the public
key. for e...
...e private
key and a public
key property containing the public
key. properties crypto
key.private
key a crypto
key object representing the private
key. for encryption and decryption algorithms, this
key is used to decrypt. for signing and verification algorithms it is used to sign. crypto
key.public
key a crypto
key object representing the public
key. for encryption and decryption algorithms, this
key is used to encrypt. for signing and verification algorithms it is used to verify signatures. examples the examples for subtlecrypto methods often use crypto
keypair objects. ...
...rypt. for signing and verification algorithms it is used to sign. crypto
key.public
key a crypto
key object representing the public
key. for encryption and decryption algorithms, this
key is used to encrypt. for signing and verification algorithms it is used to verify signatures. examples the examples for subtlecrypto methods often use crypto
keypair objects. for example: subtlecrypto.generate
key() subtlecrypto.derive
key() subtlecrypto.import
key() subtlecrypto.export
key() subtlecrypto.wrap
key() subtlecrypto.unwrap
key() subtlecrypto.encrypt() subtlecrypto.decrypt() subtlecrypto.sign() subtlecrypto.verify() specifications specification status comment web cryptography apithe definition of 'crypto
keypair' in that specification. recommendation initial ...
IDBObjectStore.getAllKeys() - Web APIs
the getall
keys() method of the idbobjectstore interface returns an idbrequest object retrieves record
keys for all objects in the object store matching the specified parameter or all objects in the store if no parameters are given. if a value is successfully found, then a structured clone of it is created and set as the result of the request object. this method produces the same result for: a record that doesn't exist in the database a record that has an undefined value to tell these situations apart, you need to call the opencursor() method with the same
key. that method provides a cursor if the record exists, and no cursor if it does not. ...
...s created and set as the result of the request object. this method produces the same result for: a record that doesn't exist in the database a record that has an undefined value to tell these situations apart, you need to call the opencursor() method with the same
key. that method provides a cursor if the record exists, and no cursor if it does not. syntax var request = objectstore.getall
keys(); var request = objectstore.getall
keys(query); var request = objectstore.getall
keys(query, count); parameters query optional a value that is or resolves to an idb
keyrange. count optional specifies the number of values to return if more than one is found. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. return value an idbrequest object on which subsequ...
...n 0 or greater than 232-1 a typeerror exception will be thrown. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbobjectstore's transaction is inactive. dataerror the
key or
key range provided contains an invalid
key or is null. invalidstateerror the idbobjectstore has been deleted or removed. specifications specification status comment indexed database api draftthe definition of 'getall
keys()' in that specification. recommendation initial definition ...
Keyboard.lock() - Web APIs
the lock() method of the
keyboard interface returns a promise after enabling the capture of
keypresses for any or all of the
keys on the physical
keyboard. this method can only capture
keys that are granted access by the underlying operating system. syntax var promise =
keyboard.lock([
keycodes[]]) parameters
keycodes optional an array of one or more
key codes to lock. if no
keycodes are provided all
keys will be locked. a list of valid code values is found in the ui events
keyboardevent code values spec. return value a promise. examples capturing all
keys the following example captures all
keypresses. navigator.
keyboard.lock(); capturing specific
keys the following example captures the "w", "a", "s", and "d"
keys. ...
...
key codes to lock. if no
keycodes are provided all
keys will be locked. a list of valid code values is found in the ui events
keyboardevent code values spec. return value a promise. examples capturing all
keys the following example captures all
keypresses. navigator.
keyboard.lock(); capturing specific
keys the following example captures the "w", "a", "s", and "d"
keys. it captures these
keys regardless of which modifiers are used with the
key press. assuming a standard us qwerty layout, registering "
keyw" ensures that "w", shift+"w", control+"w", control+shift+"w", and all other
key modifier combinations with "w" are sent to the app. the same applies to for "
keya", "
keys" and "
keyd". ...
...ys the following example captures the "w", "a", "s", and "d"
keys. it captures these
keys regardless of which modifiers are used with the
key press. assuming a standard us qwerty layout, registering "
keyw" ensures that "w", shift+"w", control+"w", control+shift+"w", and all other
key modifier combinations with "w" are sent to the app. the same applies to for "
keya", "
keys" and "
keyd". navigator.
keyboard.lock(["
keyw", "
keya", "
keys", "
keyd"]); specifications specification status comment
keyboard lockthe definition of 'lock()' in that specification. editor's draft initial definition. ...
KeyframeEffect.target - Web APIs
the target property of a
keyframeeffect interface represents the element or pseudo-element being animated. it may be null for animations that do not target a specific element. it performs as both a getter and a setter, except with animations and transitions generated by css. syntax var targetelement = document.getelementbyid("elementtoanimate"); var
keyframes = new
keyframeeffect( targetelement,
keyframeblock, timingoptions ); // returns #elementtoanimate
keyframes.target; // assigns
keyframes a new target
keyframes.target = newtargetelement; value an element, csspseudoelement, or null. ...
...frameeffect( targetelement,
keyframeblock, timingoptions ); // returns #elementtoanimate
keyframes.target; // assigns
keyframes a new target
keyframes.target = newtargetelement; value an element, csspseudoelement, or null. ...
...getelement,
keyframeblock, timingoptions ); // returns #elementtoanimate
keyframes.target; // assigns
keyframes a new target
keyframes.target = newtargetelement; value an element, csspseudoelement, or null. examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdown
keyframes = new
keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id="rabbit">click the rabbit's ears!</div> rabbitdown
keyframes.target; specifications specification status comment web animationsthe definition of '
keyframeeffect' in that specification. ...
MediaKeySession.closed - Web APIs
specifications specification status comment encrypted media extensionsthe definition of 'closed' in that specification. ...
... specifications specification status comment encrypted media extensionsthe definition of 'closed' in that specification. ...
... specifications specification status comment encrypted media extensionsthe definition of 'closed' in that specification. ...
MediaKeyStatusMap - Web APIs
the media
keystatusmap interface of the encryptedmediaextensions api is a read-only map of media
key statuses by
key ids. properties media
keystatusmap.size read only returns the number of
key/value pars in the status map. methods media
keystatusmap.entries() read only returns a new iterator object containing an array of [
key, value] for each element in the status map, in insertion order. media
keystatusmap.foreach(callback[, argument]) read only calls callback once for each
key-value pair in the status map, in insertion order. if argument is present it will be passed to the callback. media
keystatusmap.get() read only returns the value associated with the given
key, or undefined if there is none. ...
...ay of [
key, value] for each element in the status map, in insertion order. media
keystatusmap.foreach(callback[, argument]) read only calls callback once for each
key-value pair in the status map, in insertion order. if argument is present it will be passed to the callback. media
keystatusmap.get() read only returns the value associated with the given
key, or undefined if there is none. media
keystatusmap.has() read only returns a boolean asserting whether a value has been associated with the given
key. media
keystatusmap.
keys() read only returns a new iterator object containing
keys for each element in the status map, in insertion order. media
keystatusmap.values() read only returns a new iterator object containing values for each element in the status map, in insertion order. med...
...atusmap.has() read only returns a boolean asserting whether a value has been associated with the given
key. media
keystatusmap.
keys() read only returns a new iterator object containing
keys for each element in the status map, in insertion order. media
keystatusmap.values() read only returns a new iterator object containing values for each element in the status map, in insertion order. media
keystatusmap.[@@iterator]() read only returns a new iterator object containing an array of [
key, value] for each element in the status map, in insertion order. specifications specification status comment encrypted media extensionsthe definition of 'media
keystatusmap' in that specification. recommendation initial definition. ...
PublicKeyCredentialRequestOptions.rpId - Web APIs
the rpid property, of the public
keycredentialrequestoptions dictionary, is an optional property which indicates the relying party's identifier as a usvstring. its value can only be a suffix of the current origin's domain. for example, if you are browsing on foo.example.com, the rpid value may be "example.com" but not "bar.org" or "baz.example.com". this property is optional. if it is not explicitely provided, the user agent will use the value of the current origin's domain. note: an analogous option exists for the creation operation (navigators.credentials.create()), see the id property of public
keycredentialcreationoptions.rp. syntax rpid = public
keycredentialrequestoptions.rpid value a usvstring for the identifier of the relying party. its value can only be a suffix of the curren...
...tialrequestoptions.rpid value a usvstring for the identifier of the relying party. its value can only be a suffix of the current origin's domain. ...
... recommendation initial definition. ...
PublicKeyCredentialRequestOptions.timeout - Web APIs
the timeout property, of the public
keycredentialrequestoptions dictionary, represents an hint, given in milliseconds, for the time the script is willing to wait for the completion of the retrieval operation. this property is optional and merely is a hint which may be overridden by the browser. note: an analogous option exists for the creation operation (navigators.credentials.create()), see public
keycredentialcreationoptions.timeout. syntax timeout = public
keycredentialrequestoptions.timeout value a numerical hint, expressed in milliseconds, giving the time to wait for the creation operation to complete. examples var options = { challenge: new uint8array([/* bytes sent from the server */]), timeout: 6000 // wait a minute for the fetching operation // and may...
...c
keycredentialrequestoptions.timeout value a numerical hint, expressed in milliseconds, giving the time to wait for the creation operation to complete. ...
... recommendation initial definition. ...
PublicKeyCredentialRequestOptions.userVerification - Web APIs
userverification is an optional property of the public
keycredentialrequestoptions. this is a string which indicates how the user verification should be part of the authentication process. note: an analogous option exists for the creation operation (navigators.credentials.create()), see the userverification property of public
keycredentialcreationoptions.authenticatorselection. syntax userverification = public
keycredentialrequestoptions.userverification value a string qualifying how the user verification should be part of the authentication process. the values may be: "required": user verification is required, the operation will fail if the response does not have the uv flag (as part of authenticatorassertionresponse.authenticatordata) "preferred": user verification is prefered, t...
...oes not have the uv flag (as part of authenticatorassertionresponse.authenticatordata) "discouraged": user verification should not be employed as to minimize the user interaction during the process. the default value is "preferred". ...
... recommendation initial definition. ...
Storage.key() - Web APIs
the
key() method of the storage interface, when passed a number n, returns the name of the nth
key in a given storage object. the order of
keys is user-agent defined, so you should not rely on it. syntax var a
keyname = storage.
key(index); parameters index an integer representing the number of the
key you want to get the name of. this is a zero-based index. return value a domstring containing the name of the
key. if the index does not exist, null is returned. ...
...
keys is user-agent defined, so you should not rely on it. syntax var a
keyname = storage.
key(index); parameters index an integer representing the number of the
key you want to get the name of. this is a zero-based index. return value a domstring containing the name of the
key. if the index does not exist, null is returned. examples the following function iterates over the local storage
keys: function foreach
key(callback) { for (var i = 0; i < localstorage.length; i++) { callback(localstorage.
key(i)); } } the following function iterates over the local storage
keys and gets the value set for each
key: for(var i =0; i < localstorage.length; i++){ console.log(localstorage.getitem(localstorage.
key(i))); } note: for a real world example, see our web storage demo. specifi...
...ge.
key(i)); } } the following function iterates over the local storage
keys and gets the value set for each
key: for(var i =0; i < localstorage.length; i++){ console.log(localstorage.getitem(localstorage.
key(i))); } note: for a real world example, see our web storage demo. specifications specification status comment html living standardthe definition of 'storage.
key' in that specification. living standard ...
XRInputSourceArray.keys() - Web APIs
the
keys() method in the xrinputsourcearray interface returns a javascript iterator which can then be used to iterate over the
keys used to reference each item in the array of input sources. syntax xrinputsourcearray.
keys(); parameters none. return value a javascript iterator that can be used to walk through the
keys for each entry in the list of input sources. the values returned by the iterator are the indexes of each entry in the list; that is, the numbers 0, 1, 2, and so forth through the index of the last item in the list. examples this example snippet gets the list of inputs for a session and tries to handle each type of input device it supports using. ...
...ys for each entry in the list of input sources. the values returned by the iterator are the indexes of each entry in the list; that is, the numbers 0, 1, 2, and so forth through the index of the last item in the list. examples this example snippet gets the list of inputs for a session and tries to handle each type of input device it supports using. for (const inputidx of xrsession.inputsources.
keys()) { /* the
keys are the indexes into the list of inputs */ checkinput(xrsession.inputsources[inputidx]); } here, for...of is used to iterate over each of the
keys. for each
key, the input is retrieved using the index with array notation: xrsession.inputsources[inputidx]. specifications specification status comment webxr device apithe definition of 'xrinputsou...
...rces[inputidx]. specifications specification status comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in information contained in a webidl file for information on how an iterable declaration in an interface definition causes entries(), foreach(),
keys(), and values() methods to be exposed from objects that implement the interface. ...
Symbol.keyFor() - JavaScript
the symbol.
keyfor(sym) method retrieves a shared symbol
key from the global symbol registry for the given symbol. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax symbol.
keyfor(sym); parameters sym symbol, required. the symbol to find a
key for. return value a string representing the
key for the given symbol if one is found on the global registry; otherwise, undefined. ...
...itory. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax symbol.
keyfor(sym); parameters sym symbol, required. the symbol to find a
key for. return value a string representing the
key for the given symbol if one is found on the global registry; otherwise, undefined. ...
...lone https://github.com/mdn/interactive-examples and send us a pull request. syntax symbol.
keyfor(sym); parameters sym symbol, required. the symbol to find a
key for. return value a string representing the
key for the given symbol if one is found on the global registry; otherwise, undefined. examples using
keyfor var globalsym = symbol.for('foo'); // create a new global symbol symbol.
keyfor(globalsym); // "foo" var localsym = symbol(); symbol.
keyfor(localsym); // undefined // well-known symbols are not symbols registered // in the global symbol registry symbol.
keyfor(symbol.iterator) // undefined specifications specification ecmascript (ecma-262)the definition of 'symbol.
keyfor' in that specification. ...
TypedArray.prototype.keys() - JavaScript
the
keys() method returns a new array iterator object that contains the
keys for each index in the array. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax arr.
keys() return value a new array iterator object. ...
.... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax arr.
keys() return value a new array iterator object. ...
...uest. syntax arr.
keys() return value a new array iterator object. examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40, 50]); var earray = arr.
keys(); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40, 50]); var earr = arr.
keys(); console.log(earr.next().value); // 0 console.log(earr.next().value); // 1 console.log(earr.next().value); // 2 console.log(earr.next().value); // 3 console.log(earr.next().value); // 4 specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.
keys()' in that specification. ...
FC_GenerateKey
name fc_generate
key - generate a new
key syntax ck_rv fc_generate
key( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_attribute_ptr ptemplate, ck_ulong ulcount, ck_object_handle_ptr ph
key ); parameters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. ptemplate [in] pointer to the template for the new
key. ulcount [in] number of attributes in the template. ph
key [out] pointer to the location to receive the handle of the new
key. description fc_generate
key generates a secret
key, creating a new
key object. the handle of new
key is returned. a user must log into the token (to assume the nss user role) before calling fc_generate
key. ...
...or the new
key. ulcount [in] number of attributes in the template. ph
key [out] pointer to the location to receive the handle of the new
key. description fc_generate
key generates a secret
key, creating a new
key object. the handle of new
key is returned. a user must log into the token (to assume the nss user role) before calling fc_generate
key. ...
Self-hosted builtins in SpiderMonkey
these docs describe the current state as of nightly 45. differences from normal javascript all self-hosted code is strict, so self-hosted functions invoked in a null or undefined scope won't be run in the scope of the global object. self-hosted code has access to some functionality that's not available to normal js code. most importantly, it's possible to invoke any function within the scope of any object using the syntax callfunction(fun, receiver, ...args) (or callcontentfunction, see below), which causes fun to be called within the scope of receiver with ...args as its arguments. ...
...file utilities.js provides some additional, js-implemented helper functions. of note, it provides implementations of list and record, types defined in the ecmascript specifications that are similar to array and object, but can't be modified by application code. the selfhostingdefines.h header contains adding self-hosted functions to host objects first, the code has to be embedded into spidermon
key. the easiest way to accomplish that is to add the code to a pre-existing .js file in builtin/. if it doesn't fit into any of those, create a new .js file in that directory and add it to the selfhosted.inputs list in moz.build. to add a self-hosted function as a method to a host object, add it to that host object's jsfunctionspec array using the js_self_hosted_fn macro. example: js_self_hosted_f...
DOMTokenList.keys() - Web APIs
the
keys() method of the domtokenlist interface returns an iterator allowing to go through all
keys contained in this object. the
keys are of type unsigned integer. syntax tokenlist.
keys(); parameters none. return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the
keys using values(), then iterate through those
keys using a for ... of loop, writing each one to the <span>'s node.textcontent. ...
...n a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the
keys using values(), then iterate through those
keys using a for ... of loop, writing each one to the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.
keys(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of '
keys() (as iterable<node>)' in that specification. living standard initial definition ...
EcKeyImportParams - Web APIs
the ec
keyimportparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.import
key() or subtlecrypto.unwrap
key(), when generating any elliptic-curve-based
key pair: that is, when the algorithm is identified as either of ecdsa or ecdh. properties name a domstring. this should be set to ecdsa or ecdh, depending on the algorithm you want to use. namedcurve a domstring representing the name of the elliptic curve to use. this may be any of the following names for nist-approved curves: p-256 p-384 p-521 examples see the examples for subtlecrypto.import
key(). ...
...pending on the algorithm you want to use. namedcurve a domstring representing the name of the elliptic curve to use. this may be any of the following names for nist-approved curves: p-256 p-384 p-521 examples see the examples for subtlecrypto.import
key(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.ec
keyimportparams' in that specification. recommendation ...
EcdhKeyDeriveParams - Web APIs
the ecdh
keyderiveparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.derive
key(), when using the ecdh algorithm. ecdh enables two people who each have a
key pair consisting of a public and a private
key to derive a shared secret. they exchange public
keys and use the combination of their private
key and the other entity's public
key to derive a secret
key that they — and noone else — share. the parameters for ecdh derive
key() therefore include the other entity's public
key, which is combined with this entity's private
key to derive the shared secret. properties name a domstring. this should be set to ecdh. public a crypto
key object representing the public
key of the other entity. examples see the ex...
...
key that they — and noone else — share. the parameters for ecdh derive
key() therefore include the other entity's public
key, which is combined with this entity's private
key to derive the shared secret. properties name a domstring. this should be set to ecdh. public a crypto
key object representing the public
key of the other entity. examples see the examples for subtlecrypto.derive
key(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.ecdh
keyderiveparams' in that specification. recommendation ...
GlobalEventHandlers.onkeydown - Web APIs
the on
keydown property of the globaleventhandlers mixin is an eventhandler that processes
keydown events. the
keydown event fires when the user presses a
keyboard
key. syntax target.on
keydown = functionref; value functionref is a function name or a function expression. the function receives a
keyboardevent object as its sole argument. example this example logs the
keyboardevent.code value whenever you press down a
key inside the <input> element. ...
...ionref; value functionref is a function name or a function expression. the function receives a
keyboardevent object as its sole argument. example this example logs the
keyboardevent.code value whenever you press down a
key inside the <input> element. html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.on
keydown = log
key; function log
key(e) { log.textcontent += ` ${e.code}`; } result specifications specification status comment html living standardthe definition of 'on
keydown' in that specification. living standard ...
GlobalEventHandlers.onkeyup - Web APIs
the on
keyup property of the globaleventhandlers mixin is an eventhandler that processes
keyup events. the
keyup event fires when the user releases a
key that was previously pressed. syntax target.on
keyup = functionref; value functionref is a function name or a function expression. the function receives a
keyboardevent object as its sole argument. example this example logs the
keyboardevent.code value whenever you release a
key inside the <input> element. ...
...nctionref; value functionref is a function name or a function expression. the function receives a
keyboardevent object as its sole argument. example this example logs the
keyboardevent.code value whenever you release a
key inside the <input> element. html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.on
keyup = log
key; function log
key(e) { log.textcontent += ` ${e.code}`; } result specifications specification status comment html living standardthe definition of 'on
keyup' in that specification. living standard ...
accessKeyLabel - Web APIs
the htmlelement.access
keylabel read-only property returns a string that represents the element's assigned access
key (if any); otherwise it returns an empty string. syntax label = element.access
keylabel example javascript var node = document.getelementbyid('btn1'); if (node.access
keylabel) { node.title += ' [' + node.access
keylabel + ']'; } else { node.title += ' [' + node.access
key + ']'; } node.onclick = function () { var p = document.createelement('p'); p.textcontent = 'clicked!'; node.parentnode.appendchild(p); }; html <button access
key="h" title="caption" id="btn1">hover me</button> result specifications specification status comment html living standardthe definition of 'htmlelement.access
keylabel' in that specification. living st...
...r me</button> result specifications specification status comment html living standardthe definition of 'htmlelement.access
keylabel' in that specification. living standard no change from initial definition. html 5.1 recommendation removed. pull w3c/html#144, issue w3c/html#99, wicg discussion. html5the definition of 'htmlelement.access
keylabel' in that specification. recommendation snapshot of html living standard, initial definition. ...
HmacKeyGenParams - Web APIs
the hmac
keygenparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.generate
key(), when generating a
key for the hmac algorithm. properties name a domstring. this should be set to hmac. hash a domstring representing the name of the digest function to use. you can pass any of sha-1, sha-256, sha-384, or sha-512 here. length optional a number — the length in bits of the
key. if this is omitted the length of the
key is equal to the length of the digest generated by the digest function you have chosen. unless you have a good reason to use a different length, omit this property and use the default. examples see the examples for subtlecrypto.generate
key(). specifications specification sta...
...tted the length of the
key is equal to the length of the digest generated by the digest function you have chosen. unless you have a good reason to use a different length, omit this property and use the default. examples see the examples for subtlecrypto.generate
key(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.hmac
keygenparams' in that specification. recommendation ...
Keyboard.getLayoutMap() - Web APIs
the getlayoutmap() method of the
keyboard interface returns a promise that resolves with an instance of
keyboardlayoutmap which is a map-like object with functions for retrieving the strings associated with specific physical
keys. syntax var promise =
keyboard.getlayoutmap() parameters none. return value a promise that resolves with an instance of
keyboardlayoutmap. example the following example demonstrates how to get the location- or layout-specific string associated with the
key that corresponds to the 'w'
key on an english qwerty
keyboard. ...
...for retrieving the strings associated with specific physical
keys. syntax var promise =
keyboard.getlayoutmap() parameters none. return value a promise that resolves with an instance of
keyboardlayoutmap. example the following example demonstrates how to get the location- or layout-specific string associated with the
key that corresponds to the 'w'
key on an english qwerty
keyboard. var
keyboard = navigator.
keyboard;
keyboard.getlayoutmap() .then(
keyboardlayoutmap => { var up
key =
keyboardlayoutmap.get('
keyw'); window.alert('press ' + up
key + ' to move up.'); }) specifications specification status comment
keyboard mapthe definition of 'getlayoutmap()' in that specification. editor's draft initial definition. ...
KeyboardLayoutMap.forEach() - Web APIs
the foreach() method of the
keyboardlayoutmap interface executes a provided function once for each element of the map. syntax
keyboardlayoutmap.foreach(function callback(currentvalue[, index[, array]]) { //your iterator }[, thisarg]); parameters callback the function to execute for each element, taking three arguments: currentvalue the value of the current element being processed. index optional the index of the current element being processed. array optional the
keyboardlayoutmap that foreach() is being called on. thisarg optional value to use as this (i.e the reference object) when executing callback. return value undefined. ...
...value the value of the current element being processed. index optional the index of the current element being processed. array optional the
keyboardlayoutmap that foreach() is being called on. thisarg optional value to use as this (i.e the reference object) when executing callback. return value undefined. specifications specification status comment
keyboard mapthe definition of 'foreach()' in that specification. editor's draft initial definition. ...
KeyboardLayoutMap.get() - Web APIs
the get() method of the
keyboardlayoutmap interface returns the element with the given
key. a list of valid
keys is found in the ui events
keyboardevent code values spec. syntax var value =
keyboardlayoutmap.get(
key) parameters
key the
key of the item to return from the map. return value the value of the specified
key. example the following example demonstrates how to get the location- or layout-specific string associated with the
key that corresponds to the 'w'
key on an english qwerty
keyboard. ...
...nd in the ui events
keyboardevent code values spec. syntax var value =
keyboardlayoutmap.get(
key) parameters
key the
key of the item to return from the map. return value the value of the specified
key. example the following example demonstrates how to get the location- or layout-specific string associated with the
key that corresponds to the 'w'
key on an english qwerty
keyboard. var
keyboard = navigator.
keyboard;
keyboard.getlayoutmap() .then(
keyboardlayoutmap => { var up
key =
keyboardlayoutmap.get('
keyw'); window.alert('press ' + up
key + ' to move up.'); } specifications specification status comment
keyboard mapthe definition of 'get()' in that specification. editor's draft initial definition. ...
KeyframeEffect.composite - Web APIs
the composite property of a
keyframeeffect resolves how an element's animation impacts its underlying property values. syntax // getting var compositeenumeration =
keyframeeffect.composite; // setting
keyframeeffect.composite = 'accumulate'; value to understand these values, take the example of a
keyframeeffect value of blur(2) working on an underlying property value of blur(3). replace the
keyframeeffect overrides the underlying value it is combined with: blur(2) replaces blur(3). add the
keyframeeffect is added to the underlying value with which it is combined (aka additive): blur(2) blur(3). accumulate the
keyframeeffect is accumulated on to the underlying value: blur(5). specifications specification status comment web animationsthe definiti...
...eyframeeffect overrides the underlying value it is combined with: blur(2) replaces blur(3). add the
keyframeeffect is added to the underlying value with which it is combined (aka additive): blur(2) blur(3). accumulate the
keyframeeffect is accumulated on to the underlying value: blur(5). specifications specification status comment web animationsthe definition of '
keyframeeffect.composite' in that specification. working draft editor's draft. ...
MediaKeyMessageEvent() - Web APIs
options options are as follows: messagetype: a developer-defined message type that allows applications to differentiate messages without parsing them. message: an array containing the message generated by the content decryption module. browser compatibility the compatibility table on this page is generated from structured data. ...
...odule. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
MediaKeySystemConfiguration - Web APIs
the media
keysystemconfiguration dictionary holds configuration information about the media
key system in use. properties media
keysystemconfiguration.initdatatypes read only returns a list of supported initialization data type names. an initialization data type is a string indicating the format of the initialization data. media
keysystemconfiguration.audiocapabilities read only returns a list of supported audio type and capability pairs. media
keysystemconfiguration.videocapabilities read only returns a list of supported video type and capability pairs. media
keysystemconfiguration.distinctiveidentifier read only indicates whether a persistent distinctive identifier is required. ...
...he initialization data. media
keysystemconfiguration.audiocapabilities read only returns a list of supported audio type and capability pairs. media
keysystemconfiguration.videocapabilities read only returns a list of supported video type and capability pairs. media
keysystemconfiguration.distinctiveidentifier read only indicates whether a persistent distinctive identifier is required. media
keysystemconfiguration.persistentstate read only indicates whether the ability to persist state is required. specifications specification status comment encrypted media extensionsthe definition of 'media
keysystemconfiguration' in that specification. recommendation initial definition ...
RsaHashedKeyGenParams - Web APIs
properties name a domstring. this should be set to rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep, depending on the algorithm you want to use. moduluslength a number. the length in bits of the rsa modulus. this should be at least 2048: see for example see nist sp 800-131a rev. 1. some organizations are now recommending that it should be 4096. publicexponent a uint8array. the public exponent. unless you have a good reason to use something else, specify 65537 here ([0x01, 0x00, 0x01]). ...
... good reason to use something else, specify 65537 here ([0x01, 0x00, 0x01]). hash a domstring representing the name of the digest function to use. you can pass any of sha-256, sha-384, or sha-512 here. warning: although you can technically pass sha-1 as a value here, this is strongly discouraged as sha-1 is considered vulnerable. examples see the examples for subtlecrypto.generate
key(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.rsahashed
keygenparams' in that specification. recommendation ...
TouchEvent.altKey - Web APIs
summary a boolean value indicating whether or not the alt (alternate)
key is enabled when the touch event is created. if the alt
key is enabled, the attribute's value is true. otherwise, it is false. this property is read only . syntax var altenabled = touchevent.alt
key; return value altenabled true if the alt
key is enabled for this event; and false if the alt is not enabled. example this example illustrates how to access the touchevent
key modifier properties: touchevent.alt
key, touchevent.ctrl
key, touchevent.meta
key and touchevent.shift
key. in following code snippet, the touchstart event handler logs the state of the event's modifier
keys. ...
...e alt is not enabled. example this example illustrates how to access the touchevent
key modifier properties: touchevent.alt
key, touchevent.ctrl
key, touchevent.meta
key and touchevent.shift
key. in following code snippet, the touchstart event handler logs the state of the event's modifier
keys. someelement.addeventlistener('touchstart', function(e) { // log the state of this event's modifier
keys console.log("alt
key = " + e.alt
key); console.log("ctrl
key = " + e.ctrl
key); console.log("meta
key = " + e.meta
key); console.log("shift
key = " + e.shift
key); }, false); specifications specification status comment touch events – level 2 draft non-stable version. touch events recommendation initial definition. ...
Feature-Policy: publickey-credentials-get - HTTP
the http feature-policy header public
key-credentials-get directive controls whether the current document is allowed to access web authentcation api to create new public-
key credentials, i.e, via navigator.credentials.get({public
key: ..., ...}). when this policy is enabled, any attempt to query public
key credentials will result in an error. syntax feature-policy: public
key-credentials-get <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe...
... ...
Map.prototype.keys() - JavaScript
the
keys() method returns a new iterator object that contains the
keys for each element in the map object in insertion order. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax mymap.
keys() return value a new map iterator object. ...
...erator object that contains the
keys for each element in the map object in insertion order. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax mymap.
keys() return value a new map iterator object. examples using
keys() var mymap = new map(); mymap.set('0', 'foo'); mymap.set(1, 'bar'); mymap.set({}, 'baz'); var mapiter = mymap.
keys(); console.log(mapiter.next().value); // "0" console.log(mapiter.next().value); // 1 console.log(mapiter.next().value); // object specifications specification ecmascript (ecma-262)the definition of 'map.prototype.
keys' in that specification. ...
SpiderMonkey coding conventions - Archive of obsolete content
naming conventions public function names begin with js_ followed by capitalized "intercaps", e.g. js_newobject. extern but library-private function names use a js_ prefix and mixed case, e.g. js_searchscope. most static function names have unprefixed, mixed-case names: getchar. but static native methods of js objects have lowercase, underscore-separated or intercaps names, e.g., str_indexof. and library-private and static data use underscores, not intercaps (but library-private data do use a js_ prefix). ...
Archived SpiderMonkey docs - Archive of obsolete content
this section contains old spidermon
key documentation. file objectnon-standard server-side objectmerging tracemon
key repothese are the steps to merge the tracemon
key repository to mozilla-central. between resolving conflicts, finding a good time to land, watching the tree, and marking bugs as fixed, it takes around half a day.spidermon
key coding conventionsthe spidermon
key project owners enforce coding conventions pretty strictly during code reviews. ...
createKey - Archive of obsolete content
create
key adds a
key to the registry. method of winreg object syntax int create
key ( string sub
key, string classname); parameters the method has the following parameters: sub
key the
key path to the appropriate location in the
key hierarchy, such as "software\\netscape\\navigator\\mail". classname usually an empty string. for information on this parameter, see the description of regcreate
keyex in your windows api documentation. returns 0 if it succeeded; a nonzero number if it failed to schedule the creation. for a list of possible values, see return codes. description the create
key method adds a
key to the registry. you must add a
key to the registry before you can add a value for that
key. ...
keycode - Archive of obsolete content
« xul reference home
keycode type: string
key code for
keys that do not have displayable characters, such as the enter
key or function
keys, use this attribute instead of the
key attribute. valid
keys are listed at
keyboard shortcuts. ...
keytext - Archive of obsolete content
« xul reference home
keytext type: string a label for the
keyboard shortcut. this text would appear next to a menuitem label if that menuitem is associated with the
key element via its
key attribute. ...
panel.ignorekeys - Archive of obsolete content
« xul reference home ignore
keys type: boolean if false, the default value, the escape
key may be used to close the panel. if true, the escape
key cannot be used to close the panel. ...
Key - MDN Web Docs Glossary: Definitions of Web-related terms
a
key is a piece of information used by a cipher for encryption and/or decryption. encrypted messages should remain secure even if everything about the cryptosystem, except for the
key, is public knowledge. in symmetric-
key cryptography, the same
key is used for both encryption and decryption. in public-
key cryptography, there exists a pair of related
keys known as the public
key and private
key. the public
key is freely available, whereas the private
key is kept secret. the public
key is able to encrypt messages that only the corresponding private
key is able to decrypt, and vice versa. ...
Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
symmetric-
key cryptography is a term used for cryptographic algorithms that use the same
key for encryption and for decryption. the
key is usually called a "symmetric
key" or a "secret
key". this is usually contrasted with public-
key cryptography, in which
keys are generated in pairs and the transformation made by one
key can only be reversed using the other
key. symmetric-
key algorithms should be secure when used properly and are highly efficient, so they can be used to encrypt large amounts of data without having a negative effect on performance. most symmetric-
key algorithms currently in use are block ciphers: this means that they encrypt data one block at a time. the size of each block is fixed and determined by the algorithm: for example aes uses 16-byte blocks. block ciphers ...
Profiling SpiderMonkey
le, intel vtune, and callgrind. when we have js scriptable profiling options available for all tier 1 platforms, we'll look at adding global start/stop profiling functions. if you'd like to profile something at a higher level of detail than the js shark functions allow, there are corresponding c functions available at the bottom of jsdbgapi.h. costs of thread safety currently, threadsafe spidermon
key costs us 10-15% on some benchmarks vs. a non-threadsafe js shell. if you're looking to investigate that, build a standalone copy of spidermon
key and compare it with xpcshell. ...
nsMsgKey
defined in comm-central/ mailnews/ base/ public/ mailnewstypes2.idl typedef unsigned long nsmsg
key; ...
Debugger keyboard shortcuts - Firefox Developer Tools
f10 f10 1 f10 step into f11 f11 1 f11 step out shift + f11 shift + f11 1 shift + f11 toggle breakpoint on the currently selected line ctrl + b cmd + b ctrl + b toggle conditional breakpoint on the currently selected line ctrl + shift + b cmd + shift + b ctrl + shift + b 1. by default, on some macs, the function
key is remapped to use a special feature: for example, to change the screen brightness or the volume. see this guide to using these
keys as standard function
keys. to use a remapped
key as a standard function
key, hold the function
key down as well (so to open the profiler, use shift + function + f5). note: before firefox 66, the combination ctrl + shift + s on windows and linux or cmd + opt + s on...
AesKeyGenParams - Web APIs
the aes
keygenparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.generate
key(), when generating an aes
key: that is, when the algorithm is identified as any of aes-cbc, aes-ctr, aes-gcm, or aes-kw. properties name a domstring. this should be set to aes-cbc, aes-ctr, aes-gcm, or aes-kw, depending on the algorithm you want to use. length a number — the length in bits of the
key to generate. this must be one of: 128, 192, or 256. examples see the examples for subtlecrypto.generate
key(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.aes
keygenparams' in that specification. recommendation ...
CSSKeywordValue.value - Web APIs
the value property of the css
keywordvalue interface returns or sets the value of the css
keywordvalue. syntax var val = css
keywordvalue.value css
keywordvalue.value = val value a usvstring. examples the following example resets the css display property to its defaults. let indicator = document.getelementbyid('indicator'); indicator.attributestylemap.set('display', new css
keywordvalue('initial')); indicator.attributestylemap.get('display').value // 'initial' specifications specification status comment css typed om level 1the definition of 'undefined' in that specification. working draft initial definition. ...
CSSUnparsedValue.keys() - Web APIs
the cssunparsedvalue.
keys() method returns a new array iterator object that contains the
keys for each index in the array. syntax cssunparsedvalue.
keys() parameters none. return value a new array. specifications specification status comment css typed om level 1the definition of '
keys()' in that specification. working draft initial definition. ...
EcKeyGenParams - Web APIs
the ec
keygenparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.generate
key(), when generating any elliptic-curve-based
key pair: that is, when the algorithm is identified as either of ecdsa or ecdh. properties name a domstring. this should be set to ecdsa or ecdh, depending on the algorithm you want to use. namedcurve a domstring representing the name of the elliptic curve to use. this may be any of the following names for nist-approved curves: p-256 p-384 p-521 examples see the examples for subtlecrypto.generate
key(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.ec
keygenparams' in that specification. recommenda...
Element.accessKey - Web APIs
the element.access
key property sets the
keystroke which a user can press to jump to a given element. the element.access
key property is seldom used because of its multiple conflicts with already present
key bindings in browsers. to work around this, browsers implement access
key behavior if the
keys are pressed with other "qualifying"
keys (such as alt + access
key). ...
FormData.keys() - Web APIs
the formdata.
keys() method returns an iterator allowing to go through all
keys contained in this object. the
keys are usvstring objects. note: this method is available in web workers. syntax formdata.
keys(); return value returns an iterator. example // create a test formdata object var formdata = new formdata(); formdata.append('
key1', 'value1'); formdata.append('
key2', 'value2'); // display the
keys for (var
key of formdata.
keys()) { console.log(
key); } the result is:
key1
key2 specifications specification status comment xmlhttprequestthe definition of '
keys() (as iterator<>)' in that specification. living standard initial definition ...
Keyboard.unlock() - Web APIs
the unlock() method of the
keyboard interface unlocks all
keys captured by the
keyboard.lock() method and returns synchronously. syntax
keyboard.unlock() parameters none. return value undefined specifications specification status comment
keyboard mapthe definition of '
keyboard' in that specification. editor's draft defines the
keyboard interface.
keyboard lockthe definition of 'unlock()' in that specification. editor's draft initial definition. ...
KeyboardEvent.repeat - Web APIs
the repeat read-only property of the
keyboardevent interface returns a boolean that is true if the given
key is being held down such that it is automatically repeating. syntax var repeat = event.repeat; return value boolean specifications specification status comment document object model (dom) level 3 events specificationthe definition of '
keyboardevent.repeat' in that specification. obsolete initial definition. ...
KeyboardLayoutMap.entries - Web APIs
the entries read-only property of the
keyboardlayoutmap interface returns an array of a given object's own enumerable property [
key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). syntax
keyboardlayoutmap.entries() value an array of the given
keyboardlayoutmap object's own enumerable property [
key, value] pairs. specifications specification status comment
keyboard mapthe definition of 'entries' in that specification. editor's draft initial definition. ...
KeyboardLayoutMap.has() - Web APIs
the has() method of the
keyboardlayoutmap interface returns a boolean indicating whether the object has an element with the specified
key. a list of valid
keys is found in the ui events
keyboardevent code values spec. syntax var aboolean =
keyboardlayoutmap.has(
key) parameters
key the
key of an element to search for in the map. return value a boolean indicating whether the specifed
key was found. example specification status comment
keyboard mapthe definition of 'has()' in that specification. editor's draft initial definition. ...
KeyboardLayoutMap.size - Web APIs
the size read-only property of the
keyboardlayoutmap interface returns the number of elements in the map. syntax var size =
keyboardlayoutmap.size() value a number. specifications specification status comment
keyboard mapthe definition of 'size' in that specification. editor's draft initial definition. ...
KeyboardLayoutMap.values - Web APIs
the values read-only property of the
keyboardlayoutmap interface returns a new array iterator object that contains the values for each index in the map. syntax var iterator =
keyboardlayoutmap.values value an iterator. specifications specification status comment
keyboard mapthe definition of 'values' in that specification. editor's draft initial definition. ...
MediaKeyMessageEvent.messageType - Web APIs
the media
keymessageevent.messagetype read-only property indicates the type of message. it may be one of license-request, license-renewal, license-release, or individualization-request. syntax var messagetype = media
keymessageevent.messagetype; specifications specification status comment encrypted media extensionsthe definition of 'messagetype' in that specification. recommendation initial definition ...
keyStatuses - Web APIs
the media
keysession.
keystatuses read-only property returns a reference to a read-only media
keystatusmap of the current session's
keys and their statuses. syntax var media
keystatusmapobj = media
keysessionobj.
keystatuses; specifications specification status comment encrypted media extensionsthe definition of '
keystatuses' in that specification. recommendation initial definition ...
MediaKeyStatusMap.entries() - Web APIs
syntax // tbd parameters none. returns exceptions specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
MediaKeyStatusMap.forEach() - Web APIs
index the index of the current element being processed in the array. array which array foreach() is being applied to. thisarg optional value used as this when executing callback. returns undefined. specifications specification status comment encrypted media extensions recommendation initial definition. ...
MediaKeyStatusMap.get() - Web APIs
specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
MediaKeyStatusMap.has() - Web APIs
specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
MediaKeyStatusMap.size - Web APIs
specifications specification status comment encrypted media extensionsthe definition of 'size' in that specification. recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
MediaKeyStatusMap.values() - Web APIs
returns a new iterator. specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
createMediaKeys() - Web APIs
the media
keysystemaccess.createmedia
keys() method returns a promise that resolves to a new media
keys object. syntax var media
keys = await media
keysystemaccess.createmedia
keys(); specifications specification status comment encrypted media extensionsthe definition of 'createmedia
keys()' in that specification. recommendation initial definition ...
keySystem - Web APIs
the media
keysystemaccess.
keysystem read-only property returns a domstring identifying the
key system being used. syntax var
keysystem = media
keysystemaccess.
keysystem; specifications specification status comment encrypted media extensionsthe definition of '
keysystem' in that specification. recommendation initial definition ...
MediaKeySystemAccess - Web APIs
the media
keysystemaccess interface of the encryptedmediaextensions api provides access to a
key system for decryption and/or a content protection provider. you can request an instance of this object using the navigator.requestmedia
keysystemaccess() method. properties media
keysystemaccess.
keysystem read only returns a domstring identifying the
key system being used. methods media
keysystemaccess.createmedia
keys() returns a promise that resolves to a new media
keys object. media
keysystemaccess.getconfiguration() returns a media
keysystemconfiguration object with the supported combination of configuration options. specifications specification status comment encrypted media extensionsthe definition of 'media
keysystemaccess' in that specification. recomm...
MediaKeys - Web APIs
the media
keys interface of encryptedmediaextensions api represents a set of
keys that an associated htmlmediaelement can use for decryption of media data during playback. properties none. methods media
keys.createsession() returns a new media
keysession object, which represents a context for message exchange with a content decryption module (cdm). media
keys.setservercertificate() returns a promise to a server certificate to be used to encrypt messages to the license server. examples //tbd specifications specification status comment encrypted media extensionsthe definition of 'media
keys' in that specification. recommendation initial definition. ...
Navigator.keyboard - Web APIs
the
keyboard read-only property of the navigator interface returns a
keyboard object which provides access to functions that retrieve
keyboard layout maps and toggle capturing of
key presses from the physical
keyboard. syntax var
keyboard = navigator.
keyboard value a
keyboard object. specifications specification status comment
keyboard mapthe definition of '
keyboard' in that specification. editor's draft initial definition. ...
PaymentRequestEvent.instrumentKey - Web APIs
the instrument
key read-only property of the paymentrequestevent interface returns a paymentinstrument object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument. syntax var instrument
key = paymentrequestevent.instrument
key value a paymentinstrument object. specifications specification status comment payment handler apithe definition of 'instrument
key' in that specification. working draft initial definition. ...
StylePropertyMapReadOnly.keys() - Web APIs
the stylepropertymapreadonly.
keys() method returns a new array iterator containing the
keys for each item in stylepropertymapreadonly syntax stylepropertymapreadonly.
keys() parameters none. return value a new array. example // tbd specifications specification status comment css typed om level 1the definition of '
keys()' in that specification. working draft initial definition. ...
Array.prototype.keys() - JavaScript
the
keys() method returns a new array iterator object that contains the
keys for each index in the array. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax arr.
keys() return value a new array iterator object. examples
key iterator doesn't ignore holes var arr = ['a', , 'c']; var sparse
keys = object.
keys(arr); var dense
keys = [...arr.
keys()]; console.log(sparse
keys); // ['0', '2'] console.log(dense
keys); // [0, 1, 2] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.
keys' in that specification. ...
Index
found 550 pages: # page tags and summary 1 spidermon
key: the mozilla javascript runtime spidermon
key standalone source code releases can be found on the releases page. 2 creating javascript tests automated testing, build documentation, guide, qa, spidermon
key in which test suite does your new test belong? 3 creating javascript jstest reftests ecmascript, guide, javascript, test in the js/src/tests directory, there are a few important subdirectories. 4 foss guide, spidermon
key feel free to add your own spidermon
key-based open source projects (and if necessary add categories)! 5 future directions guide, mozilla, spidermon
key this article documents future directions in...
... in the js/src/tests directory, there are a few important subdirectories. 4 foss guide, spidermon
key feel free to add your own spidermon
key-based open source projects (and if necessary add categories)! ...
...this page is intended to explain the changes that are happening, with a focus on how they will affect gecko code that uses jsapi. ...
...And 356 more matches
Index - Web APIs
couldn't be validated. the returned string explains the error and should offer suggestions for how to correct it. ...
...eturned string explains the error and should offer suggestions for how to correct it. 42 aescbcparams api, aescbcparams, dictionary, reference, web crypto api the aescbcparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrap
key(), or subtlecrypto.unwrap
key(), when using the aes-cbc algorithm. 43 aesctrparams api, aesctrparams, dictionary, reference, web crypto api the aesctrparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrap
key(), or subtlecrypto.unwrap
key(), when using the aes-ctr algorithm. ...
...(), subtlecrypto.decrypt(), subtlecrypto.wrap
key(), or subtlecrypto.unwrap
key(), when using the aes-ctr algorithm. 44 aesgcmparams api, aesgcmparams, dictionary, reference, web crypto api the aesgcmparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrap
key(), or subtlecrypto.unwrap
key(), when using the aes-gcm algorithm. 45 aes
keygenparams api, aes
keygenparams, dictionary, reference, web crypto api see the examples for subtlecrypto.generate
key(). 46 ambient light events ambient light the ambient light events are a handy way to make a web page or an application aware of any change in the light intensity. it ...
...And 313 more matches
Index
ying 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 algorithms. softoken is an nss module that exposes most freebl functionality as a pkcs#11 modul...
...d 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 algorithms. softoken is an nss module that exposes most freebl functionality as a pkcs#11 module. some cryptography uses the same secret
key for both encrypting and decrypting, for example password based encryption (pbe). this is often sufficient if you encrypt data for yourself, but as soon as you need to exchange signed/encrypted data with communication partners, using public
key encryption simplifies the
key management. the environment that describes how to use public
key encryption is called public
key infrastructure (pki). the pu...
...both encrypting and decrypting, for example password based encryption (pbe). this is often sufficient if you encrypt data for yourself, but as soon as you need to exchange signed/encrypted data with communication partners, using public
key encryption simplifies the
key management. the environment that describes how to use public
key encryption is called public
key infrastructure (pki). the public
keys that are exchanged between parties are transported using a container; the container is called a certificate, following standard x.509 version 3. a certificate contains lots of other details; for example, it contains a signature by a third party that expresses trust in the ownership relationship for the certificate. the trust assigned by the third party might be restricted to certain uses, which ...
...And 202 more matches
nss tech note5
thing else, then data padding is the application's responsibility. you can find a list of cipher mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_en_de_. ...
... a list of cipher mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_en_de_. ...
...n security/nss/lib/softoken/pkcs11.c - grep for ckf_en_de_. ...
...And 149 more matches
JSAPI reference
the jsapi is the c++ api for the spidermon
key javascript engine. to learn how to use the jsapi, see the jsapi user guide and the jsapi cookbook. note: the foss wiki page contains a few links to other libraries and programs that can make life easier when using spidermon
key and the jsapi. a note on versioning: up until the release of firefox 4, spidermon
key, and thus the jsapi, was versioned in an ad-hoc way, with releases happening at times that roughly, but not really, corresponded to firefox releases. in the fall of 2012, the spidermon
key team decided to align releases with those of firefox. the reference applies this versioning scheme retroactively starting with firefox 5. ...
...dermon
key, and thus the jsapi, was versioned in an ad-hoc way, with releases happening at times that roughly, but not really, corresponded to firefox releases. in the fall of 2012, the spidermon
key team decided to align releases with those of firefox. the reference applies this versioning scheme retroactively starting with firefox 5. firefox 4 is the last release that has a corresponding spidermon
key release with the old scheme, where the jsapi has the version 1.8.5. ...
..., corresponded to firefox releases. in the fall of 2012, the spidermon
key team decided to align releases with those of firefox. the reference applies this versioning scheme retroactively starting with firefox 5. firefox 4 is the last release that has a corresponding spidermon
key release with the old scheme, where the jsapi has the version 1.8.5. ...
...And 117 more matches
NSS Sample Code Sample1
nss sample code 1:
key generation and transport between servers. this is an example program that demonstrates how to do
key generation and transport between cooperating servers. this program shows the following: rsa
key pair generation naming rsa
key pairs looking up a previously generated
key pair by name creating aes and mac
keys (or encryption and mac
keys in general) wrapping symmetric
keys using your own rsa
key pair so that they can be stored on disk or in a database. ...
...transport between cooperating servers. this program shows the following: rsa
key pair generation naming rsa
key pairs looking up a previously generated
key pair by name creating aes and mac
keys (or encryption and mac
keys in general) wrapping symmetric
keys using your own rsa
key pair so that they can be stored on disk or in a database. as an alternative to token symmetric
keys as a way to store large numbers of symmetric
keys wrapping symmetric
keys using an rsa
key from another server unwrapping
keys using your own rsa
key pair the main part of the program shows a typical sequence of events for two servers that are trying to extablish a shared
key pair. we will add message protection (encryption and macing) examples to this program i...
...rapping symmetric
keys using an rsa
key from another server unwrapping
keys using your own rsa
key pair the main part of the program shows a typical sequence of events for two servers that are trying to extablish a shared
key pair. we will add message protection (encryption and macing) examples to this program in the future. sample code #include <iostream.h> #include "pk11pub.h" #include "
keyhi.h" #include "nss.h" //
key management for
keys share among multiple hosts // // this example shows how to use nss functions to create and // distribute
keys that need to be shared among multiple servers // or hosts. // // the management scheme assumes that one host is primary. it // generates the secret
keys that will be used by all participating // hosts. the other hosts (secondary) request...
...And 105 more matches
nsITextInputProcessor
dom/interfaces/base/nsitextinputprocessor.idlscriptable this interface is a text input events synthesizer and manages its composition and modifier state 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamon
key 2.35) the motivation of this interface is to provide better api than nsidomwindowutils to dispatch
key events and create, modify, and commit composition in higher level. nsidomwindowutils has provided the methods which dispatched
keyboard events and composition events almost directly. therefore they sometimes caused impossible scenarios in automated tests (what's tested with such events?) and js-ime and/or js-
keyboard on firefox os or add-ons may dispatch events with wrong rules. for ...
... for example, the implementation of this interface manages modifier state and composition state, initializes dom events from minimum information, and doesn't dispatch some events if they are not necessary. ...
...rface need to be updated, i.e., the implementation of this class can be a cushion from the impact of gecko's change. you can create an instance of this interface with the following code: var tip = components.classes["@mozilla.org/text-input-processor;1"]. createinstance(components.interfaces.nsitextinputprocessor); next, you need to get the rights to create composition or dispatch
keyboard events with begininputtransaction() or begininputtransactionfortests(): if (!tip.begininputtransaction(window, callback)) { return; } if begininputtransaction() or begininputtransactionfortests() returns false, it means that another instance of nsitextinputprocessor has composition on the window or is dispatching an event. in this case, other instances cannot create composition nor disp...
...And 85 more matches
Encrypt Decrypt_MAC_Using Token
nss sample code 3: encryption/decryption and mac using token object. generates encryption/mac
keys and uses token for storing. /* this source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...de #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enc
key_header "-----begin aes
key ckaid-----" #define enc
key_trailer "-----end aes
key ckaid-----" #define mac
key_header "-----begin mac
key ckaid-----" #define mac
key_trailer "-----end mac
key ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer ...
... */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify ...
...And 64 more matches
Index - Archive of obsolete content
create a page that does not contain navigational elements. 42 base64 add-on sdk no summary! 43 clipboard add-on sdk interact with the system clipboard, setting and getting its contents. 44 context-menu add-on sdk, add-ons, extensions, firefox, sdk adds items, submenus, and menu separators to the page's context menu. 45 hot
keys add-on sdk assign hot
key combinations to functions in your add-on. 46 indexed-db add-on sdk exposes the indexeddb api to add-ons. 47 l10n add-on sdk localize strings appearing in the add-on's javascript code. 48 notifications add-on sdk, notifications display transient, toaster-style desktop messages to the user. 49 ...
...privileged and non-privileged pages. 225 creating custom firefox extensions with the mozilla build system add-ons, build documentation, developing mozilla, extensions, guide, needscontent, xpcom no summary! 226 custom about: urls about: this page describes how to register a new about: url for your extension. 227 default preferences a
key part of any extension is the default settings that come with it. mozilla provides a simple way of shipping default settings by allowing default preferences. 228 deploying a plugin as an extension add-ons, plugins one of the new features available in firefox 1.5 is the ability to place browser plugins in a firefox extension. this feature is particularly useful for vendors who ...
...idelines on how to control the look and feel of your extension while leaving it open for styling by custom themes. 239 extension versioning, update and compatibility add-ons, extensions add-ons should specify their versions using the toolkit version format. as a rough overview this is a version string split by periods, some examples: 240 extensions support in seamon
key 2 add-ons, codingscripting, extensions, javascript, seamon
key, url, thunderbird starting with seamon
key 2 alpha 1 seamon
key supports toolkit/-style extensions. these type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions. 241 firefox addons developer guide the original document is in japanese and distri...
...And 63 more matches
sample2
ode form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...e <prtypes.h> #include <plstr.h> /* nss headers */ #include <cryptohi.h> #include <
keyhi.h> #include <pk11priv.h> #include <cert.h> #include <base64.h> #include <secerr.h> #include <secport.h> #include <secoid.h> #include <secmodt.h> #include <secoidt.h> #include <sechash.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_
key_bits 1024 /* header file constants */ #define enc
key_header "-----begin wrapped enc
key-----" #define enc
key_trailer "-----end wrapped enc
key-----" #define mac
key_header "-----begin wrapped mac
key-----" #define mac
key_trailer "-----end wrapped mac
key-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "----...
...wrapped enc
key-----" #define mac
key_header "-----begin wrapped mac
key-----" #define mac
key_trailer "-----end wrapped mac
key-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" #define lab_header "-----begin
key label-----" #define lab_trailer "-----end
key label-----" #define pub
key_header "-----begin pub
key -----" #define pub
key_trailer "-----end pub
key -----" #define ns_certreq_header "-----begin new certificate request-----" #define ns_certreq_trailer "-----end new certificate request-----" #define ns_cert_enc_header "-----begin certificate for encryption-----" #define ns_cert_enc_trailer "-----end...
...And 55 more matches
Using IndexedDB - Web APIs
| window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. // moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction || {read_write: "readwrite"}; // this line should only be needed if it is needed to support the object's constants for older browsers window.idb
keyrange = window.idb
keyrange || window.webkitidb
keyrange || window.msidb
keyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) beware that implementations that use a prefix may be buggy, or incomplete, or following an old version of the specification. therefore, it is not recommended to use it in production code. it may be preferable to not support a browser than t...
... the example). ...
...). ...
...And 55 more matches
nsIMsgDatabase
inherits from: nsidbchangeannouncer method overview void open(in nsilocalfile afoldername, in boolean acreate, in boolean aleaveinvaliddb); void forcefolderdbclosed(in nsimsgfolder afolder); void close(in boolean aforcecommit); void commit(in nsmsgdbcommit committype); void forceclosed(); void clearcachedhdrs; void resethdrcachesize(in unsigned long size); nsimsgdbhdr getmsghdrfor
key(in nsmsg
key key); nsimsgdbhdr getmsghdrformessageid(in string messageid); boolean contains
key(in nsmsg
key key); nsimsgdbhdr createnewhdr(in nsmsg
key key); void addnewhdrtodb(in nsimsgdbhdr newhdr, in boolean notify); nsimsgdbhdr copyhdrfromexistinghdr(in nsmsg
key key, in nsimsgdbhdr existinghdr, in boolean addhdrtodb); void listall
keys(in nsmsg
keyarrayref output
keys); native code only...
...synccounts; nsimsgthread getthreadcontainingmsghdr(in nsimsgdbhdr msghdr); void markhdrread(in nsimsgdbhdr msghdr, in boolean bread, in nsidbchangelistener instigator); void markhdrreplied(in nsimsgdbhdr msghdr, in boolean breplied, in nsidbchangelistener instigator); void markhdrmarked(in nsimsgdbhdr msghdr, in boolean mark,in nsidbchangelistener instigator); void markmdnneeded(in nsmsg
key key, in boolean bneeded,in nsidbchangelistener instigator); boolean ismdnneeded(in nsmsg
key key); void markmdnsent(in nsmsg
key key, in boolean bneeded, in nsidbchangelistener instigator); boolean ismdnsent(in nsmsg
key key); void markread(in nsmsg
key key, in boolean bread, in nsidbchangelistener instigator); void markreplied(in nsmsg
key key, in boolean breplied, in nsidbchangelistener in...
...istener instigator); boolean ismdnneeded(in nsmsg
key key); void markmdnsent(in nsmsg
key key, in boolean bneeded, in nsidbchangelistener instigator); boolean ismdnsent(in nsmsg
key key); void markread(in nsmsg
key key, in boolean bread, in nsidbchangelistener instigator); void markreplied(in nsmsg
key key, in boolean breplied, in nsidbchangelistener instigator); void markforwarded(in nsmsg
key key, in boolean bforwarded, in nsidbchangelistener instigator); void markhasattachments(in nsmsg
key key, in boolean bhasattachments, in nsidbchangelistener instigator); void markthreadread(in nsimsgthread thread, in nsidbchangelistener instigator, in nsmsg
keyarrayptr thosemarked); native code only! ...
...And 53 more matches
NSS tools : certutil
name certutil — manage
keys and certificate in both nss databases and other nss tokens synopsis certutil [options] [[arguments]] description the certificate database tool, certutil, is a command-line utility that can create and modify certificate and
key databases. it can specifically list, generate, modify, or delete certificates, create or change the password, generate new public and private
key pairs, display the contents of the
key database, or delete
key pairs within the
key database. certificate issuance, part of the
key and certificate management process, requires that
keys and certificates be created in the
key database. this document discusses certificate and
key database management. for information on the security mod...
.... use the -i argument to specify the certificate request file. if this argument is not used, certutil prompts for a filename. -d delete a certificate from the certificate database. --rename change the database nickname of a certificate. -e add an email certificate to the certificate database. -f delete a private
key from a
key database. specify the
key to delete with the -n argument. specify the database from which to delete the
key with the -d argument. use the -k argument to specify explicitly whether to delete a dsa, rsa, or ecc
key. if you don't use the -k argument, the option looks for an rsa
key matching the specified nickname. ...
.... specify the
key to delete with the -n argument. specify the database from which to delete the
key with the -d argument. use the -k argument to specify explicitly whether to delete a dsa, rsa, or ecc
key. if you don't use the -k argument, the option looks for an rsa
key matching the specified nickname. when you delete
keys, be sure to also remove any certificates associated with those
keys from the certificate database, by using -d. some smart cards (for example, the litronic card) do not let you remove a public
key you have generated. in such a case, only the private
key is deleted from the
key pair. ...
...And 48 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
nss sample code 3: basic encryption and macing this example program demonstrates how to encrypt and mac a file. ...
...str.h> /* nss headers */ #include <
keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enc
key_header "-----begin aes
key ckaid-----" #define enc
key_trailer "-----end aes
key ckaid-----" #define mac
key_header "-----begin mac
key ckaid-----" #define mac
key_trailer "-----end mac
key ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer ...
...---" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { sym
key = 0, mac
key = 1, iv = 2, mac = 3, pad = 4 } headertype; /* print a usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c <a|b> -d <dbdirpath> [-z <noisefilename>] " "[-p <dbpwd> | -f <dbpwdfile>] -i <ipfilename> -o <opfilename>\n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt ope...
...And 45 more matches
PKCS11 FAQ
, such as bulk encryption, hashing, and mac functions (for example, c_digest and c_sign) and those that require overlapped operation (c_unwrap, c_decrypt) are handled by creating new sessions. if no new sessions are available, the one read-only session is used, and the state is saved and restored after each multipart operation. nss never uses parallel mode. ...
... is saved and restored after each multipart operation. nss never uses parallel mode. nss opens new read/write sessions for
key generation, some password management, and storage of new certificates. if your token is read/write and has only one session, nss will open that one initial session read/write. what permanent pkcs #11 objects are used by nss or read from the token? example: rsa private
key, ca certificate, user's own certificate, user's name. private
keys (rsa and dsa) and the corresponding certificates are read from the token. other certificates on the token are also loaded (to allow building certificate chains), but it's not necessary to include the full chain, as long as the full chain is available in the regular certificate database. for the sake of completeness, it's also a g...
...wn certificate, user's name. private
keys (rsa and dsa) and the corresponding certificates are read from the token. other certificates on the token are also loaded (to allow building certificate chains), but it's not necessary to include the full chain, as long as the full chain is available in the regular certificate database. for the sake of completeness, it's also a good idea to expose public
key objects. nss falls back to looking for for the existance of public
keys to determine if the token may have the corresponding private
key while the token is not logged in. ...
...And 45 more matches
certutil
name certutil — manage
keys and certificate in the the nss database. synopsis certutil [options] arguments description the certificate database tool, certutil, is a command-line utility that can create and modify certificate and
key database files. it can also list, generate, modify, or delete certificates within the database, create or change the password, generate new public and private
key pairs, display the contents of the
key database, or delete
key pairs within the
key database. the
key and certificate management process generally begins with creating
keys in the
key database, then generating and managing certificates in the certificate database. this document discusses certificate and
key database management. for information security ...
...inary certificate file from a binary certificate request file. use the -i argument to specify the certificate request file. if this argument is not used, certutil prompts for a filename. -d delete a certificate from the certificate database. -e add an email certificate to the certificate database. -f delete a private
key from a
key database. specify the
key to delete with the -n argument. specify the database from which to delete the
key with the -d argument. use the -k argument to specify explicitly whether to delete a dsa, rsa, or ecc
key. if you don't use the -k argument, the option looks for an rsa
key matching the specified nickname. when you...
...
key database. specify the
key to delete with the -n argument. specify the database from which to delete the
key with the -d argument. use the -k argument to specify explicitly whether to delete a dsa, rsa, or ecc
key. if you don't use the -k argument, the option looks for an rsa
key matching the specified nickname. when you delete
keys, be sure to also remove any certificates associated with those
keys from the certificate database, by using -d. some smart cards (for example, the litronic card) do not let you remove a public
key you have generated. in such a case, only the private
key is deleted from the
key pair. ...
...And 44 more matches
JXON - Archive of obsolete content
lize doc — the dom tree — to a javascript object tree (you can read more about working with objects and how javascript is object-oriented). we can use several algorithms to convert its content to a javascript object tree. algorithm #1: a verbose way this simple recursive constructor will convert an xml dom tree to a javascript object tree. the text content of each element is stored into the
keyvalue property, while nodeattributes, if they exist, are listed under the child object
keyattributes. the constructor's argument can be the entire xml document, a documentfragment or simply an element node. /*\ |*| |*| jxon snippet #1 mdndeveloper network |*| |*| https://developer.mozilla.org/docs/jxon |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under...
... if (onode.nodetype === 1 && !onode.prefix) { // nodetype is "element" (1) sprop = onode.nodename.tolowercase(); vcontent = new jxontree(onode); if (this.hasownproperty(sprop)) { if (this[sprop].constructor !== array) { this[sprop] = [this[sprop]]; } this[sprop].push(vcontent); } else { this[sprop] = vcontent; nlength++; } } } this.
keyvalue = parsetext(scollectedtxt); } else { this.
keyvalue = null; } if (oparentnode.hasattributes && oxmlparent.hasattributes()) { var oattrib; this.
keyattributes = {}; for (nattrlen; nattrlen < oxmlparent.attributes.length; nattrlen++) { oattrib = oxmlparent.attributes.item(nattrlen); this.
keyattributes[oattrib.name.tolowercase()] = parsetext(oattrib.value.trim()); ...
...his.
keyvalue = null; } if (oparentnode.hasattributes && oxmlparent.hasattributes()) { var oattrib; this.
keyattributes = {}; for (nattrlen; nattrlen < oxmlparent.attributes.length; nattrlen++) { oattrib = oxmlparent.attributes.item(nattrlen); this.
keyattributes[oattrib.name.tolowercase()] = parsetext(oattrib.value.trim()); } } /* * optional properties... this.
keylength = nlength; this.attributeslength = nattrlen; // this.domnode = oxmlparent; */ /* object.freeze(this); */ } /* * optional methods... ...
...And 42 more matches
NSS functions
updated - function has new arguments such as new flag or addition to structure. ssl functions the public functions listed here are used to configure sockets for communication via the ssl and tls protocols. ...
... mxr 3.6 and later cert_createrdn mxr 3.2.1 and later cert_createsubjectcertlist mxr 3.4 and later cert_createvalidity mxr 3.5 and later cert_crlcacherefreshissuer mxr 3.7 and later cert_decodealtnameextension mxr 3.10 and later cert_decodeauthinfoaccessextension mxr 3.10 and later cert_decodeauth
keyid mxr 3.10 and later cert_decodeavavalue mxr 3.4 and later cert_decodebasicconstraintvalue mxr 3.2 and later cert_decodecertfrompackage mxr 3.4 and later cert_decodecertificatepoliciesextension mxr 3.2 and later cert_decodecertpackage mxr 3.2 and later cert_decodecrldistributionpoints mxr 3.10 and late...
... mxr 3.10 and later cert_decodedercrl mxr 3.2 and later cert_decodedercrlwithflags mxr 3.6 and later cert_decodegeneralname mxr 3.4 and later cert_decodenameconstraintsextension mxr 3.10 and later cert_decodeocspresponse mxr 3.6 and later cert_decodeoidsequence mxr 3.2 and later cert_decodepriv
keyusageperiodextension mxr 3.10 and later cert_decodetruststring mxr 3.4 and later cert_decodeusernotice mxr 3.2 and later cert_dernametoascii mxr 3.4 and later cert_destroycertarray mxr 3.2 and later cert_destroycertificate mxr 3.2 and later cert_destroycertificatelist mxr 3.2 and later cert_des...
...And 42 more matches
Encrypt and decrypt MAC using token
nss sample code 3: encryption/decryption and mac using token object. generates encryption/mac
keys and uses token for storing. /* this source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...de #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enc
key_header "-----begin aes
key ckaid-----" #define enc
key_trailer "-----end aes
key ckaid-----" #define mac
key_header "-----begin mac
key ckaid-----" #define mac
key_trailer "-----end mac
key ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer ...
...---" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { sym
key = 0, mac
key = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify '...
...And 41 more matches
sslerr.html
upport only the cipher suites permitted for export use. ssl_error_no_cypher_overlap -12286 "cannot communicate securely with peer: no common encryption algorithm(s)." the local and remote systems share no cipher suites in common. this can be due to a misconfiguration at either end. it can be due to a server being misconfigured to use a non-rsa certificate with the rsa
key exchange algorithm. ssl_error_no_certificate -12285 "unable to find the certificate or
key necessary for authentication." this error has many potential causes; for example: certificate or
key not found in database. certificate not marked trusted in database and certificate's issuer not marked trusted in database. wrong password for
key database. ...
...this means the remote server has attempted to negotiate the use of a version of ssl that is not supported by the nss library, probably an invalid version number. on a server socket, this means the remote client has requested the use of a version of ssl older than version 2. ...
...ans the remote server has attempted to negotiate the use of a version of ssl that is not supported by the nss library, probably an invalid version number. on a server socket, this means the remote client has requested the use of a version of ssl older than version 2. ...
...And 41 more matches
Introduction to SSL - Archive of obsolete content
tocol version 1.0. some red hat products already support tls. most other red hat products plan to support the protocol in future versions. this document is primarily intended for administrators of red hat server products, but the information it contains may also be useful for developers of applications that support ssl. the document assumes that you are familiar with the basic concepts of public-
key cryptography, as summarized in "introduction to public-
key cryptography." the ssl protocol the transmission control protocol/internet protocol (tcp/ip) governs the transport and routing of data over the internet. other protocols, such as the hypertext transport protocol (http), lightweight directory access protocol (ldap), or internet messaging access protocol (imap), run "on top of" tcp/ip in ...
...to an ssl-enabled client, allows the client to authenticate itself to the server, and allows both machines to establish an encrypted connection. these capabilities address fundamental concerns about communication over the internet and other tcp/ip networks: ssl server authentication allows a user to confirm a server's identity. ssl-enabled client software can use standard techniques of public-
key cryptography to check that a server's certificate and public id are valid and have been issued by a certificate authority (ca) listed in the client's list of trusted cas. this confirmation might be important if the user, for example, is sending a credit card number over the network and wants to check the receiving server's identity. ssl client authentication allows a server to confirm a user's i...
...s of messages between an ssl-enabled server and an ssl-enabled client when they first establish an ssl connection. this exchange of messages is designed to facilitate the following actions: authenticate the server to the client. allow the client and server to select the cryptographic algorithms, or ciphers, that they both support. optionally authenticate the client to the server. use public-
key encryption techniques to generate shared secrets. establish an encrypted ssl connection. for more information about the handshake process, see "the ssl handshake." ciphers used with ssl the ssl protocol supports the use of a variety of different cryptographic algorithms, or ciphers, for use in operations such as authenticating the server and client to each other, transmitting certificates, a...
...And 40 more matches
Mozilla-JSS JCA Provider notes
rovider field to false, and pass the initializationvalues object to cryptomanager.initialize(). specifying the cryptotoken all cryptographic operations in jss and nss occur on a particular pkcs #11 token, implemented in software or hardware. there is no clean way to specify this token through the jca api. by default, the jss provider carries out all operations except messagedigest on the internal
key storage token, a software token included in jss/nss. messagedigest operations take place by default on the internal crypto token, another internal software token in jss/nss. there is no good design reason for this difference, but it is necessitated by a quirk in the nss implementation. in order to use a different token, use cryptomanager.setthreadtoken(). this sets the token to be used by the jss...
...threadtoken()) and instructs the new object to use that token for cryptographic operations. the per-thread default token setting is only consulted inside getinstance(). once a jca object has been created it will continue to use the same token, even if the application later changes the per-thread default token. ...
... the internal
key storage token. thus, the thread token is not inherited from the parent thread. the following example shows how you can specify which token is used for various jca operations: // lookup pkcs #11 tokens cryptomanager manager = cryptomanager.getinstance(); cryptotoken tokena = manager.gettokenbyname("tokena"); cryptotoken tokenb = manager.gettokenbyname("tokenb"); // create an rsa
keypairgenerator using tokena manager.setthreadtoken(tokena);
keypairgenerator rsakpg =
keypairgenerator.getinstance("mozilla-jss", "rsa"); // create a dsa
keypairgenerator using tokenb manager.setthreadtoken(tokenb);
keypairgenerator dsakpg =
keypairgenerator.getinstance("mozilla-jss", "dsa"); // generate an rsa
keypair. this will happen on tokena because tokena // was the per-thread default toke...
...And 39 more matches
EncDecMAC using token object - sample 3
pl/2.0/. ...
...s */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enc
key_header "-----begin aes
key ckaid-----" #define enc
key_trailer "-----end aes
key ckaid-----" #define mac
key_header "-----begin mac
key ckaid-----" #define mac
key_trailer "-----end mac
key ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end p...
...der "-----begin mac
key ckaid-----" #define mac
key_trailer "-----end mac
key ckaid-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { sym
key = 0, mac
key = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr, "%-20s specify db directory p...
...And 39 more matches
Building accessible custom components in XUL - Archive of obsolete content
ner" flex="1"/> <label value="lodging" flex="1"/> <label value="breakfast" flex="1"/> <label value="lunch" flex="1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet. ...
...irole:columnheader". each label element is an individual cell and needs a role of "wairole:gridcell". this means we actually need to declare two namespaces, the xhtml 2 namespace and the wairole namespace. we can declare both of them at the top of our .xul file and then reuse them as often as we need. <code> <window id="accjax" title="accjax spreadsheet" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" xmlns:x2="http://www.w3.org/tr/xhtml2" xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/guiroletaxonomy#" > </code> once the namespaces are in place, we define the roles for each component of our spreadsheet. <code> <grid x2:role="wairole:spreadsheet" class="spreadsheet" id="accjaxspreadsheet" flex="1"> <rows flex="1"></rows> <columns flex="1"> ...
... as a text label, is now exposed to assistive technologies as an actual column header. <caption>column headers are exposed as column headers</caption> row headers are also exposed properly. <caption>row headers are exposed as row headers</caption> that's it! well, not quite. we still have no way to focus individual cells, nor do we have a way to navigate the spreadsheet with the
keyboard. but that's it as far as dhtml accessibility goes. all you need to do is declare two namespaces and assign the appropriate role attributes, and firefox handles exposing the elements properly to the underlying assistive technology. further reading table of supported roles and states in firefox focus issues download stage-3.zip install stage-3.xpi the next step on the road to an accessible...
...And 32 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
create a textbox with a popup containing a list of possible completions for what the user has started to type. the autocomplete functionality is handled through one of more session objects, each of which can return a set of results given the current value of the textbox. the sessions can be set using the searchsessions attribute or by calling the addsession method. ...
...if false, the default value...
...alue methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes access
key type: character this should be set to a character that is used as a shortcut
key. this should be one of the characters that appears in the label attribute for the element. alwaysopenpopup obsolete since gecko 1.9.1 type: boolean note: applies to: thunderbird and seamon
keyif true, the autocomplete popup will be displayed even when there are no matches. if false, the default value, the popup will be hidden. this attribute is obsolete as of gecko 1.9.1; to contro...
...And 32 more matches
Accessing the Windows Registry Using XPCOM
egistry for information about the environment or other installed programs. to this end, there exist xpcom interfaces to read and write registry data. this article will show you how to use the available interfaces in several mozilla products. the examples in this document are all written in javascript using xpcom. support in firefox 1.5 or newer in firefox 1.5, a new api was added, nsiwindowsreg
key, which provides extensive registry functionality. the interface follows the windows api fairly closely, but with many of the low-level details taken care of for you. if you are writing an extension that only needs to support firefox 1.5 or newer, then you only need to read this section. a simple example here's a simple example showing how to read your windows productid: var wrk = components.cl...
...unctionality. the interface follows the windows api fairly closely, but with many of the low-level details taken care of for you. if you are writing an extension that only needs to support firefox 1.5 or newer, then you only need to read this section. a simple example here's a simple example showing how to read your windows productid: var wrk = components.classes["@mozilla.org/windows-registry-
key;1"] .createinstance(components.interfaces.nsiwindowsreg
key); wrk.open(wrk.root_
key_local_machine, "software\\microsoft\\windows\\currentversion", wrk.access_read); var id = wrk.readstringvalue("productid"); wrk.close(); this example, while simple, shows several important things about using the interface. first, you must use createinstance() to get an object...
...k.open(wrk.root_
key_local_machine, "software\\microsoft\\windows\\currentversion", wrk.access_read); var id = wrk.readstringvalue("productid"); wrk.close(); this example, while simple, shows several important things about using the interface. first, you must use createinstance() to get an object implementing this interface, not getservice(). second, you must call open() on the
key before attempting to read a value. notice in the open() call that the root
key to use is specified using the named constants available on the nsiwindowsreg
key interface, in this case root_
key_local_machine, which corresponds to h
key_local_machine in the windows registry. also notice that the path to the
key has backslashes escaped, a necessity in javascript and c++ string constants. the desired...
...And 32 more matches
A Web PKI x509 certificate primer
509) is an itu standard to describe certificates. this article provides an overview of what these are and how they work. three versions of the x509 standard have been defined for web-pki. in this document we will be referring to the current standard in use for web pki: x509 v3, which is described in detail in rfc 5280. in general, x509 certificates bind a signature to a validity period, a public
key, a subject, an issuer, and a set of extensions. the extensions define extra properties of the certificate such as extra attributes of the certificate or constraints on the use of the certificate. in order for a certificate to be valid these three requirements must be met: there is a verification path from the site certificate to a trusted certificate of the user agent (ie if you follow the iss...
...th have valid parameters for that verification (for example the validity period of all the certificates are valid for the time the verification is being done) revocation checks are considered ok for that particular validation. one issue that is not commonly known is that the x509 trust graph is not a forest (a bunch of trees where each root is a trusted root) but a cyclic graph, where the same
key/issuer can be a root or an intermediate for another root in the browsers
key store (when roots create intermediates for each other it is called cross-signing). extensions while rfc 5280 defines 16 extensions for webpki in this document we will be describing the six extensions we considered critical for understanding. certificates can have other extensions not described on rfc 5280, but that is ...
...mes) are valid for this certificate. this allows for a certificate to be used for more than one fqdn, for example you can have a certificate that is valid for both a.example.com and b.example.com basic constraints this allows certificates to be asserted as issuing certificates (it is mandatory for ca certificates). it can also be used to express the maximum depth of the trust path from the ca.
key usage this extension is used to constrain the purpose for the
key in the certificate. more than one
key usage can be asserted. examples of
key usages are: digitalsignature,
keyencipherment, dataencipherment,
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 di...
...And 31 more matches
Index - Archive of obsolete content
type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages. 3 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the
key concepts and terms in the xul development environment. the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms. i selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-platform development. in contrast to the mozi...
...this process continues until there are no more elements remaining. the same process occurs when decreasing the size, except in the other direction. ...
...ning. the same process occurs when decreasing the size, except in the other direction. ...
...And 29 more matches
Handling common accessibility problems - Learn web development
blems, and use appropriate tools and techniques to fix them. what is accessibility? when we say accessibility in the context of web technology, most people immediately think of making sure websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnification/zoom to access text people with motor function impairments using the
keyboard (or other non-mouse features) to activate website functionality. people with hearing impairments relying on captions/subtitles or other text alternatives for audio/video content. however, it is wrong to say that accessibility is just about disabilities. really, the aim of accessibility is to make your websites/apps usable by as many people in as many contexts as possible, not just those u...
...in menu. safari: select develop > disable styles from the main menu (to enable the develop menu, choose safari > preferences > advanced > show develop menu in menu bar). chrome: install the web developer toolbar extension, then restart the browser. click the gear icon that will appear, then select css > disable all styles. edge: select view > style > no style from the main menu. ...
...le the develop menu, choose safari > preferences > advanced > show develop menu in menu bar). chrome: install the web developer toolbar extension, then restart the browser. click the gear icon that will appear, then select css > disable all styles. edge: select view > style > no style from the main menu. using native
keyboard accessibility certain html features can be selected using only the
keyboard — this is default behavior, available since the early days of the web. ...
...And 29 more matches
sslfnc.html
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 function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. use pr_geterror to retrieve the error code. description nss_init opens the certn.db,
keyn.db, and secmod.db files (wheren is a numeric digit) in the specified directory. nss_init isnot idempotent, so call it only once. nss...
...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 security module databases reside. returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. use pr_geterror to retrieve the error code. description nss_initreadwrite opens the certn.db,
keyn.db, and secmod.db files (wheren is a numeric digit) with both read and write permission in the specified directory. nss_initre...
...herefore, 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.. returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. use pr_geterror to retrieve the error code. descriptio...
...And 29 more matches
nsIDOMWindowUtils
dom/interfaces/base/nsidomwindowutils.idlscriptable this interface is a dom utility interface that provides useful dom methods and attributes. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamon
key 2.46) implemented by: window. to get this interface, use: var domwindowutils = window.windowutils; method overview void activatenativemenuitemat(in astring indexstring); void clearmozafterpaintevents(); pruint32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long amaxdifference); double computeanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring val...
...; void resumetimeouts(); void sendcompositionevent(in astring atype); obsolete since gecko 9 void sendcompositionevent(in astring atype, in astring adata, in astring alocale); obsolete since gecko 38.0 void sendcontentcommandevent(in astring atype, [optional] in nsitransferable atransferable); void getclassname(in object aobj); boolean send
keyevent(in astring atype, in long a
keycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 15.0 boolean send
keyevent(in astring atype, in long a
keycode, in long acharcode, in long amodifiers, [optional] in unsigned long aadditionalflags); deprecated since gecko 38.0 void sendmouseevent(in astring atype, in float ax, in float ay...
...e, in float ax, in float ay, in long abutton, in long ascrollflags, in long adelta, in long amodifiers); obsolete since gecko 17.0 void sendwheelevent(in float ax, in float ay, in double adeltax, in double adeltay, in double adeltaz, in unsigned long adeltamode, in long amodifiers, in long alineorpagedeltax, in long alineorpagedeltay, in unsigned long aoptions); void sendnative
keyevent(in long anative
keyboardlayout, in long anative
keycode, in long amodifierflags, in astring acharacters, in astring aunmodifiedcharacters); void sendnativemouseevent(in long ascreenx, in long ascreeny, in long anativemessage, in long amodifierflags, in nsidomelement aelement); nsiquerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset,...
...And 29 more matches
Web Authentication API - Web APIs
the web authentication api is an extension of the credential management api that enables strong authentication with public
key cryptography, enabling passwordless authentication and/or secure second-factor authentication without sms texts. web authentication concepts and usage the web authentication api (also referred to as webauthn) uses asymmetric (public-
key) cryptography instead of passwords or sms texts for registering, authenticating, and second-factor authentication with websites. this resolves significant security problems related to phishing, data breaches, and attacks against sms texts or other second-factor authentication methods while at the same time significantly increasing ease of use (since users don't have to manage dozens of increasingly complicated passwords). ...
...ve pages that allow users to register new accounts or sign in to an existing account, and the web authentication api acts as a replacement or supplement to those on those existing webpages. similar to the other forms of the credential management api, the web authentication api has two basic methods that correspond to register and login: navigator.credentials.create() - when used with the public
key option, creates new credentials, either for registering a new account or for associating a new asymmetric
key pair credentials with an existing account. navigator.credentials.get() - when used with the public
key option, uses an existing set of credentials to authenticate to a service, either logging a user in or as a form of second-factor authentication. please note: both create() and get() re...
...entication. please note: both create() and get() require a secure context (e.g. - the server is 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 in...
...And 29 more matches
Setting up your own test automation environment - Learn web development
ything is working. ...
...ve it the following contents, then save it: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; const driver = new webdriver.builder() .forbrowser('firefox') .build(); driver.get('http://www.google.com'); driver.findelement(by.name('q')).send
keys('webdriver'); driver.sleep(1000).then(function() { driver.findelement(by.name('q')).send
keys(webdriver.
key.tab); }); driver.findelement(by.name('btnk')).click(); driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); } else { console.log('test failed'); } driver.quit(); }); }); in terminal, make sure you are inside your project folder, then enter the foll...
...ire('selenium-webdriver'), by = webdriver.by, until = webdriver.until; let driver_fx = new webdriver.builder() .forbrowser('firefox') .build(); let driver_chr = new webdriver.builder() .forbrowser('chrome') .build(); searchtest(driver_fx); searchtest(driver_chr); function searchtest(driver) { driver.get('http://www.google.com'); driver.findelement(by.name('q')).send
keys('webdriver'); driver.sleep(1000).then(function() { driver.findelement(by.name('q')).send
keys(webdriver.
key.tab); }); driver.findelement(by.name('btnk')).click(); driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); } else { console.log('test failed'); ...
...And 27 more matches
Redis Tips
push, rpush, lpop, rpop, llen, linsert, lindex, etc. event logging lists, zsets, pubsub queues lists (rpush, blpop, blpoprpush, etc.) priority queues zsets membership sets, bitstrings state hashes heartbeats zsets hit counters zsets message broadcast pubsub search reverse indexes (never use
keys in production) documentation redis has fantastic documentation. yet redis is so easy to learn and use that you'll seldom feel you need to consult it. there are three reasons to look at the docs for every command you use. time complexity - each command's complexity is given in big-o notation. this is immensely helpful. related commands - an ever-growing list of related commands i...
... return value is error or null; second return value is result of redis command. > r.set('foo', 42, console.log) null 'ok' > r.get('foo', console.log) null '42' for the rest of this, i'm going to use the synchronous redis-cli for demonstrations. lines beginning with redis> are input to the redis-cli. things are strings, mostly as you can see from that last example, the values pointed to by
keys are strings or they are nil. nil values will be given as null in node, not undefined. but some commands only work with numbers (like incr); for these, if your
key can't be parsed as a number, it's an error: redis> set foo pie ok redis> incr foo (error) err value is not an integer or out of range atomic counters i guess that sounds like geiger counters. i mean counters you can update a...
... this is so useful. ...
...And 27 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
ting the type attribute of the textbox to autocomplete. it is used to create a textbox with a popup containing a list of possible completions for what the user has started to type. toolkit applications (such as firefox) use a different autocomplete mechanism than the mozilla suite. the example below will create an autocomplete textbox that will search the user's history. ...
...er has started to type. toolkit applications (such as firefox) use a different autocomplete mechanism than the mozilla suite. the example below will create an autocomplete textbox that will search the user's history. ...
...te, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disable
keynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ...
...And 26 more matches
nss tech note3
ermediate ssl ca certs. certusageemailsigner ......... used to verify s/mime email signatures certusageemailrecipient ...... used to encrypt s/mime emails. certusageobjectsigner ........ used to verify signatures on files of executable code, e.g. jar files. certusagestatusresponder ..... used by an ocsp responder certusageverifyca ............ a ca of any kind. ...
...me emails. certusageobjectsigner ........ used to verify signatures on files of executable code, e.g. jar files. certusagestatusresponder ..... used by an ocsp responder certusageverifyca ............ a ca of any kind. each cert has a "type" and a "
key usage", each of which may contain one or more valid values. each of the above seccertusages translates into a required set of cert type and
key usage for the certificate itself, and into another set of required cert type and
key usage for all the ca certs in the cert chain. ...
...ch 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. ...
...And 26 more matches
NSS tools : pk12util
name pk12util — export and import
keys and certificate to or from a pkcs #12 file and the nss database synopsis pk12util [-i p12file [-h tokenname] [-v] [common-options] ] [ -l p12file [-h tokenname] [-r] [common-options] ] [ -o p12file -n certname [-c
keycipher] [-c certcipher] [-m|--
key_len
keylen] [-n|--cert_
key_len cert
keylen] [common-options] ] [ common-options are: [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] ] description the pkcs #12 utility, pk12util, enables sharing certificates among any server that supports pkcs#12. the tool can import certificates and
keys from pkcs#12 files into security databases, export certificates, and list certificates and
keys. option...
...k slotpassword] [-w p12filepasswordfile|-w p12filepassword] ] description the pkcs #12 utility, pk12util, enables sharing certificates among any server that supports pkcs#12. the tool can import certificates and
keys from pkcs#12 files into security databases, export certificates, and list certificates and
keys. options and arguments options -i p12file import
keys and certificates from a pkcs#12 file into a security database. -l p12file list the
keys and certificates in pkcs#12 file. -o p12file export
keys and certificates from the security database to a pkcs#12 file. arguments -n certname specify the nickname of the cert and private
key to export. -d [sql:]directory ...
...if the prefix sql: is not used, then the tool assumes that the given databases are in the old format. ...
...And 25 more matches
Accessible Toolkit Checklist
expose your ui - a way for assistive technologies such as screen readers, screen magnifiers and voice dictation software to understand your software. provide theme compatibility with the operating system, at least as an option. some low vision users will be running your software with high contrast or large font themes. go beyond section 508. ...
... toolkits, which each provide different challenges when implementing accessibility: native widget toolkits , like eclipse and wxwidgets, already have some accessibility built-in. these toolkits wrap the widgets implemented by the os with a consistent api for each platform. since the individual widgets predominately come from the operating system, they already implement standard
keyboard commands and follow the operating system's visual theme. also, assistive technologies already understand native widgets so it is only necessary to implement microsoft active accessibility (msaa) api support for custom controls. however, be aware that the wrapping layer will introduce accessibility bugs, and thus you will need to test extensively and fill in the holes. you will also need to p...
...s. there will be custom and owner drawn controls -- there always are. for example, lists of checkboxes are implemented in windows with images of checked and unchecked checkboxes. owner drawn toolkits , like xul and flash's flex ui framework use few or no native widgets. these toolkits need to have accessibility implemented from the ground up, and get nothing for free in terms of
keyboard, api or os-theme support. in this case, adding a complete or even a partial accessibility solution is major work, and will require more than one full time person as well as cooperation from windows assistive technology vendors when parts of your msaa solution isn't working. often these kinds of toolkits don't use a separate window for each control; in that case remember to generate a unique ...
...And 24 more matches
Cryptography functions
_blockdata mxr 3.2 and later pk11_changepw mxr 3.2 and later pk11_checkuserpassword mxr 3.2 and later pk11_cipherop mxr 3.2 and later pk11_clonecontext mxr 3.2 and later pk11_configurepkcs11 mxr 3.2 and later pk11_convertsessionpriv
keytotokenpriv
key mxr 3.6 and later pk11_convertsessionsym
keytotokensym
key mxr 3.6 and later pk11_copytokenpriv
keytosessionpriv
key mxr 3.11 and later pk11_createcontextbysym
key mxr 3.2 and later pk11_createdigestcontext mxr 3.2 and later pk11_creategenericobject ...
...r pk11_createdigestcontext mxr 3.2 and later pk11_creategenericobject mxr 3.12 and later pk11_createmergelog mxr 3.12 and later pk11_createpbealgorithmid mxr 3.2 and later pk11_createpbev2algorithmid mxr 3.12 and later pk11_deletetokenprivate
key mxr 3.4 and later pk11_deletetokenpublic
key mxr 3.4 and later pk11_deletetokensym
key mxr 3.4 and later pk11_derive mxr 3.2 and later pk11_derivewithflags mxr 3.2 and later pk11_derivewithflagsperm mxr 3.9 and later pk11_destroycont...
... mxr 3.9.2 and later pk11_destroygenericobjects mxr 3.9.2 and later pk11_destroymergelog mxr 3.12 and later pk11_destroyobject mxr 3.2 and later pk11_destroytokenobject mxr 3.2 and later pk11_digestbegin mxr 3.2 and later pk11_digest
key mxr 3.2 and later pk11_digestop mxr 3.2 and later pk11_digestfinal mxr 3.2 and later pk11_doesmechanism mxr 3.2 and later pk11_exportencryptedprivate
keyinfo mxr 3.2 and later pk11_exportencryptedpriv
keyinfo mxr 3.9 and later pk11_e...
...And 24 more matches
nsINavBookmarksService
es/nsinavbookmarksservice.idlscriptable the bookmarksservice interface provides methods for managing bookmarked history items. bookmarks consist of a set of user-customizable folders. a uri in history can be contained in one or more such folders. 1.0 67 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11) implemented by: @mozilla.org/browser/nav-bookmarks-service;1. to use this service, use: var navbookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); method overview void addobserver(in nsinavbookmarkobserver observer, in boolean ownsweak); void beginup...
...astring getitemguid(in long long aitemid); obsolete since gecko 14.0 long long getitemidforguid(in astring aguid); obsolete since gecko 14.0 long getitemindex(in long long aitemid); prtime getitemlastmodified(in long long aitemid); autf8string getitemtitle(in long long aitemid); unsigned short getitemtype(in long long aitemid); astring get
keywordforbookmark(in long long aitemid); obsolete since gecko 40.0 astring get
keywordforuri(in nsiuri auri); obsolete since gecko 40.0 nsitransaction getremovefoldertransaction(in long long aitemid); nsiuri geturifor
keyword(in astring
keyword); obsolete since gecko 40.0 void importbookmarkshtml(in nsiuri url); obsolete since gecko 1.9 void importbookmark...
...read only. note: renamed from bookmarksroot in ...
...And 24 more matches
Map - JavaScript
nan is considered the same as nan (even though nan !== nan) and all other values are considered equal according to the semantics of the === operator. in the current ecmascript specification, -0 and +0 are considered equal, although this was not so in earlier drafts. see "value equality for -0 and 0" in the browser compatibility table for details. objects vs. ...
...red the same as nan (even though nan !== nan) and all other values are considered equal according to the semantics of the === operator. in the current ecmascript specification, -0 and +0 are considered equal, although this was not so in earlier drafts. see "value equality for -0 and 0" in the browser compatibility table for details. objects vs. maps object is similar to map—both let you set
keys to values, retrieve those values, delete
keys, and detect whether something is stored at a
key. for this reason (and because there were no built-in alternatives), objects have been used as maps historically. however, there are important differences that make map preferable in certain cases: map object accidental
keys a map does not contain any
keys by default. i...
... reason (and because there were no built-in alternatives), objects have been used as maps historically. however, there are important differences that make map preferable in certain cases: map object accidental
keys a map does not contain any
keys by default. it only contains what is explicitly put into it. an object has a prototype, so it contains default
keys that could collide with your own
keys if you're not careful. note: as of es5, this can be bypassed by using object.create(null), but this is seldom done.
key types a map's
keys can be any value (including functions, objects, or any primitive). the
keys of an object must be either a string or a symbol.
key order the
keys in map are ordered. thus,...
...And 24 more matches
An overview of NSS Internals
ying 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 algorithms. softoken is an nss module that exposes most freebl functionality as a pkcs#11 modul...
...d 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 algorithms. softoken is an nss module that exposes most freebl functionality as a pkcs#11 module. some cryptography uses the same secret
key for both encrypting and decrypting, for example password based encryption (pbe). this is often sufficient if you encrypt data for yourself, but as soon as you need to exchange signed/encrypted data with communication partners, using public
key encryption simplifies the
key management. the environment that describes how to use public
key encryption is called public
key infrastructure (pki). the pu...
...both encrypting and decrypting, for example password based encryption (pbe). this is often sufficient if you encrypt data for yourself, but as soon as you need to exchange signed/encrypted data with communication partners, using public
key encryption simplifies the
key management. the environment that describes how to use public
key encryption is called public
key infrastructure (pki). the public
keys that are exchanged between parties are transported using a container; the container is called a certificate, following standard x.509 version 3. a certificate contains lots of other details; for example, it contains a signature by a third party that expresses trust in the ownership relationship for the certificate. the trust assigned by the third party might be restricted to certain uses, which ...
...And 23 more matches
JSS Provider Notes
field to false, and pass the initializationvalues object to cryptomanager.initialize(). specifying the cryptotoken all cryptographic operations in jss and nss occur on a particular pkcs #11 token, implemented in software or hardware. there is no clean way to specify this token through the jca api. by default, the jss provider carries out all operations except messagedigest on the internal
key storage token, a software token included in jss/nss. messagedigest operations take place by default on the internal crypto token, another internal software token in jss/nss. there is no good design reason for this difference, but it is necessitated by a quirk in the nss implementation. in order to use a different token, use cryptomanager.setthreadtoken(). this sets the token to be used by the j...
...eadtoken()) and instructs the new object to use that token for cryptographic operations. the per-thread default token setting is only consulted inside getinstance(). once a jca object has been created it will continue to use the same token, even if the application later changes the per-thread default token. ...
...ternal
key storage token. thus, the thread token is not inherited from the parent thread. the following example shows how you can specify which token is used for various jca operations: // lookup pkcs #11 tokens cryptomanager manager = cryptomanager.getinstance(); cryptotoken tokena = manager.gettokenbyname("tokena"); cryptotoken tokenb = manager.gettokenbyname("tokenb"); // create an rsa
keypairgenerator using tokena manager.setthreadtoken(tokena);
keypairgenerator rsakpg =
keypairgenerator.getinstance("rsa", "mozilla-jss"); // create a dsa
keypairgenerator using tokenb manager.setthreadtoken(tokenb);
keypairgenerator dsakpg =
keypairgenerator.getinstance("dsa", "mozilla-jss"); // generate an rsa
keypair. this will happen on tokena because tokena // was the per-thread default toke...
...And 23 more matches
Install script template - Archive of obsolete content
allowedherenetscape.com arun k. ranganathan -- aruneratnospamallowedherenetscape.com petter ericson -- petteratnospamallowedherecycore.com this is an install.js file that does the following -- 1. installs to the current browser that is invoking the installation 2. additionally installs to a secondary location on the windows desktop, in this case c:\winnt\system32\myplugin\ 3. ...
...tter ericson -- petteratnospamallowedherecycore.com this is an install.js file that does the following -- 1. installs to the current browser that is invoking the installation 2. additionally installs to a secondary location on the windows desktop, in this case c:\winnt\system32\myplugin\ 3. writes registry
keys exposing the above secondary install location for other browsers to find. ...
...s/plugin-identifier.html) are coined by vendors. ...
...And 22 more matches
NSS Sample Code sample6
nss sample code 6: persistent symmetric
keys in nss database /* example code to illustrate generation of a secret symmetric
key ring * that persists in the nss database. the symmetric
keys can then be used * without ever exposing them in the clear. * * to encrypt, you need the id of the
key to use. * to decrypt, you need the ciphertext and the id of the
key that was used * to encrypt * * before running this example, create the nss database * certutil -n -d . * (enter "test" when prompted for password) */ #include "nss.h" #include "pk11pub.h" /* the
key id can be any sequence of bytes. this example happens to use an * integer */ void gen
key(int id); /* this callback is responsible for returning the password to the nss *
key database. for example purposes, this fun...
...is function should obtain the password using secure means * such as prompting an operator, or retrieving it over a secure communication * channel */ char *passwdcb(pk11slotinfo *info, prbool retry, void *arg); int main(int argc, char **argv) { secstatus rv; /* initialize nss */ pk11_setpasswordfunc(passwdcb); /* the nss db must be initialized read-write since we'll be creating *
keys in it. once
keys are generated, it can be opened without read-write * subsequently (nss_init). */ rv = nss_initreadwrite("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_geterror()); exit(1); } /* generate a
key with id 1. should succeed on first run on a fresh db, * should fail on successive runs because
key with th...
...ted, it can be opened without read-write * subsequently (nss_init). */ rv = nss_initreadwrite("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_geterror()); exit(1); } /* generate a
key with id 1. should succeed on first run on a fresh db, * should fail on successive runs because
key with that id already exists */ gen
key(1); /* generate a
key with id 2. ...
...And 22 more matches
NSS tools : pk12util
nss tools : pk12util name pk12util — export and import
keys and certificate to or from a pkcs #12 file and the nss database synopsis pk12util [-i p12file|-l p12file|-o p12file] [-d [sql:]directory] [-h tokenname] [-p dbprefix] [-r] [-v] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] description the pkcs #12 utility, pk12util, enables sharing certificates among any server that supports pkcs#12. the tool can import certificates and
keys from pkcs#12 files into security databases, export certificates, and list certificates and
keys. options and arguments options -i p12file import
keys and certificates from a pkcs#12 file into a security database. ...
... description the pkcs #12 utility, pk12util, enables sharing certificates among any server that supports pkcs#12. the tool can import certificates and
keys from pkcs#12 files into security databases, export certificates, and list certificates and
keys. options and arguments options -i p12file import
keys and certificates from a pkcs#12 file into a security database. -l p12file list the
keys and certificates in pkcs#12 file. -o p12file export
keys and certificates from the security database to a pkcs#12 file. arguments -c
keycipher specify the
key encryption algorithm. -c certcipher specify the
key cert (overall package) encryption algorithm. -d [sql:]directory specify the database directory into which to import to or export from certificates and
keys. pk12util support...
...tificates from the security database to a pkcs#12 file. arguments -c
keycipher specify the
key encryption algorithm. -c certcipher specify the
key cert (overall package) encryption algorithm. -d [sql:]directory specify the database directory into which to import to or export from certificates and
keys. pk12util supports two types of databases: the legacy security databases (cert8.db,
key3.db, and secmod.db) and new sqlite databases (cert9.db,
key4.db, and pkcs11.txt). if the prefix sql: is not used, then the tool assumes that the given databases are in the old format. -h tokenname specify the name of the token to import into or export from. ...
...And 22 more matches
NSS Tools certutil
using the certificate database tool the certificate database tool is a command-line utility that can create and modify the netscape communicator cert8.db and
key3.db database files. it can also list, generate, modify, or delete certificates within the cert8.db file and create or change the password, generate new public and private
key pairs, display the contents of the
key database, or delete
key pairs within the
key3.db file. starting from nss 3.35, the database format was upgraded to support sqlite as described in this document. it means that cert9.db and
key4.db files may be targeted instead. the
key and certificate management process generally begins with creating
keys in the
key database, then generating and managing certificates in the certificate database. this document dis...
...for information security module database management, see using the security module database tool. availability see the release notes for the platforms this tool is available on. ...
...y take zero or more arguments. to see a usage string, issue the command without options, or with the -h option. options and arguments options specify an action and are uppercase. option arguments modify an action and are lowercase. certificate database tool command options and their arguments are defined as follows: options -n create new certificate and
key databases. -s create an individual certificate and add it to a certificate database. -r create a certificate-request file that can be submitted to a certificate authority (ca) for processing into a finished certificate. output defaults to standard out unless you use -ooutput-file argument. use the -a argument to specify ascii output. ...
...And 22 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
this is used by extensions to open a separate window. window.opendialog('another.xul', '_blank','chrome,all,dialog=no'); listing 1: opening a window without the firefox gui xul as an xml application listing 2 shows an example of a gui definition file marked up in xul (a "xul document"). the root element in xul is generally the "window" element. the namespace uri is : http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul if the character encoding is utf-8, both the encoding specifier and the xml declaration can be omitted. but for the samples in this chapter, please include them. because a xul document is also an xml document, it can contain xhtml, svg, mathml, and other elements; if you use external entity references, the xml document's contents are modularized; combined wi...
...ent, it can contain xhtml, svg, mathml, and other elements; if you use external entity references, the xml document's contents are modularized; combined with other xml-related technologies, such as dom, xlink, or xslt, you can use it for a number of different applications. <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <window xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here. --> </window> listing 2: general structure of a xul document even with the internationalization of firefox and extensions, this kind of xml function is being used. reading in style sheets xul uses css to specify the appearance of its elements. again, since xul is a type of xml, stylesheets are read in using the xml-stylesheet proc...
... typical types of root element: the window, page, and dialog elements. root elements use the windowtype attribute as an arbitrary identifier for the type of window. for example, firefox uses the windowtype navigator:browser for its browser window and browser:preferences for its options dialog. using methods we will cover in chapter 4, we will see how windows can be acquired using these values as
keys. a window's dimensions and location on screen can be specified using the attributes width, height, screenx, and screeny (all using pixels as units). with the previously discussed persist attribute, you can easily store a window's size and location. firefox uses this method to store its own window sizes and locations as well. general root elements window the window element that has appeared i...
...And 21 more matches
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
this document presents the windows registry
keys plugin installers can parse to determine where to install a given plugin (for mozilla browsers) on windows. since the prospect of embedded gecko browsers raises the scenario of more than one gecko-based browser that a netscape-style plugin can work with, it becomes important to let plugin developers know how to discover these browsers on a windows machine. this information applies to mozilla based browsers that pull the mozilla codebase after the mozilla 0.9.1 milestone release. none of the registry
keys mentioned here are written by browsers before the mozilla 0.9.1 timeframe. ...
...rk with, it becomes important to let plugin developers know how to discover these browsers on a windows machine. this information applies to mozilla based browsers that pull the mozilla codebase after the mozilla 0.9.1 milestone release. none of the registry
keys mentioned here are written by browsers before the mozilla 0.9.1 timeframe. for example, netscape 6.0 and 6.01 do not write any of these
keys into the registry, and thus these
keys are not available for plugin vendors to parse for these two browsers. ...
...at pull the mozilla codebase after the mozilla 0.9.1 milestone release. none of the registry
keys mentioned here are written by browsers before the mozilla 0.9.1 timeframe. for example, netscape 6.0 and 6.01 do not write any of these
keys into the registry, and thus these
keys are not available for plugin vendors to parse for these two browsers. netscape 6.1 and onwards, however, will write these
keys, and so creating a plugin installer that puts the shared object (dll) in the right place becomes much easier, since the relevant meta-information is present in the win32 system registry. these
keys are written by the installer of mozilla browsers -- the netscape 6.2 installer, for example, writes these
keys to the registry, and so does the mozilla installer (for versions after mozilla 0.9.1). ot...
...And 21 more matches
NSS tools : modutil
ine utility for managing pkcs #11 module information both within secmod.db files and within hardware tokens. modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations. this tool can also create certificate,
key, and module security database files. the tasks associated with security module database management are part of a process that typically also involves managing
key databases and certificate databases. options running modutil always requires one (and only one) option to specify the type of module operation. each option may take arguments, anywhere from none to multiple arguments. options ...
... initialized, this option initializes the password. use this option with the -pwfile and -newpwfile arguments. a password is equivalent to a personal identification number (pin). -chkfips verify whether the module is in the given fips mode. true means to verify that the module is in fips mode, while false means to verify that the module is not in fips mode. -create create new certificate,
key, and module databases. use the -dbdir directory argument to specify a directory. if any of these databases already exist in a specified directory, modutil returns an error message. -default modulename specify the security mechanisms for which the named module will be a default provider. the security mechanisms are specified with the -mechanisms argument. -delete modulename delete the nam...
...le specific ciphers in a module that is being added to the database. the cipher-enable-list is a colon-delimited list of cipher names. enclose this list in quotation marks if it contains spaces. -dbdir [sql:]directory specify the database directory in which to access or create security module database files. ...
...And 21 more matches
NSS tools : modutil
for managing pkcs #11 module information both within secmod.db files and within hardware tokens. modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations. this tool can also create certificate,
key, and module security database files. the tasks associated with security module database management are part of a process that typically also involves managing
key databases and certificate databases. options running modutil always requires one (and only one) option to specify the type of module operation. each option may take arguments, anywhere from none to multiple argum...
... with the -pwfile and -newpwfile arguments. a password is equivalent to a personal identification number (pin). -chkfips verify whether the module is in the given fips mode. true means to verify that the module is in fips mode, while false means to verify that the module is not in fips mode. -create create new certificate,
key, and module databases. use the -dbdir directory argument to specify a directory. if any of these databases already exist in a specified directory, modutil returns an error message. -default modulename specify the security mechanisms for which the named module will be a default provider. the security mechanisms are specified with the ...
...ase. the cipher-enable-list is a colon-delimited list of cipher names. enclose this list in quotation marks if it contains spaces. -dbdir [sql:]directory specify the database directory in which to access or create security module database files. modutil supports two types of databases: the legacy security databases (cert8.db,
key3.db, and secmod.db) and new sqlite databases (cert9.db,
key4.db, and pkcs11.txt). if the prefix sql: is not used, then the tool assumes that the given databases are in the old format. --dbprefix prefix specify the prefix used on the database files, such as my_ for my_cert8.db. this option is provided as a special case. changing ...
...And 21 more matches
NSS tools : signtool
name signtool — digitally sign objects and files. synopsis signtool [-k
keyname] -h -h -l -l -m -v -w -g nickname -s size -b basename [[-c compression level] ] [[-d cert-dir] ] [[-i installer script] ] [[-m metafile] ] [[-x name] ] [[-f filename] ] [[-t|--token tokenname] ] [[-e extension] ] [[-o] ] [[-z] ] [[-x] ] [[--outfile] ] [[--verbose value] ] [[--norecurse] ] [[--leavearc] ] [[-j directory] ] [[-z jarfile] ] [[-o] ] [[-p password] ] [directory-tree] [archive] description the signing tool, signtool, creates digital signatures and uses a java archive (jar) file to associate the signatures with files in a directory. electronic software distribution over any network involves potential security problems. to help address some of these prob...
...y, if you are a network administrator, you should make sure, before signing any code, that it comes from a reliable source and will run correctly with the software installed on the machines to which you are distributing it. before you can use netscape signing tool to sign files, you must have an object-signing certificate, which is a special certificate whose associated private
key is used to create digital signatures. for testing purposes only, you can create an object-signing certificate with netscape signing tool 1.3. when testing is finished and you are ready to disitribute your software, you should obtain an object-signing certificate from one of two kinds of sources: * an independent certificate authority (ca) that authenticates your identity and ch...
...must download the the ca certificate in addition to obtaining your own signing certificate. ca certificates for several certificate authorities are preinstalled in the communicator certificate database. when you receive an object-signing certificate for your own use, it is automatically installed in your copy of the communicator client software. communicator supports the public-
key cryptography standard known as pkcs #12, which governs
key portability. you can, for example, move an object-signing certificate and its associated private
key from one computer to another on a credit-card-sized device called a smart card. options -b basename specifies the base filename for the .rsa and .sf files in the meta-inf directory to conform with the j...
...And 21 more matches
Detailed XPCOM hashtable guide
this is the long version of xpcom hashtable guide. the information you're looking for is probably there. what is a hashtable? a hashtable is a data construct that stores a set of items. each item has a
key that identifies the item. items are found, added, and removed from the hashtable by using the
key. hashtables may seem like arrays, but there are important differences: array hashtable
keys: integer: arrays are always
keyed on integers, and must be contiguous. any type: almost any datatype can be used as
key, including strings, integers, xpcom interface pointers, iids, and almost anything else.
keys can be disjunct (i.e. you can store entries with
keys 1, 5, and 3000). lookup time: o(1): lookup time is a simple constant o(1): look...
...ding and removing items from a large array can be time-consuming o(1): adding and removing items from hashtables is a quick operation wasted space: none: arrays are packed structures, so there is no wasted space. some: hashtables are not packed structures; depending on the implementation, there may be significant wasted memory. ...
...ming o(1): adding and removing items from hashtables is a quick operation wasted space: none: arrays are packed structures, so there is no wasted space. some: hashtables are not packed structures; depending on the implementation, there may be significant wasted memory. in their implementation, hashtables take the
key and apply a mathematical hash function to randomize the
key and then use the hash to find the location in the hashtable. ...
...And 21 more matches
The First Install Problem - Archive of obsolete content
's plugins folder will probably suffice as an install location in which browsers installed later can find their plugins. on linux, a per-profile installation of plugins seems unavoidable. this document presents windows solutions for plugin vendors. the solution suggests that plugin vendors ought to leave dlls on a windows desktop whether or not a netscape gecko browser is detected, and then write
keys in the windows registry giving future netscape gecko browsers the path where the plugin resides and meta-information about how to load the plugin. this document supplements the
key parsing methodology suggested for installers. the solution is to encourage plugin vendors to write registry
keys to the win32 system registry, like the example application. this document proposes a meta-information mo...
...e path where the plugin resides and meta-information about how to load the plugin. this document supplements the
key parsing methodology suggested for installers. the solution is to encourage plugin vendors to write registry
keys to the win32 system registry, like the example application. this document proposes a meta-information model in the win32 registry similar to the one used by microsoft's h
key_classes_root\clsid\ where a new activex control (ocx) on the system presents its uuid as a registry
key (identifying the activex control) as well as information about where to find the ocx (e.g. under the inprocserver32 sub
key). for mozilla-based browsers, this system would be on a per-module basis, and instead of a uuid, we'll use a uri nomenclature that gives us the desired uniqueness. this uri...
...rmation about where to find the ocx (e.g. under the inprocserver32 sub
key). for mozilla-based browsers, this system would be on a per-module basis, and instead of a uuid, we'll use a uri nomenclature that gives us the desired uniqueness. this uri nomenclature is called a plugin identifier (plid) and is described on a separate page. the following write-up describes how a plugin installer can write
keys to the win32 system registry to enable gecko-based browsers to discover the plugin at runtime. write a
key under h
key_local_machine\software\mozillaplugins\ which is a vendor-determined plid. if the h
key_local_machine\software\mozillaplugins
key doesn't exist, create it, and write the vendor-determined plid for each module that the vendor wishes to install. example: a piece of software called...
...And 20 more matches
Index
created in the first part of the tutorial (see weblock1.cpp in the previous chapter) and uses xpcom tools that make coding a lot easier and more efficient. it also introduces a basic string type that is used with many of the apis in both xpcom and gecko. 113 detailed xpcom hashtable guide guide, xpcom a hashtable is a data construct that stores a set of items. each item has a
key that identifies the item. items are found, added, and removed from the hashtable by using the
key. hashtables may seem like arrays, but there are important differences: 114 how to build an xpcom component in javascript add-ons, extensions, javascript, tutorial, xpcom if you are looking for add-on sdk solution for xpcom javascript components then check out platform/xpcom modul...
... a numeric, zero-based index. 121 xpcom changes in gecko 2.0 gecko 2.0, xpcom several changes that affect xpcom component compatibility are taking place in gecko 2. this article details those changes, and provides suggestions for how to update your code. 122 xpcom hashtable guide a hashtable is a data construct that stores a set of items. each item has a
key that identifies the item. items are found, added, and removed from the hashtable by using the
key. hashtables may seem like arrays, but there are important differences: 123 mozilla::services namespace developing mozilla, xpcom the services c++ namespace offers an easy and efficient alternative for obtaining a service as compared to the indirect xpcom approach: getservice(), c...
...he native gui beyond the methods available either in the msaa iaccessible interface or in the set of iaccessible2 interfaces (other than this iaccessibleaction interface) should support the iaccessibleaction interface in order to provide assistive technology access to all the actions that can be performed by the object. each action can be performed or queried for a name, description or associated
key bindings. actions are needed more for ats that assist the mobility impaired, such as on-screen
keyboards and voice command software. by providing actions directly, the at can present them to the user without the user having to perform the extra steps to navigate a context menu. the first action should be equivalent to the msaa default action. if there is only one action, iaccessibleaction should ...
...And 20 more matches
IDBObjectStoreSync - Web APIs
ginally intended for use only with web workers, and was eventually removed from the spec because its need was questionable. it may however be reintroduced in the future if there is enough demand from web developers. the idbobjectstoresync interface of the indexeddb api provides synchronous access to an object store of a database. ...
...may however be reintroduced in the future if there is enough demand from web developers. the idbobjectstoresync interface of the indexeddb api provides synchronous access to an object store of a database. ...
...mand from web developers. the idbobjectstoresync interface of the indexeddb api provides synchronous access to an object store of a database. ...
...And 20 more matches
PKCS11 Implement
keninfo only on startup or when it loads a new module. if 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...
...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 device only if it needs to generate a
key or needs to set the user pin. the nss calls c_initpin to initialize the device and set 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 ...
...ized 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_getmechanismlist the nss calls c_getmechanismlist fairly frequently to identify the mechanisms supported by a toke...
...And 19 more matches
JSAPI User Guide
this document explains how to embed spidermon
key, the mozilla javascript engine, in your c++ program. javascript is widely used for client-side scripts that run in the browser. but mozilla's javascript engine is a library that can be linked into any c++ program, not just a browser. many applications can benefit from scripting. these programs can execute javascript code from c++ using the spidermon
key api. note: the foss wiki page contains a few links to other libraries and programs that can make life easier when using spidermon
key and jsapi. what spidermon
key does the javascript engine compiles and executes scripts containing javascript statements and functions. the engine handles memory allocation for the objects needed to execute scripts, and it cleans up—garbage collects—objects i...
...tements and functions. the engine handles memory allocation for the objects needed to execute scripts, and it cleans up—garbage collects—objects it no longer needs. the word javascript may bring to mind features such as event handlers (like onclick), dom objects, window.open, and xmlhttprequest. but in mozilla, all of these features are actually provided by other components, not the spidermon
key engine itself. spidermon
key provides a few core javascript data types—numbers, strings, arrays, objects, and so on—and a few methods, such as array.push. it also makes it easy for each application to expose some of its own objects and functions to javascript code. browsers expose dom objects. your application will expose objects that are relevant for the kind of scripts you want to write. it ...
...ew methods, such as array.push. it also makes it easy for each application to expose some of its own objects and functions to javascript code. browsers expose dom objects. your application will expose objects that are relevant for the kind of scripts you want to write. it is up to the application developer to decide what objects and methods are exposed to scripts. hello world using the spidermon
key library to build spidermon
key from source, see spidermon
key build documentation. some systems (such as debian) provide spidermon
key as a prebuilt package. build it from source instead. your program will be easier to debug. c++ code accesses spidermon
key via the jsapi, by including the header "jsapi.h". an overview of jsapi functionality follows. for more details, see the jsapi reference. the ...
...And 19 more matches
HTML documentation index - HTML: Hypertext Markup Language
month-year, week-year certain html elements use date and/or time values. the formats of the strings that specify these values are described in this article. 7 global attributes attribute, html, reference, web global attributes are attributes common to all html elements; they can be used on all elements, though they may have no effect on some elements. 8 access
key global attributes, html, reference, access
key the access
key global attribute provides a hint for generating a
keyboard shortcut for the current element. the attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the
keyboard). 9 autocapitalize autocapitalize, global attributes, html, reference ...
...element. note that it is recommended for styles to be defined in a separate file or files. this attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes. 31 tabindex global attributes, html, reference the tabindex global attribute indicates that its element can be focused, and where it participates in sequential
keyboard navigation (usually with the tab
key, hence the name). 32 title global attributes, html, reference, title the title global attribute contains text representing advisory information related to the element it belongs to. 33 translate experimental, global attributes, html, reference the translate global attribute is an enumerated attribute that is used ...
...on related to the element it belongs to. 33 translate experimental, global attributes, html, reference the translate global attribute is an enumerated attribute that is used to specify whether an element's translateable attribute values and its text node children should be translated when the page is localized, or whether to leave them unchanged. 34 x-ms-accelerator
key attribute, html, html:microsoft extensions, non-standard, reference, x-ms-accelerator
key the x-ms-accelerator
key attribute accessibly declares that an accelerator
key has been assigned to an element: the element is activated via javascript when the
key(s) are pressed on a
keyboard. 35 x-ms-format-detection attribute, html, html:microsoft extensions, non-standard, referenc...
...And 19 more matches
The Essentials of an Extension - Archive of obsolete content
64f-9b0e-13a3a9e97384}</em:id> <em:minversion>4.0</em:minversion> <em:maxversion>10.*</em:maxversion> </description> </em:targetapplication> this node specifies the target application and target versions for the extension, specifically firefox, from version 4 up to version 10. the uuid is firefox's unique id. other mozilla and mozilla-based applications such as thunderbird and seamon
key have their own. you can have an extension that works on multiple applications and versions. for example, if you create a firefox extension, it would normally take little effort to port it to seamon
key, which has very similar features and ui. the min and max version specify the version range in which the extension can be installed. here's more about the version format. if the application or versi...
...n the main browser window, browser.xul. you can declare overlays for any window or dialog in firefox, but overlaying the main browser window is the most common case by far. now let's look at the contents of our xul file. we'll skip the first few lines because they relate to skin and locale, and we'll cover them later. <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> the root element in the file is an overlay. other xul documents use the window or dialog tag. the element has a unique id, which you should have on most elements in your xul. the second attribute is the namespace, which is something you should always define in your xul root element. it says that this node and all child nodes are xul. you only need to change...
...ab characters, with the exception of makefiles, which will be covered later on. most of our coding standards are based on mozilla's or other known and used standards. ...
...And 18 more matches
JavaScript crypto - Archive of obsolete content
being dropped. avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <
keygen> or the future web crypto api instead. using the mozilla crypto object from javascript mozilla defines a special javascript object to allow web pages access to certain cryptographic-related services. these services are a balance between the functionality web pages need and the requirement to protect users from malicious web sites. most of these services are available via the dom window obje...
...rtcardchange, false); document.removeeventlistener("smartcard-remove", onsmartcardchange, false); } document.body.onload = register; document.body.onunload = deregister; </script> with the above example, your web site will automatically reload anytime a smartcard is inserted or removed. this allows the page to automatically login and logout based on the presence of the smartcard. generating
keys and issuing user certificates there are several crypto object methods used in generating
keys for certificates: generatecrmfrequest(), importusercertificates(). the generatecrmfrequest() function generates a
key and creates a crmf request object. this object can be passed to a ca using a webform. the importusercertificates() function loads certificates into the nss database or smartcard if th...
...er certificates there are several crypto object methods used in generating
keys for certificates: generatecrmfrequest(), importusercertificates(). the generatecrmfrequest() function generates a
key and creates a crmf request object. this object can be passed to a ca using a webform. the importusercertificates() function loads certificates into the nss database or smartcard if the corresponding
key is found there. the popchallengeresponse() function is not implemented. ...
...And 18 more matches
NSS_3.12_release_notes.html
we missed the deadline to enable that feature in firefox 3. distribution information the cvs tag for the nss 3.12 release i...
...we missed the deadline to enable that feature in firefox 3. distribution information the cvs tag for the nss 3.12 release is nss_3_12_rtm. nss 3.12 requires nspr 4.7.1. see the documentation section for the build instructions. ...
...pped with nss3.12: utilrename.h new functions in the nss shared library: cert_checknamespace (see cert.h) cert_encodecertpoliciesextension (see cert.h) cert_encodeinfoaccessextension (see cert.h) cert_encodeinhibitanyextension (see cert.h) cert_encodenoticereference (see cert.h) cert_encodepolicyconstraintsextension (see cert.h) cert_encodepolicymappingextension (see cert.h) cert_encodesubject
keyid (see certdb/cert.h) cert_encodeusernotice (see cert.h) cert_findcrlentryreasonexten (see cert.h) cert_findcrlnumberexten (see cert.h) cert_findnameconstraintsexten (see cert.h) cert_getclassicocspdisabledpolicy (see cert.h) cert_getclassicocspenabledhardfailurepolicy (see cert.h) cert_getclassicocspenabledsoftfailurepolicy (see cert.h) cert_getpkixverifynistrevocationpolicy (see cert.h) cert_ge...
...And 18 more matches
XPCOM hashtable guide
this is the simplified version of the detailed xpcom hashtable guide. everything you need to know is probably on this page. also note that mfbt/hashtable.h now exists. it is a lot faster than the xpcom hashtables due to more inlining and templating, and the api is arguably better. what is a hashtable? a hashtable is a data construct that stores a set of items. ...
...you need to know is probably on this page. also note that mfbt/hashtable.h now exists. it is a lot faster than the xpcom hashtables due to more inlining and templating, and the api is arguably better. what is a hashtable? a hashtable is a data construct that stores a set of items. each item has a
key that identifies the item. items are found, added, and removed from the hashtable by using the
key. ...
...com hashtables due to more inlining and templating, and the api is arguably better. what is a hashtable? a hashtable is a data construct that stores a set of items. each item has a
key that identifies the item. items are found, added, and removed from the hashtable by using the
key. hashtables may seem like arrays, but there are important differences: array hashtable
keys: integer: arrays are always
keyed on integers, and must be contiguous. any type: almost any datatype can be used as
key, including strings, integers, xpcom interface pointers, iids, and almost anything else.
keys can be disjunct (i.e. you can store entries with
keys 1, 5, and 3000). lookup time: o(1): lookup time is a simple constant o(1): lookup time is mostly-constant, but...
...And 18 more matches
ARIA Test Cases - Accessibility
ed technically) pass expected behaviour met fail expected behaviour notmet 1. 2. reference to link example note regarding dojo/dijit test files the main purpose of dojo's dijit test files are for dojo developers to exercise and debug the code. as such, they are used to test a variety of features, such as styling, behavior, mouse, and
keyboard interactions, to name few. these test files are not specifically for testing aria. still, dojo's widgets implement aria, and the noted test files could be used as an "aria test file". new tests for internet explorer 8 rc1 on this msdn page the aria state/role mapping in ie8 to msaa roles can be directly checked. also, as a clever feature for at testing, the firing of events (like event_obj...
... 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 (access
key) should be spoken. for example, "options, button, alt+shift+t" should be spoken if there is an options button in the alert with alt+shift+t as an access
key. markup used: role="alert" notes: results: at firefox ie opera safari jaws 9 passed fail n/a n/a jaws 10 passed fail - - voiceover (leo...
...description of the button should be read after the button's label and role are read by the screen reader. regression testers should test both tabbing forward and back, to make sure that the groupbox description and button description are both read when the button is the first item focused in the groupbox. (al) alternatively, description are not read automatically but may be accessible from a hot
key. however, if the screen reader does not at least indicate that the description exists, users are likely to miss important information. markup used: role="description" and aria-describedby notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail ...
...And 18 more matches
Encryption and Decryption - Archive of obsolete content
ligible again. a cryptographic algorithm, also called a cipher, is a mathematical function used for encryption or decryption. in most cases, two related functions are employed, one for encryption and the other for decryption. ...
...ated functions are employed, one for encryption and the other for decryption. with most modern cryptography, the ability to keep encrypted information secret is based not on the cryptographic algorithm, which is widely known, but on a number called a
key that must be used with the algorithm to produce an encrypted result or to decrypt previously encrypted information. decryption with the correct
key is simple. decryption without the correct
key is very difficult, and in some cases impossible for all practical purposes. ...
...n the cryptographic algorithm, which is widely known, but on a number called a
key that must be used with the algorithm to produce an encrypted result or to decrypt previously encrypted information. decryption with the correct
key is simple. decryption without the correct
key is very difficult, and in some cases impossible for all practical purposes. the sections that follow introduce the use of
keys for encryption and decryption. symmetric-
key encryption public-
key encryption
key length and encryption strength symmetric-
key encryption with symmetric-
key encryption, the encryption
key can be calculated from the decryption
key and vice versa. with most symmetric algorithms, the same
key is used for both encryption and decryption, as shown in figure 1. implementations of symmetric-k...
...And 17 more matches
<color> - CSS: Cascading Style Sheets
the <color> css data type represents a color in the srgb color space. a <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background. a <color> can be defined in any of the following ways: using a
keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <color> data type in detail. to learn more about using color in html, see applying color to html elements using css. syntax the <color> data type is specified using one of the options listed below. note: although <color> values are precisely defined, their...
... in html, see applying color to html elements using css. syntax the <color> data type is specified using one of the options listed below. note: although <color> values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. this is because most devices are not calibrated, and some browsers do not support output devices' color profiles. ...
...plying color to html elements using css. syntax the <color> data type is specified using one of the options listed below. note: although <color> values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. this is because most devices are not calibrated, and some browsers do not support output devices' color profiles. ...
...And 17 more matches
XUL accessibility guidelines - Archive of obsolete content
pple accessibility. lars (linux accessibility resource site). portal for general linux accessibility. microsoft accessibility. portal for microsoft accessibility. accessibility - mdc. accessibility hub on the mozilla developer center. mozilla.support.accessibility. mozilla accessibility newsgroup. #accessibility. accessibility channel on mozilla's irc server. guidelines
keyboard access
keyboard access is important to users who can't use a mouse. many screen reader users and those with physical disabilities rely on the
keyboard as their primary input tool. these users require easy, predictable, and well-documented
keyboard control. tab order provide a logical tab order and ensure that users can navigate all content using a
keyboard. by default, the tab order is de...
...ing direction of the language. ensure that tab order is logical and all interactive elements can be accessed simply without the use of a mouse. you should be able to perform all functionality either directly in the application or through menu items or the context menu. trees provide alternative functionality for inaccessible operations. the column picker and column headers in xul trees are not
keyboard accessible, consistent with the standard tree behavior on most contemporary operating systems. it is therefore necessary to provide a
keyboard accessible alternative for accessing this functionality. the firefox "bookmarks manager" provides an example of how to make trees more accessible. the bookmark manager allows users to sort bookmarks by a particular column of information and choose ...
...ive for accessing this functionality. the firefox "bookmarks manager" provides an example of how to make trees more accessible. the bookmark manager allows users to sort bookmarks by a particular column of information and choose which columns to display. because column headers and the column picker, in the upper right hand corner of the tree, can not receive focus, they are not operable with a
keyboard. in the bookmark manager this functionality is available under the view menu which is accessible to a
keyboard user. toolbarbuttons by default, toolbar buttons cannot receive focus with a
keyboard. the recommended way of fixing this is that all functionality associated with a toolbar be duplicated elsewhere in the application, such as in a menu item or context menu. in cases where duplicat...
...And 16 more matches
Dict.jsm
introduced in firefox 5, this is now obsolete and has been removed in firefox 40: use es2015 map. the dict.jsm javascript code module offers routines for managing dictionaries of
key/value pairs. ...
...module offers routines for managing dictionaries of
key/value pairs. to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/dict.jsm"); creating a dictionary you can create a new, empty dictionary by simply calling the dict() constructor: var newdict = new dict(); if you wish, you may also pass in an object literal of
key/value pairs with which to initialize the dictionary: var someobj = {}; var newdict = new dict({
key1: "foo",
key2: someobj}); note that values may be any javascript object type. note: you can actually specify non-strings as
keys; these are converted to strings before being used, so they're documented here as if they were a string parameter. in firefox 19 and above, you may also pass a json st...
... var someobj = {}; var newdict = new dict({
key1: "foo",
key2: someobj}); note that values may be any javascript object type. note: you can actually specify non-strings as
keys; these are converted to strings before being used, so they're documented here as if they were a string parameter. in firefox 19 and above, you may also pass a json string to initialize the dictionary: var somejson = '{
key1: "foo",
key2: {}}'; var newdict = new dict(somejson); note: any string you pass will be assumed to be json. ...
...And 16 more matches
Python binding for NSS
the nss/nspr c function returns. this allows other python threads to execute during the time a nss/nspr function is progress in another thread. also, any "global" values which are set in python-nss are actually thread-local. examples of this are the various callbacks which can be set and their parameters. thus each thread gets it own set of callbacks. many methods/functions provide sane default (
keyword) parameters freeing the python programmer from having to specify all parameters yet allowing them to be overriden when necessary. error codes are never returned from methods/functions. python-nss follows the existing python exception mechanism. any error reported by nss/nspr is converted into a python exception and raised. the exact error code, error description, and often contextual error i...
...eleases/pynss_release_0_17_0/src/ change log the primary enhancement in this version is adding support for pbkdf2 the following module functions were added: nss.create_pbev2_algorithm_id the following class methods were added: nss.algorithmid.get_pbe_crypto_mechanism nss.algorithmid.get_pbe_iv nss.pk11slot.pbe_
key_gen nss.pk11slot.format_lines nss.pk11slot.format nss.pk11sym
key.format_lines nss.pk11sym
key.format nss.secitem.to_base64 nss.secitem.format_lines nss.secitem.format the following files were added: doc/examples/pbkdf2_example.py the secitem constructor added 'ascii' parameter to permit initializatio...
...ificate.signing_trust_flags sslciphersuiteinfo.cipher_suite sslciphersuiteinfo.cipher_suite_name sslciphersuiteinfo.auth_algorithm sslciphersuiteinfo.auth_algorithm_name sslciphersuiteinfo.kea_type sslciphersuiteinfo.kea_type_name sslciphersuiteinfo.symmetric_cipher sslciphersuiteinfo.symmetric_cipher_name sslciphersuiteinfo.symmetric_
key_bits sslciphersuiteinfo.symmetric_
key_space sslciphersuiteinfo.effective_
key_bits sslciphersuiteinfo.mac_algorithm sslciphersuiteinfo.mac_algorithm_name sslciphersuiteinfo.mac_bits sslciphersuiteinfo.is_fips sslciphersuiteinfo.is_exportable sslciphersuiteinfo.is_nonstandard sslchannelinfo.protocol_version sslchannelinfo.protoco...
...And 16 more matches
NSS Tools modutil
module database tool is a command-line utility for managing pkcs #11 module information within secmod.db files or within hardware tokens. you can use the tool to add and delete pkcs #11 modules, change passwords, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations. ...
...#11 modules, change passwords, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations. this tool can also create
key3.db, cert8.db, and secmod.db security database files. the tasks associated with security module database management are part of a process that typically also involves managing
key databases (
key3.db files) and certificate databases (cert8.db files). ...
...isable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations. this tool can also create
key3.db, cert8.db, and secmod.db security database files. the tasks associated with security module database management are part of a process that typically also involves managing
key databases (
key3.db files) and certificate databases (cert8.db files). the
key, certificate, and pkcs #11 module management process generally begins with creating the
keys and
key database necessary to generate and manage certificates and the certificate database. this document discusses security module database management. for information on certificate database and
key database management, see using the certificate database tool. availability this tool is known to ...
...And 16 more matches
Hacking Tips
it is separated in 2 parts, one section related to debugging and another section related to drafting optimizations. many of these tips only apply to debug builds of the js shell; they will not function in a release build. debugging tips getting help (from js shell) use the help function to get the list of all primitive functions of the shell with their description. note that some functions have been moved under an 'os' object, and help(os) will give brief help on just the members of that "namespace". ...
... a script. some variants of this function such as js::dumpscript etc are convenient for debugging. printing the js stack (from gdb) in jsobj.cpp, a function named js::dumpbacktrace prints a backtrace à la gdb for the js stack. ...
...me class) or (nil) if compiled with ionmon
key, the file and line number of the call location and under parentheses, the jsscript pointer and the jsbytecode pointer (pc) executed. ...
...And 16 more matches
Parser API
recent builds of the standalone spidermon
key shell include a reflection of the spidermon
key parser, made available as a javascript api. this makes it easier to write tools in javascript that manipulate javascript source programs, such as syntax highlighters, static analyses, translators, compilers, obfuscators, etc. note: this page describes spidermon
key-specific behavior and might be incomplete. visit estree spec for a community ast standard that includes latest ecmascript features and is backward-compatible with spidermon
key format. example: > var expr = reflect.parse("obj.foo + 42").body[0].expression > expr.left.property ({loc:null, type:"identifier", name:"foo"}) > expr.right ({loc:{source:null, start:{line:1, column:10}, end:{line:1, column:12}}, type:"literal", value:42}) it ...
... properties of the reflect object the reflect object currently consists of a single method. reflect.parse(src[, options]) coerces src to a string and parses the result as a javascript program. by default, the parsing returns a program object (see below) representing the parsed abst...
...n <: node { id: identifier | null; params: [ pattern ]; defaults: [ expression ]; rest: identifier | null; body: blockstatement | expression; generator: boolean; expression: boolean; } a function declaration or expression. the body of the function may be a block statement, or in the case of an expression closure, an expression. note: expression closures are spidermon
key-specific. if the generator flag is true, the function is a generator function, i.e., contains a yield expression in its body (other than in a nested function). note: generators are spidermon
key-specific. if the expression flag is true, the function is an expression closure and the body field is an expression. statements interface statement <: node { } any statement. interface emptystateme...
...And 16 more matches
imgIContainer
rendering engine. it provides access to frames as thebes surfaces and lets users extract subregions as other imgicontainer objects. it also provides methods for drawing images onto thebes contexts. internally, this interface also manages animation of images. 66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11) implemented by: ?????????????????????????????????????. to create an instance, use: implemented by: ????????????????????????????????????? as a service: var imgicontainer = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.imgicontainer); method overview void addrestoredata([array, size_is(acount), const] in ch...
...isposerestoreprevious 3 restore the previous(composited) frame. obsolete since gecko 2.0 kblendsource 0 all color components of the frame, including alpha, const long kblendover = 1; // the frame should be composited onto the output buffer. obsolete since gecko 2.0 methods native code only!addrestoredata obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void addrestoredata( [array, size_is(acount), const] in char data, in unsigned long acount ); parameters data missing description acount missing description exceptions thrown missing exception missing descri...
...ince it could be removed at any time. try to avoid using it. void addrestoredata( [array, size_is(acount), const] in char data, in unsigned long acount ); parameters data missing description acount missing description exceptions thrown missing exception missing description native code only!appendframe obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. adds to the end of the list of frames. void appendframe( in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long i...
...And 16 more matches
nsIINIParser
xpcom/ds/nsiiniparser.idlscriptable an instance of nsiiniparser can be used to read values from an ini file. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) typically, you'll create an nsiiniparser object by calling nsiiniparserfactory.createiniparser(). also, if you need to write to an ini file, use nsiiniparserwriter. ...
...rser.idlscriptable an instance of nsiiniparser can be used to read values from an ini file. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) typically, you'll create an nsiiniparser object by calling nsiiniparserfactory.createiniparser(). also, if you need to write to an ini file, use nsiiniparserwriter. ...
...firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) typically, you'll create an nsiiniparser object by calling nsiiniparserfactory.createiniparser(). also, if you need to write to an ini file, use nsiiniparserwriter. nsiutf8stringenumerator get
keys(in autf8string asection); nsiutf8stringenumerator getsections(); autf8string getstring(in autf8string asection, in autf8string a
key); methods get
keys() returns an nsiutf8stringenumerator providing the
keys available within the specified section of the ini file. nsiutf8stringenumerator get
keys( in autf8string asection ); parameters asection the name of the section whose
keys you wish to enumerate. return value an nsiutf8stringenumerator object that can be used to access the section's
keys. getsections() retu...
...And 16 more matches
HTMLTextAreaElement - Web APIs
autocapitalize string: returns / sets the element's capitalization behavior for user input. valid values are: none, off, characters, words, sentences. autocomplete autofocus boolean: returns / sets the element's autofocus attribute, indicating that the control should have input focus when the pag...
...ight="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltextareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties access
key string: returns / sets the element's access
key attribute. autocapitalize string: returns / sets the element's capitalization behavior for user input. valid values are: none, off, characters, words, sentences. autocomplete autofocus boolean: returns / sets the element's autofocus attribute, indicating that the control should have input focus when the page loads cols unsigned long: returns / ...
...validation. false if any conditions bar it from constraint validation, including its readonly or disabled property is true. wrap string: returns / sets the wrap html attribute, indicating how the control wraps text. htmltextareaelement.labelsread only nodelist: returns a list of label elements associated with this element. the two properties tabindex and access
key are inherited from htmlelement from html5 on, but were defined on htmltextareaelement in dom level 2 html and earlier specifications. methods blur() removes focus from the control;
keystrokes will subsequently go nowhere. focus() gives focus to the control;
keystrokes will subsequently go to this element. select() selects the contents of the control. ...
...And 16 more matches
IDBIndexSync - Web APIs
b api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable. it may however be reintroduced in the future if there is enough demand from web developers. the idbindexsync interface of the indexeddb api provides synchronous access to an index in a database. ...
...and was eventually removed from the spec because its need was questionable. it may however be reintroduced in the future if there is enough demand from web developers. the idbindexsync interface of the indexeddb api provides synchronous access to an index in a database. ...
...ionable. it may however be reintroduced in the future if there is enough demand from web developers. the idbindexsync interface of the indexeddb api provides synchronous access to an index in a database. ...
...And 16 more matches
Using CSS animations - CSS: Cascading Style Sheets
the animations run well, even under moderate system load. ...
... the animations run well, even under moderate system load. ...
...ng in tabs that aren't currently visible. configuring the animation to create a css animation sequence, you style the element you want to animate with the animation property or its sub-properties. this lets you configure the timing, duration, and other details of how the animation sequence should progress. this does not configure the actual appearance of the animation, which is done using the @
keyframes at-rule as described in defining the animation sequence using
keyframes below. the sub-properties of the animation property are: animation-name specifies the name of the @
keyframes at-rule describing the animation’s
keyframes. animation-duration configures the length of time that an animation should take to complete one cycle. animation-timing-function configures the timing of th...
...And 16 more matches
SSL and TLS - Archive of obsolete content
draft this page is not complete. the secure sockets layer (ssl) and transport layer security (tls) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers. both client and server authentication occur over ssl/tls. ssl/tls uses a combination of public
key and symmetric-
key encryption. ...
... draft this page is not complete. the secure sockets layer (ssl) and transport layer security (tls) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers. both client and server authentication occur over ssl/tls. ssl/tls uses a combination of public
key and symmetric-
key encryption. ...
... this page is not complete. the secure sockets layer (ssl) and transport layer security (tls) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers. both client and server authentication occur over ssl/tls. ssl/tls uses a combination of public
key and symmetric-
key encryption. symmetric-
key encryption is much faster than public-
key encryption, but public-
key encryption provides better authentication techniques. ...
...And 15 more matches
PKCS #11 Module Specs
list of name/value pairs where the name is a slotid and the value is a space separated list of parameters related to that slotid. valid slotparams values are: slotflags - comma separated list of cipher groups which this slot is expected to be the default implementation for (case-insensitive). valid flags are: rsa - this token should be used for all rsa operations (other than private
key operations where the
key lives in another token). dsa - this token should be used for all dsa operations (other than private
key operations where the
key lives in another token). rc4 - this token should be used for all rc4 operations which are not constrained by an existing
key in another token. rc2 - this token should be used for all rc2 operations which are not constrained by an existi...
...erations where the
key lives in another token). dsa - this token should be used for all dsa operations (other than private
key operations where the
key lives in another token). rc4 - this token should be used for all rc4 operations which are not constrained by an existing
key in another token. rc2 - this token should be used for all rc2 operations which are not constrained by an existing
key in another token. des - this token should be used for all des, des2, and des3 operations which are not constrained by an existing
key in another token. dh - this token should be used for all dh operations (other than private
key operations where the
key lives in another token). ...
... sha1 - - this token should be used for all basic sha1 hashing. ...
...And 15 more matches
HTML text fundamentals - Learn web development
at is a paragraph. furthermore: users looking at a web page tend to scan quickly to find relevant content, often just reading the headings to begin with. (we usually spend a very short time on a web page.) if they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else. search engines indexing your page consider the contents of headings as important
keywords for influencing the page's search rankings. without headings, your page will perform poorly in terms of seo (search engine optimization). severely visually impaired people often don't read web pages; they listen to them instead. this is done with software called a screen reader. this software provides ways to get fast access to given text content. among the various techniques used, they pro...
...{ textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<h1>my short story</h1>\n<p>i am a statistician and my name is trish.</p>\n<p>my legs are made of cardboard and i am married to a fish.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substr...
... semantics are relied on everywhere around us—we rely on previ...
...And 14 more matches
Third-party APIs - Learn web development
the server you are connecting to handles all the complicated stuff, like displaying the correct map tiles for the area being shown, etc. note: some apis handle access to their functionality slightly differently, requiring the developer to make an http request to a specific url pattern to retrieve data. these are called restful apis — we'll show an example later on. ...
... they usually require api
keys security for browser apis tends to be handled by permission prompts, as discussed in our first article. the purpose of these is so that the user knows what is going on in the websites they visit and is less likely to fall victim to someone using an api in a malicious way. third party apis have a slightly different permissions system — they tend to use developer
keys to allow developers access to the api functionality, which is more to protect the api vendor than the user. ...
...n in the websites they visit and is less likely to fall victim to someone using an api in a malicious way. third party apis have a slightly different permissions system — they tend to use developer
keys to allow developers access to the api functionality, which is more to protect the api vendor than the user. you'll find a line similar to the following in the mapquest api example: l.mapquest.
key = 'your-api-
key-here'; this line specifies an api or developer
key to use in your application — the developer of the application must apply to get a
key, and then include it in their code to be allowed access to the api's functionality. in our example we've just provided a placeholder. note: when creating your own examples, you'll use your own api
key in place of any placeholder. other api...
...And 14 more matches
NSS Sample Code sample2
nss sample code 2: symmetric encryption /* example code to illustrate des enccryption/decryption using nss. * the example skips the details of obtaining the
key & iv to use, and * just uses a hardcoded
key & iv. * note: iv is only needed if cipher blocking chaining (cbc) mode of encryption * is used * * the recommended approach is to store and transport wrapped (encrypted) * des
keys (ivs can be in the clear). however, it is a common (and dangerous) * practice to use raw des
keys. this example shows the use of a raw
key. ...
...dcoded
key & iv. * note: iv is only needed if cipher blocking chaining (cbc) mode of encryption * is used * * the recommended approach is to store and transport wrapped (encrypted) * des
keys (ivs can be in the clear). however, it is a common (and dangerous) * practice to use raw des
keys. this example shows the use of a raw
key. ...
...v is only needed if cipher blocking chaining (cbc) mode of encryption * is used * * the recommended approach is to store and transport wrapped (encrypted) * des
keys (ivs can be in the clear). however, it is a common (and dangerous) * practice to use raw des
keys. this example shows the use of a raw
key. ...
...And 14 more matches
NSS Tools pk12util
using the pkcs #12 tool (pk12util) newsgroup: mozilla.dev.tech.crypto the pkcs #12 utility makes sharing of certificates among enterprise server 3.x and any server (netscape products or non-netscape products) that supports pkcs#12 possible. the tool allows you to import certificates and
keys from pkcs #12 files into nss or export them and also list certificates and
keys in such files. availability see the release notes for the platforms this tool is available on. ...
...non-netscape products) that supports pkcs#12 possible. the tool allows you to import certificates and
keys from pkcs #12 files into nss or export them and also list certificates and
keys in such files. availability see the release notes for the platforms this tool is available on. ...
...s pkcs#12 possible. the tool allows you to import certificates and
keys from pkcs #12 files into nss or export them and also list certificates and
keys in such files. availability see the release notes for the platforms this tool is available on. ...
...And 14 more matches
Bytecode Descriptions
tors: evaluation. format: jof_ic instanceof stack: value, target ⇒ (value instanceof target) the instanceof operator. this throws a typeerror if target is not an object. it calls target[symbol.hasinstance](value) if the method exists. on success, the result is always a boolean value. format: jof_ic in stack: id, obj ⇒ (id in obj) the in operator. push true if obj has a property with the
key id. otherwise push false. this throws a typeerror if obj is not an object. this can fire proxy hooks and can throw. on success, the result is always a boolean value. format: jof_ic lsh, rsh, ursh stack: lval, rval ⇒ (lval op rval) bitwise shift operators (<<, >>, >>>). pop two values, convert them to integers, perform a bitwise shift, and push the result. conversion can call .tostring()/.val...
...t: jof_ic pow stack: lval, rval ⇒ (lval ** rval) the exponentiation operator (**). pop two values, convert them to numeric values, do exponentiation, and push the result. the top value is the exponent. the conversion can call .tostring()/.valueof() methods and can throw. this throws a rangeerror if both values are bigints and the exponent is negative. format: jof_ic conversions toproperty
key stack: propertynamevalue ⇒ property
key convert a value to a property
key. implements: toproperty
key, except that if the result would be the string representation of some integer in the range 0..2^31, we push the corresponding int32 value instead. this is because the spec insists that array indices are strings, whereas for us they are integers. this is used for code like ++obj[index], which mus...
...the conversion can call .tostring()/.valueof() methods and can throw. format: jof_ic tonumeric, tostring stack: val ⇒ tonumeric(val) convert a value to a numeric value (a number or bigint). implements: tonumeric(val). note: this is used to implement ++ and --. ...
...And 14 more matches
Tracing JIT
when the monitor determines that the interpreter has entered a region of code that would benefit from native compilation, the monitor activates the recorder. ...
...when the monitor determines that the interpreter has entered a region of code that would benefit from native compilation, the monitor activates the recorder. ...
...when the monitor determines that the interpreter has entered a region of code that would benefit from native compilation, the monitor activates the recorder. ...
...And 14 more matches
nsIMsgDBView
ervalue sortorder); void docommand(in nsmsgviewcommandtypevalue command); void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selectable_p, out nsmsgviewcommandcheckstatevalue selected_p); void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsg
key resultid, out nsmsgviewindex resultindex, out nsmsgviewindex threadindex, in boolean wrap); boolean navigatestatus(in nsmsgnavigationtypevalue motion); nsmsg
key get
keyat(in nsmsgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex index); nsimsgfolder getfolderforviewindex(in nsmsgviewindex index); acstring geturiforviewindex(in nsmsgviewindex i...
...index); nsimsgdbview clonedbview(in nsimessenger amessengerinstance, in nsimsgwindow amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); void geturisforselection([array, size_is(count)] out string uris, out unsigned long count); void getindicesforselection([array, size_is(count)] out nsmsgviewindex indices, out unsigned long count); void loadmessagebymsg
key(in nsmsg
key amsg
key); void loadmessagebyviewindex(in nsmsgviewindex aindex); void loadmessagebyurl(in string aurl); void reloadmessage(); void reloadmessagewithallparts(); void selectmsgby
key(in nsmsg
key key); void selectfoldermsgby
key(in nsimsgfolder afolder, in nsmsg
key a
key); void ondeletecompleted(in boolean succeeded); n...
... void loadmessagebyviewindex(in nsmsgviewindex aindex); void loadmessagebyurl(in string aurl); void reloadmessage(); void reloadmessagewithallparts(); void selectmsgby
key(in nsmsg
key key); void selectfoldermsgby
key(in nsimsgfolder afolder, in nsmsg
key a
key); void ondeletecompleted(in boolean succeeded); nsmsgviewindex findindexfrom
key(in nsmsg
key amsg
key, in boolean aexpand); void expandandselectthreadbyindex(in nsmsgviewindex aindex, in boolean aaugment); void addcolumnhandler(in astring acolumn, in nsimsgcustomcolumnhandler ahandler); void removecolumnhandler(in astring acolumn); nsimsgcustomcolumnhandler getcolumnhandler(in astring acolumn); attributes attribute type ...
...And 14 more matches
Basic concepts - Web APIs
e. indexeddb is useful for applications that store a large amount of data (for example, a catalog of dvds in a lending library) and applications that don't need persistent internet connectivity to work (for example, mail clients, to-do lists, and notepads). about this document this introduction discusses essential concepts and terminology in indexeddb. it gives you the big picture and explains
key concepts. you'll find the following useful: for an overview of the design and structure of indexeddb, see big concepts. to learn more about indexeddb terms, see the definitions section. for a detailed tutorial on how to use the api, see using indexeddb. for the reference documentation on the indexeddb api, refer back to the main indexeddb api article and its subpages, which document the ty...
...he reference documentation on the indexeddb api, refer back to the main indexeddb api article and its subpages, which document the types of objects used by indexeddb. for more information on how the browser handles storing your data in the background, read browser storage limits and eviction criteria. overview of indexeddb indexeddb lets you store and retrieve objects that are indexed with a "
key." all changes that you make to the database happen within transactions. like most web storage solutions, indexeddb follows a same-origin policy. so while you can access stored data within a domain, you cannot access data across different domains. indexeddb is an asynchronous api that can be used in most contexts, including web workers. it used to include a synchronous version also, for use in we...
... websql are solutions for storage, they do not offer the same functionalities. websql database is a relational database access system, whereas indexeddb is an indexed table system. big concepts if you have assumptions from working with other types of databases, you might get thrown off when working with indexeddb. so keep the following important concepts in mind: indexeddb databases store
key-value pairs. the values can be complex structured objects, and
keys can be properties of those objects. you can create indexes that use any property of the objects for quick searching, as well as sorted enumeration.
keys can be binary objects. indexeddb is built on a transactional database model. everything you do in indexeddb always happens in the context of a transaction. the indexeddb ap...
...And 14 more matches
SubtleCrypto.deriveBits() - Web APIs
the derivebits() method of the subtlecrypto interface can be used to derive an array of bits from a base
key. it takes as its arguments the base
key, the derivation algorithm to use, and the length of the bit string to derive. it returns a promise which will be fulfilled with an arraybuffer containing the derived bits. this method is very similar to subtlecrypto.derive
key(), except that derive
key() returns a crypto
key object rather than an arraybuffer. essentially derive
key() is composed of derivebits() followed by import
key(). this function supports the same derivation algorithms as derive
key(): ecdh, hkdf, and pbkdf2. ...
...ve
key(), except that derive
key() returns a crypto
key object rather than an arraybuffer. essentially derive
key() is composed of derivebits() followed by import
key(). this function supports the same derivation algorithms as derive
key(): ecdh, hkdf, and pbkdf2. see supported algorithms for some more detail on these algorithms. syntax const result = crypto.subtle.derivebits( algorithm, base
key, length ); parameters algorithm is an object defining the derivation algorithm to use. to use ecdh, pass an ecdh
keyderiveparams object. to use hkdf, pass an hkdfparams object. to use pbkdf2, pass a pbkdf2params object. base
key is a crypto
key representing the input to the derivation algorithm. if algorithm is ecdh, this will be the ecdh private
key. otherwise it will be...
... length is a number representing the number of bits to derive. ...
...And 14 more matches
SubtleCrypto - Web APIs
mber of low-level cryptographic functions. access to the features of subtlecrypto is obtained through the subtle property of the crypto object you get from window.crypto. warning: this api provides a number of low-level cryptographic primitives. it's very easy to misuse them, and the pitfalls involved can be very subtle. even assuming you use the basic cryptographic functions correctly, secure
key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts. errors in security system design and implementation can make the security of the system completely ineffective. if you're not sure you know what you are doing, you probably shouldn't be using this api. properties this interface doesn't inherit any proper...
.... if you're not sure you know what you are doing, you probably shouldn't be using this api. properties this interface doesn't inherit any properties, as it has no parent interface. methods this interface doesn't inherit any methods, as it has no parent interface. subtlecrypto.encrypt() returns a promise that fufills with the encrypted data corresponding to the clear text, algorithm, and
key given as parameters. subtlecrypto.decrypt() returns a promise that fulfills with the clear data corresponding to the encrypted text, algorithm, and
key given as parameters. subtlecrypto.sign() returns a promise that fulfills with the signature corresponding to the text, algorithm, and
key given as parameters. subtlecrypto.verify() returns a promise that fulfills with a boolean value indicat...
...lls with the clear data corresponding to the encrypted text, algorithm, and
key given as parameters. subtlecrypto.sign() returns a promise that fulfills with the signature corresponding to the text, algorithm, and
key given as parameters. subtlecrypto.verify() returns a promise that fulfills with a boolean value indicating if the signature given as a parameter matches the text, algorithm, and
key that are also given as parameters. subtlecrypto.digest() returns a promise that fulfills with a digest generated from the algorithm and text given as parameters. subtlecrypto.generate
key() returns a promise that fulfills with a newly-generated crypto
key, for symmetrical algorithms, or a crypto
keypair, containing two newly generated
keys, for asymmetrical algorithms. these will match the algor...
...And 14 more matches
List of Mozilla-Based Applications - Archive of obsolete content
additional information 389 directory server ldap server uses nss a380 seatback entertainment system media software this blog post mentions a reference to mozilla being used but i couldn't find more information about it. ...
...raries chromeless browser with html-based interface classilla mozilla browser for mac os 9 clines a clone of color lines (game) standalone version cloud web operating system cloud browse iphone/ipad/ipod touch browser seems to be firefox running remotely on servers that people access through device conkeror
keyboard-oriented browser convertigo enterprise mashup server server tool for transactional web scraping and for web clipping cometbird another firefox mod modified version of firefox correo email couac (fr) web-based email and jabber app couchdb document-oriented database uses spidermon
key courtanet benefit (f...
... clock frizione javascript development, testing and deployment environment uses mozilla rhino geckofx embeddable gecko gjs javascript bindings for gnome globalmojo browser that raises money for your favorite causes gluescript a javascript engine which can be used as a general purpose language uses mozilla spidermon
key and formerly called wxjavascript gnome operating system gnome 3 will use spidermon
key through gjs google adwords editor editor google gadgets for linux google’s desktop widget engine uses xulrunner according to the build instructions grani grain sizing assessment tool according to this wiki page grani is based on xul and xpcom daim ...
...And 13 more matches
How to build custom form controls - Learn web development
we want to achieve: this screenshot shows the three main states of our control: the normal state (on the left); the active state (in the middle) and the open state (on the right). in terms of behavior, we are recreating a native html element. therefore it should have the same behaviors and semantics as the native html element. we require our control to be usable with a mouse as well as with a
keyboard, and comprehensible to a screen reader, just like any native control. let's start by defining how the control reaches each state: the control is in its normal state when: the page loads. the control was active and the user clicks anywhere outside it. the control was active and the user moves the focus to another control using the
keyboard (e.g. the tab
key). the control is ...
... the control was in its open state and the user clicks on it. ...
... open state and the user clicks on it. the control is in its open state when: the control is in any other state than open and the user clicks on it. once we know how to change states, it is important to define how to change the control's value: the value changes when: the user clicks on an option when the control is in the open state. the user hits the up or down arrow
keys when the control is in its active state. the value does not change when: the user hits the up arrow
key when the first option is selected. the user hits the down arrow
key when the last option is selected. finally, let's define how the control's options will behave: when the control is opened, the selected option is highlighted when the mouse is over an option, the option ...
...And 13 more matches
NSS Sample Code sample5
nss sample code 5: pki encryption with a raw public & private
key in der format /* example code to illustrate pki crypto ops (encrypt with public
key, * decrypt with private
key) * * no nss db needed. the public
key & private
key to use are * sourced from a base64-encoded der subjectpublic
keyinfo structure, * and a base64-encoded der private
keyinfo structure. * * there is no attempt to link the public & private
key together * * this example does not do any padding. it simply encrypts/decrypts a block * of length equal to modulus length of the public/private
key. ...
...a base64-encoded der subjectpublic
keyinfo structure, * and a base64-encoded der private
keyinfo structure. * * there is no attempt to link the public & private
key together * * this example does not do any padding. it simply encrypts/decrypts a block * of length equal to modulus length of the public/private
key. ...
...ther * * this example does not do any padding. it simply encrypts/decrypts a block * of length equal to modulus length of the public/private
key. ...
...And 13 more matches
nss tech note7
with nss nss technical note: 7 this technical note explains how to use nss to perform rsa signing and encryption. the industry standard for rsa signing and encryption is pkcs #1. nss supports pkcs #1 v1.5. nss doesn't yet support pkcs #1 v2.0 and v2.1, in particular oaep, but oaep support is on our to-do list. your contribution is welcome. data types nss uses the following data types to represent
keys: sec
keypublic
key: a public
key, defined in "
keythi.h". sec
keyprivate
key: a private
key, defined in "
keythi.h". pk11sym
key: a symmetric
key (often called a session
key), defined in "secmodt.h". these data types should be used as if they were opaque structures, that is, they should only be created by some nss functions and you always pass pointers to these data types to nss functions and neve...
...vate
key: a private
key, defined in "
keythi.h". pk11sym
key: a symmetric
key (often called a session
key), defined in "secmodt.h". these data types should be used as if they were opaque structures, that is, they should only be created by some nss functions and you always pass pointers to these data types to nss functions and never examine the members of these structures. the strength of an rsa
key pair is measured by the size of its modulus because given the modulus and public exponent, the best known algorithm for computing the private exponent is to factor the modulus. at present 1024 bit and 2048 bit rsa
keys are the most common and recommended. to prevent denial-of-service attacks with huge public
keys, nss disallows modulus size greater than 8192 bits. ...
...h of an rsa
key pair is measured by the size of its modulus because given the modulus and public exponent, the best known algorithm for computing the private exponent is to factor the modulus. at present 1024 bit and 2048 bit rsa
keys are the most common and recommended. to prevent denial-of-service attacks with huge public
keys, nss disallows modulus size greater than 8192 bits. how are these
keys created in nss? ...
...And 13 more matches
NSS Tools crlutil
using the certificate revocation list management tool newsgroup: mozilla.dev.tech.crypto the certificate revocation list (crl) management tool is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. ...
...ertificate revocation list management tool newsgroup: mozilla.dev.tech.crypto the certificate revocation list (crl) management tool is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. ...
...evocation list management tool newsgroup: mozilla.dev.tech.crypto the certificate revocation list (crl) management tool is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. ...
...And 13 more matches
NSS tools : crlutil
eate, modify or delete certificates entries in a particular crl. synopsis crlutil [options] arguments description the certificate revocation list (crl) management tool, crlutil, is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. the
key and certificate management process generally begins with creating
keys in the
key database, then generating and managing certificates in the certificate database(see certutil tool) and continues with certificates expiration or revocation. this document discusses certificate revocation list management. for information on security module database management, see using the security ...
... to run the certificate revocation list management tool, type the command crlutil option [arguments] where options and arguments are combinations of the options and arguments listed in the following section. each command takes one option. each option may take zero or more arguments. ...
...crl which can be located in cert db or in arbitrary file. if located in file it should be encoded in asn.1 encode format. -g arguments option arguments modify an action and are lowercase. -b bypass ca signature checks. -p dbprefix specify the prefix used on the nss security database files (for example, my_cert8.db and my_
key3.db). this option is provided as a special case. changing the names of the certificate and
key databases is not recommended. -a use ascii format or allow the use of ascii format for input and output. this formatting follows rfc #1113. -c crl-gen-file specify script file that will be used to control crl generation/modifica...
...And 13 more matches
Basic animations - Web APIs
ied by function in delay milliseconds. requestanimationframe(callback) tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. if you don't want any user interaction you can use the setinterval() function which repeatedly executes the supplied code. if we wanted to make a game, we could use
keyboard or mouse events to control the animation and use settimeout(). by setting eventlisteners, we catch any user interaction and execute our animation functions. in the examples below, we'll use the window.requestanimationframe() method to control the animation. the requestanimationframe method provides a smoother and more efficient way for animating by calling the animation frame when the syst...
...head> <body> <canvas id="cw"></canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nokia 1100:snake..member berries</title> </head> <body> <div class="
keypress hide"> <div class="up" onclick="emit(38)">↑</div> <div class="right" onclick="emit(39)">→</div> <div class="left" onclick="emit(37)">←</div> <div class="down" onclick="emit(40)">↓</div> </div> <div class="banner" id="selector"> <div> time :<span id="time">0</span> </div> <div>lousygames ©</di...
...ign: center; color: #fff; background: #3f51b5; line-height: 29px; position: fixed; left: 0; top: 0; right: 0; font-family: monospace; height: 30px; opacity: .4; display: flex; transition: .5s } .banner:hover { opacity: 1 } div#selector>div { flex-basis: 30% } @
keyframes diss { from { opacity: 1 } to { opacity: 0 } } .
keypress>div { border: dashed 3px #fff; height: 48%; width: 48%; display: flex; align-content: center; justify-content: center; align-self: center; align-items: center; font-size: -webkit-xxx-large; ...
...And 13 more matches
EffectTiming.fill - Web APIs
ile "forwards" ensures that once the animation's end time has been passed, the element will continue to be drawn in the state it was in at its last rendered frame. note that authors are discouraged from using fill modes to persist the effect of an animation indefinitely. see the alternatives to fill modes section below for approaches that are simpler and more performant. element.animate(), and
keyframeeffect() accept an object of timing properties including fill. the value of fill corresponds directly to fill in effecttiming objects returned by gettiming() in animationeffect and
keyframeeffect. syntax var timingproperties = { fill: "none" | "forwards" | "backwards" | "both" | "auto" } value a domstring indicating the fill type to use in order to properly render an affected element ...
...nd during any delay and pending playstate. "both" combining the effects of both forwards and backwards: the animation's effects should be reflected by the element(s) state prior to playing and retained after the animation has completed playing, in spite of and during any enddelay, delay and/or pending or finished playstate. "auto" if the animation effect the fill mode is being applied to is a
keyframe effect (
keyframeeffect or
keyframeeffectreadonly), "auto" is equivalent to "none". otherwise, the result is "both". examples here are a few examples. fill mode: none html content the html is pretty simple. we have a <div> named "main" which is a container for the element we'll be animating, which is a <div> with the id "box". below that, another <div> serves as a button that will trigg...
...; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container. note that there's no rotation applied. javascript content now let's check out the javascript. ...
...And 13 more matches
ARIA: button role - Accessibility
see the official wai-aria example code. description the button role identifies an element as a button to screen readers. a button is a widget used to perform actions such as submitting a form, opening a dialog, cancelling an action, or performing a command such as inserting a new record or displaying informat...
...simple button which is first in the focus order, though <button> or <input> with type="button" should be used for buttons: <button id="savechanges">save</button> note: if using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and have to define event handlers for click and
keydown events, including the enter and space
keys, in order to process the user's input. see the official wai-aria example code. description the button role identifies an element as a button to screen readers. a button is a widget used to perform actions such as submitting a form, opening a dialog, cancelling an action, or performing a command such as inserting a new record or displaying information. a common convention to inform users a bu...
...utton should not change when its state changes. in our example the label remains "mute" with a screen reader reading "mute toggle button pressed" or "mute toggle button not pressed" depending on the value of aria-pressed. if the design were to call for the button label to change from "mute" to "unmute," a toggle button would not be appropriate, so the the aria-pressed attribute would be omitted.
keyboard interactions
key function enter activates the button. space activates the button following button activation, focus is set depending on the type of action the button performs. 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 dia...
...And 13 more matches
textbox - Archive of obsolete content
cko 2 type: string a string that appears in the textbox when it has no value. this is superseded by the placeholder attribute in gecko 2.0. the old name is retained for compatibility, but you should update your code. hidespinbuttons type: boolean if true, the number box does not have arrow buttons next to it to allow the user to adjust the value. the value may still be adjusted with the
keyboard. the default value is false. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default value is 1. label type: string if present and not empty, this will be exposed to screen readers through the label property. typ...
..., dropping the rest of the text replacewithcommas pastes the text with the newlines replaced with commas replacewithspaces pastes the text with newlines replaced with spaces strip pastes the text with the newlines removed stripsurroundingwhitespace pastes the text with newlines and adjacent whitespace removed onblur type: script code this event is sent when a textbox loses
keyboard focus. note: the behavior of this event has evolved over time. prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <input> element inside the textbox binding. from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9), the script code would actually execute twice, once in the context of the anonymous html <input> element and...
... code would execute in the context of the anonymous html <input> element inside the textbox binding. from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9), the script code would actually execute twice, once in the context of the anonymous html <input> element and once in the context of the <textbox> element itself. as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamon
key 2.10), the script code only runs in the context of the <textbox> element, matching the behavior of all other event handlers. onchange type: script code this event is sent when the value of the textbox is changed. the event is not sent until the focus is moved to another element. onfocus type: script code this event is sent when a textbox receives
keyboard focus. note: the behavior o...
...And 12 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
. 67 carddav carddav, glossary, infrastructure carddav (vcard extension to webdav) is a protocol standardized by the ietf and used to remote-access or share contact information over a server. 68 certificate authority cryptography, glossary, security a certificate authority (ca) is an organization that signs digital certificates and their associated public
keys. this certifies that an organization that requested a digital certificate (e.g., mozilla corporation) is authorized to request a certificate for the subject named in the certificate (e.g., mozilla.org). 69 certified apps, b2g, firefox os, glossary, security, trustworthy certified means that an application, content or data transmission has successfully undergone evaluation by...
...s themselves (e.g., toolbars, menu bar, tabs). this is not to be confused with the google chrome browser. 75 cipher cryptography, glossary, privacy, security in cryptography, a cipher is an algorithm that can encode cleartext to make it unreadable, and to decode it back. 76 cipher suite cryptography, glossary, security a cipher suite is a combination of a
key exchange algorithm, authentication method, bulk encryption cipher, and message authentication code. 77 ciphertext cryptography, glossary, privacy, security in cryptography, a ciphertext is a scrambled message that conveys information but is not legible unless decrypted with the right cipher and the right secret (usually a
key), reproducing the original cleartext. a ciphertext...
... 78 class codingscripting, glossary in object-oriented programming, a class defines an object's characteristics. ...
...And 12 more matches
NSS tools : crlutil
tatus this documentation is still work in progress. please contribute to the initial review in mozilla nss bug 836477[1] description the certificate revocation list (crl) management tool, crlutil, is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl. the
key and certificate management process generally begins with creating
keys in the
key database, then generating and managing certificates in the certificate database(see certutil tool) and continues with certificates expiration or revocation. this document discusses certificate revocation list management. for information on security module database management, see using the security module data...
... to run the certificate revocation list management tool, type the command crlutil option [arguments] where options and arguments are combinations of the options and arguments listed in the following section. each command takes one option. each option may take zero or more arguments. ...
...t existing crl located in cert database file. -m modify existing crl which can be located in cert db or in arbitrary file. if located in file it should be encoded in asn.1 encode format. -g arguments option arguments modify an action and are lowercase. -b bypass ca signature checks. -p dbprefix specify the prefix used on the nss security database files (for example, my_cert8.db and my_
key3.db). this option is provided as a special case. changing the names of the certificate and
key databases is not recommended. -a use ascii format or allow the use of ascii format for input and output. this formatting follows rfc #1113. -c crl-gen-file specify script file that will be used to control crl generation/modification. see crl-cript-file format below. if options -m|-g is used and...
...And 12 more matches
nsIMsgDBHdr
isflagged boole...
... isflagged boolean readonly: i...
... isflagged boolean readonly: indicates whether or not the message is starred in the ui. iskill...
...And 12 more matches
SubtleCrypto.verify() - Web APIs
the values given for the extra parameters must match those passed into the corresponding sign() call. ...
...the values given for the extra parameters must match those passed into the corresponding sign() call. ...
...ven for the extra parameters must match those passed into the corresponding sign() call. to use rsassa-pkcs1-v1_5, pass the string "rsassa-pkcs1-v1_5" or an object of the form { "name": "rsassa-pkcs1-v1_5" }. to use rsa-pss, pass an rsapssparams object. to use ecdsa, pass an ecdsaparams object. to use hmac, pass the string "hmac" or an object of the form { "name": "hmac" }.
key is a crypto
key containing the
key that will be used to verify the signature. it is the secret
key for a symmetric algorithm and the public
key for a public-
key system. signature is a arraybuffer containing the signature to verify. data is a arraybuffer containing the data whose signature is to be verified. return value result is a promise that fulfills with a boolean: true if the signature...
...And 12 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
this will help to solidify your understanding of how the geometry of 3d graphics and vr work, as well as to help ensure you understand the way the functions and data that are used during xr rendering work together. ...
...at experimental days of the webxr specification. options this example has a number of options you can configure by adjusting the values of constants before you load it in the browser. the code looks like this: const xrotationdegreespersecond = 25; const yrotationdegreespersecond = 15; const zrotationdegreespersecond = 35; const enablerotation = true; const allowmouserotation = true; const allow
keyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply around the x axis per second. yrotationdegreespersecond the number of degrees to rotate around the y axis each second. zrotationdegreespersecond the number of degrees per...
...y around the x axis per second. yrotationdegreespersecond the number of degrees to rotate around the y axis each second. zrotationdegreespersecond the number of degrees per second to rotate around the z axis. enablerotation a boolean indicating whether or not to enable the rotation of the cube at all. allowmouserotation if true, you can use the mouse to pitch and yaw the view angle. allow
keyboardmotion if true, the w, a, s, and d
keys move the viewer forward, left, backward, and to the right, while the up and down arrow
keys move up and down. if false, only xr device changes to the view are permitted. enableforcepolyfill if this boolean is true, the example will attempt to use the webxr polyfill even if the browser actually has support for webxr. if false, the polyfill is only use...
...And 12 more matches
HTML to DOM - Archive of obsolete content
avigation.loaduri("http://www.mozilla.org/",components.interfaces.nsiwebnavigation,null,null,null); if you are starting with an html string, you can convert it to a data uri and use that to load in the browser element. using a hidden xul iframe (alternate example) sometimes, a browser element is overkill, or does not meet your needs, or you can't fulfill its requirements. ...
...s requirements. while working on don
keyfire, i discovered the iframe xul element, and it is very easy to implement it. as an example, i will show a browser overlay .xul file, and some javascript code to access it. here is some xul code you can add to your browser overlay .xul file. ...
...n
keyfire, i discovered the iframe xul element, and it is very easy to implement it. as an example, i will show a browser overlay .xul file, and some javascript code to access it. here is some xul code you can add to your browser overlay .xul file. ...
...And 11 more matches
MenuItems - Archive of obsolete content
features of the menuitem element the menuitem element has a number of features beyond just being a label for a menu command. adding shortcut
keys to menu items a shortcut
key may be associated with a menu item. unlike the access
key, which only functions while the menu is open, a shortcut
key works at any time. a shortcut
key can be created using the
key element. in reality, the
keyboard shortcut is handled by the
key element, however, the menu item will display the shortcut next to its label. this allows the user to discover what shortcut
keys are available by looking at the menus. ...
... with a menu item. unlike the access
key, which only functions while the menu is open, a shortcut
key works at any time. a shortcut
key can be created using the
key element. in reality, the
keyboard shortcut is handled by the
key element, however, the menu item will display the shortcut next to its label. this allows the user to discover what shortcut
keys are available by looking at the menus. <
keyset> <
key id="open-
key" modifiers="accel"
key="o"/> <
key id="close-
key" modifiers="accel"
key="c"/> </
keyset> <menubar> <menu label="view"> <menupopup> <menuitem label="open"
key="open-
key"/> <menuitem label="close"
key="close-
key"/> </menupopup> </menu> </menubar> the two menuitems are associated with a
key using the
key attribute. it should be set to the id of a k...
..."
key="c"/> </
keyset> <menubar> <menu label="view"> <menupopup> <menuitem label="open"
key="open-
key"/> <menuitem label="close"
key="close-
key"/> </menupopup> </menu> </menubar> the two menuitems are associated with a
key using the
key attribute. it should be set to the id of a
key element within the same document. the result is that the items will display the shortcut
key next to their labels. for the "open" item in this example, this command can be invoked by using the "accel" modifier
key and pressing 'o'. the "accel" modifier
key varies on each platform, but is the
key typically used for shortcut
keys. for instance, if the "accel"
key is control, the menu might display "ctrl + o". although there isn't usually a need to do so, you can also set a custom label fo...
...And 11 more matches
Complete - Archive of obsolete content
introduction you can use the custom toolbar button tutorial as a very simple introduction to extensions. ...
...introduction you can use the custom toolbar button tutorial as a very simple introduction to extensions. ...
...rmation about developing extensions, see the main extensions page here. features of this extension this extension is a more complex version of the original custom toolbar button extension. it provides a user interface in two languages (english and french). it supports firefox, thunderbird, sunbird and flock—these are referred to as "firefox etc." in the rest of this page. it also supports seamon
key. in seamon
key it supports two themes (classic and modern). it provides all five custom toolbar buttons on all the toolbars, and it provides corresponding menu choices in seamon
key's chatzilla window. the following sections describe this extension's overall structure, and how it implements languages and themes. overall structure this extension's internal name is allcustom. it uses this name as the...
...And 11 more matches
Index - Learn web development
ssibility accessibility, assessment, beginner, html, jaavscript, learn, test your skills this aim of this skill test is to assess whether you've understood our css and javascript accessibility best practices article. 7 html: a good basis for accessibility at, accessibility, article, beginner, buttons, codingscripting, forms, html, learn, links, a11y, assistive technology,
keyboard, screenreader, semantics you should now be well-versed in writing accessible html for most occasions. our wai-aria basics article will help to fill gaps in this knowledge, but this article has taken care of the basics. next up we'll explore css and javascript, and how accessibility is affected by their good or bad use. 8 mobile accessibility accessibility, article, begin...
...er that require it. 11 test your skills: wai-aria accessibility, assessment, beginner, learn, wai-aria, test your skills this aim of this skill test is to assess whether you've understood our wai-aria basics article. 12 what is accessibility? at, accessibility, article, beginner, css, codingscripting, html, javascript, learn, tools, users, assistive technology,
keyboard, screan reader, screenreader this article should have given you a useful high-level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. you should now also have a thirst to learn about the implementation details that can make sites accessible, and we'll start on that in the next section, looking at why html is a good basis for a...
... with a blank page, and you can take it so many directions. and if you don't have much experience, starting out with a blank page might be a bit scary. we have over 25 years' experience and we'll give you some common rules of thumb to help you design your site. 28 what is a domain name? beginner, domain names, infrastructure, intro, needsactivelearning, web domain names are a
key part of the internet infrastructure. they provide a human-readable address for any web server available on the internet. 29 what is a url? beginner, infrastructure, needsactivelearning, url, resources, urls with hypertext and http, url is one of the
key concepts of the web. it is the mechanism used by browsers to retrieve any published resource on the web. 30 what ...
...And 11 more matches
NSS API Guidelines
layered, as shown in this diagram: the boxes in the gray section, towards the center, are exported only through pkcs #11. pkcs #11 is only exported through the wrappers. the areas which need the most work (both here and throughout the code) is: the relationship of the certificate library with just about every other component (most noticeably pkcs #12, pkcs #7, and pkcs #11) splitting low
key and high
key components more clearly the crypto wrappers (pkcs #11 wrappers) and high
key pkcs #12 and pkcs #5 libraries nss compiles into the libraries described below. the layer indicates the main layer, seen in the previous diagram, in which the library operates. the directory is the location of the library code in the nss source tree. the public headers is a list of header files that...
...ificate request message format (crmf, see rfc 2511) data. cmmf no longer exists as a proposed standard; cmmf functions have been incorporated into the proposal for certificate management protocols (cmp). same level as ssl lib/crmf cmmf.h, crmf.h, crmft.h, cmmft.h, crmffut.h cryptohi provides high-level cryptographic support operations: such as signing, verifying signatures,
key generation,
key manipulation, hashing; and data types. this code is above the pkcs #11 layer. sign/verify lib/cryptohi cryptohi.h, cryptoht.h, hasht.h,
keyhi.h,
keythi.h,
key.h,
keyt.h, sechash.h fort provides a pkcs #11 interface, to fortezza crypto services. fortezza is a set of security algorithms, used by the u.s. government. there is also a swft library that provides a s...
... pkcs #11, wraps crypto lib/freebl blapi.h, blapit.h jar provides support for reading and writing data in java archive (jar) format, including zlib compression. port lib/jar jar-ds.h, jar.h, jarfile.h nss provides high-level initialiazation and shutdown of security services. specifically, this library provides nss_init() for establishing default certificate,
key, module databases, and initializing a default random number generator. nss_shutdown() closes these databases, to prevent further access by an application. above high cert, high
key lib/nss nss.h pk11wrap provides access to pkcs #11 modules, through a unified interface. the pkcs11wrap library provides functions for selecting/finding pkcs #11 modules and slots. it also provides...
...And 11 more matches
NSS Sample Code sample4
nss sample code 4: pki encryption /* example code to illustrate pki crypto ops (encrypt with public
key, * decrypt with private
key) * * code assumes that you have set up a nss database with a certificate * and a private
key. the db password should be "test" and the cert * nickname should be "testca" * here is one way of doing it: * # create ca cert db, if -f not provided, prompts for passwd * $ certutil -n -d . ...
... * * this example does not do any padding. ...
... * * this example does not do any padding. ...
...And 11 more matches
nsIDBChangeListener
the nsidbchangelistener interface is used by components wanting to receive notification when the current database changes somehow. ...
...e is used by components wanting to receive notification when the current database changes somehow. ...
...n the current database changes somehow. ...
...And 11 more matches
IDBIndex - Web APIs
idbindex interface of the indexeddb api provides asynchronous access to an index in a database. an index is a kind of object store for looking up records in another object store, called the referenced object store. you use this interface to retrieve data. you can retrieve records in an object store through the primary
key or by using an index. an index lets you look up records in an object store using properties of the values in the object stores records other than the primary
key the index is a persistent
key-value storage where the value part of its records is the
key part of a record in the referenced object store. the records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. each record in an index can point to on...
...e records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. when the object store changes, all indexes that refers to the object store are automatically updated. you can grab a set of
keys within a range. to learn more, see idb
keyrange. note: this feature is available in web workers. properties idbindex.isautolocale read only returns a boolean indicating whether the index had a locale value of auto specified upon its creation (see createindex()'s optionalparameters.) idbindex.locale read only returns the locale of the index (for example en-us, or pl) if it had a loca...
... auto specified upon its creation (see createindex()'s optionalparameters.) idbindex.locale read only returns the locale of the index (for example en-us, or pl) if it had a locale value specified upon its creation (see createindex()'s optionalparameters.) idbindex.name the name of this index. idbindex.objectstore read only the name of the object store referenced by this index. idbindex.
keypath read only the
key path of this index. if null, this index is not auto-populated. idbindex.multientry read only affects how the index behaves when the result of evaluating the index's
key path yields an array. if true, there is one record in the index for each item in an array of
keys. if false, then there is one record for each
key that is an array. idbindex.unique read only if true, ...
...And 11 more matches
IDBObjectStore - Web APIs
idbobjectstore.name the name of this object store. ...
... idbobjectstore.name the name of this object store. ...
... idbobjectstore.name the name of this object store. idbobjectstore.transaction read only the idbtransaction object to which this object store belongs. ...
...And 11 more matches
generateCRMFRequest() - Archive of obsolete content
being dropped. avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. ...
...cle are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <
keygen> or the future web crypto api instead. crmfobject = crypto.generatecrmfrequest("requesteddn", "regtoken", "authenticator", "escrowauthoritycert", "crmf generation done code",
keysize1, "
keyparams1", "
keygenalg1", ...,
keysizen, "
keyparamsn", "
keygenalgn"); this method will generate a sequence of crmf requests that has n requests. one request for each
key pair that is generated. the first three parameters will be applied to every request. the "escrowauthoritycert" parameter will only be used f...
...g1", ...,
keysizen, "
keyparamsn", "
keygenalgn"); this method will generate a sequence of crmf requests that has n requests. one request for each
key pair that is generated. the first three parameters will be applied to every request. the "escrowauthoritycert" parameter will only be used for requests that pertain to a
key that is being escrowed. after the "escrowauthoritycert" parameter, the method takes some javascript code that is invoked when the crmf request is ready. finally, there are 1 or more sets of
key generation arguments. each
key generation will be associated with its own request. all the requests will have the same dn. argument description "requesteddn" an rfc 1485 formatted d...
...And 10 more matches
Menus - Archive of obsolete content
enubar, for instance 'file' or 'tools'. a menu can also be used as the label of a submenu. menupopup a popup containing items to appear on a menu. the menupopup in the example above is a child of the 'file' menu and will appear when the menu label is clicked. menuitem a single item to appear on a menu. when the user moves the mouse over a menuitem, it will highlight the item. the cursor
keys can also be used to adjust which menuitem is the current item. a menuitem is associated with a command to carry out. menuseparator a separator between items in a menu. in the example above, the 'file' menu has four menuitems and one menuseparator on it. the menu and each menuitem has a label indicating its purpose. other types of tags should not appear on a menupopup. if you want to crea...
...ied using the label attribute. in the example below, the menu has the label 'view'. <menu label="view"> <menupopup> <menuitem label="toolbar"/> <menuitem label="status bar"/> </menupopup> </menu> when the menu is clicked, it opens the menupopup contained within it. for this reason, a menupopup should be placed as a direct child of the menu. the menu can also be opened by using the
keyboard. the user can press a
key to highlight the menu labels and navigate with the cursor
keys. the
key is different for each platform; on windows f10 can be used. another way is to add shortcut
keys called access
keys for each menu element to make it easier to access the menu commands. on some platforms, adding an access
key will underline a letter in the menu label indicating the
key to press. f...
...
key to highlight the menu labels and navigate with the cursor
keys. the
key is different for each platform; on windows f10 can be used. another way is to add shortcut
keys called access
keys for each menu element to make it easier to access the menu commands. on some platforms, adding an access
key will underline a letter in the menu label indicating the
key to press. for this reason, the access
key should always correspond to a character that appears in the menu label. to set an access
key for a menu, use the access
key attribute, as in the example below. <menu label="file" access
key="f"/> this menu can then be opened by pressing the access
key (typically in combination with the alt
key). naturally, the access
keys should be unique on a menubar. so if you wanted to have a menu with the ...
...And 10 more matches
Localization - Archive of obsolete content
english version: <description value="find"/> japanese version: <description value="検索"/> you would declare an entity for each label or string of text that you use in your interface. you should not have any directly displayed text in the xul file at all. in addition to using entities for text labels, you should use them for any value that could be different in a different language. access
keys and
keyboard shortcuts for example. xul <menuitem label="&undo.label;" access
key="&undo.
key;"/> dtd <!entity undo.label "undo"> <!entity undo.
key "u"> the example above uses two entities, one for the label on the undo menu item and the second for the access
key. changing the find files example let's take a look at how we would put all of this together by modifying the find files di...
...n red. ...
...type window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script src="findfile.js"/> <popupset> <menupopup id="editpopup"> <menuitem label="&cutcmd.label;" access
key="&cutcmd.access
key;"/> <menuitem label="©cmd.label;" access
key="©cmd.access
key;"/> <menuitem label="&pastecmd.label;" access
key="&pastecmd.access
key;" disabled="true"/> </menupopup> </popupset> <
keyset> <
key id="cut_cmd" modifiers="accel"
key="&cutcmd.command
key;"/> <
key id="copy_cmd" modifiers="accel"
key="©cmd.command
key;"/> <
key id="paste_cmd" modifiers="acce...
...And 10 more matches
dialog - Archive of obsolete content
| properties | methods | related ] this element should be used in place of the window element for dialog boxes. the buttons attribute may be used to set which buttons should appear in the dialog box. these buttons will be placed in the correct locations for the user's platform. more information is available in the xul tutorial and dialogs and prompts (code snippets). ...
...| related ] this element should be used in place of the window element for dialog boxes. the buttons attribute may be used to set which buttons should appear in the dialog box. these buttons will be placed in the correct locations for the user's platform. more information is available in the xul tutorial and dialogs and prompts (code snippets). ...
...ent should be used in place of the window element for dialog boxes. the buttons attribute may be used to set which buttons should appear in the dialog box. these buttons will be placed in the correct locations for the user's platform. more information is available in the xul tutorial and dialogs and prompts (code snippets). ...
...And 10 more matches
WAI-ARIA basics - Learn web development
eaning or semantics. as an example, aria-required="true" specifies that a form input needs to be filled in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">. as an example, you could use aria-labelledby to specify that a
key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute. you can see an example of this at text alternatives. states — special properties that define the current conditions of elements, such as aria...
...tates and properties (all aria-* attributes). where is wai-aria supported? this is not an easy question to answer. it is difficult to find a conclusive resource that states what features of wai-aria are supported, and where, because: there are a lot of features in the wai-aria spec. there are many combinations of operating system, browser, and screenreader to consider. this last point is
key — to use a screenreader in the first place, your operating system needs to run browsers that have the necessary accessibility apis in place to expose the information screenreaders need to do their job. most popular oses have one or two browsers in place that screenreaders can work with. the paciello group has a fairly up-to-date post that provides data for this — see rough guide: browsers, op...
...5 elements (e.g. <nav>), or go beyond html5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab, listbox, etc. dynamic content updates: screenreaders tend to have difficulty with reporting constantly changing content; with aria we can use aria-live to inform screenreader users when an area of content is updated, e.g. via xmlhttprequest, or dom apis. enhancing
keyboard accessibility: there are built-in html elements that have native
keyboard accessibility; when other elements are used along with javascript to simulate similar interactions,
keyboard accessibility and screenreader reporting suffers as a result. where this is unavoidable, wai-aria provides a means to allow other elements to receive focus (using tabindex). accessibility of non-semantic contro...
...And 10 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
trictly necessary, but it is easier to work with values of 0–359 degrees than values like "128000 degrees". if (rotatecount > 359) { rotatecount %= 360; } next, below the previous block add the following line to actually rotate the spinner: spinner.style.transform = `rotate(${rotatecount}deg)`; at the very bottom inside the draw() function, insert the following line. this is the
key to the whole operation — you are setting the variable defined earlier to an active requestanimation() call, which takes the draw() function as its parameter. this starts the animation off, constantly running the draw() function at a rate as near 60 fps as possible. raf = requestanimationframe(draw); below the draw() function definition, add a call to the the draw() function to start th...
...of our live example and source code. throttling a requestanimationframe() animation one limitation of requestanimationframe() is that you can't choose your frame rate. this isn't a problem most of the time, as generally you want your animation to run as smoothly as possible. but what about when you want to create an old school, 8-bit-style animation? this was a problem, for example, in the mon
key island-inspired walking animation from our drawing graphics article: in this example, you have to animate both the position of the character on the screen, and the sprite being shown. there are only 6 frames in the sprite's animation. if you showed a different sprite frame for every frame displayed on the screen by requestanimationframe(), guybrush would move his limbs too fast and the animati...
...ttle your animation will depend on your particular code. for instance, in the earlier spinner example, you could make it appear to move slower by only increasing rotatecount by one on each frame, instead of two. active learning: a reaction game for the final section of this article, you'll create a 2-player reaction game. the game will have two players, one of whom controls the game using the a
key, and the other with the l
key. when the start button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. after that time, a message will appear saying "players go!!" — once this happens, the first player to press their control button will win the game. let's work through this: first of all, download the starter file for ...
...And 10 more matches
TypeScript support in Svelte - Learn web development
pretty useful for running it in a continuous integration (ci) pipeline. just run npm run validate to check for unused css, and return a11y hints and typescript compile errors. in this case, if you run npm run validate (either in the vs code console or terminal) you will get the following error: even better, if you run it from the vs code integrated terminal (you can open it with the ctrl + `
keyboard shortcut), cmd/ctrl + clicking on the file name will take you to the line containing the error. you can also run the validate script in watch mode with npm run validate -- --watch. in this case, the script will execute whenever you change any file. if you are running this in your regular terminal, you are advised to keep it running in the background in a separate terminal window of its own ...
... remember to update the import statements in app.svelte, alert.svelte, and todos.svelte. just remove the .js extension, like this: import { todos } from '../stores' now onto localstore.js. update the import statement in stores.ts, like so: import { localstore } from './localstore' start by renaming the file to localstore.ts. typescript is telling us to specify the type of the
key, initial, and value variables. the first one is easy — the
key of our local web storage should be a string. but initial and value should be any object that could be converted to a valid json string with the json.stringify method. so it is in fact any javascript object with a couple limitations, for example undefined, functions, and symbols are not valid json values. so we'll create the ty...
...e json.stringify method. so it is in fact any javascript object with a couple limitations, for example undefined, functions, and symbols are not valid json values. so we'll create the type jsonvalue to specify these conditions. create the file json.type.ts in the types folder. give it the following content: export type jsonvalue = string | number | boolean | null | jsonvalue[] | { [
key: string]: jsonvalue } the | operator lets us declare variables that could store values of two or more types. a jsonvalue could be a string, a number, a boolean, and so on. in this case we are also making use of recursive types, to specify that a jsonvalue can have an array of jsonvalue, and also an object with properties of type jsonvalue. we will import our jsonvalue type and use it acc...
...And 10 more matches
Accessibility Features in Firefox
list firefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5. we are optimistic that jaws support will catch up this year. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. in fact, the same
keyboard commands are still available, so users can become comfortable and productive right away. screen magnifier users can also benefit from firefox's powerful features today, as caret and focus tracking are fully enabled. mozilla corporation is currently reaching out to work with ai squared, the makers of zoomtext, in order to enable complete support of advanced zoomtext features such as the doc ...
... also optimistic that the the makers of magic and lunar/supernova will add firefox support in the coming year. mozilla has support for dragon naturally speaking. some users of the professional version are happily playing with dragon and firefox. we are optimistic that nuance will work to improve access to the user interface in the coming year. ...
...nova will add firefox support in the coming year. mozilla has support for dragon naturally speaking. some users of the professional version are happily playing with dragon and firefox. we are optimistic that nuance will work to improve access to the user interface in the coming year. firefox on linux currently boasts the best onscreen
keyboard support in the industry via gok, the gnome onscreen
keyboard. ...
...And 10 more matches
CSUN Firefox Materials
eyes beta testing list firefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5. jaws support is quickly catching up as well. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. in fact, the same
keyboard commands are still available, so users can become comfortable and productive right away. screen magnifier users can also benefit from firefox's powerful features today, as caret and focus tracking are fully enabled. mozilla corporation is currently reaching out to work with ai squared, the makers of zoomtext, in order to enable complete support of advanced zoomtext features such as the doc r...
...oductive right away. screen magnifier users can also benefit from firefox's powerful features today, as caret and focus tracking are fully enabled. mozilla corporation is currently reaching out to work with ai squared, the makers of zoomtext, in order to enable complete support of advanced zoomtext features such as the doc reader and app reader. ...
...from firefox's powerful features today, as caret and focus tracking are fully enabled. mozilla corporation is currently reaching out to work with ai squared, the makers of zoomtext, in order to enable complete support of advanced zoomtext features such as the doc reader and app reader. firefox on linux currently boasts the best onscreen
keyboard support in the industry via gok, the gnome onscreen
keyboard. ...
...And 10 more matches
Information for External Developers Dealing with Accessibility
's implementation. accessibility api cross reference should be helpful at anyone looking at implementing accessibility api support for a product on multiple platforms. contains info on accessible roles, states and events. accessible toolkit checklist a list of what needs to be done for accessibility when building new toolkits, widget by widget. ...
...ence should be helpful at anyone looking at implementing accessibility api support for a product on multiple platforms. contains info on accessible roles, states and events. accessible toolkit checklist a list of what needs to be done for accessibility when building new toolkits, widget by widget. ...
... anyone looking at implementing accessibility api support for a product on multiple platforms. contains info on accessible roles, states and events. accessible toolkit checklist a list of what needs to be done for accessibility when building new toolkits, widget by widget. ...
...And 10 more matches
JSClass
a jsclass describes a class of javascript objects. a c/c++ program can use a jsclass with the js_initclass and js_newobject apis to create objects that have custom methods and properties implemented in c/c++. ...
...uct jsclass { const char *name; uint32_t flags; /* optional since spidermon
key 37 */ jspropertyop addproperty; jsdeletepropertyop delproperty; jspropertyop getproperty; jsstrictpropertyop setproperty; jsenumerateop enumerate; jsresolveop resolve; jsconvertop convert; /* obsolete since spidermon
key 44 */ /* optional since spidermon
key 25 */ jsfinalizeop finalize; /* optional */ jsclassinternal reserved0; /* obsolete since spidermon
key 13 */ jscheckaccessop checkaccess; /* obsolete since spidermon
key 29 */ jsnative call; jshasinstanceop hasinstance; jsnative construct; jsxdrobjectop xdrobject; /* obso...
...nal since spidermon
key 25 */ jsfinalizeop finalize; /* optional */ jsclassinternal reserved0; /* obsolete since spidermon
key 13 */ jscheckaccessop checkaccess; /* obsolete since spidermon
key 29 */ jsnative call; jshasinstanceop hasinstance; jsnative construct; jsxdrobjectop xdrobject; /* obsolete since spidermon
key 13 */ jstraceop trace; /* added in spidermon
key 17 */ jsclassinternal reserved1; /* obsolete since spidermon
key 13 */ void *reserved[n]; /* sizeof 'reserved' depends on version */ }; name type description name const char * class name flags uint32_t class flags. this field is the bitwise or of one or...
...And 10 more matches
Places utilities for JavaScript
asquery(anode) annotations a few annotation names are defined here. load_in_sidebar_anno - this annotation is associated with bookmarks or items that should load in the sidebar automatically. description_anno - this annotation stores description information about a bookmark. post_data_anno - i need to clarify here, but i think this is the name of the annotation that stores information for
keyword searches from a bookmark. lmanno_feeduri - need to clarify here too, but i think for each livemark, there is an bookmark which contains an annotation storing the associated feed uri. lmanno_siteuri - need to clarify here, but i think for each livemark, there is an bookmark which contains an annotation storing the associated site uri. organizer_folder_anno - this annotation is associated wi...
... 3 beta 5 has been split into: placesutils: can be used in any toolkit application placesuiutils: only in firefox placesutils this is a gigantic object full of usefulness if you need to do any bookmark work from within browser.xul. as such, it gets its own special section. ...
...used in any toolkit application placesuiutils: only in firefox placesutils this is a gigantic object full of usefulness if you need to do any bookmark work from within browser.xul. as such, it gets its own special section. ...
...And 10 more matches
nsIMsgFolder
supports semholder); boolean testsemaphore(in nsisupports semholder); void getnewmessages(in nsimsgwindow awindow, in nsiurllistener alistener); void writetofoldercache(in nsimsgfoldercache foldercache, in boolean deep); long getnumnewmessages(in boolean deep); void setnumnewmessages(in long numnewmessages); acstring generatemessageuri(in nsmsg
key msg
key); void addmessagedispositionstate(in nsimsgdbhdr amessage,in nsmsgdispositionstate adispositionflag); void markmessagesread(in nsisupportsarray messages, in boolean markread); void markallmessagesread(); void markmessagesflagged(in nsisupportsarray messages, in boolean markflagged); void markthreadread(in nsimsgthread thread); void setl...
...); void markthreadread(in nsimsgthread thread); void setlabelformessages(in nsisupportsarray messages, in nsmsglabelvalue label); nsimsgdatabase getmsgdatabase(in nsimsgwindow msgwindow); void setmsgdatabase(in nsimsgdatabase msgdatabase); nsimsgdatabase getdbfolderinfoanddb(out nsidbfolderinfo folderinfo); nsimsgdbhdr getmessageheader(in nsmsg
key msg
key); boolean shouldstoremsgoffline(in nsmsg
key msg
key); boolean hasmsgoffline(in nsmsg
key msg
key); nsiinputstream getofflinefilestream(in nsmsg
key msg
key, out pruint32 offset, out pruint32 size); void downloadmessagesforoffline(in nsisupportsarray messages, in nsimsgwindow window); nsimsgfolder getchildwithuri(in acstring uri, in boolean deep, in b...
...in nsimsgfolder folder,in boolean caseinsensitive); boolean confirmfolderdeletionforfilter(in nsimsgwindow msgwindow); void alertfilterchanged(in nsimsgwindow msgwindow); void throwalertmsg(in string msgname, in nsimsgwindow msgwindow); astring getstringwithfoldernamefrombundle(in string msgname); void notifycompactcompleted(); long comparesort
keys(in nsimsgfolder msgfolder); [noscript] void getsort
key(out octet_ptr
key, out unsigned long length); boolean callfilterplugins(in nsimsgwindow amsgwindow); acstring getstringproperty(in string propertyname); void setstringproperty(in string propertyname, in acstring propertyvalue); boolean isancestorof(in nsimsgfolder folder); boolean contain...
...And 10 more matches
Operable - Accessibility
the success criteria outlined in the operable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1. operable states that user interface components and navigation must be operable. note: to read the w3c definitions for operable and its guidelines and success criteria, see principle 2: operable — user interface components and navigation must be operable. ...
...he web content accessibility guidelines (wcag) 2.0 and 2.1. operable states that user interface components and navigation must be operable. note: to read the w3c definitions for operable and its guidelines and success criteria, see principle 2: operable — user interface components and navigation must be operable. ...
...ponents and navigation must be operable. note: to read the w3c definitions for operable and its guidelines and success criteria, see principle 2: operable — user interface components and navigation must be operable. guideline 2.1 —
keyboard accessible: make all functionality available from a
keyboard this guideline covers the necessity of making core website functionality available via a
keyboard in addition to other means (e.g. mouse), so that users that rely on
keyboard controls can access them. success criteria how to conform to the criteria practical resource 2.1.1
keyboard (a) all functionality should be accessible using
keyboard controls, unless it cannot be done using the
keyboard (e.g. freehand drawing). built-in controls should be used where p...
...And 10 more matches
transform-origin - CSS: Cascading Style Sheets
definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center. ...
...eg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center. ...
...he same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center. ...
...And 10 more matches
package.json - Archive of obsolete content
defaults to an empty string. it may include a optional url in parentheses and an email address in angle brackets. this value will be used as the add-on's em:creator element in the install.rdf file generated by cfx. n...
...defaults to an empty string. it may include a optional url in parentheses and an email address in angle brackets. this value will be used as the add-on's em:creator element in the install.rdf file generated by cfx. note: jpm supports nodejs people fields. c...
...he names 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. ...
...And 9 more matches
Signing an XPI - Archive of obsolete content
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-alphabetic character. enter new password: re-enter password: create a test certificate create a test certificate, using the -p option to set a password for the new certificate c:\projects\codesigning\> signtool -g mytestcert -d . -p"password" using certificate directory: . warning: performing this opera...
...ue, or anything else to abort: y enter certificate information. all fields are optional. acceptable characters are numbers, letters, spaces, and apostrophes. certificate common name: xpi test organization: tjworld organization unit: software state or province: nottingham country (must be exactly 2 characters): gb username: tj email address: certificates@lan.tjworld.net generated public/private
key pair certificate request generated certificate has been signed certificate "mytestcert" added to database exported certificate to x509.raw and x509.cacert. x509.cacert will be used to sign your xpi package. check that it exists on the file system and in the certificate database: c:\projects\codesigning\> dir x509* 14/12/2005 15:13 1,031 x509.cacert 14/12/2005 15:13 ...
...ect signing ca certificate, which makes it all work. bug 321156 has been filed to request a way to obviate the installation of intermediate code signing ca certs into firefox. now you know it all works, you need to add a real software developer's certificate to the nss certificate database, and use that to sign the xpi. there are several issuers of software developer certificates, with the three
key differentials: availability, cost and identity verification. many issuers will not provide a software developer certificate to individuals (how ridiculous) so you may have to search hard to find one that will, and who also has a ca root authority installed in mozilla firefox. without the certificate-issuers ca root certificate mozilla firefox will not confirm the validity of your certificate to ...
...And 9 more matches
Accessibility/XUL Accessibility Reference - Archive of obsolete content
d. caption see groupbox checkbox <checkbox label='<!--label text-->' /> colorpicker <colorpicker type="button" palettename="standard" /> colorpicker appears to read color values out if the colorpicker can get focus in the first place. column see grid columns see grid command see
keyboard shortcut tutorial commandset see
keyboard shortcut tutorial deck only the currently selected deck layer can be focused. grid although text in the grid can be read, jaws does not recognize grids as tables for table reading mode. groupbox <groupbox> <caption label="<!--group label-->" /> <hbox> <button label="<!--butt...
... <button label="<!--button text-->" /> </hbox> </groupbox> iframe jaws 7.10 issues testing with jaws 7.10, use of an iframe element causes many, unpredictable issues with xul inside of the iframe. okay to use html inside of iframe. see browser element for more info. ...
...="<!--button text-->" /> </hbox> </groupbox> iframe jaws 7.10 issues testing with jaws 7.10, use of an iframe element causes many, unpredictable issues with xul inside of the iframe. okay to use html inside of iframe. see browser element for more info. ...
...And 9 more matches
Unconventional controls - Game development
n rogers game (asteroid belt of sirius) was optimized for low-end, small-screen, cheap smartphones running firefox os, so you can see the difference three years can make — you can read the whole story in our building games for firefox os tv hacks post. using a tv remote to control the game ended up being surprisingly easy, because the events fired by the controller are emulating conventional
keyboard
keys. captain rogers had the
keyboard controls implemented already: this.cursors = this.input.
keyboard.createcursor
keys(); //... if(this.cursors.right.isdown) { // move player right } it works out of the box. the cursors are the four directional arrow
keys on the
keyboard, and these have exactly the same
key codes as the arrow
keys on the remote. how do you know the codes for the other...
...ys. captain rogers had the
keyboard controls implemented already: this.cursors = this.input.
keyboard.createcursor
keys(); //... if(this.cursors.right.isdown) { // move player right } it works out of the box. the cursors are the four directional arrow
keys on the
keyboard, and these have exactly the same
key codes as the arrow
keys on the remote. how do you know the codes for the other remote
keys? you can check them by printing the responses out in the console: window.addeventlistener("
keydown", function(event) { console.log(event.
keycode); }, this); every
key pressed on the remote will show its
key code in the console. you can also check this handy cheat sheet seen below if you're working with panasonic tvs running firefox os: you can add moving between states, starting a new g...
... } }, this); you can see it in action by watching this video. ...
...And 9 more matches
Software accessibility: Where are we today?
s of microsoft windows. these operating systems were not designed with the needs of people with disabilities in mind. many, including those who were blind or physically disabled, were unable to use applications which were written for microsoft operating systems. these applications assumed that computer users could: read and react to text and images displayed on the screen. type on a standard
keyboard. select text, pictures, and other information using a mouse react to sounds played. this tends to be somewhat less of a limitation in that most software doesn't rely exclusively on audio to relay feedback. if a person was unable to do one of the above-listed tasks, they found themselves unable to use many popular computer applications. here are some of the groups of people that have pro...
...accessibility hardware and software vendors created products and software which helped people who could not perform one of the four basic tasks to use common computer applications. ...
...asic tasks to use common computer applications. ...
...And 9 more matches
Mozilla’s UAAG evaluation report
good implementation, most important requirements satisfied p: poor implementation, some requirements satisfied and/or difficult for user to access feature ni: not implemented nr: not rated na: not applicable document under construction guideline 1. support input and output device-independence. checkpoint title status notes/plans 1.1 full
keyboard access. (p1) vg we have some remaining bugs, and some
keyboard usability issues, but in general mozilla now has
keyboard equivalents for almost everything. most browsers do not allow the user to select text with the
keyboard alone. we intend to do this with a caret browsing feature. 1.2 activate event handlers. (p1) p onmouseover, onmousedown, onmouseup, onmousemove,...
...(p1) c status line and alert boxes used to convey messages and alerts guideline 2. ensure user access to all content. ...
...onfiguration not to render some content that may reduce accessibility. checkpoint title status notes/plans 3.1 toggle background images. (p1) c preferences, appearance, colors - "use my chosen colors, ignoring the colors and background image specified" 3.2 toggle audio, video, animated images. (p1) p animated images can be made still with the escape
key animated images can be made still as a preference under preferences, privacy & security, images - "animated images should loop" mozilla has no preference or command to toggle audio or video 3.3 toggle animated/blinking text. (p1) p the following line can be added to a user's prefs.js file to control blinking: user_pref("browser.blink_allowed", false); bug 89144 has ...
...And 9 more matches
Gecko versions and application versions
the following table shows the various versions of gecko and what versions of common applications are based on them. note that after gecko 2.0, both firefox and thunderbird versions are from then on the same as the gecko version number, at gecko 5.0. ...
... the following table shows the various versions of gecko and what versions of common applications are based on them. note that after gecko 2.0, both firefox and thunderbird versions are from then on the same as the gecko version number, at gecko 5.0. ...
... versions of gecko and what versions of common applications are based on them. note that after gecko 2.0, both firefox and thunderbird versions are from then on the same as the gecko version number, at gecko 5.0. ...
...And 9 more matches
gtstd.html
ence that we are migrating into the format described in the mdn style guide. if you are inclined to help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference getting started with ssl chapter 2 getting started with ssl this chapter describes how to set up your environment, including certificate and
key databases. ssl, pkcs #11, and the default security databases setting up the certificate and
key databases building nss programs ssl, pkcs #11, and the default security databases the basic relationships among the nss libraries are described in introduction to network security services. before running the sample programs, it's important to understand the relationships between the ssl inte...
... available. a pkcs #11 module always has one or more slots, which may be implemented as physical hardware slots in some form of physical reader (for example, for smart cards) or as conceptual slots in software. each slot for a pkcs #11 module can in turn contain a token, which is the hardware or software device that actually provides cryptographic services and optionally stores certificates and
keys. netscape provides three built-in modules with nss and with server and client products: the default netscape internal pkcs #11 module comes with two built-in tokens: the generic crypto services token performs all cryptographic operations, such as encryption, decryption, and hashing. the communicator certificate db token handles all communication with the certificate and ...
...s. netscape provides three built-in modules with nss and with server and client products: the default netscape internal pkcs #11 module comes with two built-in tokens: the generic crypto services token performs all cryptographic operations, such as encryption, decryption, and hashing. the communicator certificate db token handles all communication with the certificate and
key database files (called certx.db and
keyx.db, respectively, where x is a version number) that store certificates and
keys. the fortezza module is intended for use with fortezza hardware tokens. the fips 140-1 module is compliant with the fips 140-1 government standard for implementations of cryptographic modules. many products sold to the u.s. government must comply with one or more ...
...And 9 more matches
Garbage collection
much of the gc work is performed on helper threads. principal data structures cell a cell is the unit of memory that is allocated and collected by the gc, as used externally. in other words, from the point of view of the rest of the engine, the job of the gc is to allocate cells and automatically collect them. cell is the base class for all classes that are allocated by the gc, e.g., jsobject. allocation kind cells are classified by allocation kind. the allocation kind determines the size of the object and the finalization behavior. allocation kind is defined by enum allockind. ...
...jsobject. allocation kind cells are classified by allocation kind. the allocation kind determines the size of the object and the finalization behavior. allocation kind is defined by enum allockind. arenas always hold objects of the same allocation kind. thus, an arena holds objects all of the same size and finalization behavior. compartments the js heap is partitioned into compartments. some
key properties of compartments are: every cell (js heap object) belongs to at most one compartment. (some cells are shared across all compartments in a zone.) an object may not hold a direct pointer to an object in another compartment. instead, it must store a wrapper for the other object. this allows compartments to be used for security checks: objects in the same compartment have the same acces...
... access requirements, so no checks are needed, but checks may be done when traversing cross-compartment wrappers. the engine may gc a single compartment without gcing the others. the engine can also gc a set of compartments without gcing the rest. cross-compartment wrappers are used as roots for single- and multi-compartment gcs. compartments are a fundamental cross-cutting concept in spidermon
key (see also compartments), though anything related to memory is now more concerned with zones, especially gc. zone a zone is a collection of compartments. zones mainly serve as boundaries for gcs: the garbage collector collects at the level of a zone, not an individual compartment. unlike compartments, zones have no special security properties. some properties of zones are: every compartment b...
...And 9 more matches
nsISessionStore
e/nsisessionstore.idlscriptable provides a means for extensions and other code to store data in association with browser sessions, tabs, and windows. the api operates on top-level browser.xul and navigator.xul windows; see note on windows for details. ...
...oduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) in versions of firefox prior to 3.5, the user preference browser.sessionstore.enabled must be true for these calls to be successful. starting in firefox 3.5, this preference is no longer used. ...
... 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) in versions of firefox prior to 3.5, the user preference browser.sessionstore.enabled must be true for these calls to be successful. starting in firefox 3.5, this preference is no longer used. ...
...And 9 more matches
Debugger.Object - Firefox Developer Tools
methods to inspect and modify its referent. the referent’s properties do not appear directly as properties of the debugger.object instance; the debugger can access them only through methods like debugger.object.prototype.getownpropertydescriptor and debugger.object.prototype.defineproperty, ensuring that the debugger will not inadvertently invoke the referent’s getters and setters. spidermon
key creates exactly one debugger.object instance for each debuggee object it presents to a given debugger instance: if the debugger encounters the same object through two different routes (perhaps two functions are called on the same object), spidermon
key presents the same debugger.object instance to the debugger each time. this means that the debugger can use the == operator to recognize when two de...
...rent is viewed. if more than one debugger instance is debugging the same code, each debugger gets a separate debugger.object instance for a given object. this allows the code using each debugger instance to place whatever properties it likes on its own debugger.object instances, without worrying about interfering with other debuggers. while most debugger.object instances are created by spidermon
key in the process of exposing debuggee’s behavior and state to the debugger, the debugger can use debugger.object.prototype.makedebuggeevalue to create debugger.object instances for given debuggee objects, or use debugger.object.prototype.copy and debugger.object.prototype.create to create new objects in debuggee compartments, allocated as if by particular debuggee globals. debugger.object instan...
...mple). class a string naming the ecmascript [[class]] of the referent. callable true if the referent is a callable object (such as a function or a function proxy); false otherwise. name the name of the referent, if it is a named function. if the referent is an anonymous function, or not a function at all, this is undefined. this accessor returns whatever name appeared after the function
keyword in the source code, regardless of whether the function is the result of instantiating a function declaration (which binds the function to its name in the enclosing scope) or evaluating a function expression (which binds the function to its name only within the function’s body). displayname the referent’s display name, if the referent is a function with a display name. if the referen...
...And 9 more matches
IDBCursor - Web APIs
st an idbcursor interface with an additional value property. the idbcursor interface of the indexeddb api represents a cursor for traversing or iterating over multiple records in a database. the cursor has a source that indicates which index or object store it is iterating over. it has a position within the range, and moves in a direction that is increasing or decreasing in the order of record
keys. the cursor enables an application to asynchronously process all the records in the cursor's range. you can have an unlimited number of cursors at the same time. you always get the same idbcursor object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web workers. properties note: idbcursorwithvalue is an idbcu...
...y. idbcursor.source read only returns the idbobjectstore or idbindex that the cursor is iterating. this function never returns null or throws an exception, even if the cursor is currently being iterated, has iterated past its end, or its transaction is not active. idbcursor.direction read only returns the direction of traversal of the cursor. see constants for possible values. ...
... only returns the idbobjectstore or idbindex that the cursor is iterating. this function never returns null or throws an exception, even if the cursor is currently being iterated, has iterated past its end, or its transaction is not active. idbcursor.direction read only returns the direction of traversal of the cursor. see constants for possible values. idbcursor.
key read only returns the
key for the record at the cursor's position. if the cursor is outside its range, this is set to undefined. the cursor's
key can be any data type. idbcursor.primary
key read only returns the cursor's current effective primary
key. if the cursor is currently being iterated or has iterated outside its range, this is set to undefined. the cursor's primary
key can be any data type. idbcursor.request re...
...And 9 more matches
SubtleCrypto.encrypt() - Web APIs
c the encrypt() method of the subtlecrypto interface encrypts data. it takes as its arguments a
key to encrypt with, some algorithm-specific parameters, and the data to encrypt (also known as "plaintext"). it returns a promise which will be fulfilled with the encrypted data (also known as "ciphertext"). syntax const result = crypto.subtle.encrypt(algorithm,
key, data); parameters algorithm is an object specifying the algorithm to be used and any extra parameters if 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.
key is a crypto
key containing the
key to be used for encryption. data is a buffersource containing ...
... operationerror raised when the operation failed for an operation-specific reason (e.g. algorithm parameters of invalid sizes, or aes-gcm plaintext longer than 2³⁹−256 bytes). supported algorithms the web crypto api provides four algorithms that support the encrypt() and decrypt() operations. ...
...source containing the data to be encrypted (also known as the plaintext). return value result is a promise that fulfills with an arraybuffer containing the "ciphertext". exceptions the promise is rejected when the following exceptions are encountered: invalidaccesserror raised when the requested operation is not valid for the provided
key (e.g. invalid encryption algorithm, or invalid
key for the specified encryption algorithm). operationerror raised when the operation failed for an operation-specific reason (e.g. algorithm parameters of invalid sizes, or aes-gcm plaintext longer than 2³⁹−256 bytes). supported algorithms the web crypto api provides four algorithms that support the encrypt() and decrypt() operations. one of these algorithms — rsa-oaep — is a publi...
...And 9 more matches
SubtleCrypto.sign() - Web APIs
the sign() method of the subtlecrypto interface generates a digital signature. it takes as its arguments a
key to sign with, some algorithm-specific parameters, and the data to sign. it returns a promise which will be fulfilled with the signature. you can use the corresponding subtlecrypto.verify() method to verify the signature. syntax const signature = crypto.subtle.sign(algorithm,
key, data); parameters algorithm is a string or object that specifies the signature algorithm to use and its parameters: to use rsassa-pkcs1-v1_5, pass the string "rsassa-pkcs1-v1_5" or an object of the form { "name": "rsassa-pkcs1-v1_5" }. to use rsa-pss, pass an rsapssparams object. to use ecdsa, pass an ecdsaparams object. to use hmac, pass the string "hmac" or an object of the form...
... is a string or object that specifies the signature algorithm to use and its parameters: to use rsassa-pkcs1-v1_5, pass the string "rsassa-pkcs1-v1_5" or an object of the form { "name": "rsassa-pkcs1-v1_5" }. to use rsa-pss, pass an rsapssparams object. to use ecdsa, pass an ecdsaparams object. to use hmac, pass the string "hmac" or an object of the form { "name": "hmac" }.
key is a crypto
key object containing the
key to be used for signing. if algorithm identifies a public-
key cryptosystem, this is the private
key. data is an arraybuffer or arraybufferview object containing the data to be signed. return value signature is a promise that fulfills with an arraybuffer containing the signature. exceptions the promise is rejected when the following exception is enc...
...signing. if algorithm identifies a public-
key cryptosystem, this is the private
key. data is an arraybuffer or arraybufferview object containing the data to be signed. return value signature is a promise that fulfills with an arraybuffer containing the signature. exceptions the promise is rejected when the following exception is encountered: invalidaccesserror raised when the signing
key is not a
key for the request signing algorithm or when trying to use an algorithm that is either unknown or isn't suitable for signing. supported algorithms the web crypto api provides four algorithms that can be used for signing and signature verification. ...
...And 9 more matches
Detecting CSS animation support - CSS: Cascading Style Sheets
be times when this feature isn't available, and you may wish to handle that case by using javascript code to simulate a similar effect. this article, based on this blog post by chris heilmann, demonstrates a technique for doing this. ...
...we assume that animation is not supported by setting animation to false. we set the animationstring to animation which is the property we want to set later on. we create an array of browser prefixes to loop over and we set pfx to an empty string. then we check if...
...fixed animation and animation is still false, we iterate over all the possible prefixes, since all the major browsers are currently prefixing this property and changing its name to animationname instead. once this code is finished running, the value of animation will be false if css animation support isn't available, or it will be true. if it is true then both the animation property name and the
keyframe prefix will be the right ones. so if you use a new firefox, the property will be mozanimation and the
keyframe prefix -moz- and with chrome it'll be webkitanimation and -webkit-. notice browsers don't make it easy with the switching between camelcase and hyphen-ation. animating using the correct syntax for different browsers now that you know if css animation is supported or not, we can an...
...And 9 more matches
JSON.stringify() - JavaScript
rd with the traditional conversion semantics. undefined, functions, and symbols are not valid json values. if any such values are encountered during conversion they are either omitted (when found in an object) or changed to null (when found in an array). json.stringify() can return undefined when passing in "pure" values like json.stringify(function(){}) or json.stringify(undefined). all symbol-
keyed properties will be completely ignored, even when using the replacer function. the instances of date implement the tojson() function by returning a string (the same as date.toisostring()). thus, they are treated as strings. the numbers infinity and nan, as well as the value null, are all considered null. all the other object instances (including map, set, weakmap, and weakset) will have only ...
...[1, 'false', false]); // '[1,"false",false]' json.stringify([nan, null, infinity]); // '[null,null,null]' json.stringify({ x: 5 }); // '{"x":5}' json.stringify(new date(2006, 0, 2, 15, 4, 5)) // '"2006-01-02t15:04:05.000z"' json.stringify({ x: 5, y: 6 }); // '{"x":5,"y":6}' json.stringify([new number(3), new string('false'), new boolean(false)]); // '[3,"false",false]' // string-
keyed array elements are not enumerable and make no sense in json let a = ['foo', 'bar']; a['baz'] = 'quux'; // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ] json.stringify(a); // '["foo","bar"]' json.stringify({ x: [10, undefined, function(){}, symbol('')] }); // '{"x":[10,null,null,null]}' // standard data structures json.stringify([new set([1]), new map([[1, 2]]), new weakset([{a: 1}]), new weakma...
...// non-enumerable properties: json.stringify( object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) ); // '{"y":"y"}' // bigint values throw json.stringify({x: 2n}); // typeerror: bigint value can't be serialized in json the replacer parameter the replacer parameter can be either a function or an array. as a function, it takes two parameters: the
key and the value being stringified. the object in which the
key was found is provided as the replacer's this parameter. initially, the replacer function is called with an empty string as
key representing the object being stringified. it is then called for each property on the object or array being stringified. it should return the value that should be added to the json string, as follows: if yo...
...And 9 more matches
jspage - Archive of obsolete content
{var a=""; var c=this.replace(/<script[^>]*>([\s\s]*?)<\/script>/gi,function(){a+=arguments[1]+"\n";return"";});if(b===true){$exec(a);}else{if($type(b)=="function"){b(a,c); }}return c;},substitute:function(a,b){return this.replace(b||(/\\?{([^{}]+)}/g),function(d,c){if(d.charat(0)=="\\"){return d.slice(1);}return(a[c]!=undefined)?a[c]:""; });}});hash.implement({has:object.prototype.hasownproperty,
keyof:function(b){for(var a in this){if(this.hasownproperty(a)&&this[a]===b){return a;}}return null; },hasvalue:function(a){return(hash.
keyof(this,a)!==null);},extend:function(a){hash.each(a||{},function(c,b){hash.set(this,b,c);},this);return this;},combine:function(a){hash.each(a||{},function(c,b){hash.include(this,b,c); },this);return this;},erase:function(a){if(this.hasownproperty(a)){delete this[...
...et(d,b.call(c,e,d,this)); },this);return a;},filter:function(b,c){var a=new hash;hash.each(this,function(e,d){if(b.call(c,e,d,this)){a.set(d,e);}},this);return a;},every:function(b,c){for(var a in this){if(this.hasownproperty(a)&&!b.call(c,this[a],a)){return false; }}return true;},some:function(b,c){for(var a in this){if(this.hasownproperty(a)&&b.call(c,this[a],a)){return true;}}return false;},get
keys:function(){var a=[]; hash.each(this,function(c,b){a.push(b);});return a;},getvalues:function(){var a=[];hash.each(this,function(b){a.push(b);});return a;},toquerystring:function(a){var b=[]; hash.each(this,function(f,e){if(a){e=a+"["+e+"]";}var d;switch($type(f)){case"object":d=hash.toquerystring(f,e);break;case"array":var c={};f.each(function(h,g){c[g]=h; });d=hash.toquerystring(c,e);break;defa...
...a=[];hash.each(this,function(b){a.push(b);});return a;},toquerystring:function(a){var b=[]; hash.each(this,function(f,e){if(a){e=a+"["+e+"]";}var d;switch($type(f)){case"object":d=hash.toquerystring(f,e);break;case"array":var c={};f.each(function(h,g){c[g]=h; });d=hash.toquerystring(c,e);break;default:d=e+"="+encodeuricomponent(f);}if(f!=undefined){b.push(d);}});return b.join("&");}});hash.alias({
keyof:"indexof",hasvalue:"contains"}); var event=new native({name:"event",initialize:function(a,f){f=f||window;var k=f.document;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type; var g=a.target||a.srcelement;while(g&&g.nodetype==3){g=g.parentnode;}if(j.test(/
key/)){var b=a.which||a.
keycode;var m=event.
keys.
keyof(b);if(j=="
keydown"){var d=b-111; if(d>0&&d<13){m="f"+d;}}m=m||strin...
...And 8 more matches
Using the Editor from XUL - Archive of obsolete content
t is called, which causes the nseditorshell to display a dialog asking the user if they want to save the document, throw away their changes, or cancel. note that if they cancel, the close operation is aborted. the user clicks the close widget in their os/window manager. in this case, the onclose method on the <window> element is called. the user chooses 'close' from the file menu, uses the
key shortcut, or quits the application, causing all windows to be closed. before each window is closed, javascript code in globaloverlay.js tries to call a trytoclose method on each window. in editor.js, we set this to call editorcanclose(). if the user chooses to save the document, or throw away their changes, then the window is closed. when the last reference to the nseditorshell goes away (as a ...
... in editor.js, we set this to call editorcanclose(). if the user chooses to save the document, or throw away their changes, then the window is closed. when the last reference to the nseditorshell goes away (as a result of nseditorboxobject releasing its reference) it releases the owning reference on the editor. editor event handling editing operations happen in response to user events: mouse,
key, drag and drop, and ime (international text input) events. in order to receive these events, the editor registers several event listeners on the document being edited. in addition, editor actions in the user interface are propagated via the xul and javascript, and call methods on the nseditorshell. this editor command dispatching is described separately. the following event listeners are registe...
..., editor actions in the user interface are propagated via the xul and javascript, and call methods on the nseditorshell. this editor command dispatching is described separately. the following event listeners are registered: in nshtmleditor::installeventlisteners(), we install the following. these get installed for all types of editor (i.e. ...
...And 8 more matches
toolbar - Archive of obsolete content
when set to false, the default, the toolbar is visible. this only has an...
...when set to false, the default, the toolbar is visible. this only has an effect on windows and needs to be combined with type="menubar" a...
...ame properties accessibletype, currentset, firstpermanentchild, lastpermanentchild, toolbarname, toolboxid methods insertitem style classes chromeclass-toolbar examples <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton id="nav-users" access
key="u" label="users"/> <toolbarbutton id="nav-groups" access
key="p" label="groups"/> <toolbarbutton id="nav-events" access
key="e" label="events" disabled="true"/> </toolbar> </toolbox> attributes autohide type: boolean when set to true, the toolbar will be invisible unless the alt
key is pressed by the user. when set to false, the default, the toolbar is visible. this only has an effect on windows and needs to be combined with type="menubar" and a menubar element. currentset not in seamon
key 1.x type...
...And 8 more matches
Digital Signatures - Archive of obsolete content
tamper detection and related authentication techniques rely on a mathematical function called a one-way hash (also called a message digest). ...
...ge digest). a one-way hash is a number of fixed length with the following characteristics: the value of the hash is unique for the hashed data. any change in the data, even deleting or altering a single character, results in a different value. ...
...way hash is a number of fixed length with the following characteristics: the value of the hash is unique for the hashed data. any change in the data, even deleting or altering a single character, results in a different value. ...
...And 8 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
s issues, and more besides. 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. objective: learn some advanced svelte techniques involving solving reactivity issues,
keyboard accessibility problems to do with component lifecycle, and more. we'll focus on some accessibility issues involving focus management. to do so, we'll utilize some techniques for accessing dom nodes and executing methods like focus() and select(). we will also see how to declare and clean-up event listeners on dom elements. we also need to learn a bit about component lifecycle, to und...
... if you click on the input at the top of our app, you'll s...
... on:checkall={e => checkalltodos(e.detail)} on:removecompleted={removecompletedtodos} /> working with the dom: focusing on the details now that we have completed all of the app's required functionality, we'll concentrate on some accessibility features that will improve the usability of our app for both
keyboard-only and screenreader users. in its current state our app has a couple of
keyboard accessibility problems involving focus management. let's have a look at these issues. exploring
keyboard accessibility issues in our todo app right now,
keyboard users will find out that the focus flow of our app is not very predictable or coherent. if you click on the input at the top of our app, you'll see a thick, dashed outline around that input. this outline is your visual indicator ...
...And 8 more matches
Localization content best practices
lizers are volunteers with very diverse technical skills: some of them rely exclusively on translation tools, others prefer to work directly with text editors and don't have problems working with vcs systems. it's important to consider this when adding strings, and especially localization comments for strings that contain references, or obscure technical details. localization files choose good
key ids the ids (names) chosen for your
keys, regardless of the file format, should always be descriptive of the string, and its role in the interface (button label, title, etc.). think of them as long variable names. when you have to change a
key id, adding a progressive number to the existing
key should always be used as a last resort. for example, suppose this string needs to be changed from "eve...
...depending on the parser logic, one of these two translations will be ignored. ...
...depending on the parser logic, one of these two translations will be ignored. ...
...And 8 more matches
NSS reference
random number generation this api consists of the two routines used for ...
... random number generation this api consists of the two routines used for pseudorandom nu...
... random number generation this api consists of the two routines used for pseudorandom number generation -- p...
...And 8 more matches
FOSS
feel free to add your own spidermon
key-based open source projects (and if necessary add categories)! ...
... feel free to add your own spidermon
key-based open source projects (and if necessary add categories)! ...
...eel free to add your own spidermon
key-based open source projects (and if necessary add categories)! ...
...And 8 more matches
Signing Mozilla apps for Mac OS X
ld provide some insight into how to make sure applications are signed correctly using apple's codesign tool. apple's code signing guide is also a good resource on the subject. getting a signing certificate in order to code-sign an application, you need a signing certificate. while testing and debugging for test and debug purposes, the easiest way to get a signing certificate is to use apple's
keychain feature to create one. there are good instructions available under "to use the certificate assistant to create a self-signed signing identity". for release creating a developer id requires a paid apple developer account. once you have that you can do the following to create your id: open the developer certificate utility. click "certificates" from the left hand menu. click "create a c...
...have that you can do the following to create your id: open the developer certificate utility. click "certificates" from the left hand menu. click "create a certificate" at the top right corner select the "developer id" radio button and uncheck the "developer id installer certificate" box. click "create" and follow the instructions in the wizard. it will guide you through creating a private
key, certificate signing request, and importing your new developer id into the
keychain access application on your mac. if the "developer id" radio button is greyed out you probably have a group account. these types of accounts only allow for the "agent" role to create developer ids. contact the person who created your group apple developer account if you get stuck here. the codesign tool apple pr...
...led codesign; this command-line application is used to add a signature to an application bundle. the man page for codesign is available online, or you can simply type "man codesign" in a terminal window. the main options of note are: -s your-signing-identity lets you specify the signing certificate you want to sign the application with your-signing-identity is the name of your certificate. --
keychain /path/to/
keychain lets you specify which
keychain contains the signing certificate specified by your-signing-identity, rather than allowing the codesign to search the
keychain list. the path specified must be a full path; it's usually something similar to /users/username/library/
keychains/
keychain-name.
keychain. --resource-rules /path/to/coderesources specifies a file to use when generati...
...And 8 more matches
nsIDBFolderInfo
nsidbfolderinfo - careful, pulled from the wrong (cvs) repo! mailnews/db/msgdb/public/nsidbfolderinfo.idlscriptable ??? add brief description of interface ??? inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) implemented by: ?????????????????????????????????????. to create an instance, use: implemented by: ????????????????????????????????????? as a service: var dbfolderinfo = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsidbfolderinfo); method overview long andflags(in long flags); void changeexpungedbytes(in long delta); void changenummessages(in long delta); void changenumunreadmessages(...
...obsolete since gecko 1.8 void setmailboxname(in nsstring newboxname); native code only! obsolete since gecko 1.8 void setproperty(in string propertyname, in astring propertystr); void setuint32property(in string propertyname, in unsigned long property...
...xname); native code only! ...
...And 8 more matches
WebIDL bindings
js::mutablehandle<jsobject*> retval); interface types there are four kinds of interface types in the webidl bindings. callback interfaces are used to represent script objects that browser code can call into. external interfaces are used to represent objects that have not been converted to the webidl bindings yet. webidl interfaces are used to represent webidl binding objects. "spidermon
key" interfaces are used to represent objects that are implemented natively by the javascript engine (e.g., typed arrays). callback interfaces callback interfaces are represented in c++ as objects inheriting from mozilla::dom::callbackinterface, whose name, in the mozilla::dom namespace, matches the name of the callback interface in the webidl. the exact representation depends on how the type is be...
... for example, this webidl: interface test { void passtypedarraybuffer(arraybuffer arg); void passtypedarray(arraybufferview arg); void passint16array(int16array? arg); } will correspond to these c++ function declarations: void passtypedarraybuffer(const arraybuffer& ar...
...long>; }; the bindings for this interface will generate the storage structure for the map, as well as helper functions for accessing that structure from c++. ...
...And 8 more matches
Attestation and Assertion - Web APIs
there are two different types of certificates used in webauthn for registration and authentication. they have similar names and similar purposes, but understanding the differences may be an initial point of confusion. the sections below describe attestation, which happens during registration, and assertion which happens during authentication. attestation when an authenticator registers a new
key pair with a service, the authenticator signs the public
key with an attestation certificate. the attestation certificate is built into the authenticator during manufacturing time and is specific to a device model. that is, all "samsung galaxy s8" phones, manufactured at a specific time or particular manufacturing run, have the same attestation certificate. the attestation is returned throug...
...ve the same attestation certificate. the attestation is returned through the webauthn api as the authenticatorattestationresponse. the attestation format contains two basic arraybuffers: clientdatajson - an arraybuffer that contains a json representation of what the browser saw when being asked to authenticate. attestationobject - cryptographic attestation that a newly generated
keypair was created by that authenticator. contains authenticator data and an attestation statement. the authenticator data contains an attestedcredentialdata field. the attestedcredentialdata field contains the credentialid and credentialpublic
key. (the authenticator data is the same structure that is used in the authenticatorassertionresponse. the attestedcredentialdata is an optional field used in...
...he attestedcredentialdata is an optional field used in attestation. it is not included when used in the authenticatorassertionresponse.) different devices have different attestation formats. ...
...And 8 more matches
ARIA: grid role - Accessibility
the grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be focused using
keyboard input. <table role="grid" aria-labelledby="id-select-your-seat"> <caption id="id-select-your-seat">select your seat</caption> <tbody role="presentation"> <tr role="presentation"> <td></td> <th>row a</th> <th>row b</th> </tr> <tr> <th scope="row">aisle 1</th> <td tabindex="0"> <button id="1a" tabindex="-1">1a</button> </td> <td tabindex="-1"> <button id="1b" tabindex="-1">1b</button> </td> <!-- more columns --> </tr> <tr> <th scope="row">aisle 2</th> <td tabindex="-1"> <button id="2a" tabindex="-1">2a</button> </td> <td tabi...
...e it does not imply a specific visual presentation, it implies a relationship among elements. uses fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids). ...
... associated aria roles, states, and properties roles treegrid (subclass) if a grid has columns that can expanded or collapsed, a treegrid can be used. row a row inside the grid. rowgroup a group containing one or multiple rows. ...
...And 8 more matches
background-size - CSS: Cascading Style Sheets
ive 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. spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency. ...
... using a width value only, in which case the height defaults to auto. using both a width and a height value, in which case the first sets the width and the second sets the height. each value can be a <length>, a <percentage>, or auto. to specify the size of multiple background images, separate the value for each one with a comma. values contain scales the imag...
...trinsic proportions. if it has no dimensions or only one dimension, it may or may not have proportions. css <gradient>s have no intrinsic dimensions or intrinsic proportions. background images created with the element() function use the intrinsic dimensions and proportions of the generating element. note: the behavior of <gradient>s changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5). before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area. note: in gecko, background images created using the element() function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is svg, with the corresponding intrinsic p...
...And 8 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
html5 datetime-local a control for entering a date and time, with no time zone. opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. <input type="datetime-local" name="datetime-local"/> html5 email a field for editing an email address. looks like a text input, but has validation parameters and relevant
keyboard in supporting browsers and devices with dynamic
keyboards. <input type="email" name="email"/> html5 file a control that lets the user select a file. use the accept attribute to define the types of files that the control can select. <input type="file" accept="image/*, text/*" name="file"/> hidden a control that is not displayed but whose ...
...the alt attribute displays if the image src is missing. <input type="image" name="image" src="" alt="image input"/> month a control for entering a month and year, with no time zone. <input type="month" name="month"/> html5 number a control for entering a number. displays a spinner and adds default validation when supported. displays a numeric
keypad in some devices with dynamic
keypads. <input type="number" name="number"/> html5 password a single-line text field whose value is obscured. will alert user if site is not secure. <input type="password" name="password"/> radio a radio button, allowing a single value to be selected out of multiple choices with the same name value. ...
...set a button that resets the contents of the form to default values. not recommended. <input type="reset" name="reset"/> search a single-line text field for entering search strings. line-breaks are automatically removed from the input value. may include a delete icon in supporting browsers that can be used to clear the field. displays a search icon instead of enter
key on some devices with dynamic
keypads. <input type="search" name="search"/> html5 submit a button that submits the form. <input type="submit" name="submit"/> tel a control for entering a telephone number. displays a telephone
keypad in some devices with dynamic
keypads. <input type="tel" name="tel"/> html5 text the...
...And 8 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
re. 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 locale includes the name and shortcut
keys for the sidebar. example 2. chrome/locale/emptysidebar.dtd <!entity emptysidebar.title "emptysidebar"> <!entity openemptysidebar.command
key "e"> <!entity openemptysidebar.modifiers
key "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3. it creates a page holding one label. other elements can be included, please read the xul tutorials for more ...
...s for more information. example 3. chrome/content/emptysidebar.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?> <!doctype page system "chrome://emptysidebar/locale/emptysidebar.dtd"> <page id="sbemptysidebar" title="&emptysidebar.title;" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" > <vbox flex="1"> <label id="atest" value="&emptysidebar.title;" /> </vbox> </page> new extensions can be registered in the menus or popups, firefox uses overlays for extending menus. this is an separate xul file that specifies the location of menu items. the sidebar here is added to the view | sidebar menu. the overlay file is listed in example 4. ...
...tending menus. this is an separate xul file that specifies the location of menu items. the sidebar here is added to the view | sidebar menu. the overlay file is listed in example 4. example 4. ...
...And 7 more matches
How to Write and Land Nanojit Patches - Archive of obsolete content
adobe and mozilla share a copy of nanojit. this means that landing nanojit patches is a bit complicated, but experience has taught us that this is much better than having separate versions of nanojit. ...
...adobe and mozilla share a copy of nanojit. this means that landing nanojit patches is a bit complicated, but experience has taught us that this is much better than having separate versions of nanojit. ...
...th...
...And 7 more matches
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
however, you may wish to trap the events and handle them in a special way. you can add event handlers to the elements inside the content if needed. the last example in the previous section demonstrated this. in that example, oncommand handlers were added to some buttons. ...
...utton attribute should be set to either 0 for the left mouse button, 1 for the middle mouse button or 2 for the right mouse button. ...
... should be set to either 0 for the left mouse button, 1 for the middle mouse button or 2 for the right mouse button. ...
...And 7 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
n, server-side javascript is seeing a strong resurgence because of the simplicity it provides to web developers reinvigorated by the fact that today's cpus can process javascript more than 10x faster than the cpus of the mid-90's ever could. and just like before, it's the mozilla team that's at the core of this latest evolution of the web. in fact, the next javascript engine from mozilla, tracemon
key, is poised to boost javascript performance by factors of 20 to 40 times according to brendan eich, mozilla cto and the creator of javascript. in recent developments we also see the advent of other performant engines for javascript such as v8 from google and squirrelfish for webkit, these engines are raising the bar on performance and help to maintain a competitive environment that will hopefully ...
...uirrelfish for webkit, these engines are raising the bar on performance and help to maintain a competitive environment that will hopefully direct competitive focus on the performance aspect of all the major javascript implementations. there are currently two main javascript engines used server-side and both are from the minds at mozilla: mozilla rhino and mozilla spidermon
key. rhino is a javascript interpreter written in java that can also bridge javascript to java server-side. steve yegge of google has been doing interesting work with this engine. spidermon
key on the other hand is the javascript engine (written in c) in the highly popular mozilla firefox browser. spidermon
key is what will evolve to become tracemon
key. in addition, the jaxer “ajax server” (a proje...
...avascript to java server-side. steve yegge of google has been doing interesting work with this engine. spidermon
key on the other hand is the javascript engine (written in c) in the highly popular mozilla firefox browser. spidermon
key is what will evolve to become tracemon
key. in addition, the jaxer “ajax server” (a project i work on at aptana) is an example of ssjs that uses not only spidermon
key, but also embeds the entire firefox browser engine in the application server such that you can do server-side dom manipulation and other ajaxy things server-side that rhino was not built to do. let's take a look at various ssjs implementations and some examples of putting them to use. server-side javascript (ssjs) via embedded javascript engines the ex...
...And 7 more matches
CSS and JavaScript accessibility best practices - Learn web development
ollowing image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links. something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using
keyboard controls. form elements elements to allow users to input data into websites: <div> <label for="name">enter your name</label> <input type="text" id="name" name="name"> </div> you can see some good example css in our form-css.html example (see it live also). most of the css you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking ne...
... 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 also
keyboard accessible — you can alternatively use tab and enter/return to select them). screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. absolute positioning (as used in this example) is generally seen as one of the best mechanisms of hiding content for visual effect, because it doesn't stop sc...
...d games. there is no rule that says all content has to be 100% accessible to all people — you just need to do what you can, and make your apps as accessible as possible. simple content and functionality is arguably easy to make accessible — for example text, images, tables, forms and push button that activate functions. as we looked at in our html: a good basis for accessibility article, the
key considerations are: good semantics: using the right element for the right job. for example, making sure you use headings and paragraphs, and <button> and <a> elements making sure content is available as text, either directly as text content, good text labels for form elements, or text alternatives, e.g. alt text for images. we also looked at an example of how to use javascript to build in f...
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
way you want. for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in
keyboard accessibility — users can navigate between buttons using the tab
key and activate their selection using return or enter. semantic html doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you get some f...
... project. even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand. better on mobile — semantic html is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive. good for seo — search engines give more importance to
keywords inside headings, links, etc. than
keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers. let's get on and look at accessible html in more detail. note: it is a good idea to have a screen reader set up on your local computer so that you can do some testing of the examples shown below. see our screen readers guide for more details. good sema...
...der users get read out to them will make sense. ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. in this section, we'll look at the basic accessibility concerns to be aware of when creating such controls. later articles on wai-aria and multimedia will look at other aspects of ui accessibility. one
key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the
keyboard. you can try this out using our native-
keyboard-accessibility.html example (see the source code). open this in a new tab, and try pressing the tab
key; after a few presses, you should see the tab focus start to move through the different focusable elements. the focused elements are...
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
way you want. for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in
keyboard accessibility — users can navigate between buttons using the tab
key and activate their selection using return or enter. semantic html doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you get some f...
... project. even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand. better on mobile — semantic html is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive. good for seo — search engines give more importance to
keywords inside headings, links, etc. than
keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers. let's get on and look at accessible html in more detail. note: it is a good idea to have a screen reader set up on your local computer so that you can do some testing of the examples shown below. see our screen readers guide for more details. good sema...
...der users get read out to them will make sense. ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. in this section, we'll look at the basic accessibility concerns to be aware of when creating such controls. later articles on wai-aria and multimedia will look at other aspects of ui accessibility. one
key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the
keyboard. you can try this out using our native-
keyboard-accessibility.html example (see the source code). open this in a new tab, and try pressing the tab
key; after a few presses, you should see the tab focus start to move through the different focusable elements. the focused elements are...
...And 7 more matches
The HTML5 input types - Learn web development
ses the browser to display an error when the form is submitted. you can see this in action in the below screenshot. you can also use the multiple attribute in combination with the email input type to allow several email addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, touch devices with dynamic
keyboards like smart phones — a different virtual
keypad might be presented that is more suitable for entering email addresses, including the @
key. see the firefox for android
keyboard screenshot below for an example: note: you can find examples of the basic text input types at basic input examples (see the source code also). this is another good reason for using these newer input types — ...
...f field is set by using the value search for the type attribute: <input type="search" id="search" name="search"> the main difference between a text field and a search field is how the browser styles its appearance. often, search fields are rendered with rounded corners; they also sometimes display an "Ⓧ", which clears the field of any value when clicked). additionally, on devices with dynamic
keyboards, the
keyboard's enter
key may read "search", or display a magnifying glass icon. the below screenshots show a non-empty search field in firefox 71, safari 13, and chrome 79 on macos, and edge 18 and chrome 79 on windows 10. note that the clear icon only appears if the field has a value, and, apart from safari, it is only displayed when the field is focused. another feature worth noting ...
...f a search field can be automatically saved and re-used to offer auto-completion across multiple pages of the same website; this tends to happen automatically in most modern browsers. ...
...And 7 more matches
NSS 3.21 release notes
sutil_mkmodulespecex - take a shared library string, module name string, module parameters string, nss specific parameters string, and nss configuration parameter string and returns a module string which the caller must free when it is done. the difference with nss_mkmodulespec is the new function handles nss configuration parameter strings. ...
..., module parameters string, nss specific parameters string, and nss configuration parameter string and returns a module string which the caller must free when it is done. the difference with nss_mkmodulespec is the new function handles nss configuration parameter strings. ...
...ing, nss specific parameters string, and nss configuration parameter string and returns a module string which the caller must free when it is done. the difference with nss_mkmodulespec is the new function handles nss configuration parameter strings. ...
...And 7 more matches
How to embed the JavaScript engine
see also jsapi user guide. in particular, it has more and better code examples! a bare bones tutorial hello world sample embedding application the following code is a very simple application that shows how to embed spidermon
key and run a simple javascript script. see the instructions for building and running the sample below the code. the code differs for each spidermon
key version, please choose right version for your spidermon
key. spidermon
key 24 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the global object. */ static jsclass global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumerates...
...*/ static jsclass global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, nu...
...*/ static jsclass global_class = { "global", jsclass_global_flags, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, js_globalobjecttr...
...And 7 more matches
JS::PersistentRooted
initial t an initial value for the persistent rooted variable. ...
... initial t an initial value for the persistent rooted variable. ...
...ch to add the root. initial t an initial value for the persistent rooted variable. methods here, ptr represents the private member of js::persistentrooted<t>, typed with t. method description void init(jscontext* cx) initialize with optional initial value (if not provided, it will be initialized with the initial value of the type). added in spidermon
key 38 void init(jscontext* cx, t initial) void init(jsruntime* rt) void init(jsruntime* rt, t initial) void reset() reset the value to initial value of the type. added in spidermon
key 38 t& get() returns ptr. const t& get() const operator const t&() const const t& operator->() const t* address() returns a point...
...And 7 more matches
Shell global objects
there may be some difference between each versions. you can get the list of functions by help() function in js shell. variables scriptargs an array that contains arguments passed to js shell. scriptpath a string that is a path of script. ...
...there may be some difference between each versions. you can get the list of functions by help() function in js shell. variables scriptargs an array that contains arguments passed to js shell. scriptpath a string that is a path of script. ...
...r. nestedshell(shellargs...) execute the given code in a new js shell process, passing this nested shell the arguments passed to nestedshell. argv[0] of the nested shell will be argv[0] of the current shell (which is assumed to be the actual path to the shell. arguments[0] (of the call to nestedshell) will be argv[1], arguments[1] will be argv[2], etc. assertfloat32(value, isfloat32) in ionmon
key only, asserts that value has (resp. hasn't) the mirtype::float32 if isfloat32 is true (resp. false). assertrecoveredonbailout(var) in ionmon
key only, asserts that variable has recoveredonbailout flag. withsourcehook(hook, fun) set this js runtime's lazy source retrieval hook (that is, the hook used to find sources compiled with compileoptions::lazy_source) to hook; call fun with no arguments;...
...And 7 more matches
IAccessibleAction
he native gui beyond the methods available either in the msaa iaccessible interface or in the set of iaccessible2 interfaces (other than this iaccessibleaction interface) should support the iaccessibleaction interface in order to provide assistive technology access to all the actions that can be performed by the object. each action can be performed or queried for a name, description or associated
key bindings. actions are needed more for ats that assist the mobility impaired, such as on-screen
keyboards and voice command software. by providing actions directly, the at can present them to the user without the user having to perform the extra steps to navigate a context menu. the first action should be equivalent to the msaa default action. if there is only one action, iaccessibleaction should ...
... them to the user without the user having to perform the extra steps to navigate a context menu. the first action should be equivalent to the msaa default action. if there is only one action, iaccessibleaction should also be implemented. ...
...uld be equivalent to the msaa default action. if there is only one action, iaccessibleaction should also be implemented. method overview [propget] hresult description([in] long actionindex, [out] bstr description ); hresult doaction([in] long actionindex ); [propget] hresult
keybinding([in] long actionindex, [in] long nmaxbindings, [out, size_is(,nmaxbindings), length_is(, nbindings)] bstr
keybindings, [out] long nbindings ); [propget] hresult localizedname([in] long actionindex, [out] bstr localizedname ); hresult nactions([out,retval] long nactions ); [propget] hresult name([in] long actionindex, [out] bstr name ); methods description() returns a description of the specified action of the object. [propget] hresult description( [in] long actionindex, [out] bstr descriptio...
...And 7 more matches
nsIAppShellService
xpfe/appshell/nsiappshellservice.idlscriptable provides the appshellservice. ...
...erquit 1 attempt to quit if all windows are closed. obsolete since gecko 1.8 eattemptquit 2 try to close all windows, then quit if successful. obsolete since gecko 1.8 eforcequit 3 force all windows to close, then quit. obsolete since gecko 1.8 methods closetoplevelwindow() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) close a window. void closetoplevelwindow( in nsixulwindow awindow ); parameters awindow a window. native code only!createhiddenwindow creates a hidden window. void createhiddenwindow( in nsiappshell aappshell ); parameters aappshell a widget "appshell" (event processor) to associate with the new window. createstartupstate() obsolete since ge...
...evelwindow( in nsixulwindow awindow ); parameters awindow a window. native code only!createhiddenwindow creates a hidden window. void createhiddenwindow( in nsiappshell aappshell ); parameters aappshell a widget "appshell" (event processor) to associate with the new window. createstartupstate() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) creates the initial state of the application by launching tasks specfied by "general.startup.*" prefs. note: size_to_content may be used for width or height. boolean createstartupstate( in long awindowwidth, in long awindowheight ); parameters awindowwidth the width to make the initial window(s) opened. awindowheight the height to make the initial window(s) opened. ...
...And 7 more matches
nsIDOMSimpleGestureEvent
dom/interfaces/events/nsidomsimplegestureevent.idlscriptable this interface describes a mouse or trackpad gesture event. 1.0 66 introduced gecko 1.9.1 inherits from: nsidommouseevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) the nsidomsimplegestureevent interface is the datatype for all mozilla-specific simple gesture events in the document object model. the following events are generated: mozswipegesture - generated when the user completes a swipe across across the input device. mozmagnifygesturestart - generated when the user begins the magnify ("pinch") gesture. the "delta" value represents the initial movement. mozmagnifygestureupdate - generated periodically while the user is continuing the magnify ("pinch") gesture...
...not handled by the application. consumers should use event.preventdefault() to prevent default behavior when consuming events. method overview void initsimplegestureevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrl
keyarg, in boolean alt
keyarg, in boolean shift
keyarg, in boolean meta
keyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in unsigned long directionarg, in double deltaarg); attributes attribute type description delta double the delta value indicating how far the gesture moved. for update events, this indicates the movement since the p...
...n. rotation_clockwise 2 clockwise rotation. methods initsimplegestureevent() initializes the gesture event. ...
...And 7 more matches
nsIErrorService
xpcom/base/nsierrorservice.idlscriptable this is a service that allows nsresult codes to be mapped to string bundles that can be used to look up error messages. string bundle
keys can also be mapped. ...
...able this is a service that allows nsresult codes to be mapped to string bundles that can be used to look up error messages. string bundle
keys can also be mapped. ...
...string geterrorstringbundle( in short errormodule ); parameters errormodule the module for which th...
...And 7 more matches
SubtleCrypto.decrypt() - Web APIs
the values given for the extra parameters must match those passed into the corresponding encrypt() call. to use rsa-oaep, pass an rsaoaepparams object. ...
...the values given for the extra parameters must match those passed into the corresponding encrypt() call. to use rsa-oaep, pass an rsaoaepparams object. ...
...hm is an object specifying the algorithm to be used, and any extra parameters as required. the values given for the extra parameters must match those passed into the corresponding encrypt() call. 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.
key is a crypto
key containing the
key to be used for decryption. if using rsa-oaep, this is the private
key property of the crypto
keypair object. data is a buffersource containing the data to be decrypted (also known as ciphertext). return value result is a promise that fulfills with an arraybuffer containing the plaintext. exceptions the promise is rejected when the following exceptions are ...
...And 7 more matches
Using the Web Animations API - Web APIs
written in css showing alice falling down the rabbit hole that leads to wonderland (see the full code on codepen): notice that the background moves, alice spins, and her color changes at an offset from her spinning. we’re going to focus on just alice for this tutorial. ...
...licetumbling infinite 3s linear; } @
keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes alice’s color and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely. in the @
keyframes block we can see that 30% of the way through each loop (about .9 seconds in), alice’s color changes from black to a deep burgundy then back again by the end of the loop. moving it to javascript now let’s try creating the same animation with the web animations api. ...
... and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely. in the @
keyframes block we can see that 30% of the way through each loop (about .9 seconds in), alice’s color changes from black to a deep burgundy then back again by the end of the loop. moving it to javascript now let’s try creating the same animation with the web animations api. representing
keyframes the first thing we need is to create a
keyframe object corresponding to our css @
keyframes block: var alicetumbling = [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects. each object represents a k...
...And 7 more matches
Web APIs
tion apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available. ...
...toothadvertisingdata bluetoothcharacteristicproperties bluetoothdevice bluetoothremotegattcharacteristic bluetoothremotegattdescriptor bluetoothremotegattserver bluetoothremotegattservice body broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue css
keyframerule css
keyframesrule css
keywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablerefere...
...2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialscontainer crypto crypto
key crypto
keypair customelementregistry customevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist domlocator dommatrix dommatrixreadonly domobject domparser dompoint dompointinit dompointreadonly domquad domrect domrectreadonly domstring domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransferi...
...And 7 more matches
ARIA: listbox role - Accessibility
from which a user may select one or more static items, similar to the html <select> element. unlike <select>, a listbox can contain images. each child of a listbox should have a role of option. it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of
keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free. elements with the role listbox have an implicit aria-orientation value of vertical. when a list is tabbed to, the first item in the list will be selected if nothing else already is. up/down arrows navigate the list, and pressing shift + up/down arrows will move and e...
.... if list items are checkable, space can be used to toggle checkboxes. for selectable list items, space toggles their selection, shift+space can be used to select contiguous items, ctrl+arrow moves without selecting, and ctrl+space can be used to select non-contiguous items. it is recommended that a checkbox, link or other method be used to select all items, and ctrl+a could be used as a shortcut
key for this. when the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and 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 annou...
...ling based on the accessibility api conventions.) aria-roledescription a human-readable string value which more clearly identifies the role of the listbox. screen readers will often read this value to the user after reading the label (if there is one), in place of saying "listbox". (for further details and a full list of aria states and properties see the aria listbox (role) documentation.)
keyboard interactions when a single-select listbox receives focus: if none of the options are selected before the listbox receives focus, the first option receives focus. optionally, the first option may be automatically selected. if an option is selected before the listbox receives focus, focus is set on the selected option. when a multi-select listbox receives focus: if none of th...
...And 7 more matches
Value definition syntax - CSS: Cascading Style Sheets
css value definition syntax, a formal grammar, is used for defining the set of valid values for a css property or function. in addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive). the definition syntax describes which values are allowed and the interactions between them. ...
...tion to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive). the definition syntax describes which values are allowed and the interactions between them. a component can be a
keyword, some characters considered as a literal, or a value of a given css data type or of another css property. component value types
keywords generic
keywords a
keyword with a predefined meaning appears literally, without quotation marks. for example: auto, smaller or ease-in. the specific case of inherit, initial and unset all css properties accept the
keywords inherit, initial and unset, that are defined throughout css. they are not shown in the value definition, and are implicitly defined. literals in css, a few character...
..., and multipliers, then transform them as a single component. they are used to group components to bypass the precedence rules. bold [ thin && <length> ] this example matches the following values: bold thin 2vh bold 0 thin bold thin 3.5em but not: thin bold 3em, as bold is juxtaposed with the component defined by the brackets, it must appear before it. juxtaposition placing several
keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. all juxtaposed components are mandatory and should appear in the exact order. bold <length> , thin this example matches the following values: bold 1em, thin bold 0, thin bold 2.5cm, thin bold 3vh, thin but not: thin 1em, bold, as the entities must be in the expressed ...
...And 7 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
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. the type of relationships is given by the value of the rel attribute, which, if present, must have a value that is an unordered set of unique space-separated
keywords, which are listed in the following table. every
keyword within a space seperated value should be unique within that value. values for the rel attribute, and the elements for which each is relevant rel value description <link> <a> and <area> <form> alternate alternate representations of the current document. link link not allowed author author of the current...
...ink stylesheet imports a style sheet. external resource not allowed not allowed tag gives a tag (identified by the given address) that applies to the current document. not allowed link not allowed the rel attribute is relevant to the <link>, <a>, <area>, and <form> elements, but some values only relevant to a subset of those elements. ...
...ll html
keyword attribute values, these values are case-insenstive. the rel attribute has no default value. if the attribute is omitted or if none of the values in the attribute are supported, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two. in this case, on <link> and <form>, if the rel attribute is absent, has no
keywords, or if not one or more of the space-separated
keywords above, then the element does not create any links. <a> and <area> will still created links, but without a defined relationship. like all html
keyword attribute values, these values are case-insenstive. values if there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most...
...And 7 more matches
JavaScript data types and data structures - JavaScript
null : typeof instance === "object". special primitive type having additional usage for its value: if object is not inherited, then null is shown; object : typeof instance === "object". special non-data but structural type for any constructed object instance also used as data structures: new object, new array, new map, new set, new weakmap, new set, new date and almost everything made with new
keyword; function : a non-data structure, though it also answers for typeof operator: typeof instance === "function". this is merely a special shorthand for functions, though every function constructor is derived from object constructor. keep in mind the only valuable purpose of typeof operator usage is checking the data type. if we wish to check any structural type derived from object it is point...
...orthand for functions, though every function constructor is derived from object constructor. keep in mind the only valuable purpose of typeof operator usage is checking the data type. if we wish to check any structural type derived from object it is pointless to use typeof for that, as we will always receive "object". the indeed proper way to check what sort of object we are using is instanceof
keyword. but even in that case there might be misconceptions. primitive values all types except objects define immutable values (that is, values which can't be changed). for example (and unlike in c), strings are immutable. we refer to values of these types as "primitive values". boolean type boolean represents a logical entity and can have two values: true and false. see boolean and boolean for ...
...e separator is used in one of the "list" elements, then, the list is broken. an escape character can be chosen, etc. all of this requires conventions and creates an unnecessary maintenance burden. use strings for textual data. when representing complex data, parse strings, and use the appropriate abstraction. symbol type a symbol is a unique and immutable primitive value and may be used as the
key of an object property (see below). in some programming languages, symbols are called "atoms". for more details see symbol and the symbol object wrapper in javascript. objects in computer science, an object is a value in memory which is possibly referenced by an identifier. properties in javascript, objects can be seen as a collection of properties. with the object literal syntax, a limited s...
...And 7 more matches
Object.defineProperty() - JavaScript
he property to be defined or modified. descriptor the descriptor for the property being defined or modified. return value the object that was passed to the function. description this method allows a precise addition to or modification of a property on an object. normal property addition through assignment creates properties which show up during property enumeration (for...in loop or object.
keys method), whose values may be changed, and which may be deleted. this method allows these extra details to be changed from their defaults. by default, values added using object.defineproperty() are immutable and not enumerable. property descriptors present in objects come in two main flavors: data descriptors and accessor descriptors. a data descriptor is a property that has a value, which may o...
...t in objects come in two main flavors: data descriptors and accessor descriptors. a data descriptor is a property that has a value, which may or may not be writable. an accessor descriptor is a property described by a getter-setter pair of functions. a descriptor must be one of these two flavors; it cannot be both. both data and accessor descriptors are objects. they share the following optional
keys (note: the default value is in the case of defining properties using object.defineproperty()): configurable true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object. defaults to false. enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. defau...
...sing object.defineproperty()): configurable true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object. defaults to false. enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. defaults to false. ...
...And 7 more matches
Object.entries() - JavaScript
(the only important difference is that a for...in loop enumerates properties in the prototype chain as well). the order of the array returned by object.entries() does not depend on how an object is defined. if there is a need for certain ordering, then the array should be sorted first, like object.entries(obj).sort((a, b) => b[0].localecompare(a[0]));. the source for this interactive example is stored in a github repository. ...
...be sorted first, like object.entries(obj).sort((a, b) => b[0].localecompare(a[0]));. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.entries(obj) parameters obj the object whose own enumerable string-
keyed property [
key, value] pairs are to be returned. return value an array of the given object's own enumerable string-
keyed property [
key, value] pairs. description object.entries() returns an array whose elements are arrays corresponding to the enumerable string-
keyed property [
key, value] pairs found directly upon object. the ordering of the properties is the same as that given by looping ov...
... examples const obj = { foo: 'bar'...
...And 7 more matches
Dialogs and Prompts - Archive of obsolete content
this page has some code snippets used to display and process dialog boxes. see working with windows in chrome code for introductory information and more discussion and examples. describing dialog windows dialogs in mozilla whenever you want to create a dialog in your application, use <dialog> (instead of usual <window>) as root element in the xul file. this will: handle a few
keyboard events (enter/esc and more), which is good for
keyboard accessibility. add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below). simple dialog code the following xul code defines a simple dialog with two buttons, ok and cancel (buttons="accept,cancel" attribute on dialog). <?xml version="1.0"?> <?xml-stylesheet href="ch...
...s in an order that is consistent with os default (but the button set and layout is highly customizable, see below). simple dialog code the following xul code defines a simple dialog with two buttons, ok and cancel (buttons="accept,cancel" attribute on dialog). <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel functions in your script. if they return anything but false, the dialog will be closed. buttons in <dialog> predefined there are six b...
...e in the buttons attribute of dialog. they are: accept — ok button. cancel — cancel button. disclosure — more info button. help — help button (doesn't work in thunderbird 1.0 bug 256915) extra1, extra2 — two buttons without any predefined labels or meaning. extra2 is positioned at the left side of the dialog (by default). ...
...And 6 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
the worst cases to privilege escalation which can leave a user's pc open to remote attack. building dom trees in most cases, dom trees should be built exclusively with dom creation methods. the following methods will all safely create a dom tree without risk of remote execution. ...
... return frag; } // single element? parse element namespace prefix (if none exists, default to defaultnamespace), and create element var elemns = namespace(elemnameorarray); var elem = doc.createelementns(elemns.namespace || jsontodom.defaultnamespace, elemns.shortname); // set element's attributes and/or callback functions (eg. ...
...nt? parse element namespace prefix (if none exists, default to defaultnamespace), and create element var elemns = namespace(elemnameorarray); var elem = doc.createelementns(elemns.namespace || jsontodom.defaultnamespace, elemns.shortname); // set element's attributes and/or callback functions (eg. ...
...And 6 more matches
Session store API - Archive of obsolete content
in order to properly restore your extension's state when a tab is restored, it needs to use the session store api's settabvalue() method to save any data it will need in order to restore its state, and then call gettabvalue() to retrieve the previous setting when the tab is restored. ...
...ine which tab is being restored by looking at the event's originaltarget field. there's not really a way to determine when the last tab has been restored unless you determine how many tabs need to be restored then count the sstabrestored events. this section provides a few simple examples of how to make use of the session store api. ...
...you may use any javascript object as the data. ...
...And 6 more matches
Mozilla Crypto FAQ - Archive of obsolete content
for your information only and is not intended as legal advice. if you wish to develop and distribute cryptographic software, particularly for commercial sale or distribution, then you should consult an attorney with expertise in the particular laws and regulations that apply in your jurisdiction. i've updated this version of the mozilla crypto faq to discuss the situation now that the rsa public
key algorithm is in the public domain and a full open source crypto implementation is being added to the mozilla code base. information in the faq also reflects the new u.s. encryption export regulations published on january 14, 2000, the release on february 11, 2000, of source code for ssl, s/mime, and general pki functionality for use in the mozilla project, and the "bernstein advisory" issued by t...
...complete open source cryptographic library, and mozilla will include ssl support as a standard feature. after the u.s. government relaxed u.s. export regulations in january 2000 to allow export of source code for open source software implementing encryption, the major remaining legal obstacle to mozilla crypto development was the fact that rsa security, inc., held a u.s. patent on the rsa public
key algorithm. in february 2000 iplanet e-commerce solutions (a sun-netscape alliance) released source code through mozilla.org for the personal security manager and network security services software; this source code included support for the ssl protocol, but due to the rsa patent and related legal issues it did not originally contain code for rsa or other cryptographic algorithms. on september 6,...
... that implementation will form the basis of a complete open source ssl implementation for mozilla. s/mime support is also under development, but may not be available in mozilla until after the 1.0 release. version 3.1 of the network security services library will include a complete open source implementation of the cryptographic algorithms needed for mozilla ssl support, including the rsa public
key algorithm (now in the public domain). nss 3.1 will be available in beta form in september 2000, with the final release to follow in october 2000. nss 3.1 will be used in the 1.3 release of psm, which will provide a complete open source implementation of ssl for mozilla. psm 1.3 will also provide support for mozilla users to obtain personal digital certificates and perform other pki-related functi...
...And 6 more matches
Broadcasters and Observers - Archive of obsolete content
ox will adjust accordingly. we saw something like this in a previous section where the disabled attribute was adjusted once and propagated to other elements. this attribute forwarding is quite useful for a number of purposes. for instance, let's say that we want the back action in a browser to be disabled. we would need to disable the back command on the menu, the back button on the toolbar, the
keyboard shortcut (alt+left for example) and any back commands on popup menus. although we could write a script to do this, it is quite tedious. it also has the disadvantage that we would need to know all of the places where a back action could be. if someone added a new back button using an extension, it wouldn't be handled. it is convenient to simply disable the back action and have all the element...
...rve a single broadcaster. you can also have only one if you wanted to but that would accomplish very little since the main reason for using broadcasters is to have attributes forwarded to multiple places. you should only use broadcasters when you need multiple elements that observe an attribute. ...
... broadcaster. you can also have only one if you wanted to but that would accomplish very little since the main reason for using broadcasters is to have attributes forwarded to multiple places. you should only use broadcasters when you need multiple elements that observe an attribute. ...
...And 6 more matches
menuitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single choice in a menupopup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a single choice in a menupopup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
... | methods | related ] a single choice in a menupopup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
...And 6 more matches
toolbarbutton - Archive of obsolete content
ethods | related ] a button that appears on a toolbar. it is equivalent to a regular button except that it may be rendered differently. typically, it is expected to have an image. more information is available in the xul tutorial. ...
...evant accessbility guidelines all toolbar functionality should be duplicated elsewhere in the application where possible, provide
keyboard alternatives. where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. ...
... where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. ...
...And 6 more matches
Deploying XULRunner - Archive of obsolete content
h xulrunner 2.0, move chrome.manifest to the root directory, and adjust resource paths inside chrome.manifest accordingly. additionally, your mac app will not run without a valid info.plist file. ...
...nifest to the root directory, and adjust resource paths inside chrome.manifest accordingly. additionally, your mac app will not run without a valid info.plist file. ...
... adjust resource paths inside chrome.manifest accordingly. additionally, your mac app will not run without a valid info.plist file. ...
...And 6 more matches
Archived Mozilla and build documentation - Archive of obsolete content
process of building mozilla projects. activex control for hosting netscape plug-ins in ie microsoft has removed support for netscape plug-ins from ie 5.5 sp 2 and beyond. if you are a plug-in author, you may find this project saves you a lot of work! ant script to assemble an extension this ant script helps to package an extension archived spidermon
key docs this section contains old spidermon
key documentation. autodial for windows nt this document is intended to explain how the autodial helper feature implemented for bug 93002 works and why it works that way. automated testing tips and tricks automatic mozilla configurator ankh8 automatically handle failed asser...
... archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given cvs branch, or in a particular time period. it also includes tools for looking at checkin logs (and comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame"). bookmark
keywords practically every web surfer has bookmarks, of course, and power surfers usually have hundreds stuffed into folders within folders. in addition to being handy pointers to useful resources, bookmarks in mozilla can be used to make the address bar itself a power tool. searches, lookups, package tracking, and even word definitions can all be retrieved from user-custom...
...tall the dom inspector extension as well. creating a skin for mozilla in order to create a skin for mozilla, you will need to know three things. how to edit images, extract zip files, and how to modify css. mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface. creating a skin for seamon
key 2.x you're going to make a theme for seamon
key 2, but don't know how? i hope this manual will help you. creating regular expressions for a microsummary generator a regular expression is a special kind of string (i.e. a sequence of characters) that matches patterns of characters in other strings. microsummary generators use them to identify the pages that the gene...
...And 6 more matches
2006-11-17 - Archive of obsolete content
discussions how to translate mozilla to a language called quiché how to translate mozilla to a language called quiché. ...
... discussions how to translate mozilla to a language called quiché how to translate mozilla to a language called quiché. ...
... discussions how to translate mozilla to a language called quiché how to translate mozilla to a language called quiché. ...
...And 6 more matches
NPEvent - Archive of obsolete content
wparam 32 bit field for the windows event parameter; parameter value depends upon event type. lparam 32 bit field for the windows event parameter; parameter value depends upon event type. eventrecord npevent on mac os npevent is defined as an eventreco...
...wparam 32 bit field for the windows event parameter; parameter value depends upon event type. lparam 32 bit field for the windows event parameter; parameter value depends upon event type. eventrecord npevent on mac os npevent is defined as an eventrecord data st...
...arameter value depends upon event type. lparam 32 bit field for the windows event parameter; parameter value depends upon event type. eventrecord npevent on mac os npevent is defined as an eventrecord data structure, which has the following fields: what integer representing an event type. both windowed and windowless plug-ins receive the same events. values: 0 nullevent 1 mousedown 2 mouseup 3
keydown 4
keyup 5 auto
key 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os developer documentation. message longint. additional information about the event. type of information depends on the event type. undefined for null, mouseup, and mousedown e...
...And 6 more matches
Making asynchronous programming easier with async and await - Learn web development
these features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards. they make async code look more like old-school synchronous code, so they're well worth learning. this article gives you what you need to know. ...
...e well worth learning. this article gives you what you need to know. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals, an understanding of async code in general and promises. objective: to understand promises and how to use them. the basics of async/await there are two parts to using async/await in your code. the async
keyword first of all we have the async
keyword, which you put in front of a function declaration to turn it into an async function. an async function is a function that knows how to expect the possibility of the await
keyword being used to invoke asynchronous code. try typing the following lines into your browser's js console: function hello() { return "hello" }; hello(); the function returns "he...
...and you can use arrow functions: let hello = async () => { return "hello" }; these all do basically the same thing. to actually consume the value returned when the promise fulfills, since it is returning a promise, we could use a .then() block: hello().then((value) => console.log(value)) or even just shorthand such as hello().then(console.log) like we saw in the last article. ...
...And 6 more matches
Gecko info for Windows accessibility vendors
this faq explains how makers of windows screen readers, voice dictation packages and magnification software can support gecko-based software. the base of our support for these products is msaa (microsoft active accessibility), external readonly dom support, and the
keyboard api/user interface. definitions here are some basic definitions that you'll need for this document to make sense: gecko: the rendering engine for firefox, thunderbird, nvu, mozilla seamon
key and other applications. gecko is the internal engine that mozilla uses to render any kind of web content. it supports html, xhtml, cascading style sheets (css) and the document object model (dom). microsoft active accessibility (msaa) an api devised by microsoft so that acce...
... or vice-versa, queryservice() will return null. anything that is focusable or conveys important information about the structure of the document is exposed in the msaa tree of iaccessibles. windows applications based on the gecko layout engine gecko is a rendering engine that mozilla, netscape and other new browsers use. gecko can render a variety of content, not just html and supports
key web standards such as cascading style sheets, javascript and the w3c dom. gecko also handles the users
keystrokes and mouse clicks. gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it. embedded clients (support msaa) embedded clients use gecko only in the content window, at the moment for htm...
...(extensible user-interface language). none of the user interface contains standard windows controls -- not even the menus! this is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). firefox (please use version 1.1 alpha builds or later) thunderbird (please use version 1.1 alpha builds or later) mozilla seamon
key (please use 1.8 alpha builds or later) how to find the content window and load the document screen readers need to find the content window so that they know where to start grabbing the msaa tree, in order to load the current document into a buffer in their own process. the content window always has the class mozillacontentwindowclass. in total, gecko supports the following window cl...
...And 6 more matches
IME handling guide
this document explains how gecko handles ime. introduction ime is an abbreviation of input method editor. this is a technical term from windows but these days, this is used on other platforms as well. ime is a helper application of a user's text input. it handles native
key events before or after focused application (depending on the platform) and creates a composition string (a.k.a. preedit string), suggests a list of what the user attempts to input, commits composition string as a selected item off the list and commits composition string without any conversion. ime is used by chinese, japanese, korean and taiwan users for inputting chinese characters because the number of them is beyond thousands and cannot be input from the
keyboard directly. however, especially on mobile device...
...ition string, japanese ime separates the composition string into multiple clauses. for example, if a user types "watasinonamaehanakanodesu", it's converted to hiragana characters, "わたしのなまえはなかのです", automatically (in the following screenshots, the composition string has a wavy underline and the only one clause is called "raw input clause"). when a user presses convert
key, japanese ime separates the composition string as "わたしの" (my), "なまえは" (name is) and "なかのです" (nakano). then, converts each clause with chinese characters: "私の", "名前は" and "中野です" (in the following screenshot each clause is underlined and not connected adjacently. these clauses are called "converted clause"). if one or more clauses were not converted as...
...の" (my), "なまえは" (name is) and "なかのです" (nakano). then, converts each clause with chinese characters: "私の", "名前は" and "中野です" (in the following screenshot each clause is underlined and not connected adjacently. these clauses are called "converted clause"). if one or more clauses were not converted as expected, the user can choose one of the clauses with arrow
keys and look for the expected result form the list in the drop down menu (in the following screenshot, the clause with the thicker underline is called "selected clause"). basically, composition string and each clause style is rendered by gecko. and the drop down menu is created by ime. each clause is represented with selection in the editor. from chrome script, you can check it with nsiselection...
...And 6 more matches
Mozilla Quirks Mode Behavior
tyle attributes (bug 99554). this behavior is being removed in firefox 27, for interoperability. (bug 915053) an empty string for the background attribute sets the background url to empty only in quirks mode. the topmargin, bottommargin, leftmargin, and rightmargin attributes on body are supported only in quirks mode (bug 9258). obsolete since gecko 35 (firefox 35.0 / thunderbird 35.0 / seamon
key 2.32) (bug 95530) this quirk is now html5 conform and has been adopted in standards mode. the scrollleft, scrolltop, scrollwidth, and scrollheight properties are relative to body in quirks mode (instead of html) (bug 211030). html (1-7) and css (xx-small - xx-large) font sizes are calculated slightly differently (see bug 18136). the :hover and :active pseudo-classes will only be applied to li...
...) (bug 211030). html (1-7) and css (xx-small - xx-large) font sizes are calculated slightly differently (see bug 18136). the :hover and :active pseudo-classes will only be applied to links, and only if there is no other pseudo-class in the selector. to match other elements, the selector must include a tag name, id, class or attribute. prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3), there was no class check, so the :hover pseudoclass was not applied to class selectors; for example, .someclass:hover did not work. prior to gecko 36, it also applied to images, and form controls but the quirk has been adapted to match the behavior of other browser (bug 783213). prior to gecko 36, the quirk was also applied if another pseudo-class was used in the same selector, if a pse...
...der icons in quirks mode. obsolete since gecko 2.0 html colors were parsed differently up to gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) (bug 121738). in quirks mode, the url fragment #top scrolls to the top of the page when there is no such anchor. obsolete since gecko 10.0 however, html5 requires this behavior, and starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7), this also works in standards mode (bug 80784, bug 93077). block and inline layout [this quirk is present in almost standards mode.] line height (not line-height) calculations are different to fix bug 5821 and bug 24186 (some other issues are described in bug 22274). see almost standards mode for more details. there are a bunch of quirks to get percentage heights on images, tables, ob...
...And 6 more matches
ssltyp.html
s and structures used with the functions described in the rest of this document, and how to manage the memory used for them. additional types are described with the functions that use them or in the header files. ...
...ctures used with the functions described in the rest of this document, and how to manage the memory used for them. additional types are described with the functions that use them or in the header files. ...
...as long as you use the form shown here, your code will not need revision. certcertdbhandle an opaque handle structure for open certificate databases. ...
...And 6 more matches
nsICacheSession
netwerk/cache/public/nsicachesession.idlscriptable handles open synchronous and asynchronous cache entry operations along with evicting cache entries and checking for cache devices instantiation according to the session storage policies. ...
... netwerk/cache/public/nsicachesession.idlscriptable handles open synchronous and asynchronous cache entry operations along with evicting cache entries and checking for cache devices instantiation according to the session storage policies. ...
...o the session storage policies. inherits from: nsisupports last changed in gecko 14 (firefox 14 / thunderbird 14 / seamon
key 2.11) method overview void asyncopencacheentry(in acstring
key, in nscacheaccessmode accessrequested, in nsicachelistener listener, [optional] in boolean nowait); void evictentries(); prbool isstorageenabled(); nsicacheentrydescriptor opencacheentry(in acstring
key, in nscacheaccessmode accessrequested, in boolean blockingmode); void doomentry(in acstring
key, in nsicachelistener listener); attributes attribute type description doomentriesifexpired prbool expired entries will be doomed or evicted if this attribute is set to true. if false, expired entries will be returned (useful for offline mode and clients, such as http, that can update the val...
...And 6 more matches
nsIFaviconService
toolkit/components/places/public/nsifaviconservice.idlscriptable stores favicons for pages in bookmarks and history. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamon
key 2.19) implemented by: @mozilla.org/browser/favicon-service;1. to use this service, use: var faviconservice = components.classes["@mozilla.org/browser/favicon-service;1"] .getservice(components.interfaces.nsifaviconservice); method overview void addfailedfavicon(in nsiuri afaviconuri); void expireallfavicons(); void getfavicondata(in nsiuri afaviconuri, out autf8string amimetype, [optional] out unsigned long adatalen, [array,retval,size_is(adatalen)] out octet adata...
...con service. can be null. expireallfavicons() expires all known favicons, removing them from the database. note: this is an asynchronous operation; when it completes, a "places-favicons-expired" notification is dispatched through the observer's service. void expireallfavicons(); parameters none. getfavicondata() obsolete since gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamon
key 2.19) note: this method was removed in gecko 22.0. you should use the new async api moziasyncfavicons.getfavicondataforpage() instead. this method retrieves the given favicon data. throws an exception if we don't have data. if there is no data but we have an entry for this favicon, adatalen will be "0" and adata will be null. void getfavicondata( in nsiuri afaviconuri, out autf8st...
... the binary data will be placed. adata output parameter where the binary favicon data will be placed. this will be null if we have this uri but have no data associated with it. exceptions thrown ns_error_not_available thrown when we have never heard of this favicon url. getfavicondataasdataurl() obsolete since gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamon
key 2.19) note: this method was removed in gecko 22.0. you should use the new async api moziasyncfavicons.getfavicondataforpage() instead. this method retrieves the given favicon data, returning it as a data url throws an exception if we don't have data. if there is no data but we have an entry for this favicon, returns null. astring getfavicondataasdataurl( in nsiuri afaviconuri ); pa...
...And 6 more matches
Debugger.Memory - Firefox Developer Tools
overflowed returns true if there have been more than [maxallocationsloglength][#max-alloc-log] allocations since the last time [drainallocationslog][#drain-alloc-log] was called and some data has been lost. returns false otherwise. debugger.memory handler functions similar to debugger’s handler functions, debugger.memory inherits accessor properties that store handler functions for spidermon
key to call when given events occur in debuggee code. unlike debugger‘s hooks, debugger.memory’s handlers’ return values are not significant, and are ignored. the handler functions receive the debugger.memory’s owning debugger instance as their this value. the owning debugger’s uncaughtexceptionhandler is still fired for errors thrown in debugger.memory hooks. on a new debugger.memory ins...
...run in the compartment to which they belong, not in a debuggee compartment. ongarbagecollection(statistics) a garbage collection cycle spanning one or more debuggees has just been completed. the statistics parameter is an object containing information about the gc cycle. it has the following properties: collections the collections property’s value is an array. because spidermon
key’s collector is incremental, a full collection cycle may consist of multiple discrete collection slices with the js mutator running interleaved. for each collection slice that occurred, there is an entry in the collections array with the following form: { "starttimestamp":timestamp, "endtimestamp":timestamp, } here the timestamp values are timestamps of the gc slice’s start and end...
...otherwise, null is returned. known values include the following: “gc mode” “malloc bytes trigger” “allocation trigger” “requested” gccyclenumber the gc cycle’s “...
...And 6 more matches
Manipulating video using canvas - Web APIs
the document content the html document used to render this content is shown below. ...
... the javascript code is imported from a...
... <canvas id="c2" width="160" height="96"></canvas> </div> <script type="text/javascript" src="processor.js"></script> </body> </html> the
key bits to take away from this are: this document establishes two canvas elements, with the ids c1 and c2. canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-
keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video. the javascript code is imported from a script named processor.js. the javascript code the javascript code in processor.js consists of three methods. initializing the chroma-
key player the doload() method is called when the xhtml document initially loads. this method's job is to p...
...And 6 more matches
Inputs and input sources - Web APIs
well as the other differences how the use of the gamepad object and its children differs from its use in the gamepad api, see the article supporting advanced controllers and gamepads in webxr applications. incorporating input from non-webxr sources sometimes, you need to have a way to let the user provide input using controllers which are external to webxr. most commonly, these inputs are from
keyboards and mice, but you could also use non-xr gamepad devices, network inputs, or other sources of data to simulate user controls. while webxr offers no support for directly interfacing these input devices with the xr scene, you can collect the input data yourself and apply it yourself. assuming inputs are used to control an avatar within the simulation, which is the most common use case, webxr ...
...object or weapon, jumping, or any other activity not related to basic movement and rotation. some inputs are instead used to control the application rather than the avatar. for example, a button might open an options menu used to configure the application. while that menu is open, inputs that would otherwise control the avatar might be instead applied to controlling the menu's interface. using
keyboard and mouse events capturing input from the
keyboard and mouse is done just like it is in any web application. set up handlers for the events that you need to handle in order to obtain the inputs you want. it's what you do with those inputs that's interesting. imagine an avatar object which we'll use to track information about the avatar and its worldview. we want the player to be able to us...
...s capturing input from the
keyboard and mouse is done just like it is in any web application. set up handlers for the events that you need to handle in order to obtain the inputs you want. it's what you do with those inputs that's interesting. imagine an avatar object which we'll use to track information about the avatar and its worldview. we want the player to be able to use the w, a, s, and d
keys to move forward, left, backward, and right. because we are managing the avatar's position as defined by the
keyboard and mouse in addition to anything the xr hardware might be doing, we need to maintain that information separately and apply it as a transform before rendering the avatar (or the world from the avatar's point of view). to accomplish that, we include in the avatar object a posdelta...
...And 6 more matches
animation - CSS: Cascading Style Sheets
on-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. 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 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. ...
...ntribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 6 more matches
background-position - CSS: Cascading Style Sheets
e background-position css property sets the initial position for each background image. the position is relative to the position layer set by background-origin. 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. ...
...* global values */ background-position: inherit; background-position: initial; background-position: unset; the background-position property is specified as one or more <position> values, separated by commas. values <position> a <position>. a position defines an x/y coordinate, to place an item relative to the edges of an element's box. it can be defined using one to four values. if two non-
keyword values are used, the first value represents the horizontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be center. if three or four values are used, the length-percentage values are offsets for the preceding
keyword value(s). 1-value syntax: the value may be: the
keyword value center, which centers the image. ...
...this specifies an edge against which to place the item. ...
...And 6 more matches
<position> - CSS: Cascading Style Sheets
the <position> (or <bg-position>) css data type denotes a two-dimensional coordinate used to set a location relative to an element box. it is used in the background-position and offset-anchor properties. note: the final position described by the <position> value does not need to be inside the element's box. syntax the <position> data type is specified with one or two
keywords, with optional offsets. the
keyword values are center, top, right, bottom, and left. each
keyword represents either an edge of the element's box or the center line between two edges. depending on the context, center represents either the center between the left and right edges, or the center between the top and bottom edges. if specified, an offset can be either a relative <percentage> value or an absolute <lengt...
...edges. if specified, an offset can be either a relative <percentage> value or an absolute <length> value. positive values are offset towards the right or the bottom, whichever is appropriate. negative values are offset in the opposite directions. if only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to center. ...
...et in the opposite directions. if only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to center. ...
...And 6 more matches
<input type="submit"> - HTML: Hypertext Markup Language
ble on <input type="image"> and <button> elements. formnovalidate a boolean attribute which, if present, specifies that the form should not be validated before submission to the server. this overrides the value of the novalidate attribute on the element's owning form. this attribute is also available on <input type="image"> and <button> elements. ...
...this will replace the current document with the received data. this is the default value used if none is specified. _blank loads the response into a new, unnamed, browsing context. ...
...t into the text field, and then submitting the form. upon submitting, the data name/value pair gets sent to the server. in this instance, the string will be text=usertext, where "usertext" is the text entered by the user, encoded to preserve special characters. where and how the data is submitted depends on the configuration of the <form>; see sending form data for more details. ...
...And 6 more matches
Proxy - JavaScript
er); // 'chrome' finding an array item object by its property this proxy extends an array with some utility features. as you see, you can flexibly "define" properties without using object.defineproperties. this example can be adapted to find a table row by its cell. in that case, the target will be table.rows. ...
...= product; } if (types[product.type]) { types[product.type].push(product); } else { types[product.type] = [product]; } } // get a product by name if (result) { return result; } // get products by type if (prop in types) { return types[prop]; } // get product types if (prop === 'types') { return object.
keys(types); } return undefined; } }); console.log(products[0]); // { name: 'firefox', type: 'browser' } console.log(products['firefox']); // { name: 'firefox', type: 'browser' } console.log(products['chrome']); // undefined console.log(products.browser); // [{ name: 'firefox', type: 'browser' }, { name: 'seamon
key', type: 'browser' }] console.log(products.types); //...
... this type of operation: the doccookies global object created by the "little framework" published on the document.cookie page. /* var doccookies = ... ...
...And 6 more matches
WeakMap - JavaScript
the weakmap object is a collection of
key/value pairs in which the
keys are weakly referenced. the
keys must be objects and the values can be arbitrary values. you can learn more about weakmaps in the weakmap object guide (under
keyed collections). description
keys of weakmaps are of the type object only. primitive data types as
keys are not allowed (e.g. a symbol can't be a weakmap
key). why weakmap? ...
...ly referenced. the
keys must be objects and the values can be arbitrary values. you can learn more about weakmaps in the weakmap object guide (under
keyed collections). description
keys of weakmaps are of the type object only. primitive data types as
keys are not allowed (e.g. a symbol can't be a weakmap
key). why weakmap? ...
...eakmaps in the weakmap object guide (under
keyed collections). description
keys of weakmaps are of the type object only. primitive data types as
keys are not allowed (e.g. a symbol can't be a weakmap
key). why weakmap? a map api could be implemented in javascript with two arrays (one for
keys, one for values) shared by the four api methods. setting elements on this map would involve pushing a
key and value onto the end of each of those arrays simultaneously. as a result, the indices of the
key and value would correspond to both arrays. getting values from the map would involve iterating through all
keys to find a match, then using the index of this match to retrieve the corresponding value from the array of values. such an implementation would have two main inconveniences: the first o...
...And 6 more matches
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
which are already explained in the making pwas work offline with service workers article. inside the service worker, a push service subscription mechanism is created. registration.pushmanager.getsubscription() .then( /* ... */ ); once the user is subscribed, they can receive push notifications from the server. from the server-side, the whole process has to be encrypted with public and private
keys for security reasons — allowing everyone to send push messages unsecured using your app would be a terrible idea. see the web push data encryption test page for detailed information about securing the server. the server stores all the information received when the user subscribed, so the messages can be sent later on when needed. to receive push messages, we can listen to the push event in th...
...ion object to subscribe, and then use the resulting subscription object to complete the whole process. in the registration part, the code looks like this: if(subscription) { return subscription; } if the user has already subscribed, we then return the subscription object and move to the subscription part. if not, we initialize a new subscription: const response = await fetch('./vapidpublic
key'); const vapidpublic
key = await response.text(); const convertedvapid
key = urlbase64touint8array(vapidpublic
key); the app fetches the server's public
key and converts the response to text; then it needs to be converted to a uint8array (to support chrome). to learn more about vapid
keys you can read the sending vapid identified webpush notifications via mozilla’s push service blog post. the ap...
...
keys you can read the sending vapid identified webpush notifications via mozilla’s push service blog post. the app can now use the pushmanager to subscribe the new user. there are two options passed to the pushmanager.subscribe() method — the first is uservisibleonly: true, which means all the notifications sent to the user will be visible to them, and the second one is the applicationserver
key, which contains our successfully acquired and converted vapid
key. return registration.pushmanager.subscribe({ uservisibleonly: true, applicationserver
key: convertedvapid
key }); now let's move to the subscription part — the app first sends the subscription details as json to the server using fetch. fetch('./register', { method: 'post', headers: { 'content-type': 'appl...
...And 6 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
can be added to the root <html> element, and when the event fires, the event.target and its parents can be searched for a matching element. you can read more about event delegation here. it is important to note, however, that this method can have severe performance implications for certain events, namely mouseover, mouseout, and friends, which are fired very often while the mouse is moving. mon
key patching in many instances, especially when dealing with chrome code, the best way to modify actions which result in dom mutations is by wrapping the functions that trigger those changes. for instance, when you want to modify the result of dom mutations that you know are the result of the doawesomedomstuff() function, you can wrap it as follows: { let originaldoawesomedomstuff = doawe...
...ons on this method include modifying the arguments passed to the wrapped function, modifying its return value, and making changes both before and after the original method is called. this scheme is highly flexible and can be made to work under most circumstances. css animation events this technique, which works on firefox 5+, has some particular advantages. because it is based on css, it can be
keyed to match new elements of any arbitrary css selector. and because it is css-based, and is triggered when css is being applied anyway, it does not slow dom mutations. the technique was adapted from the method used by the x-tag library. the code below contains an inefficient fallback implementation for older browsers. it is worth noting, however, that while the animation-based implementation will...
...tor 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 {document} doc the document in which to watch for new nodes. * @optional @default document * * @returns {function} a function which may be called to unregister the * listener. ...
...And 5 more matches
Promises - Archive of obsolete content
abase_path }); try { // start a transaction to insert the data. yield db.executetransaction(function* () { for (let node of nodes) // insert the node's data, using an automatically-cached, // pre-compiled statement, and parameter placeholders. yield db.executecached( "insert into nodes (id, owner,
key, value) \ values (:id, :owner, :
key, :value);", { params: { id: node.id, owner: node.owner.id,
key: node.
key, value: node.value }}); }); // perform a bulk update. yield db.execute( "update owners, nodes \ set own...
... { params: { id: node.id, owner: node.owner.id,
key: node.
key, value: node.value }}); }); // perform a bulk update. yield db.execute( "update owners, nodes \ set owners.name = nodes.name \ where owners.id = nodes.owner and nodes.
key = 'name';"); // process some results. ...
...ld db.execute( "update owners, nodes \ set owners.name = nodes.name \ where owners.id = nodes.owner and nodes.
key = 'name';"); // process some results. ...
...And 5 more matches
Elements - Archive of obsolete content
amount of additional namespaces to handle your content. the most useful namespaces could be html/xhtml, xul (xml user interface language), svg (scalable vector graphics) and xlink. ...
...ndler id id #implied event nmref #required action cdata #implied phase (capturing|bubbling|target) #implied button (1|2|3) #implied modifiers cdata #implied
keycode cdata #implied
key cdata #implied charcode cdata #implied clickcount (1|2|3) #implied command id #implied preventdefault false|true #implied > the handler ...
...handling process. if no phase is specified, a default of bubbling is assumed. button - the button attribute imposes a filter on the handler. it is used with mouse handlers to specify a particular button. the event handler will only be matched if the value of the button field in the dom mouse event object matches the value of the attribute. modifiers - the modifiers attribute imposes a filter on
key and mouse handlers. its value is a whitespace- or comma-separated list of modifier
keys. if present in the list, then the modifier
key must be set in the dom event object in order for the handler to be matched. if the modifiers is not empty and the modifier is not present in the list, then the modifier
key must not be set in the dom event object in order for the handler to be matched. supported...
...And 5 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
hat an installation has already occurred. this discovery mechanism hinges on making the secondary install location available from looking at a common repository of metadata. on windows, this is the windows system registry. once again, this step involves calls to getfolder to locate a "well known" directory in which to install to as a secondary install location. ...
... this is the windows system registry. once again, this step involves calls to getfolder to locate a "well known" directory in which to install to as a secondary install location. on windows: write windows registry
keys that netscape gecko browsers (that get installed after the current browser) can parse to discover where the plugin is installed on the machine. in particular, the windows registry
keys should point to the secondary install location so that future netscape gecko browsers can find and add to their list of available plugin locations. the exact format of these registry
keys and how they should be written is covered in the section on the first install problem. to actually create and write
keys to the windows system registry, you'll use the functions of the winreg object. ensure th...
...n has already been installed by the user benefit from the existing installation rather than download the same plugin again? in order to address this issue, plugin vendors are encouraged to: install the plugin software components for the browser (e.g. dlls on windows, and xpt files if applicable) to a secondary location, in addition to that of the plugins directory of the current browser. ...
...And 5 more matches
XUL Events - Archive of obsolete content
is moved, whether it results in content being scrolled or not. the target of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the click event. focus the focus event is sent to an element when it receives the focus. ...
...an element when it receives the focus. once an element has the focus,
keyboard events are sent to it. the focus can be changed by clicking on another element, by pressing tab to switch to the next element in the tab order sequence, or by pressing 'back tab' to switch focus to the previous element in the tab order. attribute: onfocus
keydown the
keydown event is sent to an element that has the focus while a
key is pressed but not released. ...
...sing tab to switch to the next element in the tab order sequence, or by pressing 'back tab' to switch focus to the previous element in the tab order. attribute: onfocus
keydown the
keydown event is sent to an element that has the focus while a
key is pressed but not released. ...
...And 5 more matches
CSS values and units - Learn web development
e: yes, css values tend to be denoted using angle brackets, to differentiate them from css properties (e.g. the color property, versus the <color> data type). you might get confused between css data types and html elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts. in the following example we have set the color of our heading using a
keyword, and the background using the rgb() function: h1 { color: black; background-color: rgb(197,93,161); } a value in css is a way to define a collection of allowable sub-values. this means that if you see <color> as valid you don't need to wonder which of the different types of color value can be used —
keywords, hex values, rgb() functions, etc. you can use any available <color> values...
...ia a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) let's have a look at some of the ways in which we can specify colors in css. note: in this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common. color
keywords quite often in examples here in the learn section or elsewhere on mdn you will see the color
keywords used, as they are a simple and understandable way of specifying color. there are a number of these
keywords, some of which have fairly entertaining names! you can see a full list on the page for the <color> value. try playing with different color values in the live examples below, to get m...
...d by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.) these values are a bit more complex and less easy to understand, but they are a lot more versatile than
keywords — you can use hex values to represent any color you want to use in your color scheme. again, try changing the values to see how the colors vary. rgb and rgba values the third scheme we'll talk about here is rgb. an rgb value is a function — rgb() — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex val...
...And 5 more matches
Making decisions in your code — conditionals - Learn web development
olded me for eating all the cookies".) if...else statements let's look at by far the most common type of conditional statement you'll use in javascript — the humble if...else statement. basic if ... else syntax basic if...else syntax looks like the following in pseudocode: if (condition) { code to run if condition is true } else { run some other code instead } here we've got: the
keyword if followed by some parentheses. a condition to test, placed inside the parentheses (typically "is this value bigger than this other value?", or "does this value exist?"). the condition makes use of the comparison operators we discussed in the last module and returns true or false. a set of curly braces, inside which we have some code — this can be any code we like, and it only runs if th...
...heses. a condition to test, placed inside the parentheses (typically "is this value bigger than this other value?", or "does this value exist?"). the condition makes use of the comparison operators we discussed in the last module and returns true or false. a set of curly braces, inside which we have some code — this can be any code we like, and it only runs if the condition returns true. the
keyword else. another set of curly braces, inside which we have some more code — this can be any code we like, and it only runs if the condition is not true — or in other words, the condition is false. this code is pretty human-readable — it is saying "if the condition returns true, run code a, else run code b" you should note that you don't have to include the else and the second curly bra...
...er of choices until they find one that matches that value, executing the corresponding code that goes along with it. here's some more pseudocode, to give you an idea: switch (expression) { case choice1: run this code break; case choice2: run this code instead break; // include as many cases as you like default: actually, just run this code } here we've got: the
keyword switch, followed by a set of parentheses. an expression or value inside the parentheses. the
keyword case, followed by a choice that the expression/value could be, followed by a colon. some code to run if the choice matches the expression. a break statement, followed by a semi-colon. if the previous choice matches the expression/value, the browser stops executing the code block here, and ...
...And 5 more matches
Ember interactivity: Events, classes and state - Learn web development
ke the app functional. when beginning to think about interactivity, it's good to declare what each component's goals and responsibilities are. in the below sections we’ll do this for each component, and then walk you through how the functionality can be implemented. ...
...ing todos for our card-header / todo input, we'll want to be able to submit our typed in todo task when we press the enter
key and have it appear in the todos list. we want to be able to capture the text typed into the input. we do this so that our javascript code knows what we typed in, and we can save our todo and pass that text along to the todo list component to display. we can capture the
keydown event via the on modifier, which is just ember syntactic sugar around addeventlistener and removeeventlistener (see this explanation if needed). ...
...xt along to the todo list component to display. we can capture the
keydown event via the on modifier, which is just ember syntactic sugar around addeventlistener and removeeventlistener (see this explanation if needed). add the new line shown below to your header.hbs file: <input class='new-todo' aria-label='what needs to be done?' placeholder='what needs to be done?' autofocus {{on '
keydown' this.on
keydown}} > this new attribute is inside double curly braces, which tells you it is part of ember's dynamic templating syntax. the first argument passed to on is the type of event to respond to (
keydown), and the last argument is the event handler — the code that will run in response to the
keydown event firing. as you may expect from dealing with vanilla javascript objects, the th...
...And 5 more matches
Rendering a list of Vue components - Learn web development
item in items" — where items is the array you want to iterate over, and item is a reference to the current element in the array. v-for attaches to the element you want to repeat, and renders that element and its children. in this case, we want to display an <li> element for every to-do item inside our todoitems array. then we want to pass the data from each to-do item to a todoitem component. ...
...ement in the array. v-for attaches to the element you want to repeat, and renders that element and its children. in this case, we want to display an <li> element for every to-do item inside our todoitems array. then we want to pass the data from each to-do item to a todoitem component.
key attribute before we do that, there's one other piece of syntax to know about that is used with v-for, the
key attribute. ...
...while it would be great to use the name field, this field will eventually be controlled by user input, which means we can't guarantee that the names would be unique. ...
...And 5 more matches
Chrome Worker Modules
, you can omit the extension. creating modules creating a module is just as simple. a module is a file, whose filename generally ends with either “.js” or “.jsm”, and designed to be opened through require(). any value you define in that file is private by default. ...
...ng modules creating a module is just as simple. a module is a file, whose filename generally ends with either “.js” or “.jsm”, and designed to be opened through require(). any value you define in that file is private by default. ...
...just as simple. a module is a file, whose filename generally ends with either “.js” or “.jsm”, and designed to be opened through require(). any value you define in that file is private by default. ...
...And 5 more matches
gettext
warning: this document pertains to the development of mozilla web sites and not to the development of gecko-based extensions or applications. plurals gettext lets you define and use singular and plural forms of a string. to take advantage of this functionality, you need to use a different
keyword (i.e. different gettext function name) for string which are supposed to support plurals. for instance, in php the default
keyword for regular messages is gettext() and _(). for messages with plural support, the default
keyword is ngettext(). a definition of a string with plurals takes three arguments: the singular form of the english string, the plural form of the english string, and the number basing on which the function will return the correct (singular or plural) form of the str...
...ontext}\004{$msgid}"; $contextstringp = "{$context}\004{$msgid_plural}"; $translation = ngettext($contextstring, $contextstringp, $num); if ($translation === $contextstring) { return $msgid; } else if ($translation === $contextstringp) { return $msgid_plural; } else { return $translation; } } } // new gettext
keyword for regular strings with optional context argument function ___($message, $context ="") { if($context != "") { return pgettext($context, $message); } else { return _($message); } } // new gettext
keyword for plural strings with optional context argument function n___($message, $message_plural, $num, $context ="") { if($context != "") { return npgettex...
...t's two lines above the gettext function call. $num = 4; printf(n___("%d user likes this.", "%d users like this.", $num, 'another unique context string'), $num); ?> this code produces the following output: a simple string. a string with context. 1 user likes this. 4 users like this. to extract the strings from the php file, use xgettext. ...
...And 5 more matches
Certificate functions
mxr 3.6 and later cert_createrdn mxr 3.2.1 and later cert_createsubjectcertlist mxr 3.4 and later cert_createvalidity mxr 3.5 and later cert_crlcacherefreshissuer mxr 3.7 and later cert_decodealtnameextension mxr 3.10 and later cert_decodeauthinfoaccessextension mxr 3.10 and later cert_decodeauth
keyid mxr 3.10 and later cert_decodeavavalue mxr 3.4 and later cert_decodebasicconstraintvalue mxr 3.2 and later cert_decodecertfrompackage mxr 3.4 and later cert_decodecertificatepoliciesextension mxr 3.2 and later cert_decodecertpackage mxr 3.2 and later cert_decodecrldistributionpoints mxr 3.10 and late...
... mxr 3.10 and later cert_decodedercrl mxr 3.2 and later cert_decodedercrlwithflags mxr 3.6 and later cert_decodegeneralname mxr 3.4 and later cert_decodenameconstraintsextension mxr 3.10 and later cert_decodeocspresponse mxr 3.6 and later cert_decodeoidsequence mxr 3.2 and later cert_decodepriv
keyusageperiodextension mxr 3.10 and later cert_decodetruststring mxr 3.4 and later cert_decodeusernotice mxr 3.2 and later cert_dernametoascii mxr 3.4 and later cert_destroycertarray mxr 3.2 and later cert_destroycertificate mxr 3.2 and later cert_destroycertificatelist mxr 3.2 and later cert_des...
...sernotice mxr 3.10 and later cert_destroyvalidity mxr 3.5 and later cert_dupcertificate mxr 3.2 and later cert_dupcertlist mxr 3.2 and later cert_enableocspchecking mxr 3.2 and later cert_encodealtnameextension mxr 3.7 and later cert_encodeandaddbitstrextension mxr 3.5 and later cert_encodeauth
keyid mxr 3.5 and later cert_encodebasicconstraintvalue mxr 3.5 and later cert_encodecertpoliciesextension mxr 3.12 and later cert_encodecrldistributionpoints mxr 3.5 and later cert_encodegeneralname mxr 3.4 and later cert_encodeinfoaccessextension mxr 3.12 and later cert_encodeinhibitanyextension mxr 3.12...
...And 5 more matches
JSS FAQ
when will jss have jsse support? what versions of jdk and jre do you suggest? jss 3.x works with jdk versions 1.2 or higher, except version 1.3.0. most attention for future development and bug fixing will go to jdk 1.4 and later, so use that if you can. if you are using jdk 1.3.x, you will need to use at least version 1.3.1--see bug 1...
...ow to set up your environment to run jss. the only other documentation is the javadoc. ...
...t code; with that understanding, the best directory to look for sample code is in the org/mozilla/jss/tests directory: http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/tests org/mozilla/jss/tests/closedbs.java org/mozilla/jss/tests/
keyfactorytest.java org/mozilla/jss/tests/digesttest.java org/mozilla/jss/tests/jcasigtest.java org/mozilla/jss/tests/
keywrapping.java org/mozilla/jss/tests/listcerts.java org/mozilla/jss/tests/pk10gen.java org/mozilla/jss/tests/sdr.java org/mozilla/jss/tests/selftest.java org/mozilla/jss/tests/setupdbs.java org/mozilla/jss/tests/sigtest.java org/mozilla/jss/tests/sym
keygen.java org/mozilla/jss/tests/test
keygen.java org/mozilla/jss/tests/sslclientauth.java ...
...And 5 more matches
NSS 3.19.1 release notes
section below. distribution information the hg tag is nss_3_19_1_rtm. nss 3.19.1 requires nspr 4.10.8 or newer. ...
...554 / cve-2015-4000 - the minimum strength of
keys that libssl will accept for finite field algorithms (rsa, diffie-hellman, and dsa) have been increased to 1023 bits. new in nss 3.19.1 new functionality no new functionality is introduced in this release. this patch release includes a fix for the recently published logjam attack. notable changes in nss 3.19.1 nss reports the bit length of
keys more accurately. thus, the sec
key_public
keystrength and sec
key_public
keystrengthinbits functions could report smaller values for values that have leading zero values. this affects the
key strength values that are reported by ssl_getchannelinfo. ...
...elease includes a fix for the recently published logjam attack. notable changes in nss 3.19.1 nss reports the bit length of
keys more accurately. thus, the sec
key_public
keystrength and sec
key_public
keystrengthinbits functions could report smaller values for values that have leading zero values. this affects the
key strength values that are reported by ssl_getchannelinfo. ...
...And 5 more matches
NSS 3.35 release notes
23. this includes a large number of changes since 3.34, which supported only draft -18. see below for details. new types in sslt.h sslhandshaketype - the type of a tls handshake message. for the sslsignaturescheme enum, the enumerated values ssl_sig_rsa_pss_sha* are deprecated in response to a change in tls 1.3. please use the equivalent ssl_sig_rsa_pss_rsae_sha* for rsaencryption
keys, or ssl_sig_rsa_pss_pss_sha* for pss
keys. note that this release does not include support for the latter. notable changes in nss 3.35 previously, nss used the dbm file format by default. starting with version 3.35, nss uses the sql file format by default. below, are explanations that could be helpful for environments that need to adopt to the new default. if nss is initialized, ...
...latter. notable changes in nss 3.35 previously, nss used the dbm file format by default. starting with version 3.35, nss uses the sql file format by default. below, are explanations that could be helpful for environments that need to adopt to the new default. ...
...w, are explanations that could be helpful for environments that need to adopt to the new default. if nss is initialized, in read-write mode with a database directory provided, it uses database files to store certificates,
key, trust, and other information. nss supports two different database file formats: dbm: the legacy file format, based on berkeley db, using filenames cert8.db,
key3.db and secmod.db. parallel database access, by multiple applications, is forbidden as it will likely result in data corruption. sql: the newer file format, based on sqlite, using filenames cert9.db,
key4.and and pkcs11.txt. parallel database access, by multiple applications, is supported. applications using nss may explicitly request to use a specific database format, by adding ...
...And 5 more matches
NSS Sample Code sample3
* this code uses the simplest of the init functions, which does not * require a nss database to exist */...
... * this code uses the simplest of the init functions, which does not * require a nss database to exist */ ns...
...re a way to tell how large the output is?*/ unsigned int len; secstatus s; /* initialize nss * if your application code has already initialized nss, you can skip it * here. ...
...And 5 more matches
NSS PKCS11 Functions
pkcs #11 functions this chapter describes the core pkcs #11 functions that an application needs for communicating with cryptographic modules. in particular, these functions are used for obtaining certificates,
keys, and passwords. this was converted from "chapter 7: pkcs #11 functions". back to the nss reference main page. secmod_loadusermodule secmod_unloadusermodule secmod_openuserdb secmod_closeuserdb pk11_findcertfromnickname pk11_find
keybyanycert pk11_getslotname pk11_gettokenname pk11_ishw pk11_ispresent pk11_isreadonly pk11_setpasswordfunc secmod_loadusermodule load a new pkcs #11 module based on a modulespec. syntax #include "secmod.h" extern secmodmodule *secmod_loadusermodule(char *modulespec, secmodmodule *parent, prbool recurse); parameters this function has the fol...
...hen you could specify "configdir='./mybackup' tokendescription='backup'" as your module spec here to open the database ./mybackup on the fly. the slot id will be calculated for you by secmod_openuserdb(). typical parameters here are configdir, tokendescription and flags. a full list is below: configdir the location of the databases for this token. if configdir is not specified, and nocertdb and no
keydb is not specified, the load will fail. certprefix cert prefix for this token.
keyprefix prefix for the
key database for this token. (if not specified, certprefix will be used). tokendescription the label value for this token returned in the ck_token_info structure with an internationalize string (utf8). this value will be truncated at 32 bytes (no null, partial utf8 characters dropped). you shou...
...4 bytes (no null, partialutf8 characters dropped). this name will not change after thedatabase is closed. it should have some number to 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. no
keydb - 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 st...
...And 5 more matches
OLD SSL Reference
ns. chapter 2, "getting started with ssl" illustrates their use in sample client and server applications. ...
... functions used by callbacks cleanup chapter 2 getting started with ssl this chapter describes how to set up your environment, including certificate and
key databases, to run the nss sample code. the sample code and makefiles are available via lxr in the sslsamples directory. ...
...tructures used with the functions described in the rest of this document, and how to manage the memory used for them. additional types are described with the functions that use them or in the header files. types and structures certcertdbhandle certcertificate pk11slotinfo secitem sec
keyprivate
key secstatus managing secitem memory secitem_freeitem secitem_zfreeitem chapter 4 ssl functions this chapter describes the core ssl functions. ssl initialization functions nss_init nss_initreadwrite nss_nodb_init...
...And 5 more matches
NSS_3.12.3_release_notes.html
lds. if set to "disabled", softoken will ignore forks, and behave as it did in older versions. if set to any other non-empty value, softoken will report an error in both debug and non-debug builds. nss_use_decoded_cka_ec_point boolean (any non-empty value to enable) tells nss to send ec
key points across the pkcs#11 interface in the non-standard unencoded format that was used by default before nss 3.12.3. the new
key point format is a der encoded asn.1 octet string. nss_use_shexp_in_cert_name boolean (any non-empty value to enable) tells nss to allow shell-style wildcard patterns in certificates to match ssl server host nam...
...ells nss to allow shell-style wildcard patterns in certificates to match ssl server host names. this behavior was the default before nss 3.12.3. the new behavior conforms to rfc 2818. ...
...rver host names. this behavior was the default before nss 3.12.3. the new behavior conforms to rfc 2818. ...
...And 5 more matches
Rhino Debugger
script. console window the debugger redirects the system.out, system.in, and system.err streams to an internal javascript console window which provides an editable command line for you to enter javascript code and view system output. the console window maintains a history of the commands you have entered. you may move backward and forward through the history list by pressing the up/down arrow
keys on the
keyboard. opening scripts you may select the file->open menu item on the menu bar to load javascript scripts contained in files. this action will display a file-selection dialog box prompting you for the location of a script to load. the selected file will be compiled and displayed in a new window. running scripts you may select the file->run menu item on the menu bar to execute jav...
...ill be given to the debugger on its first instruction. controlling execution the debugger provides the following facilities for you to control the execution of scripts you are debugging: step into to single step entering any function calls, you may do any of the following: select the debug->step into menu item on the menu bar press the step into button on the toolbar press the f11
key on the
keyboard execution will resume. if the current line in the script contains a function call control will return to the debugger upon entry into the function. otherwise control will return to the debugger at the next line in the current function. step over to single step to the next line in the current function, you may do any of the following: select the debug->step over menu i...
...ntains a function call control will return to the debugger upon entry into the function. otherwise control will return to the debugger at the next line in the current function. ...
...And 5 more matches
Property attributes
the jsapi expresses property attributes as a value of type unsigned, the bitwise or of zero or more of the jsprop flags described below. an application can set property attributes when creating a property. see js_defineproperty, js_fs, and js_fn flag description jsprop_enumerate the property is visible to javascript for...in and for each ... ...
...ascript, such attempts are ignored. this is the ecma standard dontdelete attribute. the javascript language does not provide any way for a script to delete a permanent property. mxr id search for jsprop_permanent jsprop_propop_accessors passed to js_define(uc)property* and js_defineelement if getters/setters are jspropertyop/jsstrictpropertyop added in spidermon
key 38. mxr id search for jsprop_propop_accessors jsprop_getter the property's getter is a javascript function, not a c/c++ function. see js_defineproperty for details. mxr id search for jsprop_getter jsprop_setter the property's setter is a javascript function, not a c/c++ function. see js_defineproperty for details. mxr id search for jsprop_s...
...erties: it means that the name parameter is actually an integer unsafely cast to a pointer type, not a string. mxr id search for jsprop_index jsprop_define_late don't define property when initially creating the constructor. some objects like function/object have self-hosted functions that can only be defined after the initialization is already finished. ...
...And 5 more matches
Split object
the window object split objects were introduced to resolve a problem posed by the window object. three interrelated requirements on the window object seemed to conflict. ...
...ter to the other half. inner objects implement the jsextendedclass.outerobject hook, which returns a pointer to the corresponding outer object. outer objects implement the jsextendedclass.innerobject hook. but the association is not fixed. an outer object may be associated with different inner objects at different times. this feature is complicated. programs other than mozilla that embed spidermon
key should avoid using split objects. the window object split objects were introduced to resolve a problem posed by the window object. three interrelated requirements on the window object seemed to conflict. the window object is the global object for scripts in web pages. firefox has to maintain this for web compatibility. for performance, access to global properties must be fast. there ...
...s every time a user navigated to another page, then reusing the window. each page, even on back, had to load from scratch. this was slow. circa firefox 1.5, the decision was made to cache layout information and javascript state across navigation. a new approach for window was needed. security privileges are granted to js code on the basis of the scope chain of the executing code. spidermon
key walks up the scope chain to the nearest object that has jsprincipals attached. the end of the scope chain is the global object for the script. but what jsprincipals should be attached to a window object? the principals of the page the window is currently displaying? but then the page that called window.open could use a with statement to inject that window into its scope chain, gaining access to t...
...And 5 more matches
nsIApplicationCache
netwerk/base/public/nsiapplicationcache.idlscriptable this interface represents an application cache, which stores resources for offline use. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) each application cache has a unique client id for use with nsicacheservice.opensession() method, to access the cache's entries. each entry in the cache can be marked with a set of types, specified in the constants section. all application caches with the same group id belong to a cache group. each group has one "active" cache that will service future loads. inactive caches are removed from the cache when no longer referenced. method overview void activate(); void addnamespaces(in ns...
...ation caches with the same group id belong to a cache group. each group has one "active" cache that will service future loads. inactive caches are removed from the cache when no longer referenced. ...
... has one "active" cache that will service future loads. inactive caches are removed from the cache when no longer referenced. method overview void activate(); void addnamespaces(in nsiarray namespaces); void discard(); void gatherentries(in pruint32 typebits, out unsigned long count, [array, size_is(count)] out string
keys); nsiapplicationcachenamespace getmatchingnamespace(in acstring
key); unsigned long gettypes(in acstring
key); void initashandle(in acstring groupid, in acstring clientid); void markentry(in acstring
key, in unsigned long typebits); void unmarkentry(in acstring
key, in unsigned long typebits); attributes attribute type description active boolean true if the cache is the active cache for this group, otherwise false. read only. clientid acstring ...
...And 5 more matches
nsIDOMStorage
s stored in session storage may be accessed by any interested party in the same browsing context. 1.0 66 introduced gecko 1.8.1 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) a dom window's session storage object can be retrieved from the window's sessionstorage attribute. a storage object stores an arbitrary set of
key-value pairs, which may be retrieved, modified and removed as needed. a
key may only exist once within a storage object, and only one value may be associated with a particular
key.
keys are stored in a particular order with the condition that this order not change by merely changing the value associated with a
key, but the order may change when a
key is added or removed. method overview void cl...
...read only. methods clear() clear the content of this storage bound to a domain or an origin. ...
...read only. methods clear() clear the content of this storage bound to a domain or an origin. void clear(); parameters none. ...
...And 5 more matches
nsIDocumentLoader
uriloader/base/nsidocumentloader.idlscriptable this interface responsible for tracking groups of loads that belong together (images, external scripts, and so on.) and subdocuments (iframe, frame, and so on.). it is also responsible for sending nsiwebprogresslistener notifications. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) implemented by: @mozilla.org/docloaderservice;1. to create an instance, use: var documentloader = components.classes["@mozilla.org/docloaderservice;1"] .createinstance(components.interfaces.nsidocumentloader); method overview void clearparentdocloader(); obsolete since gecko 1.8 void createdocumentloader(out nsidocumentloader aninstance); obsolete since gecko 1.8...
... boolean isbusy(); obsolete since gecko 1.8 void stop(); attributes attribute type description container nsisupports read only. documentchannel nsichannel read only. loadgroup nsiloadgroup read only. ...
...ead only. documentchannel nsichannel read only. loadgroup nsiloadgroup read only. methods clearparentdocloader() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) void clearparentdocloader(); parameters none. ...
...And 5 more matches
nsIEditorIMESupport
editor/idl/nsieditorimesupport.idlscriptable please add a summary to this article. ...
...ompositionstring(in domstring acompositionstring, in nsiprivatetextrangelistptr atextrange, in nstexteventreplyptr areply); native code only! obsolete since gecko 2.0 attributes attribute type description composing boolean whether this editor has active ime transaction. read only. ...
...void endcomposition(); parameters none. forcecompositionend() force the composition end. void forcecompositionend(); parameters none. native code only!getpreferredimestate get preferred ime status of current widget. ...
...And 5 more matches
nsIGSettingsCollection
xpcom/system/nsigsettingsservice.idlscriptable please add a summary to this article. ...
... xpcom/system/nsigsettingsservice.idlscriptable please add a summary to this article. ...
... xpcom/system/nsigsettingsservice.idlscriptable please add a summary to this article. ...
...And 5 more matches
nsIMenuBoxObject
layout/xul/base/public/nsimenuboxobject.idlscriptable represents the box object for a xul menu. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) to get access to the box object for a given menu, use code like this: var boxobject = xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject); method overview boolean handle
keypress(in nsidom
keyevent
keyevent); void openmenu(in boolean openflag); attributes attribute type description activechild nsidomelement the currently active menu or menuitem child of the menu box. openedwith
key boolean true if the menubar was opened using the
keyboard; otherwise false. note: for gecko 2.0, the openedw...
... return value true if the event was handled, false if not. ...
... return value true if the event was handled, false if not. ...
...And 5 more matches
nsIMsgThread
the nsimsgfolder interface is used to interact with threads in thunderbird. ...
... the nsimsgfolder interface is used to interact with threads in thunderbird. ...
... the nsimsgfolder interface is used to interact with threads in thunderbird. ...
...And 5 more matches
nsISyncJPAKE
services/crypto/component/nsisyncjpake.idlscriptable please add a summary to this article. ...
... services/crypto/component/nsisyncjpake.idlscriptable please add a summary to this article. ...
... services/crypto/component/nsisyncjpake.idlscriptable please add a summary to this article. ...
...And 5 more matches
Debugger.Frame - Firefox Developer Tools
every handler method called while the debuggee is running in a given frame is given the same frame object. ...
...rther calls that function makes are treated as internal details, and omitted from the stack trace. if the non-debuggee function eventually calls back into debuggee code, then those frames are visible. (note that the debuggee is not considered an “immediate caller” of handler methods it triggers. even though the debuggee and debugger share the same javascript stack, frames pushed for spidermon
key’s calls to handler methods to report events in the debuggee are never considered visible frames.) invocation functions and “debugger” frames aninvocation function is any function in this interface that allows the debugger to invoke code in the debuggee: debugger.object.prototype.call, debugger.frame.prototype.eval, and so on. while invocation functions differ in the code to be run and ho...
...properties whose names are array indices. each property is a read-only accessor property whose getter returns the current value of the corresponding parameter. when the referent frame is popped, the argument value’s properties’ getters throw an error. handler methods of debugger.frame instances each debugger.frame instance inherits accessor properties holding handler functions for spidermon
key to call when given events occur in the frame. calls to frames’ handler methods are cross-compartment, intra-thread calls: the call takes place in the thread to which the frame belongs, and runs in the compartment to which the handler method belongs. debugger.frame instances inherit the following handler method properties: onstep this property must be either undefined or a function. if i...
...And 5 more matches
Debugger - Firefox Developer Tools
-date the modification of this flag. code coverage reports are monotone, thus one can take a snapshot when the debugger is enabled, and output the difference. setting this to false prevents this debugger instance from requiring any code coverage instrumentation, but it does not guarantee that the instrumentation is not present. uncaughtexceptionhook either null or a function that spidermon
key calls when a call to a debug event handler, breakpoint handler, or similar function throws some exception, which we refer to asdebugger-exception here. exceptions thrown in the debugger are not propagated to debuggee code; instead, spidermon
key calls this function, passingdebugger-exception as its sole argument and the debugger instance as the this value. this function should return a resumption ...
... exceptions thrown in the debugger are not propagated to debuggee code; instead, spidermon
key calls this function, passingdebugger-exception as its sole argument and the debugger instance as the this value. this function should return a resumption value, which determines how the debuggee should continue. if the uncaught exception hook itself throws an exception,uncaught-hook-exception, spidermon
key throws a new error object,confess-to-debuggee-exception, to the debuggee whose message blames the debugger, and includes textual descriptions ofuncaught-hook-exception and the originaldebugger-exception. if uncaughtexceptionhook’s value is null, spidermon
key throws an exception to the debuggee whose message blames the debugger, and includes a textual description ofdebugger-exception. assign...
... developers. for example, an uncaught exception hook may have access to browser-level features like the alert function, which this api’s implementation does not, making it possible to present debugger errors to the developer in a way suited to the context.) debugger handler functions each debugger instance inherits accessor properties with which you can store handler functions for spidermon
key to call when given events occur in debuggee code. when one of the events described below occurs in debuggee code, the engine pauses the debuggee and calls the corresponding debugging handler on each debugger instance that is observing the debuggee. the handler functions receive the debugger instance as their this value. most handler functions can return a resumption value indicating how the debu...
...And 5 more matches
Debugger.Object - Firefox Developer Tools
nted methods to inspect and modify its referent. the referent's properties do not appear directly as properties of the debugger.object instance; the debugger can access them only through methods like debugger.object.prototype.getownpropertydescriptor and debugger.object.prototype.defineproperty, ensuring that the debugger will not inadvertently invoke the referent's getters and setters. spidermon
key creates exactly one debugger.object instance for each debuggee object it presents to a given debugger instance: if the debugger encounters the same object through two different routes (perhaps two functions are called on the same object), spidermon
key presents the same debugger.object instance to the debugger each time. this means that the debugger can use the == operator to recognize when two de...
...rent is viewed. if more than one debugger instance is debugging the same code, each debugger gets a separate debugger.object instance for a given object. this allows the code using each debugger instance to place whatever properties it likes on its own debugger.object instances, without worrying about interfering with other debuggers. while most debugger.object instances are created by spidermon
key in the process of exposing debuggee's behavior and state to the debugger, the debugger can use debugger.object.prototype.makedebuggeevalue to create debugger.object instances for given debuggee objects, or use debugger.object.prototype.copy and debugger.object.prototype.create to create new objects in debuggee compartments, allocated as if by particular debuggee globals. debugger.object instance...
...class a string naming the ecmascript [[class]] of the referent. callable true if the referent is a callable object (such as a function or a function proxy); false otherwise. name the name of the referent, if it is a named function. if the referent is an anonymous function, or not a function at all, this is undefined. this accessor returns whatever name appeared after the function
keyword in the source code, regardless of whether the function is the result of instantiating a function declaration (which binds the function to its name in the enclosing scope) or evaluating a function expression (which binds the function to its name only within the function's body). displayname the referent's display name, if the referent is a function with a display name. if the referent is...
...And 5 more matches
Index - Firefox Developer Tools
.xul-based primary ui. this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menuitems placed via overlay). 9 introduction to dom inspector dom_inspector the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamon
key, or by selecting the dom inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application. dom inspector is standalone; it supports all toolkit applications, and it's possible to embed it in your own xulrunner app. dom inspector can serve as a sanity check to verify the state of the dom, or it can be used to manipulate the dom by hand, if desi...
...om inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application. dom inspector is standalone; it supports all toolkit applications, and it's possible to embed it in your own xulrunner app. dom inspector can serve as a sanity check to verify the state of the dom, or it can be used to manipulate the dom by hand, if desired. 10 all
keyboard shortcuts tools, l10n:priority this page lists all
keyboard shortcuts used by the developer tools built into firefox. 11 application application, debugging, devtools, firefox, guide, manifests, service workers the application panel provides tools for inspecting and debugging modern web apps (also known as progressive web apps). this includes inspection of servi...
...gle page on a single tab. 16 dom property viewer dom, tools, web development the dom property viewer lets you inspect the properties of the dom as an expandable tree structure, starting from the window object of the current page or the selected iframe. 17 debugger-api debugger, intermediate, intro, javascript, tools mozilla’s javascript engine, spidermon
key, provides a debugging interface named debugger which lets javascript code observe and manipulate the execution of other javascript code. both firefox’s built-in developer tools and the firebug add-on use debugger to implement their javascript debuggers. however, debugger is quite general, and can be used to implement other kinds of tools like tracers, coverage analysis, patch-and-continue, and ...
...And 5 more matches
Work with animations - Firefox Developer Tools
starting in firefox 48, it will show animations applied to the ::before and ::after pseudo-elements. to see how it works, we'll walk through an example. ...
...starting in firefox 48, it will show animations applied to the ::before and ::after pseudo-elements. to see how it works, we'll walk through an example. the box below contains a grayscale icon, representing firefox developer edition. ...
...he timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed). animation bars each animation or transition is shown as a horizontal bar laid across the timeline. the bar is: blue if a transition was used to animate a property orange if a @
keyframes animation was used green if the web animations api was used the bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different css properties). the bar is shaped to reflect the easing effect used for the animation. in the example above you can see that the first bar is concave, representing ease-in, and the se...
...And 5 more matches
AuthenticatorAttestationResponse.attestationObject - Web APIs
the attestationobject property of the authenticatorattestationresponse interface returns an arraybuffer containing the new public
key, as well as signature over the entire attestationobject with a private
key that is stored in the authenticator when it is manufactured. as part of the credentialscontainer.create() call, an authenticator will create a new
keypair as well as an attestationobject for that
keypair. the public
key that corresponds to the private
key that has created the attestation signature is well known; however, there are various well known attestation public
key chains for different ecosystems (for example, android or tpm attestations). syntax attestobj = authenticatorattestationresponse.attestationobject properties after decoding the cbor encoded arraybuffer, the resul...
... cbor map. the same authenticatorassertionresponse.authenticatordata field is used by both authenticatorattestationresponse and by authenticatorassertionresponse. when used in attestation, it contains an optional field, attestedcredentialdata. this field is not included when used in the authenticatorassertionresponse. the attestedcredentialdata field contains the credentialid and credentialpublic
key. ...
...the authenticatorassertionresponse. the attestedcredentialdata field contains the credentialid and credentialpublic
key. fmt a text string that indicates the format of the attstmt. the webauthn specification defines a number of formats; however, formats may also be defined in other specifications and registered in an iana registry. formats defined by webauthn are: "packed" "tpm" "android-
key" "android-safetynet" "fido-u2f" "none" attstmt a an attestation statement that is of the format defined by "fmt". for now, see the webauthn specification for details on each format. ...
...And 5 more matches
CacheStorage - Web APIs
rs, even though the service workers spec defines it). note: chrome and safari only expose `cachestorage` to the windowed context over https. window.caches will be undefined unless an ssl certificate is configured. maintains a mapping of string names to corresponding cache objects. use cachestorage.open() to obtain a cache instance. use cachestorage.match() to check if a given request is a
key in any of the cache objects that the cachestorage object tracks. you can access cachestorage through the global caches property. note: cachestorage always rejects with a securityerror on untrusted origins (i.e. those that aren't using https, although this definition will likely become more complex in the future.) when testing, you can get around this by checking the "enable service workers over...
...his definition will likely become more complex in the future.) when testing, you can get around this by checking the "enable service workers over http (when toolbox is open)" option in the firefox devtools options/gear menu. note: cachestorage.match() is a convenience method. equivalent functionality to match a cache entry can be implemented by returning an array of cache names from cachestorage.
keys(), opening each cache with cachestorage.open(), and matching the one you want with cache.match(). methods cachestorage.match() checks if a given request is a
key in any of the cache objects that the cachestorage object tracks, and returns a promise that resolves to that match. cachestorage.has() returns a promise that resolves to true if a cache object matching the cachename exists. cach...
...tching the cachename exists. cachestorage.open() returns a promise that resolves to the cache object matching the cachename (a new cache is created if it doesn't already exist.) cachestorage.delete() finds the cache object matching the cachename, and if found, deletes the cache object and returns a promise that resolves to true. if no cache object is found, it resolves to false. cachestorage.
keys() returns a promise that will resolve with an array containing strings corresponding to all of the named cache objects tracked by the cachestorage. use this method to iterate over a list of all the cache objects. examples this code snippet is from the mdn sw-test example (see sw-test running live.) this service worker script waits for an installevent to fire, then runs waituntil to handle th...
...And 5 more matches
IDBObjectStore.add() - Web APIs
ted successfully, listen for the transaction’s complete event in addition to the idbobjectstore.add request’s success event, because the transaction may still fail after the success event fires. in other words, the success event is only triggered when the transaction has been successfully queued. the add method is an insert only method. ...
...ten for the transaction’s complete event in addition to the idbobjectstore.add request’s success event, because the transaction may still fail after the success event fires. in other words, the success event is only triggered when the transaction has been successfully queued. the add method is an insert only method. ...
...if unspecified, it results to null. returns an idbrequest object on which subsequent events related to this operation are fired. ...
...And 5 more matches
Writing WebSocket servers - Web APIs
bsocket handshake process by contacting the server and requesting a websocket connection. so, you must know how to interpret the client's request. the client will send a pretty standard http request with headers that looks like this (the http version must be 1.1 or greater, and the method must be get): get /chat http/1.1 host: example.com:8000 upgrade: websocket connection: upgrade sec-websocket-
key: dghlihnhbxbszsbub25jzq== sec-websocket-version: 13 the client can solicit extensions and/or subprotocols here; see miscellaneous for details. also, common headers like user-agent, referer, cookie, or authentication headers might be there as well. do whatever you want with those; they don't directly pertain to the websocket. it's also safe to ignore them. in many common setups, a reverse proxy...
... handshake failed in the http response body, but the message may never be displayed (browsers do not display it). if the server doesn't understand that version of websockets, it should send a sec-websocket-version header back that contains the version(s) it does understand. in the example above, it indicates version 13 of the websocket protocol. the most interesting header here is sec-websocket-
key. let's look at that next. note: regular http status codes can be used only before the handshake. after the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec). server handshake response when the server receives the handshake request, it should send back a special response that indicates that the protocol will be changing from http to websocket. t...
...tra \r\n after the last one to indicate the end of the header): http/1.1 101 switching protocols upgrade: websocket connection: upgrade sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo= additionally, the server can decide on extension/subprotocol requests here; see miscellaneous for details. the sec-websocket-accept header is important in that the server must derive it from the sec-websocket-
key that the client sent to it. to get it, concatenate the client's sec-websocket-
key and the string "258eafa5-e914-47da-95ca-c5ab0dc85b11" together (it's a "magic string"), take the sha-1 hash of the result, and return the base64 encoding of that hash. note: this seemingly overcomplicated process exists so that it's obvious to the client whether the server supports websockets. this is important be...
...And 5 more matches
Using the Web Storage API - Web APIs
the web storage api provides mechanisms by which browsers can securely store
key/value pairs. this article provides a walkthrough of how to make use of this technology. basic concepts storage objects are simple
key-value stores, similar to objects, but they stay intact through page loads. the
keys and the values are always strings (note that, as with objects, integer
keys will be automatically converted to strings). you can access these values like an object, or with the storage.getitem() and storage.setitem() methods. ...
... converted to strings). you can access these values like an object, or with the storage.getitem() and storage.setitem() methods. these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a4509b'; localstorage['colorsetting'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem,
key, length) to prevent the pitfalls associated with using plain objects as
key-value stores. the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores). localstorage does the same thing, but persists even w...
...run populatestorage() to add the existing customization values to the storage. if there are already values there, we run setstyles() to update the page styling with the stored values. note: you could also use storage.length to test whether the storage object is empty or not. getting values from storage as noted above, values can be retrieved from storage using storage.getitem(). this takes the
key of the data item as an argument, and returns the data value. for example: function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('ima...
...And 5 more matches
ARIA: application role - Accessibility
desktop application. description the application role indicates to assistive technologies that this part of the web content contains elements that do not conform to any other known html element or wai-aria widget. any sort of special interpretation of html structures and widgets should be suspended, and control should be completely handed over to the browser and web application to handle mouse,
keyboard, or touch interaction. in this mode, the web author is completely responsible for handling any and all
keyboard input, focus management, and other interactions and cannot assume assistive technologies would do any processing on their end. if the web application encompassed by the application role contains parts that should be treated like normal web content, a role of document or article s...
...eaders and some other assistive technologies (at) have traditionally grabbed the whole web content from the browser at once after it had finished loading. the ats build their own representation of it that makes the most sense for a blind user to consume the content. this is often referred to as virtual document, browse mode, or similar terms. the document is streamlined to a single-column view. ...
...ent, browse mode, or similar terms. the document is streamlined to a single-column view. a
keyboard interaction model is generated that is very similar to a word processor where users can read line by line, sentence by sentence, or paragraph by paragraph. the at will read any semantics like links, headings, form controls, tables, lists, or images. in addition, a set of so-called quick navigation
keys has been established over the years that allows blind users to skim through a page via a certain element type. such elements usually include headings, form fields, lists, tables, links, graphics, or landmark regions. for all of this to work, ats intercept almost all
keyboard input and consume it themselves, letting nothing through to the browser or other user agent. to be able to interact with ...
...And 5 more matches
CSS Box Alignment - CSS: Cascading Style Sheets
ide their grid areas is controlled with align-items. the first item overrides the align-items value set on the group by setting align-self to center. flexbox alignment example in this example, three flex items are aligned on the main axis using justify-content and on the cross axis using align-items. the first item overrides the align-items set on the group by setting align-self to center.
key concepts and terminology the specification details some alignment terminology to make it easier to discuss these alignment properties outside of their implementation within a particular layout method. there are also some
key concepts which are common to all layout methods. relationship to writing modes alignment is linked to writing modes in that when we align an item we do not consider whethe...
...ent subjects inside. fallback alignment if you set an alignment that cannot be fulfilled, then the fallback alignment will come into play and deal with the available space. this fallback alignment is specified individually for each layout method and detailed on the page for that method. types of alignment there are three different types of alignment that the specification details; these use
keyword values. positional alignment: specifying the position of an alignment subject with relation to its alignment container. baseline alignment: these
keywords define alignment as a relationship among the baselines of multiple alignment subjects within an alignment context. distributed alignment: these
keywords define alignment as a distribution of space among alignment subjects. positional...
.... positional alignment: specifying the position of an alignment subject with relation to its alignment container. baseline alignment: these
keywords define alignment as a relationship among the baselines of multiple alignment subjects within an alignment context. distributed alignment: these
keywords define alignment as a distribution of space among alignment subjects. positional alignment
keyword values the following values are defined for positional alignment, and can be used as values for content alignment with justify-content and align-content and also for self alignment with justify-self and align-self. center start end self-start self-end flex-start for flexbox only flex-end for flexbox only left right other than the physical values of left and right, which relate t...
...And 5 more matches
<easing-function> - CSS: Cascading Style Sheets
ere are three types of easing function: linear, cubic bézier curves, and staircase functions. the value of an <easing-function> type describes the easing function using one of those three types. easing functions css supports three kinds of easing functions: linear, the subset of the cubic bézier curves that are functions, and staircase functions. the most useful of these functions are given a
keyword that allows them to be easily referenced. the linear class of easing functions linear the animation moves from beginning to end at a constant rate. this
keyword represents the easing function cubic-bezier(0.0, 0.0, 1.0, 1.0). the cubic-bezier() class of easing functions the cubic-bezier() functional notation defines a cubic bézier curve. as these curves are continuous, they are ofte...
...p2 ordinate outside the [0, 1] range may generate bouncing effects. when you specify an invalid cubic-bezier curve, css ignores the whole property. syntax cubic-bezier(x1, y1, x2, y2) where: x1, y1, x2, y2 are <number> values representing the abscissas, and ordinates of the p1 and p2 points defining the cubic bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid.
keywords for common cubic-bezier easing functions ease the animation starts slowly, accelerates sharply, and then slows gradually towards the end. this
keyword represents the easing function cubic-bezier(0.25, 0.1, 0.25, 1.0). it is similar to ease-in-out, though it accelerates more sharply at the beginning. ease-in the animation starts slowly, and then progressively speeds up until the end, ...
...nctions ease the animation starts slowly, accelerates sharply, and then slows gradually towards the end. this
keyword represents the easing function cubic-bezier(0.25, 0.1, 0.25, 1.0). it is similar to ease-in-out, though it accelerates more sharply at the beginning. ease-in the animation starts slowly, and then progressively speeds up until the end, at which point it stops abruptly. this
keyword represents the easing function cubic-bezier(0.42, 0.0, 1.0, 1.0). ease-in-out the animation starts slowly, speeds up, and then slows down towards the end. this
keyword represents the easing function cubic-bezier(0.42, 0.0, 0.58, 1.0). at the beginning, it behaves like the ease-in function; at the end, it is like the ease-out function. ease-out the animation starts abruptly, and then p...
...And 5 more matches
justify-items - CSS: Cascading Style Sheets
unting for the offset values of top, left, bottom, and right. in table cell layouts, this property is ignored (more about alignment in block, absolute positioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns the items inside their grid areas on the inline axis (more about alignment in grid layouts) syntax /* basic
keywords */ justify-items: auto; justify-items: normal; justify-items: stretch; /* positional alignment */ justify-items: center; /* pack items around the center */ justify-items: start; /* pack items from the start */ justify-items: end; /* pack items from the end */ justify-items: flex-start; /* equivalent to 'start'. note that justify-items is ignored in flexbox layouts. */ justif...
... values auto the value used is the valu...
... values auto the value used is the value of the justify-item...
...And 5 more matches
justify-self - CSS: Cascading Style Sheets
accounting for the offset values of top, left, bottom, and right. in table cell layouts, this property is ignored (more about alignment in block, absolute positioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns an item inside its grid area on the inline axis (more about alignment in grid layouts) syntax /* basic
keywords */ justify-self: auto; justify-self: normal; justify-self: stretch; /* positional alignment */ justify-self: center; /* pack item around the center */ justify-self: start; /* pack item from the start */ justify-self: end; /* pack item from the end */ justify-self: flex-start; /* equivalent to 'start'. note that justify-self is ignored in flexbox layouts. */ justify-self: fle...
... positional alignment: one of: center, start, end, flex-start, flex-end, self-start, self-end, left, or right. plus optionally safe or unsafe. values auto the value used is the value of the justify-items property of the parents box, unless ...
... positional alignment: one of: center, start, end, flex-start, flex-end, self-start, self-end, left, or right. plus optionally safe or unsafe. values auto the value used is the value of the justify-items property of the parents box, unless the box has no parent...
...And 5 more matches
text-transform - CSS: Cascading Style Sheets
r aon tslÍ (firefox only). in some cases, a hyphen is also removed upon uppercasing: an t-uisce transforms to an tuisce (and the hyphen is correctly reinserted by text-transform: lowercase). the language is defined by the lang html attribute or the xml:lang xml attribute. note: support for language-specific cases varies between browsers, so check the browser compatibility table. syntax /*
keyword values */ text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: full-width; text-transform: full-size-kana; /* global values */ text-transform: inherit; text-transform: initial; text-transform: unset; capitalize is a
keyword that converts the first letter of each word to uppercase. other characters remain unchanged (the...
...ged (they retain their original case as written in the element's text). a letter is defined as a character that is part of unicode's letter or number general categories ; thus, any punctuation marks or symbols at the beginning of a word are ignored. authors should not expect capitalize to follow language-specific title casing conventions (such as skipping articles in english). the capitalize
keyword was under-specified in css 1 and css 2.1. this resulted in differences between browsers in the way the first letter was calculated (firefox considered - and _ as letters, but other browsers did not. both webkit and gecko incorrectly considered letter-based symbols like ⓐ to be real letters. internet explorer 9 was the closest to the css 2 definition, but with some weird cases.) by precisely...
...dered letter-based symbols like ⓐ to be real letters. internet explorer 9 was the closest to the css 2 definition, but with some weird cases.) by precisely defining the correct behavior, css text level 3 cleans this mess up. the capitalize line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior. ...
...And 5 more matches
Event reference
compositionupdate a character is added to a passage of text being composed. compositionend the composition of a passage of text has been completed or canceled. view events event name fired when fullscreenchange an element was toggled to or from fullscr...
... compositionupdate a character is added to a passage of text being composed. compositionend the composition of a passage of text has been completed or canceled. view events event name fired when fullscreenchange an element was toggled to or from fullscreen mode. ...
... resize the document view has been resized. scroll the document view or an element has been scrolled. ...
...And 5 more matches
Audio and Video Delivery - Developer guides
ascript to generate media streams for playback. allowing javascript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams. encrypted media extensions (eme) encrypted media extensions is a w3c proposal to extend htmlmediaelement, providing apis to control playback of protected content. the api supports use cases ranging from simple clear
key decryption to high value video (given an appropriate user agent implementation). license/
key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies. one of the principle uses of eme is to allow browsers to implement drm (digital rights management), which helps to prevent web-ba...
...ipt to link your controls to the audio/video api. if you need something extra, it's possible to add features that are not currently present in default players, such as playback rate, quality stream switches or even audio spectrums. you can also choose how to make your player responsive — for example you might remove the progress bar under certain conditions. you may detect click, touch and/or
keyboard events to trigger actions such as play, pause and scrubbing. it's often important to remember
keyboard controls for user convenience and accessibility. a quick example — first set up your audio and custom controls in html: <audio id="my-audio" src="http://jplayer.org/audio/mp3/miaow-01-tempered-song.mp3"></audio> <button id="my-control">play</button> add a bit of javascript to detec...
...for more information, see creating your own custom audio player. other tips for audio/video stopping the download of media while stopping th...
...And 5 more matches
HTML attribute reference - HTML: Hypertext Markup Language
l have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want. attribute list attribute name elements description accept <form>, <input> list of types the server accepts, typically a file type. accept-charset <form> list of supported charsets. access
key global attribute
keyboard shortcut to activate or add focus to the element. action <form> the uri of a program that processes the information submitted via the form. align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> specifies the horizontal alignment of the element. allow <ifra...
... async <script> executes the script asynchronously. autocapitalize global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the browser. autofocus <button>, <input>, <
keygen>, <select>, <textarea> the element should be automatically focused after the page loaded. autoplay <audio>, <video> the audio or video should play as soon as possible. background <body>, <table>, <td>, <th> specifies the url of an image file. note: although browsers and email clients may still support this attribute, it is obsolete. use css background-image...
...le> the border width. note: this is a legacy attribute. please use the css border property instead. buffered <audio>, <video> contains the time range of already buffered media. capture <input> from the html media capturethe definition of 'media capture' in that specification.spec, specifies a new file can be captured. challenge <
keygen> a challenge string that is submitted along with the public
key. charset <meta>, <script> declares the character encoding of the page or script. checked <command>, <input> indicates whether the element should be checked on page load. cite <blockquote>, <del>, <ins>, <q> contains a uri which points to the source of the quote or change. cl...
...And 5 more matches
<input type="button"> - HTML: Hypertext Markup Language
'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets a reference to the htmlinputelement object representing the <input> in the dom, saving this refence in the variable button. addeventlistener() is then used to establish a function that will be run when click events occur on the button. ...
...} else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets a reference to the htmlinputelement object representing the <input> in the dom, saving this refence in the variable button. addeventlistener() is then used to establish a function that will be run when click events occur on the button. ...
...e'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets a reference to the htmlinputelement object representing the <input> in the dom, saving this refence in the variable button. addeventlistener() is then used to establish a function that will be run when click events occur on the button. ...
...And 5 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
we'll talk about variables later, but in javascript it is possible to declare a variable without assigning a value to it. if you do this, the variable's type is undefined. undefined is actually a constant. javascript has a boolean type, with possibl...
...ype undefined that indicates an uninitialized variable — that is, a value hasn't even been assigned yet. we'll talk about variables later, but in javascript it is possible to declare a variable without assigning a value to it. if you do this, the variable's type is undefined. undefined is actually a constant. javascript has a boolean type, with possible values true and false (both of which are
keywords.) any value can be converted to a boolean according to the following rules: false, 0, empty strings (""), nan, null, and undefined all become false. all other values become true. you can perform this conversion explicitly using the boolean() function: boolean(''); // false boolean(234); // true however, this is rarely necessary, as javascript will silently perform this conversion w...
...etimes speak simply of "true values" and "false values," meaning values that become true and false, respectively, when converted to booleans. alternatively, such values can be called "truthy" and "falsy", respectively. boolean operations such as && (logical and), || (logical or), and ! (logical not) are supported; see below. variables new variables in javascript are declared using one of three
keywords: let, const, or var. let allows you to declare block-level variables. the declared variable is available from the block it is enclosed in. let a; let name = 'simon'; the following is an example of scope with a variable declared with let: // myletvariable is *not* visible out here for (let myletvariable = 0; myletvariable < 5; myletvariable++) { // myletvariable is only visible in h...
...And 5 more matches
Enhanced Extension Installation - Archive of obsolete content
xtensions/ any location specified in a text file with a {guid} name placed in one of the above locations, useful for developing extensions at another location, e.g. a nfs home directory and simply placing a text "link" file in the applicable directory above that links to the location of the extension in its installed state at the other location. any location specified in a guid-to-path registry
key mapping, e.g. [hklm|hkcu]\software\mozilla\firefox\extensions given these goals, and the likelihood of future goals, such as potential for extensions to the xulrunner framework, common drop zones for xpis etc it makes sense to have the set of install locations be customizable. by default, the application knows about and maintains three install locations: app-profile a directory-based insta...
...s sense to have the set of install locations be customizable. by default, the application knows about and maintains three install locations: app-profile a directory-based install location for items living in the application profile extensions directory. app-global a directory-based install location for items living in the application global extensions directory. app-registry a registry-
key based install location for items living at locations specified by a guid-to-path value set within the registry at a predefined location. to implement this, we create an interface that the extension manager can ask for information about the location, such as what its name is, where its located on disk (if anywhere, in the case of registry based locations which have no root directory), for a list...
... are enabled or disabled. if an extension is installed at two different install locations, the one with the higher importance is what is shown in this file. this replaces the individual extensions.rdf files at the old locations. <profile>/extensions-startup.manifest -all items this file contains a tab delimited set of lines, one per item. this is a list of all installed items, disabled or not,
keyed first by install location name, then by guid. the following information is stored for each entry: the persistent descriptor of the path where the item lives. the last modified time of that path, used to detect out of process upgrades. optionally, an operation
key that tells the startup system that there is an install operation pending that needs to be finalized, e.g. needs-install, need...
...And 4 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
be taken to avoid violating the mozilla add-on guidelines or creating an adverse user experience. due to the large volume of user complaints regarding hidden settings being changed against their will, and not being restored after the add-ons responsible are disabled, mozilla will take any steps necessary to mitigate the impact of offending add-ons. in particular, changing the location bar search
keyword url in a way which is not automatically reset when the add-on is removed will result in a reset prompt for users. other settings violations designed to restrict user choice will result in stronger action, such as blacklisting of the add-ons in question. the most technically sound method of achieving this, and the only acceptable way of changing preferences such that they are automatically res...
...ng with the example add-on at the end, and should be used where possible. changing default preference values there are two common ways of changing default preference values. the simplest, which works only for traditional, non-restartless add-ons, is to add the preference changes to a file in an extension's defaults/preferences/ directory. the following file, for instance, would change the default
keyword search engine, assuming that an engine with the name example engine is installed, as described below: // this is a localizable preference, so it must contain a url which // points at a properties file containing the preference name as a // property. we use a data: url for simplicity. pref("browser.search.defaultenginename", "data:text/plain,browser.search.defaultenginename=example engine"); i...
...emoving it when your extension is disabled), and 2) setting it as a default (and restoring the previous default when your extension is uninstalled). adding a new search engine search engines may be added either directly via an api call, or indirectly via an xml description file. while the former is the simpler method, it does not support complex descriptions containing suggestion urls or separate
keyword search urls. note: example uninstall code is only provided for restartless extensions. a separate tutorial exists for running code at uninstall in non-restartless extensions. an example bootstrap.js file illustrating the simple method follows: const { classes: cc, interfaces: ci, utils: cu, results: cr } = components; // import the services module. cu.import("resource://gre/modules/services.
...And 4 more matches
Index of archived content - Archive of obsolete content
sdk api lifecycle sdk and xul comparison testing the add-on sdk two types of scripts working with events xul migration guide high-level apis addon-page base64 clipboard context-menu hot
keys indexed-db l10n notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs simple-storage system tabs t...
...web content in an extension without security issues downloading json and javascript in extensions enhanced extension installation extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility extensions support in seamon
key 2 firefox addons developer guide hiding browser chrome hotfix extension how to convert an overlay extension to restartless inline options install manifests installing extensions and themes from web pages interaction between privileged and non-privileged pages jetpack processes legacy add-ons ...
...ion components using the stylesheet service bookmarks.export() bookmarks.import() adding preferences to an extension an interview with douglas bowman of wired news archived mozilla and build documentation activex control for hosting netscape plug-ins in ie archived spidermon
key docs file object open merging tracemon
key repo spidermon
key coding conventions autodial for windows nt automated testing tips and tricks automatic mozilla configurator enabling quicklaunch for ...
...And 4 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
function handleevent(aevent) { var myevent = window.event ? window.event : aevent; } </script> the properties and functions that the event object exposes are also often named differently in mozilla and internet explorer, as table 4 shows. table 4. event properties differences between mozilla and internet explorer internet explorer name mozilla name description alt
key alt
key boolean property that returns whether the alt
key was pressed during the event. cancelbubble stoppropagation() used to stop the event from bubbling farther up the tree. clientx clientx the x coordinate of the event, in relation to the element viewport. clienty clienty the y coordinate of the event, in relation to the element viewport. ...
...y boolean property that returns whether the alt
key was pressed during the event. cancelbubble stoppropagation() used to stop the event from bubbling farther up the tree. clientx clientx the x coordinate of the event, in relation to the element viewport. clienty clienty the y coordinate of the event, in relation to the element viewport. ctrl
key ctrl
key boolean property that returns whether the ctrl
key was pressed during the event. fromelement relatedtarget for mouse events, this is the element from which the mouse moved away.
keycode
keycode for
keyboard events, this is a number representing the
key that was pressed. it is 0 for mouse events. ...
... returnvalue preventdefault() used to prevent the event's default action from occurring. screenx screenx the x coordinate of the event, in relation to the screen. ...
...And 4 more matches
Using Remote XUL - Archive of obsolete content
application/vnd.mozilla.xul+xml'); ?> <!-- xul markup starts here --> note that you don't need a web server for this tutorial; you can load the document you create on your computer via a "file" url or the "open file" function of your browser. step 1: a basic xul document the first thing we need 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 docu...
...ments give us a valid xul document we can load and display in our web browser, even though there's nothing to see yet. source | rendered step 2: an iframe for displaying the web site content now that we have a basic xul document, we need a way to display pages from the mozilla.org web site. for that we'll use a xul iframe element. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the xul iframe element is just like its html counterpart: it defines an area within which web content can be displayed. its src attribute contains the url of the page being displayed in the iframe. we set this value to the mozilla.org home page by default so that page loads into the iframe when w...
...e analogous to menu items organized into menus, where clicking the link/selecting the menu item performs some function, so we'll use xul menu elements to implement them in our document. the independent links, on the other hand, are similar to xul buttons, which perform a function when pressed, so we'll use the button element for those. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="the mozilla organization" /> <menu label="developer docs" /> <menu label="testing" /> <menu label="tools" /> <button label="faq" /> <button label="search" /> </menubar> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the menubar element is a container for a series of menus. it can also contain...
...And 4 more matches
menuseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
...this should be one of the characters that appears in the label attribute for the element. all...
...And 4 more matches
tree - Archive of obsolete content
. the tree's data is retrieved from this custom view. the custom view should be attached to the tree by setting its view property. more information is available in the xul tutorial. also tree widget changes. ...
... custom view should be attached to the tree by setting its view property. more information is available in the xul tutorial. also tree widget changes. relevant accessbility guidelines provide alternative access (for example, via menus) to column picker and for header behaviors like sorting (these have no default
keyboard access). ...
...tive access (for example, via menus) to column picker and for header behaviors like sorting (these have no default
keyboard access). ...
...And 4 more matches
Mobile accessibility - Learn web development
ia, too. to make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices. there are some exceptions that need special consideration for mobile; the main ones are: control mechanisms — make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/
keyboard). user input — make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum). responsive design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens. summary of screenreader testing on android and ios the most common mobile platforms have fully functional scr...
...e design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens. summary of screenreader testing on android and ios the most common mobile platforms have fully functional screen readers. these function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than
key combinations. let's look at the main two: talkback on android and voiceover on ios. android talkback the talkback screen reader is built into the android operating system. to turn it on, look up what phone model and android version you have, and then look up where the talkback menu is. it tends to differ widely between android versions and even between different phone models. some phone manuf...
...s, form controls, or links, or navigate line by line, etc. for example, with talkback turned on: open your web browser. activate the url bar. enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. to enter the text of the url: select the url bar by swiping left/right till you get to it, and then double-tapping. hold your finger down on the virtual
keyboard until you get the character you want, and then release your finger to type it. repeat for each character. once you've finished, find the enter
key and press it. swipe left and right to move between different items on the page. swipe up and right with a smooth motion to enter the local content menu. swipe right until you find the "headings and landmarks" option. double-tap to sele...
...And 4 more matches
Define terms with HTML - Learn web development
html provides several ways to convey description semantics, whether inline or as structured glossaries. in this article, we'll cover how to properly mark up
keywords when you're defining them. prerequisites: you need to be familiar with how to create a basic html document. objective: learn how to introduce new
keywords and how to build description lists. when you need a term defined, you probably go straight to a dictionary or glossary. ...
...we'll cover how to properly mark up
keywords when you're defining them. prerequisites: you need to be familiar with how to create a basic html document. objective: learn how to introduce new
keywords and how to build description lists. when you need a term defined, you probably go straight to a dictionary or glossary. dictionaries and glossaries formally associate
keywords with one or more descriptions, as in this case: blue (adjective) of a color like the sky in a sunny day. the clear blue sky of a subtle sadness, melancholy. i'm feeling blue but we're constantly defining
keywords informally, as here: firefox is the web browser created by the mozilla foundation. to deal with these use cases, html provides tags to mark descriptions and words des...
...ky of a subtle sadness, melancholy. i'm feeling blue but we're constantly defining
keywords informally, as here: firefox is the web browser created by the mozilla foundation. to deal with these use cases, html provides tags to mark descriptions and words described, so that your meaning gets across properly to your readers. how to mark informal description in textbooks, the first time a
keyword occurs, it's common to put the
keyword in bold and define it right away. we do that in html too, except html is not a visual medium and so we don't use bold. we use <dfn>, which is a special element just for marking the first occurrence of
keywords. note that <dfn> tags go around the word to be defined, not the definition (the definition consists of the entire paragraph): <p><dfn>firefox</d...
...And 4 more matches
Advanced text formatting - Learn web development
<dt>bacon</dt>\n <dd>the glue that binds the world together.</dd>\n <dt>eggs</dt>\n <dd>the glue that binds the cake together.</dd>\n <dt>coffee</dt>\n <dd>the drink that gets the world running in the morning.</dd>\n <dd>a light brown color.</dd>\n</dl>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).
...(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.on
keyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; quotations html also has features available for marking up quotations; which element you ...
...sitive thinking, and <q cite="http://www.affirmationsforpositivethinking.com">the need to eliminate negative self talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com"><cite>affirmations for positive thinking</cite></a>.)</p>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).
...And 4 more matches
Getting started with HTML - Learn web development
n.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substr...
...this is called nesting. if...
...lution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<p>a link to my <a href="https://www.mozilla.org/" title="the mozilla homepage" target="_blank">favorite website</a>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substr...
...And 4 more matches
Looping code - Learn web development
andom(50), 0, 2 * math.pi); ctx.fill(); this would get very boring and difficult to maintain very quickly. loops really are the best. the standard for loop let's start exploring some specific loop constructs. the first, which you'll use most of the time, is the for loop — this has the following syntax: for (initializer; condition; final-expression) { // code to run } here we have: the
keyword for, followed by some parentheses. inside the parentheses we have three items, separated by semi-colons: an initializer — this is usually a variable set to a number, which is incremented to count the number of times the loop has run. it is also sometimes referred to as a counter variable. a condition — as mentioned before, this defines when the loop should stop looping. this is ...
... while (condition) { // code to run final-expression } this works in a very similar way to the for loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run — rather than these two items being included inside the parentheses. the condition is included inside the parentheses, which are preceded by the while
keyword rather than for. the same three items are still present, and they are still defined in the same order as they are in the for loop — this makes sense, as you still have to have an initializer defined before you can check whether it has reached the point where the condition is no longer true; the final-expression is then run after the code inside the loop has run (an iteration has been compl...
...ats[i] + ', '; } i++; } note: this still works just the same as expected — have a look at it running live on github (also view the full source code). the do...while loop is very similar, but provides a variation on the while structure: initializer do { // code to run final-expression } while (condition) in this case, the initializer again comes first, before the loop starts. the
keyword directly precedes the curly braces containing the code to run and the final expression. the differentiator here is that the condition comes after everything else, wrapped in parentheses and preceded by a while
keyword. in a do...while loop, the code inside the curly braces is always run once before the check is made to see if it should be executed again (in while and for, the check comes fir...
...And 4 more matches
Accessibility in React - Learn web development
previous overview: client-side javascript frameworks next in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both
keyboard-only and screenreader users. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to learn about implementing
keyboard accessibility in react. including
keyboard users at this point, we've accomplished all of the features we set out to implement. a user can add a new task, check and uncheck tasks, delete tasks, or edit task names. and they can filter their task list by all, active, or completed tasks. or, at least: they can do all o...
...y in react. including
keyboard users at this point, we've accomplished all of the features we set out to implement. a user can add a new task, check and uncheck tasks, delete tasks, or edit task names. and they can filter their task list by all, active, or completed tasks. or, at least: they can do all of these things with a mouse. unfortunately, these features are not very accessible to
keyboard-only users. let's explore this now. exploring the
keyboard usability problem start by clicking on the input at the top of our app, as if you're going to add a new task. you'll see a thick, dashed outline around that input. this outline is your visual indicator that the browser is currently focused on this element. ...
...this shows you that the browser's focus has moved. press tab a few more times, and you will see this dashed focus indicator move between each of the filter buttons. keep going until the focus indicator is around the first "edit" button. press enter. ...
...And 4 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
we’re going to do some refactoring. a ui for editing in order to allow users to edit a task, we have to provide a user interface for them to do so. first, import usestate into the todo component like we did before with the app component, by updating the first...
... app() function that reads and sets a filter. we want the default filter to be all because all of our tasks should be shown initially: const [filter, setfilter] = usestate('all'); defining our filters our goal right now is two-fold: each filter should have a unique name. each filter should have a unique behavior. a javascript object would be a great way to relate names to behaviors: each
key is the name of a filter; each property is the behavior associated with that name. at the top of app.js, beneath our imports but above our app() function, let's add an object called filter_map: const filter_map = { all: () => true, active: task => !task.completed, completed: task => task.completed }; the values of filter_map are functions that we will use to filter the tasks data array: ...
...leted: task => task.completed }; the values of filter_map are functions that we will use to filter the tasks data array: the all filter shows all tasks, so we return true for all tasks. the active filter shows tasks whose completed prop is false. the completed filter shows tasks whose completed prop is true. beneath our previous addition, add the following — here we are using the object.
keys() method to collect an array of filter_names: const filter_names = object.
keys(filter_map); note: we are defining these constants outside our app() function because if they were defined inside it, they would be recalculated every time the <app /> component re-renders, and we don’t want that. this information will never change no matter what our application does. rendering the filters now...
...And 4 more matches
Introduction to automated testing - Learn web development
se a different directory name than before, like sauce-test for example. install the node sauce labs wrapper using the following command: npm install saucelabs create a new file inside your project root called call_sauce.js. ...
...these can be retrieved from your user settings page. fill these in now. make sure everything is saved, and run your file like so: node call_sauce advanced: automated tests we'll cover actually running automated sauce lab tests in the next article. browserstack getting started with browserstack let's get started with a browserstack trial. create a browserstac...
...ief look at how we'd access the api using node.js. first, set up a new npm project to test this out, as detailed in setting up node and npm. use a different directory name than before, like bstack-test for example. create a new file inside your project root called call_bstack.js. ...
...And 4 more matches
Mozilla's Section 508 Compliance
states federal rehabilitation act's section 508 is a new standard for defining accessibility requirements for software and other electronic and information technology. part of section 508 (§1194.21) specifically relates to mozilla, and the ability of us government agencies to buy software that contains mozilla software components. ...
...ment agencies to buy software that contains mozilla software components. here is a detailed list of section 508 bugs in mozilla's seamon
key application suite. some of them are fairly minor. the following is provided for informational purposes only and is not a legally binding voluntary product accessibility template (vpat). ...
... mostly complete. ...
...And 4 more matches
Command line options
ofile_name is case sensitive. if you don't specify a profile name then the profile manager is opened instead. you must use an upper case p on linux with versions older than 7.x, as there lower case invokes purify mode (memory and leak detection). other platforms accept both upper and lower case. -profile "profile_path" start with the profile with the given path. firefox, thunderbird and seamon
key2.x only. "profile_path" can either be an absolute path ("/path/to/profile") or a relative path ("path/to/profile"). note: on mac os x specifying a relative path is not supported anymore from firefox 4.0 and up due to a regression, see bug 673955. browser -browser start with the browser component. firefox and seamon
key only. -foreground make this instance the active application. -new-tab...
...lute path ("/path/to/profile") or a relative path ("path/to/profile"). note: on mac os x specifying a relative path is not supported anymore from firefox 4.0 and up due to a regression, see bug 673955. browser -browser start with the browser component. firefox and seamon
key only. -foreground make this instance the active application. -new-tab url open url in a new tab. firefox and seamon
key2.x only. -new-window url open url in a new window. firefox and seamon
key2.x only. --kiosk url open url full screen without user interface. firefox 71 and later. -preferences open options/preferences window. firefox and seamon
key2.x only. -private opens firefox in permanent private browsing mode. firefox 3.6 and later only. may not be applicable in older ubuntu for firefox 20 and later, c...
... firefox 20 and later only. -private-window url open url in a new private browsing window. if a private browsing window is already open, a new tab is opened in the existing window. firefox 29 and later only. does not work in firefox 31 on linux mint 17 nor on firefox 48 on windows 7. url opens in a non-private window. -search term search term with your default search engine. firefox and seamon
key 2.1 and later only. -setdefaultbrowser set the application as the default browser. firefox only. -url url open url in a new tab or window, depend on the browser option. -url can be omitted. you may list multiple urls, separated by spaces. firefox and seamon
key only. firefox www.mozilla.com firefox www.mozilla.com developer.mozilla.org note: when opening multiple urls, firefox always opens ...
...And 4 more matches
Log.jsm
and keep to a minimum. config information regarding important configuration options the system is using that affect how it runs. debug detailed information on the flow through the system. expect these to be written to logs only. trace most detailed information. expect these to be written to logs only. ...
...the flow through the system. expect these to be written to logs only. trace most detailed information. expect these to be written to logs only. ...
...se to be written to logs only. ...
...And 4 more matches
Midas
ticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page. copy if there is a selection, this command will copy the selection to the clipboard. if there isn't a selection, nothing will happen. note: this command won't work without setting a pref or using signed js. see: more about security preferences note: the shortcut
key will automatically trigger this command (typically accel-c) with or without the signed js or any code on the page to handle it. createlink a uri. this command will not do anything if no selection is made. if there is a selection, a link will be inserted around the selection with the url parameter as the href of the link. cut if there is a selection, this command...
...und the selection with the url parameter as the href of the link. cut if there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. if there isn't a selection, nothing will happen. note: this command won't work without setting a pref or using signed js. see: more about security preferences note: the shortcut
key will automatically trigger this command (typically accel-x) with or without the signed js or any code on the page to handle it. decreasefontsize this command will add a <small> tag around selection or at insertion point. delete this command will delete all text and objects that are selected. if no text is selected it deletes one character to the right. this is ...
...mand (typically accel-x) with or without the signed js or any code on the page to handle it. decreasefontsize this command will add a <small> tag around selection or at insertion point. delete this command will delete all text and objects that are selected. if no text is selected it deletes one character to the right. this is similar to the delete button on the
keyboard. fontname a font name this command will set the font face for a selection or at the insertion point if there is no selection. the given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names. fontsize a number this command will set the fontsize for a selection or at the insertion point if there...
...And 4 more matches
PL_HashTableLookup
this means that one cannot tell whether a null return value means the entry does not exist or the value of the entry is null. ...
...this means that one cannot tell whether a null return value means the entry does not exist or the value of the entry is null. ...
...this means that one cannot tell whether a null return value means the entry does not exist or the value of the entry is null. ...
...And 4 more matches
NSS 3.12.4 release notes
sion 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_isinternal
keyslot (see pk11pub.h) secmod_opennewslot (see pk11pub.h) new error codes (see secerr.h): sec_error_bad_info_access_method sec_error_crl_import_failed new oids (see secoidt.h) sec_oid_x509_any_policy the nssckbi pkcs #11 module's version changed to 1.75. obsolete code for win16 has been removed. support for openvms has been removed. bugs fixed the following bugs have been fixed in nss...
...need to do post tests only in fips mode. bug 488396: dbm needs to be fips certifiable. ...
...: dbm needs to be fips certifiable. ...
...And 4 more matches
NSS 3.12.5 release_notes
in prlink.h nss_securememcmp port_loadlibraryfromorigin modified functions sgn_update (see cryptohi.h) the parameter "input" of this function is changed from unsigned char * to const unsigned char *. pk11_configurepkcs11 (see nss.h) the name of some parameters have been slightly changed ("des" became "desc"). deprecated headers the header file
key.h is deprecated. please use
keyhi.h instead. additional documentation in pk11pub.h: the caller of pk11_derencodepublic
key should free the returned secitem with a secitem_freeitem(..., pr_true) call. pk11_readrawattribute allocates the buffer for returning the attribute value. the caller of pk11_readrawattribute should free the data buffer pointed to by item using a secitem_freeit...
... bug 525056: timing attack against ssl3ext.c:ssl3_serverhandlesessionticketxtn() bug 526689: ssl3 &...
... bug 525056: timing attack against ssl3ext.c:ssl3_serverhandlesessionticketxtn() bug 526689: ssl3 & tls renegotiation vulnerability documentation...
...And 4 more matches
nsIAppStartup
toolkit/components/startup/public/nsiappstartup.idlscriptable this interface is intended to be used as application startup service. it also helps in quitting applications as well. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6) implemented by: @mozilla.org/toolkit/app-startup;1. to use the service: var appstartup = components.classes["@mozilla.org/toolkit/app-startup;1"] .getservice(components.interfaces.nsiappstartup); method overview void createhiddenwindow(); boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.9.1 void destroyhiddenwindow(); void doprofilestartup(in nsi...
... 0x100 restart the application after quitting. the application will be restarted with an empty command line and the normal profile selection process will take place on startup. methods createhiddenwindow() create the hidden window. void createhiddenwindow(); parameters none. createstartupstate() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) creates the initial state of the application by launching tasks specfied by "general.startup.*" prefs. note: size_to_content may be used for width or height. boolean createstartupstate( in long awindowwidth, in long awindowheight ); parameters awindowwidth the width to make the initial window(s) opened. awindowheight the height to make the initial window(s) opened. ...
...ow(s) opened. awindowheight the height to make the initial window(s) opened. return value true if a window was opened. destroyhiddenwindow() destroys the hidden window. this will have no effect if the hidden window has not yet been created. void destroyhiddenwindow(); parameters none. ...
...And 4 more matches
nsIDictionary
extensions/xml-rpc/idl/nsidictionary.idlscriptable a simple mutable table of objects, maintained as
key/value pairs. objects can be located and managed by referencing them by
key. 66 introduced gecko 1.0 obsolete gecko 1.9.1 inherits from: nsisummary last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) note: this interface was removed in firefox 3.5; use dict.jsm instead. see bug 668424 for further information. ...
...e pairs. objects can be located and managed by referencing them by
key. 66 introduced gecko 1.0 obsolete gecko 1.9.1 inherits from: nsisummary last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) note: this interface was removed in firefox 3.5; use dict.jsm instead. see bug 668424 for further information. ...
...ts can be located and managed by referencing them by
key. 66 introduced gecko 1.0 obsolete gecko 1.9.1 inherits from: nsisummary last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) note: this interface was removed in firefox 3.5; use dict.jsm instead. see bug 668424 for further information. method overview boolean has
key(in string
key); void get
keys(out pruint32 count, [retval, array, size_is(count)] out string
keys); nsisupports getvalue(in string
key); void setvalue(in string
key, in nsisupports value); nsisupports deletevalue(in string
key); void clear(); methods has
key() check if a given
key is present in the dictionary. ...
...And 4 more matches
nsIScrollable
/docshell/base/nsiscrollable.idlscriptable this interface can be implemented by a control that supports scrolling. this is a generic interface without concern for the type of content that may be inside. ...
...lue description scrollbar_auto 1 scrollbars visible only when needed. scrollbar_never 2 scrollbars never visible, even when scrolling is still possible. scrollbar_always 3 scrollbars always visible, even when scrolling is not possible. methods getcurscrollpos() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamon
key 2.26) long getcurscrollpos( in long scrollorientation ); parameters scrollorientation an integer representing the orientation of the scrollbar. return value getdefaultscrollbarpreferences() long getdefaultscrollbarpreferences( in long scrollorientation ); parameters scrollorientation an integer representing the orientation of the scrollbar. return value an integ...
...barvisibility() void getscrollbarvisibility( out boolean verticalvisible, out boolean horizontalvisible ); parameters verticalvisible boolean specifying the visibility of the vertical scrollbar. horizontalvisible boolean specifying the visibility of the horizontal scrollbar. getscrollrange() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamon
key 2.26) void getscrollrange( in long scrollorientation, out long minpos, out long maxpos ); parameters scrollorientation an integer representing the orientation of the scrollbar. minpos minimal position of the scroll range. maxpos maximal position of the scroll range. setcurscrollpos() obsolete since gecko 29.0 (firefox 29.0 / thunderbird...
...And 4 more matches
Index
2 account provisioner the account provisioner is the dialog that first comes up when starting thunderbird. ...
...nterfaces thunderbird this page describes the programmatic interfaces behind the activity manager component. the functionality of the component is described on the activity manager page, and the activity manager examples page has code snippets. see nsiactivitymanager.idl and nsiactivity.idl files for source documentation. ...
...address book interfaces provides an overview of the related interfaces. see an overview of thunderbird components for a general description of the thunderbird user interface and related programmatic interfaces. ...
...And 4 more matches
DOM Inspector internals - Firefox Developer Tools
or.xul-based primary ui. this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menuitems placed via overlay). besides the dom inspector's primary ui, there are a couple other top-level inspectors which differ slightly (the object inspector and dom inspector sidebar used in seamon
key). initially, we will begin by focusing on inspector.xul and its entry point, and then expand our focus later to explain how these other inspectors differ. dom inspector from a high-level perspective the dom inspector primary ui consists of some toolbars and a panelset. the panelset contains two panels. one panel reacts to changes to the inspected document, and the other panel reacts to changes ...
...e interesting stuff is in resources/content/. its contents should resemble the following: extensions/ … jsutil/ … prefs/ … res/ … tests/ … viewers/ … browseroverlay.xul commandoverlay.xul editingoverlay.xul flasher.js hooks.js inspector.css inspector.js inspectoroverlay.xul inspector.xml inspector.xul
keysetoverlay.xul object.js object.xul popupoverlay.xul sidebar.js sidebar.xul statusbaroverlay.xul tasksoverlay-cz.xul tasksoverlay-ff.xul tasksoverlay-mobile.xul tasksoverlay-sb.xul tasksoverlay-tb.xul tasksoverlay.xul toolboxoverlay.xul utils.js venkmanoverlay.xul viewerregistry.js overlays you will notice that there are a lot of overlays. some overlays can be described as host-...
...overlays can be described as host-integration overlays, and others as shared structure overlays. host-integration overlays dom inspector is a general-purpose extension, suitable for use with any mozilla toolkit host application. in order for dom inspector to be useful with its host application, though, there should be a way to launch dom inspector within it, e.g., by a menu item and an optional
keyboard shortcut such as ctrl+shift+i (or cmd+shift+i). either the host applications must provide these themselves (usually bundling dom inspector with the application, too), or dom inspector must explicitly support them by providing its own menu items and
keyboard shortcuts with host-integration overlays. dom inspector explicitly supports several mozilla project applications by providing its own h...
...And 4 more matches
Eyedropper - Firefox Developer Tools
to the clipboard. changing a color value in the rules view color values appearing in the inspector's rules view have color samples next to them: clicking the sample shows a color picker popup. from firefox 31, the popup contains an eyedropper icon: click this icon to activate the eyedropper. ...
...the popup contains an eyedropper icon: click this icon to activate the eyedropper. now, when you click the eyedropper, the color in the rules view is set to the color you selected. ...
...ains an eyedropper icon: click this icon to activate the eyedropper. now, when you click the eyedropper, the color in the rules view is set to the color you selected. ...
...And 4 more matches
AuthenticatorAttestationResponse - Web APIs
this response should be sent to the relying party's server to complete the creation of the credential. this interface inherites from authenticatorresponse. note: this interface is restricted to top-level contexts. use from within an <iframe> element will not have any effect. ...
... properties authenticatorattestationresponse.clientdatajson secure contextread only client data for the authentication, such as origin and challenge. the clientdatajson property is inherited from the authenticatorresponse. ...
...ly an arraybuffer containing authenticator data and an attestation statement for a newly-created
key pair. methods authenticatorattestationresponse.gettransports()secure context returns an array of strings describing which transport methods (e.g. usb, nfc) are believed to be supported with the authenticator. the array may be empty if the information is not available. ...
...And 4 more matches
Using the CSS Typed Object Model - Web APIs
sting it as font-weight: 700. custom properties, like our --color: red , are properties. as such, they are accessible via get(). ...
... custom properties, like our --color: red , are properties. as such, they are accessible via get(). you'll note that custom properties retain the value as written in the stylesheet, whereas computed styles will be listed as the computed value — color was listed as an rgb() value and the font-weight returned was 700 even though we use a named color and and the bold
keyword. ...
... the computed value — color was listed as an rgb() value and the font-weight returned was 700 even though we use a named color and and the bold
keyword. cssunitvalue and css
keywordvalue the power of the css typed om is that values are separate from units; parsing and concatenating string values may become be a thing of the past. every css property in a style map has a value. if the value is a
keyword, the object returned is a css
keywordvalue. if the value is numeric, a cssunitvalue is returned. css
keywordvalue is a class that defines
keywords like inherit, initial, unset, and other strings you don't quote, such as auto and grid. this subclass gives you a value property via css
keywordvalue.value. cssunitvalue is returned if the value is a unit type. it is a class that defines numbers wit...
...And 4 more matches
Event.type - Web APIs
rface returns a string containing the event's type. it is set when the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error. for a list of available event types, see the event reference. syntax let eventtype = event.type; value a domstring containing the type of event. ...
...urns a string containing the event's type. it is set when the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error. for a list of available event types, see the event reference. syntax let eventtype = event.type; value a domstring containing the type of event. ...
...set when the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error. for a list of available event types, see the event reference. syntax let eventtype = event.type; value a domstring containing the type of event. example this example logs the event type whenever you press a
keyboard
key or click a mouse button. ...
...And 4 more matches
IDBObjectStore.createIndex() - Web APIs
mind that indexeddb indexes can contain any javascript data type; indexeddb uses the structured clone algorithm to serialize stored objects, which allows for storage of simple and complex objects. note that this method must be called only from a versionchange transaction mode callback. note: this feature is available in web workers. syntax var myidbindex = objectstore.createindex(indexname,
keypath); var myidbindex = objectstore.createindex(indexname,
keypath, objectparameters); parameters indexname the name of the index to create. note that it is possible to create an index with an empty name.
keypath the
key path for the index to use. note that it is possible to create an index with an empty
keypath, and also to pass in a sequence (array) as a
keypath. objectparameters option...
...eypath the
key path for the index to use. note that it is possible to create an index with an empty
keypath, and also to pass in a sequence (array) as a
keypath. objectparameters optional an idbindexparameters object, which can include the following properties: attribute description unique if true, the index will not allow duplicate values for a single
key. multientry if true, the index will add an entry in the index for each array element when the
keypath resolves to an array. if false, it will add one single entry containing the array. locale currently firefox-only (43+), this allows you to specify a locale for the index. ...
...en-us, or pl. ...
...And 4 more matches
Storage.setItem() - Web APIs
return value undefined. exceptions setitem() may throw an exception if the storage is full. particularly, in mobile safari (since ios 5) it always throws when the user enters private mode. ...
... return value undefined. exceptions setitem() may throw an exception if the storage is full. particularly, in mobile safari (since ios 5) it always throws when the user enters private mode. ...
... return value undefined. exceptions setitem() may throw an exception if the storage is full. particularly, in mobile safari (since ios 5) it always throws when the user enters private mode. ...
...And 4 more matches
URL API - Web APIs
the url api is a component of the url standard, which defines what constitutes a valid uniform resource locator and the api that accesses and manipulates urls. the url standard also defines concepts such as domains, hosts, and ip addresses, and also attempts to describe in a standard way the legacy application/x-www-form-urlencoded mime type used to submit web forms' contents as a set of
key/value pairs. url concepts and usage the majority of the url standard is taken up by the definition of a url and how it is structured and parsed. also covered are definitions of various terms related to addressing of computers on a network, and the algorithms for parsing ip addresses and dom addresses are specified. more interesting to most developers is the api itself. accessing url components creati...
...t("user")); gotopage(addr.searchparams.get("page")); } catch(err) { showerrormessage(err); } for example, in the above snippet, the username and target page are taken from the query and passed to appropriate functions that are used by the site's code to log in and route the user to their desired destination within the site. other functions within urlsearchparams let you change the value of
keys, add and delete
keys and their values, and even sort the list of parameters. url api interfaces the url api is a simple one, with only a couple of interfaces to its name: url urlsearchparams older versions of the specification included an interface called urlutilsreadonly, which has since been merged into the workerlocation interface. examples if you want to process the parameters in...
...ace called urlutilsreadonly, which has since been merged into the workerlocation interface. examples if you want to process the parameters included in a url, you could do it manually, but it's much easier to create a url object to do it for you. the filltablewithparameters() function below takes as input a htmltableelement object representing a <table>. ...
...And 4 more matches
An overview of accessible web applications and widgets - Accessibility
making the element writable and removing the role attribute in "edit" mode (since <input> elements have their own role semantics). do not do this. instead, implement the "view" mode using a different element altogether, such as a <div> or <span> with a role of button, and the « edit » mode using a text <input> element. asynchronous content changes under construction. see also live regions
keyboard navigation often times developers overlook support for the
keyboard when they create custom widgets. to be accessible to a variety of users, all features of a web application or widget should also be controllable with the
keyboard, without requiring a mouse. in practice, this usually involves following the conventions supported by similar widgets on the desktop, taking full advantage of the...
...elopers overlook support for the
keyboard when they create custom widgets. to be accessible to a variety of users, all features of a web application or widget should also be controllable with the
keyboard, without requiring a mouse. in practice, this usually involves following the conventions supported by similar widgets on the desktop, taking full advantage of the tab, enter, spacebar, and arrow
keys. traditionally,
keyboard navigation on the web has been limited to the tab
key. a user presses tab to focus each link, button, or form on the page in a linear order, using shift-tab to navigate backwards. it's a one-dimensional form of navigation—forward and back, one element at a time. ...
...s on the desktop, taking full advantage of the tab, enter, spacebar, and arrow
keys. traditionally,
keyboard navigation on the web has been limited to the tab
key. a user presses tab to focus each link, button, or form on the page in a linear order, using shift-tab to navigate backwards. it's a one-dimensional form of navigation—forward and back, one element at a time. on fairly dense pages, a
keyboard-only user often has to press the tab
key dozens of times before accessing the needed section. implementing desktop-style
keyboard conventions on the web has the potential to significantly speed up navigation for many users. here's a summary of how
keyboard navigation should work in an aria-enabled web application: the tab
key should provide focus to the widget as a whole. for example, ta...
...And 4 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
rosoft's accessibility strategy is changing to a new api in longhorn. msaa will still be supported through an emulation layer, but that will probably be a very slow solution. we'll have to wait and see how good the msaa support in longhorn is, before we can call this one. msaa decision-making guide use msaa whenever you have created custom controls where you're handling the drawing, mouse and
keyboard accessibility in your own code. msaa is the only way to let all at's know what your code is doing. don't use msaa if you're not running on a windows platform ... hope that one was obvious. don't use msaa if you're only windows target for accessibility is longhorn. don't use msaa if you're not going to take it all the way via testing with assistive technologies and working with at vendo...
...text, editable text, a checkbox, or a table cell, etc. [important] get_accstate: a 32 bit field representing possible on/off states, such as focused, focusable, selected, selectable, visible, protected (for passwords), checked, etc. [important] get_acchelp: get context sensitive help for the iaccessible. get_acchelptopic: we don't use this, it's only if the windows help system is used. get_acc
keyboardshortcut: what is the
keyboard shortcut for this iaccessible (underlined alt+combo mnemonic) get_accfocus: which child is focused? [important] get_accselection: which children of this item are selected? get_accdefaultaction: get a description or name of the default action for this component, such as "jump" for links. accselect: select the item associated with this iaccessible. [important]...
...m [important] role_pagetab [important] role_propertypage [important] role_indicator role_graphic [important] role_statictext [important] role_text [important] role_pushbutton [important] role_checkbutton [important] role_radiobutton [important] role_combobox [important] role_droplist [important] role_progressbar [important] role_dial role_hot
keyfield role_slider role_spinbutton role_diagram role_animation role_equation role_buttondropdown role_buttonmenu role_buttondropdowngrid role_whitespace role_pagetablist [important] role_clock role_splitbutton role_ipaddress role_nothing msaa object identifiers cheat sheet for information on what each object identifier does, see the m...
...And 4 more matches
CSS values and units - CSS: Cascading Style Sheets
every css declaration includes a property / value pair. depending on the property, the value can include a single integer or
keyword, to a series of
keywords and values with or without units. there are a common set of data types -- values and units -- that css properties accept. below is an overview of most of these data types. refer to the page for each value type for more detailed information. textual data types <custom-ident> pre-defined
keywords as an <ident> <string> <url> text data types are either <string>, a quoted series of characters, or an <ident>, a "css identifier" which is an unquoted string. a <string> must be quoted with either single or double quotes. css identifiers, listed in the specifications as <ident> or <custom-ident>, must be unquoted. in the css specificat...
...an <ident> <string> <url> text data types are either <string>, a quoted series of characters, or an <ident>, a "css identifier" which is an unquoted string. a <string> must be quoted with either single or double quotes. css identifiers, listed in the specifications as <ident> or <custom-ident>, must be unquoted. ...
...be unquoted. in the css specifications, values that can be defined by the web developer, like
keyframe animations, font-family names, or grid areas are listed as a <custom-ident>, <string>, or both. when both quoted and unquoted user defined text values are permitted, the specification will list <custom-ident> | <string>, meaning quotes are optional, such as is the case with animation names: @
keyframe validident { /*
keyframes go here */ } @
keyframe 'validstring' { /*
keyframes go here */ } some text values are not valid if encompassed in quotes. for example, the value of grid-area can be a <custom-ident>, so if we had a grid area named content we would use it without quotes: .item { grid-area: content; } in comparison, a data type that is a <string>, such as a string value of t...
...And 4 more matches
animation-timing-function - CSS: Cascading Style Sheets
nimation progresses through the duration of each cycle. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. ...
...imation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); /* steps function
keywords */ animation-timing-function: steps(4, jump-start); animation-timing-function: steps(10, jump-end); animation-timing-function: steps(20, jump-none); animation-timing-function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* g...
...function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: unset; timing functions may be specified on individual
keyframes in a @
keyframes rule. if no animation-timing-function is specified on a
keyframe, the corresponding value of animation-timing-function from the element to which the animation is applied is used for that
keyframe. a
keyframe's timing function is applied on a property-by-property basis from the
keyframe on which it is specified until the next
keyframe specifying that property, or until the e...
...And 4 more matches
display - CSS: Cascading Style Sheets
low layout; the inner type sets the layout of children. some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the css flexible box model specification. see the table at the end of this document for all of the individual specifications. syntax the css display property is specified using
keyword values.
keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; } outside <display-outside> these
keywords specify the element’s outer display type, which is essentially its role in flow layout. valid <display-outside> values: block the...
...s that support the two value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. this will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout. inside <display-inside> these
keywords specify the element’s inner display type, which defines the type of formatting context that its contents are laid out in (assuming it is a non-replaced element). valid <display-inside> values: flow the element lays out its contents using flow layout (block-and-inline layout). if its outer display type is inline or run-in, and it is participating in a block or inline formatting con...
...the box created on the grid container would be a block level box. list item <display-listitem> the element generates a block box for the content and a separate list-item inline box. a single value of list-item will cause the element to behave like a list item. this can be used together with list-style-type and list-style-position. list-item can also be combined with any <display-outside>
keyword and the flow or flow-root <display-inside>
keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. if no outer value is specified, the principal box will have an outer display type of block. internal <display-internal> some layout models such as table and ruby have a complex internal structure, with several different roles...
...And 4 more matches
font-variant-ligatures - CSS: Cascading Style Sheets
trols which ligatures and contextual forms are used in textual content of the elements it applies to. this leads to more harmonized forms in the resulting text. 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. ...
... <common-lig-values> these valu...
...font-variant-ligatures: contextual; /* <contextual-alt-values> */ font-variant-ligatures: no-contextual; /* <contextual-alt-values> */ /* global values */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligatures: unset; the font-variant-ligatures property is specified as one of the
keyword values listed below. values normal this
keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. the ligatures and forms activated depend on the font, language and kind of script. this is the default value. none this
keyword specifies that all ligatures and contextual forms are disabled, even common ones. <common-lig-values> these values control the most common ligatures, like for fi, ff...
...And 4 more matches
Global attributes - HTML: Hypertext Markup Language
utes, used for improving accessibility. the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, on
keydown, on
keypress, on
keyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting. l...
... onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting. list of global attributes access
key provides a hint for generating a
keyboard shortcut for the current element. this attribute consists of a space-separated list of characters. the browser should use the first one that exists on the computer
keyboard layout. autocapitalize controls whether and how text input is automatically capitalized as it is entered/edited by the user. it can have the following values: off or none, no au...
...n completed. the browser won't render such elements. this attribute must not be used to hide content that could legitimately be shown. id defines a unique identifier (id) which must be unique in the whole document. its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with css). inputmode provides a hint to browsers as to the type of virtual
keyboard configuration to use when editing this element or its contents. used primarily on <input> elements, but is usable on any element while in contenteditable mode. is allows you to specify that a standard html element should behave like a registered custom built-in element (see using custom elements for more details). note: the item* attributes are part of the whatwg html microdata feature.
...And 4 more matches
HTTP Index - HTTP
clients and servers. 14 configuring servers for ogg media audio, http, media, ogg, video this guide covers a few server configuration changes that may be necessary for your web server to correctly serve ogg media files. 15 connection management in http/1.x connection management, guide, http, networking, performance, webmechanics connection management is a
key topic in http: opening and maintaining connections largely impacts the performance of web sites and web applications. in http/1.x, there are several models: short-lived connections, persistent connections, and http pipelining. 16 content security policy (csp) csp, content security policy, reference, security content security policy (csp) is an added layer of security that he...
... index http, index this page lists all mdn http pages along with their summary and tags. 40 http messages guide, http, webmechanics http messages are how data is exchanged between a server and a client. there are two types of messages: requests sent by the client to trigger an action on the server, and responses, the answer from the server. 41 http public
key pinning (hpkp) guide, hpkp, http, security http public
key pinning (hpkp) is a security feature that tells a web client to associate a specific cryptographic public
key with a certain web server to decrease the risk of mitm attacks with forged certificates. 42 http authentication access control, authentication, guide, http, security http provides a general framework...
...se a securityerror domexception to be be thrown. 130 feature-policy: encrypted-media directive, eme, feature policy, feature-policy, http, reference the http feature-policy header encrypted-media directive controls whether the current document is allowed to use the encrypted media extensions api (eme). when this policy is enabled, the promise returned by navigator.requestmedia
keysystemaccess() will reject with a domexception. 131 feature-policy: fullscreen feature policy, feature-policy, http, fullscreen, header the http feature-policy header fullscreen directive controls whether the current document is allowed to use element.requestfullscreen(). when this policy is enabled, the returned promise rejects with a typeerror. 132 feature-policy...
...And 4 more matches
Expressions and operators - JavaScript
yield pause and resume a generator function. yield* delegate to another generator function or iterable object. async function the async function defines an async function expression. ...
... yield pause and resume a generator function. yield* delegate to another generator function or iterable object. async function the async function defines an async function expression. ...
... yield pause and resume a generator function. yield* delegate to another generator function or iterable object. async function the async function defines an async function expression. ...
...And 4 more matches
Cross-domain Content Scripts - Archive of obsolete content
by default, content scripts don't have any cross-domain privileges. in particular, they can't: access content hosted in an iframe, if that content is served from a different domain make cross-domain xmlhttprequests however, you can enable these features for specific domains by adding them to your add-on's package.json under the "cross-domain-content"
key, which itself lives under the "permissions"
key: "permissions": { "cross-domain-content": ["http://example.org/", "http://example.com/"] } the domains listed must include the scheme and fully qualified domain name, and these must exactly match the domains serving the content - so in the example above, the content script will not be allowed to access content served from https://example.com/. wildcards are not allowed. this fe...
... the "main.js": creates a panel whose ...
... we need to add the "cross-domain-content"
key to "package.json": "permissions": { "cross-domain-content": ["http://en.m.wikipedia.org/"] } the add-on should successfully retrieve the iframe's content. cross-domain xmlhttprequest the following add-on creates a panel whose content is the summary weather forecast for shetland. if you want to try it out, you'll need to register and get an api
key. the "main.js": creates a panel whose content is supplied by "panel.html" and adds a content script "panel-script.js" to it sends the panel a "show" message when it is shown adds a button which shows the panel when it is clicked // main.js var data = require("sdk/self").data; var forecast_panel = require("sdk/panel").panel({ height: 50, contenturl: data.url("panel.html"), contentsc...
...And 3 more matches
indexed-db - Archive of obsolete content
nwards. here's a complete add-on that adds two buttons to the browser: the button labeled "add" adds the title of the current tab to a database, while the button labeled "list" lists all the titles in the database. the add-on implements helper functions open(), additem() and getitems() to open the database, add a new item to the database, and get all items in the database. ...
....onerror = function(e) { console.error(e.value) } function open(version) { var request = indexeddb.open("stuff", version); request.onupgradeneeded = function(e) { var db = e.target.result; e.target.transaction.onerror = database.onerror; if(db.objectstorenames.contains("items")) { db.deleteobjectstore("items"); } var store = db.createobjectstore("items", {
keypath: "time"}); }; request.onsuccess = function(e) { database.db = e.target.result; }; request.onerror = database.onerror; }; function additem(name) { var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var time = new date().gettime(); var request = store.put({ "name": name, "time": time }); request...
...time = new date().gettime(); var request = store.put({ "name": name, "time": time }); request.onerror = database.onerror; }; function getitems(callback) { var cb = callback; var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var items = new array(); trans.oncomplete = function() { cb(items); } var
keyrange = idb
keyrange.lowerbound(0); var cursorrequest = store.opencursor(
keyrange); cursorrequest.onsuccess = function(e) { var result = e.target.result; if(!!result == false) return; items.push(result.value.name); result.continue(); }; cursorrequest.onerror = database.onerror; }; function listitems(itemlist) { console.log(itemlist); } open("1"); var add = requ...
...And 3 more matches
panel - Archive of obsolete content
ript in a separate file and load it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. getting user input note: this example uses the action button api, which is only available from firefox 29 onwards. the following add-on adds a button which displays a panel when clicked. the panel just contains a <textarea> element: when the user presses the return
key, the contents of the <textarea> is sent to the main add-on code. the add-on consists of six files: main.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different sizes "mai...
...log the text to the console. textentrypanel.port.on("text-entered", function (text) { console.log(text); textentrypanel.hide(); }); the content script "get-text.js" looks like this: // when the user hits return, send the "text-entered" // message to main.js. // the message payload is the contents of the edit box. var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('
keyup', function on
keyup(event) { if (event.
keycode == 13) { // remove the newline. text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code. it means that the panel's about // to be shown. // // set the focus to the text area so the user can //...
... console.log(text); textentrypanel.hide(); }); the page script is exactly the same as the content script above, except that instead of self, we use addon to access the messaging apis: // when the user hits return, send the "text-entered" // message to main.js. // the message payload is the contents of the edit box. var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('
keyup', function on
keyup(event) { if (event.
keycode == 13) { // remove the newline. text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); addon.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code. it means that the panel's about // to be shown. // // set the focus to the text area so the user can /...
...And 3 more matches
jpm - Archive of obsolete content
lhost: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 xpi it to the addons.mozilla.org signing api, then downloads a signed xpi to the working directory if it passes validation. ...
...ret ${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 xpi it to the addons.mozilla.org signing api, then downloads a signed xpi to the working directory if it passes validation. to get values for --api-
key and --api-secret, you will need to create api credentials on addons.mozilla.org. on the amo
key management page, these values are labeled "jwt_issuer" and "jwt_secret". here are some possible outcomes of running the sign command: your add-on passed validation, was signed by mozilla, and a new signed xpi was downloaded to your working directory. your add-on failed validation, was not signed, ...
...ates an unlisted add-on inside addons.mozilla.org, which means you must distribute the xpi file yourself for your users to install it. if you need to create a listed add-on, just submit it directly to addons.mozilla.org where it is signed automatically. see the debugging section if you are experiencing difficulty installing a signed add-on. jpm sign accepts the following options: --api-
key=jwt_issuer api access
key (string) generated on the addons.mozilla.org
key management page. on the amo
key management page, this value is labeled "jwt issuer". --api-secret=jwt_secret api access secret (string) generated on the addons.mozilla.org
key management page. this value should be guarded with care and never checked into version control. if your secret is ...
...And 3 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
r within it. create a new file there with the name you used as the hello world extension id in the install manifest, helloworld@xuldev.org. set the contents of that file to be the full path to the work folder for your extension source files, c:\extensions\helloworld. ...
...ement in chapter 3. in this case, we only want to display an ok button, so we set the buttons attribute to accept. within the window are a label element and textbox element, wrapped in a hbox element so that they are arranged horizontally. ...
...eferences. edit clock.xul to match listing 8. add the doctype declaration that references the dtd file, and replace “clock” and “current time” with entity references. ...
...And 3 more matches
Adding Events and Commands - Archive of obsolete content
eanup you may need. please read appendix a for recommendations on how to use the load event to initialize your add-on without having a negative performance impact on firefox. another way to attach event handlers, just like html, is to place the handler in the xul code: <overlay id="xulschoolhello-browser-overlay" onload="xulschoolchrome.browseroverlay.init();" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> we prefer the first method because it keeps a better separation of content and behavior. also, note that the addeventlistener method receives the event name without the "on" prefix, while element attributes do have the prefix. there's a long list of events you can listen to, and which you use depend on the situation. elements only implement the events that a...
... events that are implemented for most elements. these are some notable events you should keep in mind: oncommand. this is one of the most important and commonly used events in xul. it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. for a button, it represents the action of the user clicking on it, or focusing it with the
keyboard and then pressing the enter
key. it's an abstraction of the main way to interact with a control element. onselect. fired when the selection in a tree or listbox changes. onclick. triggered when the user clicks on the element, including right clicks. you shouldn't normally use this event to trigger actions on input controls such as buttons. use oncommand instead. onfocus and onblur. used w...
...o interact with a control element. onselect. fired when the selection in a tree or listbox changes. onclick. triggered when the user clicks on the element, including right clicks. you shouldn't normally use this event to trigger actions on input controls such as buttons. use oncommand instead. onfocus and onblur. used when an element receives or loses focus when the user is navigating with the
keyboard. you can combine these with -moz-user-focus to add custom focus behavior to elements that normally wouldn't have it. drag and drop. drag and drop operations involve several events. since drag and drop is a complicated thing to manage, there are some high level wrappers that facilitate working with it. also keep in mind that there are 2 drag and drop apis, the newest (and preferred) one intr...
...And 3 more matches
Adding sidebars - Archive of obsolete content
flexible space to add 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. ...
...rom 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. ...
...lso 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;" access
key="&xulschoolhello.sidebar.access
key;" type="checkbox" autocheck="false" group="sidebar" sidebarurl="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;" oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the example in the mdc page includes a shortcut
key combination to toggle the new sidebar. ...
...And 3 more matches
Source code directories overview - Archive of obsolete content
this document is a guide for developers to the directory structure of the mozilla source code tree. it gives a bird's eye view of the source code so a developer can get a good idea what is in mozilla and where to find things. it is a good document for a new mozilla developer to start learning about the mozilla code base. this document contains material for seamon
key, firefox, and toolkit. it is a living document which is (supposed to be) updated monthly according to changes in the mozilla source tree. see also similar information in mozilla source code directory structure, and also see the more detailed overview of how the parts of gecko fit together. introduction: common subdirectories a common naming scheme is used throughout the mozilla source trees. at the top level is the name of t...
...s (supposed to be) updated monthly according to changes in the mozilla source tree. see also similar information in mozilla source code directory structure, and also see the more detailed overview of how the parts of gecko fit together. introduction: common subdirectories a common naming scheme is used throughout the mozilla source trees. at the top level is the name of the product (e.g. seamon
key). at the second level is the name of the module (e.g. the editor directory in seamon
key). 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 ow...
...e 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 seamon
key). 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-submodules and so on. base contains the basic (core) functionality for the module. base contains all the source code that cannot be categorized into a submodule. build contains any special makefiles for building the particular module.
...And 3 more matches
Getting Started - Archive of obsolete content
the folder containing seamon
key is called folder_with_seamon
key in this manual. extract theme while you can hypothetically begin with any theme already designed for seamon
key 2, for the sake of consistency we'll speak as though everyone is editing classic (default seamon
key theme). this is located in the file classic.jar found in the seamon
key 2 installation directory. a .jar file is in reality a renamed zip archive. opening the .jar files in your archive manager of choice should result in the file being automatically detected as being a zip archive. however, if your application doesn't detect classic.jar as a standard zip archive, rename the file classic.zip and continue extraction. ...
...directories inside classic.jar is one directory, skin. ...
...reality a renamed zip archive. opening the .jar files in your archive manager of choice should result in the file being automatically detected as being a zip archive. however, if your application doesn't detect classic.jar as a standard zip archive, rename the file classic.zip and continue extraction. classic.jar locations linux: folder_with_seamon
key/chrome/classic.jar windows: folder_with_seamon
key\chrome\classic.jar for mac os x: folder_with_seamon
key/chrome/classic.jar copy classic.jar to another easily accessible folder -- classic is recommended -- extract the contents of that folder, being sure to maintain the directory structure. directories inside classic.jar is one directory, skin. skin skin simply contains another directory, classic which holds all the good stuff. skin\classic clas...
...And 3 more matches
Windows Install - Archive of obsolete content
ired) { 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 sub
key // - windows already puts it in. // sub
keys have to exist before values can be put in. var sub
key; // the name of the sub
key you are poking around in var valname; // the name of the value you want to look at var value; // the data in the value you want to look at. var winreg = getwinregistry() ; if(winreg != null) { // here, we get the current version. winreg.setroot
key...
...indows already puts it in. // sub
keys have to exist before values can be put in. var sub
key; // the name of the sub
key you are poking around in var valname; // the name of the value you want to look at var value; // the data in the value you want to look at. var winreg = getwinregistry() ; if(winreg != null) { // here, we get the current version. ...
...ve to exist before values can be put in. var sub
key; // the name of the sub
key you are poking around in var valname; // the name of the value you want to look at var value; // the data in the value you want to look at. var winreg = getwinregistry() ; if(winreg != null) { // here, we get the current version. ...
...And 3 more matches
reserved - Archive of obsolete content
« xul reference home reserved type: string this attribute applies to a command element. setting this attribute to "true" indicates that the command is reserved for chrome code and is not available for use in the content. this means that, to execute these commands,
key events won't be passed to content, and event listeners registered for them in content will not be executed. currently, the content still receives these
key events, even though it can't override them. ...
...and event listeners registered for them in content will not be executed. currently, the content still receives these
key events, even though it can't override them. in future releases, it won't receive them. see bug 1173061 for details. ...
...de them. in future releases, it won't receive them. see bug 1173061 for details. ...
...And 3 more matches
Focus and Selection - Archive of obsolete content
focus and selection of elements. focused elements the focused element refers to the element which currently receives input events. if there are three textboxes on a window, the one that has the focus is the one that the user can currently enter text into. only one element per window has the focus at a time. the user can change the focus by clicking an element with the mouse or by pressing the tab
key. when the tab
key is pressed, the next element is given the focus. to step backwards, the shift
key and tab
key can be pressed. rearranging the tab order you can change the order in which elements are focused when the user presses the tab
key by adding a tabindex attribute to an element. this attribute should be set to a number. when the user presses tab, the focus will shift to the element with ...
...ted features of the command dispatcher. you can retrieve the command dispatcher from a window using the document's commanddispatcher property. from there, you can get the focused element with the dispatcher's focusedelement property. the example below shows this. ...
...if you were creating custom elements, you might have a need to change whether an element can have the focus or not. for this, you can use a special style property -moz-user-focus. this property controls whether an element can be focused. for instance, you could make a label focusable, as in the example below. example 4 : source view <label id="focused" style="-moz-user-focus: normal;" on
keypress="alert('label focused');" value="focus me"/> the style property is set to normal. you can also set it to ignore to turn off the focus for an element. this shouldn't be used for disabling an element, however; the disabled attribute or property should be used instead, since that is what it is designed for. once the label in the example is focused, it can respond to
key presses. naturally, the...
...And 3 more matches
More Menu Features - Archive of obsolete content
<menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog. we'll just add a few simple commands to a file menu and an edit menu. this is similar to the example above. ...
...nu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog. we'll just add a few simple commands to a file menu and an edit menu. this is similar to the example above. ...
...nd files example let's add a menu to the find files dialog. we'll just add a few simple commands to a file menu and an edit menu. this is similar to the example above. ...
...And 3 more matches
listitem - Archive of obsolete content
mples | attributes | properties | methods | related ] a single row in a listbox. the text of the listitem is specified either using listcell elements, or by placing a label attribute directly on the listitem element. by default it contains a single listcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. ...
...her using listcell elements, or by placing a label attribute directly on the listitem element. by default it contains a single listcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. ...
...this should be one of the characters that appears in the label attribute for the element. checked type: boolean indicates whether the element is checked or not. ...
...And 3 more matches
radio - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that can be turned on and off. radio buttons are almost always listed together in groups. only one radio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or
keyboard. other radio buttons in the same group are turned off. ...
...ogether in groups. only one radio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or
keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. more information is available in the xul tutorial. ...
...switch which radio button is turned on by selecting it with the mouse or
keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. more information is available in the xul tutorial. ...
...And 3 more matches
richlistbox - Archive of obsolete content
es | properties | methods | related ] this element is used to create a list of listitems (richlistitems), similar to a listbox, but is designed to be used when the items do not contain simple text content. note: in versions of firefox prior to firefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. ...
...ed to be used when the items do not contain simple text content. note: in versions of firefox prior to firefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. ...
..., selectitemrange, timedselect, toggleitemselection examples <richlistbox> <richlistitem> <description>a xul description!</description> </richlistitem> <richlistitem> <button label="a xul button"/> </richlistitem> </richlistbox> the richlistbox element contains multiple richlistitem elements, which can contain any content. you can click on any richlistitem element and use the
keyboard to move the selection around. attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will...
...And 3 more matches
Using SSH to connect to CVS - Archive of obsolete content
s document is a guide to setting up access to cvs.mozilla.org using ssh. this document assumes that you already have a write-access cvs account to cvs.mozilla.org. anonymous/read-only access via ssh is not available at this time. please see our source code page for directions accessing read-only cvs, and our getting write access page for directions on obtaining write access. ...
... do file a server operations bug in bugzilla and attach yourid_dsa.pub to the bug. ...
... do file a server operations bug in bugzilla and attach yourid_dsa.pub to the bug. ...
...And 3 more matches
Index - Game development
rience to the browser without the need for any plugins. you can play the full version of the hungry fridge game directly in your browser, install it from the firefox marketplace or check the source code of the demo along with all the other resources on the gamepad api content kit. 30 implementing game control mechanisms controls, desktop, gamepad, games, javascript, laptop, mobile,
keyboard, mouse, touch one of html5's main advantages as a game development platform is the ability to run on various platforms and devices. streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. in this series of articles we will show you how you can approach building a game that can be played using touchscreen s...
... one of html5's main advantages as a game development platform is the ability to run on various platforms and devices. streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and
keyboard, and also less common mechanisms such as gamepads. 31 desktop gamepad controls controls, desktop, gamepad api, gamepads, games, javascript, controllers that's it! we have successfully implemented gamepad controls in our game — try connecting any popular controller like the xbox 360 one and see for yourself how fun it is to avoid the asteroids and shoot the aliens with ...
... as gamepads. 31 desktop gamepad controls controls, desktop, gamepad api, gamepads, games, javascript, controllers that's it! we have successfully implemented gamepad controls in our game — try connecting any popular controller like the xbox 360 one and see for yourself how fun it is to avoid the asteroids and shoot the aliens with a gamepad. 32 desktop mouse and
keyboard controls controls, desktop, games, javascript,
keyboard, mouse ok, we've dealt with touch,
keyboard and mouse controls. now let's move on to look at how to set up the game to be controlled using a console gamepad, using the gamepad api. 33 mobile touch controls controls, games, javascript, mobile, pointer, touch that covers adding touch controls for mobile; in...
...And 3 more matches
Images in HTML - Learn web development
r, write it inside the same <a> element, or inside the image's alt attribute – whichever works best in your case. text. you should not put your text into images. if your main heading needs a drop shadow, for example, use css for that rather than putting the text into an image. however, if you really can't avoid doing this, you should supply the text inside the alt attribute. essentially, the
key is to deliver a usable experience, even when the images can't be seen. this ensures all users are not missing any of the content. try turning off images in your browser and see how things look. you'll soon realize how helpful alt text is if the image cannot be seen. note: for more information, see our guide to text alternatives. width and height you can use the width and height attributes to...
...eight="341" title="a t-rex on display in the manchester university museum"> this gives us a tooltip on mouse hover, just like link titles: however, this is not recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse (so e.g. no access to
keyboard users). if you are interested in more information about this, read the trials and tribulations of the title attribute by scott o'hara. it is better to include such supporting information in the main article text, rather than attached to the image. active learning: embedding an image it is now your turn to play! this active learning section will have you up and running with a simple embedd...
... '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substr...
...And 3 more matches
Client-side storage - Learn web development
e.removeitem() method takes one parameter — the name of a data item you want to remove — and removes that item out of web storage. type the following lines into your javascript console: localstorage.removeitem('name'); let myname = localstorage.getitem('name'); myname the third line should now return null — the name item no longer exists in the web storage. the data persists! one
key feature of web storage is that the data persists between page loads (and even when the browser is shut down, in the case of localstorage). let's look at this in action. open our web storage blank template again, but this time in a different browser to the one you've got this tutorial open in! this will make it easier to deal with. type these lines into the browser's javascript console...
...ting stored database (when performing an upgrade). ...
...here we first g...
...And 3 more matches
Useful string methods - Learn web development
= greetings[i];' + '\n if (greetings[i].indexof(\'christmas\') !== -1) {' + '\n let result = input;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n }' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).s...
...0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.on
keyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; fixing capitalization in this exercise we have the names of cities in the united kingdom,...
...+ '\n let capitalized = lower.replace(firstletter,firstletter.touppercase());' + '\n let result = capitalized;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).s...
...And 3 more matches
Working with Svelte stores - Learn web development
so the data in local storage. moreover, because web storage only supports saving string values, we will have to convert from string to object when saving, and vice versa when we are loading the value from local storage. create a new file called localstore.js, in your src directory. ...
...eb storage only supports saving string values, we will have to convert from string to object when saving, and vice versa when we are loading the value from local storage. create a new file called localstore.js, in your src directory. ...
...y. ...
...And 3 more matches
Eclipse CDT
ebuild the entire index (for example when you pull from mozilla-central) select "index > rebuild" on the project root. usage tips below are some of the more useful user tips. (if you're thinking of adding tips, please first consider how widely useful they'll be before adding to this already lengthy page.) for further documentation see the official eclipse user guide and eclipse cdt user guide.
keyboard shortcuts regarding
key bindings (
keyboard shortcuts), the bindings given below are the defaults. you can change the
key bindings by opening the workspace preferences (eclipse > preferences, or window > preferences) and selecting "general >
keys". you can set the scheme to "emacs" or "microsoft visual studio" if that's your thing, or change individual
key bindings. when changing individual ...
...board shortcuts regarding
key bindings (
keyboard shortcuts), the bindings given below are the defaults. you can change the
key bindings by opening the workspace preferences (eclipse > preferences, or window > preferences) and selecting "general >
keys". you can set the scheme to "emacs" or "microsoft visual studio" if that's your thing, or change individual
key bindings. when changing individual
key bindings, note that bindings are context sensitive and that any changes you make may be ignored if they conflict with existing bindings, or if they are overridden by a binding for a more specific context. for example, changing the find next command to cmd-g/ctrl-g is not sufficient. ...
... opening files you can quickly open a file by name using cmd-shift-r/ctrl-shift-r. ...
...And 3 more matches
Application Translation with Mercurial
he browser for desktops and notebooks running, windows, mac os or linux. fennec and fennec-* denote branches of firefox for mobile, the firefox browser for the android operating system. thunderbird and tb-* denote branches of thunderbird, the mail client, newsgroup and feed reader and chat client. the localization of the lightning calendar add-on also takes place on these branches. seamon
key and sea-* denote branches of seamon
key, the suite consisting of browser, mail and chat client and more. lightning and cal-* denote branches of lightning, the calendar add-on for thunderbird. the localization of lightning now happens on thunderbird's tb-* branches, the cal-* branches have been retired. in this example, we assume firefox for desktop shall be localized and that the localiz...
...ts with the source code get the source code by downloading the following file: firefox desktop or firefox for android: download the mozilla-<branch>.hg file (e.g. mozilla-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/firefox/bundles/ the file is not small, but after initially downloading it, you only need to download the latest changes in the future. thunderbird, lightning or seamon
key: download the comm-<branch>.hg file (e.g. comm-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/ in the next step, we will unpack the source code: open an input shell, e.g. by pressing the windows
key and r on the
keyboard or by calling the "run..." command from the windows "start" button, and then typing cmd and pressing the enter
key. launch the installed mozil...
... if you launch the start-shell-l10n.bat, compiling features will be disabled. you can create translation patches, but creating language packs for the application, binary repacks of the application (changing the localization of the program), and compiling the application likely won't work. you are now in the mozilla development environment which emulates a linux environment. ...
...And 3 more matches
McCoy
linux-i686.tar.bz2 (linux) mccoy-0.5.en-us.mac.dmg (mac os x universal) there are some known issues with running mccoy on linux. it will not run on older versions of linux and there are known problems even on up to date systems. we hope to resolve this for the next release - or around the year 2100. uninstalling mccoy to uninstall mccoy simply delete the applications files. the cryptographic
keys and other mccoy data are kept in a profile folder separate from the application so you can uninstall and reinstall without losing your precious
keys. backing up data if you need to backup your data or move it from one machine to another you need to take a copy of the profile folder. this is located in: %appdata%\mozilla\mccoy (windows) ~/.mozilla/mccoy (linux) ~/library/application suppo...
...ous
keys. backing up data if you need to backup your data or move it from one machine to another you need to take a copy of the profile folder. this is located in: %appdata%\mozilla\mccoy (windows) ~/.mozilla/mccoy (linux) ~/library/application support/mccoy (mac os x) it is highly recommended that you back up your profile folder and store it in a safe location whenever you create a new
key; without a backup, there is no way to recover your private
keys if they are lost! running mccoy to run mccoy simply run the mccoy executable (or the mccoy application on os x). the first time it runs it will ask you to create a master password. it is strongly recommended that you use a password to protect your mccoy data. once you have a password set you can change it from the
keys menu and you...
....net/svnroot/fireclipse/trunk/fireclipseextensions/chromebug/mccoy/signontheline/ bug 396525 - patch to mccoy https://bugzilla.mozilla.org/show_bug.cgi?id=396525 signing update manifests before you release your add-on in order to verify the update manifests applications need to already have information from you for how to verify it. this is in the form of the public part of a cryptographic
key included in the original add-on you release. the first step is to create a cryptographic
key. simply click the "create" toolbar button or select "create
key" from the "
keys" menu. you should give the
key a name that will remind you what you are using it for. it is up to you how you use your
keys, either using one
key for all add-ons or one
key per add-on would seem sensible choices. once you ha...
...And 3 more matches
PL_NewHashTable
allocops a pointer to a plhashallocops structure that must exist throughout the lifetime of the new hash table. allocpriv passed as the first argument (pool). ...
... allocops a pointer to a plhashallocops structure that must exist throughout the lifetime of the new hash table. allocpriv passed as the first argument (pool). ...
... allocops a pointer to a plhashallocops structure that must exist throughout the lifetime of the new hash table. allocpriv passed as the first argument (pool). ...
...And 3 more matches
4.3.1 Release Notes
new in jss 4.3.1 a list of bug fixes and enhancement requests were implemented in this release can be obtained by running this bugzilla query jss 4.3.1 requires nss 3.12.5 or higher. ...
...new in jss 4.3.1 a list of bug fixes and enhancement requests were implemented in this release can be obtained by running this bugzilla query jss 4.3.1 requires nss 3.12.5 or higher. ...
...otiation that the peer must use can be set to the following: sslsocket.ssl_renegotiate_never - never renegotiate at all. (default) sslsocket.ssl_renegotiate_unrestricted - renegotiate without restriction, whether or not the peer's client hello bears the renegotiation info extension (like we always did in the past). ...
...And 3 more matches
NSS 3.14 release notes
the nss license has changed to mpl 2.0. previous releases were released under a mpl 1.1/gpl 2.0/lgpl 2.1 tri-license. for more information about mpl 2.0, please see http://www.mozilla.org/mpl/2.0/faq.html. for an additional explantation on gpl/lgpl compatibility, ...
...these changes have the observed effect of doubling rsa performance. ...
...these changes have the observed effect of doubling rsa performance. bug 792681 - new default cipher s...
...And 3 more matches
Overview of NSS
port for ssl, s/mime, or other internet security standards to your application, you can use network security services (nss) to implement all your security features. nss provides a complete open-source implementation of the crypto libraries used by aol, red hat, google, and other companies in a variety of products, including the following: mozilla products, including firefox, thunderbird, seamon
key, and firefox os. aol instant messenger (aim) open source client applications such as evolution, pidgin, apache openoffice, and libreoffice. server products from red hat: red hat directory server, red hat certificate system, and the mod_nss ssl module for the apache web server. server products from oracle (formerly sun java enterprise system), including oracle communications messaging server a...
... ssl v3. the secure sockets layer (ssl) protocol allows mutual authentication between a client and server and the establishment of an authenticated and encrypted connection. tls v1.3 (rfc 8446), tls v1.2 (rfc 5246), tls v1.1 (rfc 4346), tls v1 (rfc 2246). the transport layer security (tls) protocol from the ietf that supersedes ssl. pkcs #1. rsa standard that governs implementation of public-
key cryptography based on the rsa algorithm. pkcs #3. rsa standard that governs implementation of diffie-hellman
key agreement. pkcs #5. rsa standard that governs password-based cryptography, for example to encrypt private
keys for storage. pkcs #7. rsa standard that governs the application of cryptography to data, for example digital signatures and digital envelopes. pkcs #8. rsa standard that g...
... pkcs #9. rsa standard that governs selected attribute types, including those used with pkcs #7, pkcs #8, and pkcs #10. pkcs #10. rsa standard that governs the syntax for certificate requests. pkcs #11. ...
...And 3 more matches
pkfnc.html
help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference pkcs #11 functions chapter 7 pkcs #11 functions this chapter describes the core pkcs #11 functions that an application needs for communicating with cryptographic modules. in particular, these functions are used for obtaining certificates,
keys, and passwords. pk11_findcertfromnickname pk11_find
keybyanycert pk11_getslotname pk11_gettokenname pk11_ishw pk11_ispresent pk11_isreadonly pk11_setpasswordfunc pk11_findcertfromnickname finds a certificate from its nickname. syntax #include <pk11func.h> #include <certt.h> certcertificate *pk11_findcertfromnickname( char *nickname, void *wincx); parameters this ...
...s the subject, based on the notbefore / notafter fields of the certificate. when you are finished with the certificate structure returned by pk11_findcertfromnickname, you must free it by calling cert_destroycertificate. the pk11_findcertfromnickname function calls the password callback function set with pk11_setpasswordfunc and passes it the pointer specified by the wincx parameter. ...
...fore / notafter fields of the certificate. when you are finished with the certificate structure returned by pk11_findcertfromnickname, you must free it by calling cert_destroycertificate. the pk11_findcertfromnickname function calls the password callback function set with pk11_setpasswordfunc and passes it the pointer specified by the wincx parameter. pk11_find
keybyanycert finds the private
key associated with a specified certificate in any available slot. syntax #include <pk11func.h> #include <certt.h> #include <
keyt.h> sec
keyprivate
key *pk11_find
keybyanycert( certcertificate *cert, void *wincx); parameters this function has the following parameters: cert a pointer to a certificate structure in the certificate database. ...
...And 3 more matches
S/MIME functions
form s/mime operations using the s/mime toolkit. 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. ...
... (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. ...
...
key mxr 3.2 and later nss_cmscontentinfo_getbulk
keysize mxr 3.2 and later nss_cmscontentinfo_getcontent mxr 3.2 and later nss_cmscontentinfo_getcontentencalgtag mxr 3.2 and later nss_cmscontentinfo_getcontenttypetag mxr 3.2 and later nss_cmscontentinfo_setbulk
key mxr 3.2 and later nss_cmscontentinfo_setcontent mxr 3.2 and later nss_cmscontentinfo_setcontent_data mxr 3.2 and later nss_cmscontentinfo_setcontentencalg mxr 3.2 and later nss_cmscontentinfo_setcontent_digesteddata mxr 3.2 and later nss_cmscontentinfo_setcon...
...And 3 more matches
Exact Stack Rooting
the method you should use to keep the gc up-to-date with this information will vary depending on where the gcpointer is being stored. gcpointers can be stored as a property of a gcthing, on the cheap, or in the cstack. these three storage regions have different lifetime and overhead characteristics and thus require different management strategies for efficient space and cpu utilization. ...
...hat gcpointers must be added to and removed from this rootedset tracking structure in lifo order. for this reason it is highly recommended that this rooting mechanism only be used on the cstack. js::rooted<t> typedef js::rooted<t> rootedt; -> rootedobject, rootedstring, rootedscript, etc. because of the lifo restriction, using this interface manually is extremely cumbersome. instead, spidermon
key has a convenient suite of c++ raii classes to do this for you, called js::rootedt: rootedstring str1(cx, js_valuetostring(cx, val)); rootedstring str2(rt, js_valuetostring(cx, val)); note 1: c++ insists that an initializing assignment (e.g., the default constructor followed by operator=) must have a copy constructor available, even if it is not used. since it is never correct to implicitly co...
.... rootedobject obj(cx, js_newobject(cx, clasp, nullptr(), nullptr()); common pitfalls the c++ type system allows us to eliminate the possibility of most common errors; however, there are still a few things that you can get wrong that the compiler cannot help you with. there is basically never a good reason to do any of these. if you think you do need to do one of these, ask on one of spidermon
key's support forums: maybe we've already solved your problem using a different mechanism. storing a js::rootedt on the heap. it would be very easy to violate the lifo constraint if you did this. use a different rooting mechanism if you store a gcpointer on the heap. there are moz_stack_class annotations that will cause a separate static analysis to fail if these are detected. storing a js::handl...
...And 3 more matches
Introduction to the JavaScript shell
the javascript shell (js) is a command-line program included in the spidermon
key source distribution. it is the javascript equivalent of python's interactive prompt, the lisp read-eval-print loop, or ruby's irb. this article explains how to use the shell to experiment with javascript code and run javascript programs. to get the spidermon
key javascript shell, see the spidermon
key build documentation or download a compiled binary for your platform from the nightly builds. for a list of other javascript shells, see javascript shells. note: starting with spidermon
key 44 (firefox 44 / thunderbird 44 / seamon
key 2.41), the standard, web-compatible javascript version is used by default (and not js1.7+ anymore). the version() shell builtin is still there for testing legacy features. running ...
...l was built. note: clear() with no parameters really clears everything. this includes all these built-in functions. clone(function, [scope]) clones the specified function object. if scope isn't specified, the new object's parent is the same as the original object's. otherwise, the new object is placed in the scope of the object specified by scope. ...
...for more information, see the c/c++ version of this function, js_dumpheap. evalcx(string[, object]) evaluates the javascript code in string. if object is specified, the code is executed in that object, treating it as a sandbox. ...
...And 3 more matches
JS::Value
the case that the type is not correct (val.isx() is called for each val.tox(), where x is the type). it is highly recommended that you develop and test with an --enable-debug build to detect most js::value misuse. debug builds will assert correct jsapi use in many other instances as well. js::value is subject to garbage collection a js::value can refer to a string or object located in spidermon
key's garbage-collected heap. the garbage collector is designed to automatically free unreachable memory. it is rather eager about its job. it's like a robot that goes around picking up everything that isn't nailed down and putting it in the trash. if an application has a js::value variable that refers to a jsobject, the garbage collector might not know you're using the jsobject. so it might free it...
...o automatically free unreachable memory. it is rather eager about its job. it's like a robot that goes around picking up everything that isn't nailed down and putting it in the trash. if an application has a js::value variable that refers to a jsobject, the garbage collector might not know you're using the jsobject. so it might free it, leaving a dangling pointer. ...
...e trash. if an application has a js::value variable that refers to a jsobject, the garbage collector might not know you're using the jsobject. so it might free it, leaving a dangling pointer. the solution is to tell spidermon
key that you're using the object, then tell it again when you're done. in short, every js::value must be rooted or your program will randomly crash. in some places, spidermon
key provides already-rooted js::values which you can use for variables. see spidermon
key gc rooting guide. ...
...And 3 more matches
JS_NewObject
requires request. ...
...requires request. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. clasp const jsclass * pointer to the class to use for the new object. ...
...And 3 more matches
nsIBrowserHistory
toolkit/components/places/public/nsibrowserhistory.idlscriptable a browser-specific interface to global history. it adds functions used by the basic browser like, marking pages as typed in the url bar, and removing pages as from the history interface. inherits from: nsiglobalhistory2 last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamon
key 2.19) implemented by: @mozilla.org/browser/nav-history-service;1. to use this service, use: var browserhistory = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsibrowserhistory); method overview void addpagewithdetails(in nsiuri auri, in wstring atitle, in long long alastvisited); obsolete since gecko 15.0 void markpageasfollowedlin...
...ng the last page that was visited in a top-level window. read only. note: the count attribute was removed in gecko 15.0 because it was only used to determine if there were any entries at all anyway, so the nsinavhistoryservice.hashistoryentries attribute is better for this. methods addpagewithdetails() obsolete since gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamon
key 2.12) note: this method was removed in gecko 15.0. you should use moziasynchistory.updateplaces() instead. this method adds a page to the history with specific time stamp information. it is called by history importing code and is used in the history migration tool. void addpagewithdetails( in nsiuri auri, in wstring atitle, in long long alastvisited ); parameters auri th...
...ion tool. void addpagewithdetails( in nsiuri auri, in wstring atitle, in long long alastvisited ); parameters auri the page that will be added to the history. atitle the title of the page. alastvisited when the page was last visited, in microseconds since the unix epoch. markpageasfollowedlink() obsolete since gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamon
key 2.19) note: this method was moved to another interface in gecko 22.0. you should use nsinavhistoryservice.markpageasfollowedlink() instead. this function was originally added in gecko 2.0 (firefox 4/thunderbird 3.3/seamon
key 2.1). designates the specified url as coming from a link explicitly followed by the user (for example by clicking on it). void markpageasfollowedlink( in nsiu...
...And 3 more matches
nsICryptoHMAC
netwerk/base/public/nsicryptohmac.idlscriptable this interface provides hmac signature algorithms. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm, in nsi
keyobject a
keyobject); void reset(); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long alen); constants hashing algorithms. these values are to be used by the init() method to indicate which hashing function to use. these values map onto the values defined in mozilla/security/nss/lib/softoken/pkcs11t.h and are switched to ckm_*_hm...
... or base 64 encoded. exceptions thrown ns_error_not_initialized if init() has not been called. init() initialize the hashing object. this method may be called multiple times with different algorithm types. warning: this approach is not fips compliant. note: this method must be called before any other method on this interface is called. ...
... encoded. exceptions thrown ns_error_not_initialized if init() has not been called. init() initialize the hashing object. this method may be called multiple times with different algorithm types. warning: this approach is not fips compliant. note: this method must be called before any other method on this interface is called. ...
...And 3 more matches
nsIDownloadManager
sm instead. toolkit/components/downloads/public/nsidownloadmanager.idlscriptable this interface lets applications and extensions communicate with the download manager, adding and removing files to be downloaded, fetching information about downloads, and being notified when downloads are completed. inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) implemented by: @mozilla.org/download-manager;1. to get the service, use: var downloadmanager = components.classes["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); method overview nsidownload adddownload(in short adownloadtype, in nsiuri asource, in nsiuri atarget, in astring adisplayname, in nsimimeinfo amimeinfo,...
...load is not in progress. cleanup() removes completed, failed, and canceled downloads from the list. also notifies observers of the "download-manager-remove-download" topic with a null subject to allow any download manager consumers to react to the removals. void cleanup(); parameters none. endbatchupdate() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) indicate that a batch update is ending. void endbatchupdate(); parameters none. flush() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) flush the download datasource to disk. void flush(); parameters none. getdownload() retrieves a download managed by the download manager. this can be one that is in progress, or one tha...
... progress, or one that has completed in the past and is stored in the database. nsidownload getdownload( in unsigned long aid ); parameters aid the unique id of the download. return value the download with the specified id. exceptions thrown ns_error_not_available the download is not in the database. onclose() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. called when the download manager front end is closed. useful for third party managers to let us know when they've closed. void onclose(); parameters none. open() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird ...
...And 3 more matches
nsIFrameLoader
content/base/public/nsiframeloader.idlscriptable handles loading a frame. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) note: this interface works in tandem with the nsicontentview interface to manage frames across processes if electrolysis is in use to support per-frame processes. ...
...erface works in tandem with the nsicontentview interface to manage frames across processes if electrolysis is in use to support per-frame processes. ...
...ontentview interface to manage frames across processes if electrolysis is in use to support per-frame processes. ...
...And 3 more matches
nsIHttpServer
any requests for directories which * do not contain index pages, or null to reset to the default * index handler; if while the server is running the handler * throws an exception while responding to a request, an http 500 * response will be returned. an nsifile corresponding to the * directory is available from the metadata object passed to the * handler, under the
key "directory". */ void setindexhandler(in nsihttprequesthandler handler); /** represents the locations at which this server is reachable. */ readonly attribute nsihttpserveridentity identity; /** * retrieves the string associated with the given
key in this, for the given * path's saved state. all
keys are initially associated with the empty * string. */ astring getstate(...
...etindexhandler(in nsihttprequesthandler handler); /** represents the locations at which this server is reachable. */ readonly attribute nsihttpserveridentity identity; /** * retrieves the string associated with the given
key in this, for the given * path's saved state. all
keys are initially associated with the empty * string. */ astring getstate(in astring path, in astring
key); /** * sets the string associated with the given
key in this, for the given path's * saved state. ...
... identity; /** * retrieves the string associated with the given
key in this, for the given * path's saved state. all
keys are initially associated with the empty * string. */ astring getstate(in astring path, in astring
key); /** * sets the string associated with the given
key in this, for the given path's * saved state. */ void setstate(in astring path, in astring
key, in astring value); /** * retrieves the string associated with the given
key in this, in * entire-server saved state. all
keys are initially associated with the * empty string. ...
...And 3 more matches
nsIMsgMessageService
ges like copying, displaying, attachment's manipulation, printing, streaming the message content to eml format string, etc. ...
...ying, displaying, attachment's manipulation, printing, streaming the message content to eml format string, etc. ...
...ied of copy events. amovemessage set to true if you want the message to be moved. false leaves it as just a copy. aurllistener a nsiurllistener to be notified of url events. amsgwindow nsimsgwindow for progress and status feedback return values aurl the new nsiuri of the message. copymessages() copy multiple messages at a time. ...
...And 3 more matches
nsINavHistoryResultObserver
toolkit/components/places/nsinavhistoryservice.idlscriptable lets clients observe changes to a result as the result updates itself according to bookmark and history system events. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamon
key 2.8) note: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1), this interface replaced the older nsinavhistoryresultviewer interface, which only allowed one client at a time. method overview void batching(in boolean atogglemode); void containerclosed(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containeropened(in nsinavhistorycontainerresultnode acontainernode); deprecated...
...odedateaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount); void nodeiconchanged(in nsinavhistoryresultnode anode); void nodeinserted(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode, in unsigned long anewindex); void node
keywordchanged(in nsinavhistoryresultnode anode, in autf8string anew
keyword); void nodelastmodifiedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodemoved(in nsinavhistoryresultnode anode, in nsinavhistorycontainerresultnode aoldparent, in unsigned long aoldindex, in nsinavhistorycontainerresultnode anewparent, in unsigned long anewindex); void noderemoved(in nsinavhistor...
...ing user interfaces, to avoid flicker or continuous selection changes, which may result in performance degradation (for example, if updating a view for each update). void batching( in boolean atogglemode ); parameters atogglemode specify true to start batch mode or false to finish the batch. containerclosed() obsolete since gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamon
key 2.8) called when a container node's state changes from opened to closed. note: this method was deprecated in gecko 2.0 and removed in gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamon
key 2.8). implement the containerstatechanged() method instead. void containerclosed( in nsinavhistorycontainerresultnode acontainernode ); parameters acontainernode the container node which was cl...
...And 3 more matches
nsIPushSubscription
dom/interfaces/push/nsipushservice.idlscriptable includes information needed to send a push message to privileged code. inherits from: nsisupports last changed in gecko 46.0 (firefox 46.0 / thunderbird 46.0 / seamon
key 2.43) each subscription is associated with a unique url generated by the push service. sending a post request to this url routes the message to the instance of firefox that created the subscription. a subscription also has a public
key and secret; these are used to encrypt message payloads. ...
... pushcount long long the total number of messages sent to this subscription. ...
...d with a unique url generated by the push service. sending a post request to this url routes the message to the instance of firefox that created the subscription. a subscription also has a public
key and secret; these are used to encrypt message payloads. this interface resembles pushsubscription from the push api. method overview void get
key(in domstring name, [optional] out uint32_t
keylen, [array, size_is(
keylen), retval] out uint8_t
key); bool quotaapplies(); bool isexpired(); attributes attribute type description endpoint domstring the subscription url. pushcount long long the total number of messages sent to this subscription. lastpush long long the last time a message was sent to this subs...
...And 3 more matches
nsITelemetry
toolkit/components/telemetry/nsitelemetry.idlscriptable a service to gather performance data that can be tracked over time to allow generating histograms. ...
.../ seamon
key 2.4) implemented by: @mozilla.org/base/telemetry;1 as a service: let telemetry = components.classes["@mozilla.org/base/telemetry;1"] .getservice(components.interfaces.nsitelemetry); method overview jsval gethistogrambyid(in acstring id); jsval snapshothistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); jsval get
keyedhistogrambyid(in acstring id); void capturestack(in acstring name); jsval snapshotcapturedstacks([optional] in boolean clear); nsisupports getloadedmodules(); jsval snapshot
keyedhistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); void sethistogramrecordingenabled(in acstring id, in boolean enabled); void asyncfetch...
...oid asyncfetchtelemetrydata(in nsifetchtelemetrydatacallback acallback); double mssinceprocessstart(); void scalaradd(in acstring aname, in jsval avalue); void scalarset(in acstring aname, in jsval avalue); void scalarsetmaximum(in acstring aname, in jsval avalue); jsval snapshotscalars(in uint32_t adataset, [optional] in boolean aclear); void
keyedscalaradd(in acstring aname, in astring a
key, in jsval avalue); void
keyedscalarset(in acstring aname, in astring a
key, in jsval avalue); void
keyedscalarsetmaximum(in acstring aname, in astring a
key, in jsval avalue); jsval snapshot
keyedscalars(in uint32_t adataset, [optional] in boolean aclear); void clearscalars(); test only void flushbatchedchildt...
...And 3 more matches
nsITreeView
layout/xul/base/src/tree/public/nsitreeview.idlscriptable this interface is used by the tree widget to get information about what and how to display a tree widget. inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamon
key 2.19) implementing a nsitreeview in lieu of dom methods for tree creation can improve performance dramatically, and removes the need to make changes to the tree manually when changes to the database occur. further information about creating treeviews is given in the xul tutorial. method overview boolean candrop(in long index, in long orientation, in nsidomdatatransfer datatransfer); boolean candropbeforeafter(in long index, in boolean before); obsolete since gecko 1.8 boolean candropon(in long ...
...tion the position around the given row. defined in constants. datatransfer this parameter, added in gecko 1.9.2, provides the data being dragged, so that it can be examined to determine if a drop is possible. return value true if a drop is allowed at the current location; otherwise false. candropbeforeafter() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method used by the drag feedback code to determine if a drag is allowable at the current location. to get the behavior where drops are only allowed on items, such as the mailnews folder pane, always return false from candropbeforeafter(). boolean candropbeforeafter( in long index, in boolean before ); parameters index the index of the item. before true to test drop bef...
...news folder pane, always return false from candropbeforeafter(). boolean candropbeforeafter( in long index, in boolean before ); parameters index the index of the item. before true to test drop before. false to test drop after. return value true if a drop event can occur. otherwise false. candropon() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method used by the drag feedback code to determine if a drag is allowable at the current location. to get the behavior where drops are only allowed on items, such as the mailnews folder pane, always return false from candropbeforeafter(). boolean candropon( in long index ); parameters index the index of the item. return value true if a drop event can occur. otherwise fa...
...And 3 more matches
nsIUpdateItem
toolkit/mozapps/extensions/public/nsiextensionmanager.idlscriptable describes an item managed by the extension system, providing metadata describing the item. ...
...g the item. 1.0 66 introduced gecko 1.8 obsolete gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) this interface is obsolete; instead of using the extension manager, you should use the addon manager. method overview void init(in astring id, in astring version, in astring installlocation
key, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring update
key, in long type, in astring targetappid); attributes attribute type description iconurl astring the url of the icon that can be shown for this item. read only. id astring ...
...read only. maxappversion astring the maximum version of the application that this item works with, in fvf format. read only. ...
...And 3 more matches
nsIXPConnect
js/src/xpconnect/idl/nsixpconnect.idlnot scriptable provides the xpconnect service. ...
...the current call from js. [noscript,notxpcom] void getcaller( out jscontextptr ajscontext, out jsobjectptr aobject ); parameters ajscontext missing description aobject missing description return value missing description exceptions thrown missing exception missing description native code only!getcowforobject obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. wrap a jsval in a chrome object wrapper. jsval getcowforobject( in jscontextptr ajscontext, in jsobjectptr aparent, in jsobjectptr awrappedobj ); parameters ajscontext a context to use to create objects. aparent the parent ...
...although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns an xpcnativewrapper, xpcsafejsobjectwrapper, or xpccrossoriginwrapper for the given object based on the principal, scope, and filename flags that are passed in. note: in c++, the out jsval parameter must already be a strong gc ro...
...And 3 more matches
MailNews fakeserver
ntp servers: compliance for rfc 977, rfc 2980, and rfc 3977, as well as a giganews and an inn server. (full 2980 and 3977 compliance as well as inn is not yet written). for xpcshell tests in mailnews/news, all files in mailnews/news/test/postings/auto-add are automatically added based on the newsgroups header. there are added in alphabetical order, which may help for purposes that rely on article
key orders. the only generated header is lines. the following comprises the api of the news fakeserver itself: nntpdaemon api name arguments returns notes [constructor] daemon flags n/a flags are defined below addgroup group name (string), is postable nothing adds the group (resetting if it exists) addarticle newsarticle object nothing adds the message to all groups in the article's group...
... getarticle me...
... getarticle message id newsarticle object pretty self-explanatory newsarticle api name argu...
...And 3 more matches
Mozilla
les provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines. bugzilla bugzilla.mozilla.org (often abbreviated b.m.o) is mozilla.org's bug-tracking system, a database for recording bugs and enhancement requests for firefox, thunderbird, seamon
key, camino, and other mozilla.org projects. building mozilla in this article, we list documents that will guide you in building firefox or other projects based upon mozilla code. building spidermon
key with ubsan 1. compile a recent version of llvm & clang. c++ portability guide this document has migrated to using c++ in mo...
...tructure. this document will help you understand all the pieces that comprise mozilla's continuous integration systems. cookies in mozilla suggestions as to needed documentation can be directed to mike connor. cookies preferences in mozilla these preferences apply to most mozilla products (including firefox and seamon
key), however they are application-specific, so not all of them may apply to you. the default values given are for firefox 3. creating a firefox sidebar web publishers can offer visitors a firefox sidebar to encourage their engagement. there are two ways to create a sidebar for firefox users: the social api and an extension. you can choose either dependi...
...agement. there are two ways to create a sidebar for firefox users: the social api and an extension. you can choose either depending on your needs and resources. creating a language pack to create a language pack, or a localization repack, you first need to go through the initial setup process. creating a localized windows installer of seamon
key preamble: not all of the programs listed below are necessary. some of them are simply the ones i use because i like them, while others are scripts that i've created to speed up the work. you can in every case choose the program you prefer to do some operations, and you can also decide not to use any of my scripts and manually enter all of the commands by hand. ...
...And 3 more matches
Examine and edit HTML - Firefox Developer Tools
you can examine and edit the page's html in the html pane. navigating the html html breadcrumbs at the bottom on the html pane is a breadcrumbs toolbar. this shows the complete hierarchy through the document for the branch containing the selected element: hovering over a breadcrumb highlights that element in the page. the breadcrumbs bar has its own
keyboard shortcuts. searching the page inspector's search box matches all markup in the current document and in any frames. to start searching the markup, click in the search box to expand it or press ctrl + f , or cmd + f on a mac. there are three types of searches that are performed automatically depending on what you enter, a full text search, a css selector search, and an xpath search. full text search the full text search will al...
... all <a> elements but not the letter "a" within the text content. furthermore it allows for some more advanced searches like finding elements that start with a specific text, for example. html tree the rest of the pane shows you the page's html as a tree (this ui is also called the markup view). just to the left of each node is an arrow: click the arrow to expand the node. if you hold the alt
key while clicking the arrow, it expands the node and all the nodes underneath it. moving the mouse over a node in the tree highlights that element in the page. nodes that are not visible are shown faded/desaturated. this can happen for different reasons such as using display: none or that the element doesn't have any dimensions. there is an ellipsis shown between the opening and closing tag of an...
...ter. inline-flex the element is an inline flex container, i.e. it has display: inline-flex or display: inline flex applied to it. clicking the marker enables the flexbox highlighter. custom… the element is a custom element. clicking the marker switches to the line of javascript code in the debugger where the custom element got defined. note: there are some useful
keyboard shortcuts that can be used in the html tree — see the html pane
keyboard shortcuts list. ::before and ::after you can inspect pseudo-elements added using ::before and ::after: custom element definition when you open the inspector on a page that includes custom elements, you can view the class definition for the custom element in the debugger: inspect the element click on the wor...
...And 3 more matches
AuthenticatorAttestationResponse.getTransports() - Web APIs
gettransports() is a method of the authenticatorattestationresponse interface that returns an array containing strings describing the different transports which may be used by the authenticator. such transports may be usb, nfc, ble or internal (applicable when the authenticator is not removable from the device). note: an authenticatorattestationresponse instance is available on public
keycredential.response after calling navigator.credentials.create(). note: this method may only be used in top-level contexts and will not be available in an <iframe> for example. syntaxe arrtransports = authenticatorattestationresponse.gettransports() parameters none. return value an array containing the different transports supported by the authenticator or nothing if this information is not ava...
...y are supposed to be in lexicographical order. their values may be : "usb": the authenticator can be contacted via a removable usb link "nfc": the authenticator may be used over nfc (near field communication) "ble": the authenticator may be used over ble (bluetooth low energy) "internal": the authenticator is specifically bound to the client device (cannot be removed). ...
...: the authenticator may be used over ble (bluetooth low energy) "internal": the authenticator is specifically bound to the client device (cannot be removed). ...
...And 3 more matches
CSS Typed Object Model API - Web APIs
ject model api represents property values that reference custom properties. it consists of a list of string fragments and variable references. cssunparsedvalue.cssunparsedvalue() constructor creates a new cssunparsedvalue object which represents property values that reference custom properties. ...
... cssunparsedvalue.entries() method returning an array of a given object's own enumerable property [
key, value] pairs in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). cssunparsedvalue.foreach() method executing a provided function once for each element of the cssunparsedvalue. cssunparsedvalue.
keys() method returning a new array iterator object that contains the
keys for each index in the array. css
keywordvalue serialization the css
keywordvalue interface of the the css typed object model api creates an object to represent css
keywords and other identifiers. ...
...edvalue.foreach() method executing a provided function once for each element of the cssunparsedvalue. cssunparsedvalue.
keys() method returning a new array iterator object that contains the
keys for each index in the array. css
keywordvalue serialization the css
keywordvalue interface of the the css typed object model api creates an object to represent css
keywords and other identifiers. css
keywordvalue.css
keywordvalue() constructor constructor creates a new css
keywordvalue.css
keywordvalue() object which represents css
keywords and other identifiers. css
keywordvalue.value() property of the css
keywordvalue interface returning or setting the value of the css
keywordvalue. cssstylevalue interfaces cssstylevalue is the base class through which all css values are expressed. subclasses i...
...And 3 more matches
IDBCursorSync - Web APIs
r iterating over multiple records in a database. you can have only one instance of idbcursorsync representing a cursor, but you can have an unlimited number of cursors at the same time. operations are performed on the underlying index or object store. it enables an application to synchronously process all the records in the cursor's range. ...
...ng index or object store. it enables an application to synchronously process all the records in the cursor's range. method overview bool continue (in optional any
key); void remove () raises (idbdatabaseexception); attributes attribute type description count readonly unsigned long long the total number of objects that share the current
key. direction readonly unsigned short the direction of traversal of the cursor. see constants for possible values.
key readonly any the
key for the record at the cursor's position. value any the value for the record at the cursor's position. setting this attribute can raise an idbdatabaseexception with the following codes: data_err if...
...short the direction of traversal of the cursor. see constants for possible values.
key readonly any the
key for the record at the cursor's position. value any the value for the record at the cursor's position. setting this attribute can raise an idbdatabaseexception with the following codes: data_err if the underlying object store uses in-line
keys and the property at the
key path does not match the
key in this cursor's position. not_allowed_err if the underlying index or object store does not support updating the record because it is open in the read_only or snapshot_read mode, or if an index record cannot be changed because the underlying index is auto-populated. serial_err if the data being stored could not be serial...
...And 3 more matches
IDBIndex.openCursor() - Web APIs
the opencursor() method of the idbindex interface returns an idbrequest object, and, in a separate thread, creates a cursor over the specified
key range. the method sets the position of the cursor to the appropriate record, based on the specified direction. if the
key range is not specified or is null, then the range includes all the records. a success event is always fired on the result object. if at least one record matches the
key range, then the result property of the event is set to the new idbcursorwithvalue object; the value of the cursor object is set to a structured clone of the referenced value. if no records match the
key range then then the result property of the event is set to null. note: this feature is available in web workers. syntax var request = my...
... direction optional the cursor's direction. see idbcursor constants for possible values. ...
... direction optional the cursor's direction. see idbcursor constants for possible values. ...
...And 3 more matches
IndexedDB API - Web APIs
es indexes to enable high-performance searches of this data. while web storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. indexeddb provides a solution. ...
...page for mdn's indexeddb coverage — here we provide links to the full api reference and usage guides, browser support details, and some explanation of
key concepts. note: this feature is available in web workers. note: indexeddb api is powerful, but may seem too complicated for simple cases. if you'd prefer a simple api, try libraries such as localforage, dexie.js, zangodb, pouchdb, idb, idb-
keyval, jsstore and lovefield that make indexeddb more programmer-friendly.
key concepts and usage indexeddb is a transactional database system, like an sql-based rdbms. ...
...you need to specify the database schema, open a connection to your database, and then retrieve and update data within a series of transactions. read more about the concepts behind indexeddb. learn to use indexeddb asynchronously from first principles with our using indexeddb guide. ...
...And 3 more matches
Storage.getItem() - Web APIs
example the following function retrieves three data items from local storage, then uses them to set custom styles on a page. ...
... example the following function retrieves three data items from local storage, then uses them to set custom styles on a page. ...
... example the following function retrieves three data items from local storage, then uses them to set custom styles on a page. ...
...And 3 more matches
StorageEvent - Web APIs
the newvalue is null when the chan...
...="middle">storageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring
key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description
key domstring represents the
key changed. the
key attribute is null when the change is caused by the storage clear() method. read only. ...
...read only. ...
...And 3 more matches
Writing a WebSocket server in C# - Web APIs
ft's language. this server conforms to rfc 6455 so it will only handle connections from chrome version 16, firefox 11, ie 10 and over. first steps websockets communicate over a tcp (transmission control protocol) connection. luckily, c# has a tcplistener class which does as the name suggests. it is in the system.net.sockets namespace. it is a good idea to include the namespace with the using
keyword in order to write less. it allows usage of a namespace's classes without typing the full namespace every time. tcplistener constructor: tcplistener(system.net.ipaddress localaddr, int port) localaddr specifies the ip of the listener, and port specifies the port. to create an ipaddress object from a string, use the parse static method of ipaddress. methods: start() system.net.sock...
...e bytes of request to string string data = encoding.utf8.getstring(bytes); if (regex.ismatch(data, "^get")) { } else { } the response is easy to build, but might be a little bit difficult to understand. the full explanation of the server handshake can be found in rfc 6455, section 4.2.2. for our purposes, we'll just build a simple response. ...
... if we send "mdn", we get these bytes: 129 131 61 84 35 6 112 16 ...
...And 3 more matches
Writing a WebSocket server in Java - Web APIs
connects to a server, it sends a get request to upgrade the connection to a websocket from a simple http request. this is known as handshaking. try { string data = s.usedelimiter("\\r\\n\\r\\n").next(); matcher get = pattern.compile("^get").matcher(data); creating the response is easier than understanding why you must do it in this way. ...
...hy you must do it in this way. you must, obtain the value of sec-websocket-
key request header without any leading and trailing whitespace link it with "258eafa5-e914-47da-95ca-c5ab0dc85b11" compute sha-1 and base64 code of it write it back as value of sec-websocket-accept response header as part of a http response. ...
...is is a text. full list of opcodes - 134: if the second byte minus 128 is between 0 and 125, this is the length of the message. if it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit must be 0) are the length. i can take 128 because the first bit is always 1. ...
...And 3 more matches
ARIA: checkbox role - Accessibility
">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. 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-c...
...es 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 checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away. ...
...ue 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 checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away. ...
...And 3 more matches
ARIA: dialog role - Accessibility
section.</p> <button>close</button> </div> description marking up a dialog element with the dialog role helps assistive technology identify 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...
... 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. ...
... 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. when the dialog appears on the screen,
keyboard focus (whose control depends upon the dialogs purpose) should be moved to the default focusable control inside the dialog. for dialogs that only provide a basic message, it could be an "ok" button. for dialogs containing a form it could be the first field in the form. after the dialog is dismissed,
keyboard focus should be moved back to where it was before it moved into the dialog. otherwis...
...And 3 more matches
Accessibility documentation index - Accessibility
e aria, aria role, aria figure, accessibility, reference, rôle, form the form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form. 64 aria: grid role aria, html the grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be focused using
keyboard input. 65 aria: gridcell role aria, html the gridcell role is used to make a cell in a grid or treegrid. it is intended to mimic the functionality of the html td element for table-style grouping of information. 66 aria: heading role aria, aria role, aria heading, reference the heading role defines this element as a heading to a page or section. to gi...
...aria markup or @title attribute. 92 implementing a microsoft active accessibility (msaa) server accessibility, msaa, microsoft, server this document is for developers working to support msaa in an application in order to make it accessible with 3rd party assistive technologies, as well as for hackers wishing to be involved in mozilla's msaa support specifically. 93
keyboard-navigable javascript widgets accessibility, dom, needsupdate web applications often use javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same
keyboard functionality that their desktop counterparts do. this document describes techniques ...
...ility, dom, needsupdate web applications often use javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same
keyboard functionality that their desktop counterparts do. this document describes techniques to make javascript widgets accessible with the
keyboard. 94 mobile accessibility checklist accessibility, firefox os, guidelines, mobile, checklist this document provides a concise checklist of accessibility requirements for mobile app developers. it is intended to continuously evolve as more patterns arise. 95 understanding the web content accessibility guidelines wcag, web content accessibility guidelines ...
...And 3 more matches
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
in this guide we will be exploring the three properties that are applied to flex items, which enable us to control the size and flexibility of the items along the main axis — flex-grow, flex-shrink, and flex-basis. fully understanding how these properties work with growing and shrinking items is the real
key to mastering flexbox. a first look our three properties control the following aspects of a flex item's flexibility: flex-grow: how much of the positive free space does this item get? flex-shrink: how much negative free space can be removed from this item? flex-basis: what is the size of the item before growing and shrinking happens? the properties are usually expressed as the shorthand flex property. the following code would set the flex-grow property to 2, flex-shrink to 1 an...
...ing or shrinking takes place, and to the concept of free space. flex item sizing in order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. ...
...this then, is the min-content size of that string. essentially, the longest word in the string is dictating the size. ...
...And 3 more matches
cursor - CSS: Cascading Style Sheets
the cursor css property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword value */ cursor: pointer; cursor: auto; /* url, with a
keyword fallback */ cursor: url(hand.cur), pointer; /* url and coordinates, with a
keyword fallback */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* global values */ cursor: inherit; cursor: initial; cursor: unset; the cursor property is specified as zero or more <url> values, separated by commas, followed by a single mandatory
keyword value. eac...
...ursor: url(cursor2.png) 2 2, pointer; /* global values */ cursor: inherit; cursor: initial; cursor: unset; the cursor property is specified as zero or more <url> values, separated by commas, followed by a single mandatory
keyword value. each <url> should point to an image file. the browser will try to load the first image specified, falling back to the next if it can't, and falling back to the
keyword value if no images could be loaded (or if none were specified). each <url> may be optionally followed by a pair of space-separated numbers, which represent <x><y> coordinates. these will set the cursor's hotspot, relative to the top-left corner of the image. for example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling back to the pr...
...lue if no images could be loaded (or if none were specified). each <url> may be optionally followed by a pair of space-separated numbers, which represent <x><y> coordinates. these will set the cursor's hotspot, relative to the top-left corner of the image. for example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling back to the progress
keyword value if neither image can be loaded: cursor: url(one.svg), url(two.svg) 5 5, progress; values <url> a url(…) or a comma separated list url(…), url(…), …, pointing to an image file. more than one <url> may be provided as fallbacks, in case some cursor image types are not supported. a non-url fallback (one or more of the
keyword values) must be at the end of the fallback list. se...
...And 3 more matches
font-stretch - CSS: Cascading Style Sheets
values normal specifies a normal font face. ...
... values normal specifies a normal font face. semi-condensed, condensed, extra-condensed, ultra-condensed specifies a more condensed font face than normal, with ultra-condensed as the most condensed. semi-expanded, expanded, extra-expanded, ultra-expanded specifies a more expanded font face than normal, with ultra-expanded as the most expanded. <p...
...ltra-condensed as the most condensed. semi-expanded, expanded, extra-expanded, ultra-expanded specifies a more expanded font face than normal, with ultra-expanded as the most expanded. <percentage> a <percentage> value between 50% and 200% (inclusive). negative values are not allowed for this property. in earlier versions of the font-stretch specification, the property accepts only the nine
keyword values. css fonts level 4 extends the syntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. however, note that the <percentage> syntax is not yet supported by all browsers: check the browser compatibility table f...
...And 3 more matches
User input and controls - Developer guides
modern web user input goes beyond simple mouse and
keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies. relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more. user input and controls workflow the following diagram illustrates the typical workflow for implementing user input mechanisms: first of all, you need to decide which input mechanisms you want to cover in your application out of mouse,
keyboard, finger touch and so on. once you decided the input mechanisms, yo...
...api helps you in displaying your app in fullscreen mode. using features such as contenteditable elements you can implement fast rich-text editors and with drag&drop let users moving elements inside your app. when screen orientation matters for your application, through the screen orientation api you can read the screen orientation state and perform other actions. you should always be mindful of
keyboard accessibility where appropriate — many web users only use
keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea. the following is a set of recommendations and best practices for using such tools in open web apps. decide what input mechanism you’re using
keyboard
keyboard input can be controlled by your app. for example if you want to add c...
...ty where appropriate — many web users only use
keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea. the following is a set of recommendations and best practices for using such tools in open web apps. decide what input mechanism you’re using
keyboard
keyboard input can be controlled by your app. for example if you want to add controls when any
key gets pressed, you need to add an event listener on the window object: window.addeventlistener("
keydown", handle
keydown, true); window.addeventlistener("
keyup", handle
keyup, true); where handle
keydown and handle
keyup are the functions implementing the controls about the
keydown and
keyup events. ...
...And 3 more matches
Browser detection using the user agent - HTTP
ryupdated = orientationchanged = false; },0)); which part of the user agent contains the information you are looking for? as there is no uniformity of the different part of the user agent string, this is the tricky part. browser name when people say they want "browser detection", often they actually want "rendering engine detection". do you actually want to detect firefox, as opposed to seamon
key, or chrome as opposed to chromium? or do you actually simply want to see if the browser is using the gecko or the webkit rendering engine? if this is what you need, see further down the page. most browsers set the name and version in the format browsername/versionnumber, with the notable exception of internet explorer. but as the name is not the only information in a user agent string that is in...
...nformation in a user agent string that is in that format, you can not discover the name of the browser, you can only check if the name you are looking for. but note that some browsers are lying: chrome for example reports both as chrome and safari. ...
...hat some browsers are lying: chrome for example reports both as chrome and safari. so to detect safari you have to check for the safari string and the absence of the chrome string, chromium often reports itself as chrome too or seamon
key sometimes reports itself as firefox. also, pay attention not to use a simple regular expression on the browsername, user agents also contain strings outside the
keyword/value syntax. safari & chrome contain the string 'like gecko', for instance. ...
...And 3 more matches
Enumerability and ownership of properties - JavaScript
enumerable properties are those properties whose internal enumerable flag is set to true, which is the default for properties created via simple assignment or via a property initializer (properties defined via object.defineproperty and such default enumerable to false). enumerable properties show up in for...in loops unless the property's
key is a symbol. ownership of properties is determined by whether the property belongs to the object directly and not to its prototype chain. properties of an object can also be retrieved in total. there are a number of built-in means of detecting, iterating/enumerating, and retrieving object properties, with the chart showing below which are available. some sample code follows which demonstrates how to obtain the missing categories. property enumerabil...
...ble nonenumerable enumerable and nonenumerable not available without extra code not available without extra code in not available without extra code retrieval enumerable nonenumerable enumerable and nonenumerable object.
keys getownpropertynames getownpropertysymbols getownpropertynames, getownpropertysymbols – filtered to exclude enumerables using propertyisenumerable getownpropertynames getownpropertysymbols not available without extra code not available without extra code iterable ...
...ols – filtered to exclude enumerables using propertyisenumerable getownpropertynames getownpropertysymbols not available without extra code not available without extra code iterable enumerable nonenumerable enumerable and nonenumerable object.
keys getownpropertynames getownpropertysymbols getownpropertynames, getownpropertysymbols – filtered to exclude enumerables using propertyisenumerable getownpropertynames getownpropertysymbols enumerable nonenumerable enumerable and nonenumerable ...
...And 3 more matches
Working with objects - JavaScript
a property's value can be a function, in which case the property is known as a method. in addition to objects that are predefined in the browser, you can define your own objects. this chapter describes how to use objects, properties, functions, and methods, and how to create your own objects. ...
...ar myobj = new object(), str = 'mystring', rand = math.random(), obj = new object(); myobj.type = 'dot syntax'; myobj['date created'] = 'string with space'; myobj[str] = 'string value'; myobj[rand] = 'random number'; myobj[obj] = 'object'; myobj[''] = 'even an empty string'; console.log(myobj); please note that all
keys in the square bracket notation are converted to string unless they're symbols, since javascript object property names (
keys) can only be strings or symbols (at some point, private names will also be added as the class fields proposal progresses, but you won't use them with [] form). for example, in the above code, when the
key obj is added to the myobj, javascript will call the obj.tostring() me...
... you can also access properties by using a string value that is stored in a variable: var propertyname = 'make'; mycar[propertyname] = 'ford'; propertyname = 'model'; mycar[propertyname] = 'mustang'; you can use the bracket notation with for...in to iterate over all the enumerable properties of an object. ...
...And 3 more matches
Classes - JavaScript
yntax and semantics that are not shared with es5 classalike semantics. defining classes classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations. class declarations one way to define a class is using a class declaration. to declare a class, you use the class
keyword with the name of the class ("rectangle" here). class rectangle { constructor(height, width) { this.height = height; this.width = width; } } hoisting an important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. you first need to declare your class and then access it, otherwise code like the...
... class declarations section. class body and method definitions the body of a class is the part that is in curly brackets {}. this is where you define class members, such as methods or constructor. ...
... prototype methods see also method definitions. ...
...And 3 more matches
SyntaxError: missing : after property id - JavaScript
the javascript exception "missing : after property id" occurs when objects are created using the object initializer syntax. a colon (:) separates
keys and values for the object's properties. somehow, this colon is missing or misplaced. message syntaxerror: expected ':' (edge) syntaxerror: missing : after property id (firefox) error type syntaxerror what went wrong? ...
...occurs when objects are created using the object initializer syntax. a colon (:) separates
keys and values for the object's properties. somehow, this colon is missing or misplaced. message syntaxerror: expected ':' (edge) syntaxerror: missing : after property id (firefox) error type syntaxerror what went wrong? ...
...x. a colon (:) separates
keys and values for the object's properties. somehow, this colon is missing or misplaced. message syntaxerror: expected ':' (edge) syntaxerror: missing : after property id (firefox) error type syntaxerror what went wrong? ...
...And 3 more matches
Object.assign() - JavaScript
object.assign(target, ...sources) parameters target the target object — what to apply the sources’ properties to, which is returned after it is modified. sources the source object(s) — objects containing the properties you want to apply. return value the target object. description properties in the target object are overwritten by properties in the sources if they have the same
key. later sources' properties overwrite earlier ones. the object.assign() method only copies enumerable and own properties from a source object to a target object. it uses [[get]] on the source and [[set]] on the target, so it will invoke getters and setters. therefore it assigns properties, versus copying or defining new properties. this may make it unsuitable for merging new properties into a pro...
... of function is 2 'use strict'; if (target === null || target === undefined) { throw new typeerror('cannot convert undefined or null to object'); } var to = object(target); for (var index = 1; index < arguments.length; index++) { var nextsource = arguments[index]; if (nextsource !== null && nextsource !== undefined) { for (var next
key in nextsource) { // avoid bugs when hasownproperty is shadowed if (object.prototype.hasownproperty.call(nextsource, next
key)) { to[next
key] = nextsource[next
key]; } } } } return to; }, writable: true, configurable: true }); } examples cloning an object const obj = { a: 1 }; const copy = object.assign...
...e copied either. copying accessors const obj = { foo: 1, get bar() { return 2; } }; let copy = object.assign({}, obj); console.log(copy); // { foo: 1, bar: 2 } // the value of copy.bar is obj.bar's getter's return value. ...
...And 3 more matches
Object.defineProperties() - JavaScript
n object, returning the object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.defineproperties(obj, props) parameters obj the object on which to define or modify properties. ...
...fine or modify properties. props an object whose
keys represent the names of properties to be defined or modified and whose values are objects describing those properties. each value in props must be either a data descriptor or an accessor descriptor; it cannot be both (see object.defineproperty() for more details). data descriptors and accessor descriptors may optionally contain the following
keys: configurable true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object. defaults to false. enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. defaults to false. ...
... the following
keys: configurable true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object. defaults to false. enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. defaults to false. a data descriptor also has the following optional
keys: value the value associated with the property. can be any valid javascript value (number, object, function, etc). defaults to undefined. writable true if and only if the value associated with the property may be changed with an assignment operator. defaults to false. ...
...And 3 more matches
Template literals (Template strings) - JavaScript
et agestr; if (ageexp > 99){ agestr = 'centenarian'; } else { agestr = 'youngster'; } // we can even return a string built using a template literal return `${str0}${personexp}${str1}${agestr}`; } let output = mytag`that ${ person } is a ${ age }`; console.log(output); // that mike is a youngster tag functions don't even need to return a string! ...
...n a string built using a template literal return `${str0}${personexp}${str1}${agestr}`; } let output = mytag`that ${ person } is a ${ age }`; console.log(output); // that mike is a youngster tag functions don't even need to return a string! ...
... a template literal return `${str0}${personexp}${str1}${agestr}`; } let output = mytag`that ${ person } is a ${ age }`; console.log(output); // that mike is a youngster tag functions don't even need to return a string! ...
...And 3 more matches
begin - SVG: Scalable Vector Graphics
tribute defines when an animation should begin or when an element should be discarded. the attribute value is a semicolon separated list of values. the interpretation of a list of start times is detailed in the smil specification in "evaluation of begin and end time lists". each individual value can be one of the following : <offset-value>, <syncbase-value>, <event-value>, <repeat-value>, <access
key-value>, <wallclock-sync-value> or the
keyword indefinite. six elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, and <set> animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, begin defines when the element should begin, i.e. become active. ...
...d event-value consists of an element id followed by a dot and one of the supported events for that element. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input,
keydown,
keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent. an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation start time is defined relative to the time that the repeat event is raised with the spec...
...ualified repeat event. the element animation start time is defined relative to the time that the repeat event is raised with the specified iteration value. a valid repeat value consists of an element id followed by a dot and the function repeat() with an integer value specifying the number of repetitions as parameter. an optional offset value as defined in <offset-value> can be appended. <access
key-value> this value defines an access
key that should trigger the animation. the element animation will begin when the user presses the specified
key. a valid access
key-value consists of the function access
key() with the character to be input as parameter. an optional offset value as defined in <offset-value> can be appended. <wallclock-sync-value> this value defines the animation start time as...
...And 3 more matches
cfx - Archive of obsolete content
be specified as a full path or as a path relative to the current directory. internal options --addons=addons paths of add-ons to install, comma-separated. addons may be specified as a full path or as a path relative to the current directory. --e10s if this option is set then the add-on runs in a separate process. this option is currently not implemented. --
keydir=
keydir supply a different location for signing
keys.
keydir may be specified as a full path or as a path relative to the current directory. --logfile=logfile log console output to the file specified by logfile. logfile may be specified as a full path or as a path relative to the current directory. cfx test run available tests for the specified package. called with no op...
...n firefox. --stop-on-error stop running tests after the first failure. internal options --addons=addons paths of add-ons to install, comma-separated. addons may be specified as full paths or relative to the current directory. --e10s if this option is set then the add-on runs in a separate process. this option is currently not implemented. --
keydir=
keydir supply a different location for signing
keys.
keydir may be specified as a full path or as a path relative to the current directory. --logfile=logfile log console output to the file specified by logfile. logfile may be specified as a full path or as a path relative to the current directory. --profile-memory=profilememory if this option is given and profilememo...
...n it as the value of updatelink. --update-link=update_url embed the url supplied in update_url in the xpi file, as the value of updateurl. --no-strip-xpi will force the packager to include all files into the output xpi. if your extension works unpacked, but breaks after you cfx xpi it, you should try using this option. experimental options --harness-option=
key=value extra properties added to harness-options.json. --manifest-overload add fields to, or override selected fields in, package.json. this option takes an argument which is a path to a file containing json, and overloads any property of package.json with the properties found in the specified file. --output-file=output_file where to put the finished xpi file. -...
...And 2 more matches
Localization - Archive of obsolete content
replaced. the string is inserted as text, so you can't insert html using a statement like: # does not work. html tags are inserted as text. ...
...insert html using a statement like: # does not work. html tags are inserted as text. ...
......
...And 2 more matches
Miscellaneous - Archive of obsolete content
example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); m...
...s.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamon
key_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamon
key/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039 tracks improving this situation by providing a simple method to restart the application. example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); mouse and
keyboard detecting mouse wheel events when scrolling the mouse wheel on an ...
...rea. </div> <script type="text/javascript"> var elm = document.getelementbyid("scrollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier
keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrol
key.action and related preferences. the meaning of the action preference is shown in the following table mousewheel.withxxx
key.action result 0 scroll by lines. if set, you will receive dommousescroll events. 1 scroll by page. 2 move around in the history. if set, you will not receive...
...And 2 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
--> <em:signature>migtma0gcsqgsib3dqebbquaa4gbamo1o2gwsccth1gwymgscfanakpn40pjfowt ub2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> </rdf:rdf> some people prefer this alternate format ...
...gecko 1.9 has added additional requirements designed to protect users from man-in-the-middle attacks and the like during add-on updates. in the install.rdf of the already installed add-on updateurl must be specified in one of the following ways: the updateurl uses https, or there is no updateurl at all (which defaults to addons.mozilla.org which is https) the updateurl uses http and the update
key entry is specified which will be used to verify the data in the update manifest. when you specify an update
key in the install.rdf, you must include a digital signature in the update manifest or the information will be rejected. in the update manifest delivered from the updateurl the updatelink must be specified in one of the following ways: the updatelink to the xpi file must use https the...
...you digitally sign the update manifest to ensure that it's information isn't tampered with between you creating it and applications retrieving it. the mccoy tool should be used to sign the update rdf. the technical details of the signing mechanism are beyond the scope of this document however the basics are as follows: step 1 - done once, before you publish your add-on the target: adding update
key in install.rdf the add-on author creates a public/private rsa cryptographic
key pair. the public part of the
key is der encoded and then base 64 encoded and added to the add-on's install.rdf as an update
key entry. step 2 - done every time you change your "update.rdf" file the target: setting value to signature in update.rdf when the author creates the update rdf file a tool is used to sign i...
...And 2 more matches
Setting up an extension development environment - Archive of obsolete content
overview you'll create a new user profile to run your development specific firefox session. this will utilize distinctive development preferences in about:config. install firefox development extensions specifically for this new developer user profile. edit files in the extensions folder of this profile, and restart the application as this new developer profile. ...
... note: you could run firefox using your regular profile while developing. however, you won't enjoy the benefits of isolated resources, which we discussed earlier. the parameter -p profilename doesn't imply -no-remote, therefore use them together. if you are already running a firefox instance without ...
... dev on macos mavericks (10.9) and newer: /applications/firefox.app/contents/macos/firefox-bin -no-remote -p dev & on windows: start -> run "%programfiles%\mozilla firefox\firefox.exe" -no-remote -p dev on windows 64 bit: start -> run "%programfiles(x86)%\mozilla firefox\firefox.exe" -no-remote -p dev to start thunderbird or seamon
key instead of firefox, substitute thunderbird, or seamon
key for the firefox used in our examples. note: you could run firefox using your regular profile while developing. however, you won't enjoy the benefits of isolated resources, which we discussed earlier. the parameter -p profilename doesn't imply -no-remote, therefore use them together. if you are already running a firefox instance without -no-remote, and you attempt to start another instance wit...
...And 2 more matches
XUL user interfaces - Archive of obsolete content
ls for more information about xul user interfaces, see the xul page in this wiki. action: a xul demonstration make a new xul document as a plain text file, doc7.xul. ...
...tion" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </columns> <rows> <row> <label class="text-prompt" value="date:" access
key="d" control="date-text"/> <textbox id="date-text" type="timed" timeout="750" oncommand="refresh();"/> </row> <row> <label value="day:"/> <hbox id="day-box"> <label class="day" value="sunday" disabled="true"/> <label class="day" value="monday" disabled="true"/> <label class="day" value="tuesday" disable...
...copy and paste the content from here, making sure that you scroll to get all of it: /*** xul demonstration ***/ window {...
...And 2 more matches
Localizing an extension - Archive of obsolete content
fox that the en-us localization is located in the chrome/locale/en-us directory. localizing strings in javascript code if your javascript code contains literal strings that need to be localized, as does our stock watcher sample, we need to make those localizable as well. we can do this by moving the strings into a string bundle. ...
...create the string bundle the next step is to modify the stockwatcher2.xul file to reference this property file. ...
...ndle the next step is to modify the stockwatcher2.xul file to reference this property file. we do this by creating a string bundle, using the following code: <stringbundleset id="stringbundleset"> <stringbundle id="string-bundle" src="chrome://stockwatcher2/locale/stockwatcher2.properties"/> </stringbundleset> this establishes a new string bundle, referenced by the id "string-bundle", whose
keys and values are to be loaded from the stockwatcher2.properties file we've already created. note: you should use a unique id for each string bundle element for each file you use to avoid conflicts. (e.g. id="myextensionname-filename") update the javascript code now we're ready to revise the javascript code to load the strings from the string bundle instead of using literal strings. this involves...
...And 2 more matches
popChallengeResponse - Archive of obsolete content
being dropped. avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <
keygen> or the future web crypto api instead. resultstring = crypto.popchallengeresponse("challengestring"); argument description "challengestring" a base-64 encoded cmmf popodec
keychallcontent message. the current implementation does not conform to that defined in the cmmf draft, and we intend to change this implementation to that defined in the cmc rfc.. see below for the ...
..."challengestring"); argument description "challengestring" a base-64 encoded cmmf popodec
keychallcontent message. the current implementation does not conform to that defined in the cmmf draft, and we intend to change this implementation to that defined in the cmc rfc.. see below for the current implementation. the resultstring will either be a base-64 encoded popodec
keyrespcontent message, or one of the following error strings: error string description "error:invalidparameter:xxx" the parameter xxx was an invalid value. ...
...ltstring will either be a base-64 encoded popodec
keyrespcontent message, or one of the following error strings: error string description "error:invalidparameter:xxx" the parameter xxx was an invalid value. "error:internalerror" the software encountered some internal error, such as out of memory challenge-response proof of possession expected input: popodec
keychallcontent ::= sequence of challenge -- one challenge per encryption
key certification request (in the -- same order as these requests appear in fullcerttemplates). ...
...And 2 more matches
Mac stub installer - Archive of obsolete content
run the installer from the opt "mozilla installer" folder. ...
... run the installer from the opt "mozilla installer" folder. ...
...lt and ready to debug you may want to debug the xpinstall engine in the context of the installer rather than in the context of the browser. to do this, in addition to the above steps to set up the mac installer to debug you will need to do the following: create a file named xpcom.xpi with the shared libraries in the structure described under the [xpcom] section in: <http://lxr.mozilla.org/seamon
key/sou...ackages-mac#33> note that if you are using the debug target of the installer binary all shared libraries are expected to have the name format <libname>debug.shlb now set a break point at xpi_init() in the mac installer code and step into xpistub and eventually the xpinstall engine will load including symbols so you can set a break point in the xpinstall engine itself. how do i add an i...
...And 2 more matches
deleteValue - Archive of obsolete content
valname the name of the value-name/value pair you want to remove. ...
... valname the name of the value-name/value pair you want to remove. ...
... valname the name of the value-name/value pair you want to remove. ...
...And 2 more matches
enumValueNames - Archive of obsolete content
enumvaluenames enumerates the value of a given
key. method of winreg object syntax string enumvaluenames ( string
key, int sub
keyindex ); parameters the enumvaluenames method has the following parameters:
key the
key path to the appropriate location in the
key hierarchy, such as "software\\netscape\\navigator\\mail". sub
keyindex an integer representing the 0-based index of the
key value being sought. returns the value of the
key as a string if it succeeded; null if the referenced sub
key does not exist. description enumvaluenames can be used to iterate through the values for a given
key. the following brief example retrieves a
key value using this method. ...
... sub
keyindex an integer representing the 0-based index of the
key value being sought. returns the value of the
key as a string if it succeeded; null if the referenced sub
key does not exist. description enumvaluenames can be used to iterate through the values for a given
key. the following brief example retrieves a
key value using this method. ...
...ex an integer representing the 0-based index of the
key value being sought. returns the value of the
key as a string if it succeeded; null if the referenced sub
key does not exist. description enumvaluenames can be used to iterate through the values for a given
key. the following brief example retrieves a
key value using this method. ...
...And 2 more matches
setValue - Archive of obsolete content
valname the name of the value-name/value pair whose value you want to change. value a winregvalue object representing the new non-string value. see winregvalue for information about these values. ...
... valname the name of the value-name/value pair whose value you want to change. value a winregvalue object representing the new non-string value. see winregvalue for information about these values. ...
... valname the name of the value-name/value pair whose value you want to change. value a winregvalue object representing the new non-string value. see winregvalue for information about these values. ...
...And 2 more matches
Methods - Archive of obsolete content
parts of this page show the use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. ...
...this page show the use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. methods create
key adds a
key. ...
... use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. methods create
key adds a
key. delete
key removes a
key. deletevalue removes the value of an arbitrary
key. enum
keys retrieves the registry sub
keys for the given
key. enumvaluenames retrieves the value of a given sub
key. getvalue retrieves the value of an arbitrary
key. getvaluenumber retrieves the value of a
key, when that value is an integer. getvaluest...
...And 2 more matches
Introduction to XUL - Archive of obsolete content
sh using repeated processing directives, although you should always make sure to load the xul.css file initially. and finally, any namespaces used in the document must be declared. so a xul file will begin <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> the html namespace is of course the standard one. the xul namespace is obviously a temporary one, but at least serves to explain the pronunciation. note that the above example is using an implicit xul namespace. this is optional; other examples in this document will on occasion belabor the namespace issue by declaring each use explicitly. the chrome protoco...
...gether using javascript and broadcaster nodes. broadcaster nodes are declared as <broadcaster> elements in the xul description, and are involved with the communication of changes of state between widgets. a widget or several widgets can arrange to have the value of one of their attributes be tied to a broadcaster node. this tie is defined within the xul: <xul:window xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <broadcaster id="cangoback"/> <titledbutton src="resource:/res/toolbar/tb_back.gif" align="bottom" value="back" onclick="browserback()"> <observes element="cangoback" attribute="disabled"/> </titledbutton> </window> but it is up to the application code to locate the broadcasters within a window so it can punch them when necessary. broadc...
...nts of the file contentframe.html. this code introduces several concepts useful for creating real world windows not explicitly covered in this document. follow the links for details. <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" onclick="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window> the beginning of this example, down through the window tag, is the standard preamble. notice that th...
...And 2 more matches
Namespaces - Archive of obsolete content
module importing, you are already familiar with the namespace concept. an xml namespace is identified by an unique name (called a uri, not a url, even though it can look like a url). an uri is any string, although most people choose a url-based uri because urls are an easy way to hope for uniqueness. although there's nothing preventing someone else from using the namespace http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul, it's fairly unlikely anyone would choose that accidentally. even if they did accidentally choose it, they may not define the same elements as xul anyway (e.g., <textbox/>) in their schema/dtd. any element type or attribute name in an xml namespace can be uniquely identified by its xml namespace and its "local name". together, these two items define a qualified ...
...two items define a qualified name, or qname. for example, <xul:textbox/> uses a namespace named "xul" and a local name "textbox". this distinguishes it from, for example, <foobar:textbox/> which might occur in the same document. the xul and foobar namespaces must be defined at the top of the xml document in which they are used, like so: <foobar:some-element xmlns:xul="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" xmlns:foobar="the-foobar-namespace"> <xul:textbox id="foo" value="bar"/> <foobar:textbox favorite-food="pancakes"/> </foobar:some-element> notice i've mixed two <textboxes/> in the same document. the only way to distinguish that they have different meanings is with namespaces. there's only one other thing to know: "default namespace". every xml ele...
...ment> notice i've mixed two <textboxes/> in the same document. the only way to distinguish that they have different meanings is with namespaces. there's only one other thing to know: "default namespace". every xml element has a "default namespace", and this is used with xul elements all the time. in xul documents, you'll usually see this: <window id="foo" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> ... ... </window> and in xhtml documents, you'll see this: <html xmlns="http://www.w3.org/1999/xhtml"> ... ... </html> there is a very subtle difference here than before. before i wrote xmlns:xul="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" but here the :xul piece is omitted. this signifies to the xml parser that http://www.
...And 2 more matches
Custom toolbar button - Archive of obsolete content
introduction the technique described here does not involve any hacking. instead, you make your custom button as a self-contained extension in your profile. you can use the sample code provided here to make buttons that do various useful things. if you know how to program in javascript, then you can write your own code that does other things. ...
...xtension is very simplified. use other tutorials and articles to find out more—the main extensions page here is a good starting point. in particular, the articles creating toolbar buttons and building an extension explain the process in more detail. ...
... required tools you will need two tools. ...
...And 2 more matches
Adding Event Handlers - Archive of obsolete content
true, non-standard, poorly written, or syntax prone to cause logic errors are logged to the javascript console. responding to events the script will contain code which responds to various events triggered by the user or other situations. there are about thirty or so different events that may be handled in several different ways. a typical event is the user pressing a mouse button or pressing a
key. each xul element has the ability to trigger certain events in different situations. some events are triggered only by certain elements. each event has a name, for example, 'mousemove' is the name of the event that is triggered when the user moves the mouse over a ui element. xul uses the same event mechanism as defined by dom events. when an action occurs that would trigger an event, such as th...
... example, 'mousemove' is the name of the event that is triggered when the user moves the mouse over a ui element. xul uses the same event mechanism as defined by dom events. when an action occurs that would trigger an event, such as the user moving the mouse, an event object is created corresponding to that event type. various properties are set on the event object such as the mouse position, the
key that was pressed, and so forth. the event is then sent to the xul in phases. in the capturing phase, the event is first sent to the window, then to the document, followed by each ancestor of the xul element where the event occured downwards until it reaches that element. in the target phase, the event is sent to the target xul element. in the bubbling phase, the event is sent to each elemen...
...mmand' event. the command event is fired when a user activates an element, for example by pressing a button, changing a checkbox or selecting an item from a menu. the command event is a useful event since it automatically handles different ways of activating the element. for example, the command event will occur regardless of whether the user uses the mouse to click a button, or presses the enter
key. there are two ways to attach an event listener to an element. first, by using an attribute with a script as its value. second, by calling an element's addeventlistener method. the former may only handle bubbling events but tends to be simpler to write. the latter can handle events at any phase and may also be used to attach multiple listeners for an event to an element. using the attribute form...
...And 2 more matches
Creating Dialogs - Archive of obsolete content
o supply code to perform the appropriate tasks when the user presses each button. this mechanism is necessary because different platforms have a specific order in which the buttons appear. ...
...n is pressed. the two functions dook() and docancel() both return true, which indicates that the dialog should be closed. if the dialog shouldn't be closed, 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 buttonaccess
keyaccept - 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"...
...aultbutton - 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. ...
...And 2 more matches
button - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a button that can be pressed by the user. event handlers can be used to trap mouse,
keyboard and other events. it is typically rendered as a grey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. ...
...s | attributes | properties | methods | related ] a button that can be pressed by the user. event handlers can be used to trap mouse,
keyboard and other events. it is typically rendered as a grey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. ...
...ther events. it is typically rendered as a grey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. attributes access
key, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties access
key, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes access
key type: character this should be set to a character that is used as a shortcut
key. this should be one of the characters that appears in the l...
...And 2 more matches
listbox - Archive of obsolete content
nal rows can be viewed using a scroll bar. a listbox is expected to contain listitem elements. all the rows in the listbox are the same height, which is the height of the tallest item in the list. if you wish to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. ...
... the height of the tallest item in the list. if you wish to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. ...
...wed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disable
keynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing
keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this feature may be disabled by setting this attribute to true. preference type: id connects the element to a corresponding pref...
...And 2 more matches
menu - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element, much like a button, that is placed on a menubar. when the user clicks the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
... button, that is placed on a menubar. when the user clicks the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
...this should be one of the characters that appears in the label attribute for the element. allow...
...And 2 more matches
menulist - Archive of obsolete content
s. the user may select one of the elements displayed in the menulist. the currently selected choice is displayed on the menulist element. to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
...this should be one of the characters that appears in the label attribute for the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be us...
... insertitemat, removeallitems, removeitemat, select examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes access
key type: character this should be set to a character that is used as a shortcut
key. this should be one of the characters that appears in the label attribute for the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is ...
...And 2 more matches
Dialogs in XULRunner - Archive of obsolete content
eating windows. each dialog is described in its own xul file. xul provides a dialog element to act as the container for the dialog. dialog xul files can have dtd, css, and javascript, just like windows. ...
...vascript, just like windows. ...
...e://global/skin/" 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,cancel" buttonlabelaccept="set favorite" buttonaccess
keyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccess
keycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favorite fruit"/> <radiogroup> <radio id="1" label="oranges because they are...
...And 2 more matches
ECMAScript 2015 support in Mozilla - Archive of obsolete content
code-named "es.next", "harmony", or "ecmascript 6", the first working draft (based on ecmascript 5.1) was published on july 12, 2011 as "es.next". in august 2014, the ecmascript 2015 draft specification was feature frozen and went through a stabilization and bug fixing period. finally, ecma-262 edition 6 got officially approved and published as a standard on june 17, 2015 by the ecma general assembly. ...
...ly downloaded on ecma-international.org. a channel for feedback on ecmascript standards is es-discuss. ...
...fox 25) array.prototype.entries(), array.prototype.
keys() (firefox 28), array.prototype.values() array.prototype.copywithin() (firefox 32) get array[@@species] (firefox 48) new map and set objects, and their weak counterparts map (firefox 13) map iteration with for...of (firefox 17) map.prototype.foreach() (firefox 25) map.prototype.entries() (firefox 20) map.prototype.
keys() (firefox 20) map.prototype.values() constructor argument: new map(null) (firefox 37) mon
key-patched set() in constructor (firefox 37) get map[@@species] (firefox 41) set (firefox 13) set iteration with for...of (firefox 17) set.prototype.foreach() (firefox 25) set.prototype.entries(), set.prototype.
keys(), set.prototype.values() (firefox 24) constructor...
...And 2 more matches
Old Proxy API - Archive of obsolete content
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. warning: the spidermon
key proxy implementation is a prototype and the proxy api and semantics specifications are unstable. the spidermon
key implementation may not reflect the latest specification draft. it is subject to change anytime. it is provided as an experimental feature. do not rely on it for production code. introduction proxies are objects for which the programmer has to define the semantics in javascript. the default object semantics are implemented in the javascript engine, often w...
...erits from the proxy. for(prop in proxy){...} enumerate: function() -> string array function() { return this.getpropertynames().filter( function (name) { return this.getpropertydescriptor(name).enumerable } ); } from the proxy user point of view, properties appear in the for..in loop in the same order as they are in the returned array. ...
...proxy. for(prop in proxy){...} enumerate: function() -> string array function() { return this.getpropertynames().filter( function (name) { return this.getpropertydescriptor(name).enumerable } ); } from the proxy user point of view, properties appear in the for..in loop in the same order as they are in the returned array. object.
keys(proxy)
keys: function() -> string array function() { return this.getownpropertynames().filter( function (name) { return this.getownpropertydescriptor(name).enumerable } ); } invariants even though proxies provide a lot of power to users, some operations are not trapped in order to keep the language consistent: the triple equal (===) operator is not trapped. p1 ...
...And 2 more matches
2D maze game with device orientation - Game development
the physics for the ball movement), and setting the size of the body for the collision detection. the bounce property is used to set the bounciness of the ball when it hits the obstacles. ...
... set the bounciness of the ball when it hits the obstacles. controlling the ball it’s cool to have the ball ready to be thrown around in the play area, but it’s also important to be able to actually move it! now we will add the ability to control the ball with the
keyboard on the desktop devices, and then we will move to the implementation of the device orientation api. let’s focus on the
keyboard first by adding the following to the create() function : this.
keys = this.game.input.
keyboard.createcursor
keys(); as you can see there’s a special phaser function called createcursor
keys(), which will give us an object with event handlers for the four arrow
keys to play with: up, down, left and right. next we will add the following code to the update() function, so it will be fired on e...
... the following to the create() function : this.
keys = this.game.input.
keyboard.createcursor
keys(); as you can see there’s a special phaser function called createcursor
keys(), which will give us an object with event handlers for the four arrow
keys to play with: up, down, left and right. next we will add the following code to the update() function, so it will be fired on every frame. ...
...And 2 more matches
Gecko FAQ - Gecko Redirect 1
gecko is continuously under development at mozilla.org. gecko has been known previously by the code names "raptor" and "nglayout"; the new name was chosen following a trademark infringement dispute. for more information see the wikipedia article on gecko. ...
...ed to display content on the screen, including a layout engine and a complementary set of browser components. however, gecko does not package all of these components alongside other interface modules in a coherent, user-friendly application (including menus, toolbars, etc.), such as firefox. mozilla.org assembles the necessary components into its applications, such as firefox, thunderbird, seamon
key, which are available for free download from mozilla.org. netscape released its own version of the browser branded as netscape navigator. other companies release their own software and hardware products that use gecko. see xulrunner hall of fame for a partial list of application that use gecko via xulrunner. third parties such as isvs and hardware vendors will pick and choose the components they ...
...ists of open in-process bugs will inevitably include some duplicate, out of date, unreproducible, invalid, and incorrectly tagged reports: the links themselves are probably outdated too. ...
...And 2 more matches
Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
mploying hooking techniques. voiceover macos comes with voiceover, a built-in screen reader. to access voiceover, go to system preferences > accessibility > voiceover. you can also toggle voiceover on and off with fn+command + f5. voiceover both reads aloud and displays content. the content read aloud is displayed in a dark grey box. ...
...o access voiceover, go to system preferences > accessibility > voiceover. you can also toggle voiceover on and off with fn+command + f5. voiceover both reads aloud and displays content. the content read aloud is displayed in a dark grey box. desktop/laptop screen reader users navigate websites with a
keyboard or other non-pointing device. the best way to emulate use is to do the same. ...
...over on and off with fn+command + f5. voiceover both reads aloud and displays content. the content read aloud is displayed in a dark grey box. desktop/laptop screen reader users navigate websites with a
keyboard or other non-pointing device. the best way to emulate use is to do the same. ...
...And 2 more matches
TOFU - MDN Web Docs Glossary: Definitions of Web-related terms
trust on first use (tofu) is a security model in which a client needs to create a trust relationship with an unknown server. to do that, clients will look for identifiers (for example public
keys) stored locally. if an identifier is found, the client can establish the connection. if no identifier is found, the client can prompt the user to determine if the client should trust the identifier. ...
... in which a client needs to create a trust relationship with an unknown server. to do that, clients will look for identifiers (for example public
keys) stored locally. if an identifier is found, the client can establish the connection. if no identifier is found, the client can prompt the user to determine if the client should trust the identifier. ...
...nown server. to do that, clients will look for identifiers (for example public
keys) stored locally. if an identifier is found, the client can establish the connection. if no identifier is found, the client can prompt the user to determine if the client should trust the identifier. tofu is used in the ssh protocol, in http public
key pinning (hpkp) where the browsers will accept the first public
key returned by the server, and in strict-transport-security (hsts) where a browser will obey the redirection rule. ...
...And 2 more matches
Storing the information you need — Variables - Learn web development
. note: we say variables contain values. this is an important distinction to make. variables aren't the values themselves; they are containers for values. you can think of them being like little cardboard boxes that you can store things in. declaring a variable to use a variable, you've first got to create it — more accurately, we call this declaring the variable. to do this, we type the
keyword var or let followed by the name you want to call your variable: let myname; let myage; here we're creating two variables called myname and myage. try typing these lines into your web browser's console. after that, try creating a variable (or two) with your own name choices. note: in javascript, all code instructions should end with a semi-colon (;) — your code may work correctly for sin...
...ariable values by simply typing their name into the console — try these again: myname; myage; you can declare and initialize a variable at the same time, like this: let mydog = 'rover'; this is probably what you'll do most of the time, as it is quicker than doing the two actions on two separate lines. ...
... a couple of simple differences are explained below. we won't go into all the differences now, but you'll start to discover them as you learn more about javascript (if you really want to read about them now, feel free to check out our let reference page). ...
...And 2 more matches
Componentizing our React app - Learn web development
the tasks themselves. remember that each task we map over has the id, name, and checked properties we want to pass into our <todo /> component. if we put that knowledge together, we get code like this: const tasklist = props.tasks.map(task => ( <todo id={task.id} name={task.name} completed={task.completed} /> )); now the app looks like it did before, and our code is less repetitive. ...
...ap(task => ( <todo id={task.id} name={task.name} completed={task.completed} /> )); now the app looks like it did before, and our code is less repetitive. unique
keys now that react is rendering our tasks out of an array, it has to keep track of which one is which in order to render them properly. react tries to do its own guesswork to keep track of things, but we can help it out by passing a
key prop to our <todo /> components.
key is a special prop that's managed by react – you cannot use the word
key for any other purpose. because
keys should be unique, we're going to re-use the id of each task object as its
key. update your tasklist constant like so: const tasklist = props.tasks.map(task => ( <todo id={task.id} name={task.name} completed={task.completed} ...
...rop to our <todo /> components.
key is a special prop that's managed by react – you cannot use the word
key for any other purpose. because
keys should be unique, we're going to re-use the id of each task object as its
key. update your tasklist constant like so: const tasklist = props.tasks.map(task => ( <todo id={task.id} name={task.name} completed={task.completed}
key={task.id} /> ) ); you should always pass a unique
key to anything you render with iteration. ...
...And 2 more matches
React interactivity: Events and state - Learn web development
t the top of your app() function definition: const [tasks, settasks] = usestate(props.tasks); now, we can change our tasklist mapping so that it is the result of mapping tasks, instead of props.tasks. your tasklist constant declaration should now look like so: const tasklist = tasks.map(task => ( <todo id={task.id} name={task.name} completed={task.completed}
key={task.id} /> ) ); adding a task we’ve now got a settasks hook that we can use in our addtask() function to update our list of tasks. there’s one problem however: we can’t just pass the name argument of addtask() into settasks, because tasks is an array of objects and name is a string. if we tried to do this, the array would be replaced with the string. first of all, we need t...
...our object at the end. we then pass this array into settasks() to update the state. ...
...ttasks([...tasks, newtask]); } now you can use the browser to add a task to our data! type anything into the form and click "add" (or press the enter
key) and you'll see your new todo item appear in the ui! however, we have another problem: our addtask() function is giving each task the same id. this is bad for accessibility, and makes it impossible for react to tell future tasks apart with the
key prop. in fact, react will give you a warning in your devtools console — "warning: encountered two children with the same
key..." we need to fix this. making unique identifiers is a hard problem – one for which the javascript community has written some helpful libraries. we’ll use nanoid because it's tiny, and it works. make sure you’re in the root directory of your application and run t...
...And 2 more matches
Componentizing our Svelte app - Learn web development
itional information a copy of the original todo with the changes applied. finally, the onremove() function emits the remove event, passing the todo to be deleted as additional data. ...
...ion a copy of the original todo with the changes applied. finally, the onremove() function emits the remove event, passing the todo to be deleted as additional data. ...
...nvoked, name is restored to its original value (when passed in as a prop) and we exit editing mode (by setting editing to false). when onsave() in invoked, we run the update() function — passing it the modified name — and exit editing mode. we also disable the save button when the <input> is empty, using the disabled={!name} attribute, and allow the user to cancel the edit using the escape
key, like this: on:
keydown={e => e.
key === 'escape' && oncancel()}. we also use todo.id to create unique ids for the new input controls and labels. the complete updated markup of our todo component looks like the following. update yours now: <div class="stack-small"> {#if editing} <!-- markup for editing todo: label, input text, cancel and save button --> <form on:submit|preventdefault...
...And 2 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
ayed todo items are all static. we want to iterate over each item in our todos array and render the markup for each task, so let's do that now. html doesn't have a way of expressing logic — like conditionals and loops. svelte does. in this case we use the {#each...} directive to iterate over the todos array. the second parameter, if provided, will contain the index of the current item. also, a
key expression can be provided, which will uniquely identify each item. svelte will use it to diff the list when data changes, rather than adding or removing items at the end, and it's a good practice to always specify one. finally, an :else block can be provided, which will be rendered when the list is empty. let's give it a try. replace the existing <ul> element with the following simplified...
... update. so let's turn the array into a prop. in todos.svelte, replace the existing let todos = ... block with export let todos = []. export let todos = [] this may feel a little weird at first. that's not how export normally works in javascript modules! this is how svelte 'extends' javascript by taking valid syntax and giving it a new purpose. in this case svelte is using the export
keyword to mark a variable declaration as a property or prop, which means it becomes accessible to consumers of the component. you can also specify a default initial value for a prop. this will be used if the component's consumer doesn't specify the prop on the component — or if its initial value is undefined — when instantiating the component. so with export let todos = [], we are telling ...
...fter toggling and removing todos, but there's an easier way to do it. we can tell svelte that we want our totaltodos and completedtodos variables to be reactive by prefixing them with $:. svelte will generate the code to automatically update them whenever data they depend on is changed. note: svelte uses the $: javascript label statement syntax to mark reactive statements. just like the export
keyword being used to declare props, this may look a little alien. this is another example in which svelte takes advantage of valid javascript syntax and gives it a new purpose — in this case to to mean "re-run this code whenever any of the referenced values change". once you get used to it, there's no going back. update your totaltodos and completedtodos variable definitions inside src/component...
...And 2 more matches
Focus management with Vue refs - Learn web development
we'll look at using vue refs to handle this — an advanced feature that allows you to have direct access to the underlying dom nodes below the virtual dom, or direct access from one component to the internal dom structure of a child component. ...
... learn how to handle focus management using vue refs. the focus management problem while we do have working edit functionality, we aren't providing a great experience for non-mouse users. specifically, when a user activates the "edit" button, we remove the "edit" button from the dom, but we don't move the user's focus anywhere, so in effect it just disappears. this can be disorienting for
keyboard and non-visual users. to understand what's currently happening: reload your page, then press tab. you should see a focus outline on the input for adding new to-do items. press tab again. the focus should move to the "add" button. hit it again, and it'll be on the first checkbox. one more time, and focus should be on the first "edit" button. activate the "edit" button by pressing enter...
...you'll notice that focus isn’t being set, so we still have a problem to solve. if you open your console, you'll see an error raised along the lines of "can't access property "focus", editbuttonref is undefined". this seems weird. your button ref was defined when you activated the "edit" button, but now it’s not. what is going on? well, remember that when we change isediting to true, we...
...And 2 more matches
Mozilla Plugin Accessibility
plugins in gecko-based browsers have a lot of accessibility issues. here is a rundown of problems and the planned solutions: new! ...
... plugins in gecko-based browsers have a lot of accessibility issues. here is a rundown of problems and the planned solutions: new! ...
...t of accessibility issues. here is a rundown of problems and the planned solutions: new! see the plugin
keyboard navigation proposal to see how the largest problems can be solved. problem planned solution owner targeted completion 1. all browser
keys unavailable when plugin has focus focused plugins currently have no choice but to consume all
keyboard events. the new plugin api will allow plugins to bubble unused
keypresses to the browser. this will allow
keyboard users to still access menus, close the current page, scroll, move back and forward in history, etc. if the plugin needs those
keystrokes, the can consume them and not pass them on. see the plugin
keyboard navigation proposal for the implementation plan. the same solution will be...
...And 2 more matches
HTTP Cache
as an existing entry. adding a new storage should there be a need to add a new distinct storage for which the current scoping model would not be sufficient - use one of the two following ways: [preffered] add a new <your>storage method on nsicachestorageservice and if needed give it any arguments to specify the storage scope even more. implementation only should need to enhance the context
key generation and parsing code and enhance current - or create new when needed - nsicachestorage implementations to carry any additional information down to the cache service. [not preferred] add a new argument to nsiloadcontextinfo; be careful here, since some arguments on the context may not be known during the load time, what may lead to inter-context data leaking or implementation problems. add...
...itional information down to the cache service. [not preferred] add a new argument to nsiloadcontextinfo; be careful here, since some arguments on the context may not be known during the load time, what may lead to inter-context data leaking or implementation problems. adding more distinction to nsiloadcontextinfo also affects all existing storages which may not be always desirable. see context
keying details for more information. code examples tbd opening an entry creating a new entry recreating an already open entry implementation threading the cache api is fully thread-safe. the cache is using a single background thread where any io operations like opening, reading, writing and erasing happen. also memory pool management, eviction, visiting loops happen on this thread. the thr...
...for eviction - when an eviction is scheduled on the io thread, all operations pending on the open level are first merged to the open_priority level. the eviction preparation operation - i.e. clearing of the internal io state - is then put to the end of the open_priority level. all this happens atomically. this functionality is currently pending in bug 976866. storage and entries scopes a scope
key string used to map the storage scope is based on the arguments of nsiloadcontextinfo. the form is following (currently pending in bug 968593): a,b,i1009,p, regular expression: (.([^,]+)?,)* the first letter is an identifier, identifiers are to be alphabetically sorted and always terminate with ',' a - when present the scope is belonging to an anonymous load b - when present the scope is in...
...And 2 more matches
AddonUpdateChecker
error_download_error there was an error while downloading the update information. error_parse_error the update information was malformed in some way. error_unknown_format the update information was not in any kno...
...n error_timeout the update check timed out. error_download_error there was an error while downloading the update information. error_parse_error the update information was malformed in some way. error_unknown_format the update information was not in any known format. error_security_error the update information was not signed by the update
key used for retrieval. methods getcompatibilityupdate() retrieves the best matching compatibility update for the application from a list of available update objects. updateinfo getcompatibilityupdate( in updateinfo updates[], in string version, in boolean ignorecompatibility, in string appversion, in string platformversion ) parameters updates an array of update objects ver...
...nfo updates[], in string appversion, in string platformversion ) parameters updates an array of update objects appversion the version of the application or null to use the current version platformversion the version of the platform or null to use the current version checkforupdates() starts an update check. ...
...And 2 more matches
L10n Checks
ompleteness -i dir en-us/ my/ files (file) mode l10n checks can compare two files. you pass both paths to the files, e.g.: check-l10n-completeness -i file en-us.dtd my.dtd the output the output of l10n checks shows the missing and obsolete strings in a pseudo-diff format. ...
...e) mode l10n checks can compare two files. you pass both paths to the files, e.g.: check-l10n-completeness -i file en-us.dtd my.dtd the output the output of l10n checks shows the missing and obsolete strings in a pseudo-diff format. ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.command
key3 +fullzoomreducecmd.command
key2 +fullzoomresetcmd.command
key2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.access
key -importfromfile.label +importfromhtmlfile.access
key +importfromhtmlfile.label you can assume changed strings when you see entities removed and added with a similar name. the file names wil...
...and added with a similar name. the file names will be shown in a hierarchical form, so in the example above, your files are browser.dtd in ab-cd/browser/chrome/browser and migration.dtd in another directory level deeper. the output closes with a summary, giving the total counts of missing and obsolete strings and some statistics on how many strings are changed or not, excluding access and command
keys. that gives localizers an idea on how thorough the localization is. this number won't reach 100% in general; mid 80s should be the target, though. options reference locale in the source and xpi modes you can change the default reference locale (en-us) by setting the -r parameter, e.g.: check-l10n-completeness -r pl browser/locales/l10n.ini ../l10n/ de output mode you can change the look and fee...
...And 2 more matches
FIPS Mode - an explanation
s writing, nss is now being retested to be recertified for the fifth time. nss was the first open source cryptographic library to be fips certified. what is fips mode all about? a fips-140 compliant application must do all of its cryptography in a fips-140 certified "device". ...
...compliant application must do all of its cryptography in a fips-140 certified "device". whether it is hardware or software, that device will have all the cryptographic engines in it, and also will stores
keys and perhaps certificates inside. the device must have a way for users to authenticate to it (to "login" to it), to prove to it that they are authorized to use the cryptographic engines and
keys it contains. it may not do any cryptographic operations that involve the use of cryptographic
keys, nor allow any of the
keys or certificates it holds to be seen or used, except when a user has successfully authenticated to it. if users authenticate to it with a password, it must ensure that their passwords are strong passwords. it must implement the us government standard algorithms (also sp...
...r has successfully authenticated to it. if users authenticate to it with a password, it must ensure that their passwords are strong passwords. it must implement the us government standard algorithms (also specified in other fips documents) such as aes, triple-des, sha-1 and sha-256, that are needed to do whatever job the application wants it to perform. it must generate or derive cryptographic
keys and store them internally. except for "public
keys", it must not allow any
keys to leave it (to get outside of it) unless they are encrypted ("wrapped") in a special way. this makes it difficult to move
keys from one device to another, and consequently, all crypto engines and
key storage must be in a single device rather than being split up into several devices. how does this affect firefox u...
...And 2 more matches
NSS_3.12.1_release_notes.html
aries, which nss 3.12.1 requires. nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/. new in nss 3.12.1 new functions in the nss shared library: cert_nametoasciiinvertible (see cert.h) convert an certname into its rfc1485 encoded equivalent. returns a string that must be freed with port_free(). caller chooses encoding rules. cert_encodesubject
keyid (see cert.h) encode certificate skid (subject
key id) extension. pk11_getallslotsforcert (see pk11pub.h) pk11_getallslotsforcert returns all the slots that a given certificate exists on, since it's possible for a cert to exist on more than one pkcs#11 token. levels of standards conformance strictness for cert_nametoasciiinvertible (see certt.h) cert_n2a_readable (maximum human readability) ...
...ssible for a cert to exist on more than one pkcs#11 token. levels of standards conformance strictness for cert_nametoasciiinvertible (see certt.h) cert_n2a_readable (maximum human readability) cert_n2a_strict (strict rfc compliance) cert_n2a_invertible (maximum invertibility) bugs fixed the following bugs have been fixed in nss 3.12.1. bug 67890: create self-signed cert with existing
key that signed csr bug 129303: nss needs to expose interfaces to deal with multiple token sources of certs. bug 311432: ecc's ecl_use_fp code (for linux x86) fails pairwise consistency test bug 330622: certutil's usage messages incorrectly document certain options bug 330628: coreconf/linux.mk should _not_ default to x86 but result in an error if host is not recognized bug 359302: remove t...
...03543: pkix: need a way to enable/disable aia cert fetching bug 408847: pkix_ocspchecker_check does not support specified responder (and given signercert) bug 414003: crash [[@ cert_decodecertpackage] sometimes with this testcase bug 415167: memory leak in certutil bug 417399: arena allocation results are not checked in pkix_pl_infoaccess_parselocation bug 420644: improve ssl tracing of
key derivation bug 426886: use const char* in pk11_importcertfor
key bug 428103: cert_encodesubject
keyid is not defined in any public header file bug 429716: debug builds of libpkix unconditionally dump socket traffic to stdout bug 430368: vfychain -t option is undocumented bug 430369: vfychain -o succeeds even if -pp is not specified bug 430399: vfychain -pp crashes bug 430405: error lo...
...And 2 more matches
NSS 3.22 release notes
4.11 or newer. nss 3.22 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_rtm/src/ new in nss 3.22 new functionality rsa-pss signatures are now supported (bug 1215295) new functions pk11_signwithmechanism() and pk11_signwithmechanism() are provided to allow rsa
keys to be used with pss. pseudorandom functions based on hashes other than sha-1 are now supported with pbkdf (bug 554827). pk11_createpbev2algorithmid() now supports sec_oid_pkcs5_pbkdf2 with cipheralgtag and prfalgtag set to sec_oid_hmac_sha256, sec_oid_hmac_sha224, sec_oid_hmac_sha384, or sec_oid_hmac_sha512. enforce an external policy on nss from a config file (bug 1009429) ...
...ic algorithms and protocols. a complete list can be found in nss config options. new functions in pk11pub.h pk11_signwithmechanism - this function is an extended version pk11_sign(). pk11_verifywithmechanism - this function is an extended version of pk11_verify(). these functions take an explicit mechanism and parameters as arguments rather than inferring it from the
key type using pk11_mapsign
keytype(). the mechanism type ckm_rsa_pkcs_pss is now supported for rsa in addition to ckm_rsa_pkcs. the ck_rsa_pkcs_pss mechanism takes a parameter of type ck_rsa_pkcs_pss_params. in ssl.h ssl_peersignedcerttimestamps - get signed_certificate_timestamp tls extension data ssl_setsignedcerttimestamps - set signed_certificate_timestamp tls extension ...
..._oid_tls_ecdh_rsa sec_oid_tls_ecdh_anon sec_oid_tls_rsa_export sec_oid_tls_dhe_rsa_export sec_oid_tls_dhe_dss_export sec_oid_tls_dh_rsa_export sec_oid_tls_dh_dss_export sec_oid_tls_dh_anon_export sec_oid_apply_ssl_policy in sslt.h ssl_signed_cert_timestamp_xtn is added to sslextensiontype. ...
...And 2 more matches
NSS 3.24 release notes
e. nss softoken has also been updated to allow nss to run in fips level 1 (no password). this mode is triggered by setting the database password to the empty string. in fips mode, you may move from level 1 to level 2 (by setting an appropriate password), but not the reverse. a ssl_configservercert 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 incorre...
...ction 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_configservercert. also, partial support for rsa probabilistic signature scheme (rsa-pss) certificates has been added. although these...
...he heap, only the arena itself is stack-allocated. note: this approach is only useful when the arena use is tightly bounded, for example, if it is only used in a single function. new elements this section lists and briefly describes the new functions, types, and macros in nss 3.24. new functions in ssl.h ssl_configservercert - configures an ssl/tls socket with a certificate, private
key, and other information. in secport.h port_initcheaparena - initializes an arena that was created on the stack. (see portcheaparenapool.) port_destroycheaparena - destroys an arena that was created on the stack. (see portcheaparenapool.) new types in sslt.h sslextraservercertdata - optionally passed as an argument to ssl_configservercert. this struct contains supple...
...And 2 more matches
FC_Initialize
ture whose members should have the following values: createmutex should be null. destroymutex should be null. lockmutex should be null. unlockmutex should be null. flags should be ckf_os_locking_ok. libraryparameters should point to a string that contains the library parameters. preserved should be null. ...
...ld be null. flags should be ckf_os_locking_ok. libraryparameters should point to a string that contains the library parameters. preserved should be null. the library parameters string has this format: "configdir='dir' certprefix='prefix1'
keyprefix='prefix2' secmod='file' flags= " here are some examples. ...
...cmod='file' flags= " here are some examples. ...
...And 2 more matches
GC Rooting Guide
the main types of gc thing pointer are: js::value jsobject* jsstring* jsscript* jsid note that js::value and jsid can contain pointers internally even though they are not a normal pointer type, hence their inclusion in this list. ...
... the main types of gc thing pointer are: js::value jsobject* jsstring* jsscript* jsid note that js::value and jsid can contain pointers internally even though they are not a normal pointer type, hence their inclusion in this list. ...
... the main types of gc thing pointer are: js::value jsobject* jsstring* jsscript* jsid note that js::value and jsid can contain pointers internally even though they are not a normal pointer type, hence their inclusion in this list. ...
...And 2 more matches
JSClass.flags
data. if this flag is set, each instance of the class has a field for private data. the field can be accessed using js_getprivate and js_setprivate. mxr id search for jsclass_has_private jsclass_private_is_nsisupports mozilla extension. the private field of each object of this class points to an xpcom object (see nsisupports). ...
... jsclass_private_is_nsisupports mozilla extension. the private field of each object of this class points to an xpcom object (see nsisupports). this is only meaningful if spidermon
key is built with xpconnect and the jsclass_has_private flag is also set. mxr id search for jsclass_private_is_nsisupports jsclass_is_domjsclass added in spidermon
key 17 objects are dom. mxr id search for jsclass_is_domjsclass jsclass_emulates_undefined added in spidermon
key 24 causes objects which have this class to emulate undefined in certain circumstances. an object obj that emulates undefined behaves like any other object, except in the following ways: typeof obj === "undefined" obj converts to false when obj is ...
... they can be accessed using js_getreservedslot and js_setreservedslot. (the jsclass.reserveslots hook also allocates reserved slots to objects.) mxr id search for jsclass_has_reserved_slots jsclass_global_flags this flag is only relevant for the class of an object that is used as a global object. (ecmascript specifies a single global object, but in spidermon
key the global object is the last object in the scope chain, which can be different objects at different times. this is actually quite subtle. js_executescript and similar apis set the global object for the code they execute. js_setglobalobject sets an object which is sometimes used as the global object, as a last resort.) enable standard ecmascript behavior for setting the prototype of certain ...
...And 2 more matches
JS_ExecuteScript
execute a compiled script. ...
... execute a compiled script. ...
...ntax bool js_executescript(jscontext *cx, js::handlescript script, js::mutablehandlevalue rval); // added in spidermon
key 45 bool js_executescript(jscontext *cx, js::handlescript script); // added in spidermon
key 45 bool js_executescript(jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script, js::mutablehandlevalue rval); // added in spidermon
key 36 bool js_executescript(jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script); // added in spidermon
key 36 bool js_executescript(jscontext *cx, js::handleobject obj, js::handlescript script, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js_executescript(jscontext *cx, js::handleobject obj, js::handlescript script); // obsol...
...And 2 more matches
JS_SetOptions
ope, do two different things. the former creates a property on the global object. the latter creates a property on obj. with this flag, both create a global property. mxr id search for jsoption_varobjfix jsoption_private_is_nsisupports mozilla extension. the context's private data points to an xpcom object (see nsisupports). this is only meaningful if spidermon
key is built with xpconnect. mxr id search for jsoption_private_is_nsisupports jsoption_compile_n_go caller of js_compilescript et al promises to execute the compiled script once only, in the same scope object used for compilation. the caller may not modify objects on the scope chain between compilation and execution. this enables compile-time scope chain resolutio...
...option supported for the xul preprocessor and kindred beasts. mxr id search for jsoption_atline jsoption_xml obsolete since jsapi 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags. mxr id search for jsoption_xml jsoption_allow_xml added in spidermon
key 15 if this is off, e4x syntax isn't supported no matter what version number is set. mxr id search for jsoption_allow_xml jsoption_moar_xml added in spidermon
key 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags. only used if jsoption_allow_xml is set. mxr id search for jsoption...
... script parameter, by native code that loops intensively. mxr id search for jsoption_native_branch_callback jsoption_dont_report_uncaught when returning from the outermost api call, prevent uncaught exceptions from being converted to error reports. mxr id search for jsoption_dont_report_uncaught jsoption_relimit added in spidermon
key 1.8 throw an exception if a regular expression backtracks more than n3 times, where n is the length of the input string. mxr id search for jsoption_relimit jsoption_anonfunfix added in spidermon
key 1.8 disallow function () {} in statement context, per ecma-262 edition 3. this behavior is the default in releases where this option has been removed. mxr id search for ...
...And 2 more matches
JS_ValueToId
convert a js::value to type jsid. syntax bool js_valuetoid(jscontext *cx, js::handlevalue v, js::mutablehandleid idp); bool js_stringtoid(jscontext *cx, js::handlestring s, js::mutablehandleid idp); // added in spidermon
key 38 bool js_indextoid(jscontext *cx, uint32_t index, js::mutablehandleid idp); // added in spidermon
key 17 bool js_charstoid(jscontext* cx, js::twobytechars chars, js::mutablehandleid idp); // added in spidermon
key 24 void js::proto
keytoid(jscontext *cx, jsproto
key key, js::mutablehandleid idp); // added in spidermon
key 38 name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v js::handlevalue the js value to convert. s ...
... cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v js::handlevalue the js value to convert. s js::handlestring the js string to convert. index uint32_t an unsigned integer index of array to convert. chars js::twobytechars the string to convert.
key jsproto
key the prototype
key to convert. idp js::mutablehandleid out parameter. on success, *idp receives the converted jsid. description js_valuetoid converts a specified js::value, v, to a jsid. if v is an integer, *idp receives an integer jsid. otherwise, if e4x support is enabled and v is an object, *idp receives an object jsid. otherwise, *idp receives an interne...
...sid. otherwise, if e4x support is enabled and v is an object, *idp receives an object jsid. otherwise, *idp receives an interned string jsid based on the value of v. if v is not a string, it is converted to a string as if by calling js_valuetostring. js_stringtoid and js_charstoid convert a specified string to a jsid. js_indextoid converts a specified integer index to an integer jsid. js::proto
keytoid converts a specified prototype
key to a jsid. on success, js_valuetoid stores the converted value in *idp and returns true. otherwise it returns false. the inverse of js_valuetoid is js_idtovalue. mxr id search for js_valuetoid see also mxr id search for js_idtovalue mxr id search for js_stringtoid mxr id search for js_indextoid mxr id search for js_charstoid mxr id search for js::...
...And 2 more matches
Starting WebLock
isupports.idl, which defines the nsisupports interface from which all xpcom interfaces must derive, and makes it possible for the iweblock interface to subclass that base interface. #include "nsisupports.idl" the next line of the xpidl is a forward declaration of the interface nsisimpleenumerator. again, this is similar to the forward declare in c++ (except that c++ does not have the interface
keyword seen here). interface nsisimpleenumerator; see the xpcom resources for more information about the xpidl syntax. scriptable interfaces the third line in iweblock is more complex. the first thing it says is that iweblock will bescriptable. [scriptable, uuid(ea54eee4-9548-4b63-b94d-c519ffc91d09)] the rest of the line provides a uuid for this interface. recall that every interface has a u...
...given value. */ void set(in string prop, in nsisupports value); /** * returns true if the property with the given name exists. */ boolean has(in string prop); /** * undefines a property. * @return ns_error_failure if a property with that name doesn't * already exist. ...
...oid set(in string prop, in nsisupports value); /** * returns true if the property with the given name exists. */ boolean has(in string prop); /** * undefines a property. * @return ns_error_failure if a property with that name doesn't * already exist. */ void undefine(in string prop); /** * returns an array of the
keys. ...
...And 2 more matches
nsIAccessibleRetrieval
accessible/public/nsiaccessibleretrieval.idlscriptable an interface for in-process accessibility clients wishing to get an nsiaccessible or nsiaccessnode for a given dom node. ...
...essible getaccessibleinshell( in nsidomnode anode, in nsipresshell apresshell ); parameters anode the dom node to get an accessible for. apresshell the presentation shell which contains layout info for the dom node. return value the nsiaccessible for the given dom node. getaccessibleinweakshell() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) return an nsiaccessible for a dom node in the given weak shell. create a new accessible of the appropriate type if necessary, or use one from the accessibility cache if it already exists. nsiaccessible getaccessibleinweakshell( in nsidomnode anode, in nsiweakreference apresshell ); parameters anode the dom node to get an accessible for. apresshell the presentat...
...le getaccessibleinweakshell( in nsidomnode anode, in nsiweakreference apresshell ); parameters anode the dom node to get an accessible for. apresshell the presentation shell which contains layout info for the dom node. return value the nsiaccessible for the given dom node. getaccessibleinwindow() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) return an nsiaccessible for a dom node in present shell for this dom window. create a new accessible of the appropriate type if necessary, or use one from the accessibility cache if it already exists. nsiaccessible getaccessibleinwindow( in nsidomnode anode, in nsidomwindow adomwin ); parameters anode the dom node to get an accessible for. adomwin the dom windo...
...And 2 more matches
nsIApplicationCacheService
netwerk/base/public/nsiapplicationcacheservice.idlscriptable this interface manages the set of application cache groups that manage offline resources for web applications. ...
.../nsiapplicationcacheservice.idlscriptable this interface manages the set of application cache groups that manage offline resources for web applications. ...
...ges the set of application cache groups that manage offline resources for web applications. ...
...And 2 more matches
nsICRLManager
m: nsisupports last changed in gecko 1.7 method overview wstring computenextautoupdatetime(in nsicrlinfo info, in unsigned long autoupdatetype, in double noofdays); void deletecrl(in unsigned long crlindex); nsiarray getcrls(); void importcrl([array, size_is(length)] in octet data, in unsigned long length, in nsiuri uri, in unsigned long type, in boolean dosilentdownload, in wstring crl
key); void reschedulecrlautoupdate(); boolean updatecrlfromurl(in wstring url, in wstring
key); constants constant value description type_autoupdate_time_based 1 type_autoupdate_freq_based 2 methods computenextautoupdatetime() wstring computenextautoupdatetime( in nsicrlinfo info, in unsigned long autoupdatetype, in double noofdays ); parameters info autoupdatetype noof...
...void deletecrl( in unsigned long crlindex ); parameters crlindex getcrls() get a list of crl entries in the db. nsiarray getcrls(); parameters none. return value importcrl() import a crl into the certificate database. ...
...ex getcrls() get a list of crl entries in the db. nsiarray getcrls(); parameters none. return value importcrl() import a crl into the certificate database. ...
...And 2 more matches
nsICacheEntryDescriptor
netwerk/cache/nsicacheentrydescriptor.idlscriptable this interface provides a cache entry descriptor. ...
... netwerk/cache/nsicacheentrydescriptor.idlscriptable this interface provides a cache entry descriptor. ...
...oid close(); void doom(); void doomandfailpendingrequests(in nsresult status); string getmetadataelement(in string
key); void markvalid(); nsiinputstream openinputstream(in unsigned long offset); nsioutputstream openoutputstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadataelement(in string
key, in string value); void visitmetadata(in nsicachemetadatavisitor visitor); attributes attribute type description accessgranted nscacheaccessmode get the access granted to this descriptor. see nsicache for the definitions of the access modes and a thorough description of their corresponding meanings. read only. cacheelement nsisupports get or set the cache data element. this will fail ...
...And 2 more matches
nsICachingChannel
support for "pinning" cached data in the cache (for printing and save-as). support for uniquely identifying cached data in cases when the url is insufficient. for example a http form submission. ...
... is valid for as long as a reference to the cache token is held. this may return an error if cacheasfile is false. read only. cacheforofflineuse boolean specifies whether or not the data should be placed in the offline cache, in addition to normal memory/disk caching. this may fail if the offline cache is not present. the value of this attribute should be set before opening the channel. ...
...is false. read only. cacheforofflineuse boolean specifies whether or not the data should be placed in the offline cache, in addition to normal memory/disk caching. this may fail if the offline cache is not present. the value of this attribute should be set before opening the channel. cache
key nsisupports uniquely identifies the data in the cache for this channel. holding a reference to this
key does not prevent the cached data from being removed. a cache
key retrieved from a particular instance of nsicachingchannel could be set on another instance of nsicachingchannel provided the underlying implementations are compatible and provided the new channel instance was created with the same uri. the implementation of nsicachingchannel would be expected to use the cache entry identified by the...
...And 2 more matches
nsIContentViewer
docshell/base/nsicontentviewer.idlscriptable handles displaying content. inherits from: nsisupports last changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7) implemented by: ?????????????????????????????????????. to create an instance, use: var contentviewer = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsicontentviewer); method overview void clearhistoryentry(); void close(in nsishentry historyentry); void destroy(); [noscript,notxpcom,nostdcall] nsiviewptr findcontainerview(); void getbounds(in nsintrectref abounds); native code only! [noscript,notxpcom] nsidocumentptr getdocument(); void hide(); void init...
... boolean obsolete since gecko 2.0 historyentry nsishentry get the history entry that this viewer will save itself into when destroyed. can return null. read only. istabmodalpromptallowed boolean read only. prescontext nsprescontextptr read only. native code only! note: prior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7), this attribute was part of nsidocumentviewer. presshell nsipresshellptr read only. native code only! note: prior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7), this attribute was part of nsidocumentviewer. previousviewer nsicontentviewer the previous content viewer, which has been closed but not destroyed. native code o...
...cument the content viewer will set the contentviewer property on the history entry, and release its reference (ownership reversal). hide() will be called, and no further destruction will happen. destroy() void destroy(); parameters none. findcontainerview() finds the view to use as the container view for makewindow. note: prior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7), this attribute was part of nsidocumentviewer. [noscript,notxpcom,nostdcall] nsiviewptr findcontainerview(); parameters none. return value the container view, or null if this content viewer is the root of a view manager hierarchy. note: if this container is the root of a view manager hierarchy (that is, this method returns null), and mparentwidget is also null, then this document should n...
...And 2 more matches
nsIDOMMouseScrollEvent
dom/interfaces/events/nsidommousescrollevent.idlscriptable this interface represents a mouse scroll wheel event. 1.0 66 introduced gecko 1.9.1 inherits from: nsidommouseevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) gecko 1.9.2 note prior to gecko 1.9.2, this inherited from nsisupports instead of from nsidommouseevent. ...
...read only. ...
... 1.9.2 note prior to gecko 1.9.2, this inherited from nsisupports instead of from nsidommouseevent. method overview void initmousescrollevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrl
keyarg, in boolean alt
keyarg, in boolean shift
keyarg, in boolean meta
keyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in long axis); attributes attribute type description axis long indicates which mouse wheel axis changed; this will be either horizontal_axis or vertical_axis. read only. constants constant ...
...And 2 more matches
nsIDOMStorage2
local storage in the dom. items stored in local storage may only be accessed by the same origin that created the items in the first place. a dom window's local storage object can be retrieved from the window's localstorage attribute. dom/public/idl/storage/nsidomstorage2.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) inherits from: nsisupports method overview void clear(); domstring getitem(in domstring
key); domstring
key(in unsigned long index); void removeitem(in domstring
key); void setitem(in domstring
key, in domstring data); attributes attribute type description length unsigned long the number of
keys stored in local storage. methods clear() clears the contents of this sto...
...
key); void setitem(in domstring
key, in domstring data); attributes attribute type description length unsigned long the number of
keys stored in local storage. methods clear() clears the contents of this storage context; this removes all values bound to the domain or origin. void clear(); parameters none. getitem() returns from local storage the data corresponding to the specified
key. domstring getitem( in domstring
key ); parameters
key the
key for which data should be returned. return value a string containing the data corresponding to the specified
key, or null if no data exists for the given
key.
key() returns the
key for the item stored at the specified index in the data store. ...
...getitem() returns from local storage the data corresponding to the specified
key. domstring getitem( in domstring
key ); parameters
key the
key for which data should be returned. return value a string containing the data corresponding to the specified
key, or null if no data exists for the given
key.
key() returns the
key for the item stored at the specified index in the data store. domstring
key( in unsigned long index ); parameters index the index for which the corresponding
key should be returned. return value a string containing the requested
key. exceptions thrown index_size_errthere is no
key at the specified index. removeitem() given a
key, removes the corresponding entry from local storage. ...
...And 2 more matches
nsIFocusManager
dom/interfaces/base/nsifocusmanager.idlscriptable please add a summary to this article. ...
...ow. instead, just update the focus within that window and leave the application focus as is. this flag will have no effect if a child window is focused and an attempt is made to adjust the focus in an ancestor, as the frame must be switched in this case. flag_bymouse 0x1000 focus is changing due to a mouse operation, for instance the mouse was clicked on an element. ...
...at window and leave the application focus as is. this flag will have no effect if a child window is focused and an attempt is made to adjust the focus in an ancestor, as the frame must be switched in this case. flag_bymouse 0x1000 focus is changing due to a mouse operation, for instance the mouse was clicked on an element. flag_by
key 0x2000 focus is changing due to a
key operation, for instance pressing the tab
key. this flag would normally be passed when movefocus_forward or movefocus_backward is used. flag_bymovefocus 0x4000 focus is changing due to a call to movefocus(). this flag will be implied when movefocus() is called except when one of the other mechanisms (mouse or
key) is specified, or when the type is movefocus_root or movefocus_caret. ...
...And 2 more matches
nsINavHistoryResultViewer
gecko 2.0 and replaced with the nsinavhistoryresultobserver interface, which is similar but allows multiple clients to observe the result at once. 1.0 66 introduced gecko 1.9 obsolete gecko 2.0 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. note: most methods in this interface were renamed in gecko 1.9.2, and others have slightly different parameter lists. method overview void containerclosed(in nsinavhistorycontainerresultnode acontainernode); void con...
... void nodedateaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodelastaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount); void nodeiconchanged(in nsinavhistoryresultnode anode); void node
keywordchanged(in nsinavhistoryresultnode anode, in autf8string anew
keyword); void nodemoved(in nsinavhistoryresultnode anode, in nsinavhistorycontainerresultnode aoldparent, in unsigned long aoldindex, in nsinavhistorycontainerresultnode anewparent, in unsigned long anewindex); void nodetitlechanged(in nsinavhistoryresultnode anode, in autf8string anewtitle); void nodere...
...notation on a node has changed. this is called when the annotation is changed, set, or unset. void nodeannotationchanged( in nsinavhistoryresultnode anode, in autf8string aannoname ); parameters anode the node whose title has changed. aannoname the name of the annotation that hanged. nodedateaddedchanged() called right after the date added property of a node has changed. ...
...And 2 more matches
nsIPluginHost
dom/plugins/base/nsipluginhost.idlscriptable please add a summary to this article. ...
...count unsigned long read only. native code only! methods native code only!createtempfiletopost to create temp file with content len header in, it will use by http post. nsifile createtempfiletopost( in string apostdataurl ); parameters apostdataurl return value native code only!createtmpfiletopost obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. to create temp file with content len header in, it will use by http post. void createtmpfiletopost( in string apostdataurl, out string atmpfilename ); parameters apostdataurl atmpfilename native code only!deletepluginna...
...12.112.112.112".... which proxy/socks to use is determined by the plugin. void findproxyforurl( in string aurl, out string aresult ); parameters aurl aresult native code only!getplugin nsiplugin getplugin( in string amimetype ); parameters amimetype return value getplugincount() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) void getplugincount( out unsigned long aplugincount ); parameters aplugincount native code only!getpluginfactory obsolete since gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. nsiplugin getpluginfactory( ...
...And 2 more matches
nsISHEntry
docshell/shistory/public/nsishentry.idlscriptable each document or subframe in session history will have a nsishentry associated with it which will hold all information required to recreate the document from history. inherits from: nsihistoryentry last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) implemented by: @mozilla.org/browser/session-history-entry;1. to create an instance, use: var shentry = components.classes["@mozilla.org/browser/session-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview void addchildshell(in nsidocshelltreeitem shell); nsidocshelltreeitem childshellat(in long index); void clearchildshells(); nsishentry clone(); void create(in nsiuri uri, in astring title, ...
... nsdocshelleditordataptr forgeteditordata(); violates the xpcom interface guidelines nsicontentviewer getanycontentviewer(out nsishentry ownerentry); void getscrollposition(out long x, out long y); void getviewerbounds(in nsintrect bounds); native code only! ...
... contenttype acstring indicates the content-type of the document that this is a session history entry for. contentviewer nsicontentviewer content viewer, for fast restoration of presentation. docidentifier unsigned long long an integer that should be the same for two entries attached to the same docshell if and only if the two entries are...
...And 2 more matches
nsIURIFixup
docshell/base/nsiurifixup.idlscriptable interface implemented by objects capable of fixing up strings into uris. ...
...d 9.0 / seamon
key 2.6) implemented by: @mozilla.org/docshell/urifixup;1 as a service: var urifixup = components.classes["@mozilla.org/docshell/urifixup;1"] .createinstance(components.interfaces.nsiurifixup); method overview nsiuri createexposableuri(in nsiuri auri); nsiuri createfixupuri(in autf8string auritext, in unsigned long afixupflags); nsiuri
keywordtouri(in autf8string a
keyword); nsiurifixupinfo getfixupuriinfo(in autf8string auritext, in unsigned long afixupflags); constants constant value description fixup_flag_none 0 no fixup flags. fixup_flag_allow_
keyword_lookup 1 allow the fixup to use a
keyword lookup service to complete the uri. the fixup object implementer should hon...
... nsiurifixupinfo getfixupuriinfo(in autf8string auritext, in unsigned long afixupflags); constants constant value description fixup_flag_none 0 no fixup flags. fixup_flag_allow_
keyword_lookup 1 allow the fixup to use a
keyword lookup service to complete the uri. the fixup object implementer should honour this flag and only perform any lengthy
keyword (or search) operation if it is set. fixup_flags_make_alternate_uri 2 tell the fixup to make an alternate uri from the input uri, for example to turn foo into www.foo.com. fixup_flag_use_utf8 4 use utf-8 to encode the uri instead of the platform character set. fixup_flag_fix_scheme_typos 8 fix common scheme typos. methods createexposableuri...
...And 2 more matches
Using nsIDirectoryService
jects/xpcom/nsdirectoryservice.html general nsdirectoryservice information: nsdirectoryservice implements the nsiproperties interface. this implementation will allow you to get(), set(), define(), and undefine() nsifile. getting a location: most developers need to find where a file or directory is located. with nsdirectoryservice, there are two steps involved. first, you must know what the string
key (or property) is that refers to this locations. header files containing known
keys are listed in the known locations section of this document. bear in mind that this list is not static. components can add and remove locations at their will. second, you must acquire the implementation and call get() passing the known string
key. in the example below, prop is a string that references your requested...
...the persistant flag allows you to specify if you want the nsdirectoryservice to cache this value. in most cases you would set this to be true. the interfaces for this can be found here. known locations the nsiproperties strings for currently defined locations can be found in: nsdirectoryservicedefs.h nsappdirectoryservicedefs.h nsxulappapi.h content formerly at...
... was a problem for embedding applications. since it was a component and was loaded implicitly by many other components, it was difficult to customize. customizing the locations is important if, for example, your application already has a profile directory or other resource directories. you may wish that you could have mozilla use these locations rather than requiring the same disk layout as seamon
key. in order to change these locations using nsifilelocator and still be able to use the same components directory as an existing mozilla installation, you had to make a component with the same id as nsifilelocator and then, after auto-registering components, manually register your own and replace the existing one -- all in all, a big pain. the new method the new method uses nsidirectoryservice to l...
...And 2 more matches
customDBHeaders Preference
atest releases, the line should look like: // space-delimited list in the latest code! ...
...ascript code used to populated columns with data from a message header, so i'm just including my file for reference. ...
... to populated columns with data from a message header, so i'm just including my file for reference. ...
...And 2 more matches
Using the Multiple Accounts API
example, the list of identities would be as follows: alec flett <alecf@mywork.com>) alec flett <alecf@myisp.com>) alec flett <alecfnospam@myisp.com>) relevant api calls: nsimsgaccount.identities nsimsgaccountmanager.allservers: a list of all servers across all accounts storage the accounts are stored in the preferences. the accounts, identities, and servers are all linked via
keys.
keys are simply internal strings that uniquely identify each account, identity and server. the
keys are also used to decide the name of each of the preferences that hold the object's data. as an example, the above structure would be represented in your preferences like this: user_pref("mail.accountmanager.accounts", "account1,account2,account3"); user_pref("mail.account.account1.server", "ser...
...", "pop.myisp.com"); user_pref("mail.server.server3.hostname", "news.myisp.com"); user_pref("mail.server.server4.hostname", "news.mozilla.org"); user_pref("mail.identity.id1.useremail", "alecf@mywork.com"); user_pref("mail.identity.id2.useremail", "alecf@myisp.com"); user_pref("mail.identity.id3.useremail", "alecfnospam@myisp.com"); there is a lot of information missing here of course. the
keys used here are the account1, server1, id1, etc. these
keys are listed in the value of some of these preferences, such as "mail.accountmanager.accounts", and are used to construct the preference names, such as "mail.account.account1.server". this the way accounts know which server and which identities they contain. creating new accounts it is possible to create and modify accounts through the a...
...identity.email="fred@myisp.com"; var server = accountmanager.createincomingserver("pop3"); server.username = "fred"; server.hostname = "pop.myisp.com"; var account = accountmanager.createaccount(); account.incomingserver = server; account.addidentity(identity); that's it! now you have a working account, identity, and server. it is possible, through some tricks with server and identity
keys, to share servers and identities between accounts. you can do this by referring to the same identity or server
key in the preferences, or with clever calls to the account manager. (left as an exercise for the reader.)this will work but it is not supported. the ui will act slighty strange when you share information between accounts. the current plans prevent sharing of information between account...
...And 2 more matches
Accessibility Inspector - Firefox Developer Tools
ding <a> element's href. domnode — the type of dom node that the item in the accessibility tree represents. you can click on the "target" icon that comes after it to select the node in the page inspector. hovering over the "target" icon highlights the dom node in the page content. description — any further description provided on the element, usually by the content of a title attribute.
keyboardshortcut — any
keyboard shortcut that is available to activate the element, as specified in an access
key attribute. note that this works correctly as of firefox 62 (bug 1467381). childcount — the number of child items the current item has in the accessibility tree hierarchy. indexinparent — an index value indicating what number child the item is, inside its parent. if the item is the ...
...nt, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings). for a full list of possible attributes, see gecko object attributes. note: the exposed information is the same across all platforms — the inspector exposes gecko's accessibility tree, rather than information from the platform accessibility layer. ...
...rmation, such as draggable and level (e.g., what heading level is it, in the case of headings). for a full list of possible attributes, see gecko object attributes. note: the exposed information is the same across all platforms — the inspector exposes gecko's accessibility tree, rather than information from the platform accessibility layer.
keyboard controls the accessibility tab is fully
keyboard-accessible: you can tab between the turn off accessibility features button and left and right panels. when one of the panels is focused, you can move the focus up and down items using the up and down arrow
keys, and use the left and right arrow
keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree). print accessibility tree to json you...
...And 2 more matches
Debugger.Script - Firefox Developer Tools
ached to the element by other javascript code. code appearing in a javascript: url. the debugger interface constructs debugger.script objects as scripts of debuggee code are uncovered by the debugger: via the onnewscript handler method; via debugger.frame’s script properties; via the functionscript method of debugger.object instances; and so on. for a given debugger instance, spidermon
key constructs exactly one debugger.script instance for each underlying script object; debugger code can add its own properties to a script object and expect to find them later, use == to decide whether two expressions refer to the same script, and so on. (if more than one debugger instance is debugging the same code, each debugger gets a separate debugger.script instance for a given script. this al...
... gets a separate debugger.script instance for a given script. this allows the code using each debugger instance to place whatever properties it likes on its debugger.script instances, without worrying about interfering with other debuggers.) a debugger.script instance is a strong reference to a jsscript object; it protects the script it refers to from being garbage collected. note that spidermon
key may use the same debugger.script instances for equivalent functions or evaluated code—that is, scripts representing the same source code, at the same position in the same source file, evaluated in the same lexical environment. debugger.script for webassembly for debugger.script instances referring to a block of webassembly code, they are distinguished by their format property being "wasm". c...
... for debugger.script instances referring to a block of webassembly code, they are distinguished by their format property being "wasm". currently only entire modules evaluated via new webassembly.module are represented. debugger.script objects for webassembly are uncovered via onnewscript when a new webassembly module is instantiated and via the findscripts method on debugger instances. spidermon
key constructs exactly one debugger.script for each underlying webassembly module per debugger instance. a debugger.script instance is a strong reference to the underlying webassembly module; it protects the module it refers to from being garbage collected. please note at the time of this writing, support for webassembly is very preliminary. many properties and methods below throw. convention for...
...And 2 more matches
DevTools API - Firefox Developer Tools
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 toolpanel for this tool. parameters: window {window} - the window object for frame the tool is being built into. toolbox {toolbox} - the toolbox the tool is being built for. return value: a toolpanel for the tool. on
key(panel, toolbox) optional. a method that is called when the
keyboard shortcut for the tool is activated while 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 optio...
... highlightedicon string, optional. an url for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). default: {icon} icononly boolean, optional. if true, the label won't be shown in the tool's tab. default: false inverticonforlighttheme boolean, optional. if true the colors of the icon will be inverted for the light theme. default: false
key string, optional. the
key used for
keyboard shortcut. either
key or
keycode value. modifiers string, optional. modifiers for the
keyboard shortcut. preventclosingon
key boolean, optional. if true the tool won't close if its
keybinding is pressed while it is active. default: false inmenu boolean, optional. if true the tool will be shown in the developer menu. default: false ...
... example here's a minimal definition for a tool. ...
...And 2 more matches
AuthenticatorResponse - Web APIs
interfaces based on authenticatorresponse below is a list of interfaces based on the authenticatorresponse interface. ...
... interfaces based on authenticatorresponse below is a list of interfaces based on the authenticatorresponse interface. ...
...tionresponse properties authenticatorresponse.clientdatajson a json string in an arraybuffer, representing the client data that was passed to credentialscontainer.create() or credentialscontainer.get(). methods none. ...
...And 2 more matches
CSSRule - Web APIs
{ prop1: val1; prop2: val2; } cssrule.import_rule 3 cssimportrule an @import rule. ...
...; } cssrule.import_rule 3 cssimportrule an @import rule. ...
... cssimportrule an @import rule. ...
...And 2 more matches
Event.preventDefault() - Web APIs
nowadays, you should usually use native html form validation instead. html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </fo...
...d from reaching the input field with preventdefault(). nowadays, you should usually use native html form validation instead. ...
... <form> <input type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid
key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job. ...
...And 2 more matches
HTMLInputElement - Web APIs
to submit the form. this overrides the method attribute of the parent form. formnovalidate boolean: returns / sets the element's formnovalidate attribute, indicating that the form is not to be validated when it is submitted. this overrides the novalidate attribute of the parent form. formtarget string: returns / sets the element's formtarget attribute, containing a name or
keyword indicating where to display the response that is received after submitting the form. this overrides the target attribute of the parent form. properties that apply to any type of input element that is not hidden name string: returns / sets the element's name attribute, containing a name that identifies the element when submitting the form. type string: returns /...
...t is an integer number of characters. applies only when type is set to text, search, tel, url, email, or password; otherwise it is ignored. properties not yet categorized defaultvalue string: returns / sets the default value as originally specified in the html that created this object. dirname string: returns / sets the directionality of the element. access
key string: returns a string containing a single character that switches input focus to the control when pressed. list read only htmlelement object: returns the element pointed by the list attribute. the property may be null if no html element found in the same tree. multiple boolean: returns / sets the element's multiple attribute, indicating whether more than one value i...
...ber double: returns the value of the element, interpreted as one of the following, in order: a time value a number nan if conversion is impossible autocapitalize string: defines the capitalization behavior for user input. valid values are none, off, characters, words, or sentences. inputmode provides a hint to browsers as to the type of virtual
keyboard configuration to use when editing this element or its contents. htmlinputelement.align string: represents the alignment of the element. use css instead. htmlinputelement.usemap string: represents a client-side image map. methods blur() removes focus from the input element;
keystrokes will subsequently go nowhere. click() simulates a click on the inp...
...And 2 more matches
HTMLMediaElement.textTracks - Web APIs
here we print all the properties of each english track to the console. var tracks = document.querys...
... here we print all the properties of each english track to the console. var tracks = document.queryselector('video').texttracks; for (...
... here we print all the properties of each english track to the console. var tracks = document.queryselector('video').texttracks; for (var i = 0, l = tracks.length; i < l; i++) { ...
...And 2 more matches
HTMLMediaElement - Web APIs
error. htmlmediaelement.loop a boolean that reflects the loop html attribute, which indicates whether the media element should start over when it reaches the end. htmlmediaelement.mediagroup a domstring that reflects the mediagroup html attribute, which indicates the name of the group of elements it belongs to. a group of media elements shares a common mediacontroller. htmlmediaelement.media
keys read only returns a media
keys object or null. media
keys is a set of
keys that an associated htmlmediaelement can use for decryption of media data during playback. htmlmediaelement.mozaudiocaptured read only returns a boolean. related to audio stream capture. htmlmediaelement.mozfragmentend is a double that provides access to the fragment end time if the media element has a fragment ...
...list of texttrack objects contained in the element. htmlmediaelement.videotracks read only returns the list of videotrack objects contained in the element. htmlmediaelement.volume is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest). event handlers htmlmediaelement.onencrypted sets the eventhandler called when the media is encrypted. htmlmediaelement.onwaitingfor
key sets the eventhandler called when playback is blocked while waiting for an encryption
key. obsolete attributes these attributes are obsolete and should not be used, even if a browser still supports them. htmlmediaelement.initialtime read only returns a double that indicates the initial playback position in seconds. htmlmediaelement.mozchannels read only returns a double repres...
...to the beginning and selects the best available source from the sources provided using the src attribute or the <source> element. htmlmediaelement.mozcapturestream() [enter description] htmlmediaelement.mozcapturestreamuntilended() [enter description] htmlmediaelement.mozgetmetadata() returns object, which contains properties that represent metadata from the playing media resource as {
key: value} pairs. a separate copy of the data is returned each time the method is called. this method must be called after the loadedmetadata event fires. htmlmediaelement.pause() pauses the media playback. htmlmediaelement.play() begins playback of the media. htmlmediaelement.seektonextframe() seeks to the next frame in the media. this non-standard, experimental method makes it possible t...
...And 2 more matches
IDBFactory - Web APIs
indow.indexeddb. you open — that is, create and access — and delete a database with this object, and not directly with idbfactory. note: this feature is available in web workers. methods idbfactory.open the current method to request opening a connection to a database. idbfactory.deletedatabase a method to request the deletion of a database. idbfactory.cmp a method that compares two
keys and returns a result indicating which one is greater in value. idbfactory.databases a method that returns a list of all available databases, including their names and versions. example in the following code snippet, we make a request to open a database, and include handlers for the success and error cases. for a full working example, see our to-do notifications app (view example live.) // ...
... prefixes of implementations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...tations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...And 2 more matches
IDBIndex.get() - Web APIs
the get() method of the idbindex interface returns an idbrequest object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given
key or the first corresponding value, if
key is set to an idb
keyrange. if a value is found, then a structured clone of it is created and set as the result of the request object: this returns the record the
key is associated with. note: this feature is available in web workers. syntax var request = myindex.get(
key); parameters
key optional a
key or idb
keyrange that identifies the record to be retrieved. if this value is null or missing, the browser will use an unbound
key range. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this metho...
... invalidstateerror the idbindex has been deleted or removed. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. ...
... invalidstateerror the idbindex has been deleted or removed. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. ...
...And 2 more matches
IDBObjectStore.count() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired. ...
... return value an idbrequest object on which subsequent events related to this operation are fired. ...
... return value an idbrequest object on which subsequent events related to this operation are fired. ...
...And 2 more matches
Node.setUserData() - Web APIs
ment and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations. the node.getuserdata and node.setuserdata methods are no longer available from web content. htmlelement.dataset or weakmap can be used instead. syntax var prevuserdata = somenode.setuserdata(user
key, userdata, handler); parameters user
key is used as the
key by which one may subsequently obtain the stored data. more than one
key can be set for a given node. handler is a callback which will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the handle method (part of the userdatahandler interfa...
...han one
key can be set for a given node. handler is a callback which will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the handle method (part of the userdatahandler interface). the handler will be passed five arguments: an operation type integer (e.g., 1 to indicate a clone operation), the user
key, the data on the node, the source node (null if being deleted), the destination node (the newly created node or null if none).if no handler is desired, one must specify null. userdata is the object to associate to user
key on somenode. if null, any previously registered object and userdatahandler associated to user
key on this node will be removed. example var d = document.implementation.create...
...ted), the destination node (the newly created node or null if none).if no handler is desired, one must specify null. userdata is the object to associate to user
key on somenode. if null, any previously registered object and userdatahandler associated to user
key on this node will be removed. ...
...And 2 more matches
Storage.removeItem() - Web APIs
return value undefined. example the following function creates three data items inside local storage, then removes the image data item. ...
... return value undefined. example the following function creates three data items inside local storage, then removes the image data item. ...
... return value undefined. example the following function creates three data items inside local storage, then removes the image data item. ...
...And 2 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
inealign, position, positionalign, text, size and align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in html using css. but the vttcue interface is within the webvtt provides the vast range of adjustment variables which can be used directly to alter the cue. ...
...g { "start", "center", "end" }; enum positionalignsetting { "line-left", "center", "line-right", "auto" }; enum alignsetting { "start", "center", "end", "left", "right" }; [constructor(double starttime, double endtime, domstring text)] interface vttcue : texttrackcue { attribute vttregion? ...
...there are several proper...
...And 2 more matches
ARIA: document role - Accessibility
available. because ats with reading mode default to that mode for all elements except for those with a widget or application role set, document role is only useful for focusable elements within a widget or application that should be read as static rich text. adding role="document" and tabindex="0" to the element containing the text within a widget enables the screen reader user to press the tab
key to place focus on the document element and read the text with the screen reader's reading cursor. assistive technologies should switch context back to document mode, possibly intercepting from controls rewired for the parent's dynamic context, re-enabling the standard input events, such as up or down arrow
keyboard events, to control the reading cursor. in contrast to the article role, the docu...
...es, states, and properties aria-expanded include with a value of true or false if the document element is collapsible, to indicate if the document is currently expanded or collapsed. other values include the default undefined which means the document is not collapsible. tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away.
keyboard interactions the element should be made focusable by setting the tabindex="0" attribute / value pair on it. this way, the user can tab to it, reading mode is invoked automatically, and the content can be read right away. required javascript features none, except as required by any attributes. for example, if the document is collapsible, then the state and the value of aria-expanded must b...
...nt can be read right away. required javascript features none, except as required by any attributes. for example, if the document is collapsible, then the state and the value of aria-expanded must be maintained. examples an example is gmail and the single conversation view. gmail is a web application. when in gmail, most user agent interactions are usurped by the application. ...
...And 2 more matches
font-stretch - CSS: Cascading Style Sheets
ltra-condensed as the most condensed. semi-expanded, expanded, extra-expanded, ultra-expanded specifies a more expanded font face than normal, with ultra-expanded as the most expanded. <percentage> a <percentage> value between 50% and 200% (inclusive). negative values are not allowed for this property. in earlier versions of the font-stretch specification, the property accepts only the nine
keyword values. css fonts level 4 extends the syntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower f...
...ntage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. ...
...ore like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. ...
...And 2 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
des, i have already touched on an important feature of grid layout: the support for different writing modes that is built into the specification. for this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so. logical and physical properties and values css is full of physical positioning
keywords – left and right, top and bottom. if we position an item using absolute positioning, we use these physical
keywords as offset values to push the item around. in the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="contain...
...sitioning, we use these physical
keywords as offset values to push the item around. in the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical
keywords in use, is when using text-align: right to align text to the right. there are also physical properties in css. we add margins, padding, and borders using these physical properties of margin-left, padding-left, and so on. we call these
keywords and properties physical because they relate to the screen you are looking at. left is always left, no matter what direction your text is running. th...
...very simple example of the problem with physical values and properties being used in css. they prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom. logical properties and values logical properties and values do not make an assumption about text direction. which is why in grid layout we use the
keyword start when aligning something to the start of the container. for me, working in english, start may well be on the left, however it doesn’t have to be, and the word start infers no physical location. block and inline once we begin dealing with logical, rather than physical properties, we stop seeing the world as left to right, and top to bottom. we need a new reference point, and this is w...
...And 2 more matches
align-self - CSS: Cascading Style Sheets
the cross axis. 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 property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
...lign-self: baseline; align-self: first baseline; align-self: last baseline; align-self: stretch; /* stretch 'auto'-sized items to fit the container */ /* overflow alignment */ align-self: safe center; align-self: unsafe center; /* global values */ align-self: inherit; align-self: initial; align-self: unset; values auto computes to the parent's align-items value. ...
...ch; /* stretch 'auto'-sized items to fit the container */ /* overflow alignment */ align-self: safe center; align-self: unsafe center; /* global values */ align-self: inherit; align-self: initial; align-self: unset; values auto computes to the parent's align-items value. ...
...And 2 more matches
animation-fill-mode - CSS: Cascading Style Sheets
n-fill-mode: both; /* multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none; values none the animation will not apply any styles to the target when it's not executing. the element will instead be displayed using any other css rules applied to it. this is the default value. ...
...imation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none; values none the animation will not apply any styles to the target when it's not executing. the element will instead be displayed using any other css rules applied to it. this is the default value. forwards the target will retain the computed values set by the last
keyframe encountered during execution. ...
...it's not executing. the element will instead be displayed using any other css rules applied to it. this is the default value. forwards the target will retain the computed values set by the last
keyframe encountered during execution. ...
...And 2 more matches
font-size - CSS: Cascading Style Sheets
the font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to sep...
...es */ font-size: 80%; /* global values */ font-size: inherit; font-size: initial; font-size: unset; the font-size property is specified in one of the following ways: as one of the absolute-size or relative-size
keywords as a <length> or a <percentage>, relative to the parent element's font size values xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large absolute-size
keywords, based on the user's default font size (which is medium). larger, smaller relative-size
keywords. the font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size
keywords above. <length> a positive <length> value. for most font-relative units (such as em and ex), the font size is relative to the parent element's fon...
...ed (such as rem), the font size is relative to the size of the font used by the <html> (root) element. <percentage> a positive <percentage> value, relative to the parent element's font size. note: to maximize accessibility, it is generally best to use values that are relative to the user's default font size. ...
...And 2 more matches
font-weight - CSS: Cascading Style Sheets
the font-weight css property sets the weight (or boldness) of the font. the weights available depend on the font-family that is currently set. 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. ...
... (or boldness) of the font. the weights available depend on the font-family that is currently set. 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. ...
...t. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ font-weight: normal; font-weight: bold; /*
keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* numeric
keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900; /* global values */ font-weight: inherit; font-weight: initial; font-weight: unset; the font-weight property is specified using any one of the values listed below. values normal normal font weight. s...
...And 2 more matches
font - CSS: Cascading Style Sheets
ng non-shorthand properties). though not directly settable by font, the longhands font-size-adjust and font-kerning are also reset to their initial values. constituent properties this property is a shorthand for the following css properties: font-family font-size font-stretch font-style font-variant font-weight line-height syntax the font property may be specified as either a single
keyword, which will select a system font, or as a shorthand for various font-related properties. if font is specified as a system
keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. if font is specified as a shorthand for several font-related properties, then: it must include values for: <font-size> <font-family> it may optionally include value...
... line-height must immediately follow font-size, preceded by "/", like this: "16px/3" font-family must be the last value specified. values <'font-style'> see the font-style css property. <'font-variant'> see the font-variant css property. <'font-weight'> see the font-weight css property. <'font-stretch'> see the font-stretch css property. <'font-size'> see the font-size c...
...on the system font used for captioned controls (e.g., buttons, drop-downs, etc.). icon the system font used to label icons. menu the system font used in menus (e.g., dropdown menus and menu lists). message-box the system font used in dialog boxes. small-caption the system font used for labeling small controls. status-bar the system font used in window status bars. prefixed system font
keywords browsers often implement several more, prefixed,
keywords: gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field. formal definition initial valueas each of the properties of the shorthand:font-style: normalfont-variant: normalfont-weight: normalfont-stretch: normalfont-size: mediumline-height: normal...
...And 2 more matches
grid-template-rows - CSS: Cascading Style Sheets
the grid-template-rows css property defines the line names and track sizing functions of the grid rows. 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. ...
...any rows will be implicitly generated and their size will be determined by the grid-auto-rows property. <length> is a non-negative length. <percentage> is a non-negative <percentage> value, relative to the block size of the grid container. if the size ...
... 100px; grid-template-rows: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-rows: inherit; grid-template-rows: initial; grid-template-rows: unset; this property may be specified as: either the
keyword value none or a <track-list> value or an <auto-track-list> value. values none is a
keyword meaning that there is no explicit grid. any rows will be implicitly generated and their size will be determined by the grid-auto-rows property. <length> is a non-negative length. <percentage> is a non-negative <percentage> value, relative to the block size of the grid container. if the size of the grid container depends on the size of its tracks, then the percentage must be treated as aut...
...And 2 more matches
place-items - CSS: Cascading Style Sheets
set, the first value is also used for it. 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. ...
...e-items: first baseline auto; place-items: last baseline normal; place-items: stretch auto; /* global values */ place-items: inherit; place-items: initial; place-items: unset; values auto the value used is the value of the justify-items property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto represents normal. ...
...ch auto; /* global values */ place-items: inherit; place-items: initial; place-items: unset; values auto the value used is the value of the justify-items property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto represents normal. normal the effect of this
keyword is dependent of the layout mode we are in: in block-level layouts, the
keyword is a synonym of start. ...
...And 2 more matches
place-self - CSS: Cascading Style Sheets
esent, the first value is also used for it. 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. ...
...o; place-self: flex-end normal; place-self: left auto; place-self: right normal; /* baseline alignment */ place-self: baseline normal; place-self: first baseline auto; place-self: last baseline normal; place-self: stretch auto; /* global values */ place-self: inherit; place-self: initial; place-self: unset; values auto computes to the parent's align-items value. ...
... alignment */ place-self: baseline normal; place-self: first baseline auto; place-self: last baseline normal; place-self: stretch auto; /* global values */ place-self: inherit; place-self: initial; place-self: unset; values auto computes to the parent's align-items value. ...
...And 2 more matches
Content categories - Developer guides
in text or embedded content. they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <
keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and text. a few other elements belong to this category, but only if a specific con...
...ecification and is at least partially supported by most browsers. phrasing content phrasing content defines the text and the mark-up it contains. runs of phrasing content make up paragraphs. elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <
keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters). a few other elements belong to this category, but only if a specific condition is fulfilled: <a>, if it c...
...nother mark-up language or namespace into the document. elements that belong to this category include: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>. interactive content interactive content includes elements that are specifically designed for user interaction. elements that belong to this category include: <a>, <button>, <details>, <embed>, <iframe>, <
keygen>, <label>, <select>, and <textarea>. some elements belong to this category only under specific conditions: <audio>, if the controls attribute is present <img>, if the usemap attribute is present <input>, if the type attribute is not in the hidden state <menu>, if the type attribute is in the toolbar state <object>, if the usemap attribute is present <video>, if the controls attribute ...
...And 2 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
pt of "color" into a digital form that a computer can use. this is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. as such, there are several ways you can describe color in css. for more detailed discussion of each of the color value types, see the reference for the css <color> unit. ...
... by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. as such, there are several ways you can describe color in css. for more detailed discussion of each of the color value types, see the reference for the css <color> unit. ...
...olors to mix together, or how bright to make the color. as such, there are several ways you can describe color in css. for more detailed discussion of each of the color value types, see the reference for the css <color> unit.
keywords a set of standard color names have been defined, letting you use these
keywords instead of numeric representations of colors if you choose to do so and there's a
keyword representing the exact color you want to use. ...
...And 2 more matches
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
as tested ith 3.2.5). 1. use your existing webm file to create one audio file and multiple video files. for example: the file in.video can be any container with at least one audio and one video stream that can be decoded by ffmpeg, create the audio using: ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm create each video variant. ...
...ne audio and one video stream that can be decoded by ffmpeg, create the audio using: ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm create each video variant. ...
...deo variant. ...
...And 2 more matches
<input type="tel"> - HTML: Hypertext Markup Language
. 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. despite the fact that inputs of type tel are functionally identical to standard text inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom
keypad optimized for entering phone numbers. using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient. note: browsers that don't support type tel fall back to being a standard text input. value a domstring representing a telephone number, or empty events change and input supported common at...
...ributes are available to telephone number input fields. as a general rule, you should avoid using them unless it can't be helped. attribute description autocorrect whether or not to allow autocorrect while editing this input field. safari only. mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return
key while editing the field; this is used to determine an appropriate label for that
key on a virtual
keyboard. firefox for android only. autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. permitted values are: on enable automatic correction of typos, as well as proce...
...he user is editing this field. permitted values are: on enable automatic correction of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return
key while editing the field. this information is used to decide what kind of label to use on the enter
key on the virtual
keyboard. note: this has been standardized as the global attribute enter
keyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using...
...And 2 more matches
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
uld be enabled unless the user's preferences indicate that another track is more appropriate. this may only be used on one track element per media element. kind how the text track is meant to be used. if omitted the default kind is subtitles. if the attribute contains an invalid value, it will use metadata (versions of chrome earlier than 52 treated an invalid value as subtitles). the following
keywords are allowed: subtitles subtitles provide translation of content that cannot be understood by the viewer. for example dialogue or text that is not english in an english language film. subtitles may contain additional content, usually extra background information. for example the text at the beginning of the star wars films, or the date, time, and location of a scene. ...
...</video> specifications specification status comment html living standardthe definition of 'track element' in that speci...
...</video> specifications specification status comment html living standardthe definition of 'track element' in that specification. living standard ...
...And 2 more matches
HTML elements reference - HTML: Hypertext Markup Language
is the generic container for flow content. it has no effect on the content or layout until styled using css. <dl> the html <dl> element represents a description list. the element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). common uses for this element are to implement a glossary or to display metadata (a list of
key-value pairs). <dt> the html <dt> element specifies a term in a description or definition list, and as such must be used inside a <dl> element. <figcaption> the html <figcaption> or figure caption element represents a caption or legend describing the rest of the contents of its parent <figure> element. <figure> the html <figure> (figure with optional capti...
...ml <em> element marks text that has stress emphasis. the <em> element can be nested, with each level of nesting indicating a greater degree of emphasis. <i> the html idiomatic text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. <kbd> the html
keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a
keyboard, voice input, or any other text entry device. <mark> the html mark text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context. <q> the html <q> ...
... <frameset> the html <frameset> element is used to contain <frame> elements. <image> the obsolete html image element (<image>) is an obsolete remnant of an ancient version of html lost in the mists of time; use the standard <img> element instead. <isindex> <isindex> was an obsolete html element that put a text field in a page for querying the document. ...
...And 2 more matches
Expressions and operators - JavaScript
in the array: var x = [0,1,2,3,4,5,6,7,8,9] var a = [x, x, x, x, x]; for (var i = 0, j = 9; i <= j; i++, j--) // ^ console.log('a[' + i + '][' + j + ']= ' + a[i][j]); unary operators a unary operation is an operation with only one operand. delete the delete operator deletes an object's property. the syntax is: delete object.property; delete object[property
key]; delete property; // legal only within a with statement where object is the name of an object, property is an existing property, and property
key is a string or symbol referring to an existing property. the fourth form is legal only within a with statement, to delete a property from an object, and also for properties of the global object. if the delete operator succeeds, it removes the proper...
...achieve that behavior, it is much better to just overwrite the element with the value undefined. to actually manipulate the array, use the various array methods such as splice. typeof the typeof operator is used in either of the following ways: typeof operand typeof (operand) the typeof operator returns a string indicating the type of the unevaluated operand. operand is the string, variable,
keyword, or object for which the type is to be returned. the parentheses are optional. suppose you define the following variables: var myfun = new function('5 + 2'); var shape = 'round'; var size = 1; var foo = ['apple', 'mango', 'orange']; var today = new date(); the typeof operator returns the following results for these variables: typeof myfun; // returns "function" typeof shape; ...
...e = 1; var foo = ['apple', 'mango', 'orange']; var today = new date(); the typeof operator returns the following results for these variables: typeof myfun; // returns "function" typeof shape; // returns "string" typeof size; // returns "number" typeof foo; // returns "object" typeof today; // returns "object" typeof doesntexist; // returns "undefined" for the
keywords true and null, the typeof operator returns the following results: typeof true; // returns "boolean" typeof null; // returns "object" for a number or string, the typeof operator returns the following results: typeof 62; // returns "number" typeof 'hello world'; // returns "string" for property values, the typeof operator returns the type of value the property contains: typeo...
...And 2 more matches
Grammar and types - JavaScript
ppercase) as well as "a" through "z" (lowercase). you can use most of iso 8859-1 or unicode letters such as å and ü in identifiers. (for more details, see this blog post.) you can also use the unicode escape sequences as characters in identifiers. some examples of legal names are number_hits, temp99, $credit, and _name. declaring variables you can declare a variable in two ways: with the
keyword var. for example, var x = 42. this syntax can be used to declare both local and global variables, depending on the execution context. with the
keyword const or let. for example, let y = 13. this syntax can be used to declare a block-scope local variable. (see variable scope below.) you can also simply assign a value to a variable for example, x = 42. this form creates an undeclared global ...
...ables using the window.variable syntax. consequently, you can access global variables declared in one window or frame from another window or frame by specifying the window or frame name. for example, if a variable called phonenumber is declared in a document, you can refer to this variable from an iframe as parent.phonenumber. constants you can create a read-only, named constant with the const
keyword. the syntax of a constant identifier is the same as any variable identifier: it must start with a letter, underscore, or dollar sign ($), and can contain alphabetic, numeric, or underscore characters. const pi = 3.14; a constant cannot change value through assignment or be re-declared while the script is running. it must be initialized to a value. the scope rules for constants are the sa...
...s any variable identifier: it must start with a letter, underscore, or dollar sign ($), and can contain alphabetic, numeric, or underscore characters. const pi = 3.14; a constant cannot change value through assignment or be re-declared while the script is running. it must be initialized to a value. the scope rules for constants are the same as those for let block-scope variables. if the const
keyword is omitted, the identifier is assumed to represent a variable. you cannot declare a constant with the same name as a function or variable in the same scope. for example: // this will cause an error function f() {}; const f = 5; // this will cause an error too function f() { const g = 5; var g; //statements } however, the properties of objects assigned to constants are not protecte...
...And 2 more matches
Inheritance and the prototype chain - JavaScript
when it comes to inheritance, javascript only has one construct: objects. each object has a private property which holds a link to another object called its prototype. that prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. ...
.... all functions have a special property named prototype. please note that the code below is free-standing (it is safe to assume there is no other javascript on the webpage other than the below code). for the best learning experience, it is highly recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below javascript code, and run it by pressing the enter/return
key. (the console is included in most web browser's developer tools. more information is available for firefox developer tools, chrome devtools, and edge devtools.) function dosomething(){} console.log( dosomething.prototype ); // it does not matter how you declare the function, a // function in javascript will always have a default // prototype property. // (ps: there is one exception that arro...
... 'use strict'; class polygon { constructor(height, width) { this.height = height; this.width = width; } } class square extends polygon { constructor(sidelength) { super(sidelength, sidelength); } get area() { return this.h...
...And 2 more matches
Map.prototype.forEach() - JavaScript
map optional the map being iterated (mymap in the above syntax box). ...
... map optional the map being iterated (mymap in the above syntax box). ...
...tored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax mymap.foreach(callback([value][,
key][,map])[, thisarg]) parameters callback function to execute for each entry of mymap. it takes the following arguments: value optional value of each iteration.
key optional
key of each iteration. map optional the map being iterated (mymap in the above syntax box). thisarg optional value to use as this when executing callback. return value undefined. description the foreach method executes the provided callback once for each
key of the map which actually exist. it is not invoked for
keys which have been deleted. however, it is executed for v...
...And 2 more matches
Object.fromEntries() - JavaScript
the object.fromentries() method transforms a list of
key-value pairs into an object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.fromentries(iterable); parameters iterable an iterable such as array or map or other objects implementing the iterable protocol. return value a new object whose properties are given by the entries of the iterable. description the object.fromentries() method takes a list of
key-value pairs and returns a new object whose properties are given by those entries. the iterable argument is expected to be an object that implements an @@iterator method, that returns an ...
... object.fromentries() performs the reverse of object.entries(). ...
... object.fromentries() performs the reverse of object.entries(). ...
...And 2 more matches
Symbol.for() - JavaScript
the symbol.for(
key) method searches for existing symbols in a runtime-wide symbol registry with the given
key and returns it if found. otherwise a new symbol gets created in the global symbol registry with this
key. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax symbol.for(
key); parameters
key string, required. the
key for the symbol (and also used for the description of the symbol). return value an existing symbol with the given
key if found; otherwise, a new symbol is created and returned. description in contrast to symbol(), the symbol.for() function creates a symbol available in a global symb...
...o used for the description of the symbol). return value an existing symbol with the given
key if found; otherwise, a new symbol is created and returned. description in contrast to symbol(), the symbol.for() function creates a symbol available in a global symbol registry list. symbol.for() does also not necessarily create a new symbol on every call, but checks first if a symbol with the given
key is already present in the registry. in that case, that symbol is returned. if no symbol with the given
key is found, symbol.for() will create a new global symbol. ...
... a symbol with the given
key is already present in the registry. in that case, that symbol is returned. if no symbol with the given
key is found, symbol.for() will create a new global symbol. global symbol registry the global symbol registry is a list with the following record structure and it is initialized empty: a record in the global symbol registry field name value [[
key]] a string
key used to identify a symbol. [[symbol]] a symbol that is stored globally. ...
...And 2 more matches
const - JavaScript
the value of a constant can't be changed through reassignment, and it can't be redeclared. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const name1 = value1 [, name2 = value2 [, ... [, namen = valuen]]]; namen the constant's name, which can be any legal identifier. valuen the constant's value. this can be any legal expression, including a function expression. ...
...er is ' + my_fav); // this gets hoisted into the global context and throws an error var my_fav = 20; } // my_fav is still 7 console.log('my favorite number is ' + my_fav); const needs to be initialized // throws an error // uncaught syntaxerror: missing initializer in const declaration const foo; const in objects and arrays const also works on objects and arrays. ...
...avorite number is ' + my_fav); const needs to be initialized // throws an error // uncaught syntaxerror: missing initializer in const declaration const foo; const in objects and arrays const also works on objects and arrays. const my_object = {'
key': 'value'}; // attempting to overwrite the object throws an error // uncaught typeerror: assignment to constant variable. ...
...And 2 more matches
end - SVG: Scalable Vector Graphics
event-value consists of an element id followed by a dot and one of the supported events for that element. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input,
keydown,
keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent . an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation end time is defined relative to the time that the repeat event is raised with the speci...
... qualified repeat event. the element animation end time is defined relative to the time that the repeat event is raised with the specified iteration value. a valid repeat value consists of an element id followed by a dot and the function repeat() with an integer value specifying the number of repetitions as parameter. an optional offset value as defined in <offset-value> can be appended. <access
key-value> this value defines an access
key that should trigger the end of the animation. the element animation will end when the user presses the specified
key. a valid access
key-value consists of the function access
key() with the character to be input as parameter. an optional offset value as defined in <offset-value> can be appended. <wallclock-sync-value> this value defines the animation end ...
...le">6s</text> <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" /> </svg> access
key example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="access
key(e)" dur="8s" rep...
...And 2 more matches
Understanding WebAssembly text format - WebAssembly
ction won’t do very much on its own — now we need to call it. how do we do that? like in an es2015 module, wasm functions must be explicitly exported by an export statement inside the module. like locals, functions are identified by an index by default, but for convenience, they can be named. let's start by doing this — first, we'll add a name preceded by a dollar sign, just after the func
keyword: (func $add … ) now we need to add an export declaration — this looks like so: (export "add" (func $add)) here, add is the name the function will be identified by in javascript whereas $add picks out which webassembly function inside the module is being exported. so our final module (for now) looks like this: (module (func $add (param $lhs i32) (param $rhs i32) (result i32) lo...
... to create an equivalent value using javascript, you'd use the webassembly.global() constructor: const global = new webassembly.global({value: "i32", mutable: true}, 0); webassembly memory the above example is a pretty terrible logging function: it only prints a single integer! what if...
... to create an equivalent value using javascript, you'd use the webassembly.global() constructor: const global = new webassembly.global({value: "i32", mutable: true}, 0); webassembly memory the above example is a pretty terrible logging function: it only prints a single integer! what if we wanted to log a text string? to deal...
...And 2 more matches
JavaScript Daemons Management - Archive of obsolete content
rsals = 2;alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" on
keypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" on
keyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>daemon.buildaround(…)<...
...ounhide.reversals = 2;alert('changed');">two reversals</button> <button onclick="ounhide.makeloop();alert('changed');">makeloop</button> <button onclick="ounhide.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="ounhide.close();">close</button> <button onclick="ounhide.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" on
keypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" on
keyup="if(isfinite(this.value)&&number(this.value)>0){ounhide.setrate(this.value);}" /></p> </body> </html> example #3: a safe (without setinterval) instantiation – new daemon.safe() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>new daemon.safe(&h...
...rsals = 2;alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" on
keypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" on
keyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #4: a practical and safe (without setinterval) instantiation – daemon.safe.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> ...
...ounhide.reversals = 2;alert('changed');">two reversals</button> <button onclick="ounhide.makeloop();alert('changed');">makeloop</button> <button onclick="ounhide.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="ounhide.close();">close</button> <button onclick="ounhide.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" on
keypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" on
keyup="if(isfinite(this.value)&&number(this.value)>0){ounhide.setrate(this.value);}" /></p> </body> </html> ...
Install Manifests - Archive of obsolete content
npacked, in gecko 2.0 and later the default is to not unpack. if an extension includes the following then it must request unpacking: binary xpcom components plugins search plugins dlls loaded with ctypes dictionaries window icons examples <description about="urn:mozilla:install-manifest"> <em:id>extension@mysite.com</em:id> <em:unpack>true</em:unpack> ... </description> update
key to ensure the security of update rdf data that is retrieved over plain http you must use a digital signature to verify the contents of the data. in order to do so you must include the public part of the cryptographic
key in an update
key entry in the install.rdf of the add-on. this can be generated using the mccoy tool. any line breaks and whitespace as part of this entry are ignored. <em:upd...
... to ensure the security of update rdf data that is retrieved over plain http you must use a digital signature to verify the contents of the data. in order to do so you must include the public part of the cryptographic
key in an update
key entry in the install.rdf of the add-on. this can be generated using the mccoy tool. any line breaks and whitespace as part of this entry are ignored. <em:update
key>migfma0gcsqgsib3dqebaquaa4gnadcbiqkbgqdk426erd/h3xtsjvab5+pjqbhj zc9edi5ocjs8r3fiobj9zhjk1txeae7jwqt9wumbwtefvws+fi9vwu8058n9chhd nyep6i4luuyjturnn7yw/igzyij2oksya32ruxayteqawqpt/j63wbixiecxmysf awb/zh4kapiy3vnrzqidaqab</em:update
key> updateurl a link to a custom update manifest file that specifies available updates to the add-on. the format is describe...
...n-secure update urls can be hijacked by a malicious update.rdf file, enabling malware to infiltrate the user's computer. alternatively, you could host your extension on amo and leave out the updateurl completely. this provides secure updates automatically. for security reasons, gecko 1.9 applications require that if you specify an updateurl, it must be an https url, or you must include an update
key. your server must send this file as text/rdf, text/xml or application/rdf+xml or the update checker may not work. the add-on manager will substitute the following values into this url in case you wish to generate the response rdf dynamically, such as using php or cgi: %req_version% the version of the request. currently 1 %item_id% the id of the add-on being updated ...
...n>. see extension dependencies for more details. glossary restricted access area a restricted access area is an install location that could be restricted on a restricted-access account, regardless of whether or not the location is restricted with the current user privileges (see nsiinstalllocation::restricted). currently, the ($appdir)/extensions folder and the registry install location under h
key_local_machine (see adding extensions using the windows registry for details) are restricted. the ($profile)/extensions and h
key_current_user install locations, on the other hand, are not restricted. ...
Tabbed browser - Archive of obsolete content
the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. xul: <menuitem oncommand="myextension.foo(event)"...
...the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. ...
...er.removeeventlistener("tabopen", exampletabadded, false); container.removeeventlistener("tabmove", exampletabmoved, false); container.removeeventlistener("tabclose", exampletabremoved, false); note: starting in gecko 1.9.1, there's an easy way to listen on progress events on all tabs. notification when a tab's attributes change requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamon
key 2.1) starting in gecko 2.0, you can detect when a tab's attributes change by listening for the tabattrmodified event. the attributes to which changes result in this event being sent are: label crop busy image selected function exampletabattrmodified(event) { var tab = event.target; // now you can check what's changed on the tab } // during initialization var container = gbrowser.t...
...you can detect when a tab becomes pinned or unpinned by watching for the tabpinned and tabunpinned events. function exampletabpinned(event) { var browser = gbrowser.getbrowserfortab(event.target); // brows...
CSS3 - Archive of obsolete content
t published working draft status. css modules status completed modules a few css modules already became a standard as a w3c recommendation. these should be no more changes. css color module level 3 recommendation since june 7th, 2011 adds the opacity property, and the hsl(), hsla(), rgba() and rgb() functions to create <color> values. it also defines the currentcolor
keyword as a valid color. the transparent color is now a real color (thanks to the support for the alpha channel) and is a now an alias for rgba(0,0,0,0.0). it deprecates the system-color
keywords that shouldn't be used in a production environment anymore. css namespaces module recommendation since september 29th, 2011 adds the support for the xml namesp...
...module working draft adds support for easy multi-column layouts using the css columns, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, break-after, break-before, and break-inside. css values and units module level 3 candidate recommendation makes initial and inherit
keywords usable on any css property. formally defines the css data types of css 2.1, that were implicitely defined by their grammar token and some textual precisions. adds: definition for new font-relative length units: rem and ch . definition for viewport-relative length units: vw, vh, vmax, and vmin . precision about the real size of the absolute length units, which a...
...current implementations; they should mainly define behavior in edge cases. css animations working draft allows the definition of animations effects by adding the css animation, animation-delay,animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, and animation-timing-function properties, as well as the @
keyframes at-rule. web animations working draft css text module level 3 working draft extends: the css text-transform property with the value full-width. the css text-align property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text. the css t...
... css scoping module level 1 working draft css inline layout working draft css images module level 4 working draft extends: the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images. the image-orientation property by adding the
keyword from-image, allowing to follow exif data stored into images to be considered. adds: the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images. the element() functional notation allowing the use of part of the page as image. the cross-fade() functional notation a...
Download Manager preferences - Archive of obsolete content
r.download.manager.flashcount indicates the number of times the appropriate user interface element should be "flashed" to get the user's attention when a download completes. default value is 2. browser.download.manager.focuswhenstarting a boolean value that indicates whether or not to focus the download manager window when a download begins. in firefox,thunderbird and seamon
key the default value is false. in other applications the default value is true. browser.download.manager.quitbehavior indicates what should happen to in-progress downloads if the application is quit while they're ongoing. 0 indicates that the downloads should be paused and resumed automatically the next time firefox is run; 1 indicates that the downloads should be paused but will not...
... browser.download.manager.retention indicates how long downloads are retained in the download manager's queue after the download is completed successfully. 0 indicates that the download should be removed upon completion; 1 indicates that completed and canceled downloads should be removed on quit; 2 indicates that downloads should never be removed automatically. in firefox and seamon
key the default value is 2. in thunderbird the default value is 1; if the preference is missing, the value 0 is used. browser.download.manager.scanwhendone a boolean value that indicates whether or not to perform virus scans after downloads are complete. on windows xp sp2 and windows vista, this value also indicates whether downloaded files trigger a security warning upon launch. ...
...or not to use the downloads window (true) or display download status in the status bar (false) in the browser window. default value is true. browser.download.usedownloaddir a boolean value that indicates whether or not the user's preference is to automatically save files into the download directory. if this value is false, the user is asked what to do. in thunderbird and seamon
key the default is false. in other applications the default is true. browser.helperapps.deletetempfileonexit a boolean value that indicates whether or not to delete the temporary file used by the download manager after the download is complete. on mac the default value is false. on other oses the default value is true if a preference is not set when the download manager...
...load.folderlist equals 2. browser.download.folderlist indicates the default folder to download a file to. 0 indicates the desktop; 1 indicates the systems default downloads location; 2 indicates a custom (see: browser.download.dir) folder. in firefox 3 and earlier, the default is 0 (except on windows vista, where it's toggled to 1 on initial launch). in firefox 3.5 and seamon
key, the default is 1 on all platforms. for thunderbird, the default is 0. see also nsidownloadmanager nsidownload nsidownloadmanagerui ...
Tamarin - Archive of obsolete content
tamarin is available under the mpl/gpl/lgpl tri-license. releases release tracking information on current, past, and upcoming releases of tamarin. ...
... tamarin is available under the mpl/gpl/lgpl tri-license. releases release tracking information on current, past, and upcoming releases of tamarin. ...
...be done to adapt source code to the changes. ...
...ource code to the changes. ...
Event Handlers - Archive of obsolete content
lt actions for a widget, this allows authors in the bound document to write events that potentially suppress the default actions taken by the xbl handlers. within an xbl inheritance chain, event handlers always fire first on the derived binding and then on the base binding in the chain. a derived handler then has a way of preventing the event from flowing to its base binding handlers. ...
... binding in the chain. a derived handler then has a way of preventing the event from flowing to its base binding handlers. mouse and
key handlers have certain additional properties that are supported by xbl. additional attributes can be used to impose a filter on the event handler. when a filter is imposed, additional conditions must be met before the event handler will fire. for both mouse and
key events, modifier
keys can be specified using the modifiers attribute. this attribute is a comma-separated list of modifier
keys that must be down at the time the
key or mouse event occurs in order for the handler to execute. examples of common
keys in the list are shift and control. for more details, see the xbl element reference for <handler>. in addition, mouse events can specify the button a...
...when set, the corresponding fields in the event object must match for the event to fire. ...
...when set, the corresponding fields in the event object must match for the event to fire. ...
Unix stub installer - Archive of obsolete content
copy the installer.ini and config.ini files over into the src2 directory. ...
...dist. these are eventually zipped with the directory structure preserved. read the top of the packages-unix file for it's simple syntax and semantics. add an <component>.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/seamon
key/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.
...ckager/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. ...
...the resulting stub and full installers will be delivered to "mozilla/installer/{stub,sea}". ...
Windows stub installer - Archive of obsolete content
(if you need to rebuild stub installer, got to /mozilla/xpinstall/wizard/windows/setup and type "nmake /f makefile.win") go to mozilla/xpinstall/wizard/windows/builder on the shell prompt type "perl build.pl". now you will find an installer *and* the xpcom.xpi and other debug xpis delivered to mozilla/dist/win32_d.obj/install. ...
... dist. these are eventually zipped with the directory structure preserved. read the top of the packages-win file for it's simple syntax and semantics. add an <component>.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/seamon
key/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 ...
...on", 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 first string in the substitution statement on each line. ...
...the resulting stub installer and packages will be delivered to "mozilla/dist/win32obj_d/installer". ...
Learn XPI Installer Scripting by Example - Archive of obsolete content
object in regular web page scripts, the install object does not need to be prefixed to the method. initializing the installation all installations must begin with initinstall(). the initinstall() method on the install object creates a new installation for the specified software and version. in the browser.xpi installation, this function appears at line 20: var err = initinstall("netscape seamon
key", "browser", "6.0.0.2000110807"); if you call a method on the install object before initinstall(), you will get an error. the initinstall method takes the following parameters: the display name of the package, the name of the package as it appears in the client registry, and the version, which can be expressed as a number or as an installversion object. in the example above, "netscape seamonke...
..., handles both the source file location and the target location. in the example above, all of the contents of the "bin" directory in the archive are queued for installation, and the target of that installation (when the installation is actually begun with a call to performinstall at the end), is the communicatorfolder directory defined at line 22 as "program." "program" is one of a short list of
keywords that can be used in place of full path names in methods such as addfile. "program" represents the directory where software itself is installed (e.g., c:\program files\ on win32 systems), as opposed to supporting directories like "components", "chrome", or "temporary" (see getfolder in the xpinstall api reference for a list of
keywords). registering the software registering software is some...
...logcomment api is used to write data to a log file that can then be reviewed when things don't go as planned. the install log is created in the product directory by default (where the browser executable is). if the installation doesn't have proper permission, the install log is written to the user's profile directory. respectively, these directories correspond to the "program" and "current user"
keywords for the getfolder method. extending the example what does all this mean to you? how can this information be adapted for your own installations? in this final section, we describe the application of the xpinstall technology described here in the creation and deployment of a very simple installation script and installation archive (xpi). say you have a simple executable and a readme file th...
... suffix of '.xpi'), the next step is to add an installation script to the xpi. minimally, the installation script must: call initinstall with the name and version of the executable (the version is not optional, though you may or may not use the version in subsequent installations or updates) find somewhere to put the installed files. in the example below, getfolder is used with the "program"
keyword to specify the browser's program directory as the target for installation. since i am using ns6 right now on a windows machine, that target directory is "c:\program files\netscape\netscape 6\". add files to the initialized installation using addfile. call performinstall to execute the installation. here is an example of small but complete installation script. var xpisrc = "cd_ripper.exe"...
findbar - Archive of obsolete content
as extensions. for example, the standard findbar in firefox 3.5 looks like this on the mac: you may attach a findbar to a particular browser element by either setting the findbar's browserid attribute to the id of the browser element before the findbar element is bound, or by setting the findbar's browser property to the browser element itself. ...
...mple, the standard findbar in firefox 3.5 looks like this on the mac: you may attach a findbar to a particular browser element by either setting the findbar's browserid attribute to the id of the browser element before the findbar element is bound, or by setting the findbar's browser property to the browser element itself. ...
...indbar in firefox 3.5 looks like this on the mac: you may attach a findbar to a particular browser element by either setting the findbar's browserid attribute to the id of the browser element before the findbar element is bound, or by setting the findbar's browser property to the browser element itself. attributes browserid, findnextaccess
key, findpreviousaccess
key, highlightaccess
key, matchcaseaccess
key properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached. this attribut...
...example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached. this attribute is only used when the findbar is constructed. you should use the browser property to get and set this value from a script. findnextaccess
key type: string the access
key for the "find next" toolbar button in the findbar. findpreviousaccess
key type: string the access
key for the "find previous" toolbar button in the findbar. highlightaccess
key type: string the access
key for the "highlight" toolbar button in the findbar. matchcaseaccess
key type: string the access
key for the "match case" checkbox in the findbar. ...
OpenClose - Archive of obsolete content
focused, and it is in the currently active tab. that means that a document in a background tab cannot open a menu or popup. closing menus menus will close automatically once the user has made a selection from the menu. when an menu item is selected, it fires a command event so that code may be used to perform an action. the user may cancel selecting a command from a menu by pressing the escape
key. this will close a single menu, but if this menu has a parent menu, the parent menu will remain open. a user may also cancel selecting from a menu by clicking outside the menu. in this case, not only will that menu close, but all parent menus will close as well. a menu may be closed by a script by setting the open property to false, the reverse of what would be done to open the menu. the open pr...
...s set to true, then the menu is open, otherwise the menu is closed. var open = somemenu.open; opening a popup for opening menupopups that use the menu tag, the button tag and the toolbarbutton tag, see opening menus above. popups attached using the popup attribute will be opened when the user clicks the mouse with the left mouse button. there isn't a means of replicating this action with the
keyboard, so you should always provide an alternate means of accessing the functionality of the menu. this can be done by either placing alternate commands elsewhere in the user interface, or by providing a
keyboard shortcut to open the menu. once the menu is open, the
keyboard can be used to navigate and select items as usual. popups attached using the context attribute are opened when the user per...
... usual. popups attached using the context attribute are opened when the user performs an action that attempts to open a context menu. this action will vary on each platform, but it general it involves clicking on the element with the right mouse button. on macintosh systems with only one mouse button, a context menu may be opened by either holding down the mouse button or by pressing the control
key and clicking the mouse button. on windows, the context menu can also be opened by pressing the menu
key on the
keyboard (the
key on many
keyboards next to control with a menu image) or by pressing shift+f10. for this reason, you should not assume that a user has used the mouse to open the context menu. the openpopup method regardless of the type of popup, you may wish to open the popup programa...
...up is opened at horizontal positon 100 and vertical position 200: popup.openpopupatscreen(100, 200, false); note that if the supplied coordinates would cause the popup to be partially or completely off screen, the popup will be moved such that it is fully visible, and may be resized if necessary. closing a popup with the hidepopup method a popup menu is closed by the user pressing the escape
key or by clicking somewhere outside the popup. for closing menupopups that use the menu tag, the button tag and the toolbarbutton tag, see closing menus above. to close a popup with a script, use the popup's hidepopup method. it takes no arguments. popup.hidepopup(); determining if a popup is open for menus, you can check the open property of the menu, button or toolbarbutton. if true, the men...
Panels - Archive of obsolete content
panel element is used to create panels. the panel will display whatever elements are placed as children of the panel element. for example, the following panel displays a textbox for entering a name. note that the panel is not placed in a separate file and is instead placed inside another window. <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example. when the button is pressed, the panel is opened. clicking outside the panel or pressing escape will close the panel. you can als...
...();"/> </panel> </toolbarbutton> in this example, the dosearch() function is called when the "search" button is pressed. this function retrieves the popup and calls the hidepopup method. naturally, this function would also include code to start the search operation. preventing panels from automatically closing a panel will be closed when a user clicks outside of the panel or when the escape
key is pressed. this is the normal way in which a user would cancel the operation. you may wish to also place a cancel or close button within the panel, especially if the panel is larger with a lot of controls within it. sometimes, however, you may wish to keep the panel open, even if the user clicks outside of it. this is useful when creating floating tool panels. to do this, set the noautohide att...
...el> because the panel can no longer be closed by clicking elsewhere, the panel should always provide a means to close the panel itself. in this example a cancel button has been added. for more information about these types of panels, see floating panels. focus in panels elements within panels may be focused with the mouse, and the currently focused element may be adjusted by pressing the tab
key. when a popup is opened, if an element in the main window is focused, that element is unfocused, and a blur event is fired at it. although no element within the popup panel is focused by default, the user may focus the first element within the panel by pressing the tab
key. if you want to set the focus to an element by default when a panel is opened, adjust the focus within a popupshown event han...
...m being refocused. normally, only the latter would be set if needed. this process of removing the focus when opening and closing a popup occurs after the popupshowing event or popuphiding event is fired, which means that if those events are cancelled, the focus is not adjusted. letting panels be dragged by grabbing the background requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4), you can use the backdrag attribute to create panels that the user can drag by clicking and dragging anywhere on their backgrounds. this is a simple, boolean attribute, so you can enable this feature like this: <panel backdrag="true"> ...
Sorting and filtering a custom tree view - Archive of obsolete content
backed or ones created with dom methods. for the sake of simplicity, strings are not localized and the data loaded is hard coded. because of bug 340478, this code will only work from privileged script. ...
...ly work from privileged script. ...
...tom tree view example" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label access
key="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" access
key="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator" sortdirection="ascending"/> <splitter class="tree-splitter"/> <treecol id="description" label="descripti...
...ku"}); data.push({name: "donatello", description: "does machines", weapon: "bo"}); data.push({name: "raphael", description: "cool, but rude", weapon: "sai"}); data.push({name: "splinter", description: "rat", weapon: "walking stick"}); data.push({name: "shredder", description: "armored man", weapon: "blades"}); data.push({name: "casey jones", description: "goalie masked man", weapon: "hoc
key stick"}); data.push({name: "april o'neil", description: "journalist", weapon: "none"}); } if (filtertext == "") { //show all of them table = data; } else { //filter out the ones we want to display table = []; data.foreach(function(element) { //we'll match on every property for (var i in element) { if (prepareforcomparison(element[i]).indexof(filtertext) != -1) { tab...
Install Scripts - Archive of obsolete content
ages, skins and plugins. when a new component is installed, the registry gets updated. the registry also stores the set of files and version information about the installed components. that way, it is easier to check if a version of your component is already present and only update it if necessary. the component registry works somewhat like the windows registry does. ...
...rks somewhat like the windows registry does. it consists of a hierarchy of
keys and values. you don't need to know much about it to create xul applications unless you are creating your own xpcom components. what you do need to know for an installation is that the registry stores a set of information about your application, such as the file list and versions. all of this information is stored in a
key (and within sub
keys) that you provide in the installation script (in step 1 mentioned above). this
key is structured as directory-like path of the following form: /author/package name replace the word author with your name and replace the package name with the name of the package that you are installing. for example: /xulplanet/find files /netscape/personal security manager the first example i...
...install initialization the install object has a function, initinstall() which can be used to initialize for the installation. it should be called at the beginning of your installation script. ...
...n be used to initialize for the installation. it should be called at the beginning of your installation script. the syntax of this function is as follows: initinstall( ''packagename'' , ''regpackage'' , ''version'' ); an example initinstall("find files","/xulplanet/find files","0.5.0.0"); the first argument is the name of the package in user-readable form. the second argument is the registry
key used to hold the package information as described earlier. the third argument is the version of the package being installed. next, we need to set the directory where the files will be installed. there are two ways to do this. the simple method assigns an install directory and installs all files into it. the second method allows you to assign a destination on a per-file (or directory) basi...
Simple Menu Bars - Archive of obsolete content
tributes plus some additional ones: id the unique identifier of the menu title button. label the text to appear on the menu, such as file or edit. disabled this boolean attribute determines whether the menu is disabled. although you can, there's rarely a need to disable an entire menu. this attribute can be set to either true or false. of course, the latter is the default. access
key this is the
key that the user can press to activate the menu item. this letter is typically shown underlined on the menu title. mozilla will look at the label attribute and add an underline character to the character specified here. for that reason, you should specify a character that exists in the text (although the
key will still work if it doesn't). the menu element is normally placed on ...
... menuitem element the menuitem element is much like the menu element and has some of the same attributes. id the unique identifier of the menu item. label the text to appear on the menu item, such as open or save. disabled this boolean attribute determines whether the menu item is disabled. this attribute can be set to either true or false where the latter is the default. ...
... the menuitem element is much like the menu element and has some of the same attributes. id the unique identifier of the menu item. label the text to appear on the menu item, such as open or save. disabled this boolean attribute determines whether the menu item is disabled. this attribute can be set to either true or false where the latter is the default. access
key this is the
key that the user can press to activate the menu item. this letter is typically shown underlined on the menu title. mozilla will look at the label attribute and add an underline character to the character specified here. for that reason, you should specify a character that exists in the text. acceltext this specifies the shortcut
key text to appear next to the menu command text. it does not asso...
...e user can press to activate the menu item. this letter is typically shown underlined on the menu title. mozilla will look at the label attribute and add an underline character to the character specified here. for that reason, you should specify a character that exists in the text. acceltext this specifies the shortcut
key text to appear next to the menu command text. it does not associate a
key action with the menuitem however. we'll look at how to do this later. menuseparator element the menuseparator has no special attributes. it just creates a horizontal bar between the menuitems next to it. next, we'll learn some more features of menus. « previousnext » ...
XUL accessibility tool - Archive of obsolete content
ability the xul accessibility tool can currently be obtained from [http://www.xulplanet.com/aaron/files...bilitytool.xpi]. future versions of the extension will be available from addons.mozilla.org. the version currently on xulplanet is compatible with the following xul applications: firefox 1.5+ thunderbird 3.0a+ recent sunbird builds recent songbird builds. it probably also works on seamon
key, but i haven't verified this. use to launch the tool after installation, look for an entry in the tools menu of the host application, or hit ctrl+alt+shift+f12. once the tool window has loaded, select either a local file, web url, or currently open window from the file menu to generate a xul report for that document. be aware that the report might take a little while to be ready depending on the...
...rate a xul report for that document. be aware that the report might take a little while to be ready depending on the complexity of the application being analyzed and the speed of your machine. ...
...e ready depending on the complexity of the application being analyzed and the speed of your machine. future work the following things have been suggested or are planned for a future version of the tool: new tests: (aaronlev) warning: hardcoded color and pixel sizings (aaronlev) error: duplicate access
key in a dialog (already have this for menus) (aaronlev) error: form control without access
key (aaronlev) warning: access
key as lowercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the document (make sure they have accessible column picker equivs) or a list of toolbarbuttons (make sure they have accessible alternatives). new features: (aaronlev) automatically test any new windo...
...ly generate a xul a11y tool compatible with a user-specified xul app. (aaronandy) link report sections to relevant part of xul a11y guidelines. (aaronandy) enable tabs, context menu, and other browser extras in report window. (aaronandy) xul runner version that can run from the command line, check a text file, and output the results somewhere. known bugs: test for lowercase i or l as access
key (sometimes?) flags upppercase i and l too. possible false positives in some of the other tests processing is slower than we would like. ideas for further work on xul a11y some general ideas for using the tool and guidelines to further the accessibility cause within the mozilla project. add usability, i18n, security and other considerations to xul a11y guidelines -- make them more general ...
command - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a command element can be used to invoke an operation that can come from multiple sources. for example, a clipboard paste operation can be invoked from the edit menu, a context menu and by pressing a
keyboard shortcut. you attach the code to the command using the oncommand attribute. it will be called no matter how it is invoked by the user. in addition, disabling the command will automatically disable the menu items and
keyboard shortcuts. commands are identified by their id. if you include the script chrome://global/content/globaloverlay.js in your window, you can use the function godocommand function to invoke the command. using this function has the advantage that the command will be sent ...
... label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. oncommand type: script code this event handler is called when the command is activated. ...
...in future releases, it won't receive them. see bug 1173061 for details. ...
...in future releases, it won't receive them. see bug 1173061 for details. ...
menupopup - Archive of obsolete content
when the menu or button is pressed. it may be attached to any element using the popup attribute. when the element is clicked with the left mouse button, the menupopup will be displayed. it may be attached to any element using the context attribute. when a context menu is opened, the menupopup will be displayed. ...
...enu or button is pressed. it may be attached to any element using the popup attribute. when the element is clicked with the left mouse button, the menupopup will be displayed. it may be attached to any element using the context attribute. when a context menu is opened, the menupopup will be displayed. a context menu may be opened by right-clicking the element, or by pressing the menu
key on the
keyboard. ...
...ment is clicked with the left mouse button, the menupopup will be displayed. it may be attached to any element using the context attribute. when a context menu is opened, the menupopup will be displayed. a context menu may be opened by right-clicking the element, or by pressing the menu
key on the
keyboard. more information is available in the xul tutorial and popup guide. attributes ignore
keys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist. <menulist> <menupopup> <menuite...
...hmeat.net"/> </menupopup> </menulist> the following example shows how a menupopup can be used as a context menu for an element. when the label is right-clicked, the menu will be displayed. <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="right click for popup" context="clipmenu"/> attributes ignore
keys type: boolean if true,
keyboard navigation between items in the popup is disabled. left type: integer overrides the horizontal position of the popup specified by the showpopup method. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this p...
panel - Archive of obsolete content
ethod is called. warning: for firefox versions between 3.6 and 4.0, placing an iframe, browser or editor inside a panel is not supported. some features may work, but only on some platforms. for those versions of firefox, it is best to avoid child frames in a panel, if possible. this limitation was resolved as of firefox 4.0. attributes backdrag, close, consumeoutsideclicks, fade, flip, ignore
keys, label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label. <panel id="thepanel"> <hb...
...de" and has a width which is greater than the distance from the anchor to the right of the screen (or window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor. without flip="slide", the panel would have had its width truncated and the panel would not extend to the left of the anchor. ignore
keys type: boolean if false, the default value, the escape
key may be used to close the panel. if true, the escape
key cannot be used to close the panel. label type: string for panels with titlebars, the label on the titlebar. left type: integer overrides the horizontal position of the popup specified by the showpopup method. level type: one of the values below specifi...
... level type: one of the values below specifies whether the panel appears on top of all windows, or just on top of the window the panel is in. if this attribute is not set, the popup window level depends on the platform. on linux, the default value is top, otherwise, the default value is parent. if a panel has one or more text fields, this attribute should not be set, otherwise ime or on-screen
keyboard popups will appear incorrectly. for these reasons, you should avoid setting the level if not needed. top the panel is shown in front of all other normal windows, including those of other applications. parent the panel is shown just above the window the panel is in, but behind other windows above it. if anchored, the child window maintains its relative position to its parent windo...
...pened or closed. if true, the focus is not adjusted. noautohide type: boolean if false, the default value, the panel will be hidden when the user clicks outside the panel or switches focus to another application. if true, the panel will only be closed when the hidepopup method is called. norestorefocus type: boolean if false, the default value, then when the panel is hidden, the
keyboard focus will be restored to whatever had the focus before the panel was opened. if true, the focus will not be reset, although it will be cleared if the focus is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidd...
prefwindow - Archive of obsolete content
losure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="duration:" preference="...
...default setting of browser.preferences.instantapply currently is true on linux and mac os and false on windows (which however might or might not change soon, see bug 738797 and bug 1037225). defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog. typically, this means that the button will be activated when the enter
key is pressed. this should be set to one of the same values as those for the buttons attribute. inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background). moreover this hides separator between titlebar and window contents. this affects only on mac os x. lastselected type: string set this to the id of the last selected...
...th the ondialogextra2 attribute. currentpane type: prefpane element reference to the currently displayed pane. to change the current pane, use the showpane method. defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog. typically, this means that the button will be activated when the enter
key is pressed. this should be set to one of the same values as those for the buttons attribute. instantapply (readonly) indicates whether the window is in "instant apply" mode. the value is read from browser.preferences.instantapply boolean user preference. (?? it's declared as a <field>, so you can set the value, however i don't believe it's valid to do that.) lastselected type: strin...
...tivated using openwindow() } closing a prefwindow sometimes you need to do things when the prefwindow is closed, such as things that can't (or shouldn't) be handled as preferences, such as saving passwords or updating sqlite data. to do this, you can set the prefwindow's onunload attribute to a function that will be run when the prefwindow is closed. <prefwindow xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" id="my-config-dialog" title="my application: configuration" onunload="onunload(event.target)"> </prefwindow> function onunload(prefwindow) { // do actions there like saving values, password setting (that is not handled as a preference), etc. return true; } opening a modal sub dialog a sub dialog can only be opened via document.documentelement and ...
tab - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single tab which should be placed inside a tabs element. the user may click a tab to bring the associated page of the tabbox to the front. more information is available in the xul tutorial. attributes access
key, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties access
key, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes access
key type: character this should be set to a character that is used as a shortcut
key. this should be one of the charact...
...ribute is used, this behavior is overridden, and the tab will always be linked to a specific panel. this might be used to avoid duplication by linking several tabs to one panel with slight differences to the content adjusted in the select event. oncommand type: script code this event handler is called when the command is activated. this occurs when a user selects a menu item or presses a
keyboard shortcut attached to the command. pending type: boolean this attribute is set to true if the tab is currently in the process of being restored by the session store service. once the tab is restored, this attribute is removed. you can determine if a tab is being restored by checking to see if hasattribute("pending") is true. if the user has turned on the "don't load tabs u...
... true if the tab has been pinned (that is, if it's an app tab). the tabbrowser element's pintab and unpintab methods handle pinning and unpinning tabs. selected type: boolean this attribute is set to true if the tab is selected by default. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. unread type: boolean this attribute is set to true if the tab is unread; that is, either it has not yet been selected during the current session, or has changed since the last time it was selected. this attribute is not present if the tab is not unread. validate type: one of the values below this attribute indica...
...age from the cache or not. this would be useful if the images are stored remotely or you plan on swapping the image frequently. the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded. never the image will be loaded from the cache if possible. properties access
key type: character gets and sets the value of the access
key attribute. accessibletype type: integer a value indicating the type of accessibility object for the element. command type: element id gets and sets the value of the command attribute. control type: tabs element returns the enclosing tabs element. crop type: string ...
tabbox - Archive of obsolete content
tab navigatio...
...bpanel> <tabpanel><!-- tabpanel fourth elements go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below indicates where
keyboard navigation events are listened to. if this attribute is not specified, events are listened to from the tabbox. thus, if this attribute is not used, the tabbox or an element inside it must have the focus for the
keyboard navigation to apply. parent
keyboard navigation is captured at the parent of the tabbox. window
keyboard navigation is captured at the window level. tab navigation will occur as long as any element in the window is focused. document
keyboard navigation is captured at the document level. tab navigation will occur as long as any element in the document is focused. ...
... navigation is captured at the window level. tab navigation will occur as long as any element in the window is focused. document
keyboard navigation is captured at the document level. tab navigation will occur as long as any element in the document is focused. handlectrltab type: boolean if set to true or omitted, the tabbox will switch to the next tab when the control and tab
keys are pressed. if the shift
key is also held down, the previous tab will be displayed. if this attribute is set to false, these
keys do not navigate between tabs. ...
...the initial value for this property is determined by the value of the eventnode attribute. handlectrlpageupdown type: boolean gets and sets the value of the handlectrlpageupdown attribute. handlectrltab type: boolean gets and sets the value of the handlectrltab attibute. ...
2006-11-17 - Archive of obsolete content
reflow branch testing wanted l. david baron would like users to test the reflow branch as it is coming close to being merged with the trunk. ...
... reflow branch testing wanted l. david baron would like users to test the reflow branch as it is coming close to being merged with the trunk. ...
... reflow branch testing wanted l. david baron would like users to test the reflow branch as it is coming close to being merged with the trunk. ...
... reflow branch testing wanted l. david baron would like users to test the reflow branch as it is coming close to being merged with the trunk. ...
Scratchpad - Archive of obsolete content
ngs. once you've done this, the environment menu has a browser option; once that's selected, your scope is the entire browser rather than just the page content, as you will see from examining some globals: window /* [object chromewindow] */ gbrowser /* [object xulelement] */ the scratchpad execution context is set to browser when a snippet file has // -sp-context: browser on the first line. ...
... show autocomplete suggestions ctrl + space ctrl + space ctrl + space show inline documentation ctrl + shift + space ctrl + shift + space ctrl + shift + space source editor shortcuts this table lists the default shortcuts for the source editor. ...
...inline documentation ctrl + shift + space ctrl + shift + space ctrl + shift + space source editor shortcuts this table lists the default shortcuts for the source editor. in the editor preferences section of the developer tools settings, you can choose to use vim, emacs, or sublime text
key bindings instead. to select these, visit about:config, select the setting devtools.editor.
keymap, and assign "vim" or "emacs", or "sublime" to that setting. ...
...oose to use vim, emacs, or sublime text
key bindings instead. to select these, visit about:config, select the setting devtools.editor.
keymap, and assign "vim" or "emacs", or "sublime" to that setting. if you do this, the selected bindings will be used for all the developer tools that use the source editor. you need to reopen the editor for the change to take effect. from firefox 33 onwards, the
key binding preference is exposed in the editor preferences section of the developer tools settings, and you can set it there instead of about:config. command windows macos linux go to line ctrl + j, ctrl + g cmd + j, cmd + g ctrl + j, ctrl + g find in file ctrl + f cmd + f ctrl + f select all ctrl + a cmd + a ctrl + a ...
-ms-accelerator - Archive of obsolete content
the -ms-accelerator css property is a microsoft extension that sets or retrieves a string indicating whether the object represents a
keyboard shortcut. initial valuefalseapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax /* the object is not a
keyboard shortcut (the default) */ -ms-accelerator: false /* the object is a
keyboard shortcut */ -ms-accelerator: true values false the object is not a
keyboard shortcut. true the object is a
keyboard shortcut. ...
...ject is not a
keyboard shortcut (the default) */ -ms-accelerator: false /* the object is a
keyboard shortcut */ -ms-accelerator: true values false the object is not a
keyboard shortcut. true the object is a
keyboard shortcut. formal syntax false | true examples this example uses the -ms-accelerator attribute in a <u> element to specify that the "n" in the <label> element is a
keyboard shortcut. when the option to "hide
keyboard navigation indicators until i use the alt
key" is enabled in the user's display properties, the "n" is not underlined until the user presses the alt
key. when alt + n is pressed, the <input> element that defines an access
key attribute value of "n" receives the focus. <!doctype html> <html> <head> <title>accelerator</title> </head> <body...
...ned until the user presses the alt
key. when alt + n is pressed, the <input> element that defines an access
key attribute value of "n" receives the focus. <!doctype html> <html> <head> <title>accelerator</title> </head> <body> <label for="oname"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </label> <input type="text" id="oname" size="25" access
key="n" value="your name here" /> </body> </html> specifications not part of any specification. remarks this property is supported by windows 2000 and later. it enables users to hide navigation indicators for menu items and controls until the alt
key is pressed. an access
key is a single character used as a
keyboard shortcut for selecting an object. ...
... in internet explorer 8 (ie8) the -ms-accelerator attribute is an extension to css, and can be used as a synonym for accelerator in ie8 standards mode. ...
Mozilla XForms User Interface - Archive of obsolete content
later we have plans to support xforms hosted by svg. ...
...tation in a form. appearance - the value provided by the form author gives a hint to the processor as to which widget to use to represent the xforms control. three possible values are available to the author: minimal, compact and full. generally speaking, the main purpose for these values is to reflect how much space (screen real estate) the displayed widget will take. tabindex - defines the
keyboard navigation sequence between controls. access
key -
keyboard shortcut for moving focus to an xforms element. binding attributes single-node (see the spec) and node-set (see the spec) attributes are used to bind xforms elements to instance nodes. these attributes are: ref, nodeset, model and bind. xforms elements almost every xforms element can be presented as one of serveral different kinds...
...of the widgets we use are only available in the mozilla xforms processor. the choice of widget that we use is often determined by the data type of the instance node that the xforms element is bound to. the form author can also influence the widget by using the appearance attribute on the element. form controls module this section contains a short description for each form control element. input a
key xforms element to show and change the instance data to which it is bound. usually bound to data that can be well-represented by a string (see the spec). it can have the following representations: text field - default representation. used for most data types, especially text data. checkbox - used for boolean instance data datepicker - default representation for date data types. similar to a...
...elements may be used as child elements to the form controls described above. label specifies the label for the xforms control (see the spec). every form control other than the output element must contain a label element. it is valid for a form control to have an empty label element. help specifies contextual help for the containing form control (see the spec). the help will be displayed if the f1
key is pressed while the containing form control has focus. hint similar to a tooltip (see the spec). the hint is displayed when the mouse moves and pauses over the containing form control. alert this message will be shown when the form control cannot properly bind to instance data or when the instance data value is invalid or out of the specified range of selectable values (see the spec). message us...
HPKP - MDN Web Docs Glossary: Definitions of Web-related terms
http public
key pinning (hpkp) is a security feature that tells a web client to associate a specific cryptographic public
key with a certain web server to decrease the risk of mitm attacks with forged certificates. ...
... http public
key pinning (hpkp) is a security feature that tells a web client to associate a specific cryptographic public
key with a certain web server to decrease the risk of mitm attacks with forged certificates. ...
... http public
key pinning (hpkp) is a security feature that tells a web client to associate a specific cryptographic public
key with a certain web server to decrease the risk of mitm attacks with forged certificates. ...
... http public
key pinning (hpkp) is a security feature that tells a web client to associate a specific cryptographic public
key with a certain web server to decrease the risk of mitm attacks with forged certificates. ...
Symbol - MDN Web Docs Glossary: Definitions of Web-related terms
ll .tostring() on it. let sym = symbol("sym") alert(sym.tostring()) // symbol(sym), now it works or you can use the symbol.description property to get its description: let _sym = symbol("sym"); alert(_sym.description); // sym well-known symbols the symbol class has constants for so-called well-known symbols. these symbols let you configure how js treats an object, by using them as property
keys. examples of well-known symbols are: symbol.iterator for array-like objects, or symbol.search for string objects. they are listed in the specification in the well-known symbols table: symbol.hasinstance symbol.isconcatspreadable symbol.iterator symbol.toprimitive …and so on. global symbol registry there is a global symbol registry holding all available symbols. the methods that acc...
...l.iterator for array-like objects, or symbol.search for string objects. they are listed in the specification in the well-known symbols table: symbol.hasinstance symbol.isconcatspreadable symbol.iterator symbol.toprimitive …and so on. global symbol registry there is a global symbol registry holding all available symbols. the methods that access the registry are symbol.for() and symbol.
keyfor(); these mediate between the global symbol table (or "registry") and the run-time environment. the global symbol registry is mostly built by javascript's compiler infrastructure, and the global symbol registry's content is not available to javascript's run-time infrastructure, except through these reflective methods. the method symbol.for(tokenstring) returns a symbol value from the registry,...
... mediate between the global symbol table (or "registry") and the run-time environment. the global symbol registry is mostly built by javascript's compiler infrastructure, and the global symbol registry's content is not available to javascript's run-time infrastructure, except through these reflective methods. ...
...uilt by javascript's compiler infrastructure, and the global symbol registry's content is not available to javascript's run-time infrastructure, except through these reflective methods. ...
UI pseudo-classes - Learn web development
parts of forms are hard to style, and why; to learn what can be done to customize them. what pseudo-classes do we have available? the original pseudo-classes available to us (as of css 2.1) that are relevant to forms are: :hover: selects an element only when it is being hovered over by a mouse pointer. :focus: selects an element only when it is focused (i.e. by being tabbed to via the
keyboard). :active: selects an element only when it is being activated (i.e. while it is being clicked on, or when the return/enter
key is being pressed down in the case of 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 usefu...
...ed" is shown, along with a red cross and border. when you've typed in a valid age (i.e. in the range of 12-120), the input turns valid. if however, you then change the age entry to one that is out of range, the "outside allowable value range" message then pops up in place of "required". note: to enter an invalid/out-of-range value, you'll have to actually focus the form and type it in using the
keyboard. the spinner buttons won't let you increment/decrement the value outside the allowable range. styling enabled and disabled inputs, and read-only and read-write an enabled element is an element that can be activated; it can be selected, clicked on, typed into, etc. a disabled element on the other hand cannot be interacted with in any way, and its data isn't even sent to the server these ...
...default.html (also see the source code.) for the :indeterminate example, we've got no default selected radio button — this is important — if there was, then there would be no indeterminate state to style. ...
... take the time to investigate. the following are fairly well-supported in modern browsers: the :focus-within pseudo-class matches an element that has received focus or contains an element that has received focus. this is useful if you want a whole form to highlight in some way when an input inside it is focused. the :focus-visible pseudo-class matches focused elements that received focus via
keyboard interaction (rather than touch or mouse) — useful if you want to show a different style for
keyboard focus compared to mouse (or other) focus. the :placeholder-shown pseudo-class matches <input> and <textarea> elements that have their placeholder showing (i.e. the contents of the placeholder attribute) because the value of the element is empty. the following are also interesting, but as...
Arrays - Learn web development
subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n}\n\ntotalbox.textcontent = \'total: $\' + total.tofixed(2);'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).
...0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.on
keyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; ...
...temtext = myhistory[i];\n const listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n }\n\n if(myhistory.length >= 5) {\n myhistory.pop();\n }\n\n searchinput.value = \'\';\n searchinput.focus();\n }\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).s...
... you've reached the end of this article, but can you remember the most i...
Adding features to our bouncing balls demo - Learn web development
rame, because we will be moving it in some other way, as you'll see below. inside the if() statements, if the tests return true we don't want to update velx/vely; we want to instead change the value of x/y so the evil circle is bounced back onto the screen slightly. adding or subtracting (as appropriate) the evil circle's size property would make sense. ...
...ee below. inside the if() statements, if the tests return true we don't want to update velx/vely; we want to instead change the value of x/y so the evil circle is bounced back onto the screen slightly. adding or subtracting (as appropriate) the evil circle's size property would make sense. setcontrols() this method will add an on
keydown event listener to the window object so that when certain
keyboard
keys are pressed, we can move the evil circle around. ...
... is bounced back onto the screen slightly. adding or subtracting (as appropriate) the evil circle's size property would make sense. setcontrols() this method will add an on
keydown event listener to the window object so that when certain
keyboard
keys are pressed, we can move the evil circle around. the following code block should be put inside the method definition: let _this = this; window.on
keydown = function(e) { if (e.
key === 'a') { _this.x -= _this.velx; } else if (e.
key === 'd') { _this.x += _this.velx; } else if (e.
key === 'w') { _this.y -= _this.vely; } else if (e.
key === 's') { _this.y += _this.vely; } } so when a
key is pressed, the event object's
keycode property is consulted to see which
key is pressed. if it is one of the four re...
... for a bonus point, can you tell us why we've had to set let _this = this; in the position it is in? it is something to do with function scope. collisiondetect() this method will act in a very similar way to ball()'s collisiondetect() method, so you can use a copy of that as the basis of this new method. ...
Creating our first Vue component - Learn web development
. you can think of props as being similar to inputs in a function. the value of a prop gives components an initial 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 befor...
...onally, 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 component, we’ll use 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. t...
...nder. so mutating props in a component would trigger the component to rerender, which may in-turn trigger the mutation again. to work around this, we can manage the done state using vue’s data property. the data property is where you can manage local state in a component, it lives inside the component object alongside the props property and has the following structure: data() { return {
key: value } } you'll note that the data property is a function. this is to keep the data values unique for each instance of a component at runtime — the function is invoked separately for each component instance. if you declared data as just an object, all instances of that component would share the same values. this is a side-effect of the way vue registers components and something you do not ...
... }; } }; vue does a little magic here — it binds all of your props directly to the component instance, so we don’t have to call this.props.done. it also binds other attributes (data, which you’ve already seen, and others like methods, computed, etc.) directly to the instance. this is, in part, to make them available to your template. the down-side to this is that you need to keep the
keys unique across these attributes. this is why we called our data attribute isdone instead of done. so now we need to attach the isdone property to our component. in a similar fashion to how vue uses {{}} expressions to display javascript expressions inside templates, vue has a special syntax to bind javascript expressions to html elements and components: v-bind. the v-bind expression looks like t...
Adding a new todo form: Vue events, methods, and models - Learn web development
if you fill it out and click the "add" button, the page will post the form back to the server, but this isn’t really what we want. what we actually want to do is run a method...
...nded to the end of an event with a dot like so: @event.modifier. here is a list of event modifiers: .stop: stops the event from propagating. equivalent to event.stoppropagation() in regular javascript events. .prevent: prevents the event's default behavior. equivalent to event.preventdefault(). .self: triggers the handler only if the event was dispatched from this exact element. {.
key}: triggers the event handler only via the specified
key. mdn has a list of valid
key values; multi-word
keys just need to be converted to kebab case (e.g. page-down). .native: listens for a native event on the root (outer-most wrapping) element on your component. .once: listens for the event until it's been triggered once, and then no more. .left: only triggers the handler via the left m...
...events and v-bind attributes. in fact, this is what v-model does behind the scenes. however, the exact event and attribute combination varies depending on input types and will take more code than just using the v-model shortcut. let's test out our use of v-model by logging the value of the data submitted in our onsubmit() method. in components, data attributes are accessed using the this
keyword. so we access our label field using this.label. update your onsubmit() method to look like this: methods: { onsubmit() { console.log('label value: ', this.label); } }, now go back to your running app, add some text to the <input> field, and click the "add" button. you should see the value you entered logged to your console, for example: label value: my value changin...
...n add the modifier to our v-model statement like so: v-model.trim="label". the second modifier we should consider is called .lazy. this modifier changes when v-model syncs the value for text inputs. as mentioned earlier, v-model syncing works by updating the variable using events. for text inputs, this sync happens using the input event. often, this means that vue is syncing the data after every
keystroke. the .lazy modifier causes v-model to use the change event instead. this means that vue will only sync data when the input loses focus or the form is submitted. for our purposes, this is much more reasonable since we only need the final data. to use both the .lazy modifier and the .trim modifier together, we can chain them, e.g. v-model.lazy.trim="label". update your v-model attribute to ...
Strategies for carrying out testing - Learn web development
to be accepted. these requirements can be visual or functional — both combine to make a usable web site feature. consider the following example (see the source code, and also the example running live): test criteria for this feature could be written like so: a and b grade: button should be activatable by the user's primary control mechanism, whatever it is — this should include mouse,
keyboard, and touch. toggling the button should make the information box appear/disappear. the text should be readable. visually impaired users using screenreaders should be able to access the text. a grade: the information box should animate smoothly as it appears/disappears. the gradient and text shadow should appear to enhance the look of the box. you may notice from the text in the exa...
...ext in the example that it won't work in ie8 — this is a problem according to our support chart, which you'll have to work on, perhaps by using a feature detection library to implement the functionality in a different way if the browser doesn't support css transitions (see implementing feature detection, later on in the course). you might also notice that the button isn't usable using only the
keyboard — this also needs to be remedied. maybe we could use some javascript to implement a
keyboard control for the toggle, or use some other method entirely? these test criteria are useful, because: they give you a set of steps to follow when you are performing tests. they can be easily turned into sets of instructions for user groups to follow when carrying out tests (e.g. "try to active t...
... they can also provide a basis for writing automated tests. it is easier to write such tests if you know exactly what you want to test, and what the success conditions are (see using an automation tool to automate browser testing, later in the series). ...
... you were trying to test. we mentioned this in the what are you going to test section above — it is easy to turn the test criteria detailed there into steps to follow. for example, the following would work for a sighted user: click the question mark button using the mouse on your desktop computer a few times. refresh the browser window. select and activate the question mark button using the
keyboard on your desktop computer a few times. tap the question mark button a few times on your touch screen device. toggling the button should make the information box appear/disappear. does it do this, in each of the above three cases? is the text readable? does the information box animate smoothly as it appears/disappears? when running tests, it can also be a good idea to: set up a separa...
HTTP logging
ress well :) setting environment variables differs by operating system. don't let the scary-looking command line stuff frighten you off; it's not hard at all! windows if firefox is already running, exit out of it. open a command prompt. on windows xp, you can find the "run..." command in the start menu's "all programs" submenu. ...
...ut of it. open a command prompt. on windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of windows, you can hold down the windows
key and press "r". type cmd and press enter, a new command prompt window with a black background will appear. copy and paste the following lines one at a time into the command prompt window. ...
... it's currently running, by using the quit option in the file menu. keep in mind that simply closing all windows does not quit firefox on mac os x (this is standard practice for mac applications). run the terminal application, which is located in the utilities subfolder in your startup disk's applications folder. copy and paste the following commands into the terminal window, hitting the return
key after each line. export moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 export moz_log_file=~/desktop/log.txt cd /applications/firefox.app/contents/macos ./firefox-bin (the instructions assume that you've installed firefox directly into your startup disk's applications folder. if you've put it elsewhere, change the path used on the third line appr...
... setting environment variables: using command line arguments. here is an example for the windows platform, on other platforms we accept the same form of the arguments: if firefox is already running, exit out of it. open a command prompt. on windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of windows, you can hold down the windows
key and press "r". copy and paste the following line into the "run" command window and then press enter: for 32-bit windows: "c:\program files (x86)\mozilla firefox\firefox.exe" -moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 -moz_log_file=%temp%\log.txt for 64-bit windows: "c:\program files\mozilla firefox\firefox.exe" -moz_log=timestamp,rotat...
Using the Browser API
isabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } implementing the url bar the url bar for our simple browser is a <form> containing a single text <input>. ...
...g("it's not possible to navigate the history backward."); } }); } implementing the url bar the url bar for our simple browser is a <form> containing a single text <input>. when you tap the url bar, you can enter a url using the built-in firefox os
keyboard (although note that we haven't implemented anything sophisticated in this app, like autofilling the http://, etc.). when you press the
keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and reloading the page — which is really not what we want. we then set the browser iframe's src attribute to equal the value of the ...
... e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and reloading the page — which is really not what we want. we then set the browser iframe's src attribute to equal the value of the url bar, which causes the new url to be loaded in the iframe. finally, we call blur() on the url bar to stop focusing it, so the
keyboard moves off the screen, allowing us to get our full screen view back. there's another event listener added later on in the code that listens for the mozbrowserlocationchange event. when this fires, we set the value inside the url bar input to be equal to the event object detail property — this is so that the url displayed continues to match the website being shown when the user navigates ba...
... searchform.addeventlistener('submit',function(e) { e.preventdefault(); browser.findall(searchbar.value, 'case-sensitive'); searchactive = true; prev.disabled = false; next.disabled = false; searchbar.blur(); }); with this all done, you'll see your search results are highlighted; you can cycle through these us...
FileUtils.jsm
th files. ...
...javascript scope: components.utils.import("resource://gre/modules/fileutils.jsm"); the file constructor if you have a path to a file (or directory) you want to obtain an nsifile for, you can do so using the file constructor, like this: var f = new fileutils.file(mypath); method overview nsifile getfile(string
key, array patharray, bool followlinks); nsifile getdir(string
key, array patharray, bool shouldcreate, bool followlinks); nsifileoutputstream openfileoutputstream(nsifile file, int modeflags); nsifileoutputstream openatomicfileoutputstream(nsifile file, int modeflags); nsifileoutputstream opensafefileoutputstream(nsifile file, int modeflags); void closeatomicfileoutputstream(nsifileoutputstream stream); void closesaf...
...pend 0x10 corresponds to the pr_append parameter to pr_open mode_truncate 0x20 corresponds to the pr_truncate parameter to pr_open perms_file 0644 default permissions when creating files. perms_directory 0755 default permissions when creating directories methods getfile() gets a file at the specified hierarchy under a nsidirectoryservice
key. nsifile getfile( string
key, array patharray, 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 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 otherw...
... 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 by
key. shouldcreate optional true if the directory hierarchy specified in patharray should be created if it does no...
Index
anslation, l10n localization (l10n) is the process 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, seamon
key, 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 ...
...nternationalization, localization in mozilla, we use the the mercurial version control system (hg) to manage our source code and localizations. mercurial allows localizers to work locally (on their machines) and then push (an hg term) changes to a remote repository, which usually is hosted on the mozilla servers (hg.mozilla.org). localizing current versions of firefox, thunderbird and seamon
key includes working with mercurial. if the documentation is incomplete or you have questions, please drop by the #l10n or #hg channels on irc.mozilla.org. the mercurial faq are also worth a read, should you run into trouble. 25 localizing with mozilla translator guide, localization, translator, l10n no summary! 26 localizing with pontoon junk, localization p...
... say you have found a problem with an existing localization. more specifically, it's a problem with an already released localization. what do you do now? well, you have come to the right place! this page will walk you through creating a patch for an existing localization. the steps below are fairly generic; for the most part they apply to creating l10n patches for firefox, thunderbird, seamon
key, or calendar. 32 svn for localizers intro, localization, svn, opensource welcome to the svn tutorial for localizers! here you'll learn the process of using svn to obtain mozilla website source files from the mozilla servers and pushing your localizations right back to them. first things first, we need to give you a brief introduction to what svn is and where you can find the ...
...alization this page tells you about best practices and guidelines when dealing with ui code with respect to localization. it is aimed at mozilla and extension developers. 42 gettext internationalization, localizability, localization gettext lets you define and use singular and plural forms of a string. to take advantage of this functionality, you need to use a different
keyword (i.e. different gettext function name) for string which are supposed to support plurals. for instance, in php the default
keyword for regular messages is gettext() and _(). for messages with plural support, the default
keyword is ngettext(). ...
Fonts for Mozilla 2.0's MathML engine
for the latest version see, this page. quick instructions try this test page to quickly determine whether you need to install additional fonts and to follow the instructions below. you may also want to check out the mozilla mathml torture test to test your installation against concrete examples. on windows: use this mathml fonts installer. on mac os x lion (10.7) and higher versions, stix fonts are already installed and can be used for mathml. ...
...led and can be used for mathml. on most linux distributions and similar open source platforms, you can install math fonts (stix, asana or mathjax fonts) from your package manager or get them from this zip archive. on android, firefox os and other platforms where the instructions above do not work: install the mathml-fonts add-on. this requires gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamon
key 2.12) or higher. overview mathematical formulas make use of various symbols represented by specific unicode characters. mozilla can display any of these symbols provided suitable unicode fonts are installed. furthermore, in accordance with the w3c css2 recommendation on fonts, authors can specify an ordered list of particular fonts which they prefer (using the font-family property of css), with ...
... 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 / seamon
key 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 sil open font license and should be installed for best mathml rendering. note that currently, only the fonts in /fonts/stix-general/ are used for stretching mathemat...
...are available under the sil open font license and should be installed for best mathml rendering. note that currently, only the fonts in /fonts/stix-general/ are used for stretching mathematical operators with stix fonts. asana math is also freely available under the sil open font license and has good support for mathematical characters. starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4), mozilla can also use the glyphs contained in that font for stretchy operators. starting in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamon
key 2.10), mathjax fonts are used as the default fonts for mathematical text and symbol stretching. these fonts are freely available under the apache license. they are close to latex rendering and should look more familiar to scientists. mathjax font...
Phishing: a short definition
alert instead of the fraudulent website. two-factor authentication none of the above anti-phishing measures address the basic problem: username/password combinations are often enough to impersonate users. enter the world of second factors. a second factor is something a user possesses to further authenticate with a service. for example, a usb token, bluetooth device, mobile phone, or simply a
key stored on a separate device. the first factor is usually the password and username. if both factors don’t match, the service will reject authentication requests. public
key cryptography many services will soon support w3c web authentication, a powerful technology to evade phishing, based on public
key cryptography. web authentication supports millions of readily avilable fido u2f usb security...
... verification via text message if a service supports verification, via sms, it sends a text message with a one-time pin to the user’s phone number. ...
... verification via text message if a service supports verification, via sms, it sends a text message with a one-time pin to the user’s phone number. the user then enter this pin after the web service verifies the username and password. ...
...s verification. the ss7 telephony system is vulnerable, making eavesdropping, or rerouting text messages quite trivial. one-time password algorithms a better way to use phones as second factor, are one-time password (otp) protocols, like totp and hotp. at service registration, the provider will often generate a qr code to be read by an otp app. this qr code is nothing more than a random, secret
key, that is stored on the user’s phone. after verifying username and password, the user is prompted to open the otp app and enter the corresponding 6-digit code, representing a hashed version of the secret
key and a nonce - potentially time-based. otp is the most widely supported second factor schemes and can be used to secure your most important accounts. unfortunately, some users still feel it'...
PL_HashTableRemove
if the entry exists, pl_hashtableremove removes the entry from the table, invokes freeentry with the ht_free_entry flag to frees the entry, and returns pr_true. if the table is underloaded, pl_hashtableremove also shrinks the number of buckets by half. ...
...if the entry exists, pl_hashtableremove removes the entry from the table, invokes freeentry with the ht_free_entry flag to frees the entry, and returns pr_true. if the table is underloaded, pl_hashtableremove also shrinks the number of buckets by half. ...
...if the entry exists, pl_hashtableremove removes the entry from the table, invokes freeentry with the ht_free_entry flag to frees the entry, and returns pr_true. if the table is underloaded, pl_hashtableremove also shrinks the number of buckets by half. ...
...if the entry exists, pl_hashtableremove removes the entry from the table, invokes freeentry with the ht_free_entry flag to frees the entry, and returns pr_true. if the table is underloaded, pl_hashtableremove also shrinks the number of buckets by half. ...
NSS_3.11.10_release_notes.html
hared libraries, which nss 3.11.10 requires. nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/. bugs fixed the following bugs have been fixed in nss 3.11.10. bug 291384: certutil -k behavior doesn't match usage bug 374247: modutil -disable command not disabling modules' slots bug 384459: certification path validation fails when authority
key identifier extension contains
key identifier bug 385946: can't import certificate into cert database in fips mode (certutil). bug 387892: add entrust root ca certificate(s) to nss bug 396999: pk11_authenticate bug 397478: lock from ssl_initsymwrap
keyslock not freed on selfserv shutdown. bug 397486: session cache locks not freed on strsclnt shutdown. bug 398680: assertion botch in ssl3...
...new and revised documents available since the release of nss 3.9 include the following: build instructions f...
...new and revised documents available since the release of nss 3.9 include the following: build instructions for nss 3.11.4 an...
...uthority root to nss bug 431621: add diginotar root ca root to nss bug 431772: add network solutions and diginotar root certs to nss bug 442912: fix nssckbi version number on 3.11 branch bug 443045: fix pk11_generate
keypair for ecc
keys on the 3.11 branch bug 444850: nss misbehaves badly in the presence of a disabled pkcs#11 slot bug 462948: lint warnings for source files that include
keythi.h documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation. new and revised documents available since the release of nss 3.9 include the following: build instructions for nss 3.11.4 and above compatibility nss 3.11.10 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x share...
NSS 3.28 release notes
n ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_rtm/src/ new in nss 3.28 new functionality nss includes support for tls 1.3 draft -18. this includes a number of improvements to tls 1.3: the signed certificate timestamp, used in certificate transparency, is supported in tls 1.3 (bug 1252745).
key exporters for tls 1.3 are supported (bug 1310610). this includes the early
key exporter, which can be used if 0-rtt is enabled. note that there is a difference between tls 1.3 and
key exporters in older versions of tls. tls 1.3 does not distinguish between an empty context and no context. the tls 1.3 (draft) protocol can be enabled, by defining nss_enable_tls_1_3=1 when building nss. n...
...d (bug 1310610). this includes the early
key exporter, which can be used if 0-rtt is enabled. note that there is a difference between tls 1.3 and
key exporters in older versions of tls. tls 1.3 does not distinguish between an empty context and no context. the tls 1.3 (draft) protocol can be enabled, by defining nss_enable_tls_1_3=1 when building nss. nss includes support for the x25519
key exchange algorithm (bug 957105), which is supported and enabled by default in all versions of tls. new functions in ssl.h ssl_exportearly
keyingmaterial implements a
key exporter based on the tls 1.3 early exporter secret. ...
...abled, by defining nss_enable_tls_1_3=1 when building nss. nss includes support for the x25519
key exchange algorithm (bug 957105), which is supported and enabled by default in all versions of tls. new functions in ssl.h ssl_exportearly
keyingmaterial implements a
key exporter based on the tls 1.3 early exporter secret. this api is equivalent in function to ssl_export
keyingmaterial, but it can only succeed if 0-rtt was attempted (on the client) or accepted (on the server). ssl_sendadditional
keyshares configures a tls 1.3 client so that it generates additional
key shares when sending a clienthello. ssl_signatureschemeprefset allows an application to set which signature schemes should be supported in tls and to specify the preference order o...
...ure schemes are provided: ssl_signatureschemeprefset, ssl_signatureschemeprefget. the old ssl_signatureprefset and ssl_signatureprefset functions are now deprecated. nss will now no longer assume that default signature schemes are supported by a peer if there was no commonly supported signature scheme. nss will now check if rsa-pss signing is supported by the token that holds the private
key prior to using it for tls (bug 1311950). the certificate validation code contains checks to no longer trust certificates that are issued by old wosign and startcom cas, after october 21, 2016. this is equivalent to the behavior that mozilla will release with firefox 51. background information can be found in mozilla's blog post. bugs fixed in nss 3.28 this bugzilla query returns all the bugs ...
NSS 3.39 release notes
.20 or newer. nss 3.39 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_39_rtm/src/ new in nss 3.39 new functionality the tstclnt and selfserv utilities added support for configuring the enabled tls signature schemes using the -j parameter. nss will use rsa-pss
keys to authenticate in tls. support for these
keys is disabled by default but can be enabled using ssl_signatureschemeprefset(). certutil added the ability to delete an orphan private
key from an nss
key database. added the nss-policy-check utility, which can be used to check an nss policy configuration for problems. a pkcs#11 uri can be used as an identifier for a pkcs#11 token. ...
... utilpars.h nssutil_addnssflagtomodulespec - a helper function for modifying the pkcs#11 module configuration. ...
... utilpars.h nssutil_addnssflagtomodulespec - a helper function for modifying the pkcs#11 module configuration. it can be used to add a single flag to the flags= section inside the spec's nss= section. ...
...he tstclnt and selfserv test utilities no longer accept the -z parameter, as support for tls compression was removed in a previous nss version. the ca certificates list was updated to version 2.26. ...
NSS 3.48 release notes
g/pub/mozilla.org/security/nss/releases/nss_3_48_rtm/src/ other releases are available in nss releases. notable changes in nss 3.48 tls 1.3 is the default maximum tls version. see bug 1573118 for details. tls extended 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 c...
... db3517d1f6732a2d5ab97c533ec70779ee3270a62fb4ac4238372460e6f01e88 upcoming changes in nss 3.49 the legacy dbm database, libnssdbm, will no longer be built by default. see bug 1594933 for details. ...
...d cmac behind pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 1586176 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "beginning-of-validity-period" parameter to mozilla::pkix::trustdomain::checkrevocation bug 1591363 - fix a pbkdf2 memory leak in nsc_generate
key if
key length > max_
key_len (256) bug 1592869 - use arm neon for ctr_xor bug 1566131 - ensure sha-1 fallback disabled in tls 1.2 bug 1577803 - mark pkcs#11 token as friendly if it implements ckp_public_certificates_token bug 1566126 - power ghash vector acceleration bug 1589073 - use of new pr_assert_arg in certdb.c bug 1590495 - fix a crash in pk11_makecertfromhandle bug 1591742 - ensure ...
...wer ghash vector acceleration bug 1589073 - use of new pr_assert_arg in certdb.c bug 1590495 - fix a crash in pk11_makecertfromhandle bug 1591742 - ensure des iv length is valid before usage from pkcs#11 bug 1588567 - enable mozilla::pkix gtests in nss ci bug 1591315 - update nsc_decrypt length in constant time bug 1562671 - increase nss mp kdf default iteration count, by default for modern
key4 storage, optionally for legacy
key3.db storage bug 1590972 - use -std=c99 rather than -std=gnu99 bug 1590676 - fix build if arm doesn't support neon bug 1575411 - enable tls extended master secret by default bug 1590970 - ssl_settimefunc has incomplete coverage bug 1590678 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1588244 - nss changes for delegated credential
key strength ...
NSS Config Options
nss config options format the specified ciphers will be allowed by policy, but an application may allow more by policy explicitly: config="allow=curve1:curve2:hash1:hash2:rsa-1024..." only the specified hashes and curves will be allowed: config="disallow=all allow=sha1:sha256:secp256r1:secp384r1" only the specified hashes and curves will be allowed, and rsa
keys of 2048 or more will be accepted, and dh
key exchange with 1024-bit primes or more: config="disallow=all allow=sha1:sha256:secp256r1:secp384r1:min-rsa=2048:min-dh=1024" a policy that enables the aes ciphersuites and the secp256/384 curves: config="allow=aes128-cbc:aes128-gcm::hmac-sha1:sha1:sha256:sha384:rsa:ecdhe-rsa:secp256r1:secp384r1" turn off md5 config="disallow=md5" turn off md5 and sha1 only for ssl con...
..." a policy that enables the aes ciphersuites and the secp256/384 curves: config="allow=aes128-cbc:aes128-gcm::hmac-sha1:sha1:sha256:sha384:rsa:ecdhe-rsa:secp256r1:secp384r1" turn off md5 config="disallow=md5" turn off md5 and sha1 only for ssl config="disallow=md5(ssl):sha1(ssl)" disallow values are parsed first, and then allow values, independent of the order in which they appear. future
key words (not yet implemented): enable: turn on ciphersuites by default. disable: turn off ciphersuites by default without disallowing them by policy. flags: turn on the following flags: ssl-lock: turn off the ability for applications to change policy with the ssl_setcipherpolicy (or ssl_setpolicy). policy-lock: turn off the ability for applications to change policy with ...
...r1 sect409k1 sect409r1 sect571k1 sect571r1 hashes md2 md4 md5 sha1 sha224 sha256 sha384 sha512 macs hmac-sha1 hmac-sha224 hmac-sha256 hmac-sha384 hmac-sha512 hmac-md5 ciphers aes128-cbc aes192-cbc aes256-cbc aes128-gcm aes192-gcm aes256-gcm camellia128-cbc camellia192-cbc camellia256-cbc seed-cbc des-ede3-cbc des-40-cbc des-cbc null-cipher rc2 rc4 idea ssl
key exchanges rsa rsa-export dhe-rsa dhe-dss dh-rsa dh-dss ecdhe-ecdsa ecdhe-rsa ecdh-ecdsa ecdh-rsa restrictions for asymmetric
keys (integers) rsa-min dh-min dsa-min constraints on ssl protocols versions (integers) tls-version-min tls-version-max constraints on dtls protocols versions (integers) dtls-version-min dtls-version-max policy flags for algorithms ssl ssl-
key-exchang...
...changes rsa rsa-export dhe-rsa dhe-dss dh-rsa dh-dss ecdhe-ecdsa ecdhe-rsa ecdh-ecdsa ecdh-rsa restrictions for asymmetric
keys (integers) rsa-min dh-min dsa-min constraints on ssl protocols versions (integers) tls-version-min tls-version-max constraints on dtls protocols versions (integers) dtls-version-min dtls-version-max policy flags for algorithms ssl ssl-
key-exchange
key-exchange cert-signature signature all none ...
nss tech note4
server's cert handle don't forget to clean up the cert handle when you're done with it void cert_destroycertificate(certcertificate *cert); some info is readily available cert->subjectname (char*) cert->issuername (char*) cert->emailaddr (char*) or char *cert_getcertificateemailaddress(certcertificate *cert); cert->
keyusage (unsigned int) to break the issuer and subject names into components pass &(cert->issuer) or &(cert->subject) to the following functions char *cert_getcommonname(certname *name); char *cert_getcertemailaddress(certname *name); char *cert_getcountryname(certname *name); char *cert_getlocalityname(certname *name); char *cert_getstatename...
... this uses pr_alloc to allocate buffer for the decoded value, the caller should free ...
... get the decoded value of the "basic constraints" extension secstatus cert_findbasicconstraintexten (certcertificate *cert, certbasicconstraints *value); get value of the
keyusage extension. this uses pr_alloc to allocate buffer for the decoded value, the caller should free up the storage allocated in value->data. secstatus cert_find
keyusageextension (certcertificate *cert, secitem *value); get decoded value of the subject
keyid extension. ...
...e, the caller should free up the storage allocated in value->data. secstatus cert_find
keyusageextension (certcertificate *cert, secitem *value); get decoded value of the subject
keyid extension. this uses pr_alloc to allocate buffer for the decoded value, the caller should free up the storage allocated in value->data. ...
FC_EncryptInit
a user must log into the token (to assume the nss user role) before calling fc_encryptinit. ...
...a user must log into the token (to assume the nss user role) before calling fc_encryptinit. ...
...a user must log into the token (to assume the nss user role) before calling fc_encryptinit. ...
...a user must log into the token (to assume the nss user role) before calling fc_encryptinit. return value ckr_ok slot information was successfully copied. ...
FC_InitToken
d of the token's slot ppin the password of the security officer (so) ulpinlen the length in bytes of the so password plabel points to the label of the token, which must be padded with spaces to 32 bytes and not be null-terminated description fc_inittoken() initializes a brand new token or re-initializes a token that was initialized before. ...
...paces to 32 bytes and not be null-terminated description fc_inittoken() initializes a brand new token or re-initializes a token that was initialized before. specifically, fc_inittoken() initializes or clears the
key database, removes the password, and then marks all the user certs in the certificate database as non-user certs. (user certs are the certificates that have their associated private
keys in the
key database.) a user must be able to call fc_inittoken() without logging into the token (to assume the nss user role) because either the user's password hasn't been set yet or the user forgets the password and needs to blow away the password-encrypted private
key database and start over. note: the so password should be the empty string, i.e., ulpinlen argument should be 0. fc_inittoken...
...ssword-encrypted private
key database and start over. note: the so password should be the empty string, i.e., ulpinlen argument should be 0. fc_inittoken() ignores the plabel argument. return value fc_inittoken() returns the following return codes. ckr_ok: token initialization succeeded. ckr_slot_id_invalid: slot id is invalid. ckr_token_write_protected we don't have a reference to the
key database (we failed to open the
key database or we have released our reference). ckr_device_error: failed to reset the
key database. application usage fc_inittoken() is used to reset the password for the
key database when the user forgets the password. ...
...id. ckr_token_write_protected we don't have a reference to the
key database (we failed to open the
key database or we have released our reference). ckr_device_error: failed to reset the
key database. application usage fc_inittoken() is used to reset the password for the
key database when the user forgets the password. the "reset password" button of the mozilla application suite and seamon
key (in preferences->privacy & security->master passwords) calls fc_inittoken(). the "-t" (token reset) command of certutil calls fc_inittoken(). note: resetting the password clears all permanent secret and private
keys. you won't be able to decrypt the data, such as mozilla's stored passwords, that were encrypted using any of those
keys. see also fc_initpin, nsc_inittoken ...
sslcrt.html
certificate passed in the c parameter. cert_destroycertificate destroys a certificate object. syntax #include <cert.h> #include <certt.h> void cert_destroycertificate(certcertificate *cert); parameters this function has the following parameter: cert a pointer to the certificate to destroy. ...
... syntax #include <cert.h> #include <certt.h> void cert_destroycertificate(certcertificate *cert); parameters this function has the following parameter: cert a pointer to the certificate to destroy. description certificate and
key structures are shared objects. when an application makes a copy of a particular certificate or
key structure that already exists in memory, ssl makes a shallow copy--that is, it increments the reference count for that object rather than making a whole new copy. when you call cert_destroycertificate or sec
key_destroyprivate
key, the function decrements the reference count and, if the reference count reaches zero as a result, both frees the memory and sets all the bits to zero. the use of the wor...
...if you attempt to do so, the change affects all the shallow copies of that structure and can cause severe problems. ...
... cert_getdefaultcertdb returns a handle to the default certificate database. syntax #include <cert.h> certcertdbhandle *cert_getdefaultcertdb(void); returns the function returns the certcertdbhandle for the default certificate database. description this function is useful for determining whether the default certificate database has been opened. nss_findcertkeatype returns
key exchange type of the
keys in an ssl server certificate. syntax #include <nss.h> sslkeatype nss_findcertkeatype(certcertificate * cert); parameter this function has the following parameter: a the certificate to check. returns the function returns one of these values: kt_null = 0 kt_rsa kt_dh kt_fortezza ...
TLS Cipher Suite Discovery
tls does not allow all possible combinations of choices from those categories to be used. ...
...tls does not allow all possible combinations of choices from those categories to be used. ...
...tls does not allow all possible combinations of choices from those categories to be used. ...
... sslciphersuiteinfo structure contains this information, declared in "sslt.h": typedef struct sslciphersuiteinfostr { pruint16 length; pruint16 ciphersuite; /* cipher suite name */ const char * ciphersuitename; /* server authentication info */ const char * authalgorithmname; sslauthtype authalgorithm; /*
key exchange algorithm info */ const char * keatypename; sslkeatype keatype; /* symmetric encryption info */ const char * symciphername; sslcipheralgorithm symcipher; pruint16 sym
keybits; pruint16 sym
keyspace; pruint16 effective
keybits; /* mac info */ const char * macalgorithmna...
NSS tools : cmsutil
defined as follows: -d decode a message. -c encrypt a message. -e envelope a message. -o create a certificates-only message. -s sign a message. arguments option arguments modify an action and are lowercase. -c content use this detached content (decode only). -d dbdir specify the
key/certificate database directory (default is ".") -e envfile specify a file containing an enveloped message for a set of recipients to which you would like to send an encrypted message. if this is the first encrypted message for that set of recipients, a new enveloped message will be created that you can then use for future messages (encry...
... use infile as a source of data (default is stdin). -n nickname specify nickname of certificate to sign with (sign only). -n suppress output of contents (decode only). -o outfile use outfile as a destination of data (default is stdout). -p include an s/mime capabilities attribute. -p password use password as
key database password. -r recipient1,recipient2, ... specify list of recipients (email addresses) for an encrypted or enveloped message. for certificates-only message, list of certificates to send. -t suppress content in cms message (sign only). -u certusage set type of cert usage (default is certusageemailsigner). -y ekprefnic...
...1,recipient2, ... specify list of recipients (email addresses) for an encrypted or enveloped message. for certificates-only message, list of certificates to send. -t suppress content in cms message (sign only). -u certusage set type of cert usage (default is certusageemailsigner). -y ekprefnick specify an encryption
key preference by nickname. usage encrypt example cmsutil -c [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, . . ." -e envfile decode example cmsutil -d [-i infile] [-o outfile] [-d dbdir] [-p password] [-c content] [-n] [-h num] envelope example cmsutil -e [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, ..." certific...
...located at [2]http://www.mozilla.org/projects/security/pki/nss/. the nss site relates directly to nss code changes and releases. mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat. authors: elio maldonado <emaldona@redhat.com>, deon lac
key <dlac
key@redhat.com>. copyright (c) 2010, red hat, inc. licensed under the gnu public license version 2. references visible links 1. http://pki.fedoraproject.org/wiki/ 2. http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : signver
e digital signature using standard cryptographic techniques. the signature verification tool can also display the contents of the signed object. options -a displays all of the information in the pkcs#7 signature. -v verifies the digital signature. -d [sql:]directory specify the database directory which contains the certificates and
keys. signver supports two types of databases: the legacy security databases (cert8.db,
key3.db, and secmod.db) and new sqlite databases (cert9.db,
key4.db, and pkcs11.txt). if the prefix sql: is not used, then the tool assumes that the given databases are in the old format. -a sets that the given signature file is in ascii forma...
... all of the information contained in a signature file. using the -o option prints the signature file information to the given output file rather than stdout. signver -a -s signature_file -o output_file nss database types nss originally used berkeleydb databases to store security information. the last versions of these legacy databases are: o cert8.db for certificates o
key3.db for
keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously. nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues. still, nss requires more ...
...ndependent database engine while keeping a shared database and working around the access issues. still, nss requires more flexibility to provide a truly shared security database. in 2009, nss introduced a new set of databases that are sqlite databases rather than berkleydb. these new databases provide more accessibility and performance: o cert9.db for certificates o
key4.db for
keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type. the shared database type is preferred; the legacy format is included for backward compatibility. by default, the tools (certutil, pk12uti...
... wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site relates directly to nss code changes and releases. mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun. authors: elio maldonado <emaldona@redhat.com>, deon lac
key <dlac
key@redhat.com>. copyright (c) 2010, red hat, inc. licensed under the gnu public license version 2. references visible links 1. http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : ssltap
|...Å type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate { size = 703 (0x02bf) data = { saved in file 'cert.001' } } } 0: 0c 00 00 ca |.... type = 12 (server_
key_exchange) length = 202 (0x0000ca) 0: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { 0: 16 03 00 00 44 |....d type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { 0: 10 00 00 40 ...
...: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { 0: 16 03 00 00 44 |....d type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { 0: 10 00 00 40 |...@ type = 16 (client_
key_exchange) length = 64 (0x000040) client
keyexchange { message = {...} } } } ] --> [ sslrecord { 0: 14 03 00 00 01 |..... type = 20 (change_cipher_spec) version = { 3,0 } length = 1 (0x1) 0: 01 |. } sslrecord { 0: 16 03 00 00 38 ...
... cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate { size = 703 (0x02bf) data = { saved in file 'cert.001' } } } type = 12 (server_
key_exchange) length = 202 (0x0000ca) type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { type = 16 (client_
key_exchange) length = 64 (0x000040) client
keyexchange { message = {...} } }...
...at [3]http://www.mozilla.org/projects/security/pki/nss/. the nss site relates directly to nss code changes and releases. mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat and sun. authors: elio maldonado <emaldona@redhat.com>, deon lac
key <dlac
key@redhat.com>. copyright (c) 2010, red hat, inc. licensed under the gnu public license version 2. references visible links 1. http://www.mozilla.org/projects/secu.../pki/nss/tools 2. http://pki.fedoraproject.org/wiki/ 3. http://www.mozilla.org/projects/security/pki/nss/ ...
Future directions
this article documents future directions in functionality, design, and coding practices for spidermon
key. it can be read as something like an "ideal future state" for the engine. that means the code as it is today won't match this document, and that's ok. whenever practical, new code and changes should move code closer to the ideal future. and of course, the idea of the future is always evolving in time as things change and we learn more. concurrent and wasm gc we are working towards a concurrent collector. we would also like to allow webassembly to interact with gc-managed data. parallelism most machines that run spidermon
key have multiple cores, so parallelism is almost certainly part of our future. it will take some experimentation to build the right set of parallel facilities. durin...
... for the near future, we do not intend to provide a stable api, because too many things are changing. also, we will someday want a more modern c++ api. going forward from now, the api will likely be semi-stable, but there is no guarantee. ...
...l someday want a more modern c++ api. going forward from now, the api will likely be semi-stable, but there is no guarantee. the public api is gradually moving from jsapi.h and jsfriendapi.h into header files in js/public. much more cleanup and organization is still required. ...
...no fundamental blockers currently exist, but ctypes is still using nspr's runtime library loading facilities. directories and filenames see https://wiki.mozilla.org/js_engine_modularization. ...
Property cache
the property cache is only used in the interpreter. the property cache was introduced in bug 365851. ...
...the property cache is only used in the interpreter. the property cache was introduced in bug 365851. ...
...the property cache is only used in the interpreter. the property cache was introduced in bug 365851. ...
...n. it is crucial that jit and interpreter get the same answer; possible pitfalls include native getters and resolve hooks. so the lookup must happen only once. the jit ensures this by using the property cache to forward its work to the interpreter.) for speed, the cache is a fixed-size hash table with no chaining. collisions simply cause old entries to be overwritten. the hash table entries are
key-value pairs. the
keys describe the context in which a property lookup occurs. the values consist of two word-sized members. entry->vcap caches the results of part 1 above, telling which object contains the desired property. entry->vword is described in the section entry value words below. it caches the results of part 2, if the property is simple enough for optimized access, or a pointer to the j...
JSNewEnumerateOp
the type of objectops::enumerate. this callback overrides a portion of spidermon
key's default [[enumerate]] internal method. syntax typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, js::autoidvector &properties); // added in spidermon
keysidebar 38 typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, jsiterateop enum_op, js::mutablehandlevalue statep, js::mutablehandleid idp); // obsolete since jsapi 37 name type description cx jscontext * the context in which the enumeration is taking place. obj js::handleobject the object to be enumerated. properties js::autoidvector & out parameter. id array to populate with all property
keys. enum...
...sapi 37 specifies which step in iteration is happening. see the description below. statep js::mutablehandleid obsolete since jsapi 37 in/out parameter. the meaning depends on enum_op. see the description below. idp js::mutablehandleid obsolete since jsapi 37 in/out parameter. the meaning depends on enum_op. see the description below. description from spidermon
key 38, jsnewenumerateop is the type of objectops::enumerate. this callback overrides a portion of spidermon
key's default [[enumerate]] internal method. when an ordinary object is enumerated, that object and each object on its prototype chain is tested for an enumerate op, and those ops are called in order. the properties each op adds to the properties vector are added to the set of values the for-in...
...ated, that object and each object on its prototype chain is tested for an enumerate op, and those ops are called in order. the properties each op adds to the properties vector are added to the set of values the for-in loop will iterate over. all of this is nonstandard. an object is "enumerated" when it's the target of a for-in loop or js_enumerate. all other property inspection, including object.
keys(obj), goes through [[own
keys]]. the callback's job is to populate properties with all property
keys that the for-in loop should visit. before jsapi 37, jsnewenumerateop was the type of jsclass.enumerate. to use a jsnewenumerateop in a jsclass, set the jsclass_new_enumerate bit in the jsclass.flags field and set the jsclass.enumerate field to your jsnewenumerateop, casting it to jsenumerateop...
...(you can use private_to_jsval to tag the pointer to be stored). ...
JSObjectOps.dropProperty
see bug 408416 for details. ...
...backs. it may not otherwise call into the jsapi in ways that might trigger other property accesses. (in a js_threadsafe build, that would risk deadlock.) when finished with a locked property, the caller must release it by calling the dropproperty callback. the lifetime of the jsproperty * extends from the successful defineproperty or lookupproperty call to the dropproperty call. as a spidermon
key implementation detail, what is actually locked here (under the native implementation of jsobjectops) is not the property but some collection of objects including the object on which the property is defined. the granularity of the locking is up to the jsobjectops implementation; deadlock does not happen because each thread accesses only one property at a time. a single, built-in jsobjectops imple...
...ally locked here (under the native implementation of jsobjectops) is not the property but some collection of objects including the object on which the property is defined. the granularity of the locking is up to the jsobjectops implementation; deadlock does not happen because each thread accesses only one property at a time. a single, built-in jsobjectops implementation is used for most spidermon
key objects that are exposed to scripts. custom jsobjectops implementations can either retain the spidermon
key property storage and locking scheme (by copying all or most of the built-in jsobjectops) or replace it entirely. threads. in a js_threadsafe build, any consistency observed by multiple threads operating on the same data is provided solely by the property locking scheme described above. in s...
... that are exposed to scripts. custom jsobjectops implementations can either retain the spidermon
key property storage and locking scheme (by copying all or most of the built-in jsobjectops) or replace it entirely. threads. in a js_threadsafe build, any consistency observed by multiple threads operating on the same data is provided solely by the property locking scheme described above. in spidermon
key 1.8 and earlier, the main built-in jsobjectops implementation serialized all accesses to a given object's properties. (that is, for each object, all property accesses happened in some order, and what each thread observed was consistent with that order: no stale reads, for example.) however, spidermon
key does not guarantee this high degree of serialization. ...
JS_AddFinalizeCallback
cb jsfinalizecallback pointer to the new callback function to use. data void * passed to data parameter for jsfinalizecallback. ...
... cb jsfinalizecallback pointer to the new callback function to use. data void * passed to data parameter for jsfinalizecallback. ...
... cb jsfinalizecallback pointer to the new callback function to use. data void * passed to data parameter for jsfinalizecallback. ...
...sfreeop * a pointer to an instance of jsfreeop. status jsfinalizestatus one of the jsfinalizestatus constants, described below, indicating the stage of finalize. iscompartment bool false if all compartments are being collected, true if a compartment is being collected. data void * data parameter specified in js_addfinalizecallback. added in spidermon
key 38 name description jsfinalize_group_start called when preparing to sweep a group of compartments, before anything has been swept. the collector will not yield to the mutator before calling the callback with jsfinalize_group_end status. jsfinalize_group_end called when preparing to sweep a group of compartments. weak references to unmarked things have be...
AT APIs Support
introduction documentation is in progress still. but in the meantime it more up-to-date and contains more details than existed analogues for at-spi and msaa this documentation explains how makers of screen readers, voice dictation packages, onscreen
keyboards, magnification software and other assitive technologies can support gecko-based software. we provide for them the support of these products on windows, linux/unix and os x platforms. accessible gecko gecko is a rendering engine that firefox, seamon
key, netscape and yelp use. gecko can render a variety of content, not just html and supports
key web standards such as cascading style sheets, javascript and the w3c dom. gecko also handles the users
keystrokes and mouse clicks. gecko is the core architecture that we are adding acc...
.... this is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). developing a xul window is not that different from developing a web page, but the elements available to add widgets are more powerful and designed to be similar to desktop widgets. examples of xul applications: firefox - web-browser thunderbird - email client seamon
key - web-browser, advanced e-mail and newsgroup client, irc chat client, and html editing made simple sunbird - cross-platform calendar application kompozer - a complete web authoring system for linux desktop, microsoft windows and macintosh users to rival programs like frontpage and dreamweaver. open komodo - platform for building developer environments miro - a free, open source internet tv an...
...d products: this documentation applies to up-to-date product builds based on gecko 1.9.2 -- currently not available on official releases. however most of described features are supported starting from gecko 1.9.0 (firefox 3.0). however it's preferable to grab the current build of firefox or any other gecko-based product to be up to dated: firefox recent builds thunderbird recent builds seamon
key recent builds determining if accessibility is enabled in a firefox accessibility is enabled on windows and linux platforms by default. as well you might find helpful the about:accessibilityenabled firefox extension. supported at apis at apis terms microsoft active accessibility (msaa) an api devised by microsoft so that accessibility aids can track what's going on inside the user interfa...
...ses the number of xml languages including html to at. refer to accessible web specifications page to learn what and how markup languages are exposed. at apis implementation details refer to implementation details page to see how gecko supports interesting at api. there you will find information how at api interfaces, roles, states and etc are mapped into gecko accessibility api and visa versa.
keyboard user interface and api fortunately, gecko uses the standard
keyboard api's for each supported platform. the mozilla
keyboard shortcuts for content are similar to what is used in other browsers. here is a list of firefox
keyboard shortcuts. test tools here you will find a list of tools to test accessibility gecko-based applications. msaa msaa sdk tools - version 1.3 is recommended...
XForms Accessibility
xforms accessibility is working on the windows platform, and linux testing has not yet been done, although everything should work and is ready to be tested. you will find trunk builds of firefox at ftp.mozilla.org, trunk builds of xforms extension (windows) at ftp.mozilla.org or trunk builds of xforms extension (linux) ftp.mozilla.org. build it yourself if you would like to build firefox/seamon
key yourself then please ensure your .mozconfig file has the following option: ac_add_options --enable-extensions=default,xforms,schema-validation how to test there are two approaches to test xforms accessibility. the first is to use and assistive technology such as a screen reader, or an accessibility testing tool, to make sure xforms elements have proper accessible objects. or you may be guid...
... .mozconfig file has the following option: ac_add_options --enable-extensions=default,xforms,schema-validation how to test there are two approaches to test xforms accessibility. the first is to use and assistive technology such as a screen reader, or an accessibility testing tool, to make sure xforms elements have proper accessible objects. ...
...uided by toolkit checklist to check
keyboard navigation for xforms controls. you can try the following link to test xforms accessibility: visual xforms elements in xhtml document at bugzilla.mozilla.org visual xforms elements in xul document at bugzilla.mozilla.org you can see xforms sample tests at mozilla xforms project there are set of tests at beaufour.dk w3c's xforms test at w3.org
keyboard navigation issues navigation sequence though xforms spec declares navindex attribute to define the navigation sequence (see 1.0 specs or 1.1 specs) but rich schwerdtfeger (distinguished engineer, swg accessibility architect/strategist chair, ibm accessibility architecture review board) gave some clarification about navindex. he wrote: navindex was in xforms - it was stripped out as it was...
...allows form control elements to have child elements. therefore accessible children are formed from any accessible child elements of form control element and from elements that are introduced by its presentation. forms controls module some of form control elements may be represented in few ways by different widgets. this section lists accessible presentations for form control elements. input a
key xforms element to show and change the instance data to which it is bound (see the spec, the docs). the follwoing representations input element are accessible: text field - see the docs. checkbox - see the docs datepicker - see the docs. calendar - see the docs. days list - see the docs. months list - see the docs. secret used for inputting passwords (see the spec, the docs). this eleme...
Mozilla internal string guide
g class. the contents of nsastring always has to be regarded as in this encoding instead of ucs2. utf-16 is capable of representing the entire unicode character repertoire, and it efficiently maps to utf-32. (win32 w apis and mac os x natively use utf-16.) latin1 - 8-bit encoding for the first 256 unicode code points. used for http headers and for size-optimized storage in text node and spidermon
key strings. latin1 converts to utf-16 by zero-extending each byte to a 16-bit code unit. note that this kind of "latin1" is not available for encoding html, css, js, etc. specifying charset=latin1 means the same as charset=windows-1252. windows-1252 is a similar but different encoding used for interchange. in addition, there exist multiple other (legacy) encodings. the web-relevant ones are define...
...n idl, in parameters are read-only, and the c++ signatures for *string parameters follows the above guidelines by using const nsastring& for these parameters. out and inout parameters are defined simply as nsastring so that the callee can write to them. ...
...the implementation of getutf16string() will use aresult.assign to "return" the value. ...
... nsacstring& aresult) = 0; }; in the above example, utf16string is treated as a utf-16 string. the implementation of getutf16string() will use aresult.assign to "return" the value. in setutf16string() the value of the string can be used through a variety of methods including iterators, promiseflatstring, and assignment to other strings. in getvalue(), the first parameter, a
key, is treated as a raw sequence of 8-bit values. any non-ascii characters in a
key will be preserved when crossing xpconnect boundaries. the implementation of getvalue() will assign a utf-8 encoded 8-bit string into aresult. if the this method is called across xpconnect boundaries, such as from a script, then the result will be decoded from utf-8 into utf-16 and used as a unicode value. choosing a ...
nsIRegistry
gistry(2); // 2 signifies the applicationregistry, if i understand right var st = rs.enumerateallsubtrees(2); // 2 signifies "common", see libreg source (reg.h) for info now you have an nsienumerator that can report the subtrees. ...
... st.first(); do { var data = st.currentitem(); if( data instanceof ci.nsiregistrynode ) print("nsiregistrynode: " + data.nameutf8 + " (" + data.
key + ")"); st.next(); } while( components.lastresult == 0 ); } catch(e) {} now, the output is something like: profiles (344) profiles/default (530) profiles/foo (1046) profiles/bar (1518) the number inside the parenthesis is the "
key." you can use this
key with the rest of the nsiregistry api (see mxr). now, i know from visual inspection that there's a
key called "directory" for each profile. ...
...omponents.lastresult == 0 ); } catch(e) {} now, the output is something like: profiles (344) profiles/default (530) profiles/foo (1046) profiles/bar (1518) the number inside the parenthesis is the "
key." you can use this
key with the rest of the nsiregistry api (see mxr). now, i know from visual inspection that there's a
key called "directory" for each profile. i don't know how to get the other
keys' names automatically, but i do know how to look up the directory for a particular profile. ...
...s/bar (1518) the number inside the parenthesis is the "
key." you can use this
key with the rest of the nsiregistry api (see mxr). now, i know from visual inspection that there's a
key called "directory" for each profile. i don't know how to get the other
keys' names automatically, but i do know how to look up the directory for a particular profile. js> rs.getstringutf8(530, "directory") // 530:
key corresponding with profiles/default the output is something like: /home/lion/.mozilla/default/awp83kud.slt boo-yah! can we change it? js> rs.setstringutf8(530, "directory", "/home/lion/somewhere/else") js> rs.getstringutf8(530, "directory") /home/lion/somewhere/else yes! now, the only puzzle is: how do you save it? js> rs.flush() // this is not enough... perhaps if we quit with the xpconnect...
imgILoader
modules/libpr0n/public/imgiloader.idlscriptable please add a summary to this article. ...
...loader = components.classes["@mozilla.org/image/loader;1"] .getservice(components.interfaces.imgiloader); method overview imgirequest loadimage(in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cache
key, in imgirequest arequest, in nsichannelpolicy channelpolicy); imgirequest loadimagewithchannel(in nsichannel achannel, in imgidecoderobserver aobserver, in nsisupports cx, out nsistreamlistener alistener); boolean supportimagewithmimetype(in string mimetype); constants constant value description load_cors_anonymous 1 << 16 load_cors_use_credentials 1 << 17 methods loadimage() s...
..._cors_anonymous 1 << 16 load_cors_use_credentials 1 << 17 methods loadimage() start the load and decode of an image. ...
...libpr0n does not keep a strong ref to the observer; this prevents reference cycles. this means that callers of loadimage should make sure to cancel() the resulting request before the observer goes away. ...
nsIDOMEvent
everything marked as gecko 16.0 was previously available in that interface. see bug 761613. ...
...the target eventtarget. bubbling_phase 3 the current event phase is the bubbling phase. ...
...bbling_phase 3 the current event phase is the bubbling phase. ...
...event phase is the bubbling phase. ...
nsIDOMNSHTMLDocument
dom/interfaces/html/nsidomnshtmldocument.idlscriptable this interface defines methods and properties supported by gecko on the document object that are not part of dom level 2. ...
...h-text editing in mozilla for a list of supported commands. doshowui this is not implemented in gecko. value some commands require an argument. you can pass null for those commands that do not need an argument. return value true if the command was recognized, false otherwise. execcommandshowhelp() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11) this method never did anything but throw an exception, and was removed entirely in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11). boolean execcommandshowhelp( in domstring commandid ); parameters commandid the name of the command. return value this method is not supported and always throws an exception. getselection() domstring getselection(); paramete...
...ns true if the command has is active, false otherwise. querycommandsupported() boolean querycommandsupported( in domstring commandid ); parameters commandid the name of the command to query. return value returns true if the command is supported on the current range, false otherwise. querycommandtext() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11) this method never did anything but throw an exception, and was removed entirely in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11). domstring querycommandtext( in domstring commandid ); parameters commandid the name of the command to query. return value this method is not supported and always throws an exception. querycommandvalue() domstring querycommand...
...or compatibility with netscape 4.x, but does not actually do anything. void releaseevents( in long eventflags ); parameters eventflags routeevent() provided for compatibility with netscape 4.x, but does not actually do anything. void routeevent( in nsidomevent evt ); parameters evt write() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) void write( [optional] in domstring text ); parameters text the string to write to the document. writeln() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) void writeln( [optional] in domstring text ); parameters text the string to write to the document. a newline is automatically appended. implemented by clas...
nsIEditorSpellCheck
editor/idl/nsieditorspellcheck.idlnot scriptable provides spell checking commands for nsieditor instances. inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6) implemented by: @mozilla.org/editor/editorspellchecker;1. to create an instance, use: var editorspellcheck = components.classes["@mozilla.org/editor/editorspellchecker;1"] .createinstance(components.interfaces.nsieditorspellcheck); method overview void addwordtodictionary(in wstring word); boolean canspellcheck(); void checkcurrentdictionary(); boolean checkcurrentword(in wstring suggestedword); boolean checkcurrentwordnosuggest(in wstring suggestedword); astring getcurrentdictionary(); v...
...rd, in boolean alloccurrences ); parameters misspelledword the word to replace. replaceword the word with which to replace the misspelledword. alloccurrences if true, all occurrences of misspelledword are replaced with replaceword. if false, only the first occurrence is replaced. savedefaultdictionary() obsolete since gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. saves the currently selected dictionary as the default. the function uninitspellchecker() will also do this, but that function may not be called in some situations. this function allows the caller to force the default immediately. note: ...
...its use is discouraged since it could be removed at any time. try to avoid using it. saves the currently selected dictionary as the default. the function uninitspellchecker() will also do this, but that function may not be called in some situations. this function allows the caller to force the default immediately. note: this method was removed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6). since spelling dictionaries can now be selected per-site, this method is no longer needed. void savedefaultdictionary(); parameters none. setcurrentdictionary() selects the main dictionary to use. void setcurrentdictionary( in astring dictionary ); parameters dictionary the name of the dictionary to use. typically, this is an iso language code such as "en-us". setfilter() used...
...but not initspellchecker(), you can still call this function to clear the cached spell check object, and no preferences are saved. void uninitspellchecker(); parameters none. updatecurrentdictionary() updates the dictionary in use to be sure it corresponds to what the editor needs. void updatecurrentdictionary(); parameters none. remarks prior to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6), this method took one parameter, a reference to the nsieditor for which to update the spell checker. now that spell checker settings are per-site, this method takes no parameters. ...
nsIHttpChannelInternal
netwerk/protocol/http/nsihttpchannelinternal.idlscriptable an internal interface for http channels. using features exposed by this interface is not recommended, as it will change in unpredictable ways. ...
...read only. channelisfordownload boolean external handlers may set this to true to notify the channel that it is open on behalf of a download. documenturi nsiuri an http channel can own a reference to the document uri. ...
... see also nsihttpchannel nsichannel nsihttpupgradelistener ...
...okie with a consumer-provided cookie header, but using the channel's other information (uri's, prompters, date headers and so on.). void setcookie( in string acookieheader ); parameters acookieheader the cookie header to be parsed. setupfallbackchannel() sets up this channel as an application cache fallback channel. void setupfallbackchannel( in string afallback
key ); parameters afallback
key the fallback
key. see also nsihttpchannel nsichannel nsihttpupgradelistener ...
nsIMacDockSupport
to create an instance, use: var dock = components.classes["@mozilla.org/widget/macdocksupport;1"] .getservice(components.interfaces.nsimacdocksupport); see working with the mac os x dock for details and examples. ...
...is seen here: if you were to copy and follow that example you would replace the default native menu. ...
...idget/macdocksupport;1'].getservice(ci.nsimacdocksupport); console.log('docksupport:', docksupport); var win = services.wm.getmostrecentwindow('navigator:browser'); var macmenu = win.document.createelementns('http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() ...
...artup, so if you would like to access it on startup of the browser make sure to check and wait for the window to be loaded. this can be done by adding a event listenr for load of the hidden window. this is the recommended way to add to the native menu, just maniuplate the default menu dom element. ...
nsINavHistoryResultViewObserver
row the row on which the clicked cell is located. column the column in which the clicked cell is located. onselectionchanged() called when the selection in the tree changes. void onselectionchanged(); parameters none. onperformaction() this method provides a command api that can be used to invoke commands on the selection. the tree automatically invokes this method when certain
keys are pressed. for example, when the delete
key is pressed, this method is called with the string "delete". void onperformaction( in wstring action ); parameters action a string identifying the action to be performed. onperformactiononrow() this method provides a command api that can be used to invoke commands on the specified row. the tree automatically invokes this method when ce...
... void onperformactiononrow( in wstring action, in long row ); parameters action a string identifying the action to be performed. row the row on which to perform the action. ...
...essed, this method is called with the string "delete". void onperformaction( in wstring action ); parameters action a string identifying the action to be performed. onperformactiononrow() this method provides a command api that can be used to invoke commands on the specified row. the tree automatically invokes this method when certain
keys are pressed. for example, when the delete
key is pressed, this method is called with the string "delete". void onperformactiononrow( in wstring action, in long row ); parameters action a string identifying the action to be performed. row the row on which to perform the action. onperformactiononcell() this method provides a command api that can be used to invoke commands on a specified cell. the tree automatically i...
...ed with the string "delete". void onperformactiononrow( in wstring action, in long row ); parameters action a string identifying the action to be performed. row the row on which to perform the action. onperformactiononcell() this method provides a command api that can be used to invoke commands on a specified cell. the tree automatically invokes this method when certain
keys are pressed. for example, when the delete
key is pressed, this method is called with the string "delete". void onperformactiononcell( in wstring action, in long row, in nsitreecolumn column ); parameters action a string identifying the action to be performed. row the row in which the cell to perform the action upon is located. column the column in which the c...
nsIPlacesImportExportService
toolkit/components/places/nsiplacesimportexportservice.idlscriptable provides methods for exporting places data. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11) in the past, this interface also offered methods for importing places data, but those methods are now part of the bookmarkhtmlutils.jsm javascript code module. the interface name has been kept for compatibility reasons for code using the export service. implemented by: @mozilla.org/import-export-service;1 as a service: var placesimportexportservice = components.classes["@mozilla.org/import-export-service;1"] .getservice(components.interfaces.nsiplacesimportexportservice); met...
...rks.html file. void backupbookmarksfile(); parameters none. exporthtmltofile() saves the current bookmarks hierarchy to a bookmarks.html file. void exporthtmltofile( in nsilocalfile afile ); parameters afile an nsilocalfile indicating where to save the new bookmarks.html file. importhtmlfromfile() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11) note: this method has been removed; use the bookmarkhtmlutils.jsm javascript code module instead. loads the given bookmarks.html file and replaces it with the current bookmarks hierarchy (if aisinitialimport is true) or appends it (if aisinitialimport is false). three nsiobserverservice notifications are fired as a result of the import. "bookmarks-restore-begin" is fired just be...
... "html-initial" if aisinitialimport is true. the observer subject will be null. void importhtmlfromfile( in nsilocalfile afile, in boolean aisinitialimport ); parameters afile the html file to import into places. aisinitialimport whether this is an initial import or not. importhtmlfromfiletofolder() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11) note: this method has been removed; use the bookmarkhtmlutils.jsm javascript code module instead.loads the given bookmarks.html file and puts it in the given folder. three nsiobserverservice notifications are fired as a result of the import. "bookmarks-restore-begin" is fired just before the import is started. "bookmarks-restore-success" is fired right after the bookmarks are suc...
... is afolder. void importhtmlfromfiletofolder( in nsilocalfile afile, in print64 afolder, in boolean aisinitialimport ); parameters afile the file to import. afolder the id of the bookmarks folder into which to import the bookmarks. aisinitialimport whether or not this is an initial import. importhtmlfromuri() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. note: this method has been removed; use the bookmarkhtmlutils.jsm javascript code module instead. same thing as importhtmlfromfile(), but takes a uri instead. void importhtmlfromuri( in nsiuri auri, in boolean aisinitialimport ); ...
Component; nsIPrefBranch
component: nsiprefbranch modules/libpref/public/nsiprefbranch.idlscriptable this interface is used to manipulate the preferences data. this object may be obtained from the preferences service (nsiprefservice) and used to get and set default and/or user preferences across the application. inherits from: nsisupports last changed in gecko 58 (firefox 58 / thunderbird 58 / seamon
key 2.55) this object is created with a "root" value which describes the base point in the preferences "tree" from which this "branch" stems. preferences are accessed off of this root by using just the final portion of the preference. for example, if this object is created with the root "browser.startup.", the preferences "browser.startup.page", "browser.startup.homepage", and "browser.startup.homepage_ov...
... [optional] in string adefaultvalue ); parameters aprefname the string preference to retrieve. adefaultvalue requires gecko 54 optional - a default value to use if the preference does not exist (instead of throwing an exception). return value returns string - the value of the requested string preference. getstringpref() requires gecko 58 (firefox 58 / thunderbird 58 / seamon
key 2.55) called to get the state of an individual utf-8 string preference. utf8string getstringpref( in string aprefname, [optional] in utf8string adefaultvalue ); parameters aprefname the string preference to retrieve. adefaultvalue optional - a default value to use if the preference does not exist (instead of throwing an exception). return value returns utf8tring - the value of t...
...ue of the requested string preference. getchildlist() returns an array of strings representing the child preferences of the root of this branch. note: this method can be called on either a default or user branch but, in effect, always operates on both. (to call from javascript use children = nsiprefbranch.getchildlist("",obj), which will fill in obj.value with the count and return an array of
keys! (it is not void in javascript) void getchildlist( in string astartingat, out unsigned long acount, [array, size_is(acount), retval] out string achildarray ); parameters astartingat the point on the branch at which to start enumerating the child preferences. pass in "" to enumerate all preferences referenced by this branch. acount optional from gecko 2.0 receives the number of ele...
...ximum amount of data you can store in a string preference, consider storing data separately, for example in a flat file or an sqlite database. void setcharpref( in string aprefname, in string avalue ); parameters aprefname the string preference to set. avalue the string value to set the preference to. setstringpref() requires gecko 58 (firefox 58 / thunderbird 58 / seamon
key 2.55) called to set the state of an individual utf-8 string preference. note: the preferences system is not designed to store large amounts of data: all preferences are stored in a single file, which is read at the application startup. if you find yourself wondering what is the maximum amount of data you can store in a string preference, consider storing data separately, for example in a flat ...
nsIWebBrowserPersist
embedding/components/webbrowserpersist/nsiwebbrowserpersist.idlscriptable interface for persisting dom documents and uris to local or remote storage. inherits from: nsicancelable last changed in gecko 36.0 (firefox 36.0 / thunderbird 36.0 / seamon
key 2.33) implemented by: @mozilla.org/embedding/browser/nswebbrowser;1 and @mozilla.org/embedding/browser/nswebbrowserpersist;1. to create an instance, use: var webbrowserpersist = components.classes["@mozilla.org/embedding/browser/nswebbrowserpersist;1"] .createinstance(components.interfaces.nsiwebbrowserpersist); method overview void cancelsave(); void savechannel(in nsichannel achannel, in nsisupports afile); void savedocument(in nsidomdocument adocument, in nsisupports afile...
...siwebbrowserpersist); method overview void cancelsave(); void savechannel(in nsichannel achannel, in nsisupports afile); void savedocument(in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aoutputcontenttype, in unsigned long aencodingflags, in unsigned long awrapcolumn); void saveuri(in nsiuri auri, in nsisupports acache
key, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcontext aprivacycontext); void saveprivacyawareuri(in nsiuri auri, in nsisupports acache
key, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in boolean aisprivate); attributes ...
...6, this method should no longer be used from add-on code. please use downloads.createdownload() instead. as of firefox 36, a new parameter areferrerpolicy was added as the fourth argument, changing the number of parameters from 7 to 8 and shifting the order of the parameters in a backwards incompatible way. save the specified uri to file. void saveuri( in nsiuri auri, in nsisupports acache
key, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcontext aprivacycontext ); parameters auri uri to save to file. some implementations of this interface may also support nsnull to imply the currently loaded uri. acache
key an object representing the uri in the cache or nsnull. this can be a necko...
...nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcontext aprivacycontext ); parameters auri uri to save to file. some implementations of this interface may also support nsnull to imply the currently loaded uri. acache
key an object representing the uri in the cache or nsnull. this can be a necko cache
key, an nsiwebpagedescriptor, or the currentdescriptor of an nsiwebpagedescriptor. areferrer the referrer uri to pass with an http request or nsnull. areferrerpolicy the referrer policy to use for the request, taken from nsihttpchannel. apostdata post data to pass with an http request or nsnull. aextraheaders additional headers to supply with an http request or nsnull. afile target file. t...
nsIWindowsShellService
browser/components/shell/public/nsiwindowsshellservice.idlscriptable please add a summary to this article. inherits from: nsishellservice last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview string getregistryentry(in long ah
keyconstant, in string asub
keyname, in string avaluename); obsolete since gecko 1.8 void restorefilesettings(in boolean aforallusers); obsolete since gecko 1.9 void shortcutmaintenance(); attributes attribute type description desktopbackgroundcolor unsigned long the desktop background color, visible when no background image is used, or if the background image is centered and does not fill the entire screen. a rgb value, where (r << 24 | g << 16 | b) obsolete since gecko 1.8 unreadmailcount unsigned long t...
...type description desktopbackgroundcolor unsigned long the desktop background color, visible when no background image is used, or if the background image is centered and does not fill the entire screen. a rgb value, where (r << 24 | g << 16 | b) obsolete since gecko 1.8 unreadmailcount unsigned long the number of unread mail messages for the current user. read only. constants valid starting
keys for the windows registry. constant value description hkcr 0 h
key_classes_root. obsolete since gecko 1.8 hkcc 1 h
key_current_config. obsolete since gecko 1.8 hkcu 2 h
key_current_user. obsolete since gecko 1.8 hklm 3 h
key_local_machine. obsolete since gecko 1.8 hku 4 h
key_users. obsolete since gecko 1.8 methods getregistryentry() obsolete since gecko 1.8 (firefox 1...
... constant value description hkcr 0 h
key_classes_root. obsolete since gecko 1.8 hkcc 1 h
key_current_config. obsolete since gecko 1.8 hkcu 2 h
key_current_user. obsolete since gecko 1.8 hklm 3 h
key_local_machine. obsolete since gecko 1.8 hku 4 h
key_users. obsolete since gecko 1.8 methods getregistryentry() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) retrieves a windows registry entry value. string getregistryentry( in long ah
keyconstant, in string asub
keyname, in string avaluename ); parameters ah
keyconstant the starting
key, using the constants defined above. asub
keyname the sub
key to locate. avaluename the value to locate in the sub
key. the empty string returns the default value of the sub
key. return value the val...
... restorefilesettings() obsolete since gecko 1.9 (firefox 3) restores system settings to what they were before firefox modified them. ...
Using popup notifications
javascript code module. this code module is imported by the browser, so you don't need to do it explicitly yourself. then you can create the popup notification at the appropriate time like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", access
key: "d", callback: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions provided to the user through the drop-down menu. this notification looks like this: that's not very pretty; where's the icon? adding an icon to your notification...
... in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", access
key: "d", callback: function() { alert("doing something awesome!"); } }, [ { label: "first secondary option", access
key: "1", callback: function() { alert("first secondary option selected."); } }, { label: "second secondary option", access...
...choosing the ...
... ...
PKCS #11 Netscape Trust Objects - Network Security Services
it does not specify a way to store trust objects. trust objects are used to assign an explicit level of trust to a certificate. examples of trust assertions are certificate authority root certificates. this document outlines the way in which nss stores trust objects via pkcs#11. this is not a new design, but documentation of the method already in use. trust objects a trust object describes a level of trust in a certificate for a given usage or purpose. ...
... level of trust for ipsec end system purpose. cka_trust_ipsec_tunnel ck_trust level of trust for ipsec tunnel purpose. cka_trust_ipsec_user ck_trust level of trust for ipsec user purpose. cka_trust_time_stamping ck_trust level of trust for time stamping purpose. ...
... trust for ipsec tunnel purpose. cka_trust_ipsec_user ck_trust level of trust for ipsec user purpose. cka_trust_time_stamping ck_trust level of trust for time stamping purpose. cka_trust_digital_signature ck_trust level of trust for digital signature
key usage purpose. cka_trust_non_repudiation ck_trust level of trust for non-repudiation
key usage purpose. ...
... cka_trust_ipsec_user ck_trust level of trust for ipsec user purpose. cka_trust_time_stamping ck_trust level of trust for time stamping purpose. cka_trust_digital_signature ck_trust level of trust for digital signature
key usage purpose. cka_trust_non_repudiation ck_trust level of trust for non-repudiation
key usage purpose. cka_trust_
key_encipherment ck_trust level of trust for
key-encipherment
key usage purpose. cka_trust_
key_agreement ck_trust level of trust for
key-agreement
key usage purpose. cka_trust_
key_cert_sign ck_trust level of trust for certificate signing
key usage purpose. cka_trust_
key_crl_sign ck_trust level of trust for crl signing
key usage purpose. ...
Introduction to DOM Inspector - Firefox Developer Tools
dom inspector is standalone; it supports all toolkit applications, and it's possible to embed it in your own xulrunner app. dom inspector can serve as a sanity check to verify the state of the dom, or it can be used to manipulate the dom by hand, if desired. note: starting with firefox 3, the dom inspector is not included in firefox by default; instead, you must download and install it from the mozilla add-ons web site. ...
...spector is not included in firefox by default; instead, you must download and install it from the mozilla add-ons web site. (note: this is now a dead link.) when you first start the dom inspector, you are presented with a two-pane application window that looks a little like the main mozilla browser. like the browser, the dom inspector includes an address bar, and some of the same menus. in seamon
key additional global menus will be available. inspecting a document when the dom inspector opens, it may or may not load an associated document, depending on the host application. if the dom inspector doesn't automatically load a document or loads a document other than the one you'd like to inspect, you can select the desired document a few different ways. inspecting content documents the insp...
...ment, depending on the host application. if the dom inspector doesn't automatically load a document or loads a document other than the one you'd like to inspect, you can select the desired document a few different ways. inspecting content documents the inspect content document menupopup can be accessed from the file menu, and it will list currently loaded content documents. in firefox and seamon
key browser, these will be the webpages you have opened in tabs. for thunderbird and seamon
key mail and news, any messages you're viewing will be listed here. inspecting chrome documents the inspect chrome document menupopup can be accessed from the file menu , and it will contain the list of currently loaded chrome windows and subdocuments. a browser window and the dom inspector are likely be alre...
...ormation displayed in the object pane. searching for nodes in the dom another way to inspect the dom is to search for particular elements you're interested in by id, class, or attribute. when you select edit > find nodes... or press ctrl + f, the dom inspector displays a find dialog that lets you find elements in various ways, and that gives you incremental searching by way of the <f3> shortcut
key. updating the dom dynamically another feature to mention in this introduction is the ability is the ability the dom inspector gives you to dynamically update information reflected in the dom about web pages, user interface, and other elements. note that when the dom inspector displays information about a particular node or subtree, it presents individual nodes and their values (in the dom, at...
Browser Console - Firefox Developer Tools
true in about:config, or set the "enable browser chrome and add-on debugging toolboxes" (firefox 40 and later) option in the developer tool settings. opening the browser console you can open the browser console in one of two ways: from the menu: select "browser console" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos). from the
keyboard: press ctrl+shift+j (or cmd+shift+j on a mac). you can also start the browser console by launching firefox from the command line and passing the -jsconsole argument: /applications/firefoxaurora.app/contents/macos/firefox-bin -jsconsole the browser console looks like this: you can see that the browser console looks and behaves very much like the web console: most of the window is oc...
...d by default. to enable it set the devtools.chrome.enabled preference to true in about:config, or set the "enable chrome debugging" option in the developer tool settings. like the web console, the command line interpreter enables you to evaluate javascript expressions in real time:also like the web console's command line interpreter, this command line supports autocomplete, history, and various
keyboard shortcuts and helper commands. if the result of a command is an object, you can click on the object to see its details. but while the web console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. you can confirm this by evaluating window: this means you can control the browser: opening, c...
...e restart. modifying the browser ui since the global window object is the browser's chrome window, you can also modify the browser's user interface. ...
...ttp://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul", "menuitem"); makethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); on macos, this similar code will add a new item to the "tools" menu: var parent = window.document.getelementbyid("menu_toolspopup"); var makethetea = gbrowser.ownerdocument.defaultview.document.createelementns("http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul", "menuitem"); makethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); ...
Waterfall - Firefox Developer Tools
x-shadow, can be expensive, especially if you are applying them in a transition where the browser has to calculate them in every frame. if you're seeing drops in the frame rate, especially during graphically-intensive operations and transitions, check the waterfall for long green markers. ...
...sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish. ...
... that it can perform garbage collection in fairly small increments, letting the program run in between. sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish. in trying to avoid gc events, and especially non-incremental gc events, it's wise not to try to optimize for the specific implementation of the javascript engine. ...
...s, it's wise not to try to optimize for the specific implementation of the javascript engine. spidermon
key uses a complex set of heuristics to determine when gc is needed, and when non-incremental gc in particular is needed. in general, though: gc is needed when a lot of memory is being allocated non-incremental gc is usually needed when the memory allocation rate is high enough that spidermon
key may run out of memory during incremental gc when the waterfall records a gc marker it indicates: whether the gc was incremental or not the reason the gc was performed if the gc was non-incremental, the reason it was non-incremental starting in firefox 46, if the gc event was caused by allocation pressure, a link appears, labeled "show allocation triggers". click the link to see the alloca...
AesCtrParams - Web APIs
the aesctrparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrap
key(), or subtlecrypto.unwrap
key(), when using the aes-ctr algorithm. aes is a block cipher, meaning that it splits the message into blocks and encrypts it a block at a time. in ctr mode, every time a block of the message is encrypted, an extra block of data is mixed in. this extra block is called the "counter block". ...
... typically this is achieved by splitting the initial counter block value into two concatenated parts: a nonce (that is, a number that may only be used once). ...
... it splits the message into blocks and encrypts it a block at a time. in ctr mode, every time a block of the message is encrypted, an extra block of data is mixed in. this extra block is called the "counter block". a given counter block value must never be used more than once with the same
key: given a message n blocks long, a different counter block must be used for every block. if the same
key is used to encrypt more than one message, a different counter block must be used for all blocks across all messages. typically this is achieved by splitting the initial counter block value into two concatenated parts: a nonce (that is, a number that may only be used once). the nonce part of the block stays the same for every block in the message. each time a new message is to be encrypted, a...
... across all messages. typically this is achieved by splitting the initial counter block value into two concatenated parts: a nonce (that is, a number that may only be used once). the nonce part of the block stays the same for every block in the message. each time a new message is to be encrypted, a new nonce is chosen. nonces don't have to be secret, but they must not be reused with the same
key. a counter. this part of the block gets incremented each time a block is encrypted. essentially: the nonce should ensure that counter blocks are not reused from one message to the next, while the counter should ensure that counter blocks are not reused within a single message. note: see appendix b of the nist sp800-38a standard for more information. properties name a domstring. this sh...
AuthenticatorAssertionResponse.signature - Web APIs
nticatorassertionresponse interface is an arraybuffer object which is the signature of the authenticator for both authenticatorassertionresponse.authenticatordata and a sha-256 hash of the client data (authenticatorassertionresponse.clientdatajson). this signature will be sent to the server for control, as part of the response. it provides the proof that an authenticator does possess the private
key which was used for the credential's generation. note: an authenticatorassertionresponse instance is available on public
keycredential.response after calling navigator.credentials.get(). note: this property may only be used in top-level contexts and will not be available in an <iframe> for example. syntax signature = authenticatorassertionresponse.signature value an arraybuffer object whi...
...an authenticatorassertionresponse instance is available on public
keycredential.response after calling navigator.credentials.get(). note: this property may only be used in top-level contexts and will not be available in an <iframe> for example. syntax signature = authenticatorassertionresponse.signature value an arraybuffer object which the signature of the authenticator (using its private
key) for both authenticatorassertionresponse.authenticatordata and a sha-256 hash given by the client for its data (the challenge, the origin, etc. and available from authenticatorassertionresponse.clientdatajson). ...
...ivate
key) for both authenticatorassertionresponse.authenticatordata and a sha-256 hash given by the client for its data (the challenge, the origin, etc. and available from authenticatorassertionresponse.clientdatajson). ...
... recommendation initial definition. ...
AuthenticatorAssertionResponse - Web APIs
this interface inherites from authenticatorresponse. note: this interface is restricted to top-level contexts. use from within an <iframe> element will not have any effect. properties authenticatorassertionresponse.clientdatajson secure contextread only the client data for the authentication, such as origin and challenge. ...
...the relying party id hash (rpidhash), a signature counter, test of user presence and user verification flags, and any extensions processed by the authenticator. authenticatorassertionresponse.signature secure contextread only an assertion signature over authenticatorassertionresponse.authenticatordata and authenticatorresponse.clientdatajson. the assertion signature is created with the private
key of
keypair that was created during the navigator.credentials.create() call and verified using the public
key of that same
keypair. authenticatorassertionresponse.userhandle secure contextread only an arraybuffer containing an opaque user identifier. methods none. examples var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publi...
...of
keypair that was created during the navigator.credentials.create() call and verified using the public
key of that same
keypair. authenticatorassertionresponse.userhandle secure contextread only an arraybuffer containing an opaque user identifier. methods none. ...
... recommendation initial definition. ...
Document - Web APIs
baleventhandlers.ongotpointercapture is an eventhandler representing the code to be called when the gotpointercapture event type is raised. globaleventhandlers.oninput is an eventhandler representing the code to be called when the input event is raised. globaleventhandlers.oninvalid is an eventhandler representing the code to be called when the invalid event is raised. globaleventhandlers.on
keydown is an eventhandler representing the code to be called when the
keydown event is raised. globaleventhandlers.on
keypress is an eventhandler representing the code to be called when the
keypress event is raised. globaleventhandlers.on
keyup is an eventhandler representing the code to be called when the
keyup event is raised. globaleventhandlers.onload is an eventhandler representing the cod...
... fired when the user initiates a paste action through the browser's user interface. also available via the onpaste property. drag & drop events drag fired every few hundred milliseconds as an element or text selection is being dragged by the user. also available via the ondrag property. dragend fired when a drag operation is being ended (by releasing a mouse button or hitting the escape
key). also available via the ondragend property. dragenter fired when a dragged element or text selection enters a valid drop target. also available via the ondragenter property. dragexit fired when an element is no longer the drag operation's immediate selection target. also available via the ondragexit property. dragleave fired when a dragged element or text selection leaves a valid drop t...
...n is dropped on a valid drop target. also available via the ondrop property. fullscreen events fullscreenchange fired when the document transitions into or out of full-screen mode. also available via the onfullscreenchange property. fullscreenerror fired if an error occurs while attempting to switch into or out of full-screen mode. also available via the onfullscreenerror property.
keyboard events
keydown fired when a
key is pressed. also available via the on
keydown property.
keypress fired when a
key that produces a character value is pressed down. also available via the on
keypress property.
keyup fired when a
key is released. also available via the on
keyup property. load & unload events domcontentloaded fired when the document has been completely loaded and...
...s). document.popupnode returns the node upon which a popup was invoked. document.tooltipnode returns the node which is the target of the current tooltip. mozilla also define some non-standard methods: document.execcommandshowhelp()obsolete since gecko 14 this method never did anything and always threw an exception, so it was removed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11). document.getboxobjectfor() use the element.getboundingclientrect() method instead. document.loadoverlay()obsolete since gecko 61 loads a xul overlay dynamically. this only works in xul documents. document.querycommandtext()obsolete since gecko 14 this method never did anything but throw an exception, and was removed in gecko 14 (firefox 14 / thunderbird 14 / seamon
key 2.11). inte...
EffectTiming - Web APIs
properties delay optional the number of milliseconds to delay the start of the animation. defaults to 0. ...
... properties delay optional the number of milliseconds to delay the start of the animation. defaults to 0. ...
... properties delay optional the number of milliseconds to delay the start of the animation. defaults to 0. ...
... properties delay optional the number of milliseconds to delay the start of the animation. defaults to 0. ...
Element.animate() - Web APIs
the element interface's animate() method is a shortcut method which creates a new animation, applies it to the element, then plays the animation. it returns the created animation object instance. elements can have multiple animations applied to them. you can get a list of the animations that affect an element by calling element.getanimations(). syntax var animation = element.animate(
keyframes, options); parameters
keyframes either an array of
keyframe objects, or a
keyframe object whose property are arrays of values to iterate over. see
keyframe formats for more details. options either an integer representing the animation's duration (in milliseconds), or an object containing one or more timing properties: id optional a property unique to animate(): a domstring with...
...tion to iteration in this animation. can be set to accumulate or replace (see above). defaults to replace. return value returns an animation. examples in the demo down the rabbit hole (with the web animation api), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely. ...
...to replace. return value returns an animation. examples in the demo down the rabbit hole (with the web animation api), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely. notice the array of objects passed as
keyframes and also the timing options block. document.getelementbyid("tunnel").animate([ //
keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from
keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single
keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider ...
...tey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from
keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single
keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the
keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied. specifications specification status comment web animations level 2the definition of '
keyframeanimationoptions.iterationcomposite' in that specification. draft added the iterationcomposite opti...
Element - Web APIs
element, or null if no open shadow root is present. element.openorclosedshadowroot read only returns the shadow root that is hosted by the element, regardless if its open or closed. available only to webextensions. element.slot returns the name of the shadow dom slot the element is inserted in. element.tabstop is a boolean indicating if the element can receive input focus via the tab
key. element.tagname read only returns a string with the name of the tag for the given element. element.undomanager read only returns the undomanager associated with the element. element.undoscope is a boolean indicating if the element is an undo scope host, or not. note: dom level 3 defined namespaceuri, localname and prefix on the node interface. in dom4 they were moved to element. ...
...ute with the specified name and namespace, from the current node. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. cancel fires on a <dialog> when the user instructs the browser that they wish to dismiss the current open dialog. for example, the browser might fire this event when the user presses the esc
key or clicks a "close dialog" button which is part of the browser's ui. also available via the oncancel property. error fired when a resource failed to load, or can't be used. for example, if a script has an execution error or an image can't be found or is invalid. also available via the onerror property. scroll fired when the document view or an element has been scrolled. also available via ...
...us. focusout fired when an element is about to lose focus. fullscreen events fullscreenchange sent to an element when it transitions into or out of full-screen mode. also available via the onfullscreenchange property. fullscreenerror sent to an element if an error occurs while attempting to switch it into or out of full-screen mode. also available via the onfullscreenerror property.
keyboard events
keydown fired when a
key is pressed. also available via the on
keydown property.
keypress fired when a
key that produces a character value is pressed down. also available via the on
keypress property.
keyup fired when a
key is released. also available via the on
keyup property. mouse events auxclick fired when a non-primary pointing device button (e.g., any mouse butto...
...e via the onclick property. contextmenu fired when the user attempts to open a context menu. also available via the oncontextmenu property. dblclick fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element. also available via the ondblclick property. domactivate occurs when an element is activated, for instance, through a mouse click or a
keypress. mousedown fired when a pointing device button is pressed on an element. also available via the onmousedown property. mouseenter fired when a pointing device (usually a mouse) is moved over the element that has the listener attached. also available via the onmouseenter property. mouseleave fired when the pointer of a pointing device (usually a mouse) is moved out of an element that h...
Option() - Web APIs
elected optional a boolean that sets the option's selected state; the default is false (not selected). if omitted, even if the defaultselected argument is true, the option is not selected. ...
...nal a boolean that sets the option's selected state; the default is false (not selected). if omitted, even if the defaultselected argument is true, the option is not selected. ...
...he option's selected state; the default is false (not selected). if omitted, even if the defaultselected argument is true, the option is not selected. ...
...e, six]; options.foreach(function(element,
key) { s[
key] = new option(element,
key); }); append options with different parameters /* assuming we have the following html <select id="s"> <option>first</option> <option>second</option> <option>third</option> </select> */ var s = document.getelementbyid('s'); var options = [ 'zero', 'one', 'two' ]; options.foreach(function(element,
key) { if (element == 'zero') { s[s.options.length] = new option(element, s.options.length, false, false); } if (element == 'one') { s[s.options.length] = new option(element, s.options.length, true, false); // will add the "selected" attribute } if (element == 'two') { s[s.options.length] = new option(element, s.options.length, false, true); // just will be selected in "view" ...
IDBCursor.update() - Web APIs
the update() method of the idbcursor interface returns an idbrequest object, and, in a separate thread, updates the value at the current position of the cursor in the object store. if the cursor points to a record that has just been deleted, a new record is created. be aware that you can't call update() (or idbcursor.delete()) on cursors obtained from idbindex.open
keycursor(). for such needs, you have to use idbindex.opencursor() instead. note: this feature is available in web workers. syntax var anidbrequest = myidbcursor.update(value); parameters value the new value to be stored at the current position. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types...
...ect on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbcursor's transaction is inactive. readonlyerror the transaction mode is read only. invalidstateerror the cursor was created using idbindex.open
keycursor, is currently being iterated, or has iterated past its end. dataerror the underlying object store uses in-line
keys and the property in the value at the object store's
key path does not match the
key in this cursor's position. datacloneerror the data being stored could not be cloned by the internal structured cloning algorithm. example in this simple...
...be cloned by the internal structured cloning algorithm. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. if the albumtitle of the current cursor is "a farewell to kings", we update year the album was released using var request = cursor.update();. note that you cannot change primary
keys using cursor.update(), hence us not changing the album title; this would ruin the integrity of the data. in such a situation, you would have to delete the record altogether and then add a new one using idbobjectstore.add. note also that you can't directly put cursor.value into an update call, hence the below example using an intermediary updatedata variable. the cursor does not require us to se...
...hence us not changing the album title; this would ruin the integrity of the data. in such a situation, you would have to delete the record altogether and then add a new one using idbobjectstore.add. note also that you can't directly put cursor.value into an update call, hence the below example using an intermediary updatedata variable. the cursor does not require us to select the data based on a
key; we can just grab all of it. also note that in each iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function updateresult() { list.innerhtml = ''; const transaction = db.transaction(['rushalbumlist'], 'readwrite'); const objectstore = transaction.o...
IDBFactory.open() - Web APIs
efixes // of implementations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...tations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...ndow.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
IDBObjectStore.get() - Web APIs
the get() method of the idbobjectstore interface returns an idbrequest object, and, in a separate thread, returns the object store selected by the specified
key. this is for retrieving specific records from an object store. if a value is successfully found, then a structured clone of it is created and set as the result of the request object. note: this method produces the same result for: a) a record that doesn't exist in the database and b) a record that has an undefined value. to tell these situations apart, call the opencursor() method with the same
key. ...
... object. note: this method produces the same result for: a) a record that doesn't exist in the database and b) a record that has an undefined value. to tell these situations apart, call the opencursor() method with the same
key. that method provides a cursor if the record exists, and no cursor if it does not. note: this feature is available in web workers. syntax var request = objectstore.get(
key); parameters
key the
key or
key range that identifies the record to be retrieved. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbobjectstore's transaction is inactive. ...
...he
key or
key range that identifies the record to be retrieved. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbobjectstore's transaction is inactive. dataerror the
key or
key range provided contains an invalid
key. invalidstateerror the idbobjectstore has been deleted or removed. example in the following code snippet, we open a read/write transaction on our database and get one specific record from object store using get() — a sample record with the
key "walk dog". once this data object is retrieved, you could then update it usin...
...ne transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to get a record by
key from the object store var objectstorerequest = objectstore.get("walk dog"); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; var myrecord = objectstorerequest.result; }; }; specifications specification status comment indexed database api 2.0the definition of 'get()...
IDBObjectStore.put() - Web APIs
. it returns an idbrequest object, and, in a separate thread, creates a structured clone of the value and stores the cloned value in the object store. this is for adding new records, or updating existing records in an object store when the transaction's mode is readwrite. if the record is successfully stored, then a success event is fired on the returned request object with the result set to the
key for the stored record, and the transaction set to the transaction in which this object store is opened. the put method is an update or insert method. see the idbobjectstore.add method for an insert only method. bear in mind that if you have a idbcursor to the record you want to update, updating it with idbcursor.update() is preferable to using idbobjectstore.put(). doing so makes it clear that...
...thod. bear in mind that if you have a idbcursor to the record you want to update, updating it with idbcursor.update() is preferable to using idbobjectstore.put(). doing so makes it clear that an existing record will be updated, instead of a new record being inserted. note: this feature is available in web workers. syntax let request = objectstore.put(item); let request = objectstore.put(item,
key); parameters item the item you wish to update (or insert).
key optional the primary
key of the record you want to update (e.g. from idbcursor.primary
key). this is only needed for object stores that have an autoincrement primary
key, therefore the
key is not in a field on the record object. in such cases, calling put(item) will always insert a new record, because it doesn't know what existi...
...tions this method may raise a domexception of one of the following types: exception description readonlyerror the transaction associated with this operation is in read-only mode. transactioninactiveerror this idbobjectstore's transaction is inactive. dataerror any of the following conditions apply: the object store uses in-line
keys or has a
key generator, and a
key parameter was provided. the object store uses out-of-line
keys and has no
key generator, and no
key parameter was provided. the object store uses in-line
keys but no
key generator, and the object store's
key path does not yield a valid
key. the
key parameter was provided but does not contain a valid
key. invalidstateerror the ...
...nerator, and the object store's
key path does not yield a valid
key. the
key parameter was provided but does not contain a valid
key. invalidstateerror the idbobjectstore has been deleted or removed. datacloneerror the data being stored could not be cloned by the internal structured cloning algorithm. parameters value the value to be stored.
key the
key to use to identify the record. if unspecified, it results to null. if the object store has a
key generator (e.g. autoincrement) the
key of the object must be passed in to update the object. example the following example requests a given record title; when that request is successful the onsuccess function gets the associated record from the idbobjectstore (made available as objectstore...
IDBVersionChangeEvent.newVersion - Web APIs
efixes of // implementations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...tations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...ndow.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
IDBVersionChangeEvent - Web APIs
prefixes of implementations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...tations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...ndow.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
...indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. ...
Transcoding assets for Media Source Extensions - Web APIs
mp4info utility to list the atoms of an mp4. note: the fragmented version is slightly larger than the original, due to additional metadata spread throughout the file. this is usually a file size increase of 1 percent or less. ...
...original, due to additional metadata spread throughout the file. this is usually a file size increase of 1 percent or less. ...
...dy an mp4, ffmpeg can handle emitting a properly fragmented mp4 during the transcode process, with the -movflags frag_
keyframe+empty_moov command line flag: $ ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_
keyframe+empty_moov bunny_fragmented.mp4 if you already have an mp4, but it's not properly fragmented, you can again use ffmpeg: $ ffmpeg -i non_fragmented.mp4 -movflags frag_
keyframe+empty_moov fragmented.mp4 in both cases, chrome may require an extra movie flag to be set: -movflags frag_
keyframe+empty_moov+default_base_moof having a properly fragmented mp4 file is all you need to get started. if you wish to employ adaptive bitrate streaming, you'll have to create encodings at multiple resolutions. while mse is flexible enough to allow you to make your implementati...
...ia file (video) video_02000.mp4 $ tree -l 2 output output ├── audio │ └── und ├── stream.mpd └── video ├── 1 ├── 2 ├── 3 ├── 4 └── 5 8 directories, 1 file note: mp4-dash-encode.py does not display ffmpeg error messages. you can see it by specifying the -d option. note: if "invalid duration specification for force_
key_frames: 'expr:eq(mod(n" is displayed as an error message, modify mp4-dash-encode.py and remove two "'" from "-force_
key_frames 'expr:eq(mod(n,%d),0)'". summary with your video properly encoded and adaptive bitrate media generated, you're now ready to begin adaptive bitrate streaming on the web using dash and mse. ...
Capabilities, constraints, and settings - Web APIs
videotrack = audiotrack = null; videoelement.srcobject = null; }); this simply stops the active tracks, sets the videotrack and audiotrack variables to null so we know they're gone, and removes the stream from the <video> element by setting htmlmediaelement.srcobject to null. ...
...ps the active tracks, sets the videotrack and audiotrack variables to null so we know they're gone, and removes the stream from the <video> element by setting htmlmediaelement.srcobject to null. simple tab support in the editor this code adds simple support for tabs to the <textarea> elements by making the tab
key insert two space characters when either constraint edit box is focused. ...
...track and audiotrack variables to null so we know they're gone, and removes the stream from the <video> element by setting htmlmediaelement.srcobject to null. simple tab support in the editor this code adds simple support for tabs to the <textarea> elements by making the tab
key insert two space characters when either constraint edit box is focused. ...
...dler(event) { if (event.
key == "tab") { let elem = event.target; let str = elem.value; let position = elem.selectionstart; let newstr = str.substring(0, position) + " " + str.substring(position, str.length); elem.value = newstr; elem.selectionstart = elem.selectionend = position + 2; event.preventdefault(); } } videoconstrainteditor.addeventlistener("
keydown",
keydownhandler, false); audioconstrainteditor.addeventlistener("
keydown",
keydownhandler, false); show constrainable properties the browser supports the last significant piece of the puzzle: code that displays, for the user's reference, a list of the constrainable properties which their browser supports. each property is a link to its documentation on mdn for the user's convenience. see ...
MouseEvent - Web APIs
y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mouseevent() creates a mouseevent object. properties this interface also inherits properties of its parents, uievent and event. mouseevent.alt
key read only returns true if the alt
key was down when the mouse event was fired. mouseevent.button read only the button number that was pressed (if applicable) when the mouse event was fired. mouseevent.buttons read only the buttons being depressed (if any) when the mouse event was fired. mouseevent.clientx read only the x coordinate of the mouse pointer in local (dom content) coordinat...
...mber that was pressed (if applicable) when the mouse event was fired. mouseevent.buttons read only the buttons being depressed (if any) when the mouse event was fired. mouseevent.clientx read only the x coordinate of the mouse pointer in local (dom content) coordinates. mouseevent.clienty read only the y coordinate of the mouse pointer in local (dom content) coordinates. mouseevent.ctrl
key read only returns true if the control
key was down when the mouse event was fired. mouseevent.meta
key read only returns true if the meta
key was down when the mouse event was fired. mouseevent.movementx read only the x coordinate of the mouse pointer relative to the position of the last mousemove event. mouseevent.movementy read only the y coordinate of the mouse pointer relative to th...
...e hit region affected by the event. if no hit region is affected, null is returned. mouseevent.relatedtarget read only the secondary target for the event, if there is one. mouseevent.screenx read only the x coordinate of the mouse pointer in global (screen) coordinates. mouseevent.screeny read only the y coordinate of the mouse pointer in global (screen) coordinates. mouseevent.shift
key read only returns true if the shift
key was down when the mouse event was fired. mouseevent.which read only the button being pressed when the mouse event was fired. mouseevent.mozpressure read only the amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). instead of using this de...
...or mouseevent.clienty constants mouseevent.webkit_force_at_mouse_down read only minimum force necessary for a normal click mouseevent.webkit_force_at_force_mouse_down read only minimum force necessary for a force click methods this interface also inherits methods of its parents, uievent and event. mouseevent.getmodifierstate() returns the current state of the specified modifier
key. see the
keyboardevent.getmodifierstate() for details. mouseevent.initmouseevent() initializes the value of a mouseevent created. if the event has already being dispatched, this method does nothing. example this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods. html <p><label><input type="checkbox" id="checkbox"> ...
Pbkdf2Params - Web APIs
the pbkdf2params dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.derive
key(), when using the pbkdf2 algorithm. properties name a domstring. this should be set to pbkdf2. hash a domstring representing the digest algorithm to use. this may be one of: sha-1 sha-256 sha-384 sha-512 warning: sha-1 is considered vulnerable in most cryptographic applications, but is still considered safe in pbkdf2. however, it's advisable to transition away from it everywhere, so unless you need to use sha-1, don't. use a different digest algorithm instead. ...
... sha-384 sha-512 warning: sha-1 is considered vulnerable in most cryptographic applications, but is still considered safe in pbkdf2. however, it's advisable to transition away from it everywhere, so unless you need to use sha-1, don't. use a different digest algorithm instead. salt a buffersource. this should be a random or pseudo-random value of at least 16 bytes. ...
...ng: sha-1 is considered vulnerable in most cryptographic applications, but is still considered safe in pbkdf2. however, it's advisable to transition away from it everywhere, so unless you need to use sha-1, don't. use a different digest algorithm instead. salt a buffersource. this should be a random or pseudo-random value of at least 16 bytes. unlike the input
key material passed into derive
key(), salt does not need to be kept secret. iterations a number representing the number of times the hash function will be executed in derive
key(). this determines how computationally expensive (that is, slow) the derive
key() operation will be. in this context, slow is good, since it makes it more expensive for an attacker to run a dictionary attack against the
keys. the general guidance here is t...
...w computationally expensive (that is, slow) the derive
key() operation will be. in this context, slow is good, since it makes it more expensive for an attacker to run a dictionary attack against the
keys. the general guidance here is to use as many iterations as possible, subject to keeping an acceptable level of performance for your application. examples see the examples for subtlecrypto.derive
key(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.pbkdf2params' in that specification. recommendation ...
RTCPeerConnection.generateCertificate() - Web APIs
rtcpeerconnection.generatecertificate() is a static method, so it is always called on the rtcpeerconnection interface itself, not an instance thereof. return value a reference to an rtccertificate object. ...
... rtcpeerconnection.generatecertificate() is a static method, so it is always called on the rtcpeerconnection interface itself, not an instance thereof. return value a reference to an rtccertificate object. ...
... rtcpeerconnection.generatecertificate() is a static method, so it is always called on the rtcpeerconnection interface itself, not an instance thereof. return value a reference to an rtccertificate object. ...
... rtcpeerconnection.generatecertificate() is a static method, so it is always called on the rtcpeerconnection interface itself, not an instance thereof. return value a reference to an rtccertificate object. ...
Selection - Web APIs
editing host an editable element (e.g., an html element with contenteditable set, or ...
... editing host an editable element (e.g., an html element with contenteditable set, or the html child of a document that has designmode enabled). focus of a selection the focus of a selection is the end point of the selection. ...
... not move. editing host an editable element (e.g., an html element with contenteditable set, or the html child of a document that has designmode enabled). focus of a selection the focus of a selection is the end point of the selection. when making a selection with a mouse, the focus is where in the document the mouse button is released. as the user changes the selection using the mouse or the
keyboard, the focus is the end of the selection that moves. this is not the same as the focused element of the document, as returned by document.activeelement. range a range is a contiguous part of a document. a range can contain entire nodes as well as portions of nodes (such as a portion of a text node). a user will normally only select a single range at a time, but it's possible for a user to...
...ves. this is not the same as the focused element of the document, as returned by document.activeelement. range a range is a contiguous part of a document. a range can contain entire nodes as well as portions of nodes (such as a portion of a text node). a user will normally only select a single range at a time, but it's possible for a user to select multiple ranges (e.g., by using the control
key). a range can be retrieved from a selection as a range object. range objects can also be created via the dom and programmatically added or removed from a selection. specifications specification status comment selection apithe definition of 'selection' in that specification. working draft the selection api specification is based on the html editing apis specificati...
Using Service Workers - Web APIs
page/site. the install event is fired when an install is successfully completed. the install event is generally used to populate your browser’s offline caching capabilities with the assets you need to run your app offline. to do this, we use service worker’s brand new storage api — cache — a global object on the service worker that allows us to store assets delivered by responses, and
keyed by their requests. this api works in a similar way to the browser’s standard cache, but it is specific to your domain. it persists until you tell it not to — again, you have full control. note: the cache api is not supported in every browser. (see the browser compatibility section for more information.) if you want to use this now, you could consider using a polyfill like the one availabl...
...delete all of the data for an origin or none of the data for an origin. promises passed into waituntil() will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first fetch event on the new service worker. ...
... the data for an origin or none of the data for an origin. promises passed into waituntil() will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first fetch event on the new service worker. ...
...data for an origin. promises passed into waituntil() will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first fetch event on the new service worker. self.addeventlistener('activate', (event) => { var cachekeeplist = ['v2']; event.waituntil( caches.
keys().then((
keylist) => { return promise.all(
keylist.map((
key) => { if (cachekeeplist.indexof(
key) === -1) { return caches.delete(
key); } })); }) ); }); developer tools chrome has chrome://inspect/#service-workers, which shows current service worker activity and storage on a device, and chrome://serviceworker-internals, which shows more detail and allows you to start/stop/debug the worker process. in the ...
Touch events - Web APIs
this behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., ios wil...
...this behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., ios will prevent zo...
...this behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., ios will prevent zooming but stil...
...this behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., ios will prevent zooming but still allow panni...
URLSearchParams - Web APIs
the urlsearchparams interface defines utility methods to work with the query string of a url. an object implementing urlsearchparams can directly be used in a for...of structure, for example the following two lines are equivalent: for (const [
key, value] of mysearchparams) {} for (const [
key, value] of mysearchparams.entries()) {} note: this feature is available in web workers. constructor urlsearchparams() returns a urlsearchparams object instance. ...
...searchparams can directly be used in a for...of structure, for example the following two lines are equivalent: for (const [
key, value] of mysearchparams) {} for (const [
key, value] of mysearchparams.entries()) {} note: this feature is available in web workers. constructor urlsearchparams() returns a urlsearchparams object instance. methods urlsearchparams.append() appends a specified
key/value pair as a new search parameter. urlsearchparams.delete() deletes the given search parameter, and its associated value, from the list of all search parameters. urlsearchparams.entries() returns an iterator allowing iteration through all
key/value pairs contained in this object. urlsearchparams.foreach() allows iteration through all values contained in this object via a callback functio...
...rlsearchparams.foreach() allows iteration through all values contained in this object via a callback function. urlsearchparams.get() returns the first value associated with the given search parameter. urlsearchparams.getall() returns all the values associated with a given search parameter. urlsearchparams.has() returns a boolean indicating if such a given parameter exists. urlsearchparams.
keys() returns an iterator allowing iteration through all
keys of the
key/value pairs contained in this object. urlsearchparams.set() sets the value associated with a given search parameter to the given value. if there are several values, the others are deleted. urlsearchparams.sort() sorts all
key/value pairs, if any, by their
keys. urlsearchparams.tostring() returns a string containing a que...
... examples var paramsstring = "q=urlutils.searchparams&topic=api"; var searchparams = new urlsearchparams(paramsstring); //iterate the search parameters. ...
ARIA: timer role - Accessibility
label used to provide the name of the timer. aria-live elements with the role timer have an implicit aria-live value of off. aria-describedby used to indicate the idref of an element that contains additional instructions for navigating or operating this element. aria-roledescription used to give the timer a more descriptive role text for screen readers to speak. this should be localized. ...
...the name of the timer. aria-live elements with the role timer have an implicit aria-live value of off. aria-describedby used to indicate the idref of an element that contains additional instructions for navigating or operating this element. aria-roledescription used to give the timer a more descriptive role text for screen readers to speak. this should be localized. ...
...ve value of off. aria-describedby used to indicate the idref of an element that contains additional instructions for navigating or operating this element. aria-roledescription used to give the timer a more descriptive role text for screen readers to speak. this should be localized.
keyboard interactions
keyboard interaction is xxx. focus is being managed via xxx. the tab , space and enter
keys, as well as escape , must be handled by the application. the one exception is if focus xxx. ...
...or operating this element. aria-roledescription used to give the timer a more descriptive role text for screen readers to speak. this should be localized.
keyboard interactions
keyboard interaction is xxx. focus is being managed via xxx. the tab , space and enter
keys, as well as escape , must be handled by the application. the one exception is if focus xxx. required javascript features
keypress used to handle
keyboard input and control the focus click, touch handle as appropriate for your widget as well changing attribute values aria-activedescendant is used to manage the focus inside the application container. set in response to
keyboard or other application events that change focus or point of interaction. the timer role does not have a related html widget and xxx. the au...
ARIA: tab role - Accessibility
lected or active, they should have their aria-selected attribute set to true, otherwise it should be set to false. when a tab is selected or active, its controlled tabpanel should have its aria-expanded and hidden attributes set to true, otherwise they should be set to false. associated roles and attributes aria-selected boolean aria-controls id of element with tabpanel role id content
keyboard interaction
key action tab when focus is outside of the tablist moves focus to the active tab. if focus is on the active tab moves focus to the next element in the
keyboard focus order, ideally the active tab's associated tabpanel. → focuses and optionally activates the next tab in the tab list. if the current tab is the last tab in the tab list it ...
...dius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-color: orange; outline: 1px solid orange; } there are two things we need to do with javascript: we need to change focus and tab index of our tab elements with the right and left arrows, and we need to change the active tab and tabpanel when we click on a tab. to accomplish the first, we listen for the
keydown event on the tablist. if the event's
keycode is 39 for right arrow or 37 for the left arrow, we react to the event. we start by setting the tabindex of the current tab element to -1, making it no longer tabbable. then, if the right arrow is being pressed, we increase our tab focus counter by one. if the counter is greater than the number of tab elements we have, we circle back to the first ta...
...indow.addeventlistener("domcontentloaded", () => { const tabs = document.queryselectorall('[role="tab"]'); const tablist = document.queryselector('[role="tablist"]'); // add a click event handler to each tab tabs.foreach(tab => { tab.addeventlistener("click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.addeventlistener("
keydown", e => { // move right if (e.
keycode === 39 || e.
keycode === 37) { tabs[tabfocus].setattribute("tabindex", -1); if (e.
keycode === 39) { tabfocus++; // if we're at the end, go to the start if (tabfocus >= tabs.length) { tabfocus = 0; } // move left } else if (e.
keycode === 37) { tabfocus--; // if we're ...
...ach(p => p.setattribute("hidden", true)); // show the selected panel grandparent.parentnode .queryselector(`#${target.getattribute("aria-controls")}`) .removeattribute("hidden"); } best practices it is recommended to use a button element with the role tab for their built-in functional and accessible features instead, as opposed to needing to add them yourself. for controlling tab
key functionality for elements with the role tab, it is recommended to set all non-active elements to tabindex=-1, and to set the active element to tabindex=0. specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'tab' in that specification. recommendation wai-aria authoring practicesthe definition of 'tabs' in th...
Perceivable - Accessibility
rceivable states that users must be able to perceive it in some way, using one or more of their senses. note: to read the w3c definitions for perceivable and its guidelines and success criteria, see principle 1: perceivable - information and user interface components must be presentable to users in ways they can perceive. guideline 1.1 — providing text alternatives for non-text content the
key here is that text can be converted to other forms that people with disabilities can use. for example, it can be spoken by a screenreader, converted to large print, or represented on a braille display. non-text content refers to multimedia such as images, audio, and video. success criteria how to conform to the criteria practical resource 1.1.1 provide text equivalent...
...ously 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 covered in a different guideline — 1.4.1. 1.3.4 orientation (aa) added in 2.1 content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orien...
...like red). instead (or as well as), something like an asterisk with a label of "required" would be more appropriate. see color and color contrast and multiple labels. 1.4.2 audio controls (a) for any audio that plays for longer than three seconds, provide accessible controls to play and pause the audio/video, and mute/adjust volume. use native <button>s to provide accessible
keyboard controls, as shown in video player styling basics. 1.4.3 minimum contrast (aa) the color contrast between background and foreground content should be at a minimum level to ensure legibility: text and its background should have a contrast ratio of at least 4.5:1. heading (or just larger) text should have a ratio of at least 3:1. larger text is defined as at le...
... times the font size spacing following paragraphs to at least 2 times the font size letter spacing (tracking) to at least 0.12 times the font size word spacing to at least 0.16 times the font size understanding text spacing 1.4.13 content on hover or focus (aa) added in 2.1 while additional content may appear and disappear in coordination with hover and
keyboard focus, this success criterion specifies three conditions that must be met: dismissable (can be closed/removed) hoverable (the additional content does not disappear when the pointer is over it) persistent (the additional content does not disappear without user action) understanding content on hover or focus note: also see the wcag description for guid...
CSS Animations tips and tricks - CSS: Cascading Style Sheets
n itself using css. some css that's not important (the style of the "run" button itself) isn't shown here, for brevity. .runbutton { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 12px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } @
keyframes colorchange { 0% { background: yellow } 100% { background: blue } } .box { width: 100px; height: 100px; border: 1px solid black; } .changing { animation: colorchange 2s; } there are two classes here. the "box" class is the basic description of the box's appearance, without any animation information included. the animation details are included in the "changing" class, which sa...
...hange { 0% { background: yellow } 100% { background: blue } } .box { width: 100px; height: 100px; border: 1px solid black; } .changing { animation: colorchange 2s; } there are two classes here. the "box" class is the basic description of the box's appearance, without any animation information included. the animation details are included in the "changing" class, which says that the @
keyframes named "colorchange" should be used over the course of two seconds to animate the box. note that because of this, the box doesn't start with any animation effects in place, so it won't be animating. javascript content next we'll look at the javascript that does the work. the meat of this technique is in the play() function, which is called when the user clicks on the "run" button. functi...
...nimation simply removing the animation-name applied to an element will make it jump or cut to its next state. if instead you'd like the animation to complete and then come to a stop you have to try a different approach. the main tricks are: make your animation as self-contained as possible. this means you should not rely on animation-direction: alternate. instead you should explicitly write a
keyframe animation that goes through the full animation in one forward repetition. use javascript and clear the animation being used when the animationiteration event fires. the following demo shows how you'd achieve the aforementioned javascript technique: .slidein { animation-duration: 5s; animation-name: slidein; animation-iteration-count: infinite; } .stopped { animation-name: none; ...
...e animation that goes through the full animation in one forward repetition. use javascript and clear the animation being used when the animationiteration event fires. ...
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
<div class="item1">start column line 1, span 3 column tracks.</div> <div class="item2">start column line 6, span 4 column tracks. 2 row tracks.</div> <div class="item3">start row 2 column line 2, span 2 column tracks.</div> <div class="item4">start at column line 3, span to the end of the grid (-1).</div> </div> i can then place these on the grid using the named lines, and also the span
keyword. .item1 { grid-column: col-start / span 3; } .item2 { grid-column: col-start 6 / span 4 ; grid-row: 1 / 3; } .item3 { grid-column: col-start 2 / span 2; grid-row: 2; } .item4 { grid-column: col-start 3 / -1; grid-row: 3; } as described in the guide to named lines, we are using the named line to place our item. as we have 12 lines all with the same name we use the name, and...
... } as described in the guide to named lines, we are using the named line to place our item. as we have 12 lines all with the same name we use the name, and then the index of the line. you could also use the line index itself if you prefer and avoid using named lines at all. ...
...as you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. with css grid layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. ...
...lex-direction to column. i can then use an auto margin on the .cta to push this bar down to the bottom of the box. .listing li { border: 1px solid #ffe066; border-radius: 5px; display: flex; flex-direction: column; } .listing .cta { margin-top: auto; border-top: 1px solid #ffe066; padding: 10px; text-align: center; } .listing .body { padding: 10px; } this is really one of the
key reasons i would use flexbox rather than grid, if i am just aligning or distributing something in a single dimension, that’s a flexbox use case. this is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. it might be nice to cause those to span two tracks, and then they won’t be so tall. i have a class of wide on my larger...
Basic Shapes - CSS: Cascading Style Sheets
box to see how the reference box used as the starting point before offsets are calculated changes. circle() the circle() value for shape-outside can accept two possible arguments. the first is the shape-radius. both circle() and ellipse() values for shape-outside are specified as accepting this argument of <shape-radius>. this argument can be a length or percentage but can also be one of the
keywords closest-side or farthest-side. the
keyword closest-side uses the length from the center of the shape to the closest side of the reference box. for circles, this is the closest side in any dimension. for ellipses, this is the closest side in the radius dimension. the
keyword farthest-side uses the length from the center of the shape to the farthest side of the reference box. for circles, th...
...s is the farthest side in any dimension. for ellipses, this is the farthest side in the radius dimension. the second argument is a position. if omitted this will be set to center. however you can use any valid position here to indicate the position of the centre of the circle. our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side
keyword then optionally the
keyword at followed by a position value. in the below example i have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. this gives a total width for the reference box of 140 pixels. i have given a value of 50% for the shape-radius value which means that our radius is 70px. i have then set the position value to 30%. in the live example y...
...have given a value of 50% for the shape-radius value which means that our radius is 70px. i have then set the position value to 30%. in the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for inset(). as an additional example, if you use the
keywords top left for position, you can make a quarter circle shape in the top left corner of the page. the example below uses generated content to create a quarter circle shape for text to flow around. the shape will be clipped by the margin box when describing reference boxes i explained that the margin-box will clip the shape. you can see this by moving the centre of our circle towards the con...
...n be followed by position values as with circle() to move the centre of the ellipse around. in the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. this means that the centre of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. you can change these values to see how the ellipse changes. the
keyword values of closest-side and farthest-side are useful to create a quick ellipse based on the size of the floated element reference box. polygon() the final basic shape is the most complex and enables the creation of many side shapes by way of creating a polygon(). this shape accepts three or more pairs of values (a polygon must at least draw a triangle). these values are co-ordinates drawn ...
Using media queries - CSS: Cascading Style Sheets
e query to be true. it is also used for joining media features with media types. not the not operator is used to negate a media query, returning true if the query would otherwise return false. if present in a comma-separated list of queries, it will only negate the specific query to which it is applied. if you use the not operator, you must also specify a media type. note: in level 3, the not
keyword can't be used to negate an individual media feature expression, only an entire media query. only the only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. when not using only, older browsers would interpret the query screen and (max-width: 500px) simply as screen, ignoring the remainder of the quer...
...a query. the not operator, meanwhile, negates a media query, basically reversing its normal meaning. the only operator prevents older browsers from applying the styles. note: in most cases, the all media type is used by default when no other type is specified. however, if you use the not or only operators, you must explicitly specify a media type. combining multiple types or features the and
keyword combines a media feature with a media type or other media features. this example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems: @media (min-width: 30em) and (orientation: landscape) { ... } to limit the styles to devices with a screen, you can chain the media features to the screen media type: @media screen and (min-width: 30em...
...d (orientation: portrait) { ... } taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true. inverting a query's meaning the not
keyword inverts the meaning of an entire media query. it will only negate the specific media query it is applied to. (thus, it will not apply to every media query in a comma-separated list of media queries.) the not
keyword can't be used to negate an individual feature query, only an entire media query. the not is evaluated last in the following query: @media not all and (monochrome) { ... } ... s...
...e query is evaluated like this: @media not (all and (monochrome)) { ... } ... rather than like this: @media (not all) and (monochrome) { ... } as another example, the following media query: @media not screen and (color), print and (color) { ... } ... is evaluated like this: @media (not (screen and (color))), print and (color) { ... } improving compatibility with older browsers the only
keyword prevents older browsers that do not support media queries with media features from applying the given styles. it has no effect on modern browsers. @media only screen and (color) { ... } syntax improvements in level 4 the media queries level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less ver...
background-attachment - CSS: Cascading Style Sheets
the background-attachment css property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* global values */ background-attachment: inherit; background-attachment: initial; background-attachment: unset; the background-attachment property is specified as one of the
keyword values from the list below. values fixed the background is fixed relative to the viewport. even if an element ha...
...first specified to last. html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. ...
...one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden
key, and alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the
key was too small, but at any rate it would not open any of them. ...
...den
key, and alice's first thought was that it might belong to one of the doors of the hall; but, alas! ...
border-image-slice - CSS: Cascading Style Sheets
m illustrates the location of each region. zones 1-4 are corner regions. each one is used a single time to form the corners of the final border image. zones 5-8 are edge regions. these are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element. zone 9 is the middle region. it is discarded by default, but is used like a background image if the
keyword fill is set. the border-image-repeat, border-image-width, and border-image-outset properties determine how these regions are used to form the final border image. syntax /* all sides */ border-image-slice: 30%; /* vertical | horizontal */ border-image-slice: 10% 30%; /* top | horizontal | bottom */ border-image-slice: 30 30% 45; /* top | right | bottom | left */ border-image-slice: 7 12...
...er-image-repeat, border-image-width, and border-image-outset properties determine how these regions are used to form the final border image. syntax /* all sides */ border-image-slice: 30%; /* vertical | horizontal */ border-image-slice: 10% 30%; /* top | horizontal | bottom */ border-image-slice: 30 30% 45; /* top | right | bottom | left */ border-image-slice: 7 12 14 5; /* using the `fill`
keyword */ border-image-slice: 10% fill 7 12; /* global values */ border-image-slice: inherit; border-image-slice: initial; border-image-slice: unset; the border-image-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice. negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when ...
...round. its width and height are sized to match the top and left image regions, respectively. formal definition initial value100%applies toall elements, except internal table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednopercentagesrefer to the size of the border imagecomputed valueone to four percentage(s) (as specified) or absolute length(s), plus the
keyword fill if specifiedanimation typeby computed value type formal syntax <number-percentage>{1,4} && fill?where <number-percentage> = <number> | <percentage> examples adjustable border width and slice the folowing example shows a simple <div> with a border image set on it. the source image for the borders is as follows: the diamonds are 30px across, therefore setting 30 pixels as the value...
...h: 30px; border-image-slice: 30; these are the default values we have used in this example. however, we have also provided two sliders to allow you to dynamically change the values of the above two properties, allowing you to appreciate the effect they have: border-image-slice changes the size of the image slice sampled for use in each border and border corner (and the content area, if the fill
keyword is used) — varying this away from 30 causes the border to look somewhat irregular, but can have some interesting effects. border-width: changes the width of the border. the sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an svg image). html <div class="...
border-style - CSS: Cascading Style Sheets
ource 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. ...
...e style to all four sides. when two values are specified, the first style applies to the top and bottom, the second to the left and right. when three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom. when four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise). each value is a
keyword chosen from the list below. values <line-style> describes the style of the border. it can have the following values: none like the hidden
keyword, displays no border. unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else. in the case of table cell and border collapsing...
...unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else. in the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won't be displayed. ...
... css level 1the definition of 'border-style' in that specification. recommendation initial definition. ...
box-shadow - CSS: Cascading Style Sheets
enables you to cast a drop shadow from the frame of almost any element. if a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generator is an interactive tool allowing you to generate a box-shadow. ...
... if only two values are given, they are interpreted as <offset-x><offset-y> values. if a third value is given, it is interpreted as a <blur-radius>. if a fourth value is given, it is interpreted as a <spread-radius>. optionally, the in...
...s */ box-shadow: inherit; box-shadow: initial; box-shadow: unset; specify a single box-shadow using: two, three, or four <length> values. if only two values are given, they are interpreted as <offset-x><offset-y> values. if a third value is given, it is interpreted as a <blur-radius>. if a fourth value is given, it is interpreted as a <spread-radius>. optionally, the inset
keyword. optionally, a <color> value. to specify multiple shadows, provide a comma-separated list of shadows. values inset if not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). the presence of the inset
keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). inset shadows are drawn ins...
... full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it. <spread-radius> this is a fourth <length> value. positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. if not specified, it will be 0 (the shadow will be the same size as the element). <color> see <color> values for possible
keywords and notations. if not specified, it defaults to currentcolor. interpolation each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. for each shadow, if both input shadows are or are not inset, then the interpolated shadow must match the input shadows in that regard...
font-variant-east-asian - CSS: Cascading Style Sheets
<east-asian-variant-values> these values specify a set of logographic glyph var...
... /* <east-asian-width-values> */ font-variant-east-asian: proportional-width; /* <east-asian-width-values> */ font-variant-east-asian: ruby full-width jis83; /* global values */ font-variant-east-asian: inherit; font-variant-east-asian: initial; font-variant-east-asian: unset; syntax values normal this
keyword leads to the deactivation of the use of such alternate glyphs. ruby this
keyword forces the use of special glyphs for ruby characters. ...
...ariant-east-asian: inherit; font-variant-east-asian: initial; font-variant-east-asian: unset; syntax values normal this
keyword leads to the deactivation of the use of such alternate glyphs. ruby this
keyword forces the use of special glyphs for ruby characters. as these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. this
keyword corresponds to the opentype values ruby. <east-asian-variant-values> these values specify a set of logographic glyph variants which should be used for display. ...
... this
keyword forces the use of special glyphs for ruby characters. as these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. this
keyword corresponds to the opentype values ruby. <east-asian-variant-values> these values specify a set of logographic glyph variants which should be used for display. ...
mask-size - CSS: Cascading Style Sheets
the mask-size css property specifies the sizes of the mask images. the size of the image can be fully or partially constrained in order to preserve its intrinsic ratio. ...
...rit; mask-size: initial; mask-size: unset; note: if the value of this property is not set in a mask shorthand property that is applied to the element after the mask-size css property, the value of this property is then reset to its initial value by the shorthand property. syntax one or more <bg-size> values, separated by commas. a <bg-size> can be specified in one of three ways: using the
keyword contain using the
keyword cover using width and height values to specify a size using width and height, you can supply one or two values: if only one value is given it sets the width, with the height set to auto. if two values are given, the first sets width and the second sets height. each value can be a <length>, a <percentage>, or auto. values <length> a <length> value scale...
...k image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of mask-origin. the mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding and content. negative percentages are not allowed. ...
...lue of mask-origin. the mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding and content. negative percentages are not allowed. auto a
keyword that scales the mask image in the corresponding directions in order to maintain its intrinsic proportion. contain a
keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). the image is letterboxed within the container. the image is automatically centered unless over-ridden by another property such as mask-position. cover a
keyword that is the inverse of contain. scales the image as large as possible and maintains image aspect ratio (image doesn't get squi...
outline-color - CSS: Cascading Style Sheets
ne-color css property sets the color of an element's outline. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <color> values */ outline-color: #f92525; outline-color: rgb(30,222,121); outline-color: blue; /*
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 requi...
... 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 (unless you explicitly set it to overlap). it ...
...ext such as headings. large text is defined as 18.66px and bold or larger, or 24px or larger. ...
...w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritednocomputed valuefor the
keyword invert, the computed value is invert. for the color value, if the value is translucent, the computed value will be the rgba() corresponding one. if it isn't, it will be the rgb() corresponding one. ...
overflow - CSS: Cascading Style Sheets
ck formatting context — in both directions. 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. constituent properties this property is a shorthand for the following css properties: overflow-x overflow-y syntax /*
keyword values */ overflow: visible; overflow: hidden; overflow: clip; overflow: scroll; overflow: auto; overflow: hidden visible; /* global values */ overflow: inherit; overflow: initial; overflow: unset; the overflow property is specified as one or two
keywords chosen from the list of values below. if two
keywords are specified, the first applies to overflow-x and the second to overflow-y. other...
... and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. the content can be scrolled programmatically (for example, by setting the value of a property such as offsetleft), so the element is still a scroll container. clip like for hidden, the content is clipped to the element's padding box. the difference between clip and hidden is that the clip
keyword also forbids all scrolling, including programmatic scrolling. the box is not a scroll container, and does not start a new formatting context. if you wish to start a new formatting context, you can use display: flow-root to do so. scroll content is clipped if necessary to fit the padding box. browsers always display scrollbars whether or not any content is actually clipped, preventing scroll...
...low: hidden instead. -moz-scrollbars-horizontal [1] use overflow-x: scroll and overflow-y: hidden, or overflow: hidden scroll instead. -moz-scrollbars-vertical [1] use overflow-x: hidden and overflow-y: scroll, or overflow: scroll hidden instead. -moz-hidden-unscrollable intended mainly for internal use and by themes. disables scrolling of xml root elements, <html>, and <body> with the
keyboard's arrow
keys and the mouse wheel. [1] as of firefox 63, this feature is behind a feature preference setting. in about:config, set layout.css.overflow.moz-scrollbars.enabled to true description overflow options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area. specifying a value other than visible (the default) creates...
...audantium. p { overflow: auto; /* append scrollbars if necessary */ } overflow: auto sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. specifications specification status comment css overflow module level 3the definition of 'overflow' in that specification. working draft changed syntax to allow one or two
keywords instead of only one css level 2 (revision 1)the definition of 'overflow' in that specification. recommendation initial definition. ...
repeating-radial-gradient() - CSS: Cascading Style Sheets
alues <position> the position of the gradient, interpreted in the same way as background-position or transform-origin. if unspecified, it defaults to center. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-
keyword> a
keyword describing how big the ending shape must be. the possible values are:
keyword description closest-side the gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner the gradient's ending shape is sized s...
...center. farthest-side similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). farthest-corner the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. note: early implementations of this function included other
keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. use the standard
keywords only, as some implementations have already dropped those older variants. <color-stop> a color-stop's <color> value, followed by an optional stop position (either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represent...
...ue 100% represents the intersection of the ending shape with the virtual gradient ray. percentage values in between are linearly positioned on the virtual gradient ray. ...
...]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...
text-underline-position - CSS: Cascading Style Sheets
the text-underline-position css property specifies the position of the underline which is set using the text-decoration property's underline value. 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. ...
...ue. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* single
keyword */ text-underline-position: auto; text-underline-position: under; text-underline-position: left; text-underline-position: right; /* multiple
keywords */ text-underline-position: under left; text-underline-position: right under; /* global values */ text-underline-position: inherit; text-underline-position: initial; text-underline-position: unset; syntax values auto the user agent uses its own algorithm to place the line at or under the alphabetic baseline. from-font if the font file includes information about a preferred position...
... the font file doesn't include this information, behave as if auto was set, with the browser choosing an appropriate position. under forces the line to be set below the alphabetic baseline, at a position where it won't cross any descenders. this is useful for ensuring legibility with chemical and mathematical formulas, which make a large use of subscripts. left in vertical writing-modes, this
keyword forces the line to be placed on the left side of the text. in horizontal writing-modes, it is a synonym of under. right in vertical writing-modes, this
keyword forces the line to be placed on the right side of the text. in horizontal writing-modes, it is a synonym of under. auto-pos a synonym of auto, which should be used instead. above forces the line to be above the text. when use...
...e left side of the text. in horizontal writing-modes, it is a synonym of under. right in vertical writing-modes, this
keyword forces the line to be placed on the right side of the text. in horizontal writing-modes, it is a synonym of under. auto-pos a synonym of auto, which should be used instead. above forces the line to be above the text. when used with east-asian text, using the auto
keyword will lead to a similar effect. below forces the line to be below the text. when used with alphabetic text, using the auto
keyword will lead to a similar effect. formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | from-font | [ under | [ left | right ] ] examples a simple example let's take a cou...
unicode-bidi - CSS: Cascading Style Sheets
rithm to decide how to display the text. the unicode-bidi property overrides this algorithm and allows the developer to control the text embedding. the unicode-bidi and direction properties are the only properties that are not affected by the all shorthand. note: this property is intended for document type definition (dtd) designers. web designers and similar authors should not override it. /*
keyword values */ unicode-bidi: normal; unicode-bidi: embed; unicode-bidi: isolate; unicode-bidi: bidi-override; unicode-bidi: isolate-override; unicode-bidi: plaintext; /* global values */ unicode-bidi: inherit; unicode-bidi: initial; unicode-bidi: unset; syntax values normal the element does not offer an additional level of embedding with respect to the bidirectional algorithm. for inline ele...
...by the direction property. bidi-override for inline elements this creates an override. for block container elements this creates an override for inline-level descendants not within another block container element. this means that inside the element, reordering is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored. ...
...hm is ignored. isolate this
keyword indicates that the element's container directionality should be calculated without considering the content of this element. the element is therefore isolated from its siblings. when applying its bidirectional-resolution algorithm, its container element treats it as one or several u+fffc object replacement character, i.e. like an image. isolate-override this
keyword applies the isolation behavior of the isolate
keyword to the surrounding content and the override behavior of the bidi-override
keyword to the inner content. plaintext this
keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the direction property. the directionality is calculated using the p2 and p3 rules of the unicode bi...
... css level 2 (revision 1)the definition of 'unicode-bidi' in that specification. recommendation initial definition. ...
will-change - CSS: Cascading Style Sheets
sers may set up optimizations before an element is actually changed. these kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required. 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. ...
...ually 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 stacking context (e.g. will-change: opacity), as the stacking context is created up front. syntax values auto this
keyword expresses no particular intent; the user agent should apply whatever heuristics and optimizations it normally does. the <animateable-feature> can be one of the following values: scroll-position indicates that the author expects to animate or change the scroll position of the element in the near future. contents indicates that the author expects to animate or change something about the...
...ion, or contents. the spec doesn't define the behavior of particular value, but it is common for transform to be a compositing layer hint. chrome currently takes two actions, given particular css property idents: establish a new compositing layer or a new stacking context. via stylesheet it may be appropriate to include will-change in your style sheet for an application that does page flips on
key presses like an album or a slide deck presentation where the pages are large and complex. this will let browser prepare the transition ahead of time and allow for snappy transitions between the pages as soon as the
key is pressed. but use caution with the will-change property directly in stylesheets. it may cause the browser to keep the optimization in memory for much longer than it is needed. .
...the will-change property through scripting, which is probably what you should be doing in most cases. var el = document.getelementbyid('element'); // set will-change when the element is hovered el.addeventlistener('mouseenter', hintbrowser); el.addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's
keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status comment css will change module level 1the definition of 'will-change' in that specification. candidate recommendation initial definition ...
<input type="image"> - HTML: Hypertext Markup Language
e on <input type="submit"> and <button> elements. formnovalidate a boolean attribute which, if present, specifies that the form should not be validated before submission to the server. this overrides the value of the novalidate attribute on the element's owning form. this attribute is also available on <input type="submit"> and <button> elements. ...
...this will replace the current document with the received data. this is the default value used if none is specified. _blank loads the response into a new, unnamed, browsing context. ...
...he form has no side-effects and contains only ascii characters. if specified, this attribute overrides the method attribute of the element's form owner. formnovalidate html5 a boolean attribute specifying that the form is not to be validated when it is submitted. if this attribute is specified, it overrides the novalidate attribute of the element's form owner. ...
...od attribute of the element's form owner. formnovalidate html5 a boolean attribute specifying that the form is not to be validated when it is submitted. if this attribute is specified, it overrides the novalidate attribute of the element's form owner. formtarget html5 a name or
keyword indicating where to display the response that is received after submitting the form. this is a name of, or
keyword for, a browsing context (for example, tab, window, or inline frame). if this attribute is specified, it overrides the target attribute of the element's form owner. the following
keywords have special meanings: _self: load the response into the same browsing context as the current one. this value is the default if the attribute is not specified. _blank: load the response into a new unnam...
<select>: The HTML Select element - HTML: Hypertext Markup Language
in practice, this has been found to break some web sites, and no other browser currently does that, so mozilla has opted to continue to return 0 for the time being with firefox. usage notes selecting multiple options on a desktop computer, there are a number of ways to select multiple options in a <select> element with a multiple attribute: mouse users can hold the ctrl, command, or shift
keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them. warning: the mechanism for selecting multiple non-contiguous items via the
keyboard described below currently only seems to work in firefox. also note: on macos, the ctrl + up and ctrl + down shortcuts conflict with the os default shortcuts for mission control and application win...
...d then click multiple options to select/deselect them. warning: the mechanism for selecting multiple non-contiguous items via the
keyboard described below currently only seems to work in firefox. also note: on macos, the ctrl + up and ctrl + down shortcuts conflict with the os default shortcuts for mission control and application windows, so you'll have to turn these off before it will work.
keyboard users can select multiple contiguous items by: focusing on the <select> element (e.g. using tab). selecting an item at the top or bottom of the range they want to select using the up and down cursor
keys to go up and down the options. ...
...h the os default shortcuts for mission control and application windows, so you'll have to turn these off before it will work.
keyboard users can select multiple contiguous items by: focusing on the <select> element (e.g. using tab). selecting an item at the top or bottom of the range they want to select using the up and down cursor
keys to go up and down the options. holding down the shift
key and then using the up and down cursor
keys to increase or decrease the range of items selected.
keyboard users can select multiple non-contiguous items by: focusing on the <select> element (e.g. using tab). holding down the ctrl
key then using the up and down cursor
keys to change the "focused" select option, i.e. the one that will be selected if you choose to do so. the "focused" select op...
... pressing space to select/deselect "focused" select options. styling with css the <select> element is notoriously difficult to style productively with css. ...
inputmode - HTML: Hypertext Markup Language
the inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. it can have the following values: none no virtual
keyboard. for when the page implements its own
keyboard input control. text (default value) standard input
keyboard for the user's current locale. decimal fractional numeric input
keyboard containing the digits and decimal separator for the user's locale (typically . or ,). devices may or may not show a minus
key (-). numeric numeric input
keyboard, but only requires the digits 0–9. devices may or may not show a minus
key. tel a telephone
keypad input, including the digits 0–9, the asterisk (*), and the pound (#)
key. inputs that require a telephone number should ...
...he user's locale (typically . or ,). devices may or may not show a minus
key (-). numeric numeric input
keyboard, but only requires the digits 0–9. devices may or may not show a minus
key. tel a telephone
keypad input, including the digits 0–9, the asterisk (*), and the pound (#)
key. inputs that require a telephone number should typically use <input type="tel">instead. search a virtual
keyboard optimized for search input. for instance, the return/submit
key may be labeled "search", along with possible other optimizations. inputs that require a search query should typically use <input type="search"> instead. email a virtual
keyboard optimized for entering email addresses. typically includes the @ character as well as other optimizations. inputs that require email addresses should ...
...enhanced features could include history access and so on. inputs that require a url should typically use <input type="url"> instead. specifications specification status comment html living standardthe definition of 'inputmode' in that specification. ...
...enhanced features could include history access and so on. inputs that require a url should typically use <input type="url"> instead. ...
CSP: sandbox - HTTP
the <meta> element or by the content-security-policy-report-only header field. syntax content-security-policy: sandbox; content-security-policy: sandbox <value>; where <value> can optionally be one of the following values: allow-downloads-without-user-activation allows for downloads to occur without a gesture from the user. allow-forms allows the page to submit forms. ...
... allow-popups-to-escape-sandbox allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. this will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page. ...
...indows without forcing the sandboxing flags upon them. this will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page. allow-presentation allows embedders to have control over whether an iframe can start a presentation session. allow-same-origin allows the content to be treated as being from its normal origin. if this
keyword is not used, the embedded content is treated as being from a unique origin. allow-scripts allows the page to run scripts (but not create pop-up windows). if this
keyword is not used, this operation is not allowed. allow-storage-access-by-user-activation lets the resource request access to the parent's storage capabilities with the storage access api. allow-top-navigation allows the pa...
... allow-top-navigation-by-user-activation lets the resource navigate the top-level browsing context, but only if initiated by a user gesture. ...
HTTP headers - HTTP
me-origin policy. see the cross-domain policy file specification for more information. x-powered-by may be set by hosting environments or other frameworks and contains information about them while not providing any usefulness to the application or its visitors. unset this header to avoid exposing potential vulnerabilities. x-xss-protection enables cross-site scripting filtering. ...
...domain policy file specification for more information. x-powered-by may be set by hosting environments or other frameworks and contains information about them while not providing any usefulness to the application or its visitors. unset this header to avoid exposing potential vulnerabilities. x-xss-protection enables cross-site scripting filtering. ...
...r other frameworks and contains information about them while not providing any usefulness to the application or its visitors. unset this header to avoid exposing potential vulnerabilities. x-xss-protection enables cross-site scripting filtering. http public
key pinning (hpkp) http public
key pinning has been deprecated and removed in favor of certificate transparency and expect-ct. public-
key-pins associates a specific cryptographic public
key with a certain web server to decrease the risk of mitm attacks with forged certificates. public-
key-pins-report-only sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated. fetch metadata request headers sec-fetch-site it is a request header that indi...
...used to specify a server endpoint for the browser to send warning and error reports to. transfer coding transfer-encoding specifies the form of encoding used to safely transfer the entity to the user. te specifies the transfer encodings the user agent is willing to accept. trailer allows the sender to include additional fields at the end of chunked message. websockets sec-websocket-
key ... sec-websocket-extensions ... sec-websocket-accept ... sec-websocket-protocol ... sec-websocket-version ... other accept-push-policy a client can express the desired push policy for a request by sending an accept-push-policy header field in the request. accept-signature a client can send the accept-signature header field to indicate intention to take advantage of any avail...
Protocol upgrade mechanism - HTTP
the listed extensions in one such header. sec-websocket-extensions: extensions extensions a comma-separated list of extensions to request (or agree to support). these should be selected from the iana websocket extension name registry. extensions which take parameters do so by using semicolon delineation. for example: sec-websocket-extensions: superspeed, colormode; depth=16 sec-websocket-
key provides information to the server which is needed in order to confirm that the client is entitled to request an upgrade to websocket. this header can be used when insecure (http) clients wish to upgrade, in order to offer some degree of protection against abuse. the value of the
key is computed using an algorithm defined in the websocket specification, so this does not provide security. instead...
... header can be used when insecure (http) clients wish to upgrade, in order to offer some degree of protection against abuse. the value of the
key is computed using an algorithm defined in the websocket specification, so this does not provide security. instead, it helps to prevent non-websocket clients from inadvertently, or through misuse, requesting a websocket connection. in essence, then, this
key simply confirms that "yes, i really mean to open a websocket connection." this header is automatically added by clients that choose to use it; it cannot be added using the xmlhttprequest.setrequestheader() method. ...
...provide security. instead, it helps to prevent non-websocket clients from inadvertently, or through misuse, requesting a websocket connection. in essence, then, this
key simply confirms that "yes, i really mean to open a websocket connection." this header is automatically added by clients that choose to use it; it cannot be added using the xmlhttprequest.setrequestheader() method. sec-websocket-
key:
key key the
key for this request to upgrade. the client adds this if it wishes to do so, and the server will include in the response a
key of its own, which the client will validate before delivering the upgrade response to you. the server's response's sec-websocket-accept header will have a value computed based upon the specified
key. sec-websocket-protocol the sec-websocket-protocol he...
...otocol versions supported by the server. response-only headers the response from the server may include these. sec-websocket-accept included in the response message from the server during the opening handshake process when the server is willing to initiate a websocket connection. it will appear no more than once in the response headers. sec-websocket-accept: hash hash if a sec-websocket-
key header was provided, the value of this header is computed by taking the value of the
key, concatenating the string "258eafa5-e914-47da-95ca-c5ab0dc85b11" to it, taking the sha-1 hash of that concatenated string, resulting in a 20-byte value. that value is then base64 encoded to obtain the value of this property. references websocket api http specifications and rfcs: rfc 7230 rfc 6...
TypeError: "x" is not a function - JavaScript
the code by adding a * operator: const sixteen = 2 * (3 + 5); alert('2 x (3 + 5) is ' + string(sixteen)); //2 x (3 + 5) is 16 import the exported module correctly ensure you are importing the module correctly. ...
... const sixteen = 2 * (3 + 5); alert('2 x (3 + 5) is ' + string(sixteen)); //2 x (3 + 5) is 16 import the exported module correctly ensure you are importing the module correctly. ...
... * (3 + 5); alert('2 x (3 + 5) is ' + string(sixteen)); //2 x (3 + 5) is 16 import the exported module correctly ensure you are importing the module correctly. ...
... + 5) is ' + string(sixteen)); //2 x (3 + 5) is 16 import the exported module correctly ensure you are importing the module correctly. ...
Arrow function expressions - JavaScript
arrow function expressions are ill suited as methods, and they cannot be used as constructors. ...
...faultvalue1, param2, …, paramn = defaultvaluen) => { statements } // destructuring within the parameter list is also supported var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6 description see also "es6 in depth: arrow functions" on hacks.mozilla.org. two factors influenced the introduction of arrow functions: the need for shorter functions and the behavior of the this
keyword. shorter functions var elements = [ 'hydrogen', 'helium', 'lithium', 'beryllium' ]; // this statement returns the array: [8, 6, 7, 9] elements.map(function(element) { return element.length; }); // the regular function above can be written as the arrow function below elements.map((element) => { return element.length; }); // [8, 6, 7, 9] // when there is only one parameter, we ...
...fore 'this.a' returns 'undefined' } }); use of the new operator arrow functions cannot be used as constructors and will throw an error when used with new. var foo = () => {}; var foo = new foo(); // typeerror: foo is not a constructor use of prototype property arrow functions do not have a prototype property. var foo = () => {}; console.log(foo.prototype); // undefined use of the yield
keyword the yield
keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). as a consequence, arrow functions cannot be used as generators. function body arrow functions can have either a "concise body" or the usual "block body". in a concise body, only an expression is specified, which becomes the implicit return value. in a block body...
... that returning object literals using the concise body syntax params => {object:literal} will not work as expected. var func = () => { foo: 1 }; // calling func() returns undefined! var func = () => { foo: function() {} }; // syntaxerror: function statement requires a name this is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a
key in an object literal). you must wrap the object literal in parentheses: var func = () => ({ foo: 1 }); line breaks an arrow function cannot contain a line break between its parameters and its arrow. var func = (a, b, c) => 1; // syntaxerror: expected expression, got '=>' however, this can be amended by putting the line break after the arrow or using parentheses/braces as seen below to ens...
Functions - JavaScript
guide about functions. description every function in javascript is a function object. see function for information on properties and methods of function objects. to return a value other than the default, a function must have a return statement that specifies the value to return. a function without a return statement will return a default value. in the case of a constructor called with the new
keyword, the default value is the value of its this parameter. for all other functions, the default return value is undefined. the parameters of a function call are the function's arguments. arguments are passed to functions by value. if the function changes the value of an argument, this change is not reflected globally or in the calling function. however, object references are values, too, and the...
...* create and initialize a new object; * assign reference to it to 'mycar' */ var mycar = { brand: "honda", model: "accord", year: 1998 }; /* logs 'honda' */ console.log(mycar.brand); /* pass object reference to the function */ myfunc(mycar); /* * logs 'toyota' as the value of the 'brand' property * of the object, as changed to by the function. */ console.log(mycar.brand); the this
keyword does not refer to the currently executing function, so you must refer to function objects by name, even within the function body. defining functions there are several ways to define functions: the function declaration (function statement) there is a special syntax for declaring functions (see function statement for details): function name([param[, param[, ... param]]]) { statements } ...
...inside the definition in order to create a named function expression: var myfunction = function namedfunction(){ statements } one of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error. as we can see, both examples do not start with the function
keyword. statements involving functions which do not start with function are function expressions. when functions are used only once, a common pattern is an iife (immediately invoked function expression). (function() { statements })(); iife are function expressions that are invoked as soon as the function is declared. the generator function declaration (function* statement) there is a specia...
...tion is assigned to. they have no relation to each other. a function declaration also creates a variable with the same name as the function name. thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in: a function defined by 'new function' does not have a function name. however, in the spidermon
key javascript engine, the serialized form of the function shows as if it has the name "anonymous". for example, alert(new function()) outputs: function anonymous() { } since the function actually does not have a name, anonymous is not a variable that can be accessed within the function. for example, the following would result in an error: var foo = new function("alert(anonymous);"); foo(); unl...
Array.prototype[@@unscopables] - JavaScript
the @@unscopable symbol property contains property names that were not included in the ecmascript standard prior to the es2015 version. these properties are excluded from with statement bindings. description the default array properties that are excluded from with bindings are: copywithin() entries() fill() find() findindex() includes()
keys() values() see symbol.unscopables for how to set unscopables for your own objects. ...
....unscopables for how to set unscopables for your own objects. property attributes of array.prototype[@@unscopables] writable no enumerable no configurable yes examples use in with environments the following code works fine in es5 and below. ...
... property attributes of array.prototype[@@unscopables] writable no enumerable no configurable yes examples use in with environments the following code works fine in es5 and below. however, in ecmascript 2015 and later, the array.prototype.
keys() method was introduced. that means that inside with environments, "
keys" would now be the method and not the variable. ...
...n es5 and below. however, in ecmascript 2015 and later, the array.prototype.
keys() method was introduced. that means that inside with environments, "
keys" would now be the method and not the variable. this is where now the built-in @@unscopables array.prototype[@@unscopables] symbol property comes into play and prevents that some of the array methods are being scoped into the with statement. var
keys = []; with (array.prototype) {
keys.push('something'); } object.
keys(array.prototype[symbol.unscopables]); // ["copywithin", "entries", "fill", "find", "findindex", // "includes", "
keys", "values"] specifications specification ecmascript (ecma-262)the definition of 'array.prototype[@@unscopables]' in that specification. ...
Array.prototype.map() - JavaScript
new array containing the square roots of the numbers in the first array. let numbers = [1, 4, 9] let roots = numbers.map(function(num) { return math.sqrt(num) }) // roots is now [1, 2, 3] // numbers is still [1, 4, 9] using map to reformat objects in an array the following code takes an array of objects and creates a new array containing the newly reformatted objects. ...
...s of the numbers in the first array. let numbers = [1, 4, 9] let roots = numbers.map(function(num) { return math.sqrt(num) }) // roots is now [1, 2, 3] // numbers is still [1, 4, 9] using map to reformat objects in an array the following code takes an array of objects and creates a new array containing the newly reformatted objects. ...
... let numbers = [1, 4, 9] let roots = numbers.map(function(num) { return math.sqrt(num) }) // roots is now [1, 2, 3] // numbers is still [1, 4, 9] using map to reformat objects in an array the following code takes an array of objects and creates a new array containing the newly reformatted objects. ...
... // roots is now [1, 2, 3] // numbers is still [1, 4, 9] using map to reformat objects in an array the following code takes an array of objects and creates a new array containing the newly reformatted objects. let kvarray = [{
key: 1, value: 10}, {
key: 2, value: 20}, {
key: 3, value: 30}] let reformattedarray = kvarray.map(obj => { let robj = {} robj[obj.
key] = obj.value return robj }) // reformattedarray is now [{1: 10}, {2: 20}, {3: 30}], // kvarray is still: // [{
key: 1, value: 10}, // {
key: 2, value: 20}, // {
key: 3, value: 30}] mapping an array of numbers using a function containing an argument the following code shows how map works when a function requiring one argument is used with it. the argument will automatically be assigned from ...
Array - JavaScript
property. ...
...f the array, the engine will update the array's length property accordingly: fruits[5] = 'mango' console.log(fruits[5]) // 'mango' console.log(object.
keys(fruits)) // ['0', '1', '2', '5'] console.log(fruits.length) // 6 increasing the length. fruits.length = 10 console.log(fruits) // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4] console.log(object.
keys(fruits)) // ['0', '1', '2', '5'] console.log(fruits.length) // 10 console.log(fruits[8]) // undefined decreasing the length property does, however, delete elements. fruits.length = 2 console.log(object.
keys(fruits)) // ['0', '1'] console.log(fruits.length) // 2 this is explained further on the array.length page. creating an array using the result of a match the resul...
...ay.prototype[@@unscopables] a symbol containing property names to exclude from a with binding scope. instance methods array.prototype.concat() returns a new array that is this array joined with other array(s) and/or value(s). array.prototype.copywithin() copies a sequence of array elements within the array. array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. array.prototype.every() returns true if every element in this array satisfies the testing function. array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. array.prototype.filter() returns a new array containing all elements of the calling array for which the provided filtering function return...
....foreach() calls a function for each element in the array. array.prototype.includes() determines whether the array contains a value, returning true or false as appropriate. array.prototype.indexof() returns the first (least) index of an element within the array equal to an element, or -1 if none is found. array.prototype.join() joins all elements of an array into a string. array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to an element, or -1 if none is found. array.prototype.map() returns a new array containing the results of calling a function on every element in this array. array.prototype.pop() removes the last element fr...
Intl.Collator() constructor - JavaScript
contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax new intl.collator([locales[, options]]) parameters locales optional. a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. the following unicode extension
keys are allowed: co variant collations for certain locales. possible values include: "big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan". the "standard" and "search" values are ignored; they are replaced by the options property usage (see below). kn whether numeric collation should be used, such that "1" < "2"...
...2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan". the "standard" and "search" values are ignored; they are replaced by the options property usage (see below). kn whether numeric collation should be used, such that "1" < "2" < "10". possible values are "true" and "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. kf whether upper case or lower case should sort first. possible values are "upper", "lower", or "false" (use the locale's default). this option can be set through an options property or through a unicode extension
key; if both are provided, the options property takes precedence. options optional. an object with some or all ...
...usage "sort"; it's locale dependent for usage "search". ignorepunctuation whether punctuation 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. ...
...implementations are not required to support this property. ...
Intl.Locale.prototype.calendar - JavaScript
tl.locale.prototype.calendar property is an accessor property which returns the type of calendar used in the locale. description the calendar property returns the part of the locale that indicates the locale's calendar era. while most of the world uses the gregorian calendar, there are several regional calendar eras used around the world. ...
...ndar used in the locale. description the calendar property returns the part of the locale that indicates the locale's calendar era. while most of the world uses the gregorian calendar, there are several regional calendar eras used around the world. the following table shows all the valid unicode calendar
key strings, along with a description of the calendar era they represent. unicode calendar
keys unicode calendar
keys calendar
key (name) description buddhist thai buddhist calendar chinese traditional chinese calendar coptic coptic calendar dangi traditional korean calendar ethioaa ethiopic calendar, amete alem (epoch approx. 5493 b.c.e) ethiopic ethiopic calendar, amete mihret (epoch approx, 8 c.e.)...
...thus, the calendar era type can be added to the inital l...
...1 calendar week rules) japanese japanese imperial calendar persian persian calendar roc republic of china calendar the islamicc calendar
key has been deprecated. please use islamic-civil. islamicc civil (algorithmic) arabic calendar examples adding a calendar in the locale string calendar eras fall under the category of locale
key "extension
keys". these
keys add additional data about the locale, and are added to locale identifiers by using the -u extension. thus, the calendar era type can be added to the inital locale identifier string that is passed into the intl.locale constructor. to add the calendar type, first add the -u extension to the string. next, add the -ca extension to indicate that you are adding a calendar t...
JSON.parse() - JavaScript
= /(?:^|:|,)(?:\s*\[)+/g; var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; json.parse = function(text, reviver) { // the parse method takes a text and an optional reviver function, and returns // a javascript value if the text is a valid json text. ...
.../ the parse method takes a text and an optional reviver function, and returns // a javascript value if the text is a valid json text. var j; function walk(holder,
key) { // the walk method is used to recursively walk the resulting structure so // that modifications can be made. ...
...in the first stage, we replace certain // unicode characters with escape sequences. javascript handles many characters // incorrectly, either silently deleting them, or treating them as line endings. text = string(text); rx_dangerous.lastindex = 0; if (rx_dangerous.test(text)) { te...
...eturns undefined (or returns no value, for example, if execution falls off the end of the function), the property is deleted from the object. otherwise, the property is redefined to be the return value. if the reviver only transforms some values and not others, be certain to return all untransformed values as-is, otherwise, they will be deleted from the resulting object. json.parse('{"p": 5}', (
key, value) => typeof value === 'number' ? value * 2 // return value * 2 for numbers : value // return everything else unchanged ); // { p: 10 } json.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (
key, value) => { console.log(
key); // log the current property name, the last is "". return value; // return the unchanged property value. }); // 1 // 2 // 4 // 6 // 5 // ...
Map.prototype.delete() - JavaScript
return value true if an element in the map object existed and has been removed, or false if the element does not exist. examples using delete() var mymap = new map(); mymap.set('bar', 'foo'); mymap.delete('bar'); // returns true. successfully removed. mymap.has('bar'); // returns false. ...
... return value true if an element in the map object existed and has been removed, or false if the element does not exist. examples using delete() var mymap = new map(); mymap.set('bar', 'foo'); mymap.delete('bar'); // returns true. successfully removed. mymap.has('bar'); // returns false. ...
... return value true if an element in the map object existed and has been removed, or false if the element does not exist. examples using delete() var mymap = new map(); mymap.set('bar', 'foo'); mymap.delete('bar'); // returns true. successfully removed. mymap.has('bar'); // returns false. ...
... return value true if an element in the map object existed and has been removed, or false if the element does not exist. examples using delete() var mymap = new map(); mymap.set('bar', 'foo'); mymap.delete('bar'); // returns true. successfully removed. mymap.has('bar'); // returns false. ...
Map.prototype.set() - JavaScript
value the value of the element to add to the map object. return value the map object. ...
... value the value of the element to add to the map object. return value the map object. ...
... value the value of the element to add to the map object. return value the map object. ...
... value the value of the element to add to the map object. return value the map object. ...
Object.getOwnPropertyNames() - JavaScript
ay of strings that corresponds to the properties found directly in the given object. description object.getownpropertynames() returns an array whose elements are strings corresponding to the enumerable and non-enumerable properties found directly in a given object obj. the ordering of the enumerable properties in the array is consistent with the ordering exposed by a for...in loop (or by object.
keys()) over the properties of the object. the ordering of the non-enumerable properties in the array and the ordering among the enumerable properties is not defined. in es5, if the argument to this method is not an object (a primitive), then it will cause a typeerror. in es2015, a non-object argument will be coerced to an object. object.getownpropertynames('foo'); // typeerror: "foo" is not an obj...
... items on the prototype chain are not listed: function parentclass() {} parentclass.prototype.inheritedmethod = function() {}; function childclass() { this.prop = 5; this.method = function() {}; } childclass.pro...
...edmethod = function() {}; function childclass() { this.prop = 5; this.method = function() {}; } childclass.prototype = new parentclass; childclass.prototype.prototypemethod = function() {}; console.log( object.getownpropertynames( new childclass() // ["prop", "method"] ) ); get non-enumerable properties only this uses the array.prototype.filter() function to remove the enumerable
keys (obtained with object.
keys()) from a list of all
keys (obtained with object.getownpropertynames()) thus giving only the non-enumerable
keys as output. var target = myobject; var enum_and_nonenum = object.getownpropertynames(target); var enum_only = object.
keys(target); var nonenum_only = enum_and_nonenum.filter(function(
key) { var indexinenum = enum_only.indexof(
key); if (indexinenum == -1)...
...rom a list of all
keys (obtained with object.getownpropertynames()) thus giving only the non-enumerable
keys as output. var target = myobject; var enum_and_nonenum = object.getownpropertynames(target); var enum_only = object.
keys(target); var nonenum_only = enum_and_nonenum.filter(function(
key) { var indexinenum = enum_only.indexof(
key); if (indexinenum == -1) { // not found in enum_only
keys, // meaning that the
key is non-enumerable, // so return true so we keep this in the filter return true; } else { return false; } }); console.log(nonenum_only); specifications specification ecmascript (ecma-262)the definition of 'object.getownpropertynames' in that specification. ...
Reflect - JavaScript
y(target, thisargument, argumentslist) calls a target function with arguments as specified by the argumentslist parameter. see also function.prototype.apply(). reflect.construct(target, argumentslist[, newtarget]) the new operator as a function. equivalent to calling new target(...argumentslist). also provides the option to specify a different prototype. reflect.defineproperty(target, property
key, attributes) similar to object.defineproperty(). returns a boolean that is true if the property was successfully defined. reflect.deleteproperty(target, property
key) the delete operator as a function. equivalent to calling delete target[property
key]. reflect.get(target, property
key[, receiver]) returns the value of the property. works like getting a property from an object (target[propertyke...
...that is true if the property was successfully defined. reflect.deleteproperty(target, property
key) the delete operator as a function. equivalent to calling delete target[property
key]. reflect.get(target, property
key[, receiver]) returns the value of the property. works like getting a property from an object (target[property
key]) as a function. reflect.getownpropertydescriptor(target, property
key) similar to object.getownpropertydescriptor(). returns a property descriptor of the given property if it exists on the object, undefined otherwise. reflect.getprototypeof(target) same as object.getprototypeof(). reflect.has(target, property
key) returns a boolean indicating whether the target has the property. either as own or inherited. works like the in operator as a function. reflect.ise...
...bject, undefined otherwise. reflect.getprototypeof(target) same as object.getprototypeof(). reflect.has(target, property
key) returns a boolean indicating whether the target has the property. either as own or inherited. works like the in operator as a function. reflect.isextensible(target) same as object.isextensible(). returns a boolean that is true if the target is extensible. reflect.own
keys(target) returns an array of the target object's own (not inherited) property
keys. reflect.preventextensions(target) similar to object.preventextensions(). returns a boolean that is true if the update was successful. reflect.set(target, property
key, value[, receiver]) a function that assigns values to properties. returns a boolean that is true if the update was successful. reflect.setproto...
... the prototype of an object. returns a boolean that is true if the update was successful. examples detecting whether an object contains certain properties const duck = { name: 'maurice', color: 'white', greeting: function() { console.log(`quaaaack! my name is ${this.name}`); } } reflect.has(duck, 'color'); // true reflect.has(duck, 'haircut'); // false returning the object's own
keys reflect.own
keys(duck); // [ "name", "color", "greeting" ] adding a new property to the object reflect.set(duck, 'eyes', 'black'); // returns "true" if successful // "duck" now contains the property "eyes: 'black'" specifications specification ecmascript (ecma-262)the definition of 'reflect' in that specification. ...
Set - JavaScript
collection. value equality because each value in the set has to be unique, the value equality will be checked. in an earlier version of ecmascript specification, this was not based on the same algorithm as the one used in the === operator. specifically, for sets, +0 (which is strictly equal to -0) and -0 were different values. however, this was changed in the ecmascript 2015 specification. see "
key equality for -0 and 0" in the browser compatibility table for details. nan and undefined can also be stored in a set. all nan values are equated (i.e. nan is considered the same as nan, even though nan !== nan). constructor set() creates a new set object. static properties get set[@@species] the constructor function that is used to create derived objects. instance properties set.
...alue) would have previously returned. set.prototype.has(value) will return false afterwards. set.prototype.has(value) returns a boolean asserting whether an element is present with the given value in the set object or not. iteration methods set.prototype[@@iterator]() returns a new iterator object that yields the values for each element in the set object in insertion order. ...
...h element in the set object in insertion order. set.prototype.
keys() returns a new iterator object that yields the values for each element in the set object in insertion order. (for sets, this is the same as the values() method.) set.prototype.values() returns a new iterator object that yields the values for each element in the set object in insertion order. (for sets, this is the same as the
keys() method.) set.prototype.entries() returns a new iterator object that contains an array of [value, value] for each element in the set object, in insertion order. this is similar to the map object, so that each entry's
key is the same as its value for a set. set.prototype.foreach(callbackfn[, thisarg]) calls callbackfn once for each value present in the set object, in insertion order. i...
...et) // logs set(4) [ 1, "some text", {…}, {…} ] in firefox // logs set(4) { 1, "some text", {…}, {…} } in chrome iterating sets // iterate over items in set // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset) console.log(item) // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset.
keys()) console.log(item) // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset.values()) console.log(item) // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} // (
key and value are the same here) for (let [
key, value] of myset.entries()) console.log(
key) // convert set object to an array object, with array.from let...
Symbol - JavaScript
foo') typeof sym // "symbol" let symobj = object(sym) typeof symobj // "object" shared symbols in the global symbol registry the above syntax using the symbol() function will not create a global symbol that is available in your whole codebase. to create symbols available across files and even across realms (each of which has its own global scope), use the methods symbol.for() and symbol.
keyfor() to set and retrieve symbols from the global symbol registry. finding symbol properties on objects the method object.getownpropertysymbols() returns an array of symbols and lets you find symbol properties on a given object. note that every object is initialized with no own symbol properties, so that this array will be empty unless you've set symbol properties on the object. constructor ...
...reate derived objects. symbol.toprimitive a method converting an object to a primitive value. symbol.tostringtag a string value used for the default description of an object. used by object.prototype.tostring(). symbol.unscopables an object value of whose own and inherited property names are excluded from the with environment bindings of the associated object. static methods symbol.for(
key) searches for existing symbols with the given
key and returns it if found. otherwise a new symbol gets created in the global symbol registry with
key. symbol.
keyfor(sym) retrieves a shared symbol
key from the global symbol registry for the given symbol. instance properties symbol.prototype.description a read-only string containing the description of the symbol. instance methods symb...
...tion symbols are not enumerable in for...in iterations. in addition, object.getownpropertynames() will not return symbol object properties, however, you can use object.getownpropertysymbols() to get these. ...
...hese. let obj = {} obj[symbol('a')] = 'a' obj[symbol.for('b')] = 'b' obj['c'] = 'c' obj.d = 'd' for (let i in obj) { console.log(i) // logs "c" and "d" } symbols and json.stringify() symbol-
keyed properties will be completely ignored when using json.stringify(): json.stringify({[symbol('foo')]: 'foo'}) // '{}' for more details, see json.stringify(). symbol wrapper objects as property
keys when a symbol wrapper object is used as a property
key, this object will be coerced to its wrapped symbol: let sym = symbol('foo') let obj = {[sym]: 1} obj[sym] // 1 obj[object(sym)] // still 1 specifications specification ecmascript (ecma-262)the definition of 'symbol' in that specification. ...
WeakMap.prototype.set() - JavaScript
value required. any value. the value of the element to add to the weakmap object. return value the weakmap object. ...
... value required. any value. the value of the element to add to the weakmap object. return value the weakmap object. ...
... value required. any value. the value of the element to add to the weakmap object. return value the weakmap object. ...
... value required. any value. the value of the element to add to the weakmap object. return value the weakmap object. ...
Lexical grammar - JavaScript
control characters control characters have no visual representation but are used to control the interpretation of the text. ...
... although bom before hashbang comment will work in a browser it is not advised to use bom in a script with hasbang. bom will not work when you try to run the script in unix/linux. so use utf-8 without bom if you want to run scripts directly from shell. you must only use the #! comment style to specify a javascript interpreter. in all other cases just use a // comment (or mulitiline comment).
keywords reserved
keywords as of ecmascript 2015 break case catch class const continue debugger default delete do else export extends finally for function if import in instanceof new return super switch this throw try typeof var void while with yield future reserved
keywords the following are reserved as future
keywords by the ecmascript specification. they have...
...have no special functionality at present, but they might at some future time, so they cannot be used as identifiers. these are always reserved: enum the following are only reserved when they are found in strict mode code: implements interface let package private protected public static the following are only reserved when they are found in module code: await future reserved
keywords in older standards the following are reserved as future
keywords by older ecmascript specifications (ecmascript 1 till 3). abstract boolean byte char double final float goto int long native short synchronized throws transient volatile additionally, the literals null, true, and false cannot be used as identifiers in ecmascript. reserved word usage reserved words actuall...
...egal because it's an identifier, which is an identifiername without the reserved words. identifiers are used for functiondeclaration, functionexpression, variabledeclaration and so on. identifiernames are used for memberexpression, callexpression and so on. function import() {} // illegal. identifiers with special meanings a few identifiers have a special meaning in some contexts without being
keywords of any kind. they include: arguments get set literals null literal see also null for more information. null boolean literal see also boolean for more information. true false numeric literals the number and bigint types use numeric literals. decimal 1234567890 42 // caution when using with a leading zero: 0888 // 888 parsed as decimal 0777 // parsed as octal, 511 in decimal ...
super - JavaScript
examples using super in classes this code snippet is taken from the classes sample (live demo). here super() is called to avoid duplicating the constructor parts' that are common between rectangle and square. ...
... examples using super in classes this code snippet is taken from the classes sample (live demo). here super() is called to avoid duplicating the constructor parts' that are common between rectangle and square. ...
... examples using super in classes this code snippet is taken from the classes sample (live demo). here super() is called to avoid duplicating the constructor parts' that are common between rectangle and square. ...
... access and call functions on an object's parent. the super.prop and super[expr] expressions are valid in any method definition in both classes and object literals. syntax super([arguments]); // calls the parent constructor. super.functiononparent([arguments]); description when used in a constructor, the super
keyword appears alone and must be used before the this
keyword is used. the super
keyword can also be used to call functions on a parent object. examples using super in classes this code snippet is taken from the classes sample (live demo). here super() is called to avoid duplicating the constructor parts' that are common between rectangle and square. class rectangle { constructor(height, width) { this.name = 'rectangle'; this.height = height; this.width = width;...
Authoring MathML - MathML
atical fonts in order to get a good layout or to allow different style, it's important to have mathematical fonts available. it's always good to provide a link to mdn's font instructions, so that your visitors can verify whether they have appropriate fonts installed on their system. it's also good to provide a fallback with web fonts. prior to gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamon
key 2.28), it was a bit tedious to setup math fonts, see the font instructions for mozilla 2.0. for gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamon
key 2.28), this is much simpler and is compatible with any web rendering engine with mathml support. for example, here is a minimal stylesheet to use latin modern for the text and latin modern math for the mathematics: @namespace url('http://www.w3.o...
...he html5 format and thus can use mathml expressions. be sure to have the "send as html" and "view as html" options enabled. in thunderbird, you can use the "insert html" command to paste your html+mathml code. mathbird is a convenient add-on for thunderbird to insert such mathml expressions using the asciimath input syntax. moreover, a latex-to-mathml input box has also been integrated into seamon
key since version 2.28 and into thunderbird since version 31. again, the way mathml is handled and the quality of the mathml rendering depends on the mail client. even if your browser supports mathml, your webmail may prevent you to send or receive mails with mathml inside. gecko-based instant messaging clients can integrate a javascript-based text-to-mathml converter (mentioned below) and then rend...
...erver. texzilla, latexml and mathoid and can be used to to perform server-side latex-to-mathml conversion. instiki and mediawiki are two wiki engines that support latex-to-mathml conversion. graphical interface input box texzilla has several interfaces, including a ckeditor plugin used on mdn, an online demo, a firefox add-on or a firefoxos webapp. it has also been integrated into seamon
key since version 2.28 and into thunderbird since version 31. abiword contains a small equation editor, based on itex2mml. finally, bluegriffon has an add-on to insert mathml formulas in your document, using ascii/latex-like syntax. wysiywg editors firemath is an extension for firefox that provides a wysiwyg mathml editor. a preview of the formula is displayed using the rendering engine of mozill...
...xhtml page. lyx is a graphical latex editor, which has built-in support for xhtml+mathml export and can be configured to use similar latex-to-(x)html converters. you can for example, you can configure it to use latexml html5/epub export. openoffice and libreoffice have an equation editor (file → new → formula). it is semi-wysiwyg: you enter the source of the formula using the equation panel/
keyboard and a preview of the formula is regularly refreshed. the editor uses its own syntax "starmath" for the source but mathml is also generated when the document is saved. to get the mathml code, save the document as mml and open it with any text editor. alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called content.xml. amaya is the w3c's web...
OpenSearch description format
it must be 16 or fewer characters of ...
...it must be 16 or fewer characters of plain text, with no html or other markup. description a brief description of the search engine. it must...
... or urls to use for the search. the template attribute indicates the base url for the search query. firefox supports three url types: type="text/html" specifies the url for the actual search query. type="application/x-suggestions+json" specifies the url for fetching search suggestions. in firefox 63 onwards, type="application/json" is accepted as an alias of this. type="application/x-moz-
keywordsearch" specifies the url used when a
keyword search is entered in the location bar. this is supported only in firefox. for these url types, you can use {searchterms} to substitute the search terms entered by the user in the search bar or location bar. other supported dynamic search parameters are described in opensearch 1.1 parameters. for search suggestions, the application/x-suggestio...
...d dynamic search parameters are described in opensearch 1.1 parameters. for search suggestions, the application/x-suggestions+json url template is used to fetch a suggestion list in json format. for details on how to implement search suggestion support on a server, see supporting search suggestions in search plugins. param the parameters that must be passed in along with the search query as
key/value pairs. when specifying values, you can use {searchterms} to insert the search terms entered by the user in the search bar. moz:searchform the url for the site's search page for which the plugin. this lets firefox users visit the web site directly. note: since this element is firefox-specific, and not part of the opensearch specification, we use the moz: xml namespace prefix in the exam...
Performance fundamentals - Web Performance
n of discrete reality). on a computer display, a higher framerate simply makes for a more faithful imitation of reality. note: humans usually cannot perceive differences in framerate above 60hz. that's why most modern electronic displays are designed to refresh at that rate. a television probably looks choppy and unrealistic to a hummingbird, for example. memory usage memory usage is another
key metric. unlike responsiveness and framerate, users don't directly perceive memory usage, but memory usage closely approximates "user state". an ideal system would maintain 100% of user state at all times: all applications in the system would run simultaneously, and all applications would retain the state created by the user the last time the user interacted with the application (application state...
...the critical path is exactly and only the code that must run to produce the event. for example, to paint an application's first frame that comprises visually some html and css to style that html: the html must be parsed the dom for that html must be constr...
...ansitions to get the job done. this works well because the browser is designed to optimize these effects and use the gpu to handle them smoothly with minimal impact on processor performance. another benefit is that you can define these effects in css along with the rest of your app's look-and-feel, using a standardized syntax. css animations give you very granular control over your effects using
keyframes, and you can even watch events fired during the animation process in order to handle other tasks that need to be performed at set points in the animation process. you can easily trigger these animations with the :hover, :focus, or :target, or by dynamically adding and removing classes on parent elements. if you want to create animations on the fly or modify them in javascript, james long h...
...tually draw anything. another benefit to this api is that animations won't run while your app isn't visible on the screen (such as if it's in the background and some other task is operating). this will save battery life and prevent users from cursing your name into the night sky. make events immediate as old-school, accessibility-aware web developers we love click events since they also support
keyboard input. on mobile devices, these are too slow. you should use touchstart and touchend instead. the reason is that these don’t have a delay that makes the interaction with the app appear sluggish. if you test for touch support first, you don’t sacrifice accessibility, either. for example, the financial times uses a library called fastclick for that purpose, which is available for you to us...
<animateMotion> - SVG: Scalable Vector Graphics
value type: <number>*; default value: none; animatable: no path this attribute defines the path of the motion, using the same syntax as the d attribute. value type: <string>; default value: none; animatable: no rotate this attribute defines a rotation applied to the ...
... <animatemotion dur="10s" repeatcount="indefinite" path="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> </circle> </svg> usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<mpath> attributes
keypoints this attribute indicate, in the range [0,1], how far is the object along the path for each
keytimes associated values. value type: <number>*; default value: none; animatable: no path this attribute defines the path of the motion, using the same syntax as the d attribute. value type: <string>; default value: none; animatable: no rotate this attribute defines a rotation applied to the elment animated along a path, usually to make it pointing in the direction of the animation. value ty...
...long a path, usually to make it pointing in the direction of the animation. ...
...h, usually to make it pointing in the direction of the animation. ...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
> element depending on whether it is a valid link implementation status unknown aria state and property attributes animatable implementation status unknown styling change notes contentstyletype attribute removed implementation status unknown linkstyle on svgstyleelement implemented (bug 1239128 (firefox 46.0 / thunderbird 46.0 / seamon
key 2.43)) inner <svg>s and <foreignobjects>s not overflow: hidden; in ua style sheet implementation status unknown overflow: hidden; on <hatch> in ua style sheet implementation status unknown 0 0 as default value of transform-origin except root <svg> and <svg> children of <foreign> implementation status unknown use of white-space instead of deprecated xml...
...nknown auto value of width and height computes to 0 but 100% on <svg> not implemented coordinate systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation status unknown bounding box for element with no position at (0, 0) implementation status unknown defer
keyword removed from preserveaspectratio attribute removed (bug 1280425) added non-scaling-size, non-rotation and fixed-position
keywords for vector-effect property not implemented yet (bug 1318208) vector-effect has no effect within 3d rendering context implementation status unknown consider clip and overflow on svg document referenced by <image> implementation...
... <source> implementation status unknown <track> implementation status unknown painting change notes paint-order implemented (bug 828805) will-change instead of buffered-rendering implementation status unknown context-fill and context-stroke paint values implemented (bug 719286 (firefox 18.0 / thunderbird 18.0 / seamon
key 2.15) and bug 798843 (firefox 26.0 / thunderbird 26.0 / seamon
key 2.23)) child
keyword for <paint> values and marker properties implementation status unknown vector-effect property only none and non-scaling-stroke values are supported (bug 528332 (firefox 15 / thunderbird 15 / seamon
key 2.12), bug 1318208) arcs value for stroke-linejoin not implemented (bug 123...
...g 620002) only structurally external elements and outermost <svg> element fire load events implementation status unknown resize and scroll instead of svgresize and svgscroll implementation status unknown domactivate removed implementation status unknown focusin and focusout instead of domfocusin and domfocusout implementation status unknown
keyboard events implementation status unknown mutation events removed implementation status unknown svgzoomevent removed implementation status unknown <cursor> element deprecated implementation status unknown linking change notes link svg resources with fragment identifiers implementation status unknown xlink:type, xl...
Private Properties - Archive of obsolete content
om within another closure, there is no way for objects of the same class to access each other's private properties. using weakmaps the techniques above are either not restrictive enough (prefixes) or too restrictive (closures), however the recent introduction of weakmaps provides a solution. weakmaps were introduced to javascript in ecmascript 2015 and have recently been implemented in spidermon
key. before explaining how weakmaps work, the following 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. more...
... better approach would be to store thumbnails in their own, separate hash map: let thumbnails = {}; function getthumbnail(image) { let thumbnail = thumbnails[image]; if (!thumbnail) { thumbnail = createthumbnail(image); thumbnails[image] = thumbnail; } return thumbnail; } there are two problems with the above approach. first, it's not possible to use objects as
keys. when an object is used as a
key, it's converted to a string using its tostring method. to make the above code work, a unique identifier must be associated with each image and override its tostring method. the second problem is more severe: the thumbnail cache maintains a strong reference to each thumbnail object, so they will never be freed, even when their corresponding image has gone out of s...
...thumbnail cache maintains a strong reference to each thumbnail object, so they will never be freed, even when their corresponding image has gone out of scope. this is a memory leak waiting to happen. the above two problems are exactly what weakmaps were designed to solve. ...
simple-prefs - Archive of obsolete content
tored value depends on the default value. the options are specified by a mandatory "options" attribute, that is an array of objects with mandatory attributes "label" and "value" the values of the "value" attributes must be supplied as strings. the values of the "label" attributes prefixed with "{name}_options.", where {name} is the name of the preference, are used as localization
keys. if no matching entries are found, the value of the "label" attributes is used verbatim as labels. { "name": "typeofbreath", "type": "menulist", "title": "type of breath", "value": 0, "options": [ { "value": "0", "label": "fire" }, { "value": "1", "label": "cold" }, { ...
...tored value depends on the default value. the options are specified by a mandatory "options" attribute, that is an array of objects with mandatory attributes "label" and "value" the values of the "value" attributes must be supplied as strings. the values of the "label" attributes prefixed with "{name}_options.", where {name} is the name of the preference, are used as localization
keys. if no matching entries are found, the value of the "label" attributes is used verbatim as labels. { "name": "alignment", "type": "radio", "title": "alignment", "value": "n", "options": [ { "value": "l", "label": "lawful" }, { "value": "n", "label": "neutral" }, { "...
...mple-prefs').prefs['somepreference'] the ability to change the default preferences branch is new in add-on sdk 1.15. the branch of the preferences tree under which simple-prefs are stored is, by default, the add-on id. sometimes you might need to use a different branch, especially if you are porting an add-on to the sdk. you can change the sub-branch of extensions using the preferences-branch
key in your add-on's package.json file. globals functions on(prefname, listener) registers an event listener that will be called when a preference is changed. the event listener may take an optional parameter that specifies the name of the property which changed. preference change events are triggered for every character typed by the user. they are also triggered once during add-on initializat...
widget - Archive of obsolete content
to listen to the widget's mouseout event. onattach function include this to listen to the widget's attach event. tooltip string optional text to show when the user's mouse hovers over the widget. if not given, the label is used. allow object an optional object describing permissions for the content. it should contain a single
key named script whose value is a boolean that indicates whether or not to execute script in the content. script defaults to true. contentscriptfile string,array a local file url or an array of local file urls of content scripts to load. content scripts specified by this property are loaded before those specified by the contentscript property. contentscript str...
...e main add-on code, and vice versa. this issue is currently tracked as bug 825434. panel a panel to open when the user clicks on the widget. width the widget's width in pixels. setting it updates the widget's appearance immediately. tooltip the text of the tooltip that appears when the user hovers over the widget. allow a object describing permissions for the content. it contains a single
key named script whose value is a boolean that indicates whether or not to execute script in the content. contentscriptfile a local file url or an array of local file urls of content scripts to load. contentscript a string or an array of strings containing the texts of content scripts to load. contentscriptwhen when to load the content scripts. this may have one of the following values: "sta...
...and vice versa. this issue is currently tracked as bug 825434. panel a panel to open when the user clicks on the widget view. width the widget view's width in pixels. setting it updates the widget view's appearance immediately. tooltip the text of the tooltip that appears when the user hovers over the widget view. allow a object describing permissions for the content. it contains a single
key named script whose value is a boolean that indicates whether or not to execute script in the content. contentscriptfile a local file url or an array of local file urls of content scripts to load. contentscript a string or an array of strings containing the texts of content scripts to load. contentscriptwhen when to load the content scripts. this may have one of the following values: "sta...
lang/functional - Archive of obsolete content
x. let { identity } = require("sdk/lang/functional"); let x = 5; identity(x); // 5 parameters value : mixed the value to be returned. returns mixed : the value that was originally passed in. memoize(fn, hasher) memoizes a given function by caching the computed result. useful for speeding up slow-running computations. if passed an optional hashfunction, it will be used to compute the hash
key for storing the result, based on the arguments to the original function. the default hashfunction just uses the first argument to the memoized function as the
key. let { memoize } = require("sdk/lang/functional"); let memoizedfn = memoize(primefactorization); memoizedfn(50); // returns [2, 5, 5], had to compute memoizedfn(100); // returns [2, 2, 5, 5], had to compute memoizedfn(50); // returns...
...me // and returns the last name. function hasher (input) { return input.split(" ")[1]; } getlineage("homer simpson"); // computes and returns information for "simpson" getlineage("lisa simpson"); // returns cached for "simpson" parameters fn : function the function that becomes memoized. hasher : function an optional function that takes the memoized function's parameter and returns a hash
key for storing the result. returns function : the memoized version of fn. delay(fn, ms, arguments) much like settimeout, delay invokes a function after waiting a set number of milliseconds. if you pass additional, optional, arguments, they will be forwarded on to the function when it is invoked. let { delay } = require("sdk/lang/functional"); delay(printadd, 2000, 5, 10); // prints "5+10=15" ...
...e's debounce() function: this takes a function and returns a new version of the function which, when invoked, will not be executed until it has not been invoked for wait milliseconds. this means that if the function's called many times in quick succession the function will only execute once, after the blizzard of calls has finished. this could be useful, for example, if we are checking the user's
keyboard input, and want to wait until they've paused in their typing before we do so. parameters fn : function the function to debounce. wait : integer the number of milliseconds to wait before the function is executed. returns function : the debounced version of fn. throttle(fn, wait, options) this function is new in firefox 30. from underscore's throttle() function: this takes a functi...
Creating annotations - Archive of obsolete content
t: 180px; margin: 10px; padding: 0px; } </style> </head> <body> <textarea rows='10' cols='20' id='annotation-box'> </textarea> </body> </html> save this inside data/editor as annotation-editor.html. ...
...is inside data/editor as annotation-editor.html. annotation editor content script in the corresponding content script we do two things: handle a message from the add-on code by giving the text area focus listen for the return
key and when it is pressed, send the contents of the text area to the add-on. here's the code: var textarea = document.getelementbyid('annotation-box'); textarea.on
keyup = function(event) { if (event.
keycode == 13) { self.postmessage(textarea.value); textarea.value = ''; } }; self.on('message', function() { var textarea = document.getelementbyid('annotation-box'); textarea.value = ''; textarea.focus(); }); save this inside data/editor as annotation-editor.js. updating main.js again now we'll update main.js again to create the editor and us...
...ata) { annotationeditor.annotationanchor = data; annotationeditor.show(); }); worker.on('detach', function () { detachworker(this, selectors); }); } }); execute cfx run again, activate the annotator, move your mouse over an element and click the element when it is highlighted. you should see a panel with a text area for a note: enter the note and press the return
key: you should see console output like this: info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review. info: we should ask for full review if possible. that's a complete annotation, and in the next section we'll deal with storing it. ...
Chapter 1: Introduction to Extensions - Archive of obsolete content
s javascript execution on a site-by-site basis. web application integration extensions fixme: update this. the use the apis of certain web applications to provide certain pieces of information. new feature extensions fixme: update this. extensions can add completely new features to firefox. this class of extension requires a greater level of knowledge and programming ability. greasemon
key userchrome.js both of these provide an environment for running user scripts (javascript) in firefox itself, where the scripts can target specific websites. adblock plus blocks the display of unwanted advertisements on web pages. all-in-one gestures adds mouse-gesture functionality. application level extensions fixme: update this. these are sophisticated extensions that can be conside...
...work for web sites? does it work for firefox? user style sheets (change appearance through css) yes; you can change the usercontent.css file, or use the stylish extension. yes; you can change the userchrome.css file, or use the stylish extension. user scripts (change appearance and functionality through javascript) yes; you can use the greasemon
key extension or "bookmarklets." yes; you can change userchrome.js to add functionality through javascript. extensions (these can do anything) yes yes theming (this changes the look of the browser) no yes let's build an extension table 1 shows the various customization options available to a user in firefox. users have flexible customization optio...
...javascript. extensions (these can do anything) yes yes theming (this changes the look of the browser) no yes let's build an extension table 1 shows the various customization options available to a user in firefox. users have flexible customization options, using css in user style sheets and javascript/dom in user scripts (these depend on stylish, greasemon
key, and userchrome.js). in addition to css and javascript, extensions can take advantage of xul and xpcom technologies for more sophisticated features. themes, which alter firefox's appearance, are a kind of add-on. in order to create an extension, you need an idea and just a little programming ability. the following chapters explain in detail the extension-writing techniques of some of japan's le...
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
y to customize as the rest. the first thing you need to do is add your buttons to the toolbar palette. the toolbarpalette is a collection of all toolbar buttons and toolbar items in firefox, including those added by extensions. to add your buttons, all you need to do is overlay the palette in your main browser overlay. ...
...ou want as default behavior, because it would be very hard for the user to discover your buttons. keep in mind most users don't know how to customize toolbars in firefox. let's add our own toolbar. this is done in the overlay as well. <window id="main-window"> <toolbox id="navigator-toolbox"> <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarname.label;" access
key="&xulschoolhello.toolbar.access
key;" customizable="true" mode="icons" context="toolbar-context-menu" defaultset="xulschoolhello-hello-world-button" insertbefore="personaltoolbar" /> </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser window. the toolbox...
...erably after firefox 4, so supporting older versions is not mentioned here (you can check this document's change history for older revisions, though). these are the current icon sets for firefox: windows mac os x (lion and above) mac os x linux (gnome) note: the images above are probably not distributable under the same cc license, unlike the rest of this material. here are the
key similarities and differences between the 3 themes: all systems use small icons that are 16x16 pixels. only the gnome theme has a set of large icons that are 24x24 pixels. only a few icons have different states (rows). the disabled state for most buttons is handled with css. the icon sets have different paddings for their icons. the one for windows has 19x19 pixel frames, while the mac os one...
Custom XUL Elements with XBL - Archive of obsolete content
on" is created. xbl provides the encapsulation we needed to manage these nodes as a unit. as a bonus, you should look into the usage of nsifilepicker to open a "open file" dialog in a way that looks native for all systems. now let's look into the xbl file, person.xml. <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> the bindings element is the root of the document, and it's a container for binding elements. notice how the default namespace for the document is xbl, and the xul namespace is defined as "xul". you'll need to keep this in mind when defining the content of the binding, because weird things can happen if you don't add "xul:" to your content nodes. <binding...
...g you define the xul content that will be displayed for your element. <content> <xul:hbox> <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> <xul:label xbl:inherits="value=name" /> <xul:description xbl:inherits="value=greeting" /> </xul:vbox> <xul:vbox> <xul:button label="&xulshoolhello.remove.label;" access
key="&xulshoolhello.remove.access
key;" oncommand="document.getbindingparent(this).remove(event);" /> </xul:vbox> </xul:hbox> </content> our element is very simple, displaying an image, a couple of text lines and a button. here are a couple of important things to notice: the "xul:" namespace must be used for all xul tags you have in your content. the xbl:inherits attribute lets yo...
...s an attribute and not an internal value. methods our "person" binding has a single method that removes the item from the list: <method name="remove"> <parameter name="aevent" /> <body><![cdata[ this.parentnode.removechild(this); ]]></body> </method> as you can see, it's very easy to define a method and the parameters it takes. you can also have a return value using the return
keyword, just like on regular js code. the method uses the parent node to remove the person node. simple enough. you can do almost anything from xbl code, including using xpcom components, js code modules and available chrome scripts. the main setback is that you can't have script tags defined in a binding, so you depend on the scripts that have been included in the xul files that use the binding. a...
JavaScript Object Management - Archive of obsolete content
ion call. */ }. if you have to use a reference to this inside the function, declare a variable called that that equals this, and use that in the anonymous function. javascript has a host of features that make it extremely flexible, but it also has some disadvantages, as it is not as strict as other languages, such as java. a clear example of this is the fact that there are no private or public
keywords that allow you to protect object members. as a alternative for this, a naming standard is frequently used to distinguish private and public members. there's no scope enforcement whatsoever, but this standard give others the chance to "play nice" and don't use private members. use "_" at the beginning of private attributes and methods in js objects. for example: _stringbundle, _createusern...
...r to do this: this.obsservice = cc["@mozilla.org/observer-service;1"].getservice(ci.nsiobserverservice); these 2 constants don't need to be defined in the overlay because they are already defined globally in the browser.js file in firefox. we only need to define them when we're making windows of our own, or when we're working with code outside of the chrome (or porting your code to seamon
key, which doesn't have those constants declared in the main window). include the cc and ci constants in all xul windows that are not overlays, all jsm files, and all xpcom components (see further ahead). do this even if you don't need them now. it's better to just make a habit out of it. this is a point that is worth highlighting: modules work outside of the window scope. unlike scripts in the...
... of the user. */ _name : null, /* the url of the user. */ _url : null, /** * gets the user name. * @return the user name. */ get name() { return this._name; }, /** * gets the user url. * @return the user url. */ get url() { return this._url; } }; in this example we defined a fictitious user class for the hello world extension. using the function
keyword to define a class is odd, but this is just the javascript way: functions are also objects. the definition of the class acts as a constructor as well, and then you can define all other members using the prototype attribute. in this case we defined "getter" properties for the name and url members. this way we have immutable instances of our class. well, only if consumers of the class play nice ...
Signing an extension - Archive of obsolete content
certificates. in the certificate manager, select the your certificates tab. select your organization's certificate and click backup. enter the file name, e.g. codesign.p12. enter the password to protect your certificate backup and click ok. a p12 file will be exported on your desktop. create a certificate database first, create a certificate database that will be used for signing. mkdir
keystore cd
keystore nss-certutil -n -d . you will be asked for the password. use a strong password to protect your database. then cert8.db,
key3.db and secmod.db will be generated. next, import your certificate. nss-pk12util -i codesign.p12 -d . show the certificate list in your database. nss-certutil -l -d . set the trust for the root and intermediate certificates. here's an example of verisig...
...kname) \ -p (your certificate password) \ -x -z (output path/name of signed file) \ (path to your extension working directory that contains chrome directory, chrome.manifest file, install.rdf file, etc.) writing your password directly in the script is dangerous. for production, use such a code: echo "enter password for object signing:" read mypassword nss-signtool \ -d /volumes/codesign/
keystore \ -k "my company's verisign, inc. id" \ -p $mypassword \ -x -z ~/desktop/myextension/dest/myextension-1.0.xpi \ ~/desktop/myextension/source unset mypassword then a signed xpi file will be generated. verify drag and drop the xpi file into the content area of firefox. on the installation dialog, you can see your organization name along with the file name. references signing a xpi -...
...ssword \ -x -z ~/desktop/myextension/dest/myextension-1.0.xpi \ ~/desktop/myextension/source unset mypassword then a signed xpi file will be generated. verify drag and drop the xpi file into the content area of firefox. on the installation dialog, you can see your organization name along with the file name. references signing a xpi - more detailed instructions including test procedures.
key manager - a firefox extention that has the ability to sign xpi files. signing a firefox extension with a windows authenticode ssl certificate /
key - note that some cas do not allow (or support) to divert an authenticode certificate to object signing. please check the terms of service. signing an executable with authenticode - for signing executable file (exe) ...
Adding preferences to an extension - Archive of obsolete content
dow.addeventlistener("unload", function(e) { stockwatcher.shutdown(); }, false); design the preference dialog now that we've written all the code, we need to build the xul file for the options dialog. ...
...e second is the textbox itself, in which the user enters the symbol. the preference property ties the textbox to the "pref_symbol" <preference> element and to the "extensions.stockwatcher2.symbol" preference. this lets the preference value automatically be updated to reflect the content of the textbox. ...
...he preference value automatically be updated to reflect the content of the textbox. alternative method: inline options requires gecko 7(firefox 7 / thunderbird 7 / seamon
key 2.4) you could use inline options for this preference. you must set em:optionstype to 2 in your install.rdf. your options.xul file would look like this: <?xml version="1.0" ?> <vbox xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <setting pref="extensions.stockwatcher2.symbol" type="string" title="stock to watch" /> </vbox> adding the context menu adding the contextual menu is easy; all the work that needs doing is done in the stockwatcher2.xul file. the first step is to add the context attribute to the status bar panel: <statusbar id="status-bar"> <statusbarpanel id="stockwa...
Creating a status bar extension - Archive of obsolete content
extension identification information certain information is needed so firefox can uniquely identify your extension. in this sample, these fields are: property name description id a unique identification string. before firefox 1.5, this was a guid. starting with firefox 1.5, however, you should use a string in the form extension-name@creator-domain. ...
...d more details about format of chrome manifests in the chrome manifest section. the xul overlay the xul overlay file contains the xul description of the user interface we want to add to firefox. our overlay file, status-bar-sample-1.xul, looks like this: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay > <overlay id="status-bar-sample-1-overlay" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="status-bar-sample-1" label="hello world" tooltiptext="sample status bar item" /> </statusbar> </overlay> the first order of business in the status-bar-sample-1.xul file is to establish that this is in fact a xul file, and to set up a unique id for the overlay. this is accom...
...tus-bar-sample-1" label="hello world" tooltiptext="sample status bar item" /> </statusbar> </overlay> the first order of business in the status-bar-sample-1.xul file is to establish that this is in fact a xul file, and to set up a unique id for the overlay. this is accomplished by the following line of xml: <overlay id="status-bar-sample-1-overlay" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> once that's accomplished, we can describe our user interface. in this case, we're simply inserting a new panel into the status bar at the bottom of firefox browser windows. we do this by embedding inside the statusbar named "status-bar" -- which is the firefox browser window's status bar -- a new statusbarpanel object we call "status-bar-sample-1". we include...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
its original inspiration comes from http://www.alain.knaff.lu/howto/mozillacustomization/ and http://mit.edu/~firefox/www/maintain...utoconfig.html. for history, i've kept mozilla and netscape chapters, as certain points are complementary to the web-based autoconfig file. this mcd (aka autoconfig here), is not to be confused with https://wiki.mozilla.org/thunderbird...oconfiguration . ...
... do not use the name all.js because it is reserved. ref: bug 690370 available functions are (see prefcalls.js file for details): function getprefbranch() function pref(prefname, value) function defaultpref(prefname, value) function lockpref(prefname, value) function unlockpref(prefname) function getpref(prefname) function getldapattributes(host, base, filter, attribs) function getldapvalue(str,
key) function displayerror(funcname, message) function getenv(name) configure autoconfig two directives ask thunderbird to use autoconfig at startup: # cat /usr/lib/thunderbird/defaults/pref/tb-autoconf.js // 20100526 - modification autoconfig jehan. // pref("general.config.obscure_value", 0); // for mcd .cfg files pref('general.config.filename', 'thunderbird.cfg'); // for mcd .cfg files it ...
...mozilla_debug")allows user to print debugging messages if mozilla_debug is defined in either the shell for unix (export mozilla_debug=1) or in the command.com environment in windows (set mozilla_debug=1). blank space bug i noticed a problem which is due to be corrected in mozilla 1.8 i think... here's the report and workaround: bug 229271. to fix, add the following: start_pos += search_
key.length; //start start_pos +=1; //end to function getldapvalue() in autoconfig/preffcalls.js. documentation i also opened a report on the lack of documentation bug 178685 which led to the wonderful doc: http://wangrepublic.org/daniel/mozilla/prefs/ defeultpref for home page i cannot set the home page with the defaultpref function, so that it is set by default, but still allows the us...
Getting Started - Archive of obsolete content
being supplied by this theme <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> in the code search for the part listed above. change the blue part to whatever you want your theme called and then its version number. then scroll down to the next section. ...
... replace the author section with your name. the description shows up below the preview image. place your theme name and version number on this line point to your preview.png/preview.jpg/preview.gif here the packages section lists which components of the browser suit that you are modifying. ...
... replace the author section with your name. the description shows up below the preview image. place your theme name and version number on this line point to your preview.png/preview.jpg/preview.gif here the packages section lists which components of the browser suit that you are modifying. ...
Documentation for BiDi Mozilla - Archive of obsolete content
...
... ...
...et and mcontentlength during bidi processing nsdirectionalframe layout/generic/nsbidiframes.cpp subclass of nsframethis is a special frame which represents a bidi control. it is created when resolving text containing a unicode bidi control character, a bdo tag, or right-to-left alignment caused by a dir tag or css. nsibidi
keyboard widget/public/nsibidi
keyboard.idl widget/src/%platform%/nsbidi
keyboard.cpp sets and queries the directionality of the current
keyboard language. ...
Code snippets - Archive of obsolete content
b(url); } } partially corrupt a server components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function deletepath(path) { let resource = new resource(weave.service.storageurl + path); resource.setheader("x-confirm-delete", "1"); return resource.delete(); } // delete meta/global: deletepath("meta/global"); // delete
keys: deletepath("crypto/
keys"); // delete server: deletepath(""); corrupt a single engine on the server let engine = "bookmarks"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); components.utils.import("resource://services-sync/util.js"); let r = new resource(weave.service.storageurl + "meta/global"); let g = r.get(); le...
...source(weave.service.storageurl + "meta/global"); let g = r.get(); let envelope = json.parse(g); let payload = json.parse(envelope.payload); payload.engines[engine].syncid = weave.utils.makeguid(); // or any other guid you like. payload.engines[engine].version = 0; // or any other version number you like. envelope.payload = json.stringify(payload); r.put(json.stringify(envelope)); generate new
keys // clients always wipe the server when they generate new
keys. components.utils.import("resource://services-sync/main.js"); weave.service._freshstart(); // if you want to do it without wiping the server (which will cause corruption!): weave.service.generatenewsymmetric
keys(); print out a list of large bookmark records // change '1000' as appropriate. components.utils.import("resource://servi...
...t to do it without wiping the server (which will cause corruption!): weave.service.generatenewsymmetric
keys(); print out a list of large bookmark records // change '1000' as appropriate. ...
GRE Registration - Archive of obsolete content
successfully embedding the gre requires that information about installed gres be stored on the system. this information is stored differently on each operating system. this document describes the registration mechanism. windows on windows, gre registration information is kept in the win32 registry under the h
key_local_machine/software/mozilla.org/gre and h
key_current_user/software/mozilla.org/gre
keys. ...
...dding the gre requires that information about installed gres be stored on the system. this information is stored differently on each operating system. this document describes the registration mechanism. windows on windows, gre registration information is kept in the win32 registry under the h
key_local_machine/software/mozilla.org/gre and h
key_current_user/software/mozilla.org/gre
keys. ...
...second-installation when installing a gre via the mozilla suite gre installer, the installer will blindly overwrite any previous gre information in hklm/software/mozilla.org/gre/<version>. when installing a gre via the command line <tt>xulrunner.exe -register-global</tt>, xulrunner will detect that there is already an installation at hklm/software/mozilla.org/gre/<version> and will try alternate
keys <version>_1 _2 until an available
key is found. mac on mac, the only gre is the libxul framework xul.framework. this framework is installed either in /library/frameworks/xul.framework/versions/<version> or in ~/library/frameworks/xul.framework/versions/<version>. linux on linux, registration information is kept in ini-style files of the following form: [1.7.10] gre_path=/usr/lib/mozilla-1...
Nanojit - Archive of obsolete content
you can get nanojit by cloning the tamarin-redux mercurial repository at http://hg.mozilla.org/tamarin-redux. it's in the nanojit directory. the input for nanojit is a stream of nanojit lir instructions. the term lir is compiler jargon for a language used internally in a compiler that is usually cross-platform but very close to machine language. it is an acronym for "low-level intermediate representation". ...
...buffer, the application calls nanojit::compile() to produce machine code, which is stored in a nanojit::fragment. internally to nanojit, another set of filters operates on the lir as it passes from the lirbuffer toward the assembler. the result of compilation is a function that the application can call from c via a pointer to the first instruction. example the following code works with spidermon
key's hacked version of nanojit. figuring out how to compile it is left as an exercise for the reader; the following works when run in the object directory of an --enable-debug spidermon
key shell: g++ -ddebug -g3 -wno-invalid-offsetof -fno-rtti -include js-confdefs.h -i dist/include/ -i.. -i ../nanojit -o jittest ../jittest.cpp libjs_static.a note: remove the -ddebug if you have not compiled spid...
...cked version of nanojit. figuring out how to compile it is left as an exercise for the reader; the following works when run in the object directory of an --enable-debug spidermon
key shell: g++ -ddebug -g3 -wno-invalid-offsetof -fno-rtti -include js-confdefs.h -i dist/include/ -i.. -i ../nanojit -o jittest ../jittest.cpp libjs_static.a note: remove the -ddebug if you have not compiled spidermon
key with --enable-debug, and use whatever you called the sample source file in place of jittest.cpp. #include <stdio.h> #include <stdint.h> #include "jsapi.h" #include "jstracer.h" #include "nanojit.h" using namespace nanojit; const uint32_t cache_size_log2 = 20; static avmplus::gc gc = avmplus::gc(); static avmplus::avmcore core = avmplus::avmcore(); int main() { logcontrol lc; #ifdef debug l...
valueExists - Archive of obsolete content
valueexists returns whether a value for the given
key exists. method of winreg object syntax boolean valueexists ( string
key, string value ); parameters the method has the following parameters:
key a string representing the path to the
key. value a string representing the value being queried. returns boolean value: true if the
key exists and the user has read access to it, otherwise false. ...
...alueexists ( string
key, string value ); parameters the method has the following parameters:
key a string representing the path to the
key. value a string representing the value being queried. returns boolean value: true if the
key exists and the user has read access to it, otherwise false. ...
...string
key, string value ); parameters the method has the following parameters:
key a string representing the path to the
key. value a string representing the value being queried. returns boolean value: true if the
key exists and the user has read access to it, otherwise false. ...
textbox.type - Archive of obsolete content
« xul reference home type type: one of the values below you can set the type attribute to one of the values below for a more specialized type of textbox. don't set the type if you wish to use a regular textbox. autocomplete a textbox that supports autocomplete. for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamon
key]) (firefox) number a textbox that only allows the user to enter numbers. in addition, arrow buttons appear next to the textbox to let the user step through values. there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value. password a textbox that hides what is typed, used for enteri...
... textbox.value. password a textbox that hides what is typed, used for entering passwords. search a textbox intended for searching. the command event will fire as the user modifies the value. a listener for the command event should update search results. if the searchbutton attribute is set to true, the command event is only fired if the user presses the search button or presses the enter
key. you may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500). timed this textbox will fire a command event after the user types characters and a certain time has passed. the delay is set with the timeout attribute. the command event will fire if the user presses t...
... specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500). timed this textbox will fire a command event after the user types characters and a certain time has passed. the delay is set with the timeout attribute. the command event will fire if the user presses the enter
key. the timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. xbl-specific note beware that if you create an xbl binding for a textbox, you need to use the appropriate extends attribute and changing type attribute on the tree won't have effect. e.g. if you have <binding id="input" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete" >, then t...
Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible access
key activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccess
keyaccept buttonaccess
keycancel buttonaccess
keydisclosure buttonaccess
keyextra1 buttonaccess
keyextra2 buttonaccess
keyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed c...
...ollapsed color cols command commandupdater completedefaultindex container containment contentcontextmenu contenttooltip context contextmenu control crop curpos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset description dir disableautocomplete disableautoselect disableclose disabled disablehistory disable
keynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hide...
... enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignore
keys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty
key keycode
keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick mult...
command - Archive of obsolete content
the command event is executed when an element is activated. how it is activated varies for each element and in many cases, there are several ways to activate an element. for example, a button can be activated by clicking on it with the mouse or by pressing space while it has the focus. menus can be activated by selecting them with the mouse or by pressing a shortcut
key. command elements can be activated by any of their observing elements being activated. the command event should always be used instead of the click event because it will be called in all of the needed cases. general info specification xul interface xulcommandevent bubbles yes cancelable yes target element default action none properties property type description target read...
...ent is cancellable or not? view read only windowproxy document.defaultview (window of the document) detail read only long (float) unused; always zero. sourceevent read only event the activation event that caused this command event to be generated. currently only set when a command event is redirected though use of the command attribute. ...
...y windowproxy document.defaultview (window of the document) detail read only long (float) unused; always zero. sourceevent read only event the activation event that caused this command event to be generated. currently only set when a command event is redirected though use of the command attribute. ctrl
key read only boolean true if the control
key was down when the event was fired. false otherwise. shift
key read only boolean true if the shift
key was down when the event was fired. false otherwise. alt
key read only boolean true if the alt
key was down when the event was fired. false otherwise. meta
key read only boolean true if the meta
key was down when the event was fired. false otherwise. ...
appendNotification - Archive of obsolete content
of notificationbox) : priority_info_low priority_info_medium priority_info_high priority_warning_low priority_warning_medium priority_warning_high priority_critical_low priority_critical_medium priority_critical_high priority_critical_block buttons : the buttons argument is an array of button descriptions. each description is an object with the following properties: access
key - the access
key to appear on the button callback - function to be called when the button is activated. this function is passed three arguments: the <notification> the button is associated with the button description as passed to appendnotification. the element which was the target of the button press event. if the return value from this function is not true, then the notification ...
...utton". isdefault - if true, this is the default button. there can be only one default button. if no button has this set, the first button in the array is the default. type - a string. valid values are "menu-button" and "menu" which must be set if the button is to provide a popup via the popup property. notification box events requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamon
key 2.6) if you specify the eventcallback parameter, it should be a javascript function that gets called when interesting things happen related to the notification box. this function receives as its only parameter a string indicating what event occurred. at this time, there's just one event type: "removed". this indicates that the notification box has been removed from its window. example: functi...
...onbutton2callback(thenotification, buttoninfo, eventtarget) { window.alert("button 2 pressed"); //do not prevent notification from closing: }; function testnotificationcallback(reason) { window.alert("reason is: " + reason); }; let notifybox = gbrowser.getnotificationbox(); let buttons = []; let button1 = { isdefault: false, access
key: "1", label: "button 1", callback: testnotificationbutton1callback, type: "", // if a popup, then must be: "menu-button" or "menu". popup: null }; buttons.push(button1); let button2 = { isdefault: true, access
key: "2", label: "button 2", callback: testnotificationbutton2callback, type: "", // if a popup, then mu...
ContextMenus - Archive of obsolete content
er to right-click on an element to display a menu of commands pertaining to what was clicked on. context menu events there are various ways in which a context menu can be opened. the most common is by clicking on an element with the right mouse button. ...
...t menu events there are various ways in which a context menu can be opened. the most common is by clicking on an element with the right mouse button. on macintosh systems with only one mouse button, a context menu may be opened by either holding down the mouse button or by pressing the control
key and clicking the mouse button. on windows, the context menu can also be opened by pressing the menu
key on the
keyboard (the
key on many
keyboards next to control with a menu image) or by pressing shift+f10. you should not assume that a user has used the mouse to open a context menu. when using the mouse to open a context menu, the context is the element that was clicked. when using the
keyboard, the context is the element in the window that is currently focused. although there are several ways t...
...= 0); for this example, using the disabled property is more suitable. items should be disabled when they don't apply in certain circumstances, but should be hidden when they would never apply to the element that was clicked on. determining what was context clicked it is important to remember that a context menu may be opened in other ways than just with the mouse. however, even when using the
keyboard, there will still be a node (the context) that the menu applies to, which will be the element that is currently focused. when the mouse is used, the context will be the element that is clicked. you can retrieve this element using the popup's triggernode property. in firefox 3.6 and earlier, the document's popupnode property was used; this is now deprecated. in this example, the triggernode ...
Code Samples - Archive of obsolete content
launch a file on your computer to launch a file on your computer, use code like this. change the first line to specify the file that you want to launch. you can launch an executable file or some other file that your operating system knows how to open. note: on operating systems that use backslash characters, double each backslash character. ...
...e backslash characters, double each backslash character. on operating systems that use forward-slash characters, specify the file in the normal way. const path = "c:\\windows\\charmap.exe" var file = components .classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile) file.initwithpath(path) file.launch() open a web page if your button is in firefox or seamon
key, use code like this to open a web page. change the first line to specify the page that you want to open: const url = "http://www.mozilla.org/" document .getelementbyid("content") .webnavigation .loaduri(url, 0, null, null, null) if your button is in thunderbird or sunbird, use code like this to open a web page. change the first line to specify the page that you want to open: const url = "...
...toolkit:passwordmanager" const uri = chrome://messenger/content/preferenc...wpasswords.xul" mail & newsgroups const name = "mail:3pane" const uri = "chrome://messenger/content/" sunbird passwords* const name = "toolkit:passwordmanager" const uri = "chrome://passwordmgr/content/passwordmanager.xul" seamon
key navigator const name = "navigator:browser" const uri = "chrome://navigator/content/" mail & newsgroups const name = "mail:3pane" const uri = "chrome://messenger/content/" composer const name = "composer:html" const uri = "chrome://editor/content/" address book const name = "m...
Adding Buttons - Archive of obsolete content
bel and an image. you need one or the other or both. thus, a button can have a label only, an image only or both a label and an image. buttons are commonly used for the ok and cancel buttons in a dialog, for example. syntax of buttons the button tag has the following syntax: <button id="identifier" class="dialog" label="ok" image="images/image.jpg" disabled="true" access
key="t"/> the attributes are as follows, all of which are optional: id a unique identifier so that you can identify the button with. you'll see this attribute on all elements. you'll want to use this if you want to refer to the button in a style sheet or script. however, you should add this attribute to almost all elements. it isn't always placed on elements in this tutorial for simplicity. c...
...so specify the image in a stylesheet using the list-style-image property. disabled if this attribute is set to true, the button is disabled. this is usually drawn with the text in grey. if the button is disabled, the function of the button cannot be performed. if this attribute is left out entirely, the button is enabled. you can switch the disabled state of the button using javascript. access
key this should be set to a letter that is used as a shortcut
key. this letter should appear in the label text and will typically be drawn underlined. when the user presses alt (or a similar
key that varies on each platform) and the access
key, the button will be focused from anywhere in the window. note: buttons support more attributes than those listed above. others will be discussed later. so...
...xample let's add this code to the file findfile.xul that we created in the previous section. the code needs to be inserted in-between the window tags. the code to add is shown in red below: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </window> you'll notice that the cancel button was added also. the window has been given a horizontal orientation so that the two buttons appear beside each other. if you open the file in mozilla, you should get something like the image shown here. note: you should ...
Box Objects - Archive of obsolete content
ual component that can be displayed. the layout tree holds the structure as the nodes are expected to be displayed there is not necessarily a one to one relationship between content and layout nodes. some content nodes may have several layout objects, for example, each line of a paragraph has a separate layout object. conversely, some content nodes have no layout objects at all. for instance, the
key element doesn't have any layout objects since it isn't displayed in any way. similarly, any element that has been hidden will not have a layout object either. the dom is generally used only to get and modify information pertaining to the content or structure of the document. it's relatively simple to determine what kind of content tree node will be created for a given element. a xul element, for ...
...bject or one of its subtypes. recall that all xul elements are types of boxes, that is the box is the base of all displayed xul elements. however, there are a number of subtypes, about 25 or so, for specific xul elements. some of these subtypes, such as the stack or listbox are needed for more complex layouts than the basic box, while others such as the button are used only to add extra mouse and
key event handling. the layout object associated with an element can be removed and a completely different type of object created just by changing the css display property, among others. for example changing the display property of a button element to block will cause the button layout object to be deleted and a block object to be created instead. naturally, this will change the appearance and functi...
...element's width and height, respectively. note that retrieving these values will return the size only if it was explicitly specified. these properties will return an empty string if the width or height attributes or properties were not set already. that is, you cannot get the current size with these properties; instead you must use the box object properties. this may be a bit confusing, but, the
key is to remember that the width and height properties on an element return the size that was set in the xul while the width and height properties of the box object return the current size. hidden or collapsed element the hidden attribute will hide an element such that it will not be displayed. since it is not displayed, all four position and size properties of the box object will have the value 0. ...
Creating a Window - Archive of obsolete content
should look at the basic syntax of a xul file. creating a xul file an xul file can be given any name but it really should have a .xul extension. the simplest xul file has the following structure: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <!-- other elements go here --> </window> this window will not do anything since it doesn't contain any ui elements. those will be added in the next section. in fact, there will not be shown any window at all. if you want to force the window to become visible you can add the width and height attribute to the window tag. here is a line by line breakdown of th...
... the orient attribute specifies the arrangement of the items in the window. the value horizontal indicates that items should be placed horizontally across the window. you may also use the value vertical, which means that the items are placed in a column. this is the default value, so you may leave the attribute off entirely if you wish to have vertical orientation. xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> this line declares the namespace for xul, which you should put on the window element to indicate that all of its children are xul. note that this url is never actually downloaded. mozilla will recognize this url internally. <!-- other elements go here --> replace this comment block with other elements (the buttons, menus and other user interface component...
...//navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300"); if you are using firefox, try below: window.open("chrome://browser/content/places/places.xul", "bmarks", "chrome,width=600,height=300"); you can test lines of javascript like these in the error console. choose tools – error console, type a line of javascript, and press the evaluate button, or the return or enter
key. the findfile.xul example let's begin by creating the basic file for the find file dialog. create a file called findfile.xul and put it in the content directory specified in the findfile.manifest file (we've created in the previous section). add the xul template shown at the top of this page to the file and save it. you can use the command-line parameter '-chrome' to specify the xul file to o...
Introduction to XBL - Archive of obsolete content
ave their behavior described by the binding 'binding1'. a binding has five types of things that it declares: content: child elements that are added to the element that the binding is bound to. properties: properties added to the element. they can be accessed through a script. methods: methods added to the element. they can be called from a script. events: events, such as mouse clicks and
keypresses that the element will respond to. the binding can add scripts to provide default handling. in addition new events can be defined. style: custom style properties that the xbl defined element has. binding example the box is generic enough that you can use it to create custom widgets (although you can use any element, even one you make up yourself). by assigning a class to a box tag, you c...
... you make up yourself). by assigning a class to a box tag, you can associate a binding to only those boxes that belong to that class. the following example demonstrates this. ...
...the box has been declared to have a class of okcancelbuttons. ...
More Wizards - Archive of obsolete content
he next button should be enabled. if set to false, the next button is disabled. you can change the property when invalid or valid data has been entered. in the following example, the user must enter a secret code into a textbox on the first page of the wizard. the function checkcode() is called whenever the first page is shown as indicated by the onpageshow attribute. ...
...is called whenever the first page is shown as indicated by the onpageshow attribute. it is also called whenever a
key is pressed in the textbox, to determine whether the next button should be enabled again. ...
...both properties are adjusted automatically as you switch pages. ...
Using Visual Studio as your XUL IDE - Archive of obsolete content
easier way. if you already have a xml or xul file opened, visual studio will add the menu item xml to the main menu. just use xml > schemas... to add the xul.xsd from the package that you have downloaded. the other xsd files will be added automatically. visual studio will use the schema based on the namespace, so make sure your window element uses the correct xul namespace http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul. 3. xbl if you are writing your own elements in xbl, you can download a xbl schema from mozilla.doslash.org/xblschema. grab the xsd version and add it in the same way, you added the xul schema. to combine both, you can also add your own xbl elements to the xul schema to get autocompletion-support and validation for those in your xul files. mihailo posted some in...
... those in your xul files. mihailo posted some instructions in this codeplex discussion. 4. visual assist and file extensions since version 10.5, visual assist supports javascript and xml. as it does not work out of the box with unknown file extensions (like .xul, .xbl and .jsm), you have to do some registry tricks, so that va knows how to treat these file types. all va options can be found at: h
key_current_user\software\whole tomato\visual assist x\ find the folder that represents your visual studio version ((vanet8, vanet9, etc.) and add your extensions to the corresponding registry entries extjs and extxml. make sure that visual studio is not running, when you do this. 5. problems that need to be solved there are still some problems for which i did not find a solution yet. 5.1 localizati...
...re the dtd file is really located and thus will give you errors wherever you use the entities that are declared in this file. 5.2 text preprocessor the mozilla build system includes a text preprocessor. as preprocessor directives are not valid xml, visual studio will mark them as errors in your xul files. 5.3 javascript related you will get validation errors for javascript code whenever using the
keywords "const" and "let". these
keywords are mozilla-specific at the moment. vs just supports ecmascript 3rd edition and thus doesn't know these
keywords. ...
Using nsIXULAppInfo - Archive of obsolete content
pplication's id, human-readable name, version, platform version, etc. for complete list of nsixulappinfo's properties, please see nsixulappinfo interface description. id you can tell which application you're running under using the nsixulappinfo.id property. ...
...for example, one of unfrozen functions you're ...
..."; const seamon
key_id = "{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) { // running under thunderbird } else if(appinfo.id == seamon
key_id) { // running under seamon
key } else { // another app } note: you could also use nsixulappinfo.name, which is a human-readable name for the application, such as "firefox", "thunderbird" or "seamon
key", but who knows, maybe they'll rename it again! version sometimes you need to know the version of the application your code is running under. for example, one of unfrozen functions you're relying on was changed. note: nsix...
XUL Questions and Answers - Archive of obsolete content
checkbox support for multi column lists? the current issue is a person exploring if it is possible to have checkbox support for multi column lists. ...
...ml how can i send xml/xul document fragment to the server instead of using get or post variables? you can send documents using send(document), so you should be able to insert the fragment into an empty document. how can i manage scrolling outside the browser? this problem can be solved by capturing the focus events and giving the focus to another xul element or capturing and canceling the
keypress events. how to display addressbook rdf and menulist on the same list? mailing lists are children of directories. as such, you cannot use a template to display them in the same list. the best you can do is a cascading menu along the lines of the move/copy menus, but then of course you lose the ability to easily select from the list. instead of <menulist id="abpopup"> <menupopup id="ab...
...ascript, assign datasources/ref/template attribute to it so that the content is generated from the rdf datasource create the element, set the datasources attribute then add the element to the document. this should then create the database. xulrunner questions these don't really belong on this page. is there a way to check what directory "application.ini" is in? use directory service the
key to the folder where application.ini resides is "resource:app". i get the error: gecko minversion requirement not met. visit http://developer.mozilla.org/en/docs...pplication.ini to find out how to properly set up the application.ini file. how can i use other fonts on xulrunner applications which are not installed on the current machine? in order to do this, you must first attach the font ...
XUL element attributes - Archive of obsolete content
ute should be placed alongside the datasources attribute. removeelement type: id when placed on an element in an overlay, it indicates that the element in the base file should be removed from the window. sortdirection type: one of the values below set this attribute to set the direction that template-generated content is sorted. use the sortresource attribute to specify the sort
key. ...
...ction that template-generated content is sorted. use the sortresource attribute to specify the sort
key. ascending the data is sorted in ascending order. descending the data is sorted in descending order. natural the data is sorted in natural order, which means the order that it is stored in. sortresource type: uri for template-generated content, this specifies the sort
key, if you would like the content to be sorted. the
key should be the full uri of the rdf resource to sort by, for example 'http://home.netscape.com/nc-rdf#name'. place this attribute on the same element as the datasources attribute. use sortresource2 to specify a secondary sort
key. sortresource2 type: uri the value of this attribute is the uri of an rdf predicate that serves as a secondar...
... statustext type: string used to set the text that appears on the status bar when the user moves the mouse over the element. mozilla doesn't adjust the status bar automatically however. this attribute serves only as a place to keep the text. ...
colorpicker - Archive of obsolete content
ted color. this is modified when the user selects a color. you can assign a string of the form #rrggbb to this property to change the selected color. overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter
key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-styles...
...xt at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> preference type: id connects the element to a corresponding preference. this attribute only has any effect w...
..."return myfunction(event);"/> </window> preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. type type: string if this attribute is not present, the colorpicker is displayed inside the window. if this is set to the text button, the colorpicker is displayed as a button. when the user clicks the button, a popup appears for the user to select a color. properties accessibletype type: integer ...
label - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to provide a label for a control element. if the user clicks the label, it will move the focus to the associated control, specified with the control attribute. more information is available in the xul tutorial. attributes access
key, control, crop, disabled, href, value properties access
key, accessibletype, control, crop, disabled, value style classes header, indent, monospace, plain, small-margin, text-link examples <label value="email address" control="email"/> <textbox id="email"/> attributes access
key type: character this should be set to a character that is used as a shortcut
key. this should be one of the characters that appe...
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. href type: string defines a url to open when this element is clicked. requires the class attribute to include text-link. value type: string the text to be used for the label. properties access
key type: character gets and sets the value of the access
key attribute. accessibletype type: integer a value indicating the type of accessibility object for the element. control type: element id gets and sets the value of the control attribute. crop type: string gets and sets the value of the crop attribute. ...
...ft side. monospace this class causes the text to be displayed in a monospace font. plain this class causes the element to be displayed with no border or margin. small-margin this class causes the text to be displayed with a smaller margin. text-link labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or enter
key press. labels will appear like a link (blue and underlined). related elements description attributes label interfaces nsiaccessibleprovider, nsidomxullabelelement notes labels are not focusable note: starting in gecko 2.0, labels are properly not focusable. they used to incorrectly inherit from nsidomxulcontrolelement. the caption is in the "value" attribute remember...
preference - Archive of obsolete content
name type: string the name of the preference to change. for example, the browser's home page is set with the preference browser.startup.homepage. overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter
key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-styles...
...xt at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element. however, the va...
...me); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below the preference type which should be one of the following values. bool a boolean set to either true or false. usually a checkbox would be connected to these preferences. int an integer string a string unichar a unicode string wstring a localized string. in this situat...
stringbundle - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element which can be used to load localized resources from property files. stringbundles should be placed inside a stringbundleset element. a property file is a list of property
key-value pairs each on a separate line. the
key and value is separated with an equals sign. for example, the following defines two properties: message.displayerror=an error occured trying to display this message message.namealreadyused=the name %s is already being used by another account. more information is available in the xul tutorial. the "src" attribute accepts only absolute chrome:// urls (see bugs 133698, 26291) attributes src properties applocale , src, stringbundle, strings methods getf...
...ct which implements nsilocale. src type: url gets and sets the value of the src attribute. stringbundle type: nsistringbundle returns the xpcom string bundle object which implements nsistringbundle. strings type: nsisimpleenumerator an enumeration of all of the strings in the string bundle. the enumeration contains nsipropertyelement objects. methods getformattedstring(
key, strarray ) return type: string looks up the format string for the given
key name in the string bundle and returns a formatted copy where each occurrence of %s (uppercase) is replaced by each successive element in the supplied array. alternatively, numbered indices of the format %n$s (e.g. %1$s, %2$s, etc.) can be used to specify the position of the corresponding parameter explicitly. if you ...
...dle and returns a formatted copy where each occurrence of %s (uppercase) is replaced by each successive element in the supplied array. alternatively, numbered indices of the format %n$s (e.g. %1$s, %2$s, etc.) can be used to specify the position of the corresponding parameter explicitly. if you need to handle substitutions involving plurals, take a look at localization and plurals. getstring(
key ) return type: string returns the string with the given
key name from the string bundle. inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattribut...
window - Archive of obsolete content
enx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!! ...
...utenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata see also: dom window object methods note the error message "xml parsing error: undefined entity...<window" can be caused by a missing or unreachable dtd file referenced in the xul file. a filename following the system
keyword in a doctype declaration may silently fail to load and the only error message will be an undefined entity error on the next xul element. related elements prefwindow, dialog, dialogheader related topics user notes to change the icon to a window's title bar check this page on window icons. to add a favicon to the address bar and browser tab (ie dialog is not a popup) then use the fo...
...defined entity error on the next xul element. related elements prefwindow, dialog, dialogheader related topics user notes to change the icon to a window's title bar check this page on window icons. to add a favicon to the address bar and browser tab (ie dialog is not a popup) then use the following code snippet to use the html namespace and link. ...
ant script to assemble an extension - Archive of obsolete content
</target> <target name="templates" description="generate files from templates."> <copy file="chrome/content/blogmark/contents.rdf.tpl.xml" tofile="chrome/content/blogmark/contents.rdf" overwrite="true"> <filterchain> <replacetokens> <token
key="version" value="${version}"/> <token
key="description" value="${description}"/> </replacetokens> </filterchain> </copy> <copy file="chrome/content/blogmark/about.xul.tpl.xml" tofile="chrome/content/blogmark/about.xul" overwrite="...
... </replacetokens> </filterchain> </copy> <copy file="chrome/content/blogmark/about.xul.tpl.xml" tofile="chrome/content/blogmark/about.xul" overwrite="true"> <filterchain> <replacetokens> <token
key="version" value="${version}"/> </replacetokens> </filterchain> </copy> <copy file="install.rdf.tpl.xml" tofile="install.rdf" overwrite="true"> <filterchain> <replacetokens> <to...
...rsion" value="${version}"/> </replacetokens> </filterchain> </copy> <copy file="install.rdf.tpl.xml" tofile="install.rdf" overwrite="true"> <filterchain> <replacetokens> <token
key="version" value="${version}"/> <token
key="description" value="${description}"/> </replacetokens> </filterchain> </copy> </target> </project> ...
2006-11-10 - Archive of obsolete content
nternational world wide web conference (www2007), in banff, canada. important dates: technical submissions: monday 19th feb 2007 technical paper notification: friday 16th march 2007 communication submissions: monday 26th march 2007 communication paper notification: friday 06th april 2007 all camera ready due: monday 16th april 2007 conference dates: monday 07th and tuesday 08th may 2007 notable
keynotes representatives from w3c, ibm, university of manchester, uk and oxford brookes university, uk. read more... discussions firefox: an open source accessibility success story aaron leventhal of ibm recently published a new article praising firefox accessibility. the article goes into the history of accessibility in firefox, details ibm's involvement and addresses some ajax accessibility conce...
...read more... discussions firefox: an open source accessibility success story aaron leventhal of ibm recently published a new article praising firefox accessibility. the article goes into the history of accessibility in firefox, details ibm's involvement and addresses some ajax accessibility concerns. the article closes with a glimpse at the future of firefox accessibility. read more... access
keys in firefox 2 previous versions of firefox used the <alt>
key as a modifier. this has been changed to alt+shift for content access
keys due to the "conflicts with ui mnemonics" according to aaron leventhal. this is reported to have broken access
keys using numeric values. see bug 349716. currently there is a work-around extension available at bug 357101 to temporarily solve this problem. accessib...
... meetings none ...
2006-10-13 - Archive of obsolete content
do early testing using code from this link. discussions mozillatranslator 5.13 rfes mozillatranslator 5.13 is ready to be released in a few weeks. author is declaring rfe (request for enhancement). a few bugs have been listed. ...
...do early testing using code from this link. discussions mozillatranslator 5.13 rfes mozillatranslator 5.13 is ready to be released in a few weeks. author is declaring rfe (request for enhancement). a few bugs have been listed. ...
...do early testing using code from this link. discussions mozillatranslator 5.13 rfes mozillatranslator 5.13 is ready to be released in a few weeks. author is declaring rfe (request for enhancement). a few bugs have been listed. ...
Browser Detection and Cross Browser Support - Archive of obsolete content
mmendations, please see the gecko compatibility handbook gecko although many web developers are aware of firefox, mozilla, and netscape browsers, far fewer are aware that these browsers are members of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve 7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamon
key. gecko was designed from the ground up to be compliant with the w3c html, w3c css, w3c xml, w3c dom, and ecmascript (javascript) standards. it also includes compatibility features which allow it to reasonably handle legacy content which was developed for earlier generations of browsers such as netscape navigator 4 as well as features which provide compatibility with internet explorer 5 and 6. un...
...in the future web developers and authors will be able to dispense with browser detection at least with regard to features governed by standards. we are still faced with the question of how to develop standards based content while supporting the differing implementations of modern browsers while at the same time supporting (to a lesser degree) older and less capable browsers. browser detection is
key to accomplishing this task. browser detection history primer to understand why many common browser detection strategies are inappropriate, we must first look back on how these strategies came into being. in the earliest days of the web, html was very simple, not standardized and did not include any support for client side scripting. html itself was not standardized until html 2.0 was introduce...
...ch reports mozilla/5.0. the second vendor/version (gecko/20001108) identifies netscape 6 as a particular release of gecko which was built on november 8, 2000. if you must detect gecko using the user agent string, gecko/ccyymmdd is the most appropriate string to search for. the third vendor/version (netscape6/6.0) identifies this particular instance of a gecko browser as netscape 6.0. many sites
keyed off of the existence of the string netscape6 in the user agent and used tests similar to: if (navigator.useragent.indexof('netscape6') != -1) { // netscape 6 code } note how this type of detection misses any other gecko based browser. unfortunately, the netscape 6 user agent string was not sufficiently generalizable due to it's use of the string netscape6 as a description of the vendor. ne...
New in JavaScript 1.8 - Archive of obsolete content
ersion=1.8"> ... your code ... </script> another way (not recommended) to do this is to use the deprecated <script> language attribute and define it as "javascript1.8". when using the javascript shell, javascript xpcom components, or xul <script> elements, the latest js version (js1.8 in mozilla 1.9) is used automatically (bug 381031, bug 385159). the features that require the use of the new
keywords "yield" and "let" require you to specify version 1.7 or higher because existing code might use those
keywords as variable or function names. the features that do not introduce new
keywords (such as generator expressions) can be used without specifying the javascript version. new features in javascript 1.8 expression closures. generator expressions. allowing you to simply create generato...
...d have to create a custom function which would have a yield in it, but this addition allows you to use array comprehension-like syntax to create an identical generator statement. array.prototype.reduce() array.prototype.reduceright() changed functionality in javascript 1.8 changes in destructuring for..in one change that occurred in the release of javascript 1.8 was a bug fix related to the
key/value destructuring of arrays introduced in javascript 1.7. previously it was possible to destructure the
keys/values of an array by using for ( var [
key, value] in array ). however, that made it impossible to destructure the values of an array - that were arrays (i.e., when an iterator returns an array of the current
key-value pair). this has been resolved now. (bug 366941). one can, however, us...
...turing of arrays introduced in javascript 1.7. previously it was possible to destructure the
keys/values of an array by using for ( var [
key, value] in array ). however, that made it impossible to destructure the values of an array - that were arrays (i.e., when an iterator returns an array of the current
key-value pair). this has been resolved now. (bug 366941). one can, however, use for ( var [
key, value] in iterator(array)). ...
Server-Side JavaScript - Archive of obsolete content
e server was part of netscape's original vision back in the day with netscape livewire. but back then, 350 mhz servers were the best you could buy, and mozilla was yet to emerge from the netscape organization to continue to advance the state of web technologies. ...
...ng increased more than 10-fold and mozilla's work on rhino (javascript interpreter in java) and spidermon
key (javascript interpreter in c) and javascript itself, we have very solid foundations for javascript to be extraordinarily useful and applicable on the server-side again -- with performance in the same range as popular server-side environments like php and ruby on rails. now, with tracemon
key available, javascript (both client side and server-side) can see 20x to 40x speed improvements according to brendan eich, mozilla cto and creator of javascript. server-side javascript is another way in which, as this article quotes eich, "mozilla wants to 'get people thinking about javascript as a more general-purpose language' and show them that 'it really is a platform for writing full applicat...
... speed improvements according to brendan eich, mozilla cto and creator of javascript. server-side javascript is another way in which, as this article quotes eich, "mozilla wants to 'get people thinking about javascript as a more general-purpose language' and show them that 'it really is a platform for writing full applications.'" many vendors today are embedding mozilla rhino or mozilla spidermon
key into web server environments. some, like aptana with the open source jaxer server actually embed the entire mozilla firefox browser engine (including spidermon
key) within a web server to enable server-side ajax and server-side dom access in addition to server-side execution of javascript. ...
XForms Label Element - Archive of obsolete content
the output and choices elements must contain a label element. it is valid for a form control to have an empty label element. the label text can be specified in instance data, in a remote document, or as inline text. if more than one source of label text is specified for this element, the order of precedence is: single node binding attributes, linking attributes, inline text. ...
...ents must contain a label element. it is valid for a form control to have an empty label element. the label text can be specified in instance data, in a remote document, or as inline text. if more than one source of label text is specified for this element, the order of precedence is: single node binding attributes, linking attributes, inline text. ...
... or as inline text. if more than one source of label text is specified for this element, the order of precedence is: single node binding attributes, linking attributes, inline text. ui behavior access
key support - if the access
key attribute is specified on labeled xforms controls or on the label element itself then the label text for the control will contain an indicator as to what the access
key is in a standard way. usually by underlining the access
key character in the label text. focus behavior - when a label element is clicked or its access
key is activated then the form control that contains the label will be given the focus. attributes ui common access
key - used to specify the
keyboard shortcut for focusing the parent form control. single-node binding linking src - url of a...
RDF in Mozilla FAQ - Archive of obsolete content
rs", and "rdf/xml files". in mozilla, datasources can be composed together using the composite data source. this is like overlaying graphs, or merging collections of statements ("microtheories") together. statements about the same rdf resource can then be intermingled: for example, the "last visit date" of a particular website comes from the "browser global history" datasource, and the "shortcut
keyword" that you can type to reach that website comes from the "browser bookmarks" datasource. both datasources refer to "website" by url: this is the "
key" that allows the datasources to be "merged" effectively. for a more detailed account of how to write a datasource, refer to the rdf datasource how-to. how does mozilla manage datasources? the rdf service manages a table of all loaded datasourc...
... datasources may be loaded via the rdf service using the getdatasource() method. ...
...en times when you won't know the datasource that you want to add until after the xul is loaded. for example, your xul may need compute the datasources that it wants to display in an onload handler. or, it may need to add a datasource later based on some user action. here's a simple example that illustrates how to do this. let's start with the following xul. <window xmlns="http://www.mozilla.org/
keymaster/gat...re.is.only.xul"> ... <tree id="my-tree" datasources="rdf:null"> ... </tree> ... </window> assuming that we've aquired a datasource somehow (e.g., like this), the following sample code illustrates how to add that datasource to the template, and then force the template to rebuild itself based on the newly added datasource's contents. var ds = /* assume we got this somehow...
2D collision detection - Game development
, width: 10, height: 10} if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y) { // collision detected! } // filling in the values => if (5 < 30 && 55 > 20 && 5 < 20 && 55 > 10) { // collision detected! ...
...gle with arrow
keys. ...
... } }); note: another example without canvas or external libraries. circle collision another simple shape for collision detection is between two circles. this algorithm works by taking the centre points of the two circles and ensuring the distance between the centre points are less than the two radii added together. playable code <div id="cr-stage"></div> <p>move the circle with arrow
keys. green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> #cr-stage { position: static !important; height: 200px !important; } crafty.init(200, 200); var dim1 = {x: 5, y: 5} var dim2 = {x: 20, y: 20} crafty.c("circle", { circle: function(radius, color) { this.radiu...
Implementing game control mechanisms - Game development
one of html5's main advantages as a game development platform is the ability to run on various platforms and devices. streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and
keyboard, and also less common mechanisms such as gamepads. case study we'll be using the captain rogers: battle at andromeda demo as an example. captain rogers was created using the phaser framework, the most popular tool for simple 2d game development in javascript right now, but it should be fairly easy to reuse the knowledge contained within these articles when building games in pure javascr...
...euse the knowledge contained within these articles when building games in pure javascript or any other framework. if you're looking for a good introduction to phaser, then check the 2d breakout game using phaser tutorial. in the following articles we will show how to implement various different control mechanisms for captain rogers to support different platforms — from touch on mobile, through
keyboard/mouse/gamepad on desktop, to more unconventional ones like tv remote, shouting to or waving your hand in front of the laptop, or squeezing bananas. setting up the environment let's start with a quick overview of the game's folder structure, javascript files and in-game states, so we know what's happening where. the game's folders look like this: as you can see there are folders for imag...
...ode however you want for learning purposes. the articles javascript is the perfect choice for mobile gaming because of html5 being truly multiplatform; all of the following articles focus on the apis provided for interfacing with different control mechanisms: mobile touch controls — the first article will kick off with touch, as the mobile first approach is very popular. desktop mouse and
keyboard controls — when playing on a desktop/laptop computer, providing
keyboard and mouse controls is essential to provide an acceptable level of accessibility for the game. desktop gamepad controls — the gamepad api rather usefully allows gamepads to be used for controlling web apps on desktop/laptop, for that console feel. unconventional controls — the final article showcases some unconve...
Mouse controls - Game development
« previousnext » this is the 9th step out of 10 of the gamedev canvas tutorial. you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson9.html. the game itself is actually finished, so let's work on polishing it up. we have already added
keyboard controls, but we could easily add mouse controls too. ...
... the gamedev canvas tutorial. you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson9.html. the game itself is actually finished, so let's work on polishing it up. we have already added
keyboard controls, but we could easily add mouse controls too. listening for mouse movement listening for mouse movement is even easier than listening for
key presses: all we need is the listener for the mousemove event. ...
... game itself is actually finished, so let's work on polishing it up. we have already added
keyboard controls, but we could easily add mouse controls too. listening for mouse movement listening for mouse movement is even easier than listening for
key presses: all we need is the listener for the mousemove event. add the following line in the same place as the other event listeners, just below the
keyup event: document.addeventlistener("mousemove", mousemovehandler, false); anchoring the paddle movement to the mouse movement we can update the paddle position based on the pointer coordinates — the following handler function will do exactly that. add the following function to your code, below the previous line you added: function mousemovehandler(e) { var relativex = e.clientx - canvas...
MDN Web Docs Glossary: Definitions of Web-related terms
formation architecture inheritance input method editor instance internationalization internet intrinsic size ip address ipv4 ipv6 irc iso isp itu j jank java javascript jpeg jquery json k
key keyword l latency layout viewport lazy load lgpl ligature local scope local variable locale localization long task loop lossless compression lossy compression ltr (left to right) m main axis main thread ma...
...esto primitive privileged privileged code progressive enhancement progressive web apps promise property property (css) property (javascript) protocol prototype prototype-based programming proxy server pseudo-class pseudo-element pseudocode public-
key cryptography python q quality values quaternion quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression rendering engine repo reporting directive ...
...lication) specification speculative parsing speed index sql sql injection sri stacking context state machine statement static method static typing strict mode string stun style origin stylesheet svg svn symbol symmetric-
key cryptography synchronous syntax syntax error synthetic monitoring t tag tcp tcp handshake tcp slow start telnet texel thread three js time to first byte time to interactive tld tofu transmission control protocol (tcp) tra...
Accessible multimedia - Learn web development
ables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes). this article on the other hand looks at another general class of content that arguably isn't as easy to ensure accessibility for — multimedia. images, videos, <canvas> elements, flash movies, etc., aren't as easily understood by screenreaders or navigated by the
keyboard, and we need to give them a helping hand. but don't despair — here we will help you navigate through the techniques available for making multimedia more accessible. simple images we already covered simple text alternatives for html images in our html: a good basis for accessibility article — you can refer back to there for the full details. in short, you should ensure that where possi...
...src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> the controls attribute provides play/pause buttons, seek bar, etc. — the basic controls you'd expect from a media player. it looks like so in firefox and chrome: however, there are problems with these controls: they are not
keyboard accessible in most browsers, i.e. you can't tab between the controls inside the native player. opera and chrome provide this to some degree, but it still isn't ideal. different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide. to remedy this, we can create our own custom con...
...immersive 3d game or virtual reality app, it really is quite difficult to provide text alternatives for such an experience, and you might argue that blind users are not really in the target audience bracket for such apps. you can however make sure that such an app has good enough color contrast and clear presentation so it is perceivable to those with low vision/color blindness, and also make it
keyboard accessible. remember that accessibility is about doing as much as you can, rather than striving for 100% accessibility all the time, which is often impossible. test your skills! you've reached the end of this article, but can you remember the most important information? we've not written a new set of assessments for this article, because there are already assessments available in our html...
What is accessibility? - Learn web development
t improve accessibility also make your site more usable by other groups, such as mobile phone users or those on low network speed. in fact, everyone can benefit from many such improvements. did we mention it is also the law in some places? what kinds of disability are we looking at? people with disabilities are just as diverse as people without disabilities, and so are their disabilities. the
key lesson here is to think beyond your own computer and how you use the web, and start learning about how others use it — you are not your users. the main types of disability to consider are explained below, along with any special tools they use to access web content (known as assistive technologies, or ats). note: the world health organization's disability and health fact sheet states that "ove...
...gnificantly paralyzed to the point where they need to use a head pointer to interact with computers. this kind of disability can also be a result of old age, rather than any specific trauma or condition, and it could also result from hardware limitations — some users might not have a mouse. the way this usually affects web development work is the requirement that controls be accessible by the
keyboard — we'll discuss
keyboard accessibility in later articles in the module, but it is a good idea to try out some websites using just the
keyboard to see how you get on. can you use the tab
key to move between the different controls of a web form, for example? you can find more details about
keyboard controls in our cross browser testing using native
keyboard accessibility section. in terms o...
...ch as missing image alternative text or bad link text — see element relationships and context) and doing some testing with disabled user groups to see how well more complex site features work for them. for example: is my date picker widget usable by people using screen readers? if content updates dynamically, do visually impaired people know about it? are my ui buttons accessible using the
keyboard and on touch interfaces? you can and should keep a note of potential problem areas in your content that will need work to make it accessible, make sure it is tested thoroughly, and think about solutions/alternatives. text content (as you'll see in the next article) is easy, but what about your multimedia content, and your whizzy 3d graphics? you should look at your project budget and think...
Backgrounds and borders - Learn web development
t values — repeat-x and repeat-y — to see what their effects are. sizing the background image in the example above, we have a large image that has ended up being cropped as it is larger than the element it is a background of. in this case we could use the background-size property, which can take length or percentage values, to size the image to fit inside the background. you can also use
keywords: cover — the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio. in this case, part of the image is likely to end up outside the box. contain — the browser will make the image the right size to fit inside the box. in this case, you may end up with gaps on either side or on the top and bottom of the image, if ...
...und image appears on the box it is applied to. this uses a coordinate system in which the top-left-hand corner of the box is (0,0), and the box is positioned along the horizontal (x) and vertical (y) axes. note: the default background-position value is (0,0). the most common background-position values take two individual values — a horizontal value followed by a vertical value. ...
...lowed by a vertical value. you can use
keywords such as top and right (look up the others on the background-position page): .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; } and lengths, and percentages: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; } you can also mix
keyword values with lengths or percentages, for example: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; } finally, you can also use a 4-value syntax in order to indicate a distance from certain edges of the box — the length unit, in this case, is an offset from the value that precedes it. so in the css below we are positioning the backgr...
The box model - Learn web development
in this lesson, we will take a proper look at the css box model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to it. ...
...nline. the inline flex container and paragraphs all run together on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements. in the example, you can change display: inline to display: block or display: inline-flex to display: flex to toggle between these display modes. you will encounter things like flex layout later in these lessons; the
key thing to remember for now is that changing the value of the display property can change whether the outer display type of a box is block or inline, which changes the way it displays alongside other elements in the layout. in the rest of the lesson, we will concentrate on the outer display type. what is the css box model? the full css box model applies to block boxes, inline boxes only use som...
...t at once using the margin property, or each side individually using the equivalent longhand properties: margin-top margin-right margin-bottom margin-left in the example below, try changing the margin values to see how the box is pushed around due to the margin creating or removing space (if it is a negative margin) between this element and the containing element. margin collapsing a
key thing to understand about margins is the concept of margin collapsing. if you have two elements whose margins touch, and both margins are positive, those margins will combine to become one margin, which is the size of the largest individual margin. if one or both margins are negative, the amount of negative value will subtract from the total. in the example below, we have two paragraphs. the top...
Beginner's guide to media queries - Learn web development
previous overview: css layout next the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". media queries are a
key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. in this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive. prerequisites: html basics (study introduction to html), and an idea of ho...
...t in portrait mode. testing for orientation can help you to create a layout which is optimised for devices in portrait mode. use of pointing devices as part of the level 4 specification, the hover media feature was introduced. this feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and
keyboard navigation does not hover. @media (hover: hover) { body { color: rebeccapurple; } } open this example in the browser, or view the source. if we know the user cannot hover, we could display some interactive features by default. for users who can hover, we might choose to make them available when a link is hovered over. also in level 4 is the pointer media feature. this tak...
...ke them available when a link is hovered over. also in level 4 is the pointer media feature. this takes three possible values, none, fine and coarse. a fine pointer is something like a mouse or trackpad. it enables the user to precisely target a small area. a coarse pointer is your finger on a touchscreen. the value none means the user has no pointing device; perhaps they are navigating with the
keyboard only or with voice commands. using pointer can help you to design better interfaces that respond to the type of interaction a user is having with a screen. for example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen. more complex media queries with all of the different possible media queries, you may want to combine them, or cre...
What is a URL? - Learn web development
this article discusses uniform resource locators (urls), explaining what they are and how they're structured. prerequisites: you need to first know how the internet works, what a web server is and the concepts behind links on the web. objective: you will learn what a url is and how it works on the web. summary with hypertext and http, url is one of the
key concepts of the web. it is the mechanism used by browsers to retrieve any published resource on the web. url stands for uniform resource locator. a url is nothing more than the address of a given unique resource on the web. in theory, each valid url points to a unique resource. such resources can be an html page, a css document, an image, etc. in practice, there are some exceptions, the most commo...
...loper.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your browser's address bar to tell it to load the associated page (resource). a url is composed of different parts, some mandatory and others optional. let's see the most important parts using the following url: http://www.example.com:80/path/to/myfile.html?
key1=value1&
key2=value2#somewhereinthedocument http is the protocol. the first part of the url indicates which protocol the browser must use. a protocol is a set method for exchanging or transferring data around a computer network. usually for websites it is the http protocol or its secured version, https. the web requires one of these two, but browsers also know how to handle other protocols su...
...e standard ports of the http protocol (80 for http and 443 for https) to grant access to its resources. otherwise it is mandatory. /path/to/myfile.html is the path to the resource on the web server. in the early days of the web, a path like this represented a physical file location on the web server. nowadays, it is mostly an abstraction handled by web servers without any physical reality. ?
key1=value1&
key2=value2 are extra parameters provided to the web server. those parameters are a list of
key/value pairs separated with the & symbol. the web server can use those parameters to do extra stuff before returning the resource. each web server has its own rules regarding parameters, and the only reliable way to know if a specific web server is handling parameters is by asking the web server...
What’s in the head? Metadata in HTML - Learn web development
previous overview: introduction to html next the head of an html document is the part that is not displayed in the web browser when the page is loaded. it contains information such as the page <title>, links to css (if you choose to style your html content with css), links to custom favicons, and other metadata (data about the html, such as the author, and important
keywords that describe the document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup. prerequisites: basic html familiarity, as covered in getting started with html. objective: to learn about the html head, its purpose, the most important items it can contain, and what effect it can have on the html document. what is the htm...
...ing web sites and applications."> specifying an author is beneficial in many ways: it is useful to be able to understand who wrote the page, if you have any questions about the content and you would like to contact them. some content management systems have facilities to automatically extract page author information and make it available for such purposes. specifying a description that includes
keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed search engine optimization, or seo.) active learning: the description's use in search engines the description is also used on search engine result pages. let's go through an exercise to explore this go to the ...
... in the search result — definitely worth having! note: in google, you will see some relevant subpages of mdn web docs listed below the main homepage link — these are called sitelinks, and are configurable in google's webmaster tools — a way to make your site's search results better in the google search engine. note: many <meta> features just aren't used any more. for example, the
keyword <meta> element (<meta name="
keywords" content="fill, in, your,
keywords, here">) — which is supposed to provide
keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the
keyword list with hundreds of
keywords, biasing results. other types of metadata as you travel around the web, you...
A first splash into JavaScript - Learn web development
tor('.loworhi'); const guesssubmit = document.queryselector('.guesssubmit'); const guessfield = document.queryselector('.guessfield'); let guesscount = 1; let resetbutton; this section of the code sets up the variables and constants we need to store the data our program will use. variables are basically containers for values (such as numbers, or strings of text). you create a variable with the
keyword let (or var) followed by a name for your variable (you'll read more about the difference between the
keywords in a future article). constants are used to store values that are immutable or can't be changed and are created with the
keyword const. in this case, we are using constants to store references to parts of our user interface; the text inside some of them might change, but the html elem...
...ng below your previous javascript: function checkguess() { alert('i am a placeholder'); } functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. this is really useful. there are a number of ways to define functions, but for now we'll concentrate on one simple type. here we have defined a function by using the
keyword function, followed by a name, with parentheses put after it. after that we put two curly braces ({ }). inside the curly braces goes all the code that we want to run whenever we call the function. when we want to run the code, we type the name of the function followed by the parentheses. let's try that now. save your code and refresh the page in your browser. then go into the developer tools...
... this value through the built-in number() constructor, just to make sure the value is definitely a number. next, we encounter our first conditional code block (lines 3–5 above). a conditional code block allows you to run code selectively, depending on whether a certain condition is true or not. it looks a bit like a function, but it isn't. the simplest form of conditional block starts with the
keyword if, then some parentheses, then some curly braces. inside the parentheses we include a test. if the test returns true, we run the code inside the curly braces. if not, we don't, and move on to the next bit of code. in this case the test is testing whether the guesscount variable is equal to 1 (i.e. whether this is the player's first go or not): guesscount === 1 if it is, we make the guess...
Inheritance in JavaScript - Learn web development
s of property/method to worry about: those defined inside a constructor function that are given to object instances. these are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the this.x = x type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the new
keyword, e.g. let myinstance = new myconstructor()). those defined directly on the constructor themselves, that are available only on the constructor. these are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, not an instance. for example, object.
keys(). these are also known as static properties/methods. those defined on a constru...
... sure you'll agree that it's easier to write. inheritance with class syntax above we created a class to represent a person. they have a series of attributes that are common to all people; in this section we'll create our specialized teacher class, making it inherit from person using modern class syntax. this is called creating a subclass or subclassing. to create a subclass we use the extends
keyword to tell javascript the class we want to base our class on, class teacher extends person { constructor(subject, grade) { this.subject = subject; this.grade = grade; } } but there's a little catch. unlike old-school constructor functions where the new operator does the initialization of this to a newly-allocated object, this isn't automatically initialized for a class defined by ...
... javascript the class we want to base our class on, class teacher extends person { constructor(subject, grade) { this.subject = subject; this.grade = grade; } } but there's a little catch. unlike old-school constructor functions where the new operator does the initialization of this to a newly-allocated object, this isn't automatically initialized for a class defined by the extends
keyword, i.e the sub-classes. therefore running the above code will give an error: uncaught referenceerror: must call super constructor in derived class before accessing 'this' or returning from derived constructor for sub-classes, the this intialization to a newly allocated object is always dependant on the parent class constructor, i.e the constructor function of the class from which you're exte...
Accessibility API cross-reference
presumably msaa's graphic is aria's and html's img? graphic n/a n/a img <img> a cell in a grid or treegrid. grid a composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow
keys, e.g. a spreadsheet. gridcell a type of mouse pointer used for resizing windows grip n/a n/a n/a probably a group box (titledbox in mozilla) grouping panel panel group <fieldset>, <div> a heading for a section of the page. in aria, the heading level is expressed with the aria-level at...
...the aria-level attribute. heading <h1> ... <h6> <h1> ... <h6>. <h> is also available but its use is not recommended because of lack of suitable tools - and the heading level is undefined click on this thing and then click on the item for tooltip style help helpballoon n/a n/a n/a editable field that allows user to assign a
key combination hot
keyfield n/a n/a n/a graphic that indicates something, such as an arrow indicator n/a n/a n/a abstract role - a generic type of widget that allows user input. input n/a hypertext link that can be on image or text link n/a link <a> <link> according ...
...er. very poor support in user agents and ats, and no sufficient techniques available n/a n/a aria-flowto indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. supported for anything that's not a menu is poor n/a n/a aria-haspopup the item can get the
keyboard focus focusable focusable focusable tabindex attribute with value of 0 or more the item has focus for text input. for other kinds of
keyboard operation, e.g. ui controls, see armed focused focused focused available to javascript as document.activeelement appearance has changed for mouseover hottracked n/a n/a ...
Mozilla accessibility architecture
g accessibleobjectfromevent(), windows asks our doc accessible for a child with that child id. this is handled in in nsdocaccessiblewrap::get_accchild(), where we check for a negative child number and then use the accessibility cache to return the correct object. 5. accessibility cache the accessibility module maintains a cache implemented as a series of hash tables -- one per document. the hash
keys are the pointers to the dom node for each accessible. in this way no accessible object should ever need to be created twice for any dom node. why we need accessibility cache the accessibility cache has a number of purposes: stability: because the gecko dom and layout teams want to avoid memory bloat where necessary, we could not afford to use 4 bytes on dom or layout nodes to point back to ac...
... children of an accessible twice, once for getaccchildcount() and again when the specific children are requested. events: we must ensure that the accessible for an event is not released before the accessible client has a chance to review its data. also, msaa clients need to access the event accessibles using the unique child id we give it. when we get the child id back, we can recreate the hash
key needed to retrieve the accessible. finally, because the msaa client gets the same accessible for the event and for tree traversal each time, it can do comparisons with its own internal data model. for example, this allows the msaa client to invalidate parts of its own cache or data model based on dom mutation events. three levels of the accessibility cache there are three levels in the accessibi...
...the lowest common denominator for objects we must cache is nsaccessnode. nsaccessnode::init() when nsaccessibilityservice::getaccessible() gets a newly created accessible, it calls nsiaccessnode::init() on the new object, which will add this to the cache for the doc accessible. each nsaccessnode contains the dom node and weak pres shell for the object. the weak pres shell is used to create a hash
key to get the doc accessible from gglobaldocaccessiblecache. the dom node pointer is used to create the new hash
key and add the nsiaccessnode* into the document accessible's maccessnodecache. the init() method is also virtual, and many accessibles override it to do their own special initialization. if they do, they must also call their parent class' init() method when finished. nsaccessnode::shutdo...
Adding a new event
d a new event to the mozilla (firefox) source code. what type of event do you want? roughly, there are 3 types of event. first, you need to choose which type you need. a simple dom event which can be implemented with webidl and widgetevent or something. this type of event is useful if the event isn't handled by c++ code. a dom event which represents a native event like a user action such as
keyboard or mouse input. this type of event allows c++ code to handle it easier. it's not a dom event. however, c++ code may need to dispatch an event to dom tree and handle it with c++ event handler. this is useful for widget notifying dom tree of something or retrieving something from dom tree. how to implement an internal event class if you're in case 1 (a simple dom event), you can skip this...
...vents.h this header file should be used for defining internal event classes which are dispatched in content and do not represent user action. typically, events in this header file never cross process boundary. mouseevents.h this header file should be used for defining input events from pointing devices such as mouse. textevents.h this header file should be used for defining input events from
keyboard or ime and also other text edit related events like querying focused content information. touchevents.h this header file should be used for defining input events from touch devices. miscevents.h if the new event class isn't proper any header files above, you should use this. each event class should implement following methods manually. virtual internalfooevent* asfooevent() moz_over...
...anually otherwise, you need to implement a dom event class yourself. the best place to create fooevent.h and fooevent.cpp is in dom/events/. otherwise, you need to specify the path to the header file in dom/bindings/bindings.conf. when you create a dom event class, its name should be same as the name defined in its standard specification. and it should be in mozilla::dom namespace. for example,
keyboardevent which is defined in dom level 3 events should be implemented as mozilla::dom::
keyboardevent. and the header file should be exported as "mozilla/dom/fooevent.h". add the header file to exports.mozilla.dom in dom/events/moz.build. you probably need to implement a lot of methods to the event class, but this document doesn't explain all of them. please refer existing dom event implementat...
A bird's-eye view of the Mozilla framework
ture of the overall framework supporting the mozilla application suite, not the architecture of the individual applications themselves. prerequisites this article assumes you have access to mozilla sources and are familiar with the directory structure of the source tree. ...
... this article assumes you have access to mozilla sources and are familiar with the directory structure of the source tree. the code samples in the article are based on mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.9a1) gecko/20051104 seamon
key/1.1a from a new source tree checked out 11/04/05. the build id is 2005110409. thehelp viewer files referenced in the article are located in /seamon
key/extensions/help/ this article also assumes you are familiar with the javascript and c++ programming languages, object-oriented programming (oop) terminology and design concepts, the microsoft® component object model (com), and the corba omg interface definition language (idl). organization this article first covers some conceptual groundwork, then walks through a user scenario to illustrate h...
...tensions/help/ this article also assumes you are familiar with the javascript and c++ programming languages, object-oriented programming (oop) terminology and design concepts, the microsoft® component object model (com), and the corba omg interface definition language (idl). organization this article first covers some conceptual groundwork, then walks through a user scenario to illustrate how
key mozilla architectural components work together to support a simplehelp viewer ui action. framework layers at a high level, you can think of the mozilla framework as consisting of a suite of applications, each of which is organized into three basic layers depicted in figure 1. figure 1. user interface (ui) widgets and services the x window system toolkit defines the termwidget as a pre-d...
Chrome registration
vidually; if the line is parsable the chrome registry takes the action identified by that line, otherwise the chrome registry ignores that line (and prints a warning message in the runtime error console). locale packagename localename path/to/files skin packagename skinname path/to/files note: the characters @ # ; : ? / are not allowed in the packagename. firefox 2, thunderbird 2, and seamon
key 1.1 will not find the chrome when packagename is mixed case. if the above example had a packagename of camelcasepackage, you would get an error message similar to "no chrome registered for chrome://camelcasepackage/path/to/files". firefox 3, thunderbird 3, and seamon
key 2 support mixed case. bug resolved in mozilla 1.9; see bug 132183. manifest instructions comments # this line is a comment - ...
.../locale/necko/ content xbl-marquee jar:comm.jar!/content/xbl-marquee/ content pipnss jar:pipnss.jar!/content/pipnss/ locale pipnss en-us jar:en-us.jar!/locale/pipnss/ # firefox-only overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} # seamon
key-only overlay chrome://navigator/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://communicator/content/pref/preftree.xul chrome://pippki/content/prefoverlay.xul content pippki jar:pippki.jar!/content/pippki/ locale pippki en-us jar:en-us.jar!/locale/pippki/ content ...
...chrome. this is very helpful when trying to write a chrome.manifest file as you can inspect where the files are 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, seamon
key 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 lo...
Cookies Preferences in Mozilla
these preferences apply to most mozilla products (including firefox and seamon
key), however they are application-specific, so not all of them may apply to you. the default values given are for firefox 3. ...
...ey), however they are application-specific, so not all of them may apply to you. the default values given are for firefox 3. ...
...efault value: 50 configures the maximum amount of cookies to be stored per host valid range is from 0-65535, rfc 2109 and 2965 require this to be at least 20 network.cookie.disablecookieformailnews default value: true true = do not accept any cookies from within mailnews or from mail-style uris false = allow cookies in these situations this preference is applicable to all versions of seamon
key. new in thunderbird 3 this preference is applicable to thunderbird 3 and later. earlier versions of thunderbird only allowed cookies on rss feeds. network.cookie.prefsmigrated default value: false migration pref for users with older profiles (before mozilla 1.7). if you have the old-style prefs, they will be migrated when starting the application. (the old prefs are network.cookie.lifetime.en...
The Firefox codebase: CSS Guidelines
ither from javascript or overriden by another css file) if the answer is no, consider using a preprocessor variable or simply inlining the value. is the variable value used multiple times? if the answer is no and the value isn't changed at runtime, then you likely don't need a css variable. is there an alternative to using the variable like inheriting or using the currentcolor
keyword? using inheriting or using currentcolor will prevent repetition of the value and it is usually good practice to do so. in general, it's good to first think of how some css could be written cleanly without the css variable(s) and then think of how the css variable could improve that css. using variables use the variable according to its naming do this: xul|tab:hover { background-colo...
... for new css, when possible try to privilege using the shared directory, instead of writing the same css for the 3 platform ...
...than using absolute positioning. colors for common areas of the firefox interface (panels, toolbar buttons, etc.), mozilla-central often comes with some useful css variables that are adjusted with the correct values for different platform configurations, so using those css variables can definitively save some testing time, as you can assume they already work correctly. using the currentcolor
keyword or inheriting is also good practice, because sometimes the needed value is already in the color or on the parent element. this is especially useful in conjunction with icons using -moz-context-properties: fill; where the icon can adjust to the right platform color automatically from the text color. it is also possible to use currentcolor with other properties like opacity or fill-opacity to h...
How to implement a custom autocomplete search component
the xul textbox element supports an autocomplete mechanism that is used to create a textbox with a popup containing a list of possible completions for what the user has started to type. there are actually two autocomplete mechanisms: an older mechanism that is part of the "xpfe" codebase and is used in older applications such as thunderbird and seamon
key. a newer and slightly simplified mechanism that is used in "toolkit" applications such as firefox and xulrunner. thunderbird 2.x and seamon
key 1.1.x support the toolkit interfaces, although they do not use the same autocomplete widget. to use autocomplete with a xul textbox, all you need to do is set some attributes: <textbox type="autocomplete" autocompletesearch="history"/> the type="autocomplete" turns on the autocomplete mec...
...rch="history"/> the type="autocomplete" turns on the autocomplete mechanism and the autocompletesearch="history" sets the source for the autocomplete. there are more options and features, see xul:textbox_(firefox_autocomplete) for more details. the toolkit mechanism has built-in support for several autocomplete sources, including: history: search the browser's url history (firefox: 1.0+; seamon
key: 1.1+) form-history: search the values that the user has entered into form fields. (firefox: 1.0+; seamon
key: 2.0+) file: search file names (firefox: 2.0+; thunderbird: 2.0+; seamon
key: 1.1+; gtk builds only). the component uses the autocompletesearchparam attribute or searchparam property to allow the developer to define the default directory otherwise only paths beginning with / or ~/ will be...
...note: when copying the examples below, change the uuid that uniquely identifies the component, otherwise you might have problems if your component gets installed along another component derived from those same examples. that can happen! so, get a uuid from http://www.famkruithof.net/uuid/uuidgen, for example, and paste it in. ...
Introduction to Layout in Mozilla
overview basic data flow
key data structures detailed walk-through incrementalism future tech-talks wrap-up, q&a basic data flow source document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, compute style, render; repeat css used for rendering all content content theoretically separate from “presentation”
key data structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame ...
... may not be directly manipulated detailed walk-through setting up content model constructi...
...and dom - jst, jkeiser parser and content sink (esp. invalid content) - harishd events - saari, joki block-and-line reflow - waterson, dbaron table reflow - karnaze form controls - rods, bryner style resolution and rule tree - dbaron views, widgets, and painting - roc, kmcclusk editor - kin, jfrancis xul and box layout - hewitt, ben xbl - hewitt, ben conclusion data flow
key data structures detailed walk-through incrementalism q & a? original document information author(s): chris waterson last updated date: june 10, 2002 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
source-editor.jsm
e available configuration options. see the editor configuration object for details on configuring the editor. ...
...d. col number the 0-based column number on which the caret is located. getcharcount() returns the number of characters in the editor's content. number getcharcount(); parameters none. return value the number of characters in the editor's text. getindentationstring returns a string containing the character or characters that are inserted when the user presses the tab
key. string getindentationstring(); parameters none. return value if tabs are configured to be expanded into spaces (that is, the expandtab property is true), the returned string is comprised of the number of spaces specified by the tabsize property when the editor was initialized by calling init(). otherwise, the returned string is simply "\t". getlinecount() returns the number of lines of t...
... preference named by sourceeditor.prefs.expand_tab. highlightcurrentline boolean a boolean value indicating whether or not to highlight the line on which the text caret is currently located. initialtext string the default initial text to be in the editor when it's created. by default, this is the empty string, indicating there should be no text on startup.
keys array an array of objects defining custom
keyboard bindings. see xxxxx for details. mode string a string indicating the default syntax highlighting mode; by default, the content is assumed to be plain text. see editor mode constants for permitted values. placeholdertext string the default initial text to be in the editor when it's created; by default, an empt...
Localizing with Mercurial
in mozilla, we use the the mercurial version control system (hg) to manage our source code and localizations. mercurial allows localizers to work locally (on their machines) and then push (an hg term) changes to a remote repository, which usually is hosted on the mozilla servers (hg.mozilla.org). localizing current versions of firefox, thunderbird and seamon
key includes working with mercurial. if the documentation is incomplete or you have questions, please drop by the #l10n or #hg channels on irc.mozilla.org. the mercurial faq are also worth a read, should you run into trouble. for the eager and quick, below you'll find instructions on installing and configuring mercurial, instructions on receiving an hg account commit priviledges, as well as a few tasks you can complete without acc...
...c:\program files\mercurial\. now that you've installed and configured mercurial, here are a few tasks you can do without hg commit access priviledges. cloning and updating repositories there are a couple of repostiories that contain en-us source files that most locales will want to deal with. mozilla-central contains the files for firefox nightly. comm-central contains the files for seamon
key and thunderbird which are not already part of firefox. l10n-central contains all of the l10n repos for firefox nightly. when you get the comm-central repository, this will include the mozilla-central repository as well. you can therefore use the one set up for developing firefox, seamon
key and thunderbird without having to pull mozilla-central a second time. here's how to get (or clone) you...
...your en-us source files for the first time: run the following command in the command line to get the source en-us files for firefox: hg clone https://hg.mozilla.org/mozilla-central/ this will create a clone of the mozilla-central repository in the directory mozilla-central. run the following commands in the command line to get the source en-us files for any combination of firefox, seamon
key, 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 seamon
key and thunderbird. cloning y...
Localizing with Mozilla Translator
ost cat tools, mozillatranslator employs glossaries and translation memory to leverage your work from previous translations, thus cutting time and effort when localizing new versions of mozilla applications. getting started with mozillatranslator mt uses products as groups of localization files with a common root directory (for instance, you may have a product for thunderbird, other for seamon
key, other for dom, other for toolkit, etc.) you update your repository copy using your favorite repository tool, and then update the product(s) in mt. this will remove obsolete strings and files from the internal database of mt, and will present you with a list of new and updated strings. if you are starting a new localization, all strings will be marked as new or updated.mt puts a fuzzy flag on e...
...n were done always on shipped en-us jars and when mozilla suite had five l10n jars: ab-cd.jar, ab-win.jar, ab-mac.jar, ab-unix.jar, and cd.jar. mt thus referred to ab-cd.jar contents as ''platform neutral'' platform, cd.jar as '''region''' platform (or regional files), and the other three as ''windows platform'', ''mac platform'' and ''unix platform''. this jar structure is now used just by seamon
key 1.1.x. when mozilla l10n switched to ''source l10n'', one of the many problems that mt had to solve was how to fit a directory structure in what had been designed for five jars, and the ''patch'' consisted of providing a ''read from dir instead of jar'' and ''put everything inside platform neutral''. that has worked well (ok, more or less) :-) as long as you could instruct mt to use just one ''...
...d of jar'' and ''put everything inside platform neutral''. that has worked well (ok, more or less) :-) as long as you could instruct mt to use just one ''root'' l10n directory, but this is no longer the case with mercurial. mt could be changed for a mt product to have a list of ''root'' directories instead of just one, and maybe someday it will do, but it will probably won't happen before seamon
key 1.1.x dies (and seamon
key 2.0 finally conquers the web, if i may add). ;-) enough chatting, what's next? anyway, we need to work around the full-fledged repository problem. these are your options: create one product for each ''root'' directories. this means browser, extensions/reporter, dom, netwer, security, and toolkit. besides that, you will need to create one tiny product for other-li...
Localization technical reviews
string lengths in pipnss.properties there are some character limits in the security/manager/chrome/pipnss/pipnss.properties file that you should be aware of. it is best to look into each of these files to see if the localizer's strings might be too long. this is something to look for, but can be difficult to diagnose immediately. for more info, see bug 435874. ...
...racter limits in the security/manager/chrome/pipnss/pipnss.properties file that you should be aware of. it is best to look into each of these files to see if the localizer's strings might be too long. this is something to look for, but can be difficult to diagnose immediately. for more info, see bug 435874. check for bad migration of access
keys in the past, it was common to find broken access
keys for safari and camino in browser/chrome/browser/migration/migration.dtd. for this review, we look at this file to make sure that the access
keys look normal. if they don't, we report any strange access
keys or translations that localizers might have changed during their initial translation process. for more info about access
keys in the technical review process, see bug 421893. no utf-7 in the ...
...le toolkit/chrome/global/intl.properties. for more info about utf-7 in firefox, see bug 441876. more intl.properties checkpoints, cont we also check the plural rule for the locale, that the general.useragent.locale is set to the locale code, that accept-lang shows the locale code(s) (like ab, ab-cd,...) and is followed by en and en-us, and finally that intl.menuitems.insertseparatorbeforeaccess
keys = true, where "true" should be left untranslated. inspect firefox-l10n.js we ensure that there are no odd preferences, or #filter substitutions for general.useragent.locale. most locales should have the following: #filter substitution pref("general.useragent.locale", "@ab_cd@") how it all works a large part of the review process takes place before you even submit your request for a techn...
Writing localizable code
s you about best practices and guidelines when dealing with ui code with respect to localization. it is aimed at mozilla and extension developers. for technical details please also look at xul_tutorial:localization. about localizers a few notes about localizers for developers who rarely deal with them: localizers like tools, and they don't like editors, localization tools are often based on
key-value pairs, at least some localizers have their talents focused on language skills and are not savvy in programming, or even building applications. guidelines thus, there are a few guidelines you should follow to make localization of your code easier: choose good
key names the names chosen for your
keys (regardless of whether that's a dtd or a properties file) should be descriptive. thin...
...ot savvy in programming, or even building applications. guidelines thus, there are a few guidelines you should follow to make localization of your code easier: choose good
key names the names chosen for your
keys (regardless of whether that's a dtd or a properties file) should be descriptive. think of them as long variable names. if you change the semantics of a localized string, change the
key. this will more likely be a good
key name, and it will help tools to pick up that the change you do is different from just a spell fix. try not to assume grammar in composite strings splitting sentences into several
keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate. when a composite string is needed, try to give...
...se #endif or #expand is strongly discouraged. there are few exceptions to this rule, but in general, the localized file should comply with standards and should not require build tools to be transformed. if you want to add build processing to localized files, be sure to request feedback from l10n@. in most cases, you can just as well put the processing into the content code and reference different
key-value pairs in l10n. use a good source directory structure be sure to put the localizable files in the right place. the addition of new top-level directories is a compromise between module ownership in the cvsroot repository and the ease of localization. use a good chrome directory structure for a particular module mod, a target path jar:ab-cd.jar!/locale/ab-cd/mod/foo.dtd has been widely...
CERT_FindCertByIssuerAndSN
returns a pointer to a certcertificate representing the certificate in the database that matched the issuer and serial number, or null if none was found. the certificate is a shallow copy, use cert_destroycertificate to decrement the reference count on the certificate instance. example certissue...
... returns a pointer to a certcertificate representing the certificate in the database that matched the issuer and serial number, or null if none was found. the certificate is a shallow copy, use cert_destroycertificate to decrement the reference count on the certificate instance. example certissuerandsn issuersn; issuersn.derissuer.data = cana...
...ficate representing the certificate in the database that matched the issuer and serial number, or null if none was found. the certificate is a shallow copy, use cert_destroycertificate to decrement the reference count on the certificate instance. example certissuerandsn issuersn; issuersn.derissuer.data = caname->data; issuersn.derissuer.len = caname->len; issuersn.serialnumber.data = authority
keyid->authcertserialnumber.data; issuersn.serialnumber.len = authority
keyid->authcertserialnumber.len; issuercert = cert_findcertbyissuerandsn(cert->dbhandle, &issuersn); if ( issuercert == null ) { port_seterror (sec_error_unknown_issuer); } see also occurrences of cert_findcertbyissuerandsn in the current nss source code (generated by lxr). ...
NSS 3.28.3 release notes
in nss 3.28.3 nss version 3.28, 3.28.1 and 3.28.2 contained changes that were in violation with the nss compatibility promise. ecparams, which is part of the public api of the freebl/softokn parts of nss, had been changed to include an additional attribute. that size increase caused crashes or malfunctioning with applications that use that data structure directly, or indirectly through ecpublic
key, ecprivate
key, nsslow
keypublic
key, nsslow
keyprivate
key, or potentially other data structures that reference ecparams. the change has been reverted to the original state in bug 1334108. sec
keyecpublic
key had been extended with a new attribute, named "encoding". if an application passed type sec
keyecpublic
key to nss (as part of sec
keypublic
key), the nss library read the uninitialized attribute. wi...
...nss no longer reads the attribute, and will always set it to ecpoint_undefined. see bug 1340103. compatibility nss 3.28.3 shared libraries are backward compatible with most older nss 3.x shared libraries, but depending on your application, may be incompatible, if you application has been compiled against header files of versions 3.28, 3.28.1, or 3.28.2. ...
...nss no longer reads the attribute, and will always set it to ecpoint_undefined. see bug 1340103. compatibility nss 3.28.3 shared libraries are backward compatible with most older nss 3.x shared libraries, but depending on your application, may be incompatible, if you application has been compiled against header files of versions 3.28, 3.28.1, or 3.28.2. ...
NSS 3.29.1 release notes
s 3.29.1 nss version 3.28, 3.28.1, 3.28.2 and 3.29 contained changes that were in violation with the nss compatibility promise. ecparams, which is part of the public api of the freebl/softokn parts of nss, had been changed to include an additional attribute. that size increase caused crashes or malfunctioning with applications that use that data structure directly, or indirectly through ecpublic
key, ecprivate
key, nsslow
keypublic
key, nsslow
keyprivate
key, or potentially other data structures that reference ecparams. the change has been reverted to the original state in bug 1334108. sec
keyecpublic
key had been extended with a new attribute, named "encoding". if an application passed type sec
keyecpublic
key to nss (as part of sec
keypublic
key), the nss library read the uninitialized attribute. wi...
...nss no longer reads the attribute, and will always set it to ecpoint_undefined. see bug 1340103. note that nss 3.28.3 from the older nss 3.28.x branch has also been released with the identical fixes. ...
...nss no longer reads the attribute, and will always set it to ecpoint_undefined. see bug 1340103. note that nss 3.28.3 from the older nss 3.28.x branch has also been released with the identical fixes. ...
NSS 3.45 release notes
s will be null. notable changes in nss 3.45 bug 1540403 - implement delegated credentials (draft-ietf-tls-subcerts) this adds a new experimental function: ssl_delegatecredential note: in 3.45, selfserv does not yet support delegated credentials. see bug 1548360. note: in 3.45 the sslchannelinfo is left unmodified, while an upcoming change in 3.46 will set sslchannelinfo.auth
keybits to that of the delegated credential for better policy enforcement. see bug 1563078. bug 1550579 - replace arm32 curve25519 implementation with one from fiat-crypto bug 1551129 - support static linking on windows bug 1552262 - expose a function pk11_findrawcertswithsubject for finding certificates with a given subject on a given slot bug 1546229 - add ipsec ike support to softoken bu...
... prompt follow-on work, but please accept our apologies in the meantime. ...
...x builds using gcc < 4.3 on big-endian architectures bug 1554659 - add versioning to openbsd builds to fix link time errors using nss bug 1553443 - send session ticket only after handshake is marked as finished bug 1550708 - fix gyp scripts on solaris sparc so that libfreebl_64fpu_3.so builds bug 1554336 - optimize away unneeded loop in mpi.c bug 1559906 - fipstest: use ckm_tls12_master_
key_derive instead of vendor specific mechanism bug 1558126 - tls_aes_256_gcm_sha384 should be marked as fips compatible bug 1555207 - helloretryrequestcallback return code for rejecting 0-rtt bug 1556591 - eliminate races in uses of pk11_setwrap
key bug 1558681 - stop using a global for anti-replay of tls 1.3 early data bug 1561510 - fix a bug where removing -arch xxx args from cc didn't work b...
FC_SignInit
description fc_signinit initializes a signature operation. ...
... description fc_signinit initializes a signature operation. ...
... description fc_signinit initializes a signature operation. ...
NSC_InitToken
of the token's slot ppin the password of the security officer (so) ulpinlen the length in bytes of the so password plabel points to the label of the token, which must be padded with spaces to 32 bytes and not be null-terminated description nsc_inittoken() initializes a brand new token or re-initializes a token that was initialized before. specifically, nsc_inittoken() initializes or clears the
key database, removes the password, and then marks all the user certs in the certificate database as non-user certs. (user certs are the certificates that have their associated private
keys in the
key database.) note: the so password should be the empty string, i.e., ulpinlen argument should be 0. nsc_inittoken() ignores the plabel argument. return value nsc_inittoken() returns the following re...
...s in the
key database.) note: the so password should be the empty string, i.e., ulpinlen argument should be 0. nsc_inittoken() ignores the plabel argument. return value nsc_inittoken() returns the following return codes. ckr_ok: token initialization succeeded. ckr_slot_id_invalid: slot id is invalid. ckr_token_write_protected slot id is 1. (the non-fips mode has two slots: 1 and 2. the
key database is in slot 2. slot 1 doesn't have a
key database.) we don't have a reference to the
key database (we failed to open the
key database or we have released our reference). ckr_device_error: failed to reset the
key database. examples application usage nsc_inittoken() is used to reset the password for the
key database when the user forgets the password. the "reset password" button o...
...e a
key database.) we don't have a reference to the
key database (we failed to open the
key database or we have released our reference). ckr_device_error: failed to reset the
key database. examples application usage nsc_inittoken() is used to reset the password for the
key database when the user forgets the password. the "reset password" button of the mozilla application suite and seamon
key (in preferences->privacy & security->master passwords) calls nsc_inittoken(). the "-t" (token reset) command of certutil calls nsc_inittoken(). note: resetting the password clears all permanent secret and private
keys. you won't be able to decrypt the data, such as mozilla's stored passwords, that were encrypted using any of those
keys. see also nsc_initpin, fc_inittoken ...
FIPS mode of operation
fc_createobject fc_copyobject fc_destroyobject fc_getobjectsize fc_getattributevalue fc_setattributevalue fc_findobjectsinit fc_findobjects fc_findobjectsfinal encryption functions these functions support triple des and aes in ecb and cbc modes. fc_encryptinit fc_encrypt fc_encryptupdate fc_encryptfinal decryption functions these functions support triple des and aes in ec...
...es and aes in ecb and cbc modes. fc_encryptinit fc_encrypt fc_encryptupdate fc_encryptfinal decryption functions these functions support triple des and aes in ecb and cbc modes. fc_decryptinit fc_decrypt fc_decryptupdate fc_decryptfinal message digesting functions these functions support sha-1, sha-256, sha-384, and sha-512. fc_digestinit fc_digest fc_digestupdate fc_digest
key fc_digestfinal signature and mac generation functions these functions support dsa, rsa, ecdsa, and hmac. fc_signinit fc_sign fc_signupdate fc_signfinal fc_signrecoverinit fc_signrecover signature and mac verification functions these functions support dsa, rsa, ecdsa, and hmac. fc_verifyinit fc_verify fc_verifyupdate fc_verifyfinal fc_verifyrecoverinit fc_verifyrecover dua...
... fc_signupdate fc_signfinal fc_signrecoverinit fc_signrecover signature and mac verification functions these functions support dsa, rsa, ecdsa, and hmac. fc_verifyinit fc_verify fc_verifyupdate fc_verifyfinal fc_verifyrecoverinit fc_verifyrecover dual-function cryptographic functions fc_digestencryptupdate fc_decryptdigestupdate fc_signencryptupdate fc_decryptverifyupdate
key management functions fc_generate
key: dsa domain parameters (pqg) fc_generate
keypair: dsa, rsa, and ecdsa. performs pair-wise consistency test. fc_wrap
key: rsa
key wrapping fc_unwrap
key: rsa
key wrapping fc_derive
key: diffie-hellman, ec diffie-hellman random number generation functions fc_seedrandom fc_generaterandom: performs continuous random number generator test. parallel functi...
NSS environment variables
utdown nss before freeing all the resources it acquired from nss while nss was initialized. 3.5 nss_trace_ocsp boolean (any value to enable) enables ocsp tracing. the trace information is written to the file pointed by nspr_log_file (default stderr). see nss tracing 3.12 nss_use_decoded_cka_ec_point boolean (any value to enable) tells nss to send ec
key points across the pkcs#11 interface in the non-standard unencoded format that was used by default before nss 3.12.3. 3.12.3 nss_use_shexp_in_cert_name boolean (any value to enable) tells nss to allow shell-style wildcard patterns in certificates to match ssl server host names. this behavior was the default before nss 3.12.3. 3.12.3 pkix_object_leak_test_abort_on_...
...e string (file name) file where debug or trace information is written. if not set, the debug or trace information is written to stderr. note: ssldebug or ssltrace have to be set to use this functionality. 3.12 sslforcelocks boolean (1 to enable) forces nss to use locks for protection. overrides the effect of ssl_no_locks (see ssl.h). 3.11 ssl
keylogfile string (file name)
key log file. if set, nss logs rsa pre-master secrets to this file. this allows packet sniffers to decrypt tls connections. see documentation. 3.12.6 ssltrace integer tracing level note: the code must be built with trace defined to use this functionality. before 3.0 build-time environment variables these environment variables af...
...nks whose targets are absolute pathnames are published if not specified, default to relative symlinks (symlinks whose targets are relative pathnames). on windows, copies of files are always published. before 3.0 ns_use_gcc boolean (1 to enable) on systems where gcc is not the default compiler, this tells nss to build with gcc. before 3.0 nss_allow_ssl
keylogfile boolean (1 to enable) enable nss support in optimized builds for logging ssl/tls
key material to a logfile if the ssl
keylogfile environment variable. as of nss 3.24 this is disabled by default. 3.24 nss_build_continue_on_error boolean (1 to enable) continue building nss source directories when a build error occurs. 3.12.4 nss_use_system_sqlite ...
NSS tools : cmsutil
ons options specify an action. option arguments modify an action. the options and arguments for the cmsutil command are defined as follows: -d decode a message. -c encrypt a message. -e envelope a message. -o create a certificates-only message. -s sign a message. arguments option arguments modify an action and are lowercase. -c content use this detached content (decode only). -d dbdir specify the
key/certificate database directory (default is ".") -e envfile specify a file containing an enveloped message for a set of recipients to which you would like to send an encrypted message. if this is the first encrypted message for that set of recipients, a new enveloped message will be created that you can then use for future messages (encrypt only). -g include a signing time attribute (sign only). -...
... only). -h num generate email headers with info about cms message (decode only). -i infile use infile as a source of data (default is stdin). -n nickname specify nickname of certificate to sign with (sign only). -n suppress output of contents (decode only). -o outfile use outfile as a destination of data (default is stdout). -p include an s/mime capabilities attribute. -p password use password as
key database password. -r recipient1,recipient2, ... specify list of recipients (email addresses) for an encrypted or enveloped message. for certificates-only message, list of certificates to send. -t suppress content in cms message (sign only). -u certusage set type of cert usage (default is certusageemailsigner). -y ekprefnick specify an encryption
key preference by nickname. usage encrypt example ...
..., the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/. the nss site relates directly to nss code changes and releases. mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat. authors: elio maldonado <emaldona@redhat.com>, deon lac
key <dlac
key@redhat.com>. copyright (c) 2010, red hat, inc. licensed under the gnu public license version 2. references visible links 1. http://pki.fedoraproject.org/wiki/ 2. http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : ssltab
9 11 94 40 37 57 10 a7 32 | ...¨*1.)..@7w.§2 10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È. } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } 0: 0b 00 02 c5 |...Å type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate { size = 703 (0x02bf) data = { saved in file 'cert.001' } } } 0: 0c 00 00 ca |.... type = 12 (server_
key_exchange) length = 202 (0x0000ca) 0: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { 0: 16 03 00 00 44 |....d type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { 0: 10 00 00 40 |...@ type = 16 (client_
key_exchange) length = 64 (0x000040) client
keyexchange { message = {...} } } } ] --> [ sslrecord { 0: 14 03 00 00 01 |..... type = 20...
...97 (0x3e5) handshake { type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} session id = { length = 32 contents = {..} } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate { size = 703 (0x02bf) data = { saved in file 'cert.001' } } } type = 12 (server_
key_exchange) length = 202 (0x0000ca) type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { type = 16 (client_
key_exchange) length = 64 (0x000040) client
keyexchange { message = {...} } } } ] --> [ sslrecord { type = 20 (change_cipher_spec) version = { 3,0 } length = 1 (0x1) } sslrecord { type = 22 (handshake)...
...s project wiki is located at [3]http://www.mozilla.org/projects/security/pki/nss/. the nss site relates directly to nss code changes and releases. mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat and sun. authors: elio maldonado <emaldona@redhat.com>, deon lac
key <dlac
key@redhat.com>. copyright (c) 2010, red hat, inc. licensed under the gnu public license version 2. references visible links 1. http://www.mozilla.org/projects/secu.../pki/nss/tools 2. http://pki.fedoraproject.org/wiki/ 3. http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : ssltap
9 11 94 40 37 57 10 a7 32 | ...¨*1.)..@7w.§2 10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È. } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } 0: 0b 00 02 c5 |...Å type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate { size = 703 (0x02bf) data = { saved in file 'cert.001' } } } 0: 0c 00 00 ca |.... type = 12 (server_
key_exchange) length = 202 (0x0000ca) 0: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { 0: 16 03 00 00 44 |....d type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { 0: 10 00 00 40 |...@ type = 16 (client_
key_exchange) length = 64 (0x000040) client
keyexchange { message = {...} } } } ] --> [ sslrecord { 0: 14 03 00 00 01 |..... type = 20...
...97 (0x3e5) handshake { type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} session id = { length = 32 contents = {..} } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate { size = 703 (0x02bf) data = { saved in file 'cert.001' } } } type = 12 (server_
key_exchange) length = 202 (0x0000ca) type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { type = 16 (client_
key_exchange) length = 64 (0x000040) client
keyexchange { message = {...} } } } ] --> [ sslrecord { type = 20 (change_cipher_spec) version = { 3,0 } length = 1 (0x1) } sslrecord { type = 22 (handshake)...
...s project wiki is located at [3]http://www.mozilla.org/projects/security/pki/nss/. the nss site relates directly to nss code changes and releases. mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat and sun. authors: elio maldonado <emaldona@redhat.com>, deon lac
key <dlac
key@redhat.com>. copyright (c) 2010, red hat, inc. licensed under the gnu public license version 2. references visible links 1. http://www.mozilla.org/projects/secu.../pki/nss/tools 2. http://pki.fedoraproject.org/wiki/ 3. http://www.mozilla.org/projects/security/pki/nss/ ...
sslintro.html
he details differ somewhat for client and server applications, the concepts and many of the functions are the same for both. warning: some of the ssl header files provided as part of nss 2.0 include both public apis documented in the nss 2.0 documentation set and private apis intended for internal use by the nss implementation of ssl. you should use only the ssl apis (and related certificate,
key, and pkcs #11 apis) that are described in this document, the ssl reference. other apis that may be exposed in the header files are not supported for application use. 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_in...
...code under certain circumstances. ...
..._verifycertnow pk11_findcertfromnickname pk11_find
keybyanycert pk11_setpasswordfunc pl_strcpy pl_strdup pl_strfree pl_strlen ssl_peercertificate ssl_revealurl ssl_revealpinarg cleanup this portion of an ssl-enabled application consists primarily of closing the socket and freeing memory. after these tasks have been performed, call nss_shutdown to close the certificate and
key databases opened by nss_init, and pr_cleanup to coordinate a graceful shutdown of nspr. ...
Utility functions
3.11.1 and later sec_asn1lengthlength mxr 3.2 and later sec_dupcrl mxr 3.9 and later sec_getsignaturealgorithmoidtag mxr 3.10 and later sec_getregisteredhttpclient mxr 3.12 and later sec_pkcs5getcryptoalgorithm mxr 3.2 and later sec_pkcs5get
keylength mxr 3.2 and later sec_pkcs5getpbealgorithm mxr 3.2 and later sec_pkcs5isalgorithmpbealg mxr 3.2 and later sec_pkcs5isalgorithmpbealgtag mxr 3.12 and later sec_registerdefaulthttpclient mxr 3.11.1 and later sec_signdata mxr 3.2 and later ...
... secitem_compareitem mxr 3.2 and later secitem_copyitem mxr 3.2 and later secitem_dupitem mxr 3.2 and later secitem_freeitem mxr 3.2 and later secitem_itemsareequal mxr 3.8 and later secitem_zfreeitem mxr 3.2 and later sec
key_copyencryptedprivate
keyinfo mxr 3.2 and later sec
key_copyprivate
keyinfo mxr 3.2 and later sec
key_creatersaprivate
key mxr 3.2 and later sec
key_destroyencryptedprivate
keyinfo mxr 3.2 and later sec
key_destroyprivate
keyinfo mxr 3.2 and later sec
key_destroypublick...
... later sec
key_copyprivate
keyinfo mxr 3.2 and later sec
key_creatersaprivate
key mxr 3.2 and later sec
key_destroyencryptedprivate
keyinfo mxr 3.2 and later sec
key_destroyprivate
keyinfo mxr 3.2 and later sec
key_destroypublic
key mxr 3.2 and later sec
key_public
keystrength mxr 3.2 and later sec
key_updatecertpqg mxr 3.2 and later secmod_addnewmodule mxr 3.3 and later secmod_addnewmoduleex mxr 3.4 and later secmod_deletemoduleex mxr 3.12 and later secmod_cancelwait mxr 3.9.3 and later ...
NSS Tools cmsutil
ions and arguments options specify an action. option arguments modify an action. the options and arguments for the cmsutil command are defined as follows: options -ddecode a message. -c encrypt a message. -e envelope a message. -o create a certificates-only message. -s sign a message. arguments -c content use this detached content (decode only). -d dbdir specify the
key/certificate database directory (default is ".") -e envfile specify a file containing an enveloped message for a set of recipients to which you would like to send an encrypted message. if this is the first encrypted message for that set of recipients, a new enveloped message will be created that you can then use for future messages (encrypt only). -g include a signing time attribute (sign only...
...erate email headers with info about cms message (decode only). -i infile use infile as a source of data (default is stdin). -n nickname specify nickname of certificate to sign with (sign only). -n suppress output of contents (decode only). -o outfile use outfile as a destination of data (default is stdout). -p include an s/mime capabilities attribute. ...
... usage cmsutil -c [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, . . ." -e envfile cmsutil -d [-i infile] [-o outfile] [-d dbdir] [-p password] [-c content] [-n] [-h num] cmsutil -e [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, . . ...
NSS Tools ssltap
0b 00 02 c5 |...Å type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate { size = 703 (0x02bf) data = { saved in file 'cert.001' } } } 0: 0c 00 00 ca |.... type = 12 (server_
key_exchange) length = 202 (0x0000ca) 0: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) }}]--> [sslrecord { 0: 16 03 00 00 44 |....d type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { 0: 10 00 00 40 |...@ ...
... length = 202 (0x0000ca) 0: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) }}]--> [sslrecord { 0: 16 03 00 00 44 |....d type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { 0: 10 00 00 40 |...@ type = 16 (client_
key_exchange) length = 64 (0x000040) client
keyexchange { message = {...} } }}]--> [sslrecord { 0: 14 03 00 00 01 |..... type = 20 (change_cipher_spec) version = { 3,0 } length = 1 (0x1) 0: 01 |.}sslrecord { 0: 16 03 00 00 38 |....8 type ...
...{..} } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate { size = 703 (0x02bf) data = { saved in file 'cert.001' } } } type = 12 (server_
key_exchange) length = 202 (0x0000ca) type = 14 (server_hello_done) length = 0 (0x000000) }}]--> [sslrecord { type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { type = 16 (client_
key_exchange) length = 64 (0x000040) client
keyexchange { message = {...} } }}]--> [sslrecord { type = 20 (c...
64-bit Compatibility
what widths are the random typedefs everywhere? the following types or typedefs are always 64-bit on 64-bit platforms, and 32-bit on 32-bit platforms: pointers uintptr_t, intptr_t, ptrdiff_t, (probably) size_t jsval jsuword, jsword length of a string, though the actual length cannot exceed 30 bits jsuintptr, jsintptr, jsptrdiff, jsuptrdiff, jssize, jsuword, jsword (let's not use these, kthx) the following types are 32-bit on 32-bit platforms. ...
...r types or lirwriter::insimmword() for integral types. note that lirwriter::insimm() is always 32-bit. quad versus float internally, "quads" are 64-bit opaque values in nanojit. they can be either floating point values or integral values. to help form well-typed lir, there is a special opcode called lir_float which specifies that the associated constant value is definitely floating-point. tracemon
key uses this to decide whether arbitrary constants in lir are pointers or doubles. you should never use lirwriter::insimmq() to inject a floating point value. use lirwriter::insimmf() instead. mucking with native integers in lir the following opcodes can be used to safely load, modify, and compare native integers. for such opcodes there are two forms, an "undecorated" form which is 32-bit, and a for...
...there are three such opcodes: lir_i2q - sign-extends a 32-bit integer to a 64-bit integer. lir_u2q - zero-extends a 32-bit integer to a 64-bit integer. lir_qlo - truncates a 64-bit integer to its lower 32 bits. there are three helper functions in lirwriter: ins_i2p() - on 32-bit platforms, does nothing. on 64-bit platforms, performs a lir_i2...
JS::AutoVectorRooter
syntax js::autovectorrooter(jscontext* cx); methods method description size_t length() const returns the length of the array. bool empty() const determines if the array is empty (length is zero). bool append(const t &v) appends an element v to the array. bool append(const t *ptr, size_t len) appends a sequence of t specified with a pointer ptr and length len to the array. bool appendall(const autovectorrooter<t> &other) appends all elements of other to the array. ...
... of the array. const t &back() const returns the last element. description js::autovectorrooter<t> holds a variable-size rooted array of type t. ...
...tion js::autovectorrooter<t> holds a variable-size rooted array of type t. ...
JS::Evaluate
this article covers features introduced in spidermon
key 17 compile and execute a script. ...
... this article covers features introduced in spidermon
key 17 compile and execute a script. ...
...blehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlevalue rval); // added in spidermon
key 17 bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutableh...
JS::IdentifyStandardInstance
this article covers features introduced in spidermon
key 31 determine if the given object is an instance/prototype/constructor for a standard class. syntax jsproto
key js::identifystandardinstance(jsobject *obj); jsproto
key js::identifystandardprototype(jsobject *obj); jsproto
key js::identifystandardinstanceorprototype(jsobject *obj); jsproto
key js::identifystandardconstructor(jsobject *obj); // added in spidermon
key 38 name type description obj jsobject * pointer to the instance/prototype/constructor object to determine. description js::identifystandardinstance determines if the given object is an instance for a standard class. if so, return the associated jsproto
key. if not, return jsproto_null. js::identifystandardprototype determines i...
...bject * pointer to the instance/prototype/constructor object to determine. description js::identifystandardinstance determines if the given object is an instance for a standard class. if so, return the associated jsproto
key. if not, return jsproto_null. js::identifystandardprototype determines if the given object is a prototype for a standard class. if so, return the associated jsproto
key. if not, return jsproto_null. js::identifystandardinstanceorprototype determines if the given object is an instance or prototype for a standard class. if so, return the associated jsproto
key. if not, return jsproto_null. js::identifystandardconstructor determines if the given object is a constructor for a standard class. if so, return the associated jsproto
key. if not, return jsproto_null. see...
... js::identifystandardconstructor determines if the given object is a constructor for a standard class. if so, return the associated jsproto
key. if not, return jsproto_null. ...
JS::SetLargeAllocationFailureCallback
this article covers features introduced in spidermon
key 31 specify a new callback function for large memory allocation failure. syntax void js::setlargeallocationfailurecallback(jsruntime *rt, js::largeallocationfailurecallback afc, void *data); name type description rt jsruntime * the jsruntime for which to set the gc callback. cb js::largeallocationfailurecallback pointer to the new callback function to use. data void * data parameter which will be passed to js::largeallocationfailurecallback. ...
...callback afc, void *data); name type description rt jsruntime * the jsruntime for which to set the gc callback. cb js::largeallocationfailurecallback pointer to the new callback function to use. data void * data parameter which will be passed to js::largeallocationfailurecallback. ...
...o the new callback function to use. data void * data parameter which will be passed to js::largeallocationfailurecallback. added in spidermon
key 38 callback syntax typedef void (* js::largeallocationfailurecallback)(void *data); name type description data void * data parameter passed to js::setlargeallocationfailurecallback. added in spidermon
key 38 description if a large allocation fails when calling pod_{calloc,realloc}cangc, the js engine may call the large-allocation- failure callback, if set, to allow the embedding to flush caches, possibly perform shrinking gcs, etc. to make some room. the allocation will then be retried (and may still fail.) js::setlargeallocationfailurecallback sets a callback function for it. see also ...
JS::SetOutOfMemoryCallback
this article covers features introduced in spidermon
key 31 specify a new callback function for out of memory error. syntax void js::setoutofmemorycallback(jsruntime *rt, js::outofmemorycallback cb, void *data); name type description rt jsruntime * the jsruntime for which to set the gc callback. cb js::outofmemorycallback pointer to the new callback function to use. data void * data parameter which will be passed to js::outofmemorycallback. ...
...oid js::setoutofmemorycallback(jsruntime *rt, js::outofmemorycallback cb, void *data); name type description rt jsruntime * the jsruntime for which to set the gc callback. cb js::outofmemorycallback pointer to the new callback function to use. data void * data parameter which will be passed to js::outofmemorycallback. ...
...ycallback pointer to the new callback function to use. data void * data parameter which will be passed to js::outofmemorycallback. added in spidermon
key 38 callback syntax typedef void (* outofmemorycallback)(jscontext *cx, void *data); name type description data void * data parameter passed to js::setoutofmemorycallback. added in spidermon
key 38 description unlike the error reporter, which is only called if the exception for an oom bubbles up and is not caught, the js::outofmemorycallback is called immediately at the oom site to allow the embedding to capture the current state of heap allocation before anything is freed. if the large-allocation-failure callback is called at all (not all allocation sites call the large-allocati...
JSPropertyOp
roperty, and setproperty callbacks, which are called during object property accesses. syntax typedef bool (* jspropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); typedef bool (* jsstrictpropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mutablehandlevalue vp); // added in spidermon
key 1.9.3 name type description cx jscontext * the context in which the property access is taking place. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an active request on cx. the callback does not need to call js_beginrequest()). obj js::handleobject the object whose properties are b...
...ny assignment operator (=, +=, etc.) or the ++ or -- operators. it is also called when the property is set via jsapi functions such as js_setproperty. on entry, *vp contains the value being assigned to the property. the callback may modify *vp. on success, the callback returns true. if the property has a stored value, it is then updated to the value left in *vp after the callback. as of spidermon
key 1.7, the value of a property assignment expression, like (a.length = x), is the value of *vp after the setter is called. this is typically the value of the left-hand side after assignment, as opposed to the value of the right-hand side, as required by ecma 262-3 §11.13. this ecmascript incompatibility is observable when assigning to the length property of an array, for example. this incompatibil...
...assignment expression, like (a.length = x), is the value of *vp after the setter is called. this is typically the value of the left-hand side after assignment, as opposed to the value of the right-hand side, as required by ecma 262-3 §11.13. this ecmascript incompatibility is observable when assigning to the length property of an array, for example. this incompatibility will be fixed in spidermon
key 1.8; see bug 312354. inherited properties. note that in javascript, an object can inherit properties from its prototype. getters (and sometimes setters; see js_setproperty for details) are called even when the property being accessed is found on a prototype and not on obj itself. in this case obj points to the object from which the property is being accessed, not the object on which the property...
JS_AlreadyHasOwnProperty
this article covers features introduced in spidermon
key 1.8 determine whether a property is already physically present on a jsobject. syntax boo js_alreadyhasownproperty(jscontext *cx, js::handleobject obj, const char *name, bool *foundp); boo js_alreadyhasownucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, bool *foundp); boo js_alreadyhasownpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, bool *foundp); // added in spidermon
key 1.8.1 boo js_alreadyhasownelement(jscontext *cx, js::handleobject obj, uint32_t index, bool *foundp); name type description cx jscontext * pointer to a js context. req...
... in *foundp is undefined. description these functions attempt to determine whether a property already exists on a specific jsobject without modifying the object. by design, this search may not find a property that other property lookup functions, such as js_lookupproperty, would find. for native objects—objects whose properties are stored in the default data structure provided by spidermon
key—these functions simply check that data structure to see if the specified field is present. they do not search anywhere else for the property. this means that: the prototype chain of obj is not searched. the object's jsclass.resolve hook is not called, so lazily defined properties are not found. (this is the only api that can directly detect that a lazily resolved property has not yet been re...
...lse for the property. this means that: the prototype chain of obj is not searched. the object's jsclass.resolve hook is not called, so lazily defined properties are not found. (this is the only api that can directly detect that a lazily resolved property has not yet been resolved.) shared, permanent, delegated properties are not found. (such properties are an implementation detail of spidermon
key. they are meant to be a transparent optimization; this is the only api that breaks the abstraction.) for non-native objects, this falls back on a complete search. this calls the jsobjectops.lookupproperty hook. *foundp is set to true only if lookupproperty reports that the property was found on obj itself and not on some other object (even the corresponding outer object, if any). if the property...
JS_CStringsAreUTF8
obsolete since jsapi 19this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. these functions have been removed in spidermon
key 19. api users should switch to functions which take utf-8 explicitly or handle their own string encoding and decoding. option to have the jsapi treat char strings as utf-8. ...
... discouraged since it could be removed at any time. try to avoid using it. these functions have been removed in spidermon
key 19. api users should switch to functions which take utf-8 explicitly or handle their own string encoding and decoding. option to have the jsapi treat char strings as utf-8. syntax jsbool js_cstringsareutf8(void); void js_setcstringsareutf8(void); // added in spidermon
key 1.8 description by default, all c/c++ strings passed into the jsapi are treated as iso/iec 8859-1, also known as iso-latin-1. that is, each byte is treated as a unicode character, and there is no way to pass in a string containing characters beyond u+00ff. however, spidermon
key can optionally interpret these strings as utf-8. there are two ways to enable this: at compile time, by building spider...
...8 description by default, all c/c++ strings passed into the jsapi are treated as iso/iec 8859-1, also known as iso-latin-1. that is, each byte is treated as a unicode character, and there is no way to pass in a string containing characters beyond u+00ff. however, spidermon
key can optionally interpret these strings as utf-8. there are two ways to enable this: at compile time, by building spidermon
key with js_c_strings_are_utf8 defined; or at run time, by calling js_setcstringsareutf8 before the first call to js_newruntime. enabling this option also causes js_getstringbytes and js_encodecharacters to produce utf-8 strings instead of latin-1. js_cstringsareutf8 returns js_true if the javascript engine is configured (either at compile time or at run time) to interpret char strings as utf-8. see...
JS_DefineFunctions
name type description cx jscontext * the context in which to define functions. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
... name type description cx jscontext * the context in which to define functions. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
... js_threadsafe build, the caller must be in a request on this jscontext. obj js::handle<jsobject*> the object on which functions are to be defined. fs const jsfunctionspec * a null-terminated array of function specifications. each element of the array defines an individual function. behavior propertydefinitionbehavior see below. added in spidermon
key 38 enum propertydefinitionbehavior { defineallproperties, onlydefinelateproperties, dontdefinelateproperties }; name description defineallproperties define all properties regardless of their flags. onlydefinelateproperties define only properties which have a jsprop_define_late flag. dontdefinelateproperties define only propertie...
JS_GET_CLASS
obsolete since jsapi 13this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. retrieves the class associated with an object. this macro was removed in spidermon
key 1.8.8 when the signature of js_getclass() was changed to take only an object pointer. ...
...anged to take only an object pointer. syntax #ifdef js_threadsafe #define js_get_class(cx,obj) js_getclass(cx, obj) #else #define js_get_class(cx,obj) js_getclass(obj) #endif parameter type description cx jscontext * any context associated with the runtime in which obj exists. obj jsobject * object to get the class from. note: in spidermon
key versions prior to spidermon
key 1.8.8, js_getclass took both a jscontext* and a jsobject* as arguments in thread-safe builds, and in non-thread-safe builds it took only a jsobject*. the js_get_class(cx, obj) macro abstracted away this detail. newer versions have removed the context argument, so that the same signature is used regardless whether or not the build is thread-safe. description js_get...
...inter to the jsclass associated with a specified js object, obj. the application must treat the jsclass as read-only. to check the type of an object, use js_hasinstance instead. for a stricter, exact-match-only check, use js_instanceof or js_getinstanceprivate. the js_get_class abstracted away signature differences in the js_getclass method in threadsafe and non-threadsafe builds. as of spidermon
key 1.8.8 it no longer exists, because js_getclass's signature is the same in all build environments. see also bug 723517 ...
JS_GetGCParameter
adjust performance parameters related to garbage collection. syntax uint32_t js_getgcparameter(jsruntime *rt, jsgcparam
key key); void js_setgcparameter(jsruntime *rt, jsgcparam
key key, uint32_t value); uint32_t js_getgcparameterforthread(jscontext *cx, jsgcparam
key key); // added in spidermon
keysidebar 17 void js_setgcparameterforthread(jscontext *cx, jsgcparam
key key, uint32_t value); // added in spidermon
keysidebar 17 name type description rt jsruntime * the runtime to configure. cx jscontext * the context to configure. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext.
key jsgcparam
key specifies which garbage collection parameter to get or set. value uint32_t (js...
...ime * the runtime to configure. cx jscontext * the context to configure. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext.
key jsgcparam
key specifies which garbage collection parameter to get or set. value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
... jsgc_max_malloc_bytes / "maxmallocbytes" number of js_malloc bytes before last ditch gc. jsgc_max_nursery_bytes / "maxnurserybytes" maximum size the nursery may grow to, or 0 to disable generational gc. jsgc_min_nursery_bytes / "minnur...
JS_GetSecurityCallbacks
this article covers features introduced in spidermon
key 1.8.1 configure spidermon
key security hooks. syntax /* added in spidermon
key 17 */ void js_setsecuritycallbacks(jsruntime *rt, const jssecuritycallbacks *callbacks); const jssecuritycallbacks * js_getsecuritycallbacks(jsruntime *rt); /* obsolete since jsapi 13 */ jssecuritycallbacks * js_setcontextsecuritycallbacks(jscontext *cx, jssecuritycallbacks *callbacks); jssecuritycallbacks * js_getruntimesecuritycallbacks(jsruntime *rt); jssecuritycallbacks * js_setruntimesecuritycallbacks(jsruntime *rt, jssecuritycallbacks *callbacks); name type description rt jsruntime * a runtime to get/set the security callbacks. callbacks const jssecuritycallbacks * a pointer to the new ...
...s(jsruntime *rt, jssecuritycallbacks *callbacks); name type description rt jsruntime * a runtime to get/set the security callbacks. callbacks const jssecuritycallbacks * a pointer to the new callbacks for the runtime. ...
... description rt jsruntime * a runtime to get/set the security callbacks. callbacks const jssecuritycallbacks * a pointer to the new callbacks for the runtime. ...
JS_InstanceOf
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
... derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handle<jsobject*> object to test. clasp jsclass * class against which to test the object. args js::callargs * optional pointer to arguments. if non-null, report an error if obj is not of type clasp. added in spidermon
key 38 argv jsval * optional argument vector. if non-null, report an error if obj is not of type clasp. argv must be the argv argument passed from the engine to a jsnative callback, js_argv(cx, rv) in a jsfastnative callback, or null. obsolete since jsapi 32 description js_instanceof can be used to check whether an object obj is of a particular jsclass. to use it this way, pass...
...cular class is required. to use it this way, pass the arguments provided by the engine for args with js::callargsfromvp(argc, vp). when args is non-null, js_instanceof behaves as follows. if obj is of the given class, it returns true. otherwise, it returns false; it also reports a typeerror containing the function's name. note that js_instanceof is not the equivalent of the javascript instanceof
keyword, which examines constructor properties along the prototype chain. js_hasinstance is similar to instanceof. see also mxr id search for js_instanceof js_hasinstance js_getclass bug 959787 ...
JS_IsConstructing_PossiblyWithGivenThisObject
obsolete since jsapi 17this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermon
key 1.8.5 determine if a special this object was supplied to the constructor. syntax static jsbool js_isconstructing_possiblywithgiventhisobject(jscontext *cx, const jsval *vp, jsobject **maybethis); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. vp const jsval * maybethis jsobject ** description in the case of a constructor cal...
... type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. vp const jsval * maybethis jsobject ** description in the case of a constructor called from js_constructobject and js_initclass where the class has the jsclass_construct_prototype flag set, spidermon
key passes the constructor a non-standard this object. in such cases, the following example would provide the additional information of whether a special this was supplied. jsbool foo_native(jscontext *cx, unsigned int argc, jsval *vp) { jsobject *maybethis; if (js_isconstructing_possiblywithgiventhisobject(cx, vp, &maybethis)) { // native called as a constructor if (maybethis) // na...
...as supplied. jsbool foo_native(jscontext *cx, unsigned int argc, jsval *vp) { jsobject *maybethis; if (js_isconstructing_possiblywithgiventhisobject(cx, vp, &maybethis)) { // native called as a constructor if (maybethis) // native called as a constructor with maybethis as 'this' } else { // native called as function, maybethis is still uninitialized } } note: a spidermon
key embedding does not need to use this query unless the embedding uses js_constructobject(), js_initclass() and jsclass_construct_prototype as described above. see also bug 702507 ...
JS_IsStopIteration
description js_isstopiteration returns true if v is stopiteration, otherwise false. ...
... description js_isstopiteration returns true if v is stopiteration, otherwise false. ...
... description js_isstopiteration returns true if v is stopiteration, otherwise false. ...
JS_LookupProperty
leobject obj, const char *name, js::mutablehandlevalue vp); bool js_lookupucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::mutablehandlevalue vp); bool js_lookuppropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); // added in spidermon
key 1.8.1 bool js_lookupelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mutablehandlevalue vp); // ---- obsolete since spidermon
key 31 ---- bool js_lookuppropertywithflags(jscontext *cx, js::handleobject obj, const char *name, unsigned flags, js::mutablehandlevalue vp); bool js_lookuppropertywithflagsbyid(jscontext *cx, js::handleobject...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. ...
...ce between not finding any property and finding a property whose value is undefined. sorry. use js_getpropertydescriptorbyid instead. js_lookupucproperty is the unicode version of js_lookupproperty. flags js_lookuppropertywithflags and js_lookuppropertywithflagsbyid allow the caller to specify flags requesting special lookup behavior. when executing javascript code that uses properties, spidermon
key looks up properties using slightly different rules depending on the syntactic context in which the property name appears. (the javascript engine simply passes these flags through to the object when it calls the object's jsclass.resolve callback, so objects of a custom jsclass may interpret these flags however they like.) if flags is 0, js_lookuppropertywithflags uses the default lookup rules, the...
JS_NewFunction
create a new javascript function that is implemented in c/c++ as a jsnative. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. call jsnative native c/c++ implementation of this function. nargs unsigned number of arguments the function expects. flags unsigned pass j...
... parent js::handle<jsobject*> pointer to the parent object for this function. if this is null, a default parent object is used. obsolete since jsapi 39 name const char * name to assign to the new function. if this is null, the new function has no name. id js::handle<jsid> a pointer to jsid of the name to assign to the new function. added in spidermon
key 17 description js_newfunction creates a new javascript function implemented in c/c++. (to create a new function implemented in javascript, use js_compilefunction instead.) call is a c/c++ function pointer that the new function wraps. nargs is the number of arguments the function expects. if flags is jsfun_constructor, a created function can be called as a constructor. parent may be used ...
JS_PSGS
name type description name const char * the javascript name for the property. (or index, if jsprop_index is present in flags) getter jsnative pointer to the c/c++ implementation of the getter function. ...
... name type description name const char * the javascript name for the property. (or index, if jsprop_index is present in flags) getter jsnative pointer to the c/c++ implementation of the getter function. ...
... name type description name const char * the javascript name for the property. (or index, if jsprop_index is present in flags) getter jsnative pointer to the c/c++ implementation of the getter function. setter jsnative pointer to the c/c++ implementation of the setter function. ...
JS_SetNativeStackQuota
this article covers features introduced in spidermon
key 17 enable or disable checks to avoid overflowing the c stack. syntax void js_setnativestackquota(jsruntime *cx, size_t systemcodestacksize, size_t trustedscriptstacksize = 0, size_t untrustedscriptstacksize = 0); name type description rt jsruntime * the runtime. systemcodestacksize size_t the desired stack quota setting, in bytes. trustedscriptstacksize size_t the desired stack quota setting, in bytes for trusted script. if omitted, it uses the value of systemcodestacksize. added in spidermon
key 31 untrustedscriptstacksize size_t the desired stack quota setting, in bytes for untrusted script. if ...
...ck quota setting, in bytes. trustedscriptstacksize size_t the desired stack quota setting, in bytes for trusted script. if omitted, it uses the value of systemcodestacksize. added in spidermon
key 31 untrustedscriptstacksize size_t the desired stack quota setting, in bytes for untrusted script. if omitted, it uses the value of trustedscriptstacksize. added in spidermon
key 31 description js_setnativestackquota sets the size of the native stack that should not be exceeded. to disable stack size checking, pass 0. ...
...e of systemcodestacksize. added in spidermon
key 31 untrustedscriptstacksize size_t the desired stack quota setting, in bytes for untrusted script. if omitted, it uses the value of trustedscriptstacksize. added in spidermon
key 31 description js_setnativestackquota sets the size of the native stack that should not be exceeded. to disable stack size checking, pass 0. spidermon
key allows for a distinction between system code (such as gcs, which may incidentally be triggered by script but are not strictly performed on behalf of such script), trusted script (as determined by js_settrustedprincipals), and untrusted script. each kind of code may have a different stack quota, allowing embedders to keep higher-priority machinery running in the face of scripted stack exhaustion b...
JS_ShutDown
this method should be called after all other jsapi data has been properly cleaned up: every jsruntime created with js_newruntime must have been destroyed with js_destroyruntime, every jscontext created with js_newcontext must have been destroyed with js_destroycontext, and so on. ...
... and so on. calling this method before all other resources have been destroyed has undefined behavior. failure to call this method, at present, has no adverse effects other than leaking memory. this may not always be the case; it's recommended that all embedders call this method when all other jsapi operations have completed, to be future-proof. it is currently not possible to initialize spidermon
key multiple times (that is, calling js_init, then other jsapi methods, then js_shutdown in that order, then doing so again). this restriction may eventually be lifted. implementation note: this method has been used to clean up memory allocated by jsdtoa.cpp, memory allocated to implement date.now() on windows, and when the internationalization api is enabled, memory internally allocated by icu. exac...
...t order, then doing so again). this restriction may eventually be lifted. implementation note: this method has been used to clean up memory allocated by jsdtoa.cpp, memory allocated to implement date.now() on windows, and when the internationalization api is enabled, memory internally allocated by icu. exact details about what this method cleans up will vary depending upon the version of spidermon
key in use. see also mxr id search for js_shutdown js_init js_newruntime js_destroyruntime js_newcontext js_destroycontext ...
JS_THREADSAFE
ultiple threads in active requests, or (b) one thread doing gc and all requests suspended. when one thread calls js_gc or otherwise finds that garbage collection is necessary, it must wait for all other threads that are in requests to pause before garbage collection can occur. to keep this wait time to a minimum, applications must avoid long-running requests. the recommended technique in spidermon
key 1.8 and later is to periodically call js_yieldrequest from an operation callback. sharing data among threads "data can be marshaled across the process boundary through a process known as smuggling." --mr. bunny's guide to activex even in js_threadsafe builds, threads cannot safely share objects or strings. instead, data must be copied when it is sent from one thread to another. use js_writest...
...tructuredclone to transform data into a flat array of bytes that can be safely written to disk, sent to another process or even another machine, or just passed to another thread. then use js_readstructuredclone on the other side to turn the serialized data back into javascript objects, strings, and so on. sharing native functions and private data among threads in a js_threadsafe build, spidermon
key's internal data structures that represent javascript values are single-thread-only. in a debug build, this is enforced with assertions. however, spidermon
key does not protect the application's data structures. jsnatives and other callback functions can be called concurrently by multiple threads. multiple threads can end up accessing private data or c/c++ global variables at the same time. it is ...
...rformance cost of constantly creating and destroying contexts. (this is analogous to a database connection pool.) the application has a jscontext that it needs to use each time some event happens. but the event could happen on any thread. for such cases, use js_clearcontextthread and js_setcontextthread to transfer the context safely from one thread to another. further info note: spidermon
key internals: thread safety is mostly obsolete. ...
TPS Bookmark Lists
for example: var bookmarks_after_second_modify = { "menu": [ { uri: "http://www.getfirefox.com/", title: "get firefox" } ], "menu/foldera": [ { uri: "http://mozilla.com", title: "mozilla" }, ] }; this describes two bookmarks, one in the "menu" folder, and the other in the "folder1" subfolder of "menu". ...
...n 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 and modify actions. before: the title of the bookmark item expected to be found before this bookmark; used only in verify and modify actions. changes: an object containing new properties to be set for this bookmark when this asset list is used in a modif...
...found after this bookmark; used only in verify and modify actions. before: the title of the bookmark item expected to be found before this bookmark; used only in verify and modify actions. changes: an object containing new properties to be set for this bookmark when this asset list is used in a modify action. ...
compare-locales
mobile_android.toml, mail.toml and calendar.toml, and suite.toml. options to get a brief list of available options, use the --help flag: $ compare-locales --help the output the output of compare-locales shows the missing and obsolete strings in a pseudo-diff format. ...
...dar.toml, and suite.toml. options to get a brief list of available options, use the --help flag: $ compare-locales --help the output the output of compare-locales shows the missing and obsolete strings in a pseudo-diff format. ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.command
key3 +fullzoomreducecmd.command
key2 +fullzoomresetcmd.command
key2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.access
key -importfromfile.label +importfromhtmlfile.access
key +importfromhtmlfile.label you can assume changed strings when you see entities removed and added with a similar name. the file names wi...
...th a similar name. the file names will be shown in a hierarchical form, so in the example above, your files are browser.dtd in ab-cd/browser/chrome/browser and migration.dtd in another directory level deeper. the output closes with a summary, giving the total counts of missing and obsolete strings and words, and some statistics on how many strings are changed or not, excluding access- and command
keys. that gives localizers an idea on how thorough the localization is. this number won't reach 100% in general, mid 80s should be the target, though. pass --json to get just the summary in json format. ...
Mork
nge the scope of alias definitions (the '(a=c)' that you can see in files). meta-tables are used to establish some facts about the table as well as the default row scope. meta-rows do not appear to be used at all, although the parser seems to consider setting the charset, row scope, and atom scope. some notes on further terminology: when referring to cells or aliases, the first component is the
key and the second component is the value. expanding refers to taking a '^' hex buffer and replacing it with the alias value for the hex
key (explained below). a mid has two components: the id itself, to the left of the colon, and the scope, to the right of the colon. there are two types of meta-rows, those of rows and those of tables. however, since the meta-row of a row never appears to be used, i ...
...and the scope, to the right of the colon. there are two types of meta-rows, those of rows and those of tables. however, since the meta-row of a row never appears to be used, i will generally use 'meta-row' to refer to the meta-row of a table, unless otherwise qualified. dictionaries a dictionary establishes a series of aliases. if inside the meta-dictionary, the only cell we care about is if the
key is 'a' (for atom scope). this value is used to establish which dictionary the aliases are added to. most files will have just two dictionaries: the column scope dictionary ('c') and the value scope dictionary ('v', the default). the
keys are hexadecimal numbers starting at 0x80, because the values less than 0x80 are theoretically their representative ascii values. tables a table is set of rows, p...
...cally an atomic transaction à la sql's transactions. the equivalent of begin transaction is the '@$${hex{@' identify (the hex represents the id). commit transaction is '@$$}hex}@' and rollback transaction '@$$}~~}'. a brief survey of mozilla code implies that it an aborted transaction is only used if mork loses internal consistency. cells and aliases and mids cells are the core of mork: they are
key-value pairs of columns and the particular row's values. you can either manually refer to the
key or use an alias to the
key, and you can either manually refer to the value or use an alias to the value. the scope of the mid for
keys defaults to the column scope, 'c', and the scope for values defaults to the value scope, 'v'. these defaults are used if the scope is not specified (by having the ':' ...
Places Developer Guide
modified int64 getfolderidforitem(aitemid) - returns the id of the folder containing the given item. string getitemguid(aitemid) obsolete since gecko 14.0 - returns a globally unique identifier for the item. this is mainly for use by extensions that sync bookmark data between different profiles. for bookmarks: nsiuri getbookmarkuri(aitemid) - returns the uri of a bookmark item string get
keywordforbookmark(aitemid) - returns a bookmark's
keyword, or null for folders: int64 getchildfolder(afolderid, asubfoldertitle) - returns the id of the first subfolder matching the given title. int64 getidforitemat(afolderid, aposition) - returns the id of the item at the given position (throws if there's no item there). bool getfolderreadonly(afolderid) accessing folder contents queries i...
...st modified, in microseconds. setitemguid(aitemid, aguid) obsolete since gecko 14.0 - returns a globally unique identifier for the item. this is mainly for use by extensions that sync bookmark data between different profiles. moveitem (afolderid, anewparentid, aindex) - move an item from one folder to another. for bookmarks: changebookmarkuri(aitemid, auri) - change a bookmark's uri. set
keywordforbookmark(aitemid, a
keyword) - set the
keyword for a bookmark. deleting bookmark items with the bookmarks service: removeitem(aitemid) - works for all types removefolder(aitemid) - works for folders and livemarks removefolderchildren(aitemid) - works for folders and livemarks observing bookmark events the nsinavbookmarkobserver interface is used for observing bookmarks activity such...
...orting: importhtmlfromfile (nsilocalfile afile, boolean aisinitialimport) - this imports all the bookmarks in the specified file into the current bookmarks collection. if aisinitialimport is true, all pre-existing bookmarks in the toolbar and menu folders will be deleted. note: the method importhtmlfromfiletofolder() method was removed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11). exporting: exporthtmltofile (nsilocalfile afile) - this exports all bookmarks in the toolbar, menu and unfiled bookmarks folders into the specified file. backup/restore the new bookmarks system uses the json format for storing backups of users' bookmarks. the apis are available via the placesutils api in the utils.js javascript module. var ci = components.interfaces; var cc = component...
Querying Places
cending = 1 const unsigned short sort_by_title_descending = 2 const unsigned short sort_by_date_ascending = 3 const unsigned short sort_by_date_descending = 4 const unsigned short sort_by_uri_ascending = 5 const unsigned short sort_by_uri_descending = 6 const unsigned short sort_by_visitcount_ascending = 7 const unsigned short sort_by_visitcount_descending = 8 const unsigned short sort_by_
keyword_ascending = 9 const unsigned short sort_by_
keyword_descending = 10 const unsigned short sort_by_dateadded_ascending = 11 const unsigned short sort_by_dateadded_descending = 12 const unsigned short sort_by_lastmodified_ascending = 13 const unsigned short sort_by_lastmodified_descending = 14 const unsigned short sort_by_annotation_ascending = 15 const unsigned short sort_by_annotation_de...
...this is bug 320332. bookmark queries there is a quick-start for doing simple bookmark quer...
..._now; query2.begintime = -24 * 60 * 60 * 1000000; // 24 hours ago in microseconds query2.endtimereference = query2.time_relative_now; query2.endtime = 0; // now query2.domain = "mozilla.org"; var result = placesutils.history.executequeries([query1, query2], 2, options); note:
keyword searching doesn't work correctly across or queries. the current behavior does the normal query and then selects
keywords from the first query and filters all the results. (in other words, the
keywords from the first query are anded with all queries.)
keywords from subsequent query objects are ignored. this is bug 320332. bookmark queries there is a quick-start for doing simple bookmark queries in retrieving part of the bookmarks tree. the contents of bookmark folders can be retrieved by setting the "folders...
Building the WebLock UI
re defined. at the top of all xul documents, an xml declaration is followed by the root element for the document, which is usually <window/> but for dialog boxes can also be the element <dialog/>. the "shell" for the xul file, then, looks like this: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="weblock_ui" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" title="web lock manager" persist="screenx screeny" screenx="24" screeny="24"> </dialog> note that this part of the xul file also contains a stylesheet declaration, which imports css rules and applies them to particular parts of the interface. in gecko, css is used to do virtually all of the presentation of the xul interface - its colo...
...the <vbox/>, which orients its children vertically). notice also that when it's clicked, the button executes a javascript function called addthissite(), which we've already defined in the weblock.js file in client code overview above. ...
...panel/> element that gets overlaid into the main browser, along with some javascript and some css to control the behavior and appearance of the element, respectively. ...
mozIVisitInfoCallback
void handleerror( in nsresult aresultcode, in moziplaceinfo aplaceinfo ); parameters aresultcode nsresult indicating the reason ...
...change when passed to moziasynchistory.updateplaces(). if more than one operation is done for a given visit, this method is only called once (for all changes at once). void handleresult( in moziplaceinfo aplaceinfo ); parameters aplaceinfo the information that was entered into the database. oncomplete() obsolete since gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5) called for each visit added, title change, or guid change when passed to moziasynchistory.updateplaces(). void oncomplete( in nsresult aresultcode, in moziplaceinfo aplaceinfo ); parameters aresultcode nsresult of the change indicating success or failure reason. aplaceinfo the information that was being entered into the database. notes this method was replaced...
...eplaces(). void oncomplete( in nsresult aresultcode, in moziplaceinfo aplaceinfo ); parameters aresultcode nsresult of the change indicating success or failure reason. aplaceinfo the information that was being entered into the database. notes this method was replaced by the separate handleresult() and handleerror() methods in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5). see also mozivisitinfo moziasynchistory ...
nsIAccessible
ption() and nsiaccessible.doaction(). descriptions nsiaccessible.description and nsiaccessible.help provides additional text information about accessible. attributes many accessibles exposes attributes to provide more details that cannot be fit into existing api methods, please refer to attributes documentation for more information. you can use nsiaccessible.attributes to get a map of attributes.
keyboard shortcuts some actions on accessibles can be performed by
keyboard shortcuts. following methods are used to get them nsiaccessible.default
keybinding(), nsiaccessible.get
keybindings(), nsiaccessible.
keyboardshortcut. size and screen position you can use nsiaccessible.getbounds() to get size and coordinates of the accessible. layout oriented methods nsiaccessible.getchildatpoint() to get ch...
...you can use nsiaccessible.getbounds() to get size and coordinates of the accessible. layout oriented methods nsiaccessible.getchildatpoint() to get child accessible from point nsiaccessible.getaccessibletoleft(), nsiaccessible.getaccessibletoright(), nsiaccessible.getaccessibleabove() or nsiaccessible.getaccessiblebelow() to get left, right, top or below placed accessible methods get
keybindings provides array of localized string of global
keyboard accelerator for the given action index supported by accessible. getstate provides a bit fields of accessible states which describe boolean properties of accessible. groupposition this method returns grouping information. used for tree items, list items, tab panel labels, radio buttons, etc. also ...
...if this accessible does not have a parent. name accessible name -- the main text equivalent for this node. value accessible value -- a number or a secondary text equivalent for this node. widgets that use role attribute can force a value using the valuenow attribute. description accessible description -- long text associated with this node.
keyboardshortcut provides localized string of access
key name, such as alt+d. the modifier may be affected by user and platform preferences. usually alt+letter, or just the letter alone for menu items. default
keybinding provides localized string of global
keyboard accelerator for default action, such as ctrl+o for open file. role enumerated accessible role for th...
nsIAccessibleDocument
accessible/public/nsiaccessibledocument.idlscriptable an interface for in-process accessibility clients that wish to retrieve information about a document. when accessibility is turned on in gecko, there is an nsiaccessibledocument for each document whether it is xul, html or whatever. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) you can queryinterface to nsiaccessibledocument from the nsiaccessible or nsiaccessnode for the root node of a document. you can also get one from nsiaccessnode.getaccessibledocument() or nsiaccessibleevent.getaccessibledocument() method overview nsiaccessible getaccessibleinparentchain(in nsidomnode adomnode, in boolean acancreate); obsolete since gecko 2.0 nsiaccessnode getcac...
...ow nsidomwindow the nsidomwindow that the document resides in. read only. windowhandle voidptr the window handle for the os window the document is being displayed in. for example, in windows you can static cast it to an hwnd. read only. native code only! methods getaccessibleinparentchain() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) returns the first accessible parent of a dom node. guaranteed not to return null if the dom node is in a document. nsiaccessible getaccessibleinparentchain( in nsidomnode adomnode, in boolean acancreate ); parameters adomnode the dom node we need an accessible for. acancreate if true, this method can create a new accessible. otherwise, it will return the first cached a...
...arameters adomnode the dom node we need an accessible for. acancreate if true, this method can create a new accessible. otherwise, it will return the first cached accessible in the parent chain. return value the first nsiaccessible found by crawling up the dom node to the document root. native code only!getcachedaccessnode obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the access node cached by this document. nsiaccessnode getcachedaccessnode( in voidptr auniqueid ); parameters auniqueid the unique id used to cache the node. this matches up with the uniqueid attribute on nsiaccessnode. ...
nsIAccessibleEvent
accessible/public/nsiaccessibleevent.idlscriptable an interface for accessibility events listened to by in-process accessibility clients, which can be used to find out how to get accessibility and dom interfaces for the event and its target. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) attributes attribute type description accessible nsiaccessible the nsiaccessible associated with the event. may return null if no accessible is available. read only. accessibledocument nsiaccessibledocument the nsiaccessibledocument that the event target nsiaccessible resides in. this can be used to get the dom window, the dom document and the window handler, among other things. read only. domnode nsidomnode the nsidomnode associated ...
...8002 0x0001 an object has been created. event_hide 0x8003 0x0002 an object has been destroyed. event_reorder 0x8004 0x005c 0x0003 an object's children have changed. event_active_decendent_changed 0x0007 0x0004 the active descendant of a component has changed. the active descendant is used in objects with transient children. event_focus 0x8005 0x0008 0x0005 an object has received the
keyboard focus. event_state_change 0x800a 0x0009 0x0006 an object's state has changed. event_location_change 0x800b 0x000a 0x0007 an object has changed location, shape, or size. event_name_change 0x800c 0x000b 0x0008 an object's name property has changed. event_description_change 0x000c 0x0009 an object's description property has changed. event_value_change 0x800e 0x000d 0x000a an object'...
...an object's description property has changed. event_value_change 0x800e 0x000d 0x000a an object's value property has changed. event_help_change 0x000e 0x000b an object's help has changed. event_defaction_change 0x000f 0x000c an object's default action has changed. event_action_change 0x0010 0x000d an object's action has changed. event_accelerator_change 0x0011 0x000e an object's
keyboard shortcut has changed. event_selection 0x8006 0x0012 0x000f the selection within a container object has changed. event_selection_add 0x8007 0x0013 0x0010 an item within a container object has been added to the selection. event_selection_remove 0x8008 0x0014 0x0011 an item within a container object has been removed from the selection. event_selection_within 0x8009 0x0015 0x0012 numerou...
nsIAccessibleRole
role_titlebar 1 represents a title or caption bar for a window. it is used by msaa only, supported automatically by ms windows. ...
... xul:menulist, role="combobox". role_droplist 47 represents the calendar control. it is used for date xforms:input. role_progressbar 48 represents a progress bar, dynamically showing the user the percent complete of an operation in progress. it is used for xul:progressmeter, role="progressbar". role_dial 49 represents a dial or knob whose purpose is to allow a user to set a value. role_hot
keyfield 50 represents a hot-
key field that allows the user to enter a combination or sequence of
keystrokes. role_slider 51 represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values. it is used by xul:scale, role="slider", xforms:range. role_spinbutton 52 represents a spin box, which is a control that allows the user to increment or dec...
...e of the use of this role is to represent an html:div. role_redundant_object 108 an object which is redundant with another object in the accessible hierarchy. ats typically ignore objects with this role. role_form 109 a container of form controls. an example of the use of this role is to represent an html:form. role_ime 110 an object which is used to allow input of characters not found on a
keyboard, such as the input of chinese characters on a western
keyboard. role_app_root 111 role_parent_menuitem 112 represents a menu item, which is an entry in a menu that a user can choose to display another menu. role_calendar 113 a calendar that allows the user to select a date. role_combobox_list 114 a list of items that is shown by combobox. role_combobox_option 115 a item of list t...
nsIClipboard
widget/nsiclipboard.idlscriptable this interface supports basic clipboard operations such as: setting, retrieving, emptying, matching and supporting clipboard data. ...
... the kselectionclipboard is peculiar to the x windows system, where it refers to the primary selection, which is the one that simple mouse selection and middle-click paste operations are using. constant value description kselectionclipboard 0 clipboard for selection. kglobalclipboard 1 clipboard for global use. kfindclipboard ...
...board() this method empties the clipboard and notifies the clipboard owner. it empties the "logical" clipboard. it does not clear the native clipboard. void emptyclipboard( in long awhichclipboard ); parameters awhichclipboard specifies the clipboard to which this operation applies. forcedatatoclipboard() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) some platforms support deferred notification for putting data on the clipboard this method forces the data onto the clipboard in its various formats this may be used if the application going away. void forcedatatoclipboard( in long awhichclipboard ); parameters awhichclipboard specifies the clipboard to which this operation applies. getdata() this method retrieves data ...
nsIDNSService
netwerk/dns/nsidnsservice.idlscriptable provides domain name resolution service. inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) implemented by: @mozilla.org/network/dns-service;1. to access the service, use: var dnsservice = components.classes["@mozilla.org/network/dns-service;1"] .createinstance(components.interfaces.nsidnsservice); note: starting in gecko 7.0, the "happy eyeballs" strategy is used to reduce lengthy timeouts when attempting backup connections during attempts to connect from clients that have broken ipv6 connectivity. this is done by disabling ipv6 on backup connections. method overview nsicancelable asyncresolve(in autf8string ahostname, in unsigned long aflags, in nsidnslist...
... if not null, this parameter specifies the nsieventtarget of the thread on which the listener's onlookupcomplete should be called. if this parameter is null, then onlookupcomplete will be called on an unspecified thread (possibly recursively). return value an object that can be used to cancel the host lookup. init() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) called to initialize the dns service. void init(); parameters none. resolve() called to synchronously resolve a host name. warning this method may block the calling thread for a long period of time. it is extremely unwise to call this function on the user interface thread of an application. nsidnsrecord resolve( in autf8string ahostname, in unsigned long aflags ); parameters ...
...n unsigned long aflags ); parameters ahostname the host name or ip-address-literal to resolve. aflags a bitwise or of the resolve flag constants. return value dns record corresponding to the given host name. exceptions thrown ns_error_unknown_host if host could not be resolved. shutdown() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) called to shutdown the dns service. any pending asynchronous requests will be canceled, and the local cache of dns records will be cleared. note: the operating system may still have its own cache of dns records, which would be unaffected by this method. void shutdown(); parameters none. example let dnsservice = components.classes["@mozilla.org/network/dns-service;1"] ...
nsIDOMMozTouchEvent
or working with events from touch screens. this differs from tracking mouse events in that touch events can be generated independently for each finger touching the screen. this lets you process multi-finger touch gestures and actions. dom/interfaces/events/nsidommoztouchevent.idlscriptable please add a summary to this article. ...
... in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrl
keyarg, in boolean alt
keyarg, in boolean shift
keyarg, in boolean meta
keyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in unsigned long streamidarg); attributes attribute type description streamid unsigned long a unique identifi...
...ove events between the corresponding moztouchdown and moztouchup events. methods initmoztouchevent() initializes the touch event. void initsimplegestureevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrl
keyarg, in boolean alt
keyarg, in boolean shift
keyarg, in boolean meta
keyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in unsigned long streamidarg ); parameters streamidarg the value to assign to the streamid attribute; this uniquely identifies the finger generating the touch events. see also mouse gesture events touch events event ...
nsIDocShell
do not create an instance directly. instead, retrieve an nsidocshell from a browser or other document container element. note that out-of-process browsers do not have an nsidocshell; instead you can access the nsidocshell object from a frame script. ...
...forwards 0 used by getdocshellenumerator()to determine the direction of the enumeration. enumerate_backwards 1 used by getdocshellenumerator()to determine the direction of the enumeration. app_type_unknown 0 this is the default value of the apptype attribute. app_type_mail 1 this is the value of the apptype attribute used by thunderbird and seamon
key to indicate that email messages are displayed in this window. app_type_editor 2 this is the value of the apptype attribute used by thunderbird and seamon
key to indicate that email messages or web pages are composed in this window. busy_flags_none 0 returned by the busyflags attribute when the nsidocshell is not loading a document. busy_flags_busy 1 ret...
...d content viewer and all child docshells that they are about to be hidden. if isunload is true, then the document is being unloaded as well. void firepagehidenotification( in boolean isunload ); parameters isunload if true, fire the unload event in addition to the pagehide event. native code only!fireunloadnotification obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. notify the associated content viewer and all child docshells that they are about to be unloaded. void fireunloadnotification(); parameters none. getdocshellenumerator() get an enumerator over this docshell and its children. nsisimpleenume...
nsIDownloadProgressListener
/toolkit/components/downloads/nsidownloadprogresslistener.idlscriptable this interface gives applications and extensions a way to monitor the status of downloads being processed by the download manager. inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) to use simply implement this interface in your code, then call nsidownloadmanager.addlistener() to start listening. when you no longer need to listen to the download manager's state, call nsidownloadmanager.removelistener() to stop listening. as the states of downloads change, the methods described here are called by the download manager so your code can take whatever steps it needs to. this interface works very similarly to the nsiwebprogress interface. it is important to ...
...wnload adownload ); parameters astate the previous state of the download. see nsidownloadmanager.constants for a list of possible values. adownload the nsidownload object representing the file whose download status has changed. you can get the new state of the download from this object. onlocationchange() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) void onlocationchange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, in nsidownload adownload ); parameters awebprogress the nsiwebprogress instance used by the download manager to monitor downloads. arequest the nsichannel that changed state. this parameter will not be null. alocation the uri of the file being downloaded. adownload...
...value is a combination of one of the nsiwebprogresslistener.state_transition_flags. astatus the new state information for the download. see nsiwebprogresslistener.onstatechange() for details. this can also be one of the nsidownloadmanager.constants. adownload the download whose state changed. onstatuschange() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) called when the status of a download request has changed. the received status message is intended to be displayed visibly to the user. note: if source and destination are identical, which is possible in case of file urls or chrome urls, this is called even in gecko 1.9.2. in such a situation no further event handlers are called and the stop flag is set; if there are more pending ...
nsIHttpChannel
visitor avisitor ); parameters avisitor an nsihttpheadervisitor instance allowing to visit all original response headers. visitrequestheaders() call this method to visit all request headers. warning: calling setrequestheader(), setreferrerwithpolicy() or setemptyrequestheader() while visiting request headers has undefined behavior until gecko 47 (firefox 47.0 / thunderbird 47.0 / seamon
key 2.44). starting from gecko 48 (firefox 48.0 / thunderbird 48.0 / seamon
key 2.45) they will return a ns_error_failure. void visitrequestheaders( in nsihttpheadervisitor avisitor ); parameters avisitor the header visitor instance. visitresponseheaders() call this method to visit all response headers. warning: calling setresponseheader() while visiting response headers has undefined b...
... void visitresponseheaders( in nsihttpheadervisitor avisitor ); parameters avisitor the header visitor instance. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()). ...
...eaders( in nsihttpheadervisitor avisitor ); parameters avisitor the header visitor instance. visitresponseheaders() call this method to visit all response headers. warning: calling setresponseheader() while visiting response headers has undefined behavior until gecko 48 (firefox 48.0 / thunderbird 48.0 / seamon
key 2.45). starting from gecko 49 (firefox 49.0 / thunderbird 49.0 / seamon
key 2.46) it will return a ns_error_failure. void visitresponseheaders( in nsihttpheadervisitor avisitor ); parameters avisitor the header visitor instance. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()). note: starting from firefox 49, empty headers will be returned in case the preference network.http.keep_empty_r...
nsIINIParserWriter
nsiiniparserwriter xpcom/ds/nsiiniparser.idlscriptable allows writing to an ini-format configuration file. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamon
key 2.10) this interface provides methods that allow writing to ini-format configuration files. ini files contain zero or more sections, denoted by a name in square brackets, followed by zero or more lines of text with a property name on the left, then an equals sign ("="), then the value of the property. to create an nsiiniparserwriter object, you use the nsiiniparserfactory interface to create a parser, then nsisupports.queryinterface() that to get an nsiiniparserwriter, like this: let writer = components.classes["@mozi...
...rty within a given section; the section is created if it hasn't been yet. the sections are built in memory before the text of the ini file is generated, so you can add properties to the file in any order, regardless of section. when you're done and ready to write the ini file to disk, call the writefile() method. method overview void setstring(in autf8string asection, in autf8string a
key, in autf8string avalue); void writefile([optional] in nsifile ainifile, [optional] in unsigned long aflags); constants file writing constants these constants are specified when calling writefile(), in order to change its behavior. constant value description write_utf16 0x1 windows and the nsis installer code sometimes expect ini files to be in utf-...
...efile(), in order to change its behavior. constant value description write_utf16 0x1 windows and the nsis installer code sometimes expect ini files to be in utf-16 encoding. on windows only, this flag to writefile() can be used to change the encoding from its default utf-8. methods setstring() set the value of a property string for a particular section and
key. void setstring( in autf8string asection, in autf8string a
key, in autf8string avalue ); parameters asection the name of the section into which to place the property. a
key the name of the property for which the value is to be set. avalue the value to assign to the property. writefile() write to the ini file. void writefile( in nsifile ainifile, optional in unsigned long af...
nsIJSON
however, you should use native json instead if at all possible. ...
... note: this method is more flexible than it should be, and accepts some not-correctly-structured json. for that reason, it has been removed in gecko 7.0. jsobject decode( in astring str ); parameters str the json string to decode. return value the original javascript object, reconstructed from the ...
...efromstream( in nsiinputstream stream, in long contentlength ); parameters stream the nsiinputstream from which to read the json string. contentlength the length of the json string to read. return value a jsobject which is the original javascript object, reconstructed from the json string. encode() obsolete since gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) encodes a javascript object into a json string. astring encode( in jsobject value ); parameters value the javascript object to encode. return value a json string representing the object. encodefromjsval() note: this method may only be used from native code, and provides a way to encode a jsval to a json string for use in your native code. astring encodefromjsval(...
nsIMemoryReporter
xpcom/base/nsimemoryreporter.idlscriptable reports memory usage information for a single area of the software. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5) any piece of code that wishes to allow its memory use to be monitored may create an nsimemoryreporter object and then register it by calling nsimemoryreportermanager.registerreporter(). once that has been done, the reporter will be found by any client accessing the enumerator returned by nsimemoryreportermanager.enumeratereporters(). this includes the about:memory page. note: this interface is undergoing heavy development, and is subject to rapid changes. attributes attribute type description ...
... this interface is undergoing heavy development, and is subject to rapid changes. attributes attribute type description amount print64 the numeric value reported by the memory reporter, specified in the units indicated by the units attribute. read only. note: this attribute was called memoryused prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4), and its type was long long. description autf8string a human-readable description of this memory usage report. read only. kind print32 the memory kind, one of the memory reporter kind constants below. read only. path autf8string the path that this memory usage should be reported under. paths are delimited with '/' characters to allow a hierar...
...ap. deprecated since gecko 8.0 kind_nonheap 0 allocated directly by os calls e.g. mmap, virtualalloc, vm_allocate etc. kind_heap 1 allocated by the heap allocator, e.g. malloc, new etc. kind_other 2 an allocation that does not fit into another kind category. unit type constants requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) the amount reported by a memory reporter may use one of the following units. constant value description units_bytes 0 the amount is specified as a number of bytes. units_count 1 the amount is an instantaneous count of things currently in existence. for example, the number of tabs currently open. units_count_cumulative 2 the amount ...
nsIMsgIncomingServer
nsimsgincomingserver mailnews/base/public/nsimsgincomingserver.idlscriptable ??? add brief description of interface ??? ...
...uppage boolean dobiff boolean downloadmessagesatstartup boolean read only. downloadonbiff boolean downloadsettings nsimsgdownloadsettings emptytrashonexit boolean filterscope nsmsgsearchscopevalue read only. hostname acstring hostname of the server. incomingduplicateaction long isdeferredto boolean read only. issecure boolean issecureserver boolean read only.
key acstring internal pref
key - guaranteed to be unique across all servers. limitofflinemessagesize boolean localpath nsilocalfile localstoretype acstring the schema for the local mail store, such as "mailbox", "imap", or "news" used to construct uris. read only. loginatstartup boolean logonfallback boolean maxmessagesize long offlinesupportlevel long password acstring ...
...our filterlist if it doesn't exist. if it does, it will enable it. this is not used by news filters (yet). void configuretemporaryfilters( in nsimsgfilterlist filterlist ); parameters filterlist missing description exceptions thrown missing exception missing description configuretemporaryreturnreceiptsfilter() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) if we have set up to filter return receipts into our sent folder, this utility method creates a filter to do that, and adds it to our filterlist if it doesn't exist. if it does, it will enable it. if the user changes their prefs, to leave the return receipt in the inbox, this will disable the existing return receipts filter, if it exists. void configuretemporaryreturnreceiptsfilter(...
nsINavHistoryObserver
toolkit/components/places/nsinavhistoryservice.idlscriptable this interface is similar to the nsirdfobserver class, but is used to observe interactions on the global history. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamon
key 2.18) warning: if you are in the middle of a batch transaction, there may be a database transaction active. you can still access the database in this situation but be careful (of what?). method overview void onbeforedeleteuri(in nsiuri auri, in acstring aguid); obsolete since gecko 21.0 void onbeginupdatebatch(); void onclearhistory(); void ondeleteuri(in nsiuri auri, in acstring aguid); void ondeletevisits(in...
... avisitid, in prtime atime, in long long asessionid, in long long areferringid, in unsigned long atransitiontype, in acstring aguid, out unsigned long aadded); constants constant value description attribute_favicon 3 the page's favicon changed. methods onbeforedeleteuri() obsolete since gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamon
key 2.18) note: this method was removed in gecko 21.0 as part of bug 826409. the specified page and all its visits are about to be deleted. note: the page does not necessarily have to have ever existed for this function to be called. delete notifications aren't quite 100% accurate. batch delete operations take place in two steps; the notifications come first, followed by a bulk delete. ...
...eeds to be clarified; what are typed and hidden? void onpagechanged( in nsiuri auri, in unsigned long awhat, in astring avalue ); parameters auri the uri of the page on which an attribute changed. awhat the attribute whose value changed. avalue the attribute's new value. onpageexpired() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) note: this method was removed in gecko 2.0. use ondeletevisits() instead. called when a history entry expires. this notification is sent to indicate that a specific visit has expired, and includes the time of that visit. when the last visit for a history entry expires, the history entry itself is deleted and the awholeentry parameter is true. if your code only cares about whole en...
nsIPrincipal
caps/nsiprincipal.idlscriptable provides the interface to a principal, which represents a security context. on the web, for example, a typical principal is comprised of an url scheme, host, and port. inherits from: nsiserializable last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) for details on principals, how they work, and how to get the appropriate one, see security check basics. method overview short canenablecapability(in string capability); native code only! void checkmayload(in nsiuri uri, in boolean report); void disablecapability(in string capability, inout voidptr annotation); native code only! void enablecapability(in string capability, inout voidptr annotation); native code only! boolean equals(in n...
...heckmayload() checks whether this principal is allowed to load the network resource located at the given uri under the same-origin policy. this means that codebase principals are only allowed to load resources from the same domain, the system principal is allowed to load anything, and null principals are not allowed to load anything. note: prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1), this was not available to scripts. if the load is allowed this function does nothing. if the load is not allowed the function throws ns_error_dom_bad_uri. note: other policies might override this, such as the access-control specification. note: the 'domain' attribute has no effect on the behaviour of this function. void checkmayload( in nsiuri uri, in boolean report ); parameters ...
...ble missing description exceptions thrown missing exception missing description subsumes() returns whether the other principal is equal to or weaker than this principal. principals are equal if they are the same object, they have the same origin, or they have the same certificate id. a principal always subsumes itself. note: prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1), this was not available to scripts. the system principal subsumes itself and all other principals. a null principal (corresponding to an unknown, hence assumed minimally privileged, security context) is not equal to any other principal (including other null principals), and therefore does not subsume anything but itself. both codebase and certificate principals are subsumed by the system pri...
nsIPromptService
embedding/components/windowwatcher/public/nsipromptservice.idlscriptable this interface can be used to display simple dialogs. its methods should be used in privileged code instead of dom window.alert, window.confirm, and other similar functions. inherits from: nsisupports last changed in gecko 1.7.5 you can define access
keys (or
keyboard shortcuts) for buttons by including an ampersand ("&") in front of the character that should be the access
key for that button. if you need to include an ampersand in the button's text, use two of them, like this: "&&". note: some of these interface methods use out and inout parameters. in c++, out parameters are pointers. for javascript, they are extra work, as you can't use an out parameter directly. you need to wrap them in a temporary ob...
...ws and os/2, the buttons are centred in the order 0, 2, 1. constant value description button_pos_0 1 this is usually the button used to confirm the prompt. it typically has the label "ok", "yes", or "save". button_pos_1 256 this is the button used to cancel the prompt. it typically has the label "cancel" or "no". it is equivalent to pressing the escape
key (or cmd+. on the mac), or closing the window through the os controls. button_pos_2 65536 this button can be used to give the user a choice of options, but still allowing the user to cancel the prompt. for instance, it might have the label "don't save". button title flags these flags are used along with button position flags to set the labels of buttons in the prompt. ...
...osely, as the intent is to ensure that the user does not click through a security dialog too quickly. strictly speaking, the implementation could choose to ignore this flag. a delay can be useful not only to give the user more time to think before acting, but also as a countermeasure against malicious web sites that intentionally create a race condition whereby the user intends to click or type a
key responding, for example, to the web site's prompt but the security dialog pops up unexpectedly and its button is unintentionally activated. constant value description button_delay_enable 67108864 standard buttons flags constant value description std_ok_cancel_buttons 513 selects the standard set of ok/cancel buttons. (bu...
nsISelectionController
content/base/public/nsiselectioncontroller.idlscriptable please add a summary to this article. ...
... 1<<2 if set, only the first ancestor will be scrolled into view. scroll_center_vertically 1<<4 if set, the specified location will be scrolled to the center of the view. methods native code only!characterextendforbackspace will extend the selection one character cell backward in the document. this method is used internally for handling backspace
key only when we're after utf-16 surrogates. void characterextendforbackspace(); parameters none. native code only!characterextendfordelete will extend the selection one character cell forward in the document. this method is used internally for handling delete
key. void characterextendfordelete(); parameters none. charactermove() will move the selection one character forward/backward in the docume...
... in selections. by default the caret is hidden unless the selection is collapsed. use this function to show the caret even in selections. void setcaretvisibilityduringselection( in boolean visibility ); parameters visibility pr_true to show the caret in selections. pr_false to hide. setcaretwidth() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) set the carets width. can be called any time. void setcaretwidth( in short pixels ); parameters pixels the width to set the caret to in pixels. setdisplayselection() will set the display mode for the selection. void setdisplayselection( in short toggle ); parameters toggle off, on, disabled. native code only!wordextendfordelete will extend the ...
nsISmsRequestManager
nsismsrequestmanager dom/sms/interfaces/nsismsrequestmanager.idlscriptable used to manage sms related requests and notifications for the websms api 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamon
key 2.12) implemented by: @mozilla.org/sms/smsrequestmanager;1. to create an instance, use: var smsrequestmanager = components.classes["@mozilla.org/sms/smsrequestmanager;1"] .createinstance(components.interfaces.nsismsrequestmanager); method overview long addrequest(in nsidommozsmsrequest arequest); long createrequest(in nsidommozsmsmanager amanager, out nsidommozsmsrequest arequest); void notifycreatemessagelist(in long arequestid, in long alistid, in n...
...zsmsmessage amessage ); parameters arequestid a number representing the id of the request. amessage an smsmessage. notifygotsms() void notifygotsms( in long arequestid, in nsidommozsmsmessage amessage ); parameters arequestid a number representing the id of the request. amessage an smsmessage. ...
...aerror a number with an error code. see constants. ...
nsIStringBundleOverride
a.org/intl/stringbundle/text-override;1"] .getservice(components.interfaces.nsistringbundleoverride); note: you should never need to use this service directly. instead, the string bundle service will automatically try to load this service. if there is no custom-strings.txt file then the service will fail to load. method overview nsisimpleenumerator enumerate
keysinbundle(in autf8string url); astring getstringfromname(in autf8string url, in acstring
key); methods enumerate
keysinbundle() get all override
keys for a given string bundle. nsisimpleenumerator enumerate
keysinbundle( in autf8string url ); parameters url the url of the original string bundle whose
keys are to be overridden. return value an enumeration of nsipropertyelement objects for t...
...bundle(in autf8string url); astring getstringfromname(in autf8string url, in acstring
key); methods enumerate
keysinbundle() get all override
keys for a given string bundle. nsisimpleenumerator enumerate
keysinbundle( in autf8string url ); parameters url the url of the original string bundle whose
keys are to be overridden. return value an enumeration of nsipropertyelement objects for the
keys that are overridden in the given string bundle. note that these
keys may not exist in the original string bundle. getstringfromname() get the override value for a particular
key in a particular string bundle. astring getstringfromname( in autf8string url, in acstring
key ); parameters url the url of the original string bundle whose
keys are to be overridden.
key the
key to be overridden. ...
...se
keys may not exist in the original string bundle. getstringfromname() get the override value for a particular
key in a particular string bundle. astring getstringfromname( in autf8string url, in acstring
key ); parameters url the url of the original string bundle whose
keys are to be overridden.
key the
key to be overridden. return value the override value. an exception is thrown if the
key has not been overridden. however, no exception is thrown if the original string bundle did not have the
key. ...
nsIURIFixupInfo
what we found/corrected when fixing up a uri. inherits from: nsisupports last changed in gecko 1.7 attributes attribute type description consumer nsisupports consumer that asked for the fixed up uri. preferreduri nsiuri best guess of what uri consumer expects. may be null if we can't deliver (eg. the input is an invalid uri and fixup_flag_allow_
keyword_lookup is not passed). read only. fixeduri nsiuri the fixed-up original input, *never* using a
keyword search. (may be null if the original input was broken as a url, e.g. "foo bar"!). read only.
keywordprovidername astring the
keyword search provider name expected to provide a
keyword search; empty string if no
keyword search is performed. read only. ke...
...read only. fixupchangedprotocol boolean if we changed the protocol; instead of using one raw from the input. read only. fixupcreatedalternateuri boolean if we created an alternative uri. ...
...read only. fixupchangedprotocol boolean if we changed the protocol; instead of using one raw from the input. read only. fixupcreatedalternateuri boolean if we created an alternative uri. ...
XPCOM Interface Reference
treamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidi
keyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichannelevent...
...ndnsiwebbrowserfindinframesnsiwebbrowserpersistnsiwebcontenthandlerregistrarnsiwebnavigationnsiwebnavigationinfonsiwebpagedescriptornsiwebprogressnsiwebprogresslistenernsiwebprogresslistener2nsiwebsocketchannelnsiwebsocketlistenernsiwebappssupportnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatchernsiwindowsreg
keynsiwindowsshellservicensiworkernsiworkerfactorynsiworkerglobalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixformsmodelelementnsixformsnsinstanceelementnsixformsnsmodelelementnsixmlhttprequestnsixmlhttprequesteventtargetnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobso...
...eptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixulruntimensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpcclientnsixmlrpcfaultnsizipentrynsizipreadernsizipreadercachensizipwriternsmsgfilterfileattribvaluensmsgfolderflagtypensmsgjunkstatusnsmsg
keynsmsglabelvaluensmsgpriorityvaluensmsgruleactiontypensmsgsearchattribnsmsgsearchopnsmsgsearchscopensmsgsearchtermnsmsgsearchtypevaluensmsgsearchvaluensmsgsearchwidgetvaluenspipromptservice see also interfaces grouped by function ...
nsIMsgCloudFileProvider
nsimsgcloudfileprovider is the interface that must be implemented by new filelink providers. ...
...as such, the type should be an alphanumpheric string with no spaces. displayname acstring readonly: used for displaying the service name in the user interface. serviceurl acstring readonly: a link to the homepage of the service, if applicable. iconclass acstring readonly: a chrome url for an icon to be used for representing the service. account
key acstring readonly: the unique identifier for the account associated with an instance of an nsimsgcloudfileprovider. settingsurl acstring readonly: a chrome url for an xhtml page displayed in the account setup dialog window, used for displaying and setting provider-specific settings. this url should not point to external web content. managementurl acstring reado...
...ding has failed because the file being uploaded is larger than the file size limit. uploadcanceled 0x8055311d returned when uploading has stopped because it was cancelled by the user. methods init() initializes an nsimsgcloudfileprovider to be associated with a particular account. this should probably be called immediately after instantiation. void init(in string aaccount
key); parameters uploadfile() starts a file upload for this account. aaccount
key the account
key that this instance of the nsimsgcloudfileprovider should be associated with. void uploadfile(in nsilocalfile afile, in nsirequestobserver acallback); parameters afile the file to be uploaded. acallback the nsirequestobserver callback to receive request start and stop noti...
Finding the code for a feature
le, i received the following inquiry, and i decided to follow my usual path and document what i do: hello i would like to add colours and tags to specific emails...by using nsimsgtagservice, can this be done? here is my (edited) response: nsimsgtagservice is used to store the list of valid tags, so it is not the correct way to tag messages. tags are applied using the message database property "
keyword". i know the underlying code, but i don't remember the user interface level function to do it. but here is how i find out. there are two
key tools that you need. the first is the dom inspector extension which i have routinely installed in all of my thunderbird installations. (for debug builds, you can make it appear by default using "ac_add_options --enable-extensions=default,venkman,inspect...
...ccurs in mail3panewindowcommands.js a couple of times. i look at the last occurrence, and see it is just an enable item with no real action involved. oops, i guess i need to get the submenu instead. repeating this process, i see that the submenu items all call a function togglemessagetagmenu. looking that up in mxr, its underlying function uses a very strange call prevhdrfolder[toggler](messages,
key) to change the
key. trying to figure that out from the code, i see that is just a clever way to do the add
keywordstomessages or remove
keywordsfrommessages method call. (please don't do that guys, it really makes code search difficult!) so the answer the your question is, use the nsimsgfolder method "add
keywordstomessages" (and now i remember that i knew that!). if you want examples, scan mxr fo...
...change the
key. trying to figure that out from the code, i see that is just a clever way to do the add
keywordstomessages or remove
keywordsfrommessages method call. (please don't do that guys, it really makes code search difficult!) so the answer the your question is, use the nsimsgfolder method "add
keywordstomessages" (and now i remember that i knew that!). if you want examples, scan mxr for add
keywordstomessages. you'll find that the only decent examples are in unit tests, my test_bug428427.js or asuth's messagemodifier.js ...
Style Editor - Firefox Developer Tools
edit. any changes you make are immediately applied to the page. this makes it easy to experiment with, revise, and test changes. once you're satisfied with your changes, you can save a copy locally by clicking the save button on the sheet's entry in the style sheet pane. the editor provides line numbers and syntax highlighting to help make it easier to read your css. it also supports a number of
keyboard shortcuts. the style editor automatically de-minimizes style sheets that it detects, without affecting the original. this makes it much easier to work on pages that have been optimized. the style editor supports autocomplete. just start typing, and it will offer you a list of suggestions. you can switch autocomplete off in the style editor settings. the media sidebar the style editor di...
...the css when the source changes. with sass you can do this simply by passing the --watch option: sass index.scss:index.css --watch next, save the original source in the style editor by clicking the "save" button next to the file, and saving it over the original file. now when you make changes to the source file in the style editor the css is regenerated and you can see the changes right away.
keyboard shortcuts source editor shortcuts this table lists the default shortcuts for the source editor. in the editor preferences section of the developer tools settings, you can choose to use vim, emacs, or sublime text
key bindings instead. to select these, visit about:config, select the setting devtools.editor.
keymap, and assign "vim" or "emacs", or "sublime" to that setting. if you do this, ...
...oose to use vim, emacs, or sublime text
key bindings instead. to select these, visit about:config, select the setting devtools.editor.
keymap, and assign "vim" or "emacs", or "sublime" to that setting. if you do this, the selected bindings will be used for all the developer tools that use the source editor. you need to reopen the editor for the change to take effect. from firefox 33 onwards, the
key binding preference is exposed in the editor preferences section of the developer tools settings, and you can set it there instead of about:config. command windows macos linux go to line ctrl + j, ctrl + g cmd + j, cmd + g ctrl + j, ctrl + g find in file ctrl + f cmd + f ctrl + f select all ctrl + a cmd + a ctrl + a ...
Web Console Helpers - Firefox Developer Tools
uterhtml is copied. otherwise, json.stringify will be called on the argument, and the result will be copied to the clipboard. help()deprecated since gecko 62 :help displays help text. actually, in a delightful example of recursion, it brings you to this page. inspect() given an object, generates rich output for that object. once you select the object in the output area, you can use the arrow
keys to navigate the object.
keys() given an object, returns a list of the
keys (or property names) on that object. this is a shortcut for object.
keys. pprint() obsolete since gecko 74 formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays. :screenshot creates a screenshot of the current page with the supplied filename. if you don't supply a...
... be included in the screenshot. :unblock (starting in firefox 80) followed by an unquoted string, removes blocking for urls containing that string. in the network monitor, the string is removed from the request blocking sidebar. no error is given if the string was not previously blocked. values() given an object, returns a list of the values on that object; serves as a companion to
keys(). please refer to the console api for more information about logging from content. variables tempn the "use in console" option in the inspector generates a variable for a node named temp0, temp1, temp2, etc. referencing the node. examples looking at the contents of a dom node let's say you have a dom node with the id "title". in fact, this page you're reading right now has one, so yo...
...s one, so you can open up the web console and try this right now. let's take a look at the contents of that node by using the $() and inspect() functions: inspect($("#title")) this automatically generates rich output for the object, showing you the contents of the dom node that matches the css selector "#title", which is of course the element with id "title". you can use the up- and down-arrow
keys to navigate through the output, the right-arrow
key to expand an item, and the left-arrow
key to collapse it. ...
Animation.startTime - Web APIs
an animation’s start time is initially unresolved (meaning that it's null because it has no value). ...
... no time is set. you can read this value to determine what the start time is currently set at, and you can change this value to make the animation start at a different time. examples in the running on web animations api example, the we can sync all new animated cats by giving them all the same starttime as the original running cat: var catrunning = document.getelementbyid ("withwaapi").animate(
keyframes, timing); /* a function that makes new cats. */ function addcat(){ var newcat = document.createelement("div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer ...
... /* a function that makes new cats. */ function addcat(){ var newcat = document.createelement("div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.animate(
keyframes, timing); // set the animation's start time to be the same as the original .cat#withwaapi newanimationplayer.starttime = catrunning.starttime; // add the cat to the pile. waapicats.appendchild(newcat); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.starttime might get rounded depending on browser settings. in ...
AnimationEffect.getComputedTiming() - Web APIs
l value. these values are comparable to the computed styles of an element returned using window.getcomputedstyle(elem). syntax var currenttimevalues = animation.getcomputedtiming(); parameters none. ...
...tion in milliseconds from the animation's start (if the
keyframeeffect is associated with an animation). (also includes effecttiming.enddelay in that calculation.) activeduration the length of time in milliseconds that the animation's effects will run. this is equal to the iteration duration multiplied by the iteration count. localtime the current time of the animation in milliseconds. if the
keyframeeffect is not associated with an animation, its value is null. progress indicates how far along the animation is through its current iteration with values between 0 and 1. returns null if the animation is not running or its
keyframeeffect isn't associated with an animation. currentiteration the number of times this animation has looped, starting from 0. returns null if the animation is no...
...t associated with an animation, its value is null. progress indicates how far along the animation is through its current iteration with values between 0 and 1. returns null if the animation is not running or its
keyframeeffect isn't associated with an animation. currentiteration the number of times this animation has looped, starting from 0. returns null if the animation is not running or its
keyframeeffect isn't associated with an animation. specifications specification status comment web animationsthe definition of 'animationeffect.getcomputedtiming()' in that specification. working draft editor's draft. ...
AuthenticatorAssertionResponse.authenticatorData - Web APIs
can understand the characteristics of the authenticator by looking up its metadata statement. credentialidlength (2 bytes) - the length of the credential id that immediately follows these bytes. credentialid (variable length) - a unique identifier for this credential so that it can be requested for future authentications. the credential is "credentialidlength" bytes long. credentialpublic
key (variable length) - a cose encoded public
key. this public
key will be stored on the server associated with a user's account and be used for future authentications. extensions (variable length) - an optional cbor map of extensions. examples var options = { challenge: new uint8array(26), // will be another value, provided by the relying party server timeout: 60000 }; navigator.creden...
...- a cose encoded public
key. this public
key will be stored on the server associated with a user's account and be used for future authentications. extensions (variable length) - an optional cbor map of extensions. ...
... recommendation initial definition. ...
AuthenticatorAssertionResponse.userHandle - Web APIs
serhandle read-only property of the authenticatorassertionresponse interface is an arraybuffer object which is an opaque identifier for the given user. such an identifier can be used by the relying party's server to link the user account with its corresponding credentials and other data. the same value may be found on the id property of the options.user object (used for the creation of the public
keycredential instance). note: an authenticatorassertionresponse instance is available on public
keycredential.response after calling navigator.credentials.get(). note: this property may only be used in top-level contexts and will not be available in an <iframe> for example. syntax userhandle = authenticatorassertionresponse.userhandle value an arraybuffer object which is an opaque identifie...
...rhandle value an arraybuffer object which is an opaque identifier for the current user. this is not human-readable and does not contain any personally identifying information (e.g. ...
... recommendation initial definition. ...
AuthenticatorResponse.clientDataJSON - Web APIs
n object is converted from an arraybuffer to a javascript object, it will have the following properties: type a string which is either "webauthn.get" when an existing credential is retrieved or "webauthn.create" when a new credential is created. challenge the base64url encoded version of the cryptographic challenge sent from the relying party's server. the original value is passed via public
keycredentialrequestoptions.challenge or public
keycredentialcreationoptions.challenge. origin the fully qualified origin of the requester which has been given by the client/browser to the authenticator. we should expect the relying party's id to be a suffix of this value. tokenbindingid optional an object describing the state of the token binding protocol for the communication with the relying ...
...arty or "present" when token binding was used already id: a domstring which is the base64url encoding of the token binding id which was used for the communication. should this property be absent, it would indicate that the client does not support token binding. ...
... recommendation initial definition. ...
CSSUnparsedValue - Web APIs
e represented by cssunparsedvalue and var() references are represented using cssvariablereferencevalue. constructor cssunparsedvalue.cssunparsedvalue() creates a new cssunparsedvalue object. properties cssunparsedvalue.length returns the number of items in the cssunparsedvalue object. ...
... cssunparsedvalue.values() returns a new array iterator object that contains the values for each index in the cssunparsedvalue object. ...
... cssunparsedvalue.values() returns a new array iterator object that contains the values for each index in the cssunparsedvalue object. specifications specification status comment css typed om level 1the definition of 'cssunparsedvalue' in that specification. ...
CSS Object Model (CSSOM) - Web APIs
el is a set of apis allowing the manipulation of css from javascript. it is much like the dom, but for the css rather than the html. it allows users to read and modify css style dynamically. ...
...is allowing the manipulation of css from javascript. it is much like the dom, but for the css rather than the html. it allows users to read and modify css style dynamically. ...
...vent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement. ...
Cache - Web APIs
torageestimate api. the browser does its best to manage disk space, but it may delete the cache storage for an origin. the browser will generally delete all of the data for an origin or none of the data for an origin. make sure to version caches by name and use the caches only from the version of the script that they can safely operate on. see deleting old caches for more information. note: the
key matching algorithm depends on the vary header in the value. so matching a new
key requires looking at both
key and value for entries in the cache. note: the caching api doesn't honor http caching headers. methods cache.match(request, options) returns a promise that resolves to the response associated with the first matching request in the cache object. cache.matchall(request, options) ...
...ven cache. this is functionally equivalent to calling fetch(), then using put() to add the results to the cache. cache.addall(requests) takes an array of urls, retrieves them, and adds the resulting response objects to the given cache. cache.put(request, response) takes both a request and its response and adds it to the given cache. cache.delete(request, options) finds the cache entry whose
key is the request, returning a promise that resolves to true if a matching cache entry is found and deleted. if no cache entry is found, the promise resolves to false. cache.
keys(request, options) returns a promise that resolves to an array of cache
keys. examples this code snippet is from the service worker selective caching sample. (see selective caching live) the code uses cachestorage.open(...
...ches = { font: 'font-cache-v' + cache_version }; self.addeventlistener('activate', function(event) { // delete all caches that aren't named in current_caches. // while there is only one cache in this example, the same logic will handle the case where // there are multiple versioned caches. var expectedcachenamesset = new set(object.values(current_caches)); event.waituntil( caches.
keys().then(function(cachenames) { return promise.all( cachenames.map(function(cachename) { if (!expectedcachenamesset.has(cachename)) { // if this cache name isn't present in the set of "expected" cache names, then delete it. console.log('deleting out of date cache:', cachename); return caches.delete(cachename); } }) ...
CacheStorage.delete() - Web APIs
the cache you want to delete. return value a promise that resolves to true if the cache object is found and deleted, and false otherwise. examples in this code snippet we wait for an activate event, and then run a waituntil() block that clears up any old, unused caches before a new service worker is activated. here we have an array of cache names we want to keep (cachestokeep). ...
...lves to true if the cache object is found and deleted, and false otherwise. examples in this code snippet we wait for an activate event, and then run a waituntil() block that clears up any old, unused caches before a new service worker is activated. here we have an array of cache names we want to keep (cachestokeep). we return the
keys of the caches in the cachestorage object using cachestorage.
keys, then check each
key to see if it is in the array. ...
...hes before a new service worker is activated. here we have an array of cache names we want to keep (cachestokeep). we return the
keys of the caches in the cachestorage object using cachestorage.
keys, then check each
key to see if it is in the array. if not, we delete it using delete(). this.addeventlistener('activate', function(event) { var cachestokeep = ['v2']; event.waituntil( caches.
keys().then(function(
keylist) { return promise.all(
keylist.map(function(
key) { if (cachestokeep.indexof(
key) === -1) { return caches.delete(
key); } })); }) ); }); specifications specification status comment service workersthe definition of 'cachestorage: delete' in that specification. working draft initial definition. ...
Credential Management API - Web APIs
these capabilities allow users to sign in without typing passwords, see the federated account they used to sign in to a site, and resume a session without the explicit sign-in flow of an expired session. credential management concepts and usage this api lets websites interact with a user agent’s password system so that websites can deal in a uniform way with site credentials and user agents can provide better assistance with the management of their credentials. ...
...interfaces is accessible from navigator.credentials. federatedcredential provides information about credentials from a federated identity provider, which is an entity that a website trusts to correctly authenticate a user, and which provides an api for that purpose. openid connect is an example of such a framework. passwordcredential provides information about a username/password pair. ...
...ls from a federated identity provider, which is an entity that a website trusts to correctly authenticate a user, and which provides an api for that purpose. openid connect is an example of such a framework. passwordcredential provides information about a username/password pair. public
keycredential provides a credential for logging in using an un-phishable and data-breach resistant asymmetric
key pair instead of a password. specifications specification status comment credential management level 1 working draft initial definition. web authentication: an api for accessing public
key credentials level 1 recommendation initial definition. ...
CredentialsContainer.create() - Web APIs
can be created. this method is restricted to top-level contexts. calls to it within an <iframe> element will resolve without 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 "public
key". 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...
...d) 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 usvstring tbd iconurl: optional usvstring tbd provider: (required) usvstring tbd protocol: optional usvstring tbd public
key: optional an public
keycredentialcreationoptions object that describes the options for creating a webauthn credential. returns a promise that resolves with a credential instance, such as passwordcredential, federatedcredential, or public
keycredential. specifications specification status comment credential management level 1the definition of 'get()' in that specific...
...hn credential. returns a promise that resolves with a credential instance, such as passwordcredential, federatedcredential, or public
keycredential. specifications specification status comment credential management level 1the definition of 'get()' in that specification. working draft initial definition. web authentication: an api for accessing public
key credentials level 1 recommendation initial definition. ...
DeprecationReportBody - Web APIs
we loop over each report using a basic for loop, then iterate over each e...
...we loop over each report using a basic for loop, then iterate over each entry of in the report's body (a deprecationreportbody instance) using a for...in structure, ...
...eelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let
key in reports[i].body) { let innerlistitem = document.createelement('li'); let
keyvalue = reports[i].body[
key]; innerlistitem.textcontent =
key + ': ' +
keyvalue; innerlist.appendchild(innerlistitem); } } } the reports parameter contains an array of all the reports in the observer's report queue. we loop over each report using a basic for loop, then iterate over each entry of in the report's body (a deprecationreportbody instance) using a for...in structure, displaying each
key/value p...
Document.cookie - Web APIs
the document property cookie lets you read and write cookies associated with the document. it serves as a getter and setter for the actual values of the cookies. syntax read all cookies accessible from this location allcookies = document.cookie; in the code above allcookies is a string containing a semicolon-separated list of all cookies (i.e.
key=value pairs). note that each
key and value may be surrounded by whitespace (space and tab characters): in fact, rfc 6265 mandates a single space after each semicolon, but some user agents may not abide by this. write a new cookie document.cookie = newcookie; in the code above, newcookie is a string of form
key=value. note that you can only set/update a single cookie at a time using this method. consider also that: any of the following coo...
...cters): in fact, rfc 6265 mandates a single space after each semicolon, but some user agents may not abide by this. write a new cookie document.cookie = newcookie; in the code above, newcookie is a string of form
key=value. note that you can only set/update a single cookie at a time using this method. consider also that: any of the following cookie attribute values can optionally follow the
key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator: ;path=path (e.g., '/', '/mydir') if not specified, defaults to the current path of the current document location. note: prior to gecko 6.0, paths with quotes were treated as if the quotes were part of the string, instead of as if they were delimiters surrounding the actual path string. this ha...
...n time to zero. keep in mind that the more cookies you have, the more data will be transferred between the server and the client for each request. this will make each request slower. it is highly recommended for you to use whatwg dom storage if you are going to keep "client-only" data. rfc 2965 (section 5.3, "implementation limits") specifies that there should be no maximum length of a cookie's
key or value size, and encourages implementations to support arbitrarily large cookies. each browser's implementation maximum will necessarily be different, so consult individual browser documentation. the reason for the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, localstor...
Event.timeStamp - Web APIs
ime = event.timestamp; value this value is the number of milliseconds elapsed from the beginning of the current document's lifetime till the event was created. in newer implementations, the value is a domhighrestimestamp accurate to 5 microseconds (0.005 ms). in older implementations, the value is a domtimestamp, accurate to a millisecond. ...
...is the number of milliseconds elapsed from the beginning of the current document's lifetime till the event was created. in newer implementations, the value is a domhighrestimestamp accurate to 5 microseconds (0.005 ms). in older implementations, the value is a domtimestamp, accurate to a millisecond. example html <p> focus this iframe and press any
key to get the current timestamp for the
keypress event. ...
...implementations, the value is a domtimestamp, accurate to a millisecond. example html <p> focus this iframe and press any
key to get the current timestamp for the
keypress event. </p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(event) { var time = document.getelementbyid("time"); time.firstchild.nodevalue = event.timestamp; } document.body.addeventlistener("
keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in 60 it will be 2ms. // reduced time precision (2ms) in firefox 60 event.timestamp; /...
EventTarget.addEventListener() - Web APIs
break; case 6: // some code here... break; } } } const myobject = new someclass(); myobject.register(); getting data into and out of an event listener it may seem that event listeners are like isla...
... break; case 6: // some code here... ...
...e registered as follows: // passing a function reference — do not add '()' after it, which would call the function! el.onclick = modifytext; // using a function expression element.onclick = function() { // ... function logic ... }; this method replaces the existing click event listener(s) on the element if there are any. other events and associated event handlers such as blur (onblur) and
keypress (on
keypress) behave similarly. because it was essentially part of dom 0, this technique for adding event listeners is very widely supported and requires no special cross-browser code. it is used to register event listeners dynamically when very old browsers (like ie <=8) must be supported; see the table below for details on browser support for addeventlistener. memory issues const els = d...
FormData - Web APIs
it uses the same format a form would use if the encoding type were set to "multipart/form-data". you can also pass it directly to the urlsearchparams constructor if you want to generate query parameters in the way a <form> would do if it were using simple get submission. an object implementing formdata can directly be used in a for...of structure, instead of entries(): for (var p of myformdata) is equivalent to for (var p of myformdata.entries()). note: this feature is available in web workers. ...
...if it were using simple get submission. an object implementing formdata can directly be used in a for...of structure, instead of entries(): for (var p of myformdata) is equivalent to for (var p of myformdata.entries()). note: this feature is available in web workers. constructor formdata() creates a new formdata object. methods formdata.append() appends a new value onto an existing
key inside a formdata object, or adds the
key if it does not already exist. formdata.delete() deletes a
key/value pair from a formdata object. formdata.entries() returns an iterator allowing to go through all
key/value pairs contained in this object. formdata.get() returns the first value associated with a given
key from within a formdata object. formdata.getall() returns an array of all the ...
...dds the
key if it does not already exist. formdata.delete() deletes a
key/value pair from a formdata object. formdata.entries() returns an iterator allowing to go through all
key/value pairs contained in this object. formdata.get() returns the first value associated with a given
key from within a formdata object. formdata.getall() returns an array of all the values associated with a given
key from within a formdata. formdata.has() returns a boolean stating whether a formdata object contains a certain
key. formdata.
keys() returns an iterator allowing to go through all
keys of the
key/value pairs contained in this object. formdata.set() sets a new value for an existing
key inside a formdata object, or adds the
key/value if it does not already exist. formdata.values() returns an ...
Guide to the Fullscreen API - Web APIs
video"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it. presentation differences it's worth noting a
key difference here between the gecko and webkit implementations at this time: gecko automatically adds css rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". webkit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. to get the same fullscreen behavior in webkit, you need to add your own "width: 100%; heigh...
...reen. if this is non-null, the document is in fullscreen mode. if this is null, the document is not in fullscreen mode. document.fullscreenenabled the fullscreenenabled property tells you whether or not the document is currently in a state that would allow fullscreen mode to be requested. things your users want to know you'll want to be sure to let your users know that they can press the esc
key (or f11) to exit fullscreen mode. in addition, navigating to another page, changing tabs, or switching to another application (using, for example, alt-tab) while in fullscreen mode exits fullscreen mode as well. example in this example, a video is presented in a web page. pressing the return or enter
key lets the user toggle between windowed and fullscreen presentation of the video. view live...
... in addition, navigating to another page, changing tabs, or switching to another application (using, for example, alt-tab) while in fullscreen mode exits fullscreen mode as well. example in this example, a video is presented in a web page. pressing the return or enter
key lets the user toggle between windowed and fullscreen presentation of the video. view live examples watching for the enter
key when the page is loaded, this code is run to set up an event listener to watch for the enter
key. document.addeventlistener("
keydown", function(e) { if (e.
keycode == 13) { togglefullscreen(); } }, false); toggling fullscreen mode this code is called when the user hits the enter
key, as seen above. function togglefullscreen() { if (!document.fullscreenelement) { document.docume...
Fullscreen API - Web APIs
with a default allow-list value of "self", meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document. see using feature policy to learn more about using feature policy to control access to an api. usage notes users can choose to exit full-screen mode simply by pressing the esc (or f11)
key, rather than waiting for the site or app to programmatically do so. make sure you provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them. note: navigating to another page, changing tabs, or switching to another application using any application switcher (or alt-tab) will likewise exit full-screen mode. example ...
...provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them. note: navigating to another page, changing tabs, or switching to another application using any application switcher (or alt-tab) will likewise exit full-screen mode. example in this example, a video is presented in a web page. ...
... to them. note: navigating to another page, changing tabs, or switching to another application using any application switcher (or alt-tab) will likewise exit full-screen mode. example in this example, a video is presented in a web page. pressing the return or enter
key lets the user toggle between windowed and full-screen presentation of the video. view live examples watching for the enter
key when the page is loaded, this code is run to set up an event listener to watch for the enter
key. document.addeventlistener("
keypress", function(e) { if (e.
keycode === 13) { togglefullscreen(); } }, false); toggling full-screen mode this code is called by the event handler above when the user hits the enter
key. function togglefullscreen() { if (!document.fullscreenelement) { ...
GlobalEventHandlers.onanimationend - Web APIs
h); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next. ...
...--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next. first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox"
keyframe set. ...
...t, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox"
keyframe set. the
keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner. .slideanimation { animation: 5s ease-in-out 0s 1 slidebox; } @
keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } since the css describes the animation but doesn't connect it to the box, we'll need some javascript code to do that. we'll get to that shortly. javascript content before we get to the animation code, we define a function which logs information to a box...
GlobalEventHandlers.onanimationstart - Web APIs
h); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next. ...
...--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next. first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox"
keyframe set. ...
...t, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox"
keyframe set. the
keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner. .slideanimation { animation: 5s ease-in-out 0s 1 slidebox; } @
keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } since the css describes the animation but doesn't connect it to the box, we'll need some javascript code to do that. we'll get to that shortly. javascript content before we get to the animation code, we define a function which logs information to a box...
HTMLAnchorElement - Web APIs
h="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlanchorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. element.access
key is a domstring representing a single character that switches input focus to the hyperlink. htmlanchorelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser. the value represent the proposed name of the file. if the name is not a valid filename of the underlying os, browser will adapt it. htmlhyperlinkelementutils...
... is no longer obsolete, whereas the whatwg living standard still has it labeled obsolete. until this discrepancy is resolved, you should still assume it is obsolete. htmlanchorelement.shape is a domstring representing the shape of the active area. methods inherits methods from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. htmlelement.blur() removes the
keyboard focus from the current element. htmlelement.focus() gives the
keyboard focus to the current element. htmlhyperlinkelementutils.tostring() returns a usvstring containing the whole url. it is a synonym for htmlhyperlinkelementutils.href, though it can't be used to modify the value. the blur() and focus() methods are inherited from htmlelement from html5 on, but were defined on htmlanchor...
...ed: download. technically, the url-related properties, media, host, hostname, pathname, port, protocol, search, and hash, have been moved to the htmlhyperlinkelementutils mixin, and htmlanchorelement implements this mixin. html5the definition of 'htmlanchorelement' in that specification. recommendation the methods blur() and focus(), as well as the properties tabindex and access
key, are now defined on htmlelement. the following properties are now obsolete: charset, coords, name, rev, and shape. the following properties have been added: hash, host, hostname, media, pathname, port, protocol, rellist, search, and text. document object model (dom) level 2 html specificationthe definition of 'htmlanchorelement' in that specification. obsolete no change fro...
HTMLButtonElement - Web APIs
fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbuttonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlbuttonelement.access
key is a domstring indicating the single-character
keyboard
key to give access to the button. htmlbuttonelement.autofocus is a boolean indicating whether or not the 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-associated element in a document can have this attribute specified. htmlbuttonelement.disab...
...f specified, this attribute overrides the method attribute of the <form> element that owns this element. htmlbuttonelement.formnovalidate is a boolean indicating that the form is not to be validated when it is submitted. if specified, this attribute overrides the novalidate attribute of the <form> element that owns this element. htmlbuttonelement.formtarget is a domstring reflecting a name or
keyword indicating where to display the response that is received after submitting the form. if specified, this attribute overrides the target attribute of the <form> element that owns this element. htmlbuttonelement.labels read only is a nodelist that represents a list of <label> elements that are labels for this button. htmlbuttonelement.menu is a htmlmenuelement representing the menu elemen...
...ation the menu attribute and type="menu" value have been removed. html 5.1the definition of 'htmlbuttonelement' in that specification. recommendation the following attribute has been added: menu. the type attribute can take one more value, "menu". html5the definition of 'htmlbuttonelement' in that specification. recommendation the attributes tabindex and access
key, are now defined on htmlelement. the following attributes have been added: autofocus, formaction, formenctype, formmethod, formnovalidate, formtarget, labels, validity, validationmessage, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(). the type attribute is no more read-only. document object model (dom) level 2 html specification...
HTMLElement - Web APIs
,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers. htmlelement.access
key is a domstring representing the access
key assigned to the element. htmlelement.access
keylabel read only returns a domstring containing the element's assigned access
key. htmlelement.contenteditable is a domstring, where a value of true means the element is editable and a value of false means it isn't. htmlelement.iscontenteditable read only returns a boolean that indicates whether or no...
... returns the event handling code for the touchcancel event. methods inherits methods from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers. htmlelement.attachinternals() attaches an elementinternals instance to the custom element. htmlorforeignelement.blur() removes
keyboard focus from the currently focused element. htmlelement.click() sends a mouse click event to the element. htmlorforeignelement.focus() makes the element the current
keyboard focus. htmlelement.forcespellcheck() runs the spell checker on the element's contents. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this...
...ties: translate, itemscope, itemtype, itemid, itemref, itemprop, properties, and itemvalue. added the following method: forcespellcheck(). moved the onxyz attributes to the globaleventhandlers interface and added an inheritance from it. html5the definition of 'htmlelement' in that specification. recommendation added the following properties: dataset, hidden, tabindex, access
key, access
keylabel, draggable, dropzone, contenteditable, iscontenteditable, contextmenu, spellcheck, commandtype, commandlabel, commandicon, commandhidden, commanddisabled, commandchecked, style, and all the onxyz properties. moved the id and classname properties to the element interface. document object model (dom) level 2 html specificationthe definition of 'htmlelement' in that spec...
HTMLOrForeignElement.dataset - Web APIs
etters (a to z). in javascript, the name of a custom data attribute is the name of the same html attribute, but in camelcase and with no dashes, dots, etc. in addition to the information below, you'll find a how-to guide for using html data attributes in our article using data attributes. name conversion dash-style to camelcase conversion a custom data attribute name is transformed to a
key for the domstringmap entry with the following rules the prefix data- is removed (including the dash); for any dash (u+002d) followed by an ascii lowercase letter a to z, the dash is removed, and the letter is transformed into its uppercase counterpart; other characters (including other dashes) are left unchanged. camelcase to dash-style conversion the opposite transformation, whi...
...omstringmap entry with the following rules the prefix data- is removed (including the dash); for any dash (u+002d) followed by an ascii lowercase letter a to z, the dash is removed, and the letter is transformed into its uppercase counterpart; other characters (including other dashes) are left unchanged. camelcase to dash-style conversion the opposite transformation, which maps a
key to an attribute name, uses the following rules: restriction: before the transformation, a dash must not be immediately followed by an ascii lowercase letter a to z; the prefix data- is added; any ascii uppercase letter a to z is transformed into a dash, followed by its lowercase counterpart; other characters are left unchanged. the restriction in the rules above ensures that the ...
...tely followed by an ascii lowercase letter a to z; the prefix data- is added; any ascii uppercase letter a to z is transformed into a dash, followed by its lowercase counterpart; other characters are left unchanged. the restriction in the rules above ensures that the two transformations are the inverse one of the other. for example, the attribute named data-abc-def corresponds to the
key abcdef. accessing values attributes can be set and read by using the camelcase name (the
key) like an object property of the dataset, as in element.dataset.
keyname attributes can also be set and read using the bracket syntax, as in element.dataset[
keyname] the in operator can be used to check whether a given attribute exists. setting values when an attribute is set, its value is always...
HTML Drag and Drop API - Web APIs
fired, and some events might fire many times, such as the drag and dragover events. each drag event type has an associated global event handler: event on event handler fires when… drag ondrag …a dragged item (element or text selection) is dragged. dragend ondragend …a drag operation ends (such as releasing a mouse button or hitting the esc
key; see finishing a drag.) dragenter ondragenter …a dragged item enters a valid drop target. (see specifying drop targets.) dragexit ondragexit …an element is no longer the drag operation's immediate selection target. dragleave ondragleave …a dragged item leaves a valid drop target. dragover ondragover …a dragged item is being dragg...
...single drag item, each with a kind property (either string or file) and a type property for the data item's mime type. the datatransferitem object also has methods to get the drag item's data. the datatransferitemlist object is a list of datatransferitem objects. the list object has methods to add a drag item to the list, remove a drag item from the list, and clear the list of all drag items. a
key difference between the datatransfer and datatransferitem interfaces is that the former uses the synchronous getdata() method to access a drag item's data, but the latter instead uses the asynchronous getasstring() method. note: dragevent and datatransfer are broadly supported on desktop browsers. however, the datatransferitem and datatransferitemlist interfaces have limited browser support. see ...
...more information, see: specifying drop targets handle the drop effect the handler for the drop event is free to process the drag data in an application-specific way. typically, an application uses the getdata() method to retrieve drag items and then process them accordingly. additionally, application semantics may differ depending on the value of the dropeffect and/or the state of modifier
keys. the following example shows a drop handler getting the source element's id from the drag data, and then using the id to move the source element to the drop element: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("application/my-app", ev.target.id); ev.datatransfer.dropeffect = "move"; } function dragover_handler(...
IDBCursor.continue() - Web APIs
the continue() method of the idbcursor interface advances the cursor to the next position along its direction, to the item whose
key matches the optional
key parameter. if no
key is specified, the cursor advances to the immediate next position, based on its direction. note: this feature is available in web workers. syntax cursor.continue(
key); parameters
key optional the
key to position the cursor at. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbcursor's transaction is inactive. ...
... based on its direction. note: this feature is available in web workers. syntax cursor.continue(
key); parameters
key optional the
key to position the cursor at. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbcursor's transaction is inactive. dataerror the
key parameter may have any of the following conditions: the
key is not a valid
key. the
key is less than or equal to this cursor's position and the cursor's direction is next or nextunique. the
key is greater than or equal to this cursor's position and this cursor's direction is prev or prevunique. invalidstateerror the cursor is currently being iterated or h...
...sor's position and this cursor's direction is prev or prevunique. invalidstateerror the cursor is currently being iterated or has iterated past its end. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. the cursor does not require us to select the data based on a
key; we can just grab all of it. also note that in each iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); ...
IDBCursor.delete() - Web APIs
for such needs, you have to use idbindex.opencursor() instead. ...
...this operation are fired. the result attribute is set to undefined. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbcursor's transaction is inactive. readonlyerror the transaction mode is read-only. invalidstateerror the cursor was created using idbindex.open
keycursor, is currently being iterated, or has iterated past its end. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. if the albumtitle of the current cursor is "grace under pressure", we delete that entire record using var request = cursor.delete();. the cursor does not require us to...
...terated, or has iterated past its end. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. if the albumtitle of the current cursor is "grace under pressure", we delete that entire record using var request = cursor.delete();. the cursor does not require us to select the data based on a
key; we can just grab all of it. also note that in each iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function deleteresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readwrite'); var objectstore = transaction.objec...
IDBDatabase.createObjectStore() - Web APIs
ore(name); idbdatabase.createobjectstore(name, options); parameters name the name of the new object store to be created. note that it is possible to create an object store with an empty name. optionalparameters optional an options object whose attributes are optional parameters to the method. it includes the following properties: attribute description
keypath the
key path to be used by the new object store. if empty or not specified, the object store is created without a
key path and uses out-of-line
keys. you can also pass in an array as a
keypath. autoincrement if true, the object store has a
key generator. defaults to false. unknown parameters are ignored. returns a new idbobjectstore. exceptions this metho...
...(e.g. has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) constrainterror an object store with the given name (based on case-sensitive comparison) already exists in the connected database. invalidaccesserror if autoincrement is set to true and
keypath is either an empty string or an array containing an empty string. example // let us open our database var request = window.indexeddb.open("todolist", 4); // this handler is called when a new version of the database // is created, either when one has not been created before // or when a new version number is submitted by calling // window.indexeddb.open(). // this handler is only supp...
...new version number is submitted by calling // window.indexeddb.open(). // this handler is only supported in recent browsers. ...
IDBFactory.cmp() - Web APIs
the cmp() method of the idbfactory interface compares two values as
keys to determine equality and ordering for indexeddb operations, such as storing and iterating. note: this feature is available in web workers. note: do not use this method for comparing arbitrary javascript values, because many javascript values are either not valid indexeddb
keys (booleans and objects, for example) or are treated as equivalent indexeddb
keys (for example, since indexeddb ignores arrays with non-numeric properties and treats them as empty arrays, so any non-numeric arrays are treated as equivalent). this throws an exception if either of the values is not a valid
key. ...
...
keys (booleans and objects, for example) or are treated as equivalent indexeddb
keys (for example, since indexeddb ignores arrays with non-numeric properties and treats them as empty arrays, so any non-numeric arrays are treated as equivalent). this throws an exception if either of the values is not a valid
key. syntax var result = indexeddb.cmp(first, second); parameters first the first
key to compare. second the second
key to compare. ...
... this throws an exception if either of the values is not a valid
key. syntax var result = indexeddb.cmp(first, second); parameters first the first
key to compare. second the second
key to compare. return value an integer that indicates the result of the comparison; the table below lists the possible values and their meanings: returned value description -1 1st
key is less than the 2nd
key 0 1st
key is equal to the 2nd
key 1 1st
key is greater than the 2nd
key exceptions this method may raise a domexception of the following types: attribute description dataerror one of the supplied
keys was not a valid
key. example var a = 1; var b = 2; var result = window.indexeddb.cmp(a, b); console.log( "co...
IDBObjectStore.getAll() - Web APIs
er or all objects in the store if no parameters are given. if a value is successfully found, then a structured clone of it is created and set as the result of the request object. this method produces the same result for: a record that doesn't exist in the database a record that has an undefined value to tell these situations apart, you either call the opencursor() method with the same
key. that method provides a cursor if the record exists, and no cursor if it does not. the count() method with the same
key, which will return 1 if the row exists and 0 if it doesn't. syntax var request = objectstore.getall(); var request = objectstore.getall(query); var request = objectstore.getall(query, count); parameters query optional a
key or idb
keyrange to be queried. if nothing is pa...
... count optional specifies the number of values to return if more than one is found. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. ...
...n 0 or greater than 232-1 a typeerror exception will be thrown. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbobjectstore's transaction is inactive. dataerror the
key or
key range provided contains an invalid
key or is null. invalidstateerror the idbobjectstore has been deleted or removed. a typeerror exception is thrown if the count parameter is not between 0 and 232-1 included. specifications specification status comment indexed database api draftthe definition of 'getall()' in that specification. rec...
IDBTransaction: abort event - Web APIs
the abort event is fired when an indexeddb transaction is aborted. bubbles yes cancelable no interface event event handler property onabort this can happen for any of the following reasons: bad requests, (for example, trying to add the same
key twice, or put the same index
key when the
key has a uniqueness constraint), an explicit abort() call an uncaught exception in the request's success/error handler, an i/o error (an actual failure to write to disk, for example disk detached, or other os/hardware failure) quota exceeded. examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event. // open...
...he abort event, then aborts the transaction to trigger the event. ...
...example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
MouseEvent.initMouseEvent() - Web APIs
d, it doesn't do anything anymore. do not use this method anymore as it is deprecated. instead use specific event constructors, like mouseevent(). the page on creating and triggering events gives more information about the way to use these. syntax event.initmouseevent(type, canbubble, cancelable, view, detail, screenx, screeny, clientx, clienty, ctrl
key, alt
key, shift
key, meta
key, button, relatedtarget); parameters type the string to set the event's type to. possible types for mouse events include: click, mousedown, mouseup, mouseover, mousemove, mouseout. canbubble whether or not the event can bubble. sets the value of event.bubbles. cancelable whether or not the event's default action can be prevented. sets the va...
...tail the event's mouse click count. sets the value of uievent.detail. screenx the event's screen x coordinate. sets the value of mouseevent.screenx. screeny the event's screen y coordinate. sets the value of mouseevent.screeny. clientx the event's client x coordinate. sets the value of mouseevent.clientx. clienty the event's client y coordinate. sets the value of mouseevent.clienty. ctrl
key whether or not control
key was depressed during the event. sets the value of mouseevent.ctrl
key. alt
key whether or not alt
key was depressed during the event. sets the value of mouseevent.alt
key. shift
key whether or not shift
key was depressed during the event. sets the value of mouseevent.shift
key. meta
key whether or not meta
key was depressed during the event. sets the value of mouseeven...
... button the event's mouse button. relatedtarget the event's related eventtarget. only used with some event types (e.g., mouseover and mouseout). in other cases, pass null. ...
NodeList - Web APIs
delist.length the number of nodes in the nodelist. methods nodelist.item() returns an item in the list by its index, or null if the index is out-of-bounds. an alternative to accessing nodelist[i] (which instead returns undefined when i is out-of-bounds). this is mostly useful for non-javascript dom implementations. nodelist.entries() returns an iterator, allowing code to go through all
key/value pairs contained in the collection. (in this case, the
keys are numbers starting from 0 and the values are nodes.) nodelist.foreach() executes a provided function once per nodelist element, passing the element as an argument to the function. nodelist.
keys() returns an iterator, allowing code to go through all the
keys of the
key/value pairs contained in the collection. (in this case, the...
...value pairs contained in the collection. (in this case, the
keys are numbers starting from 0 and the values are nodes.) nodelist.foreach() executes a provided function once per nodelist element, passing the element as an argument to the function. nodelist.
keys() returns an iterator, allowing code to go through all the
keys of the
key/value pairs contained in the collection. (in this case, the
keys are numbers starting from 0.) nodelist.values() returns an iterator allowing code to go through all values (nodes) of the
key/value pairs contained in the collection. example it's possible to loop over the items in a nodelist using a for loop: for (let i = 0; i < mynodelist.length; i++) { let item = mynodelist[i]; } don't use for...in to enumerate the items in nodelists, since they wil...
...it only has to deal with element objects. also, for..in is not guaranteed to visit the properties in any particular order. for...of loops will loop over nodelist objects correctly: const list = document.queryselectorall('input[type=checkbox]'); for (let checkbox of list) { checkbox.checked = true; } recent browsers also support iterator methods (foreach()) as well as entries(), values(), and
keys(). there is also an internet explorer-compatible way to use array.prototype.foreach for iteration: const list = document.queryselectorall('input[type=checkbox]'); array.prototype.foreach.call(list, function (checkbox) { checkbox.checked = true; }); specifications specification status comment domthe definition of 'nodelist' in that specification. living standa...
RTCDTMFSender.toneBuffer - Web APIs
oming tones are listed. syntax var tonebuffer = rtcdtmfsender.tonebuffer; value a domstring listing the tones to be played. if the string is empty, there are no tones pending. tone buffer format the tone buffer is a string which can contain any combination of the characters that are permitted by the dtmf standard. ...
...ed. syntax var tonebuffer = rtcdtmfsender.tonebuffer; value a domstring listing the tones to be played. if the string is empty, there are no tones pending. tone buffer format the tone buffer is a string which can contain any combination of the characters that are permitted by the dtmf standard. dtmf tone characters the digits 0-9 these characters represent the digit
keys on a telephone
keypad. ...
...ng listing the tones to be played. if the string is empty, there are no tones pending. tone buffer format the tone buffer is a string which can contain any combination of the characters that are permitted by the dtmf standard. dtmf tone characters the digits 0-9 these characters represent the digit
keys on a telephone
keypad. the letters a-d these characters represent the "a" through "d"
keys which are part of the dtmf standard but not included on most telephones. these are not interpreted as digits. lower-case "a"-"d" automatically gets converted to upper-case. the pound/hash sign ("#") and the asterisk ("*") these correspond to the similarly-labeled
keys which are typically on the bottom row of the telephone
keypad. the comma (",") this character instructs the dialing process t...
RTCDTMFToneChangeEvent.RTCDTMFToneChangeEvent() - Web APIs
g containing a single dtmf tone character which has just begun to play, or an empty string ("") to indicate that the previous tone has stopped playing. see tone characters for details on what characters are permitted. return value a newly-created rtcdtmftonechangeevent, configured as specified in the provided options. ...
...e dtmf tone character which has just begun to play, or an empty string ("") to indicate that the previous tone has stopped playing. see tone characters for details on what characters are permitted. return value a newly-created rtcdtmftonechangeevent, configured as specified in the provided options. tone characters the digits 0-9 these characters represent the digit
keys on a telephone
keypad. ...
...") to indicate that the previous tone has stopped playing. see tone characters for details on what characters are permitted. return value a newly-created rtcdtmftonechangeevent, configured as specified in the provided options. tone characters the digits 0-9 these characters represent the digit
keys on a telephone
keypad. the letters a-d these characters represent the "a" through "d"
keys which are part of the dtmf standard but not included on most telephones. these are not interpreted as digits. lower-case "a"-"d" automatically gets converted to upper-case. the pound/hash sign ("#") and the asterisk ("*") these correspond to the similarly-labeled
keys which are typically on the bottom row of the telephone
keypad. the comma (",") this character instructs the dialing process t...
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
r to determine several... xxx ... finding paired statistics each statistics record of type remote-outbound-rtp (describing a remote peer's statistics about sending data to the local peer) has a corresponding record of type inbound-rtp which describes the local peer's perspective on the same data being moved between the two peers. ...
...eer) has a corresponding record of type inbound-rtp which describes the local peer's perspective on the same data being moved between the two peers. let's create a utility function to help us look up the value of a
key in the paired statistics object. the findreportentry() function shown below examines an rtcstatsreport, returning the rtcstats-based statistics record which contains the specified
key — and for which the
key has the specified value. if no match is found (or the statistics report has no record corresponding to the statistics category indicated by
key. ...
... of a
key in the paired statistics object. the findreportentry() function shown below examines an rtcstatsreport, returning the rtcstats-based statistics record which contains the specified
key — and for which the
key has the specified value. if no match is found (or the statistics report has no record corresponding to the statistics category indicated by
key. function findreportentry(report,
key, value) { for (const stats of report.values()) { if (stats[
key] === value) { return stats; } } return null; } since the rtcstatsreport is a javascript map, we can iterate over the map's values() to examine each of the rtcstats-based statistics records in the report until we find one that has the
key property with the specified value. when a match is found, the statistics obje...
TouchEvent - Web APIs
81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor touchevent() creates a touchevent object. properties this interface inherits properties from its parent, uievent and event. ...
...no,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor touchevent() creates a touchevent object. properties this interface inherits properties from its parent, uievent and event. touchevent.alt
key read only a boolean value indicating whether or not the alt
key was down when the touch event was fired. ...
...his interface inherits properties from its parent, uievent and event. touchevent.alt
key read only a boolean value indicating whether or not the alt
key was down when the touch event was fired. touchevent.changedtouches read only a touchlist of all the touch objects representing individual points of contact whose states changed between the previous touch event and this one. touchevent.ctrl
key read only a boolean value indicating whether or not the control
key was down when the touch event was fired. touchevent.meta
key read only a boolean value indicating whether or not the meta
key was down when the touch event was fired. touchevent.shift
key read only a boolean value indicating whether or not the shift
key was down when the touch event was fired. touchevent.targettouchesread ...
Using Touch Events - Web APIs
however, devices with touch screens (especially portable devices) are mainstream and web applications can either directly process touch-based input by using touch events or the application can use interpreted mouse events for the application input. a disadvantage to using mouse events is that they do not support concurrent user input, whereas touch events support multiple simultaneous inputs (possibly at different locations on the touch surface), thus enhancing user experiences. the touch events interfaces support application specific single and multi-touch interactions such as a two-finger gesture. ...
...ers, the list length would be three. the touchevent interface represents an event sent when the state of contacts with a touch-sensitive surface changes. the state changes are starting contact with a touch surface, moving a touch point while maintaining contact with the surface, releasing a touch point and canceling a touch event. this interface's attributes include the state of several modifier
keys (for example the shift
key) and the following touch lists: touches - a list of all of the touch points currently on the screen. targettouches - a list of the touch points on the target dom element. changedtouches - a list of the touch points whose items depends on the associated event type: for the touchstart event, it is a list of the touch points that became active with the current ...
...t area with the touch surface. the touch point's rotation angle - the number of degrees of rotation to apply to the described ellipse to align with the contact area - is also be standardized as is the amount of pressure applied to a touch point. what about pointer events? the introduction of new input mechanisms results in increased application complexity to handle various input events, such as
key events, mouse events, pen/stylus events, and touch events. to help address this problem, the pointer events standard defines events and related interfaces for handling hardware agnostic pointer input from devices including a mouse, pen, touchscreen, etc.. that is, the abstract pointer creates a unified input model that can represent a contact point for a finger, pen/stylus or mouse. see the point...
UIEvent - Web APIs
the uievent interface represents simple user interface events. uievent derives from event. although the uievent.inituievent() method is kept for backward compatibility, you should create a uievent object using the uievent() constructor. several interfaces are direct or indirect descendants of this one: mouseevent, touchevent, focusevent,
keyboardevent, wheelevent, inputevent, and compositionevent. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" f...
... a uievent object. properties this interface also inherits properties of its parent, event. uievent.cancelbubble is a boolean indicating whether the bubbling of the event has been canceled or not. uievent.detailread only returns a long with details about the event, depending on the event type. uievent.ischar read only returns a boolean indicating whether the event produced a
key character or not. uievent.layerx read only returns the horizontal coordinate of the event relative to the current layer. uievent.layery read only returns the vertical coordinate of the event relative to the current layer. uievent.pagex read only returns the horizontal coordinate of the event relative to the whole document. uievent.pagey read only returns the vertical coordinat...
...coordinate of the event relative to the whole document. uievent.sourcecapabilities read only returns an instance of the inputdevicecapabilities interface, which provides information about the physical device responsible for generating a touch event. uievent.viewread only returns a windowproxy that contains the view that generated the event. uievent.which read only returns the numeric
keycode of the
key pressed, or the character code (charcode) for an alphanumeric
key pressed. methods this interface also inherits methods of its parent, event. uievent.inituievent() initializes a uievent object. if the event has already being dispatched, this method does nothing. specifications specification status comment inputdevicecapabilities draft added...
WebXR Device API - Web APIs
bxr-compatible devices include fully-immersive 3d headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery. ...
...e perspectives of each of the spectators of a scene, in a multi-user environment. xrinputsource represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the xr device. other input devices such as
keyboards, mice, and gamepads are not presented as xrinputsource instances. xrwebgllayer a layer which serves as a webgl frame buffer into which a scene's view is rendered. using webgl to render the scene gains substantial performance benefits due to graphics acceleration. event interfaces the following interfaces are used to represent the events used by the webxr api. xrinputsourceevent sen...
...are or colliding with a physical obstacle. on devices which support it, bounded-floor can be a useful tool in your repertoire. making it interactive movement, orientation, and motion: a webxr example in this example and tutorial, we use information learned throughout the webxr documentation to create a scene containing a rotating cube which the user can move around using both vr headset and
keyboard and mouse. inputs and input sources a guide to input sources and how to efficiently manage the input devices being used to control the webxr session, and how to receive and process user inputs from those devices. targeting and hit detection how to use an input source's targeting ray mode and targeting ray space to display a targeting ray, identify targeted surfaces or objects, and perfo...
Web Audio API - Web APIs
ke gainnode). audioparam the audioparam interface represents an audio-related parameter, like one of an audionode. it can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern. audioparammap provides a maplike interface to a group of audioparam interfaces, which means it provides the methods foreach(), get(), has(),
keys(), and values(), as well as a size property. baseaudiocontext the baseaudiocontext interface acts as a base definition for online and offline audio-processing graphs, as represented by audiocontext and offlineaudiocontext respectively. you wouldn't use baseaudiocontext directly — you'd use its features via one of these two inheriting interfaces. the ended event the ended event is fired whe...
...this example makes use of the following web api interfaces: audiocontext, oscillatornode, periodicwave, and gainnode.migra...
...s routed through your app.controlling multiple parameters with constantsourcenodethis article demonstrates how to use a constantsourcenode to link multiple parameters together so they share the same value, which can be changed by simply setting the value of the constantsourcenode.offset parameter.example and tutorial: simple synth
keyboardthis article presents the code and working demo of a video
keyboard you can play using the mouse. the
keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume slider beneath the
keyboard. this example makes use of the following web api interfaces: audiocontext, oscillatornode, periodicwave, and gainnode.migrating from webkitaudiocontextin this article, we cover the differenc...
Window.captureEvents() - Web APIs
the window.captureevents() method registers the window to capture all events of the specified type. syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.
keydown, event.
keypress, event.
keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example <!doctype html> <html lang="en"> <head> <!-- ... --> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>clic...
... specification this is not part of any specification. ...
...nts of the type you specify (for example, event.click) no longer pass through to "lower" objects in the hierarchy. in order for events to "bubble up" in the way that they normally do, you must call window.releaseevents() ( ) on the window to keep it from trapping events. note that you can pass a list of events to this method using the following syntax: window.captureevents(event.
keypress | event.
keydown | event.
keyup). specification this is not part of any specification. ...
Using the link role - Accessibility
o a resource that is in the application or external. when this role is added to an element, tab can be used to change focus to the link, and enter used to execute the link. note: where possible, it is recommended that you use a native <a> element rather than the link role, as native elements are more widely supported by older user agents and assistive technology. native <a> elements also support
keyboard and focus requirements by default, without need for additional customization. the tabindex attribute may optionally be used with this role to directly specify the position of the element in the tab order. possible effects on user agents and assistive technology when the link role is added to an element, or such an element becomes visible, the user agent should do the following: expose...
...large links. note: opinons may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples this example shows how to implement a fake link using a <span> element. this includes javascript to grab the location and handle navigating to the new location using window.open() via clicking, and using
keyboard, css to give the desired visuals of a link, the tabindex="0" attribute to make it
keyboard-focussable, and role="link" to make it recognised as a link by assistive technology. this is a huge amount of work just to recreate something you've get for free using the <a> element, so you should really use that if possible. but this shows that it can be done. you should however note that there ar...
... id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryselector('span'); //handles clicks and
keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.
key === 'enter') { let ref = e.target != null ? e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('
keydown', navigatelink); result notes if pressing the lin...
Using the slider role - Accessibility
markup that allows a user to select a value from within a given range. the slider role is assigned to the "thumb," the control that is adjusted to change the value. as the user interacts with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. see the examples section below for more information. ...
...lue from within a given range. the slider role is assigned to the "thumb," the control that is adjusted to change the value. as the user interacts with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. see the examples section below for more information.
keyboard and focus the slider should be
keyboard focusable and operable. ...
...s with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. see the examples section below for more information.
keyboard and focus the slider should be
keyboard focusable and operable. when the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag. arrow
keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows):
key(s) action right and up arrows increase the selected value left and down arrows decrease the selected value page up and page down optionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100) ...
ARIA: banner role - Accessibility
ch page may have a banner landmark, but each page should be limited to only one header with the role of banner. in the case of a page containing nested document and/or application roles, each nested document or application role may also have one banner landmark. if a page includes more than one banner landmark, each should have a unique label. ...
...ed aria roles, states, and properties none
keyboard interactions none required javascript features none examples here's a fake simple banner with a skip to navigation link, a logo, a title and a subtitle. as this is the main header for the site, we've added the banner landmark role to the container element. ...
...tainer element. <div role="banner"> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to
keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </div> we could also have written the above with the html header element: <header> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to
keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </header> best practices while it is best to use the header element and ensure it is not a descendant of any subsection of the page, sometimes you don't have access to the underlying html. if this is the case, you can add the role of banner to the m...
ARIA: feed role - Accessibility
eives focus. if the addition of articles occupies the main browser thread, make sure to set aria-busy="true" on the feed itself, and make sure to set it back to false when processing ends, or the user may not see the updates. to ensure good user experience, avoid inserting or removing articles in the middle of a feed, load new articles before the user has reached the end of the feed, and provide
keyboard commands for moving focus among articles so that
keyboard users can navigate through your feed. see
keyboard interactions below. if the number of articles is known, set aria-setsize on the articles themselves. however, if the total number is extremely large, indefinite, or changes often, set aria-setsize="-1" to indicate that the size of the feed is not known. another feature of the feed p...
...rolling of the content based on which article contains dom focus. loading or removing feed articles based on which article contains dom focus. in the context of a feed, assistive technologies with a reading mode are responsible for: indicating which article contains the reading cursor by ensuring the article element or one of its descendants has dom focus. providing reading mode
keys that move dom focus to the next and previous articles. providing reading mode
keys for moving the reading cursor and dom focus past the end and before the start of the feed.
keyboard interaction supporting the following, or a similar, interface is recommended when focus is inside the feed: page down: move focus to next article. page up: move focus to previous article. control + ...
...inside the feed: page down: move focus to next article. page up: move focus to previous article. control + end: move focus to the first focusable element after the feed. control + home: move focus to the first focusable element before the feed. if a feed is nested within a feed, such as a comments feed within a feed of blog posts, the convention is to tab into the nested feed with the tab
key and to provide another
key, such as alt + page down, to navigate from an 'outer' article to the first item in that article's nested feed. navigate between the nested feed and main feed with control + end , moving focus from the inner feed to the next article in the outer feed. wai-aria roles, states, and properties aria-labelled if the feed has no visible title, the feed element has a lab...
ARIA: Region role - Accessibility
<div role="region" aria-label="example"> <!-- region content --> </div> description the region role is an aria landmark role. landmark roles provide a way to identify the organization and structure of a web page. by classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically. screen readers use landmark roles to provide
keyboard navigation to important sections of a page. the region role should be reserved for sections of content sufficiently important that users will likely want to navigate to the section easily and to have it listed in a summary of the page. a region role is a more generic term, and should only be used if the section needing to be identified is not accurately described by one of the other landmar...
...a section has a role of region if it is given an accessible name. developers should always prefer using the correct semantic html element, in this case <section>, over using aria. associated wai-aria roles, states, and properties aria-labelledby use this attribute to label the region. often, the value of the aria-labelledby attribute will be the id of the element used to title the section.
keyboard interactions none. required javascript features none. examples <div role="region" aria-labelledby="region-heading"> <h2 id="region-heading">this heading's <code>id</code> attribute helps this region have an accessible name</h2> <!-- region content --> </div> accessibility concerns use sparingly! landmark roles are intended to be used sparingly, to identify larger overall sections...
...ase-reconsider"> <h3 id="please-reconsider">please reconsider your document structure</h3> <!-- content --> </div> in this example, the region's label is being generated by the aria-labelledby attribute. scrolling content areas with overflow text if there is a content area with tabindex="0", add role="region" to convey to screen reader users that is a generic region. this is done to allow
keyboard-only users to scroll regions with overflow text. svg role="region" can be declared on areas of svg along with an aria-label to allow individual sections of the svg to be described. added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sectio...
Accessibility Information for Web Authors - Accessibility
ations such as schools are starting to follow these guidelines as well. web content accessibility guidelines (wcag) 1.0 another important set of guidelines from the w3c web accessibility initiative (wai). the european union is looking to base their upcoming accessibility regulations on these guidelines. these guidelines are discussed on the wai interest group discussion list. how-to's
key-navigable custom dhtml widgets in mozilla & ie this document discusses how to use tabindex, element.focus() and on
keypress to make custom dhtml widgets such as menus or tree views
keyboard accessible. accessible web page authoring ibm has put together a simple, practical resource for web authors to learn accessibility the fast and painless way. highly recommended, an excellent resource. ...
...ent gives a plan which is being developed by ibm, mozilla and wai protocols and formats working group (pfwg) to address the issue of accessible dhtml. dynamic web content is not accessible, because it uses vanilla <div>'s and <span>'s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views. ...
... join the mozilla accessibility community live chat both end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility. ...
:focus-visible - CSS: Cascading Style Sheets
the :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the ua (user agent) determines via heuristics that the focus should be made evident on the element. (many browsers show a “focus ring” by default in this case.) this selector is useful to provide a different focus indicator based on the user’s input modality (mouse vs.
keyboard). note that firefox supports similar functionality through an older, prefixed pseudo-class — :-moz-focusring. syntax :focus-visible examples basic example in this example, the :focus-visible selector uses the ua's behavior to determine when to match. compare what happens when you click on the different controls with a mouse, versus when you tab through them using a
keyboard. note the difference in behavior from ...
...this matches the native focus behavior for controls like <button>. <custom-button tabindex="0" role="button">click me</custom-button> custom-button { display: inline-block; margin: 10px; } custom-button:focus { /* provide a fallback style for browsers that don't support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible)...
... accessibility concerns low vision make sure the visual focus indicator can be seen by people with low vision. this will also benefit anyone use a screen in a brightly lit space (like outside in the sun)...
-ms-high-contrast - CSS: Cascading Style Sheets
all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors. ...
...this helps keep the content more predictable. specifications not part of any standard. remarks as of microsoft edge 18, -ms-high-contrast: none is no longer supported. ...
...this helps keep the content more predictable. specifications not part of any standard. remarks as of microsoft edge 18, -ms-high-contrast: none is no longer supported. ...
Ordering Flex Items - CSS: Cascading Style Sheets
und your layout in a very confusing way. by tabbing around any of the live examples on this page, you can see how order is potentially creating a strange experience for anyone not using a pointing device of some kind. to read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources. flexbox and the
keyboard navigation disconnect html source order vs css display order the responsive order conflict for
keyboard focus use cases for order there are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. used carefully the order property can allow for some useful common patterns to be easily implemented. you migh...
...the card also has a date; the finished design we want to create is something like this. visually the date appears above the heading, in the source. ...
...rder of -1. this pulls it up above the heading. these small tweaks are the sort of cases where the order property makes sense. keep the logical order as the reading and tab order of the document, and maintain that in the most accessible and structured fashion. then use order for purely visual design tweaks. when doing so take care that you are not reordering items that could be accessed by the
keyboard as a user is tabbing around. especially when using newer layout methods you should ensure that your browser testing includes testing the site using
keyboard only, rather than a mouse or touchscreen. you will quickly see if your development choices make getting around the content difficult. ...
Variable fonts guide - CSS: Cascading Style Sheets
ample code follows at the end of the guide. weight weight (represented by the wght tag) defines the design axis of how thin or thick (light or heavy, in typical typographic terms) the strokes of the letterforms can be. for a long time in css there has existed the ability to specify this via the font-weight property, which takes numeric values ranging from 100 to 900 in increments of 100, and
keywords like normal or bold, which are simply aliases for their corresponding numeric values (400 and 700 in this case). these are still applied when dealing with non-variable or variable fonts, but with variable ones, any number from 1 to 1000 is now valid. it should be noted that at this point there is no way in the @font-face declaration to 'map' a specific point on the variation axis of a varia...
...l or bold, which are simply aliases for their corresponding numeric values (400 and 700 in this case). these are still applied when dealing with non-variable or variable fonts, but with variable ones, any number from 1 to 1000 is now valid. it should be noted that at this point there is no way in the @font-face declaration to 'map' a specific point on the variation axis of a variable font to the
keyword bold (or any other
keyword). this can generally be resolved fairly easily, but does require an extra step in writing your css: font-weight: 375; font-variation-settings: 'wght' 375; the following live example's css can be edited to allow you to play with font weight values. width width (represented by the wdth tag) defines the design axis of how narrow or wide (condensed or extended, i...
...esn’t perform any kind of character substitution. it is also variable, in that it is expressed as a numeric range. this allows the font to be varied anywhere along that axis. the allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit. however, any value from -90–90 degrees is valid. note: the deg
keyword is not used when utilizing font-variation-settings. font-style: oblique 14deg; font-variation-settings: 'slnt' 14; the following live example's css can be edited to allow you to play with font slant/oblique values. optical size this is something new to digital fonts and css, but is actually a centuries-old technique in designing and creating metal type. optical sizing refers to the pr...
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
efault traversal order of sequential navigation modes (such as cycling through links, see e.g. tabindex html5). if you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. in addition, the reordering will not change tab order. this means that someone navigating using the
keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line. the specification warns authors (the csswg term for web developers) not to do this reordering. authors must use order and the grid-placement properties only for visual, not logical, reordering of content. style sheets that ...
... in the source. create a responsive, and responsible grid with a solid document you can begin to add your layout, it is likely you will be using media queries to create additional columns and make changes for different screen sizes and devices. grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. the
key here is to keep testing, a very simple test is to tab around the document. does that order still make sense? check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. if so that would be a sign that you need to address something about the layout. returning to the source if at any time in the design process you find yourself using grid to relocate the posit...
...issues are similar to those raised regarding css flexbox, which also gives methods of reordering content with flex-direction and the order property. the concept of visual display following document source order is detailed in the wcag techniques for success criteria – technique c27. as a way to start thinking about these issues, as you use css grid layout i would suggest reading flexbox & the
keyboard navigation disconnect from léonie watson. also the video of léonie’s presentation from ffconf is helpful to understand more about how screen readers work with the visual representation of things in css. adrian roselli has also posted regarding tab order in various browsers – although this was prior to grid support being fully implemented in firefox. ...
Layout using named grid lines - CSS: Cascading Style Sheets
when defining the grid, i name my lines inside square brackets. those names can be anything you like. i have defined a name for the start and end of the container, both for rows and columns. then defined the centre block of the grid as content-start and content-end again, both for columns and rows although you do not need to name all of the lines on your grid. you might choose to name just some
key lines for your layout. .wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; } once the lines have names, we can use the name to place the item rather than the line number. .box1 { grid-column-start: main-start; grid-row-start: ma...
... have multiple lines named col-start if you place an item to start after line col-start grid uses the first line named col-start, in our case that will be the far left line. to address another line use the name, plus the number for that line. to place our item from the first line named col-start to the 5th, we can use: .item1 { grid-column: col-start / col-start 5 } you can also use the span
keyword here. my next item will be placed from the 7th line named col-start and span 3 lines. .item2 { grid-column: col-start 7 / span 3; } <div class="wrapper"> <div class="item1">i am placed from col-start line 1 to col-start 5</div> <div class="item2">i am placed from col-start line 7 spanning 3 lines</div> </div> if you take a look at this layout in the firefox grid highlighter yo...
...ich each have a start and end line. .wrapper { grid-template-columns: repeat(4, [col-start] 1fr [col-end] ); } if we write this definition out without using repeat notation it would look like this. .wrapper { grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end]; } if you have used a track list then you can use the span
keyword not just to span a number of lines but also to span a number of lines of a certain name. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-...
Using CSS gradients - CSS: Cascading Style Sheets
sitioning radial color stops again like linear gradients, you can position each radial color stop with a percentage or absolute length. <div class="radial-gradient"></div> div { width: 120px; height: 120px; } .radial-gradient { background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); } positioning the center of the gradient you can position the center of the gradient with
keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top. <div class="radial-gradient"></div> div { width: 120px; height: 240px; } .radial-gradient { background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); } sizing radial gradients unlike line...
...o create a conic gradient are two colors. ...
..., the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up: <div class="simple-conic"></div> div { width: 120px; height: 120px; } .simple-conic { background: conic-gradient(red, blue); } positioning the conic center like radial gradients, you can position the center of the conic gradient with
keyterms, percentage, or absolute lengths, with the
keyword "at" <div class="conic-gradient"></div> div { width: 120px; height: 120px; } .conic-gradient { background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); } changing the angle like radial gradients, you can position the center of the conic gradient with
keyterms, percentage, or absolute lengths, with the
keyword "at" <div class="conic-gradient"></div> div {...
CSS Logical Properties and Values - CSS: Cascading Style Sheets
x-block-size max-inline-size min-block-size min-inline-size properties for margins, borders and padding border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-color (logical
keyword) border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-start-start-radius border-start-end-radius border-end-start-radius border-end-end-radius border-style (logic...
... border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-start-start-radius border-start-end-radius border-end-start-radius border-end-end-radius border-style (logical
keyword) border-width (logical
keyword) margin (logical
keyword) margin-block margin-block-end margin-block-start margin-inline margin-inline-end margin-inline-start padding (logical
keyword) padding-block padding-block-end padding-block-start padding-inline padding-inline-end padding-inline-start properties for floating and positioning clear (inline-end and inline-start k...
...in (logical
keyword) margin-block margin-block-end margin-block-start margin-inline margin-inline-end margin-inline-start padding (logical
keyword) padding-block padding-block-end padding-block-start padding-inline padding-inline-end padding-inline-start properties for floating and positioning clear (inline-end and inline-start
keywords) float (inline-end and inline-start
keywords) inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start other properties caption-side (inline-end and inline-start
keywords) overflow-block overflow-inline overscroll-behavior-block overscroll-behavior-inline resize (block and inline
keywords) text-align (end and start
keywords) deprecated properties offset-block-end ...
Introducing the CSS Cascade - CSS: Cascading Style Sheets
le as a whole participates in the cascade: here, the @font-face identified by its font-family descriptor. if several @font-face rules with the same descriptor are defined, only the most appropriate @font-face, as a whole, is considered. while the declarations contained in most at-rules — such as those in @media, @document, or @supports — participate in the cascade, declarations contained in @
keyframes don't. as with @font-face, only the at-rule as a whole is selected via the cascade algorithm. finally, note that @import and @charset obey specific algorithms and aren't affected by the cascade algorithm. origin of css declarations the css cascade algorithm's job is to select css declarations in order to determine the correct values for css properties. css declarations originate from dif...
...ything in css back to a known state. all lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely. css animations and the cascade css animations, using @
keyframes at-rules, define animations between states.
keyframes don't cascade, meaning that at any given time css takes values from only one single @
keyframes, and never mixes multiple ones together. when several
keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together. example let's look at an example involving multiple sources of cs...
...efore, it is the last one that is then selected: margin-left: 3px note that the declaration defined in the user css, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm. specifications specification status comment css cascading and inheritance level 4 candidate recommendation added the revert
keyword, which allows rolling a property back a cascade level. css cascading and inheritance level 3 candidate recommendation removed the override cascade origin, as it was never used in a w3c standard. css level 2 (revision 1)the definition of 'the cascade' in that specification. recommendation css level 1the definition of 'the cascade' in that specification. ...
CSS reference - CSS: Cascading Style Sheets
also included is a brief dom-css / cssom reference. basic rule syntax style rule syntax style-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] see the index of selectors, pseudo-classes, and pseudo-elements below. ...
...s selectors. be aware that any syntax error in a rule definition invalidates the entire rule. invalid rules are ignored by the browser. note that css rule definitions are entirely (ascii) text-based, whereas dom-css / cssom (the rule management system) is object-based. at-rule syntax as the structure of at-rules varies widely, please see at-rule to find the syntax of the specific one you want.
keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. --webkit-line-clampa:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanim...
...zhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@
keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-border...
Viewport concepts - CSS: Cascading Style Sheets
originally 1200 x 800 pixels. upon zooming in, the viewport became 800 x 533 pixels. this is the layout viewport. sticky headers or footers, with the following styles, will stick to the top and bottom of the layout viewport respectively. body > header { position: fixed; top: 0; } body > footer { position: fixed; bottom: 0; } we got the 800 x 533 measurement when we zoomed in using the
keyboard. the header and footer stayed flush against the top and bottom of the window. but what if we had pinched-zoomed on a tablet? what if a dynamic
keyboard pops open on a phone? the web contains two viewports, the layout viewport and the visual viewport. the visual viewport is the part of the web page that is currently visible in the browser and can change. when the user pinch-zooms the page, p...
...nd footer stayed flush against the top and bottom of the window. but what if we had pinched-zoomed on a tablet? what if a dynamic
keyboard pops open on a phone? the web contains two viewports, the layout viewport and the visual viewport. the visual viewport is the part of the web page that is currently visible in the browser and can change. when the user pinch-zooms the page, pops open a dynamic
keyboard, or when a previously hidden address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged. sticky headers or footers, as discussed above, stick to the top and bottom of the layout viewport, and therefore remain in view when we zoom in with the
keyboard. if you pinch-zoom, the layout viewport may not be fully visible. if you magnify from the middle of the lay...
...screen — which is the visual viewport. the visual viewport is the currently visible portion of the layout viewport. if you scroll down, you are changing the contents of the visual viewport and bringing the bottom of the layout viewport into view, displaying the sticky footer, which will then stay stuck at the bottom. the visual viewport is the visual portion of a screen not including on-screen
keyboards, areas outside of a pinch-zoom area, or other feature that doesn't scale with the dimensions of a page. the visual viewport is the same size as the layout viewport or smaller. for a page containing iframes, objects, or external svg, both the containing pages and each included file has their own unique window object. only the top-level window has a visual viewport that may be distinct from ...
align-items - CSS: Cascading Style Sheets
nment of items on the block axis within their grid area. the interactive example below demonstrates some of the values for align-items using grid layout. 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. ...
... align-items: flex-end; /* pack flex items from the end */ /* baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* global values */ align-items: inherit; align-items: initial; align-items: unset; values normal the effect of this
keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the
keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in static position of absolutely-positioned layouts, the
keyword behaves as stretch. for flex items, the
keyword behaves as stretch. for grid items, this
keyword leads to a behavi...
...flex items are aligned such that their flex container baselines align. the item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line. stretch flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints. safe used alongside an alignment
keyword. if the chosen
keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. unsafe used alongside an alignment
keyword. regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. formal definition in...
animation-name - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. ...
...l animation properties at once. syntax /* single animation */ animation-name: none; animation-name: test_05; animation-name: -specific; animation-name: sliding-vertically; /* multiple animations */ animation-name: test1, animation4; animation-name: none, -moz-specific, sliding; /* global values */ animation-name: initial animation-name: inherit animation-name: unset values none a special
keyword denoting no
keyframes. it can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade. <custom-ident> a name identifying the animation. this identifier is composed of a combination of case-sensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). the first non-dash character must be a ...
...n-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ none | <
keyframes-name> ]#where <
keyframes-name> = <custom-ident> | <string> examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-name' in that specification. working draft initial definition. ...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
ets that ship with the mozilla platform. starting with gecko/firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets. compatibility note: if you wish to use this property on websites, you should test it very carefully. although it is supported in most modern browsers, its implementation varies widely. in older browsers, even the
keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. the differences are smaller in the newest browsers. syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearan...
...this is the default. auto div{ color: black; -moz-appearance: auto; -webkit-appearance: auto; appearance:auto...
... value demo browser description attachment div{ color: black; -moz-appearance: attachment; -webkit-appearance: attachment; } <div>lorem</div> safari borderless-attachment div{...
attr() - CSS: Cascading Style Sheets
eturned. /* simple usage */ attr(data-count); attr(title); /* with type */ attr(src url); attr(data-count number); attr(data-width px); /* with fallback */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default"); syntax values attribute-name is the name of an attribute on the html element referenced in the css. ...
...it is not reparsed, and in particular the characters are used as-is instead of css escapes being turned into different characters. an empty string. ...
...ord associated type comment default value string <string> the attribute value is treated as a css <string>. it is not reparsed, and in particular the characters are used as-is instead of css escapes being turned into different characters. an empty string. color <color> the attribute value is parsed as a hash (3- or 6-value hash) or a
keyword. it must be a valid css <string> value. leading and trailing spaces are stripped. currentcolor url <url> the attribute value is parsed as a string that is used inside a css url() function. relative url are resolved relatively to the original document, not relatively to the style sheet. leading and trailing spaces are stripped. the url about:invalid...
background-color - CSS: Cascading Style Sheets
the background-color css property sets the background color of an element. 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. ...
... values <color> the uniform color of the background. it is rendered behind any background-image that is specified, although the color will still be...
... css level 1the definition of 'background-color' in that specification. initial definition ...
background-repeat - CSS: Cascading Style Sheets
urce for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). ...
...image is not repeated (and hence the background image painting area will not necessarily be entirely covered). the position of the non-repeated background image is defined by the background-position css property. formal definition initial valuerepeatapplies toall elements. ...
...of background-repeat. specifications specification status comment css backgrounds and borders module level 3the definition of 'background-repeat' in that specification. candidate recommendation adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the space and round
keywords, and for backgrounds on inline-level elements by precisely defining the background painting area. css level 2 (revision 1)the definition of 'background-repeat' in that specification. recommendation no significant changes. css level 1the definition of 'background-repeat' in that specification. recommendation initial definition. ...
<basic-shape> - CSS: Cascading Style Sheets
the shape functions interpolate as a simple list. the list values interpolate as <length>, <percentage>, or calc() where possible. if list values are not one of those types but are identical, those values do interpolate. both shapes must use the same reference box. if both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side
keywords, interpolate between each value in the shape functions. if both shapes are of type inset(), interpolate between each value in the shape functions. if both shapes are of type polygon(), both polygons have the same number of vertices, and use the same <fill-rule>, interpolate between each value in the shape functions. if both shapes are of type path(), both paths strings have the same numbe...
...ve the same number of vertices, and use the same <fill-rule>, interpolate between each value in the shape functions. if both shapes are of type path(), both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers. in all other cases no interpolation occurs. examples animated polygon in this example, we use the @
keyframes at-rule to animate a clip path between two polygons. note that both polygons have the same number of vertices, which is necessary for this type of animation to work. html <div></div> css div { width: 300px; height: 300px; background: repeating-linear-gradient(red, orange 50px); clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); animatio...
...t both polygons have the same number of vertices, which is necessary for this type of animation to work. html <div></div> css div { width: 300px; height: 300px; background: repeating-linear-gradient(red, orange 50px); clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); animation: 4s poly infinite alternate ease-in-out; margin: 10px auto; } @
keyframes poly { from { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); } to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); } } result specifications specification status comment css shapes module level 1the definition of '<basic-shape>' in that specification. ...
border-bottom-width - CSS: Cascading Style Sheets
the border-bottom-width css property sets the width of the bottom border of an element. 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. ...
...a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* global
keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a
keyword. ...
...; border-bottom-width: medium; border-bottom-width: thick; /* <length> values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* global
keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a
keyword. if it's a
keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each
keyword, the precise result when using one of them is implementation-specific. nevertheless, they ...
border-left-width - CSS: Cascading Style Sheets
the border-left-width css property sets the width of the left border of an element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...s stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* global
keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a
keyword. ...
...left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* global
keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a
keyword. if it's a
keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each
keyword, the precise result when using one of them is implementation-specific. nevertheless, they ...
border-right-width - CSS: Cascading Style Sheets
the border-right-width css property sets the width of the right border of an element. 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. ...
...ed in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ border-right-width: thin; border-right-width: medium; border-right-width: thick; /* <length> values */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /* global
keywords */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a
keyword. ...
...th: thin; border-right-width: medium; border-right-width: thick; /* <length> values */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /* global
keywords */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a
keyword. if it's a
keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each
keyword, the precise result when using one of them is implementation-specific. nevertheless, they ...
border-top-width - CSS: Cascading Style Sheets
the border-top-width css property sets the width of the top border of an element. 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. ...
...mple 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. ...
.../*
keyword values */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* <length> values */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /* global
keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a
keyword. if it's a
keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each
keyword, the precise result when using one of them is implementation-specific. ...
border-width - CSS: Cascading Style Sheets
ource for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... when one value is specified, it applies the same width to all four sides. ...
... top and bottom, the second to the left and right. when three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom. when four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise). values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a
keyword. if it's a
keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each
keyword, the precise result when using one of them is implementation-specific. ...
clear - CSS: Cascading Style Sheets
if an element contains only floated elements, its height collapses to nothing. if you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. this is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it. ...
...ildren. this is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it. #container::after { content: ""; display: block; clear: both; } syntax /*
keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* global values */ clear: inherit; clear: initial; clear: unset; values none is a
keyword indicating that the element is not moved down to clear past floating elements. left is a
keyword indicating that the element is moved down to clear past left floats. ...
...yntax /*
keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* global values */ clear: inherit; clear: initial; clear: unset; values none is a
keyword indicating that the element is not moved down to clear past floating elements. left is a
keyword indicating that the element is moved down to clear past left floats. right is a
keyword indicating that the element is moved down to clear past right floats. both is a
keyword indicating that the element is moved down to clear past both left and right floats. inline-start is a
keyword indicating that the element is moved down to clear floats on start side of its containing block, that is the left floats on ltr scripts and the right floats on rtl scripts. inline-end is a ke...
color - CSS: Cascading Style Sheets
ies and is the default for other color properties, such as border-color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. for an overview of using color in html, see applying color to html elements using css. ...
...nations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuevaries from one browser to anotherapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueif the value is translucent, the computed value will be the rgba() corresponding one. if it isn't, it will be the rgb() corresponding one. ...
...{ color: hsla(0, 100%, 50%, 0.5); } specifications specification status comment css color module level 4the definition of 'color' in that specification. working draft adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them. adds color
keyword rebeccapurple. adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value. adds hwb(), device-cmyk(), and color() functions. css color module level 3the definition of 'color' in that specification. recommendation deprecates system-colors. adds svg colors. adds the rgba(), hsl(), and hsla() functions. css level 2 (revision 1)the def...
content - CSS: Cascading Style Sheets
the content css property replaces an element with a generated value. objects inserted using the content property are anonymous replaced elements. ...
... normal computes to none for the ::before and ::...
...eline 1.3 – mdn understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies to::before and ::after pseudo-elementsinheritednocomputed valueon elements, always computes to normal. on ::before and ::after, if normal is specified, computes to none. ...
flex-basis - CSS: Cascading Style Sheets
to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority. syntax /* specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* intrinsic sizing
keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically size based on the flex item’s content */ flex-basis: content; /* global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the
keyword content or a <'width'>. values <'width'> an absolute <length>, a <pe...
...negative values are invalid. defaults to auto. content indicates automatic sizing, based on the flex item’s content. ...
...e box layout, and thus some older implementations will not support it. the equivalent effect can be had by using auto together with a main size (width or height) of auto. history: originally, flex-basis:auto meant "look at my width or height property". then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property"
keyword. it was implemented in bug 1032922. then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content
keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that
keyword). formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to...
font-variant - CSS: Cascading Style Sheets
perties of font-variant are: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. none sets the value of the font-variant-ligatures to none and the values of the other longhand property as normal, their initial value. ...
...values> specifies the
keywords related to the font-variant-ligatures longhand property. the possible values are: common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, and no-contextual. stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation() specifies the
keywords and functions related to the font-variant-alternates longhand property. small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps specifies the
keywords and functions related to the font-variant-caps longhand property. ...
...(), annotation() specifies the
keywords and functions related to the font-variant-alternates longhand property. small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps specifies the
keywords and functions related to the font-variant-caps longhand property. <numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero specifies the
keywords related to the font-variant-numeric longhand property. the possible values are: lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, and slashed-zero. <east-asian-variant-values>, <east-asian-width-values>, ruby specifies the
keywords related to the font-variant-east-asian longhand property. the possible values are: jis78, jis83, jis...
grid-auto-columns - CSS: Cascading Style Sheets
project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if a grid item is positioned into a column that is not explicitly sized by grid-template-columns, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ...
... size of the grid container is indefinite, the percentage value is treated like auto. <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. when appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)). max-content is a
keyword representing the largest maximal content contribution of the grid items occupying the grid track. min-content is a
keyword representing the largest minimal content contribution of the grid items occupying the grid track. minmax(min, max) is a functional notation that defines a size range greater than or equal to min and less than or equal to max. if max is smaller than min, then max is ig...
......
grid-auto-rows - CSS: Cascading Style Sheets
ive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
... size of the grid container is indefinite, the percentage value is treated like auto. <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. when appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)). max-content is a
keyword representing the largest maximal content contribution of the grid items occupying the grid track. min-content is a
keyword representing the largest minimal content contribution of the grid items occupying the grid track. minmax(min, max) is a functional notation that defines a size range greater than or equal to min and less than or equal to max. if max is smaller than min, then max is ig...
... max) is a functional notation that defines a size range greater than or equal to min and less than or equal to max. if max is smaller than min, then max is ignored and the function is treated as min. as a maximum, a <flex> value sets the track’s flex factor. as a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint). auto is a
keyword that is identical to maximal content if it's a maximum. as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties. formal definition initial valueautoapplies togrid containersinheritednoperc...
grid-template-columns - CSS: Cascading Style Sheets
the grid-template-columns css property defines the line names and track sizing functions of the grid columns. 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. ...
...size of the track by the minimum amount that would result in honoring the percentage. <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. when appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)). max-content is a
keyword representing the largest maximal content contribution of the grid items occupying the grid track. min-content is a
keyword representing the largest minimal content contribution of the grid items occupying the grid track. minmax(min, max) is a functional notation that defines a size range greater than or equal to min and less than or equal to max. if max is smaller than min, then max is ig...
...the largest minimal content contribution of the grid items occupying the grid track. minmax(min, max) is a functional notation that defines a size range greater than or equal to min and less than or equal to max. if max is smaller than min, then max is ignored and the function is treated as min. as a maximum, a <flex> value sets the track’s flex factor. it is invalid as a minimum. auto is a
keyword that is identical to maximal content if it's a maximum. as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties. fit-content( [ <length> | <percentage> ] ) represents the formula min(max-co...
hanging-punctuation - CSS: Cascading Style Sheets
the hanging-punctuation css property specifies whether a punctuation mark should hang at the start or end of a line of text. hanging punctuation may be placed outside the line box. ...
... the hanging-punctuation css property specifies whether a punctuation mark should hang at the start or end of a line of text. hanging punctuation may be placed outside the line box. ...
...side the line box. /*
keyword values */ hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last; hanging-punctuation: force-end; hanging-punctuation: allow-end; /* two
keywords */ hanging-punctuation: first force-end; hanging-punctuation: first allow-end; hanging-punctuation: first last; hanging-punctuation: last force-end; hanging-punctuation: last allow-end; /* three
keywords */ hanging-punctuation: first force-end last; hanging-punctuation: first allow-end last; /* global values */ hanging-punctuation: inherit; hanging-punctuation: initial; hanging-punctuation: unset; syntax the hanging-punctuation property may be specified with one, two, or three values. one-value syntax uses any one of the
keyword values in the list below. two-value syntax uses one of...
letter-spacing - CSS: Cascading Style Sheets
the text. positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. 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. ...
... <length> specifies extra inter-character space in addition to the default space between characters. values may be negative, but there may be implementation-specific limits. ...
...t can ensure all font families automatically maintain their legibility. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies toall elements. ...
mask-border-slice - CSS: Cascading Style Sheets
ss property divides the image set by mask-border-source into regions. these regions are used to form the components of an element's mask border. syntax /* all sides */ mask-border-slice: 30%; /* vertical | horizontal */ mask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* using the `fill`
keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice. negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when one p...
...m illustrates the location of each region. zones 1-4 are corner regions. each one is used a single time to form the corners of the final border image. zones 5-8 are edge regions. these are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element. zone 9 is the middle region. it is discarded by default, but is used like a background image if the
keyword fill is set. the mask-border-repeat, mask-border-width, and mask-border-outset properties determine how these regions are used to form the final mask border. formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of the mask border imagecomputed valueas specifi...
...o create the border mask. mask-border-slice: 30 fill; chromium-based browsers support an outdated version of this property — mask-box-image-slice — with a prefix: -webkit-mask-box-image-slice: 30 fill; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect. note: the fill
keyword needs to be included if you want the element's content to be visible. specifications specification status comment css masking module level 1the definition of 'mask-border-slice' in that specification. candidate recommendation initial defintion ...
max-height - CSS: Cascading Style Sheets
x-height. 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. max-height overrides height, but min-height overrides max-height. syntax /* <length> value */ max-height: 3.5em; /* <percentage> value */ max-height: 75%; /*
keyword values */ max-height: none; max-height: max-content; max-height: min-content; max-height: fit-content(20em); /* global values */ max-height: inherit; max-height: initial; max-height: unset; values <length> defines the max-height as an absolute value. <percentage> defines the max-height as a percentage of the containing block's height. auto the browser will calculate and select a ma...
... editor's draft css box sizing module level 3the definition of 'max-height' in that specification. working draft adds the max-content, min-content, fit-...
...ues table { max-height: 75%; } form { max-height: none; } specifications specification status comment css box sizing module level 4the definition of 'max-height' in that specification. editor's draft css box sizing module level 3the definition of 'max-height' in that specification. working draft adds the max-content, min-content, fit-content
keywords. css level 2 (revision 1)the definition of 'max-height' in that specification. recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxint...
offset-position - CSS: Cascading Style Sheets
the offset-position css property defines the initial position of the offset-path. syntax /*
keyword values */ offset-position: auto; offset-position: top; offset-position: bottom; offset-position: left; offset-position: right; offset-position: center; /* <percentage> values */ offset-position: 25% 75%; /* <length> values */ offset-position: 0 0; offset-position: 1cm 2cm; offset-position: 10ch 8em; /* edge offsets values */ offset-position: bottom 10px right 20px; offset-position: right 3em bottom 10px; offset-position: bottom 10px right; offset-position: top right 10px; /* global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property. <position>...
...ion: top right 10px; /* global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property. <position> a <position>. a position defines an x/y coordinate, to place an item relative to the edges of an element's box. it can be defined using one to four values. if two non-
keyword values are used, the first value represents the horizontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be center. if three or four values are used, the length-percentage values are offsets for the preceding
keyword value(s). for more explanation of these value types, see background-position. formal definition init...
... working draft initial definition ...
perspective-origin - CSS: Cascading Style Sheets
uest. the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed. syntax /* one-value syntax */ perspective-origin: x-position; /* two-value syntax */ perspective-origin: x-position y-position; /* when both x-position and y-position are
keywords, the following is also valid */ perspective-origin: y-position x-position; /* global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-position indicates the position of the abscissa of the vanishing point. it can have one of the following values: <length-percentage> indicating the position as an absolute length value or rel...
...x-position; /* global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-position indicates the position of the abscissa of the vanishing point. it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the width of the element. the value may be negative. left, a
keyword being a shortcut for the 0 length value. center, a
keyword being a shortcut for the 50% percentage value. right, a
keyword being a shortcut for the 100% percentage value. y-position indicates the position of the ordinate of the vanishing point. it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the heig...
... a
keyword being a shortcut for the 50% percentage value. right, a
keyword being a shortcut for the 100% percentage value. y-position indicates the position of the ordinate of the vanishing point. it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the height of the element. the value may be negative. top, a
keyword being a shortcut for the 0 length value. center, a
keyword being a shortcut for the 50% percentage value. bottom, a
keyword being a shortcut for the 100% percentage value. formal definition initial value50% 50%applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimp...
pointer-events - CSS: Cascading Style Sheets
the pointer-events css property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. 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. ...
... values auto the element behaves as it would if the pointer-events property were not specified. in svg content, this value and the value visiblepainted have the same effect. none the element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other val...
... travels along the parent chain, and trigger event listeners on the parent as appropriate. of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath). elements with pointer-events: none will still receive focus through sequential
keyboard navigation using the tab
key. we would like to provide finer grained control (than just auto and none) in html for which parts of an element will cause it to "catch" pointer events, and when. to help us in deciding how pointer-events should be further extended for html, if you have any particular things that you would like to be able to do with this property, then please add them to the use...
revert - CSS: Cascading Style Sheets
thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist). it can be applied to any css property, including the css shorthand all. this removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached. ...
...thor origin), revert rolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default style. if used in a user's custom stylesheet, or if the style was applied by the user (the user origin), revert rolls back the cascaded value to the user agent's default style. if used within the user agent's default styles, this
keyword is functionally equivalent to unset. the revert
keyword works exactly the same as unset in many cases. the only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side). revert will not affect rules applied to children of an element you reset (but will remove effects of a parent rule on a child). so if you have a c...
...you reset (but will remove effects of a parent rule on a child). so if you have a color: green for all sections and all: revert on a specific section the color of the section will be black. but if you have a rule to make all paragraphs red then all paragraphs will still be red in all sections. revert is just a value. it is still possible to override revert value using specificity. the revert
keyword is different from and should not be confused with initial, which uses the initial value defined on a per-property basis by the css specifications. in contrast, user-agent stylesheets set default values on the basis of css selectors. for example, the initial value for the display property is inline, whereas a normal user-agent stylesheet sets the default display value of <div>s to block, of <...
text-align - CSS: Cascading Style Sheets
-align css property sets the horizontal alignment of a block element or table-cell box. this means it works like vertical-align but in the horizontal direction. 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. ...
... values start the same as left if direction is left-to-right and right if direction is right-to-left. end the same as right if direction is left-to-right and left if direction ...
... values start the same as left if direction is left-to-right and right if direction is right-to-left. ...
text-indent - CSS: Cascading Style Sheets
ples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box. syntax /* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 15%; /*
keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <length> indentation is specified as an absolute <length>. negative values are allowed. see <length> values for possible units. <percentage> indentation is a <percentage> of the containing block'...
...ner as well as each line after a forced line break, but does not affect lines after a soft wrap break. hanging inverts which lines are indented. all lines except the first line will be indented. ...
... css level 2 (revision 1)the definition of 'text-indent' in that specification. recommendation the behavior with display: inline-block and anonymous block boxes is explicitly defined. css level 1the definition of 'text-indent' in that specification. recommendation initial definition. ...
text-orientation - CSS: Cascading Style Sheets
writing-mode is not horizontal-tb). it is useful for controlling the display of languages that use vertical script, and also for making vertical table headers. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ text-orientation: mixed; text-orientation: upright; text-orientation: sideways-right; text-orientation: sideways; text-orientation: use-glyph-orientation; /* global values */ text-orientation: inherit; text-orientation: initial; text-orientation: unset; the text-orientation property is specified as a single
keyword from the list below. values mixed rotates the characters of ...
...al; text-orientation: unset; the text-orientation property is specified as a single
keyword from the list below. values mixed rotates the characters of horizontal scripts 90° clockwise. lays out the characters of vertical scripts naturally. default value. upright lays out the characters of horizontal scripts naturally (upright), as well as the glyphs for vertical scripts. note that this
keyword causes all characters to be considered as left-to-right: the used value of direction is forced to be ltr. sideways causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise. sideways-right an alias to sideways that is kept for compatibility purposes. ...
... for vertical scripts. note that this
keyword causes all characters to be considered as left-to-right: the used value of direction is forced to be ltr. sideways causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise. sideways-right an alias to sideways that is kept for compatibility purposes. use-glyph-orientation on svg elements, this
keyword leads to use the value of the deprecated svg properties glyph-orientation-vertical and glyph-orientation-horizontal. formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.
text-overflow - CSS: Cascading Style Sheets
may be specified using one or two values. if one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). if two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line. each value is specified as one of: one of the
keyword values: clip, ellipsis, fade the function fade(), which is passed a <length> or a <percentage> to control the fade distance a <string>. values clip the default for this property. this
keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. to clip at the transition between characters you can specify text-...
...the ellipsis is displayed inside the content area, decreasing the amount of text displayed. if there is not enough space to display the ellipsis, it is clipped. ...
...llipsis is displayed inside the content area, decreasing the amount of text displayed. if there is not enough space to display the ellipsis, it is clipped. <string> the <string> to be used to represent clipped text. the string is displayed inside the content area, shortening the size of the displayed text. if there is not enough space to display the string itself, it is clipped. fade this
keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge. fade( <length> | <percentage> ) this function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge. the argument determines the distance over which the fade effect is app...
transform-box - CSS: Cascading Style Sheets
values content-box the content box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. border-box the border box is used as the reference box. ...
... values content-box the content box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. border-box the border box is used as the reference box. ...
... specifications specification status comment css transforms level 1the definition of 'transform-box' in that specification. working draft initial definition ...
transition-timing-function - CSS: Cascading Style Sheets
hich acts as a transition-property list. if there are fewer timing functions specified than in the transition-property list, the user agent must calculate which value is used by repeating the list of values until there is one for each transition property. if there are more timing functions, the list is simply truncated to the right size. in both cases, the css declaration stays valid. ...
...g-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end; /* function values */ transition-timing-function: steps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* steps function
keywords */ transition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); /* multiple timing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0...
... */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* global values */ transition-timing-function: inherit; transition-timing-function: initial; transition-timing-function: unset; values <timing-function> each <timing-function> represents the timing function to link to the corresponding property to transition, as defined in transition-property. the non-step
keyword values (ease, linear, ease-in-out, etc.) each represent cubic bézier curve with fixed four point values, with the cubic-bezier() function value allowing for a non-predefined value. the step timing functions divides the input time into a specified number of intervals that are equal in length. it is defined by a number of steps and a step position. ease equal to cubic-bezier(0.25, 0.1, ...
unset - CSS: Cascading Style Sheets
unset can be applied to any css property, including the css shorthand all. ...
... unset can be applied to any css property, including the css shorthand all. ...
... unset can be applied to any css property, including the css shorthand all. ...
vertical-align - CSS: Cascading Style Sheets
tates that this has already happened.</p> </td> </tr> </table> table { margin-left: auto; margin-right: auto; width: 80%; } table, th, td { border: 1px solid black; } td { padding: 0.5em; font-family: monospace; } note that vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements. ...
...erty is specified as one of the values listed below. values for inline elements parent-relative values these values vertically align the element relative to its parent element: baseline aligns the baseline of the element with the baseline of its parent. the baseline of some replaced elements, like <textarea>, is not specified by the html specification, meaning that their behavior with this
keyword may vary between browsers. sub aligns the baseline of the element with the subscript-baseline of its parent. super aligns the baseline of the element with the superscript-baseline of its parent. text-top aligns the top of the element with the top of the parent element's font. text-bottom aligns the bottom of the element with the bottom of the parent element's font. middle aligns the...
...ottom aligns the bottom padding edge of the cell with the bottom of the row. negative values are allowed. formal definition initial valuebaselineapplies toinline-level and table-cell elements. ...
<dl>: The Description List element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...bear cat or firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long). </dd> <!-- other terms and descriptions --> </dl> multiple terms and descriptions it is also possible to define multiple terms with multiple corresponding descriptions, by combining the examples above. ...
... is also possible to define multiple terms with multiple corresponding descriptions, by combining the examples above. metadata description lists are useful for displaying metadata as a list of
key-value pairs. <dl> <dt>name</dt> <dd>godzilla</dd> <dt>born</dt> <dd>1952</dd> <dt>birthplace</dt> <dd>japan</dd> <dt>color</dt> <dd>green</dd> </dl> tip: it can be handy to define a
key-value separator in the css, such as: dt::after { content: ": "; } wrapping name-value groups in <div> elements whatwg html allows wrapping each name-value group in a <dl> element in a <div> element. this can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes. <dl> <div> <dt>name</dt> <dd>godzilla</dd> </div> <div> <dt>...
<input type="password"> - HTML: Hypertext Markup Language
stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. specifics of how the entry process works may vary from browser to browser; mobile devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pressed the
key they meant to press; this is helpful given the small size of
keys and the ease with which the wrong one can be pressed, especially on virtual
keyboards. note: any forms involving sensitive 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 ...
...ield must have a valid value before the form can be submitted, simply specify the boolean required attribute. <label for="userpassword">password: </label> <input id="userpassword" type="password" required> <input type="submit" value="submit"> specifying an input mode if your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard
keyboard, you can use the inputmode attribute to request a specific one. the most obvious use case for this is if the password is required to be numeric (such as a pin). mobile devices with virtual
keyboards, for example, may opt to switch to a numeric
keypad layout instead of a full
keyboard, to make entering the password easier. if the pin is for one-time use, set the autocomplete attribute to eith...
...rs. obviously, this regexp doesn't guarantee a valid ssn (since we don't have access to the social security administration's database), but it does ensure the number could be one; it generally avoids values that cannot be valid. in addition, it allows the three groups of digits to be separated by a space, a dash ("-"), or nothing. the inputmode is set to numeric to encourage devices with virtual
keyboards to switch to a numeric
keypad layout for easier entry. the minlength and maxlength attributes are set to 9 and 12, respectively, to require that the value be at least nine and no more than 12 characters (the former without separating characters between the groups of digits and the latter with them). the required attribute is used to indicate that this control must have a value. finally, aut...
<input type="reset"> - HTML: Hypertext Markup Language
on> element. a simple reset button we'll begin by creating a simple reset button: <form> <div> <label for="example">type in some sample text</label> <input id="example" type="text"> </div> <div> <input type="reset" value="reset the form"> </div> </form> this renders like so: try entering some text into the text field, and then pressing the reset button. adding a reset
keyboard shortcut to add a
keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the access
key global attribute. in this example, r is specified as the access
key (you'll need to press r plus the particular modifier
keys for your browser/os combination; see access
key for a useful list of those). <form> <div> <label for="example">type...
... access
key global attribute. in this example, r is specified as the access
key (you'll need to press r plus the particular modifier
keys for your browser/os combination; see access
key for a useful list of those). <form> <div> <label for="example">type in some sample text</label> <input id="example" type="text"> </div> <div> <input type="reset" value="reset the form" access
key="r"> </div> </form> the problem with the above example is that there's no way for the user to know what the access
key is! this is especially true since the modifiers are typically non-standard to avoid conflicts. when building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to in...
...adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes. ...
<input type="search"> - HTML: Hypertext Markup Language
autocorrect while editing this input field. safari only. incremental whether or not to send repeated search events to allow updating live search results while the user is still editing the value of the field. webkit and blink only (safari, chrome, opera, etc.). mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return
key while editing the field; this is used to determine an appropriate label for that
key on a virtual
keyboard. firefox for android only. results the maximum number of items that should be displayed in the drop-down list of previous search queries. safari only. autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automa...
...t as a live search. as the user edits the value of the field, the user agent sends search events to the htmlinputelement object representing the search box. this allows your code to update the search results in real time as the user edits the search. if incremental is not specified, the search event is only sent when the user explicitly initiates a search (such as by pressing the enter or return
key while editing the field). the search event is rate-limited so that it is not sent more more frequently than an implementation-defined interval. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return
key while editing the field. this information is used to decide what kind of l...
.... the search event is rate-limited so that it is not sent more more frequently than an implementation-defined interval. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return
key while editing the field. this information is used to decide what kind of label to use on the enter
key on the virtual
keyboard. note: this has been standardized as the global attribute enter
keyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter
key. results the results attribute—supported only by ...
<input type="text"> - HTML: Hypertext Markup Language
g non-standard attributes are also available on some browsers. as a general rule, you should avoid using them unless it can't be helped. attribute description autocorrect a string indicating whether or not autocorrect is on or off. safari only. mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return
key while editing the field; this is used to determine an appropriate label for that
key on a virtual
keyboard. firefox for android only. autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. permitted values are: on enable automatic correction of typos, as well as proc...
... user is editing this field. permitted values are: on enable automatic correction of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return
key while editing the field. this information is used to decide what kind of label to use on the enter
key on the virtual
keyboard. note: this has been standardized as the global attribute enter
keyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using...
... using text inputs <input> elements of type text create basic, single-line inputs. you should use them anywhere you want the user to enter a single-line value and there isn't a more specific input type available for collecting that value (for example, if it's a date, url, email, or search term, you've got better options available). ...
<input type="url"> - HTML: Hypertext Markup Language
g non-standard attributes are also available on some browsers. as a general rule, you should avoid using them unless it can't be helped. attribute description autocorrect a string indicating whether or not autocorrect is on or off. safari only. mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return
key while editing the field; this is used to determine an appropriate label for that
key on a virtual
keyboard. firefox for android only. autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. permitted values are: on enable automatic correction of typos, as well as proc...
... user is editing this field. permitted values are: on enable automatic correction of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return
key while editing the field. this information is used to decide what kind of label to use on the enter
key on the virtual
keyboard. note: this has been standardized as the global attribute enter
keyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using...
... using url inputs when you create a url input with the proper type value, url, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate url. this can help avoid cases in which the user mis-types their web site's address, or provides an invalid one. ...
tabindex - HTML: Hypertext Markup Language
the tabindex global attribute indicates that its element can be focused, and where it participates in sequential
keyboard navigation (usually with the tab
key, hence the name). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it accepts an integer as a value, with different results depending on the integer's value: a negative value (usually tabindex="-1") means that the element is not reachable via sequential
keyboard navigation, but could be focused with javascript or visually by clicking with the mouse. it's mostly useful to create accessible widgets with javascript. a negative value is useful when you h...
...") means that the element is not reachable via sequential
keyboard navigation, but could be focused with javascript or visually by clicking with the mouse. it's mostly useful to create accessible widgets with javascript. a negative value is useful when you have off-screen content that appears on a specific event. the user won't be able to focus any element with a negative tabindex using the
keyboard, but a script can do so by calling the focus() method. tabindex="0" means that the element should be focusable in sequential
keyboard navigation, after any positive tabindex values and its order is defined by the document's source order. a positive value means the element should be focusable in sequential
keyboard navigation, with its order defined by the value of the number. that is,...
...dex is 32767. if not specified, it takes the default value 0. avoid using tabindex values greater than 0. doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. instead, write the document with the elements in a logical sequence. if you set the tabindex attribute on a <div>, then its child content cannot be scrolled with the arrow
keys unless you set tabindex on the content, too. check out this fiddle to understand the scrolling effects of tabindex. accessibility concerns avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by
keyboard input. an example of this would be using a <div> element to describe a button, instead of the <button> element.
Link types - HTML: Hypertext Markup Language
<form> prerender suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user once needed. <link> <a>, <area>, <form> prev indicates that the hyperlink leads to the preceding resource of the sequence the current page is in. note: you can also use the next
keyword to specify a link to the next page in the sequence. although recognized, the synonym previous is incorrect and must be avoided. <a>, <area>, <link>, <form> none. search indicates that the hyperlink references a document whose interface is specially designed for searching in this document, or site, and its resources. if the type attribute is set to applicati...
...ation from wikipedia, the free encyclopedia: url shortening some websites create short links to make sharing links via instant messaging easier. <link> ??? sidebar obsolete since gecko 63 indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a sidebar. browsers, that don't have such a context will ignore this
keyword. while once part of the html specification, this has been removed from the spec and is only implemented by versions of firefox prior to firefox 63. <a>, <area>, <link> <form> stylesheet defines an external resource to be used as a stylesheet. if the type is not set, the browser should assume it is a text/css stylesheet until further inspection. if used in c...
... of the html specification, this has been removed from the spec and is only implemented by versions of firefox prior to firefox 63. <a>, <area>, <link> <form> stylesheet defines an external resource to be used as a stylesheet. if the type is not set, the browser should assume it is a text/css stylesheet until further inspection. if used in combination with the alternate
keyword, it defines an alternative style sheet; in that case the title attribute must be present and not be the empty string. <link> <a>, <area>, <form> tag indicates that the hyperlink refers to a document describing a tag that applies to this document. note: this link type should not be set on links to a member of a tag cloud as these do not apply to a single document but...
Feature-Policy - HTTP
ain controls whether the current document is allowed to set document.domain. when this policy is disabled, attempting to set document.domain will fail and cause a securityerror domexception to be be thrown. encrypted-media controls whether the current document is allowed to use the encrypted media extensions api (eme). when this policy is disabled, the promise returned by navigator.requestmedia
keysystemaccess() will reject with a domexception. execution-while-not-rendered controls whether tasks should execute in frames while they're not being rendered (e.g. if an iframe is hidden or display: none). execution-while-out-of-viewport controls whether tasks should execute in frames while they're outside of the visible viewport. fullscreen controls whether the current document is allowe...
...ocument is allowed to download and display large images. payment controls whether the current document is allowed to use the payment request api. when this policy is enabled, the paymentrequest() constructor will throw a securityerror domexception. picture-in-picture controls whether the current document is allowed to play a video in a picture-in-picture mode via the corresponding api. public
key-credentials-get controls whether the current document is allowed to use the web authentication api to retreive already stored public-
key credentials, i.e. via navigator.credentials.get({public
key: ..., ...}). sync-xhr controls whether the current document is allowed to make synchronous xmlhttprequest requests. usb controls whether the current document is allowed to use the webusb api. wake-...
...tial-tracking controls whether or not the current document is allowed to use the webxr device api to interact with a webxr session. example securecorp inc. wants to disable microphone and geolocation apis in its application. it can do so by delivering the following http response header to define a feature policy: feature-policy: microphone 'none'; geolocation 'none' by specifying the 'none'
keyword for the origin list, the specified features will be disabled for all browsing contexts (this includes all iframes), regardless of their origin. specifications specification permissions policy ...
Index - HTTP
etusermedia() will reject with a notallowederror. 66 feature-policy: encrypted-media directive, eme, feature policy, feature-policy, http, reference the http feature-policy header encrypted-media directive controls whether the current document is allowed to use the encrypted media extensions api (eme). when this policy is enabled, the promise returned by navigator.requestmedia
keysystemaccess() will reject with a domexception. 67 feature-policy: fullscreen feature policy, feature-policy, http, fullscreen, header the http feature-policy header fullscreen directive controls whether the current document is allowed to use element.requestfullscreen(). when this policy is enabled, the returned promise rejects with a typeerror. 68 feature-policy: ...
...lowing it to transmit the request further. 90 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. 91 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 accept the response as legitimate, and will not display it. 92 ...
...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 accept the response as legitimate, and will not display it. 92 public-
key-pins-report-only hpkp, http, security, header the http public-
key-pins-report-only response header sends reports of pinning violation to the report-uri specified in the header but, unlike public-
key-pins still allows browsers to connect to the server if the pinning is violated. 93 range http, http header, range requests, reference, request header the range http requ...
Firefox user agent string reference - HTTP
the string can take one of two forms, where the tokens have the same meaning except those noted below: mozilla/5.0 (platform; rv:geckoversion) gecko/geckotrail appname/appversion mozilla/5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion appname/appversion appname/appversion indicates the application name and version. for instance, this could be "camino/2.1.1", or "seamon
key/2.7.1". firefox/firefoxversion is an optional compatibility token that some gecko-based browsers may choose to incorporate, to achieve maximum compatibility with websites that expect firefox. firefoxversion will generally represent the equivalent firefox release corresponding to the given gecko version. some gecko-based browsers may not opt into using this token; for this reason, sniffers sho...
...ious platforms. ...
...wser gecko user agent string firefox for maemo (nokia n900) mozilla/5.0 (maemo; linux armv7l; rv:10.0.1) gecko/20100101 firefox/10.0.1 fennec/10.0.1 camino on mac mozilla/5.0 (macintosh; intel mac os x 10.5; rv:2.0.1) gecko/20100101 firefox/4.0.1 camino/2.2.1 seamon
key on windows mozilla/5.0 (windows nt 5.2; rv:10.0.1) gecko/20100101 firefox/10.0.1 seamon
key/2.7.1 seamon
key on mac mozilla/5.0 (macintosh; intel mac os x 10.5; rv:10.0.1) gecko/20100101 firefox/10.0.1 seamon
key/2.7.1 seamon
key on linux mozilla/5.0 (x11; linux i686; rv:10.0.1) gecko/20100101 firefox/10.0.1 seamon
key/2.7.1 implementation notes for applications, vendors, and extensions prior to firefox 4 and gecko 2.0, it was possible for extensions to add u...
POST - HTTP
identical post may have additional effects, like passing an order several times. a post request is typically sent via an html form and results in a change on the server. ...
...nal effects, like passing an order several times. a post request is typically sent via an html form and results in a change on the server. in this case, the content type is selected by putting the adequate string in the enctype attribute of the <form> element or the formenctype attribute of the <input> or <button> elements: application/x-www-form-urlencoded: the
keys and values are encoded in
key-value tuples separated by '&', with a '=' between the
key and the value. non-alphanumeric characters in both
keys and values are percent encoded: this is the reason why this type is not suitable to use with binary data (use multipart/form-data instead) multipart/form-data: each value is sent as a block of data ("body part"), with a user agent-defined delimiter ("boundary") separating each part. ...
... text/plain when the post request is sent via a method other than an html form — like via an xmlhttprequest — the body can take any type. ...
Network Error Logging - HTTP
about failed (and, if desired, successful) network fetches from supporting browsers. reports are sent to a reporting group defined within a report-to header. usage web applications opt in to this behaviour with the nel header, which is a json-encoded object: nel: { "report_to": "nel", "max_age": 31556952 } an origin considered secure by the browser is required. the following object
keys can be specified in the nel header: report_to the reporting api group to send network error reports to (see below). max_age specifies the lifetime of the policy, in seconds (in a similar way to e.g. hsts policies are time-restricted). the referenced reporting group should have a lifetime at least as long as the nel policy. include_subdomains if true, the policy applies to all subdoma...
...ns if true, the policy applies to all subdomains under the origin that the policy header is set. the reporting group should also be set to include subdomains, if this option is to be enabled. success_fraction floating point value between 0 and 1 which specifies the proportion of successful network requests to report. defaults to 0, so that no successful network requests will be reported if the
key is not present in the json payload. failure_fraction floating point value between 0 and 1 which specifies the proportion of failed network requests to report. defaults to 1, so that all failed network requests will be reported if the
key is not present in the json payload. the reporting group referenced above is defined in the usual manner within the report-to header, for example: report-to:...
... the json payload. the reporting group referenced above is defined in the usual manner within the report-to header, for example: report-to: { "group": "nel", "max_age": 31556952, "endpoints": [ { "url": "https://example.com/csp-reports" } ] } error reports in these examples, the entire reporting api payload is shown. the top-level "body"
key contains the network error report. http 400 (bad request) response { "age": 20, "type": "network-error", "url": "https://example.com/previous-page", "body": { "elapsed_time": 338, "method": "post", "phase": "application", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "137.205.28.66", "status_...
Closures - JavaScript
perties) with one or more methods. consequently, you can use a closure anywhere that you might normally use an object with only a single method. situations where you might want to do this are particularly common on the web. much of the code written in front-end javascript is event-based. you define some behavior, and then attach it to an event that is triggered by the user (such as a click or a
keypress). the code is attached as a callback (a single function that is executed in response to the event). for instance, suppose we want to add buttons to a page to adjust the text size. one way of doing this is to specify the font-size of the body element (in pixels), and then set the size of the other elements on the page (such as headers) using the relative em unit: body { font-family: helve...
...+ e; } } } } var s = sum(1); var s1 = s(2); var s2 = s1(3); var s3 = s2(4); console.log(s3) //log 20 in the example above, there's a series of nested functions, all of which have access to the outer functions' scope. in this context, we can say that closures have access to all outer function scopes. creating closures in loops: a common mistake prior to the introduction of the let
keyword in ecmascript 2015, a common problem with closures occurred when you created them inside a loop. to demonstrate, consider the following example code. <p id="help">helpful notes will appear here</p> <p>e-mail: <input type="text" id="email" name="email"></p> <p>name: <input type="text" id="name" name="name"></p> <p>age: <input type="text" id="age" name="age"></p> function showhelp(help) { ...
...6)'} ]; for (var i = 0; i < helptext.length; i++) { (function() { var item = helptext[i]; document.getelementbyid(item.id).onfocus = function() { showhelp(item.help); } })(); // immediate event listener attachment with the current value of item (preserved until iteration). ...
Details of the object model - JavaScript
s when you add a property at run time. inheriting properties suppose you create the mark object as a workerbee with the following statement: var mark = new workerbee; when javascript sees the new operator, it creates a new generic object and implicitly sets the value of the internal property [[prototype]] to the value of workerbee.prototype and passes this new object as the value of the this
keyword to the workerbee constructor function. the internal [[prototype]] property determines the prototype chain used to return property values. once these properties are set, javascript returns the new object and the assignment statement sets the variable mark to that object. this process does not explicitly put values in the mark object (local values) for the properties that mark inherits from th...
..., projs); this.machine = mach || ''; } suppose you create a new engineer object as follows: var jane = new engineer('doe, jane', ['navigator', 'javascript'], 'belau'); javascript follows these steps: the new operator creates a generic object and sets its __proto__ property to engineer.prototype. the new operator passes the new object to the engineer constructor as the value of the this
keyword. the constructor creates a new property called base for that object and assigns the value of the workerbee constructor to the base property. this makes the workerbee constructor a method of the engineer object. the name of the base property is not special. you can use any legal property name; base is simply evocative of its purpose. the constructor calls the base method, passing as its argu...
...nts passed to the constructor ("doe, jane" and ["navigator", "javascript"]) and also the string "engineering". explicitly using "engineering" in the constructor indicates that all engineer objects have the same value for the inherited dept property, and this value overrides the value inherited from employee. because base is a method of engineer, within the call to base, javascript binds the this
keyword to the object created in step 1. thus, the workerbee function in turn passes the "doe, jane" and "engineering" arguments to the employee constructor function. upon return from the employee constructor function, the workerbee function uses the remaining argument to set the projects property. upon return from the base method, the engineer constructor initializes the object's machine property t...
JavaScript modules - JavaScript
r more details.disabled from version 12.0.0: this feature is behind the --experimental-modules runtime flag. full support 8.5.0notes disabled notes module filenames must end with .mjs, not .js. ...
...o your script once you've exported some features out of your module, you need to import them into your script to be able to use them. the simplest way to do this is as follows: import { name, draw, reportarea, reportperimeter } from './modules/square.js'; you use the import statement, followed by a comma-separated list of the features you want to import wrapped in curly braces, followed by the
keyword from, followed by the path to the module file — a path relative to the site root, which for our basic-modules example would be /js-examples/modules/basic-modules. however, we've written the path a bit differently — we are using the dot (.) syntax to mean "the current location", followed by the path beyond that to the file we are trying to find. this is much better than writing out the en...
...ociated functions like draw(), reportarea(), etc. too; if we tried to import different functions of the same name into the same top-level module file, we'd end up with conflicts and errors. fortunately there are a number of ways to get around this. we'll look at these in the following sections. renaming imports and exports inside your import and export statement's curly braces, you can use the
keyword as along with a new feature name, to change the identifying name you will use for a feature inside the top-level module. so for example, both of the following would do the same job, albeit in a slightly different way: // inside module.js export { function1 as newfunctionname, function2 as anothernewfunctionname }; // inside main.js import { newfunctionname, anothernewfunctionname } fro...
static - JavaScript
static methods aren't called on instances of the class. instead, they're called on the class itself. these are often utility functions, such as functions to create or clone objects. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax static methodname() { ... } examples using static in classes the following example demonstrates several things: how a static method is implemented on a class. that a class with a static member can be sub-classed. how a static method can and cannot be called. ...
...g(triple.triple()); // 3 console.log(triple.triple(6)); // 18 var tp = new triple(); console.log(biggertriple.triple(3)); // 81 (not affected by parent's instantiation) console.log(tp.triple()); // 'tp.triple is not a function'. calling static methods from another static method in order to call a static method within another static method of the same class, you can use the this
keyword. class staticmethodcall { static staticmethod() { return 'static method has been called'; } static anotherstaticmethod() { return this.staticmethod() + ' from another static method'; } } staticmethodcall.staticmethod(); // 'static method has been called' staticmethodcall.anotherstaticmethod(); // 'static method has been called from another static method' calling static meth...
...you need to call them using the class name: classname.static_method_name() or by calling the method as a property of the constructor: this.constructor.static_method_name(). class staticmethodcall { constructor() { console.log(staticmethodcall.staticmethod()); // 'static method has been called.' console.log(this.constructor.staticmethod()); // 'stat...
SyntaxError: missing ; before statement - JavaScript
ment you can use double quotes, or escape the apostrophe: var foo = "tom's bar"; var foo = 'tom\'s bar'; declaring properties with var you cannot declare properties of an object or array with a var declaration. ...
...var foo = 'tom\'s bar'; declaring properties with var you cannot declare properties of an object or array with a var declaration. ...
...ties of an object or array with a var declaration. ...
TypeError: 'x' is not iterable - JavaScript
plementing the iterable protocol. examples iterating over object properties in javascript, objects are not iterable unless they implement the iterable protocol. therefore, you cannot use for…of to iterate over the properties of an object. ...
... to iterate over the properties of an object. var obj = { 'france': 'paris', 'england': 'london' }; for (let p of obj) { // typeerror: obj is not iterable // … } instead you have to use object.
keys or object.entries, to iterate over the properties or entries of an object. ...
...s: for (let country of object.
keys(obj)) { var capital = obj[country]; console.log(country, capital); } for (const [country, capital] of object.entries(obj)) console.log(country, capital); another option for this use case might be to use a map: var map = new map; map.set('france', 'paris'); map.set('england', 'london'); // iterate over the property names: for (let country of map.
keys()) { let capital = map[country]; console.log(country, capital); } for (let capital of map.values()) console.log(capital); for (const [country, capital] of map.entries()) console.log(country, capital); iterating over a generator generators are functions you call to produce an iterable object. function* generate(a, b) { yield a; yield b; } for (let x of generate) // type...
Intl.Locale.prototype.numeric - JavaScript
e, then the locale will take numeric characters into account when collating strings. this special numeric handling means that sequences of decimal digits will be compared as numbers. for example, the string "a-21" will be considered less than "a-123". ...
...umbers. for example, the string "a-21" will be considered less than "a-123". examples setting the numeric value via the locale string in the unicode locale string spec, the values that numeric represents correspond to the
key kn. kn is considered a locale string "extension subtag". these subtags add additional data about the locale, and are added to locale identifiers by using the -u extension
key. thus, the numeric value can be added to the inital locale identifier string that is passed into the locale constructor. to set the numeric value, first add the -u extension
key to the string. next, add the -kn extension
key to indicate that you are adding a value for numeric. finally, add the numeric value to the string. if you want to set numeric to true, simply adding the kn
key will suffice. ...
... let numericviastr = new intl.locale("fr-latn-fr-u-kn-false"); console.log(numericstr.numeric); // prints "false" setting the numeric value via the configuration object argument the intl.locale constructor has an optional configuration object argument, which can be used to pass extension types. ...
Object.values() - JavaScript
you can find a polyfill in the tc39/proposal-object-values-entries or in the es-shims/object.values repositories. ...
.../proposal-object-values-entries or in the es-shims/object.values repositories. ...
... the es-shims/object.values repositories. ...
Object - JavaScript
objects can be created using the object() constructor or the object initializer / literal syntax. description nearly all objects in javascript are instances of object; a typical object inherits properties (including methods) from object.prototype, although these properties may be shadowed (a.k.a. overridden). however, an object may be deliberately created for which this is not true (e.g. by object.create(null)), or it may be altered so that this is no longer true (e.g. with object.setprototypeof). ...
...rom one or more source objects to a target object. object.create() creates a new object with the specified prototype object and properties. object.defineproperty() adds the named property described by a given descriptor to an object. object.defineproperties() adds the named properties described by the given descriptors to an object. object.entries() returns an array containing all of the [
key, value] pairs of a given object's own enumerable string properties. object.freeze() freezes an object. other code cannot delete or change its properties. object.fromentries() returns a new object from an iterable of [
key, value] pairs. (this is the reverse of object.entries). object.getownpropertydescriptor() returns a property descriptor for a named property on an object. object.getownpro...
...ype]] property) of the specified object. object.is() compares if two values are the same value. equates all nan values (which differs from both abstract equality comparison and strict equality comparison). object.isextensible() determines if extending of an object is allowed. object.isfrozen() determines if an object was frozen. object.issealed() determines if an object is sealed. object.
keys() returns an array containing the names of all of the given object's own enumerable string properties. object.preventextensions() prevents any extensions of an object. object.seal() prevents other code from deleting properties of an object. object.setprototypeof() sets the object's prototype (its internal [[prototype]] property). object.values() returns an array containing the values th...
Reflect.get() - JavaScript
receiver optional the value of this provided for the call to target if a getter is encountered. when used with proxy, it can be an object that inherits from target. ...
... receiver optional the value of this provided for the call to target if a getter is encountered. when used with proxy, it can be an object that inherits from target. ...
... receiver optional the value of this provided for the call to target if a getter is encountered. when used with proxy, it can be an object that inherits from target. return value the value of the property. exceptions a typeerror, if target is not an object. description the reflect.get method allows you to get a property on an object. ...
Symbol.unscopables - JavaScript
ill make it scopable and thus it will appear in lexical scope variables. property attributes of symbol.unscopables writable no enumerable no configurable no examples scoping in with statements the following code works fine in es5 and below. ...
.... property attributes of symbol.unscopables writable no enumerable no configurable no examples scoping in with statements the following code works fine in es5 and below. however, in ecmascript 2015 and later, the array.prototype.
keys() method was introduced. that means that inside with environment "
keys" would now be the method and not the variable. ...
...wever, in ecmascript 2015 and later, the array.prototype.
keys() method was introduced. that means that inside with environment "
keys" would now be the method and not the variable. that's when the unscopables symbol was introduced. a built-in unscopables setting is implemented as array.prototype[@@unscopables] to prevent that some of the array methods are being scoped into the with statement. var
keys = []; with (array.prototype) {
keys.push('something'); } object.
keys(array.prototype[symbol.unscopables]); // ["copywithin", "entries", "fill", "find", "findindex", // "includes", "
keys", "values"] unscopables in objects you can also set unscopables for your own objects. var obj = { foo: 1, bar: 2 }; obj[symbol.unscopables] = { foo: false, bar: true }; with (obj) { console.l...
this - JavaScript
it also has some differences between strict mode and non-strict mode. in most cases, the value of this is determined by how a function is called (runtime binding). it can't be set by assignment during execution, and it may be different each time the function is called. es5 introduced the bind() method to set the value of a function's this regardless of how it's called, and es2015 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context). the source for this interactive example is stored in a github repository. ...
... the property is being set or gotten. function sum() { return this.a + this.b + this.c; } var o = { a: 1, b: 2, c: 3, get average() { return (this.a + this.b + this.c) / 3; } }; object.defineproperty(o, 'sum', { get: sum, enumerable: true, configurable: true}); console.log(o.average, o.sum); // 2, 6 as a constructor when a function is used as a constructor (with the new
keyword), its this is bound to the new object being constructed. while the default for a constructor is to return the object referenced by this, it can instead return some other object (if the return value isn't an object, then the this object is returned). /* * constructors work like this: * * function myconstructor(){ * // actual function body code goes here. * // create properties on ...
... ...
async function - JavaScript
async functions may also be defined as expressions. the source for this interactive demo is stored in a github repository. if you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax async function name([param[, param[, ...param]]]) { statements } parameters name the function’s name. ...
...wait expressions suspend progress through an async function, yielding control and subsequently resuming progress only when an awaited promise-based asynchronous operation is either fulfilled or rejected. the resolved value of the promise is treated as the return value of the await expression. use of async / await enables the use of ordinary try / catch blocks around asynchronous code. the await
keyword is only valid inside async functions. if you use it outside of an async function's body, you will get a syntaxerror. the purpose of async/await is to simplify the syntax necessary to consume promise-based apis. the behavior of async/await is similar to combining generators and promises. async functions always return a promise. if the return value of an async function is not explicitly a ...
... return await promisevalue vs. return promisevalue the implicit wrapping of return values in promise.resolve does not imply that return await promisevalue is functionally equivalent to return promisevalue. consider th...
Strict mode - JavaScript
; delete y;'); // !!! syntax error making eval and arguments simpler strict mode makes arguments and eval less bizarrely magical. both involve a considerable amount of magical behavior in normal code: eval to add or remove bindings and to change binding values, and arguments by its indexed properties aliasing named arguments. strict mode makes great strides toward treating eval and arguments as
keywords, although full fixes will not come until a future edition of ecmascript. first, the names eval and arguments can't be bound or assigned in language syntax. all these attempts to do so are syntax errors: 'use strict'; eval = 17; arguments++; ++eval; var obj = { set p(arguments) { } }; var eval; try { } catch (arguments) { } function x(eval) { } function arguments() { } var y = function eval...
...; // doesn't expose v (or a or b) paving the way for future ecmascript versions future ecmascript versions will likely introduce new syntax, and strict mode in ecmascript 5 applies some restrictions to ease the transition. it will be easier to make some changes if the foundations of those changes are prohibited in strict mode. first, in strict mode, a short list of identifiers become reserved
keywords. these words are implements, interface, let, package, private, protected, public, static, and yield. in strict mode, then, you can't name or use variables or arguments with these names. function package(protected) { // !!! 'use strict'; var implements; // !!! interface: // !!! while (true) { break interface; // !!! } function private() { } // !!! } function fun(static) { '...
...but strict mode code on the web, loaded with <script src=""> or <script>...</script>, won't be able to use let/yield as identifiers. second, while es5 unconditionally reserves the words class, enum, export, extends, import, and super, before firefox 5 mozilla reserved them only in strict mode. second, strict mode prohibits function statements, not at the top level of ...
Web video codec guide - Web media technologies
in a way that ignores some or all of the variations caused by noise, the compressed video will be larger. resolution (width and height) higher resolution video, presented in the same screen size, will typically be able to more accurately portray the original scene, barring effects introduced during compression. the higher the resolution of a video, the larger it gets. this plays a
key role in the final size of the video. the degree to which these affect the resulting encoded video will vary depending on the precise details of the situation, including which encoder you use and how it's configured. in addition to general codec options, the encoder could be configured to reduce the frame rate, to clean up noise, and/or to reduce the overall resolution of the video during e...
... may linger for a while, because of how video is displayed. each frame of video is presented by applying a set of changes to the currently-visible frame. this means that any errors or artifacts will compound over time, resulting in glitches or otherwise strange or unexpected deviations in the image that linger for a time. to resolve this, and to improve seek time through the video data, periodic
key frames (also known as intra-frames or i-frames) are placed into the video file. the
key frames are full frames, which are used to repair any damage or artifact residue that's currently visible. aliasing aliasing is a general term for anything that upon being reconstructed from the encoded data does not look the same as it did before compression. there are many forms of aliasing; the most common...
...ation that allow for variable block sizes, and even for blocks to overlap. there are, however, artifacts that can occur due to motion compensation. these occur along block borders, in the form of sharp edges that produce false ringing and other edge effects. these are due to the mathematics involved in the coding of the residual frames, and can be easily noticed before being repaired by the next
key frame. reduced frame size in certain situations, it may be useful to reduce the video's dimensions in order to improve the final size of the video file. while the immediate loss of size or smoothness of playback may be a negative factor, careful decision-making can result in a good end result. if a 1080p video is reduced to 720p prior to encoding, the resulting video can be much smaller while h...
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
the registration is successful. it's the only piece of service worker code that sits inside the app.js file; everything else that is service worker-specific is written in the sw.js file itself. lifecycle of a service worker when registration is complete, the sw.js file is automatically downloaded, then installed, and finally activated. installation the api allows us to add event listeners for
key events we are interested in — the first one is the install event: self.addeventlistener('install', (e) => { console.log('[service worker] install'); }); in the install listener, we can initialize the cache and add files to it for offline use. our js13kpwa app does exactly that. first, a variable for storing the cache name is created, and the app shell files are listed in one array. var ...
...e, modified if needed. that's it! our app is caching its resources on install and serving them with fetch from the cache, so it works even if the user is offline. it also caches new content whenever it is added. updates there is still one point to cover: how do you upgrade a service worker when a new version of the app containing new assets is available? the version number in the cache name is
key to this: var cachename = 'js13kpwa-v1'; when this updates to v2, we can then add all of our files (including our new files) to a new cache: contenttocache.push('/pwa-examples/js13kpwa/icons/icon-32.png'); // ... self.addeventlistener('install', (e) => { e.waituntil( caches.open('js13kpwa-v2').then((cache) => { return cache.addall(contenttocache); }) ); }); a new service wo...
...lled in the background, and the previous one (v1) works correctly up until there are no pages using it — the new service worker is then activated and takes over management of the page from the old one. clearing the cache remember the activate event we skipped? it can be used to clear out the old cache we don't need anymore: self.addeventlistener('activate', (e) => { e.waituntil( caches.
keys().then((
keylist) => { return promise.all(
keylist.map((
key) => { if(
key !== cachename) { return caches.delete(
key); } })); }) ); }); this ensures we have only the files we need in the cache, so we don't leave any garbage behind; the available cache space in the browser is limited, so it is a good idea to clean up after ourselves. other use cases ...
Media - Progressive web apps (PWAs)
printing. user interfaces css has some special properties for devices that support a user interface, like computer displays. these properties dynamically change the appearance of content as the user works with the interface. there are five special selectors: selector selects e:hover any e element that has the pointer over it e:focus any e element that has
keyboard focus e:active the e element that is involved in the current user action e:link any e element that is a hyperlink to a url that the user has not visited recently e:visited any e element that is a hyperlink to a url that the user has visited recently note: the information that can be obtained from the :visited selector is restricted in gecko 2.0. se...
...its values are similar to the border property, except that you cannot specify individual sides. some other features of user interfaces are implemented using attributes, in the normal way. for example, an element that is disabled or read-only has the disabled attribute or the readonly attribute. selectors can specify these attributes like any other attributes, by using square brackets...
...it might also have a hover effect when the pointer is over it. more details for more information about user interfaces in css, see user interface in the css specification. in part ii of this tutorial, there is an example of mozilla's markup language for user interfaces. action: printing a document note: this snippet only works on firefox since it erroneously increments the css...
in - SVG: Scalable Vector Graphics
if no value is provided and this is the first filter primitive, then this filter primitive will use sourcegraphic as its input. if no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. ...
...>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile> usage notes value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes sourcegraphic this
keyword represents the graphics elements that were the original input into the <filter> element. sourcealpha this
keyword represents the graphics elements that were the original input into the <filter> element. sourcealpha has all of the same rules as sourcegraphic except that only the alpha channel is used. backgroundimage this
keyword represents an image snapshot of the svg document under the f...
...e the original input into the <filter> element. sourcealpha has all of the same rules as sourcegraphic except that only the alpha channel is used. backgroundimage this
keyword represents an image snapshot of the svg document under the filter region at the time that the <filter> element was invoked. backgroundalpha same as backgroundimage except only the alpha channel is used. fillpaint this
keyword represents the value of the fill property on the target element for the filter effect. in many cases, the fillpaint is opaque everywhere, but that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts. strokepaint this
keyword represents the value of the stroke property on the target element for the filter effect. ...
stop-color - SVG: Scalable Vector Graphics
the stop-color attribute indicates what color to use at a gradient stop. note: with respect to gradients, svg treats the transparent
keyword differently than css. svg does not calculate gradients in pre-multiplied space, so transparent really means transparent black. so, specifying a stop-color with the value transparent is equivalent to specifying a stop-color with the value black and a stop-opacity with the value 0. note: as a presentation attribute, stop-color can be used as a css property. ...
...value black and a stop-opacity with the value 0. note: as a presentation attribute, stop-color can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value currentcolor | <color> <icccolor> default value black animatable yes currentcolor this
keyword denotes the current fill color and can be specified in the same manner as within a <paint> specification for the fill and stroke attributes. <color> this value indicates a color value. <icccolor> this value refers to an icc color profile. specifications specification status comment scalable vector graphics (svg) 2the definition of 'stop-color' in that specif...
...thin a <paint> specification for the fill and stroke attributes. <color> this value indicates a color value. <icccolor> this value refers to an icc color profile. specifications specification status comment scalable vector graphics (svg) 2the definition of 'stop-color' in that specification. candidate recommendation added a note that in svg the transparent
keyword is treated differently than in css. scalable vector graphics (svg) 1.1 (second edition)the definition of 'stop-color' in that specification. recommendation initial definition ...
transform-origin - SVG: Scalable Vector Graphics
] <length>?where <length-percentage> = <length> | <percentage> default value 50%, 50% animatable yes the transform-origin property may be specified using one, two, or three values, where each value represents an offset. offsets that are not explicitly defined are reset to their corresponding initial values. ...
...ercentage> = <length> | <percentage> default value 50%, 50% animatable yes the transform-origin property may be specified using one, two, or three values, where each value represents an offset. offsets that are not explicitly defined are reset to their corresponding initial values. if two or more values are defined and either no value is a
keyword, or the only used
keyword is center, then the first value represents the horizontal offset and the second represents the vertical offset. one-value syntax: the value must be a <length>, a <percentage>, or one of the
keywords left, center, right, top, and bottom. two-value syntax: one value must be a <length>, a <percentage>, or one of the
keywords left, center, and right. the other value must b...
... three-value syntax: the first two values are the same as for the two-value syntax. the third value must be a <length>. it always represents the z offset. ...
SVG Attribute reference - SVG: Scalable Vector Graphics
ont-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 horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning
keypoints
keysplines
keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position ...
...s attributes filter primitive attributes height, result, width, x, y transfer function attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values,
keytimes,
keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondra...
...t attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, on
keydown, on
keypress, on
keyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical e...
Transport Layer Security - Web security
hake negotiates is a cipher suite. in tls 1.2 and earlier, the negotiated cipher suite includes a set of cryptographic algorithms that together provide the negotiation of the shared secret, the means by which a server is authenticated, and the method that will be used to encrypt data. the cipher suite in tls 1.3 primarily governs the encryption of data, separate negotiation methods are used for
key agreement and authentication. different software might use different names for the same cipher suites. for instance, the names used in openssl and gnutls differ from those in the tls standards. the cipher names correspondence table on the mozilla opsec team's article on tls configurations lists these names as well as information about compatibility and security levels. configuring your server ...
...p time) handshake. clients that reconnect to the server can send requests immediately, eliminating the latency of the tls handshake entirely. though the performance gains from 0-rtt can be significant, they come with some risk of replay attack, so some care is needed before enabling this feature. tls 1.3 supports forward-secure modes only, unless the connection is resumed or it uses a pre-shared
key. tls 1.3 defines a new set of cipher suites that are exclusive to tls 1.3. these cipher suites all use modern authenticated encryption with associated data (aead) algorithms. the tls 1.3 handshake is encrypted, except for the messages that are necessary to establish a shared secret. in particular, this means that server and client certificates are encrypted. note however that the server identit...
...essages that are necessary to establish a shared secret. in particular, this means that server and client certificates are encrypted. note however that the server identity (the server_name or sni extension) that a client sends to the server is not encrypted. numerous mechanisms have been disabled: renegotiation, generic data compression, digital signature algorithm (dsa) certificates, static rsa
key exchange, and
key exchange with custom diffie-hellman (dh) groups. implementations of draft versions of tls 1.3 are available. tls 1.3 is enabled in some browsers, including the 0-rtt mode. web servers that enable tls 1.3 might need to adjust configuration to allow tls 1.3 to operate successfully. tls 1.3 adds just one significant new use case. the 0-rtt handshake can provide significant perfo...
Index - XSLT: Extensible Stylesheet Language Transformations
is quite useful, configuring the .xsl file from javascript may be even more useful. for example, javascript and xslt could be used to sort xml data and then display it. the sorting would have to alternate between ascending and descending sorting. 13 transforming xml with xslt needsmigration, transforming_xml_with_xslt, xml, xslt the separation of content and presentation is a
key design feature of xml. the structure of an xml document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented. this intelligent structuring is particularly important as more and more data transfers are automated and take place between highly he...
...et have exactly the same precedence as the contents of the including stylesheet. 35 <xsl:include> element, reference, xslt, include the <xsl:include> element merges the contents of one stylesheet with another. unlike the case of <xsl:import>, the contents of an included stylesheet have exactly the same precedence as the contents of the including stylesheet. 36 <xsl:
key> element,
key, reference, xslt the <xsl:
key> element declares a named
key which can be used elsewhere in the stylesheet with the
key( ) function. 37 <xsl:message> element, reference, xslt, message the <xsl:message> element outputs a message (to the javascript console in ns) and optionally terminates execution of the stylesheet. it can be useful for debugging. ...
...fault setting, so this element only needs to be used to counteract an <xsl:strip-space> element. 44 <xsl:processing-instruction> element, reference, xslt, processing-instruction the <xsl:processing-instruction> element writes a processing instruction to the output document. 45 <xsl:sort> element, reference, xslt, sort the <xsl:sort> element defines a sort
key for nodes selected by <xsl:apply-templates> or <xsl:for-each> and determines the order in which they are processed. 46 <xsl:strip-space> element, reference, xslt, strip-space the <xsl:strip-space> element defines the elements in the source document for which whitespace should be removed. 47 <xsl:stylesheet> element, reference, stylesheet, xslt the <xsl:st...
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
the structure of an xml document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented. this intelligent structuring is particularly important as more and more data transfers are automated and take place between highly heterogeneous machines linked by a network. ...
...emplates (supported) xsl:attribute (supported) xsl:attribute-set (supported) xsl:call-template (supported) xsl:choose (supported) xsl:comment (supported) xsl:copy (supported) xsl:copy-of (supported) xsl:decimal-format (supported) xsl:element (supported) xsl:fallback (not supported) xsl:for-each (supported) xsl:if (supported) xsl:import (mostly supported) xsl:include (supported) xsl:
key (supported) xsl:message (supported) xsl:namespace-alias (not supported) xsl:number (partially supported) xsl:otherwise (supported) xsl:output (partially supported) xsl:param (supported) xsl:preserve-space (supported) xsl:processing-instruction xsl:sort (supported) xsl:strip-space (supported) xsl:stylesheet (partially supported) xsl:template (supported) xsl:text (partially supported) ...
...ceding preceding-sibling self functions boolean() (supported) ceiling() (supported) concat() (supported) contains() (supported) count() (supported) current() (supported) document() (supported) element-available() (supported) false() (supported) floor() (supported) format-number() (supported) function-available() (supported) generate-id() (supported) id() (partially supported)
key() (supported) lang() (supported) last() (supported) local-name() (supported) name() (supported) namespace-uri() (supported) normalize-space() (supported) not() (supported) number() (supported) position() (supported) round() (supported) starts-with() (supported) string() (supported) string-length() (supported) substring() (supported) substring-after() (supported) substring-before()...
2015 MDN Fellowship Program - Archive of obsolete content
s, html. knowledge of server-side development, caching and network layers preferred. mentor information harald kirschner, web craftsman. github: digitarald twitter: @digitarald curriculum development brief project description mdn serves as a trusted resource for literally millions of developers on a regular basis. in 2015, mdn will expand the impact of this content by developing kits of
key learning materials, including such elements as code samples, videos and other elements being finalized. activities and deliverables act as lead curator for technical curriculum addressing a
key web technology, developing code samples, videos, interactive exercises and other components to be determined. you may propose your own subject area (examples: virtual reality on the web, network security...
...ples, videos, interactive exercises and other components to be determined. you may propose your own subject area (examples: virtual reality on the web, network security, css, etc.) or we will work with you to match you to the best subject based on your background and mozilla priorities. required skills and experience experienced web developer with expertise in javascript, css, html and/or other
key technologies. proficient in written and spoken english. mentor information chris mills, senior technology writer, mozilla developer network. github: chrisdavidmills twitter: @chrisdavidmills why increase the reach and impact of your expertise grow your skills beyond coding and managing to educating and communicating build something used by hundreds of thousands (or more) developers wor...
page-worker - Archive of obsolete content
r. in the "main.js" file: remove the contentscriptfile option in the page() constructor. globals constructors page(options) creates an uninitialized page worker instance. parameters options : object optional options: name type contenturl string the url of the content to load in the panel. allow object an object with
keys to configure the permissions on the page worker. the boolean
key script controls if scripts from the page are allowed to run. script defaults to true. include string, regexp, array of (string or regexp) this is useful when your page worker loads a page which will redirect to other pages. a match pattern string or an array of match pattern stri...
... port.emit function receive events from the content script using the port.on function see the guide to communicating using port for details. contenturl the url of content to load. this can point to local content loaded from your add-on's "data" directory or remote content. setting it loads the content immediately. allow a object describing permissions for the content. it contains a single
key named script whose value is a boolean that indicates whether or not to execute script in the content. script defaults to true. include a set of match patterns to define the urls which the page-worker's content script will be applied. this is useful when using pages which redirect to other pages in your page-worker. contentscriptfile a local file url or an array of local file urls of content s...
/loader - Archive of obsolete content
the example above overlays the base path '' with a different mapping for 'toolkit/' prefixed modules. modules the loader may optionally be provided with a set of module exports. in the sdk we call these "pseudo modules". this feature may be used in a few different ways: to expose a...
...the example above overlays the base path '' with a different mapping for 'toolkit/' prefixed modules. modules the loader may optionally be provided with a set of module exports. in the sdk we call these "pseudo modules". this feature may be used in a few different ways: to expose an api that doesn't have a js file with an implementat...
content/symbiont - Archive of obsolete content
at the time the window.onload event fires this property is optional and defaults to "end". contentscriptoptions object read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. allow object permissions for the content, with the following
keys: script boolean whether or not to execute script in the content. defaults to true. optional. optional. symbiont symbiont is composed from the worker trait, therefore instances of symbiont and their descendants expose all the public properties exposed by worker along with additional public properties that are listed below: properties contentscriptfile the lo...
... ...
core/heritage - Archive of obsolete content
r: var { class } = require('sdk/core/heritage'); var dog = class({ initialize: function initialize(name) { this.name = name; }, type: 'dog', bark: function bark() { return 'ruff! ruff!' } }); note: we use term class to refer an exemplar constructs in a form of constructor functions with a proper prototype chain setup. ...
...{ this.name = name; }, type: 'dog', bark: function bark() { return 'ruff! ruff!' } }); note: we use term class to refer an exemplar constructs in a form of constructor functions with a proper prototype chain setup. constructors created using class function don't require new
keyword (even though it can be used) for instantiation. also, idiomatic sdk code does not uses optional new
keywords, but you're free to use it in your add-on code: var fluffy = dog('fluffy'); // instatiation fluffy instanceof dog // => true fluffy instanceof class // => true as you could notice from example above classes created via class function by default inherits from a class itself. also you could specify which class you want to inherit from by passing special extends property: var...
ui/button/action - Archive of obsolete content
ns for the button. you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a relative path: a string in the form "./iconfile", where "iconfile" is a relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of
key-value pairs. here you can specify a range of sizes for your button's icon. each
key-value pair specifies an icon: each value specifies an image file as a resource:// url or relative path. each
key must be a numeric string such as "16", or "32", which represents the size in pixels of the corresponding image. var { actionbutton } = require('sdk/ui/button/...
...". listener : function the listener to remove. destroy() destroy the button. after calling this function, the button will no longer appear in the ui, and accessing any of its properties or methods will throw an error. properties id the button's unique id. this is read-only. label the button's label. icon the button's icon or icons, as a url, relative path, or object containing a set of
key-value pairs. disabled boolean property indicating whether or not the button is disabled. badge new in firefox 36. value to attach to the button as a badge. may be a number or a string. the badge can contain as many characters (or digits) as you like, but only the first four will be displayed. badgecolor new in firefox 36. color for the badge, specified as a css <color> value. events...
ui/button/toggle - Archive of obsolete content
ns for the button. you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a relative path: a string in the form "./iconfile", where "iconfile" is a relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of
key-value pairs. here you can specify a range of sizes for your button's icon. each
key-value pair specifies an icon: each value specifies an image file as a resource:// url or relative path. each
key must be a numeric string such as "16", or "32", which represents the size in pixels of the corresponding image. var { togglebutton } = require('sdk/ui/button/...
...ner : function the listener to remove. destroy() destroy the button. after calling this function, the button will no longer appear in the ui, and accessing any of its properties or methods will throw an error. properties id the button's unique id. this property is read-only. label the button's label. icon the button's icon or icons, as a url, relative path, or object containing a set of
key-value pairs. disabled boolean property indicating whether or not the button is disabled. checked boolean property indicating whether or not the button is checked. it's initialized to false, or the value of the checked option to the button's constructor. it is then flipped, on a per-window basis, whenever the user clicks the button or when the button's click() method is called. badge new in...
Add a Context Menu Item - Archive of obsolete content
({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', image: self.data.url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access
key new in firefox 35. from firefox 35 you can specify an access
key using the access
key option. this must be a single-character string. pressing the
key selects the option when the context menu is open: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function ...
... ...
Storing annotations - Archive of obsolete content
.annotations.push(newannotation); } this function calls a constructor for an annotation object, which we also need to supply: function annotation(annotationtext, anchor) { this.annotationtext = annotationtext; this.url = anchor[0]; this.ancestorid = anchor[1]; this.anchortext = anchor[2]; } now we need to link this code to the annotation editor, so that when the user presses the return
key in the editor, we create and store the new annotation: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide()...
...the problem. a real add-on should give the user a chance to choose which data to keep, and prevent the user from adding any more data until the add-on is back under quota.) respecting private browsing since annotations record the user's browsing history we should avoid recording annotations in private windows. there's a very simple way to do this: do nothing. by omitting the "private-browsing"
key from the annotator's "package.json" file, the annotator opts out of private browsing altogether. this means that its widget will not appear on any private windows and its selector and matcher content scripts won't run, so the user won't be able to enter any annotations in private windows. try it: execute cfx run and open a new private window: you should no longer see the annotator's widget. no...
Display a Popup - Archive of obsolete content
. you can run content scripts in the panel: although the script running in the panel can't directly access your main add-on code, you can exchange messages between the panel script and the add-on code. in this tutorial we'll create an add-on that adds an action button to the toolbar that displays a panel when clicked. the panel just contains a <textarea> element: when the user presses the return
key, the contents of the <textarea> is sent to the main add-on code. the main add-on code logs the message to the console. the add-on consists of seven files: package.json: created when you run jpm init index.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as h...
...l just log the text to the console. text_entry.port.on("text-entered", function (text) { console.log(text); text_entry.hide(); }); the content script "get-text.js" looks like this: // when the user hits return, send the "text-entered" // message to main.js. // the message payload is the contents of the edit box. var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('
keyup', function on
keyup(event) { if (event.
keycode == 13) { // remove the newline. text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code. it means that the panel's about // to be shown. // // set the focus to the text area so the user can //...
Bootstrapped extensions - Archive of obsolete content
traditional extensions include overlays, wherein the application can load up xul from the extension's package and automatically apply it on top its own ui. while this makes creating extensions that add to the application's user interface relatively easy, it means that updating, installing, or disabling an extension requires an application restart. gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) introduces bootstrapped extensions. these are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application. this is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down. a...
...e application does is call into this script file; the extension is responsible for adding and removing its user interface and handling any other setup and shutdown tasks it requires. this article discusses how bootstrapped extensions work. see this tutorial on converting from an overlay extension to restartless for a practical step by step guide to migrating. the startup and shutdown process a
key feature of bootstrapped extensions is that they must be able to start up and shut down on demand by the application. when the extension's startup() function is called, it must manually inject its user interface and other behavior into the application. similarly, when its shutdown() function is called, it must remove anything that it has added to the application, as well as all references to any o...
Boxes - Archive of obsolete content
ill wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...
...vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box. ...
File I/O - Archive of obsolete content
perating system's temporary files directory (for example, /tmp on mac os x and linux). uchrm f the user chrome directory in their profile: %profile%/chrome. resource:app d the application directory in an xulrunner application. look in the source for other strings available: xpcom/io/nsappdirectoryservicedefs.h, xpcom/io/nsdirectoryservicedefs.h. other such
keys as the "profd"
key are available; check the known locations. enumerating drives on windows while you can use initwithpath("/") on unix-like systems (linux, mac) to get the root of the file system, there's no such root on windows. however, you can enumerate available drives using the following code: components.utils.import("resource://gre/modules/fileutils.jsm"); var root = new fileutils.fil...
... components.interfaces.nsilocalfile); relative path (nsirelativefilepref) to store paths relative to one of the predefined folders listed above, for example file relative to profile folder, use the following code: // 1. write to prefs var relfile = components.classes["@mozilla.org/pref-relativefile;1"]. createinstance(components.interfaces.nsirelativefilepref); relfile.relativeto
key = "profd"; // or any other string listed above relfile.file = file; // |file| is nsilocalfile prefs.setcomplexvalue("filename", components.interfaces.nsirelativefilepref, relfile); // 2. read from prefs var value = prefs.getcomplexvalue("filename", components.interfaces.nsirelativefilepref); // |value.file| is the file. navigating with nsifile get a file in given directo...
HTML in XUL for rich tooltips - Archive of obsolete content
to a xul element. specifically, we create a rich tooltip that uses html instead of plain text. dynamic html in xul tooltip insert the appropriate code from below into your xul overlay. ...
...avascript and iframes. non-dynamic html in xul tooltip it is also possible to avoid using dynamic html to accomplish this. you would have to have a separate xul tooltip element assigned to each element that you wish to have a rich tooltip with. you should write the html straight into the xul. ...
JavaScript Debugger Service - Archive of obsolete content
however, jsd has been removed in favor of the debugger api. see the tracking bug bug 800200 for more details. snippets acquiring the service we acquire the service by calling the xpcom object. ...
...however, jsd has been removed in favor of the debugger api. see the tracking bug bug 800200 for more details. snippets acquiring the service we acquire the service by calling the xpcom object. ...
Preferences - Archive of obsolete content
slash.org/prefutils chrome://global/content/nsusersettings.js https://wiki.mozilla.org/labs/js_modules how to save preferences to save preferences into the default location: var prefservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); prefservice.savepreffile(null); checking for existence of a
key if you try to get the value of a nonexistent preference, an error will be thrown: error: ns_error_unexpected: component returned failure code: 0x8000ffff (ns_error_unexpected) [nsiprefbranch.getcharpref] to avoid such errors, you should check whether the
key exists or not using nsiprefservice.getpreftype(), as shown below: var prefservicebranch = components.classes["@mozilla.org/preference...
...error_unexpected) [nsiprefbranch.getcharpref] to avoid such errors, you should check whether the
key exists or not using nsiprefservice.getpreftype(), as shown below: var prefservicebranch = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice).getbranch(""); if(prefservicebranch.getpreftype('extensions.myext.
key')){ //
key exist! } examples github - gist :: _ff-addon-template-bootstrapprefsskeleton - this gist here is a fully working example of a fully funcitonal preferences skeleton, it uses the observer example from above. this example also uses a technique to trigger an onchange function that can be defined per preference and has the old value and along with the new value of the preference.
Code snippets - Archive of obsolete content
browsers together with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual machines in pure ecmascript. therefore, it is also possible, in theory, to use ecmascript for a smaller task: parsing exotic programming languages (i.e., creating compilers). this snippets shows a possible way to start from. browser-oriented code tabbed browser code (firefox/seamon
key) basic operations, such as page loading, with the tabbed browser, which is the heart of mozilla's browser applications cookies reading, writing, modifying, and removing cookies page loading code used to load pages, reload pages, and listen for page loads interaction between privileged and non-privileged code how to communicate from extensions to websites and vice-versa. downloading files ...
... external links the content at mozillazine example code is slowly being moved here, but you can still find useful examples there for now. ...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
his guide instead. on the other hand, if you are an experienced developer or team, and you know that you are going to build a large, complex extension, you would do well to consider the approach described in this article. one final note: i've only tried these techniques inside firefox, but they'll probably work more or less unchanged on other gecko-based platforms like thunderbird or seamon
key. if someone can confirm this and/or provide guidelines for what's different, i'll update the article to incorporate this information. bambi meets mozilla none of this is for the faint of heart. in particular, the initial step involves building mozilla, which is a huge - nay, gargantuan! - project. many intelligent developers have been driven to the brink of insanity trying to build ...
..../.. topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk module = myextension dirs = public src xpi_name = myextension install_extension_id = myextension@mycompany.com xpi_pkgname = myextension dist_files = install.rdf include $(topsrcdir)/config/rules.mk a detailed description of the make process, describing the
key features of this makefile, can be found here. module and xpi_name are both set to the name of your extension; they should be repeated in all project makefiles so that all of the files land in the same place in the xpi staging area (see below). install_extension_id is the unique id of your extension. this can be a guid, but the format shown above is prettier and, let's face it, a lot easier to rem...
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
initions from xpidl in the actual source code. note: interface definition language (idl) is a language for giving standard definitions of objects, methods, and so forth. the xpidl (cross-platform idl) used by mozilla is a partial extension to the corba idl. you can perform a full-text search of the firefox source code in mozilla cross-reference using character strings, filenames, etc as search
keys. if you’re having trouble with any of the details of the interface, it is helpful to search on the source code for usage examples within firefox. note: to look at the firefox 3 source code, choose "firefox 3" in the starting points list. for firefox 3.5 choose "mozilla 1.9.1." for the current development trunk of firefox, choose "mozilla central" and for thunderbird, choose "comm. central".
...s as you need. for instance, this is the case for files (nsilocalfile). those are created with createinstance(). it's important to know whether a component should be created with getservice() or createinstance(), because using one instead of the other can cause problems. ...
Adding windows and dialogs - Archive of obsolete content
dles all of this transparently. all you need to do is define which buttons you'll need and the actions associated with them. <dialog id="xulschoolhello-hello-dialog" title="&xulschoolhello.hellodialog.title;" buttons="accept,cancel" ondialogaccept="return xulschoolchrome.hellodialog.accept();" ondialogcancel="return xulschoolchrome.hellodialog.cancel();" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> carefully read the specification of the dialog element. you'll see that you can choose from a wide variety of buttons, associate any action you need to them, override their labels, and even add completely customized extra buttons. all of this without having to worry about your dialog looking odd in some operating systems. the only constant rule is that clic...
...u can also set persistence programatically using the document.persist function: document.persist("xulschoolhello-some-checkbox", "checked"); persistent data is stored in the user profile, in the file localstore.rdf. you may need to modify or delete this file often when testing persistent data in your extension. focus and tabbing moving through all input controls in a window using only the
keyboard is an accessibility requirement. you can do this in most firefox windows by pressing the tab
key. each tab
key press moves you to the next control in the window, giving it focus. in general, there's nothing you need to do in order to have good
keyboard focus management. firefox will automatically focus the first input control in your window, and tab focus advances in the order the items are...
Security best practices in extensions - Archive of obsolete content
o keep your users safe. some items mentioned are strict guidelines, meaning that if you don't follow them then your add-on will not be approved on mozilla add-ons. other items are recommendations. the difference will be clearly flagged. this is written from the perspective of a firefox extension, but most items apply to extensions for other mozilla-based applications such as thunderbird or seamon
key. web content handling in general the best way to ensure that the browser is not compromised when you load content is to make sure it does not have those privileges. a more detailed explanation of this process is in displaying web content in an extension without security issues. the privileges that a document gets also depend on where it comes from. for example, if you load a chrome url, this m...
...nteed, and they are vulnerable to man-in-the-middle attacks. the only legitimate environment for remote scripts is to run in a sandbox. for more information, refer to the evalinsandbox() section. evalinsandbox the evalinsandbox document explains very well how it works, so there will be no repetition here. the usefulness of it and power of how it works is best illustrated by the popular greasemon
key extension, which works on the premise of scripts being downloaded and stored locally, to be injected into the web content context via the sandbox. many extensions use the greasemon
key compiler to bundle it in their extension for convenience. if you choose to do so, beware when making edits to the bundled files so as not to break the well thought out security architecture. third-party javascript ...
Add-ons - Archive of obsolete content
iliar with building an extension. extension packaging extensions are packaged in a form of installable bundle which can be downloaded and installed by a user, or provided pre-packaged with an application or by an external program. extensions use a directory structure which can provide chrome, components, and other files to extend the functionality of an xul program. extensions support in seamon
key 2 starting with seamon
key 2 alpha 1 seamon
key supports toolkit/-style extensions. these type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions. firefox addons developer guide the original document is in japanese and distributed via the xuldev.org website. so there may be still some reference to the xuldev website (we want to host s...
...re strict guidelines, meaning that if you don't follow them then your add-on will not be approved on mozilla add-ons. other items are recommendations. the difference will be clearly flagged. setting up an extension development environment this article provides suggestions for how to set up your mozilla application for extension development. these details apply to firefox, thunderbird, and seamon
key (version 2.0 and above). tabbed browser here you should find a set of useful code snippets to help you work with firefox's tabbed browser. the comments normally mark where you should be inserting your own code. techniques … ...
Install.js - Archive of obsolete content
the use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. to make your extension install in mozilla suite, seamon
key, mozilla firefox pre-0.9 and mozilla thunderbird pre-0.7, you need to have an install.js file in the root of your xpi file. if you want your extension to install in firefox 0.9 and later and/or thunderbird 0.7 and later only, you don't need install.js, you need an install.rdf instead. see also this article from xulplanet's main tutorial. there is a different sample install.js template located at...
...t your extension to install in firefox 0.9 and later and/or thunderbird 0.7 and later only, you don't need install.js, you need an install.rdf instead. see also this article from xulplanet's main tutorial. there is a different sample install.js template located at http://downloads.mozdev.org/xsidebar/mods/. this version has been developed as part of the effort to port firefox extensions to seamon
key from the xsidebar project. pros: this version consolidates all the changable information at the top of the file. and it also knows how to install packaged components, search engines and default preferences. cons: code is bloated since it has to cater for several different ways an extension author can package the .jar file contained in the .xpi file. xpi file structure you can use the code below ...
Installing Dehydra - Archive of obsolete content
prerequisites mercurial 1.0 is needed to access source repositories. make sure that the mq extension is enabled. spidermon
key provides scripting capabilities for dehydra. gcc 4.5, with the package gcc-4.5-plugin-dev installed. (alternately, build from source) a modern linux distribution. dehydra is not supported on mac os x. building spidermon
key it is recommended that you use spidermon
key revision aurora_base_20110705 when building dehydra. cd $home hg clone http://hg.mozilla.org/mozilla-central/ cd mozilla-central hg update aurora_base_20110705 cd js/src autoconf-2.13 mkdir $home/obj-js cd $home/obj-js $home/mozilla-central/js/src/configure --enable-optimize --disable-debug make it has to be checked whether later/newer branches (like aurora_base_20120131) are working, too...
...apply plugin_finish_decl patch wget https://bug559964.bugzilla.mozilla.o....cgi?id=457606 -o finish_decl.diff cd gcc-4.5.3 patch -p0 < ../finish_decl.diff # build gcc cd .. mkdir gcc-objdir mkdir gcc-dist cd gcc-objdir ../gcc-4.5.3/configure --disable-bootstrap --enable-languages=c,c++ --prefix=$pwd/../gcc-dist make make install building dehydra and treehydra building dehydra requires spidermon
key development headers from the previous step. cxx should point to your copy of gcc 4.5. it is recommended to get the latest dehydra sources by checking out from mercurial. (obsolete dehydra releases can be found on the mozilla ftp site.) hg clone http://hg.mozilla.org/rewriting-and-analysis/dehydra/ cd dehydra export cxx=/usr/bin/g++ ./configure \ --js-headers=$home/obj-js/dist/include \ --js...
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
name of the target frame (for <a target="something">, e.g.). nsdocshell::internalload() handles targeting to the correct docshell (if the load has a target window associated with it), scrolling to anchors (if the load is an anchor within the current page), and session history issues. it calls douriload(). douriload() creates a channel, massages it to have the right post data, load flags, cache
key, referrer, etc. it then passes the channel to dochannelload, which does some more flag massaging and then calls into the uriloader. nsuriloader::openuri gets a channel to open, a boolean indicating whether this load is the result of a link click, and an nsisupports "window context" (the docshell triggering the load, actually, but in drag and heavy makeup). it immediately hands off to nsuriloade...
...d the load). if this can't handle the content type, we loop over our stored list of possible listeners (previously registered via registercontentlistener) and ask each one in turn whether it can handle the data. if we still have not found an nsiuricontentlistener, we ask the category manager whether it has an entry for the desired content type under the ns_content_listener_categorymanager_entry
key. if it does, we instantiate that component using its contractid (via createinstance) and call trycontentlistener on it. if we find no content listener willing to handle the data, we look for a content handler (using createinstance on ns_content_handler_contractid_prefix + acontenttype and expecting back an nsicontenthandler). if a handler is found, we call handlecontent on it to give it a chanc...
importUserCertificates - Archive of obsolete content
being dropped. avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <
keygen> or the future web crypto api instead. resultstring = crypto.importusercertificates("nicknamestring","certstring",forcebackup); argument description "nicknamestring" this is the nickname that will be used to describe the certificate in the client's certificate management ui. it should serve to uniquely identify the certificate to the user. for example,...
...response from the ca that contains the user's certificate(s). the response is base-64 encoded. forcebackup this is a boolean argument. it allows the ca or ra to indicate to the client whether to force the user to back up a newly issued certificate (pkcs #12). the importusercertificates() method is used to import newly issued certificates for the user. the private
key for the certificates must already reside in the user's personal private
key database. the request id in the response being imported must match the request id in the associated certification request or recovery request. if the import operation succeeds, an empty string will be returned. if it fails, one of the following error strings will be returned: error string description ...
Makefile.mozextension.2 - Archive of obsolete content
me://$(project)/skin/overlay.css endef export chrome_manifest chrome.manifest: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec8030f7-c20a-464f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640} #seamon
key {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} #sunbird {718e30fb-e89b-41dd-9da7-e25a45638b28} #netscape browser {3db10fab-e461-4c80-8b97-957ad5f8ea47} ###### define install_rdf <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"> <id>$(project_id)</id> <name>$(project_name)</name> <version>$(proje...
... <id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"><script src="overlay.js"/></overlay> ...
Mozilla Application Framework in Detail - Archive of obsolete content
ications it supports will be usable on any supported platform or device. this will dramatically reduce the cost and complexity of developing and distributing rich web applications and full-functionality browsing devices that run them. by meeting the needs of developers and companies who are working to provide consumers with new interactive applications, solutions and services, gecko will become a
key catalyst for new growth and innovation and for delivering anytime, anywhere access to millions of new users. as the heart of a browser, the browser engine software component is responsible for interpreting and rendering the graphics, text and script on the web. with gecko, mozilla has cleanly separated the browser engine component from the rest of the client software so it can be embedded and use...
...orms and devices can write once to w3c standards and their content and web applications will be accessible from across computing platforms and devices. gecko is based on contributions from mozilla.org, the organization chartered with managing netscape's open source initiative among thousands of internet developers and participating vendors such as netscape. the gecko browser engine offers several
key benefits including: size: gecko has been designed to be lean and modular, bringing full-functionality browsing to a variety of new consumer devices. because it is small, gecko can be embedded on devices with limited footprints and it minimizes download size for desktop browsers. speed: gecko has been designed for speed and is several times faster than previous versions of internet browsing so...
Proxy UI - Archive of obsolete content
camino configured in os (networking preferences) (recently added - some support for reading os and account settings.)ui elements preferences panel overview the ui is based on selecting a proxy mode, then filling out any additional needed information in "related" ui. ...
...sets the menu selection and the proxy mode (network.proxy.type) selecting a disabled item is not allowed. selecting "proxy configuration..." opens the preferences panel to "advanced > proxies" (tbdescribed: changing the prefs values). unfiled bug: changing proxy mode does not update the menu. mouseover when online, the tooltip will include the current proxy mode: code http://mxr.mozilla.org/seamon
key/sou...ityoverlay.xul bugs bug 243624 reference network.proxy.type ...
File object - Archive of obsolete content
warning: this section describes the file component of the spidermon
key javascript interpreter. file is non-standard, not generally compiled into distributions, is a potential source of huge security holes, and not well tested. getting started in order to use the file object from your javascript programs, you must enable it by setting the make variable js_has_file_object during the compilation of your spidermon
key engine. ...
...interpreter. file is non-standard, not generally compiled into distributions, is a potential source of huge security holes, and not well tested. getting started in order to use the file object from your javascript programs, you must enable it by setting the make variable js_has_file_object during the compilation of your spidermon
key engine. if you are building a standalone version of spidermon
key (see: spidermon
key build documentation), this variable can be added on the make command line, like so: cd mozilla/js/src make -f makefile.ref js_has_file_object=1 alternatively, if you are building a larger product (such as a browser) and want to include the file object, you may need to perform minor makefile surgery. summary non-standard server-side object this object lets you work files a...
TraceVis - Archive of obsolete content
the log can be postprocessed into a visualization that can be used to rapidly diagnose many tracing-related performance issues. so far, most of the documentation on tracevis is contained in the announcement blog post. prerequisites the visualization scripts require pil (python imaging library). building with tracevis these are the steps to build a js shell with tracevis, starting from a mozilla source directory. ...
... current directory. running with tracevis to run a shell with tracevis: dist/bin/js -j -t /tmp/tracevis.log myprogram.js the tracevis log file is a binary file consisting of a sequence of 8-byte records. there are two scripts for postprocessing the log files in js/src/tracevis. text summary python binlog.py /tmp/tracevis.log this prints a summary of the log. the first part lists the time tracemon
key spent in each major tracing activity. the second part lists the reasons tracemon
key transitioned to the interpreter, and the amount of interpreter time charged to each reason. visualization python vis.py /tmp/tracevis.log /tmp/tracevis.png this creates a png format visualization of tracemon
key activities. there is a color for each activity. time goes forward down each column of pixels, then to th...
Venkman Introduction - Archive of obsolete content
more confident web developer and debugger. venkman is both a graphic and a console debugger. features such as breakpoint management, call stack inspection, and variable/object inspection are available from the user interface and from console commands, letting you work in the way you are most accustomed to. the interactive console also allows for execution of arbitrary javascript code. venkman's
keyboard shortcuts are the same as leading visual debugging environments, and gdb users should be familiar with venkman's /break, /step, /next, /finish, /frame, and /where commands. on windows, the javascript debugger compares favorably with visual interdev and other large web development tools. on other platforms, including mac os and unix, it is alone in offering this degree of flexibility, depth,...
...it, a small red dot will show up in the function icon, as well as the parent's file icon. the local variables view the local variables view is on the left portion of the window, at the bottom. when the debugger is stopped, the local variables view displays values for the current function. the scope object holds all arguments and local variables, and the this object holds the value of the this
keyword. e enumerable property r read only property p permanent (cannot be deleted) a alias to another property a argument to a function v declared with var figure 8. property flags properties of both scope and this objects are listed alphabetically, grouped by data type. figure 9 shows which icons represent which dat...
Venkman - Archive of obsolete content
note that it is not included in the gecko-based browsers such as k-meleon, galeon and netscape 8.x. venkman has been provided as part of the mozilla install distribution since october 2001, as well as an extension package in xpi format. ...
...ten in javascript and xul, which allows venkman to be fully cross-platform. venkman is named after the character dr. peter venkman, played by bill murray in the movies ghostbusters and ghostbusters ii. getting venkman firefox and thunderbird the latest version of javascript debugger is available from firefox add-ons. mozilla suite and seamon
key these releases come with venkman pre-installed. on windows, it is an install option; choose advanced install. also available from firefox add-ons as an extension. nvu and kompozer javascript debugger extension version 0.9.84 is available from nvu's downloads page. we encourage you to use the latest available version 0.9.87.1 (or higher) with firefox instead. ...
Writing textual data - Archive of obsolete content
encodings (utf-8, utf-16, utf-32) can represent "all" characters (the full repertoire of unicode) while others can only represent a subset of the full repertoire. when the file is to be read only by the application/extension itself, using utf-8 is often the best choice — it can represent all characters, and ascii characters are represented efficiently. ...
...y character encodings need it, but for those that do calling this is important for proper output. var fin = converter.finish(); if (fin.length > 0) os.write(fin, fin.length); os.close(); converting a string into a stream sometimes, it is useful to convert a string into a stream, for example for uploading it using nsiuploadchannel. the example here requires gecko 1.8 (firefox 1.5, seamon
key 1.0). nsiscriptableunicodeconverter has a simple method to do that: // first, get and initialize the converter var converter = components.classes["@mozilla.org/intl/scriptableunicodeconverter"] .createinstance(components.interfaces.nsiscriptableunicodeconverter); converter.charset = /* the charset you want to use. using utf-8 in this example */ "utf-8"; // now, conver...
Creating XPI Installer Modules - Archive of obsolete content
addons for various toolkit applications, such as firefox or thunderbird, should be packaged in a different way. mozilla has introduced major changes to the way that themes and all the other parts of the ui are packaged. this new packaging scheme is called xpi (pronounced "zippy"), and interacts with xpinstall. a xpi file typically contains the resources to be installed (in this case the barley.jar we want to have installed in the mozilla/bin/chrome/ directory) and an install script that guides the installation process. ...
...urces needless to say, one of the first things you will have to create is the actual software you wish to make redistributable. ...
Install Wizards (aka: Stub Installers) - Archive of obsolete content
rowser xpi installer and the xpinstall api reference. what do we mean by engine code? the xpinstall engine processes installer packages by reading instructions from their install scripts to extract files and take other install actions. the same xpinstall engine is used by the browser and the stub installers on all platforms. the xpinstall engine source resides at: <http://lxr.mozilla.org/seamon
key/sou...xpinstall/src/> what do we mean by stub installer? the install wizards used to install mozilla are lightweight stubs targeted to be around 200 kb disk footprint. users download the stub installers, choose which packages to install, choose the destination directory for the installation, and select from various other options. subsequently, when users click the "install" button the install ...
...mac, and gtk for the unix version. to learn more about the three platform-specific versions of the stub installer follow the links below: unix stub installer mac stub installer windows stub installer what do we mean by xpistub? the xpinstall engine is not called directly by the stub installer. the stub installer calls some glue code: xpistub which resides at: < http://lxr.mozilla.org/seamon
key/sou...pinstall/stub/> this "glue" code initialized xpcom and registers the xpinstall engine and requisite components to prepare for use by the stub installer. the stub installer hands off one-by-one a series of xpis to install. what do we mean by libxpnet? cross-platform functionality for making file transfers across a network is provide by the library libxpnet. complete details about this lib...
loadResources - Archive of obsolete content
description the format of the properties file expected by loadresources is the same as that of the chrome locale .properties files. ...
...description the format of the properties file expected by loadresources is the same as that of the chrome locale .properties files. ...
Return Codes - Archive of obsolete content
name code explanation success 0 success. reboot_needed 999 the files were installed, but one or more components were in use. restart the computer and the application to complete the installation process. on windows nt, you may only need to restart the application as long as you did not replace operating system files. ...
...t file insufficient_disk_space -235 not enough disk space for install filename_too_long -236 unable_to_locate_lib_function -237 unable_to_load_library -238 chrome_registry_error -239 malformed_install -240
key_access_denied -241 access to the registry
key has been denied
key_does_not_exist -242 registry
key does not exist value_does_not_exist -243 registry value does not exist invalid_signature -260 the signature used in the xpi is not valid invalid_hash -261 the hash used in the ...
autocompletesearch - Archive of obsolete content
« xul reference home autocompletesearch new in thunderbird 2requires seamon
key 1.1 type: space-separated list of values a space-separated list of search component names, each of which implements the nsiautocompletesearch interface. the components are created using the name @mozilla.org/autocomplete/search;1?name= where name is listed in this attribute. search-autocomplete requires seamon
key 2.1 the user's default search engine's suggestions are searched. places-tag-autocomplete requires seamon
key 2.1 the user's places tags are searched. mydomain new in thunderbird 3 requires seamon
key 2.0 the user's email domain is suggested. history requires seamon
key 2.0 the user's url history is searched. ...
...mon
key 2.1 the user's default search engine's suggestions are searched. places-tag-autocomplete requires seamon
key 2.1 the user's places tags are searched. mydomain new in thunderbird 3 requires seamon
key 2.0 the user's email domain is suggested. history requires seamon
key 2.0 the user's url history is searched. form-history requires seamon
key 2.0 search the values that the user has entered into form fields. file (linux only) the local file system is searched. gloda new in thunderbird 3 addrbook new in thunderbird 3 requires seamon
key 2.0 the user's address book is searched. ldap new in thunderbird 25 requires seamon
key 2.22 the user's ldap directory is searched. ...
modifiers - Archive of obsolete content
« xul reference home modifiers type: space-separated list of the values below a list of modifier
keys that should be pressed to invoke the
keyboard shortcut. multiple
keys may be separated by spaces or commas.
keys will map to other
keys on platforms that do not have them. shift: the shift
key. alt: the alt
key. on the macintosh, this is the option
key. on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for entering special characters in text. meta: the meta
key. on the macintosh, this is the command
key. control: the control
key. os: windows logo
key on windows, super or hyper
key on linux. ...
.... on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for entering special characters in text. meta: the meta
key. on the macintosh, this is the command
key. control: the control
key. os: windows logo
key on windows, super or hyper
key on linux. this shouldn't be specified directly because it may conflict with system wide shortcut
key. accel: the
key used for
keyboard shortcuts on the user's platform, which is control on windows and linux, and command on mac. usually, this would be the value you would use. access: the access
key for activating menus and other elements. on windows, this is the alt
key, used in conjuction with an element's access
key. any: indicates that all modifiers preceding it are optional. ...
onchange - Archive of obsolete content
« xul reference home overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter
key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="hor...
...xt at this point can only access the following things: global values/functions i.e. ...
List of commands - Archive of obsolete content
t cmd_selectwordprevious cmd_selectwordnext cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_movepageup cmd_movepagedown cmd_selectpageup cmd_selectpagedown other commands the following list other commands (prefixed by cmd_ or browser:) which have not been categorized here yet (though they are in the alphabetical list below): http://lxr.mozilla.org/seamon
key/sou...baroverlay.xul http://lxr.mozilla.org/seamon
key/sou...t/navigator.js http://lxr.mozilla.org/seamon
key/sou...toroverlay.xul http://lxr.mozilla.org/seamon
key/sou...onaltoolbar.js http://lxr.mozilla.org/seamon
key/sou...rceoverlay.xul http://lxr.mozilla.org/seamon
key/sou...extoverlay.xul http://lxr.mozilla.org/seamon
key/sou...lityoverlay.js http://lxr.mozilla.org/seamon
key/sou...oomoverl...
...illa.org/seamon
key/sou...t/navigator.js http://lxr.mozilla.org/seamon
key/sou...toroverlay.xul http://lxr.mozilla.org/seamon
key/sou...onaltoolbar.js http://lxr.mozilla.org/seamon
key/sou...rceoverlay.xul http://lxr.mozilla.org/seamon
key/sou...extoverlay.xul http://lxr.mozilla.org/seamon
key/sou...lityoverlay.js http://lxr.mozilla.org/seamon
key/sou...oomoverlay.xul http://lxr.mozilla.org/seamon
key/sou...toroverlay.xul http://lxr.mozilla.org/seamon
key/sou...ark.properties http://lxr.mozilla.org/seamon
key/sou...kmarks-temp.js http://lxr.mozilla.org/seamon
key/sou.../bookmarks.xml http://lxr.mozilla.org/seamon
key/sou...rksoverlay.xul http://lxr.mozilla.org/seamon
key/sou...okmarkstree.js list of commands (listed alphabetically) browser:addbookmark browser:addbookmarkas browser:add...
Special per-platform menu considerations - Archive of obsolete content
menu_mac_hide_app selecting this item will hide the application. menu_mac_hide_others selecting this item will hide all other applications except this one. menu_mac_show_all selecting this item will show the windows for all applications. checkforupdates the item that opens the update dialog for the application, for applications that have one (such as seamon
key; firefox does not have this item). the last five items aren't normally used but are listed for completeness. here is an example: <menubar> <menu label="tools"> <menupopup> <menuitem label="spell check"/> <menuitem id="menu_preferences" label="preferences" oncommand="window.opendialog('options.xul', '_new', 'chrome');"/> </menupopup> </menu> </menub...
...p> <menuitem label="spell check"/> <menuitem id="menu_preferences" label="preferences" oncommand="window.opendialog('options.xul', '_new', 'chrome');"/> </menupopup> </menu> </menubar> this menu item will be placed on the application menu on the macintosh but left in the tools menu on other platforms. when moved to the application menu, the label and shortcut
keys are overridden by platform conventions. however, regardless of the platform, the command event will be fired on the menu item when it is activated by the user. notes for firefox extension developers on the mac, some elements, once moved to the application menu, are no longer accessible from xul overlays or from javascript injected into browser.xul. for example, using document.getelementbyid()...
Popup Guide - Archive of obsolete content
have a series of commands that can be activated by the user, but don't want to use the extra space for a button for each command. a menu is normally hidden, and when activated, a popup appears containing the list of commands. the user may select a command and the menu disappears again. a menu is created using the menupopup element. it displays items in a list, can display submenus, and provides
keyboard navigation between the items. a menu should only contain menu related elements. context menus a context menu is like a regular menu except that the commands it contains apply to what the user had clicked on to open the context menu. often, depending on what was clicked on, certain commands may be hidden if not applicable to that element. panels a panel can contain any type of content. it...
...uitem element modifying the items on a menu to append, insert and remove elements from a menu, see modifying a menu. events when popups are opened or closed the popupshowing and popupshown events are fired when a menu or popup is opened. the popuphiding and the popuphidden events are fired when a menu or popup is closed. for information about these events, see popup events. handling
keys within popups for information about how
keys are handled within menus and panels, see handling
keys within popups. platform specific menu considerations see special per-platform menu considerations for some notes about handling menus on certain platforms, for instance creating the application menu on a macintosh. using popups in extensions extensions may add additional menuitems either ...
Property - Archive of obsolete content
« xul reference accessible accessibletype access
key align allnotifications allowevents alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi custo...
... controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled disable
keynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnon...
Sorting Results - Archive of obsolete content
sorted ascending by name. <listbox datasources="people2.xml" ref="*" querytype="xml" sort="?name" sortdirection="ascending"> <template> <query expr="*/*"/> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> it will often be the case that multiple items have the same value, especially for larger amounts of data. you can specify multiple sort
keys to further define how a sort should be handled in the case where the values for the first sort
key are the same. to do this, just add another
key after the first separated by a space, as in the following: sort="?name ?gender" in this example, results will be sorted by name, followed by gender for those with identical names. you may add as many sort
keys as desired. sorting occurs when output is...
... « previousnext » ...
The Joy of XUL - Archive of obsolete content
th dynamic html (dhtml) will learn xul quickly and can start building applications right away. also described are some reasons application developers might choose to leverage xul and mozilla technology for building cross-platform applications. this same investigation will provide sufficient explanation of mozilla's motivation to build xul and why the mozilla platform is constructed using it. ...
... same investigation will provide sufficient explanation of mozilla's motivation to build xul and why the mozilla platform is constructed using it. the
key features and benefits of xul will be explored followed by an examination of supporting mozilla technologies. finally, a mini case study of a calendar application written in xul will reinforce the benefits of building applications with mozilla.
key features and benefits powerful widget-based markup language the goal of xul is to build cross platform applications, in contrast with dhtml which is intended for developing web pages. for this reason, xul is oriented toward application artifacts such as windows, labels, and buttons instead of pages, heading levels, and hypertext links. in fact, many developers invest a significan...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
r contents.rdf (or chrome.manifest) is correct, and be sure you didn't forget to apply the stylesheet to customizetoolbar.xul. ...
...alette more information xulplanet.com references: <toolbarbutton>, <toolbaritem>. how to adjust toolbar button's label position a forum thread about adding an item to the toolbar (instead of just adding it to palette) right after an extension is installed. note that this is not recommended. there is another page on mdc with information about adding buttons to various windows in seamon
key. includes useful information about overlays for chatzilla. ...
Commands - Archive of obsolete content
vantages to using this approach. first, it moves all your operations onto commands which can all be grouped together in one section of the xul file. this means that code is all together and not scattered throughout the ui code. the other advantage is that several buttons or other ui elements can be hooked up to the same command. for instance, you might have a menu item, a toolbar button and a
keyboard shortcut all for the same operation. rather than repeat the code three times, you can hook all three up to the same command. normally, you would only hook up elements that would send a command event. additionally, if you set the disabled attribute on the command, the command will be disabled and it will not be invoked. any buttons and menu items hooked up to it will be disabled automat...
...he delete command on the browser's edit menu is enabled and that selecting it will delete a row. (see discussion about opening this example). the example below isn't completely polished. really, we should ensure that the selection and focus is adjusted appropriately after a deletion. ...
Creating a Wizard - Archive of obsolete content
om and the page contents in between. the title across the top is created using the title attribute, much like one would use for regular windows. the navigation buttons are created automatically. ...
...ed. you can set an attribute onwizardfinish on the wizard element to accomplish this. set it to a script which performs whatever task you want and then returns true. this script might be used to save the information that the user entered during the wizard. for example: <wizard id="example-window" title="select a dog wizard" onwizardfinish="return savedoginfo();" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> when the user clicks the finish button, the function savedoginfo() will be called, which would be defined in a script file to save the information that was entered. if the function returns true, the wizard closes. if it returns false, then the wizard does not close, which might occur if the function savedoginfo() encountered invalid input, for example. ther...
Element Positioning - Archive of obsolete content
ulation is slightly trickier. flexible elements are those that have a flex attribute set to a value greater than 0. recall that flexible elements grow and shrink to fit the available space. their default size is still calculated the same as for inflexible elements. the following example demonstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier. the first two buttons will be sized at a suitable default width and the third button will be larger because it has a longer label. the first button is made ...
...ements themselves. for example, the first box below will have its children stretch, because that is the default. the second box has an align attribute, so its children will be placed centered. example 5: source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yesno" title="question" orient="horizontal" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes"/> <button label="no"/> </hbox> <hbox align="center"> <button label="maybe"/> <button label="perhaps"/> </hbox> </window> you can also use the style properties -moz-box-pack and -moz-box-align instead of specifying attributes. you may find the box alignment example useful for trying out the various box p...
Popup Menus - Archive of obsolete content
appears when you click on the little down arrows next to the back and forward buttons in a browser window. context popups the context popup is a popup window which appears when the user presses the context menu button, which is usually the right mouse button. the exact way that a context menu is opened varies on each platform. on the macintosh for example, the user can either press the control
key and click the mouse button, or hold the mouse button down for a moment. also note that it is possible to open context menus without using the mouse, for example by pressing the menu
key on a
keyboard. tooltips a tooltip popup window will appear when the user hovers over an element with the mouse. this type of popup is usually used to provide a description of a button in more detail than can be ...
..."/> <menuitem label="page 2"/> </menupopup> </popupset> <button label="pop me up" popup="backpopup"/> our find files example let's add a simple popup menu to the find files dialog. for simplicity, we'll just replicate the contents of the edit menu. let's have the popup appear when clicking over the first tab panel: <popupset> <menupopup id="editpopup"> <menuitem label="cut" access
key="t"/> <menuitem label="copy" access
key="c"/> <menuitem label="paste" access
key="p" disabled="true"/> </menupopup> </popupset> <vbox flex="1"> . . . <tabpanel id="searchpanel" orient="vertical" context="editpopup"> here a simple popup that is similar to the edit menu has been added to the first tabpanel. if you right-click (control-click on the macintosh) anywhere on the first panel,...
RDF Datasources - Archive of obsolete content
nc:personaltoolbarfolder the bookmark folder...
...to display only the reptiles, use a value of http://www.some-fictitious-zoo.com/reptiles. setting the ref attribute example the example below shows how to display a particular piece of an rdf datasource by setting the ref attribute. ...
Tree View Details - Archive of obsolete content
uch a case. example of hierarchical custom view let's put this together into a simple example that takes an array and constructs a tree from it. this tree will only support a single parent level with an inner child level, but it could be extended to support additional levels without too much effort. we'll examine it piece by piece. <window onload="init();" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> </window> we use a simple tree here with no data in the treechildren. the 'init' function is called when the window is loaded to initialize the tree. it simply sets the custom view by retrieving the tree ...
...w. complete example there are several other view functions we can implement but they don't need to do anything in this example, so we can create functions that do nothing for those. ...
Trees - Archive of obsolete content
ndividual rows or cells in the normal way. this is because there are no elements that display the individual cells, like there is with the listbox. instead, all drawing is done by the tree body using data supplied by the view. this is an important point and many xul developers have trouble understanding this aspect. to modify the appearance of a tree cell, the view must instead associate a set of
keywords for a row and cell. a special css syntax is used which styles components of the tree body with those
keywords. in a sense, it is somewhat like using css classes. tree styling will be discussed in detail in a later section. tree elements trees can be created with the tree element, which is described in the following sections. there are also two elements used to define the columns to be disp...
...cells. these are created using the treecell element. you can set the text for the cell using the label attribute. the first treecell in a row determines the content that will appear in the first column, the second treecell determines the content that will appear in the second column, and so on. the user can select the treeitems by clicking on them with the mouse, or by highlighting them with the
keyboard. the user can select multiple items by holding down the shift or control
keys and clicking additional rows. to disable multiple selection, place a seltype attribute on the tree, set to the value single. with this, the user may only select a single row at a time. add a tree to our find files example let's add a tree to the find files window where the results of the search would be displaye...
XBL Inheritance - Archive of obsolete content
vent handlers. the child binding will have all the features it defines in addition to the features from the binding it inherits from (and any that binding inherits from and so on up the tree). to extend an existing binding, add an extends attribute on to the binding tag. for example, the following binding creates a textbox which adds the text 'http://www' to the beginning of its value when the f4
key is pressed. example 1 : source <binding id="textboxwithhttp" extends="chrome://global/content/bindings/textbox.xml#textbox"> <handlers> <handler event="
keypress"
keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element. the url given in the extends attribute above is the url of the textbox bindi...
...autocompleting textboxes the example above is similar to how the url autocomplete feature works in mozilla. a textbox that supports autocomplete is just one with a xbl binding that extends the basic textbox. the autocomplete textbox adds extra event handling so that when a url is typed, a menu will pop up with possible completions. ...
XUL Parser in Python/source - Archive of obsolete content
source code for the xul parser in python. import sys, glob, xmllib import os, re el_list = {} w = open('res.html', 'w') # unfortunately, i had to put this hack in here to suppress the printing out of the resolved namespace: # "xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul window", etc. def strip(snip): t = re.sub('http://.*?\s', '', snip) return t class xulparser(xmllib.xmlparser): def unknown_starttag(self, t, a): name = strip(t) if name not in el_list: el_list[name] = {} for attr,val in a.items(): el_list[name][strip(attr)] = strip(val) def syntax_error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file ...
... /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic table of xul elements</h3>') w.write('<table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_list.
keys() elements.sort() for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item]: w.write('<tr><td class="at">' + a + '</td>') w.write('</table></html>\n') w.close() ...
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image
key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script...
...listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script commandset command broadcaster broadcasterset observes
key keyset stringbundle stringbundleset arrowscrollbox dropmarker grippy scrollbar scrollcorner spinbuttons all attributes all properties all methods attributes defined for all xul elements style classes event handlers deprecated/defunct markup ...
browser - Archive of obsolete content
documentcharsetinfo obsolete since gecko 12.0 type: nsidocumentcharsetinfo this read-only property contains the nsidocumentcharsetinfo object for the document which is used to handle which character set should be used to display the document. the properties of the nsidocumentcharsetinfo object were merged into the docshell in gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9). homepage type: string home page url this property holds the value of the user's home page setting. markupdocumentviewer type: nsimarkupdocumentviewer this read-only property contains the nsimarkupdocumentviewer which is responsible for drawing the document. preferences type: nsiprefservice this read-only property contai...
...e flags listed below may be used, which are all constants of the webnavigation property (or the nsiwebnavigation interface). you may combine flags using a or symbol ( | ). load_flags_none: no special flags. the document is loaded normally. load_flags_bypass_cache: reload the page, ignoring if it is already in the cache. this is the flag used when the reload button is pressed while the shift
key is held down. load_flags_bypass_proxy: reload the page, ignoring the proxy server. load_flags_charset_change: this flag is used if the document needs to be reloaded because the character set changed. removeprogresslistener( listener ) return type: no return value remove a nsiwebprogresslistener from the browser. stop() return type: no return value equivalent to...
caption - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a header for a groupbox. it may contain either a text label, using the label attribute, or child elements for a more complex caption. more information is available in the xul tutorial. attributes access
key, crop, image, label, tabindex properties access
key, crop, image, label, tabindex examples <groupbox> <caption label="my groupbox"/> </groupbox> <groupbox flex="1"> <caption> <checkbox label="a checked groupbox"/> </caption> </groupbox> attributes access
key type: character this should be set to a character that is used as a shortcut
key. this should be one of the characters that appears in the label attribute for the element. ...
... label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. properties access
key type: character gets and sets the value of the access
key attribute. crop type: string gets and sets the value of the crop attribute. image type: image url gets and sets the value of the image attribute. label type: string ...
checkbox - Archive of obsolete content
| related ] an element that can be turned on and off. this is most commonly rendered as a box when the element is off and a box with a check when the element is on. the user can switch the state of the check box by selecting it with the mouse. a label, specified with the label attribute, may be added beside the check box. more information is available in the xul tutorial. attributes access
key, checked, command, crop, disabled, src, label, preference, tabindex properties access
key, accessibletype, checked, command, crop, disabled, src, label, tabindex examples <checkbox label="enable javascript" checked="true"/> <checkbox label="enable java" checked="false"/> attributes access
key type: character this should be set to a character that is used as a shortcut
key. t...
...upon user selection of the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. properties access
key type: character gets and sets the value of the access
key attribute. accessibletype type: integer a value indicating the type of accessibility object for the element. checked type: boolean gets and sets the value of the checked attribute...
datepicker - Archive of obsolete content
ear properties may be used to retrieve and modify each component of the date separately. !!attention: there is also a datepicker in tb-calendar with differing definitions for members (value is a date there) the change event is fired whenever the date is changed. however, as described in mozilla bug #799219, a change event handler may encounter erratic behavior when the date is changed using the
keyboard instead of the mouse. to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-event-handler-function, 0); to queue up your event handler to run after the rest of the picker's change event handlers. a monthchange event is fired for the grid and popup datepickers whenever a new month is navigated to or displayed. attributes disabled, firstdayofweek, re...
...ault value is determined by the locale, so only use this attribute if you want to override it. readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below you can set the type attribute to one of the values below to specify the type of datepicker to use normal a datepicker with three fields for entering the year, month and date. this is the default value so do not specify the type attribu...
scale - Archive of obsolete content
displayed either horizontally or vertically allows the user to select a value by dragging a thumb on the bar. use the orient attribute to specify the orientation of the scale. the default value is horizontal which displays a horizontal scale. lower values are to the left and higher values are to the right. set the orient attribute to vertical to use a vertical scale. the user may use the arrow
keys to increment and decrement the value by one unit, or the page up and page down
keys to increment and decrement the value by one page, as specified by the pageincrement attribute. the home and end
keys set the scale's value to the minimum and maximum values, respectively. a scale will fire a change event whenever the scale's value is modified. attributes dir, disabled, increment, max, min, mo...
...n. if false, clicking the slide area moves the thumb only one increment in that direction. if not specified, the default value is used, which varies for each platform. pageincrement type: integer the amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down
keys are pressed. the default value is 10. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose,...
tabbrowser - Archive of obsolete content
documentcharsetinfo obsolete since gecko 12.0 type: nsidocumentcharsetinfo this read-only property contains the nsidocumentcharsetinfo object for the document which is used to handle which character set should be used to display the document. the properties of the nsidocumentcharsetinfo object were merged into the docshell in gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9). homepage type: string home page url this property holds the value of the user's home page setting. markupdocumentviewer type: nsimarkupdocumentviewer this read-only property contains the nsimarkupdocumentviewer which is responsible for drawing the document. securityui type: nsisecurebrowserui the read-only property holds a...
...e flags listed below may be used, which are all constants of the webnavigation property (or the nsiwebnavigation interface). you may combine flags using a or symbol ( | ). load_flags_none: no special flags. the document is loaded normally. load_flags_bypass_cache: reload the page, ignoring if it is already in the cache. this is the flag used when the reload button is pressed while the shift
key is held down. load_flags_bypass_proxy: reload the page, ignoring the proxy server. load_flags_charset_change: this flag is used if the document needs to be reloaded because the character set changed. removealltabsbut( tabelement ) return type: no return value removes all of the tab panels except for the one corresponding to the specified tab. if only one tab page is displayed, this me...
timepicker - Archive of obsolete content
ring of the form hh:mm:ss whereas the latter specifies the time as a date object. in addition, the hour, minute and second properties may be used to retrieve and modify each component of the time separately. the change event is fired whenever the time is changed. however, as described in mozilla bug #799219, a change event handler may encounter erratic behavior when the time is changed using the
keyboard instead of the mouse. to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-event-handler-function, 0); to queue up your event handler to run after the rest of the picker's change event handlers. attributes disabled, hideseconds, increment, readonly, tabindex, value properties amindicator, datevalue, disabled, hideseconds, hour, hour...
...nt. however, the value may still be modified by a script. increment type: integer indicates the number of minutes to skip each time the arrows are pressed. this should be used in combination with setting hideseconds to true. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. value type: string the initial value of the timepicker in either the form hh:mm:ss or hh:mm. properties amindicator type: string the string value displayed for hours between midnight and noon, defaulting to am. this value is determined from the user's locale. datevalue ...
treecol - Archive of obsolete content
make the checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type). on firefox 2.x and 3.x, all operating systems other than mac os x already use these styles by default. if targeting firefox for mac os x, be sure to use these styles but include your own checkbox image. however, chrome://global/skin/checkbox/cbox-check.gif is available in seamon
key on mac os x.. treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */ list-style-image: none; } treechildren::-moz-tree-checkbox(checked){ /* css for checked cells. cbox-check.gif isn't available in firefox 1, 2, and 3 on mac os x, so you should specify a url to an image ...
... column sorted based on that property. the property will usually be the same as that of the cell label. sortactive type: boolean this should be set to true for the column which should be sorted by default. sortdirection type: one of the values below set this attribute to set the direction that template-generated content is sorted. use the sortresource attribute to specify the sort
key. ascending the data is sorted in ascending order. descending the data is sorted in descending order. natural the data is sorted in natural order, which means the order that it is stored in. src type: uri set this attribute to have the treecol element use an image for the header instead of a label. you cannot have both an image and a label displayed in the header. set thi...
Windows and menus in XULRunner - Archive of obsolete content
to control its width and height. although i have not seen it mentioned yet, i am assuming that you can only have one <window> element per xul file. here is an example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ... </window> notice the references to css and dtd files. the css is used to apply formatting to elements, just as it would in html. the dtd is used to create entity references so strings for titles and labels are not stored directly in the xul file; this makes updating the text -- and localization of the application -- much easier.
...n’s available commands. xul provides elements to support both menus and toolbars. ...
XUL Explorer - Archive of obsolete content
a simple editor that can preview xul inline or in a separate popup window. it has a list of code snippets (small fragments of xul or javascript) that can be quickly inserted into the editor. the xul can be loaded from and saved to files. a xul validator and the error console are both available to help debug problems. the help menu provides access to xul information on mdc. there is even simple “
keyword” help lookup for xul elements. roadmap features: the preview pane can be toggled with the editor. previewing in a popup window is still available. option to automatically update the preview as the editor changes. indicator in the statusbar shows errors. double-click to display error console. option to specify the snippet used to load the editor on startup. option to include a user ...
...ew allows user to pick any “template” snippet, as well as blank. simple xul checker can be used to ‘validate’ the xul snippet. it checks for legal element and attribute names, including allowed attributes for a given element. ...
Mozprofile - Archive of obsolete content
setting permissions mozprofile also takes care of adding permissions to the profile. see https://github.com/mozilla/mozbase/b...permissions.py resources other mozilla programs offer additional and overlapping functionali...
...setting permissions mozprofile also takes care of adding permissions to the profile. see https://github.com/mozilla/mozbase/b...permissions.py resources other mozilla programs offer additional and overlapping functionality for profiles. ...
Extentsions FAQ - Archive of obsolete content
us-bar. just drag them there from the toolbar customisation window, like you would when adding buttons to the toolbars." option #4 install toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with getting an extension to process windows messages. use wm_copydata how to creating an extension that can replace html code on a specific page that does not use greasemon
key? var newnode = document.createelement(" ... html content here ... "); var replaceme = document.getelementbyid("replaceme"); replaceme.parentnode.replacechild(newnode, replaceme); is it possible to place an image in the window that can be moved to anywhere in the window, and always remain on top of everything else?(similiar to using position:absolute and-index:100000 in html) you can almost...
...g the properties? string properties are implemented as imap user flags. however not all servers support user flags, in which case you get reduced functionality as follows: all flags are stored in your local cache and are lost if your cache gets invalidated, and only "known" properties are copied when messages are copied. the list of "known" properties is: junkscore junkscoreorigin label priority
keywords.
keywords - in the gui they are called tags. they replace the old labels (although the labels are still recognised). preserved properties source code - nsimapmailfolder::copymessages uaq friday, september 22 - 29, 2006 (↑ top) why extension preferences do not get changed until after it's upgrade? why extension preferences do not get changed until after it's upgrade? is there...
2006-12-01 - Archive of obsolete content
announcements introducing rhinoloader a byproduct of helma that extends java applications with rhino/js. it is basically a java classloader that creates classes from javascript files. server side spidermon
key juicescript is an open source version of a server side javascript. it supports a apache2 module and stand alone version. http://www.juicescript.org/ discussions deleting objects in spidermon
key a user asks if there's a method of manually deleting an object in spidermon
key before garbage collector deletes it. peter wilson's reply was to add a method that does the deleting with a native implementation that releases the resources held by the object as seen in this database interface: var mydbase = new pgsqlconnection; mydbase.connect("database"); mydbase.exec("select * f...
...e collector deletes it. peter wilson's reply was to add a method that does the deleting with a native implementation that releases the resources held by the object as seen in this database interface: var mydbase = new pgsqlconnection; mydbase.connect("database"); mydbase.exec("select * from mytable where ..."); // use the result data - (native implementation function) mydbase.close() spidermon
key for server side inquiry about why javascript hasn't caught on for general server-side scripting. peter wilson lists some important comparisons between spidermon
key and php. he states that javascript is powerful server-side scripting but it lacks in popularity since its only supported by netscape, lacks a wide range of libraries, minimal marketing support. http://www.whitebeam.org is an example...
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
all set of files in the following structure in the xpi file: install.rdf plugins/ pluginlib.dll plugintypes.xpt the install.rdf file contains an install manifest that describes the plugin to the user. the library and scripting interfaces are held in the plugins directory. platform-specific files gecko 1.9.2 (firefox 3.6) and earlier prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1), it was possible to package multiple plugin libraries for different operating systems into a single xpi bundle. in the xpi you can use the following structure: platform/ linux_x86-gcc3/ plugins/ libplugin.so darwin_ppc-gcc3/ plugins/ libplugin.dylib more specific information can be found in the platform-specific subdirectories documentation. g...
...ating systems into a single xpi bundle. in the xpi you can use the following structure: platform/ linux_x86-gcc3/ plugins/ libplugin.so darwin_ppc-gcc3/ plugins/ libplugin.dylib more specific information can be found in the platform-specific subdirectories documentation. gecko 2.0 (firefox 4) and later gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) removed support for platform-specific subdirectories. instead, you need to place the different plugin libraries into the plugins directory. for example: plugins/ libplugin.so libplugin.dylib install manifest the install manifest describes the plugin to the user. for a plugin the manifest only needs to be very simple: <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em=...
Using workers in extensions - Archive of obsolete content
it needs to be updated to post a message to the worker to tell it which stock symbol to track. observe: function(subject, topic, data) { if (topic != "nspref:changed") { return; } switch(data) { case "symbol": this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.worker.postmessage(this.tickersymbol); break; } }, the
key here is line 10, which sends the new ticker symbol to monitor to the ticker thread by calling its postmessage() method. this results in the ticker's onmessage handler being called. the watchstock() and refreshinformation() methods these two methods are very simple. watchstock() is updated to pass the symbol to the ticker thread, and refreshinformation(), whose main functionality is now in the w...
...urrently displayed in the status bar, as well as to update the tooltip that appears while the mouse cursor is hovering over the ticker. this code is essentially identical to what's done in the previous version, except that it's done in response to an event instead of within the refreshinformation() method. a note about chromeworkers requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamon
key 2.1) gecko 2.0 added the new chromeworker object, which provides a special chrome-only worker that can be used by applications and extensions. this worker object has access to js-ctypes, which standard workers do not have. ...
azimuth - Archive of obsolete content
enter-left | center | center-right | right | far-right | right-side ] | behind ] | leftwards | rightwards values angle audible source position is described as an angle within the range -360deg to 360deg. the value 0deg means directly ahead in the center of the sound stage (this is the default value). 90deg is to the right, 180deg is behind, and 270deg or -90deg is to the left. positional
keywords left-side: same as 270deg. left-side behind: same as 270deg. far-left: same as 300deg. far-left behind: same as 240deg. left: same as 320deg. left behind: same as 220deg. center-left: same as 340deg. center-left behind: same as 200deg. center: same as 0deg. center behind: same as 180deg. center-right: same as 20deg. center-right behind: same as 160deg. right: same as 40deg. r...
...eft behind: same as 200deg. center: same as 0deg. center behind: same as 180deg. center-right: same as 20deg. center-right behind: same as 160deg. right: same as 40deg. right behind: same as 140deg. far-right: same as 60deg. far-right behind: same as 120deg. right-side: same as 90deg. right-side behind: same as 90deg. behind: same as 180deg. also used as a modifier for other positional
keyword values, as above. leftwards: moves the sound counter-clockwise by 20 degrees, relative to the current angle. rightwards: moves the sound clockwise by 20 degrees, relative to the current angle. examples h1 { azimuth: 30deg; } td.a { azimuth: far-right; } /* 60deg */ #12 { azimuth: behind far-right; } /* 120deg */ p.comment { azimuth: behind; } /* 180deg */ specificati...
display-outside - Archive of obsolete content
the display-outside css property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context. ...
... values block-level the element generates a block-level box, and participates in a block formatting context. other formatting contexts, such as flex formatting contexts, may also work with block-level elements. inline-level the element generates an inline-level box, and participates in an inline formatting context. run-in the element generates a run-in box. run-in...
New in JavaScript 1.8.5 - Archive of obsolete content
amed property described by a given descriptor to an object. object.defineproperties() adds the named properties described by the given descriptors to an object. object.getownpropertydescriptor() returns a property descriptor for a named property on an object. bug 505587 object.
keys() returns an array of all enumerable properties on an object. bug 307791 object.getownpropertynames() returns an array of all enumerable and non-enumerable properties on an object. bug 518663 object.preventextensions() prevents any extensions of an object. bug 492849 ...
...n javascript 1.8.5 iso 8601 support in date: the date object's parse() method now supports simple iso 8601 format date strings. global objects made read only: the nan, infinity, and undefined global objects have been made read only, per the ecmascript 5 specification. obj.__parent__ and obj.__count__ become obsolete. some information about why: spidermon
key change du jour: the special __parent__ property has been removed bug 551529 & bug 552560. trailing commas no longer accepted in json.parse(). ...
New in JavaScript - Archive of obsolete content
ecmascript versions language resources learn more about the ecmascript standards on which the javascript language is based on. ecmascript 5 support implementation status for the current standard ecma-262 edition 5.1 in mozilla-based engines and products. ecmascript 2015 support implementation status for the draft ecma-262 edition 6 (es2015) in mozilla-based engines and products. ...
...version shipped in firefox 2. released in october 2006. includes generators, iterators, array comprehensions, let expressions, and destructuring assignment. javascript 1.8 version shipped in firefox 3. released in june 2008. includes expression closures, generator expressions and array.reduce() javascript 1.8.1 version shipped in firefox 3.5. released on june 30, 2009. includes the tracemon
key jit and supports native json. javascript 1.8.2 version shipped in firefox 3.6. released june 22, 2009. includes only minor changes. javascript 1.8.5 version shipped in firefox 4. released july 27, 2010. includes many new features for ecma-262 edition 5 compliance. this is the last javascript version. ...
Archived JavaScript Reference - Archive of obsolete content
irefox implementation. do not use it!handler.enumerate()the handler.enumerate() method used to be a trap for for...in statements, but has been removed from the ecmascript standard in es2016 and is deprecated in browsers.legacy generator functionthe legacy generator function statement declares legacy generator functions with the specified parameters.legacy generator function expressionthe function
keyword can be used to define a legacy generator function inside an expression. to make the function a legacy generator, the function body should contain at least one yield expression.microsoft javascript extensionsmicrosoft browsers (internet explorer, and in a few cases, microsoft edge) support a number of special microsoft extensions to the otherwise standard javascript apis.new in javascriptthis ...
...rator, the function body should contain at least one yield expression.microsoft javascript extensionsmicrosoft browsers (internet explorer, and in a few cases, microsoft edge) support a number of special microsoft extensions to the otherwise standard javascript apis.new in javascriptthis chapter contains information about javascript's version history and implementation status for mozilla/spidermon
key-based javascript applications, such as firefox.number.tointeger()the number.tointeger() method used to evaluate the passed value and convert it to an integer, but its implementation has been removed.object.getnotifier()the object.getnotifer() method was used to create an object that allows to synthetically trigger a change, but has been deprecated and removed in browsers.object.observe()the objec...
JavaObject - Archive of obsolete content
parameters parameterlist an optional list of parameters, specified by the constructor of the java class. ...
...rits methods from java.lang.object and any other superclass. examples example: instantiating a java object in javascript the following code creates the javaobject thestring, which is an instance of the class java.lang.string: var thestring = new packages.java.lang.string("hello, world"); because the string class is in the java package, you can also use the java synonym and omit the packages
keyword when you instantiate the class: var thestring = new java.lang.string("hello, world"); example: accessing methods of a java object because the javaobject thestring is an instance of java.lang.string, it inherits all the public methods of java.lang.string. the following example uses the startswith method to check whether thestring begins with "hello". var thestring = new java.lang.string("...
Packages - Archive of obsolete content
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary a top-level object used to access java classes from within javascript code. the support for this object was removed in gecko 16, see liveconnect for details. created by the packages object is a top-level, predefined javascript object. you can automatically access it without using a constructor or calling a method. description the packages object lets you access the public methods and fields of an arbitrary java class from within javascript. ...
...lasses, methods, and fields in these packages. for example, you can access a constructor of the frame class as follows: var theframe = new packages.java.awt.frame(); for convenience, javascript provides the top-level netscape, sun, and java objects that are synonyms for the packages properties with the same names. consequently, you can access java classes in these packages without the packages
keyword, as follows: var theframe = new java.awt.frame(); the classname property represents the fully qualified path name of any other java class that is available to javascript. you must use the packages object to access classes outside the netscape, sun, and java packages. properties classname: the fully qualified name of a java class in a package other than netscape, java, or sun that is avai...
background-size - Archive of obsolete content
are based on gecko. both layout engines are mentioned in the table. ...
...come to contribute. it's hard to get reliable information about its css support without having this browser (read: multiple versions of this browser) installed. are you able and willing to do that for all css properties? if so, feel free to change the en/css_reference/property_template and all css property pages ; ) start with -webkit-background-size and investigate support of contain and cover
keywords and "omitted second value" behavior. [i assume it's the same as safari, since they just backported a webkit patch into khtml. but we need facts, rather than assumptions.] btw, some time ago i'v listed opera in the property template table and removed netscape because netscape is gecko based and opera has a global market share of > 2% (> 40% in some european countries). user:jürgen jeka 2009...
XForms Secret Element - Archive of obsolete content
single-node binding special inputmode - isn't supported. incremental - supported. the default value is false. ...
... single-node binding special inputmode - isn't supported. incremental - supported. the default value is false. ...
XForms - Archive of obsolete content
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. note: support for xforms was removed from firefox in firefox 19. see the html forms guide for approaches to creating forms in html5. xforms essentials an online book giving you a guided tour of xforms. xforms were envisioned as the future of online forms as envisioned by the w3c. drawing on other w3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model. ...
...ation of data from presentation, strong data typing, the ability to submit xml data to servers instead of name/value pairs, and a descriptive way to author forms so that they can be displayed by a wide variety of devices. xforms is a w3c specification. xforms tutorial and cookbook xforms in wikibook format - over 50 examples tested with firefox. xforms support can be added to firefox and seamon
key by installing the mozilla xforms extension. this extension, while supporting a significant subset of the xforms 1.0 and 1.1 candidate recommendations, is not actively maintained any more since about 2010. the last official release has been done for firefox 3.6 and is available for download on addons.mozilla.org. for more details about the future of the mozilla xforms extension see this blog post...
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
ow, the above-mentioned standards organizations provide focus and direction for the development engineering community. by following the guidelines that have been put into place, organizations like aol can enhance user experience, interoperability, code reuse, shared resources, and goodwill while reducing costs. i will discuss each of these items in the following paragraphs. interoperability the
key to interoperability is settling on a standard that has a potential for long-term use. an organization must have the assurance that the standard they choose to incorporate into their development process will be relevant in the future. in other words, there must be long-term potential. a fundamental mistake that many organizations make is to use proprietary methods, software, code, or standards. fo...
...maintain, verify, and certify the tests, and eliminate redundant testing databases to ensure consistency and reliability. like the engineers, standardization also helps the qa engineers become highly proficient and capable of shifting from project to project. summary as organizations expand product development across multiple devices and product families, integration and compatibility must be a
key requirement. adhering to a set of future-focused international standards will make cross-functional integration possible. adopting standards will not only help an organizations end users enjoy a cross application experience; organizations will help themselves by giving development and quality assurance engineers the tools to become better equipped and flexible. lastly, by following a series of st...
XUL Parser in Python - Archive of obsolete content
ain widgets within the xul files, you can get the filename from the calling method p.feed(data) and create a condition that only gets the elements specified in sys.argv[1]. ...
...ied in sys.argv[1]. or, since the dictionary is already storing the values of all the attributes it finds, you can write the values of a particular attribute (e.g., id) to the results file by checking the attribute in sys.argv[1]: for attr in a.
keys(): if strip(attr) == sys.argv[1]: el_list[name][strip(attr)] = strip(a[attr]) and writing thevalues to the html results file instead of the
keys: for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item].values(): w.write('<tr><td class="at">' + a + '</td>') with these modifications, the script creates an output more like a periodic table of xul elements. until i spruce it up a little, this is just a very basic demonstration of using python's xml parser with xul. but mozilla's upcomin...
Building up a basic demo with A-Frame - Game development
e code and refresh your browser you can already see the cube on the screen with our custom background: here's the code we have created so far: you can also check it out on github. a-frame takes care of setting up everything you need: a default light source and camera are included, so the cube is visible. the controls are already working: you can use the mouse for looking around and the
keyboard for movement (try the w, a, s, and d
keys.) there's even an "enter vr mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necesary vr hardware set up and ready. specifying a camera a camera entity can be created by adding an <a-camera> element to the scene. we can set the position of the camera explicitly...
...imate elements. add the <a-animation> element seen below to the <a-box> element as a child, as shown: <a-box color="#0095dd" rotation="20 40 0" position="0 1 0"> <a-animation attribute="rotation" from="20 0 0" to="20 360 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"> </a-animation> </a-box> as with any other entities, you can define
key properties for the animation. we'll be animating the rotation attribute from 20 0 0 to 20 360 0, so it will do a full spin. the animation direction is set to alternate so the animation will be played forward, and then back. the duration is set to 4 seconds, and it will be repeated indefinitely. the animation uses ease for easing, with tween.js being implemented internally. scaling we can also a...
Desktop gamepad controls - Game development
erx -= 5; } else if(gamepadbuttonpressedhandler(3)) { playerx += 5; } if(gamepadbuttonpressedhandler(11)) { alert('boom!'); } // ... ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } in this case, we are checking the four d-pad buttons (0-3) and the a button (11). note: please remember that different devices may have different
key mappings, i.e. the d-pad right button have an index of 3 on the wireless xbox 360, but may have a different one on another device. you could also create a helper function that would assign proper names to the listed buttons, so for example istead of checking out if gamepadbuttonpressedhandler(3) is pressed, you could do a more descriptive check: gamepadbuttonpressedhandler('dpad-right'). you ca...
...launched on desktop or mobile then showing a relevant message for the device, but we can go even further, to allow for the presence of a gamepad: create() { // ... if(this.game.device.desktop) { if(gamepadapi.active) { movetext = 'dpad or left stick\nto move'; shoottext = 'a to shoot,\ny for controls'; } else { movetext = 'arrow
keys\nor wasd to move'; shoottext = 'x or space\nto shoot'; } } else { movetext = 'tap and hold to move'; shoottext = 'tap to shoot'; } } when on desktop, we can check if the controller is active and show the gamepad controls — if not, then the
keyboard controls will be shown. gameplay controls we can offer even more flexibility to the player by gi...
Implementing controls using the Gamepad API - Game development
r turbo mode. it works independently, so it could be turned on even if the gamepad is not connected. note: easter egg time: there's a hidden option to launch super turbo hungry fridge on the desktop without having a gamepad connected — click the gamepad icon in the top right corner of the screen. it will launch the game in the super turbo mode and you'll be able to control the fridge with the
keyboard: a and d for turning the turret left and right, w for shooting and arrow
keys for movement. implementation there are two important events to use along with the gamepad api — gamepadconnected and gamepaddisconnected. the first one is fired when the browser detects the connection of a new gamepad while the second one is fired when a gamepad is disconnected (either physically by the user o...
... there are two types of action to consider for a button: a single press and a hold. the newpress boolean variable will indicate whether there's a new press of a button or not. next, we loop through the array of pressed buttons — if the given button is the same as the one we're looking for, the newpress variable is set to true. to check if the press is a new one, so the player is not holding the
key, we loop through the cached states of the buttons from the previous frame of the game loop. if we find it there it means that the button is being held, so there's no new press. in the end the newpress variable is returned. the buttonpressed function is used in the update loop of the game like this: if(gamepadapi.turbo) { if(gamepadapi.buttonpressed('a','hold')) { this.turbo_fire(); } i...
Visual typescript game engine - Game development
rivate aspectratio: number = 1.333; /** * domain is simple url address, * recommendent to use for local propose lan ip * like : 192.168.0.xxx if you wanna run ant test app with server. */ private domain: string = "maximumroulette.com"; /** * networkdeeplogs control of dev logs for webrtc context only. */ private networkdeeplogs: boolean = false; /** * masterserver
key is channel access id used to connect * multimedia server channel. */ private masterserver
key: string = "multi-platformer-sever1.maximum"; /** * rtcserverport port used to connect multimedia server. * default value is 12034 */ private rtcserverport: number = 12034; /** * connectorport is access port used to connect * session web socket. */ private connectorport:...
... node.js text-based protocol sip (session initiation protocol) used for signalling and controlling multimedia sessions. general networking config: config property defined in constructor from serverconfig class. this.networkdeeplogs = false; this.rtcserverport = 12034; this.rtc3serverport = 12034; this.connectorport = 1234; this.domain = "192.168.0.14"; this.masterserver
key = "multi-platformer-sever1.maximum"; this.protocol = "http"; this.issecure = false; this.appuseaccountssystem = true; this.appusevideochat = true; this.databasename = "masterdatabase"; this.databaseroot = "mongodb://localhost:27017"; - the running server is easy : npm run rtc with this cmd: npm run rtc we run server.js and connector.ts websocket. a connector is our ac...
Plug-in Development Overview - Gecko Plugin API Reference
from the server can also be sent to a particular browser window or frame for display, or delivered to the plug-in instance in a new stream. the npn_posturlnotify function operates like npn_posturl, except that it notifies the plug-in of the result when the operation completes. for information about using these methods, see urls. starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7), you can get the origin of the document in a secure, convenient way by calling npn_getvalue() to retrieve the value of the variable npnvdocumentorigin. the returned value is the unicode serialization of the document's origin converted to nfkc-encoded (that is, normalized) utf-8. your plug-in must free the returned string's memory by calling npn_memfree() when you're done with it. getting ve...
...plug-in-identifier should follow the specification): hklm/software/mozillaplugins/plugin-identifier descripton: reg_sz "description of the plugin" path: reg_sz "c:\..path to the plugin.dll" productname: reg_sz "the plugin name" vendor: reg_sz "the plugin author/vendor" version: reg_sz "0.5.whatever plugin version string" hklm/software/mozillaplugins/plugin-identifier/mimetypes add a sub-
key for each mime type the plugin supports, with no values install to known locations on linux and mac on linux and mac, plug-ins are installed to well-known locations: linux: /usr/lib/mozilla/plugins or /usr/lib64/mozilla/plugins mac: /library/internet plug-ins or ~/library/internet plug-ins ...
Cipher suite - MDN Web Docs Glossary: Definitions of Web-related terms
a cipher suite is a combination of a
key exchange algorithm, authentication method, bulk encryption cipher, and message authentication code. in a cryptosystem like tls, the client and server must agree on a cipher suite before they can begin communicating securely. ...
...a
key exchange algorithm, authentication method, bulk encryption cipher, and message authentication code. in a cryptosystem like tls, the client and server must agree on a cipher suite before they can begin communicating securely. ...
Signature (functions) - MDN Web Docs Glossary: Definitions of Web-related terms
a function signature (or type signature, or method signature) defines input and output of functions or methods. a signature can include: parameters and their types a return value and type exceptions that might be thrown or passed back information about the availability of the method in an object-oriented program (such as the
keywords public, static, or prototype). in depth signatures in javascript javascript is a loosely typed or a dynamic language. that means you don't have to declare the type of a variable ahead of time. the type will get determined automatically while the program is being processed. a signature in javascript can still give you some information about the method: myobject.prototype.myfunction(value) the method is installed on an object called myobject.
...alue and is not further defined. signatures in java in java, signatures are used to identify methods and classes at the level of the virtual machine code. you have to declare types of variables in your code in order to be able to run the java code. java is strictly typed and will check any parameters at compilation time if they are correct. public static void main(string[] args) the public
keyword is an access modifier and indicates that this method can be called by any object. the static
keyword indicates that this method is a class method as opposed to being an instance method. the void
keyword indicates that this method has no return value. the name of the method is main. the method accepts one parameter of type string array. it is named args. learn more general knowledge ...
Cascade and inheritance - Learn web development
wledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the cascade and specificity, and how inheritance works in css. conflicting rules css stands for cascading style sheets, and that first word cascading is incredibly important to understand — the way that the cascade behaves is
key to understanding css. at some point, you will be working on a project and you will find that the css you thought should be applied to an element is not working. usually the problem is that you have created two rules which could potentially apply to the same element. the cascade, and the closely-related concept of specificity, are mechanisms that control which rule applies when there is such a co...
...hich rule is styling your element may not be the one you expect, so you need to understand how these mechanisms work. also significant here is the concept of inheritance, which means that some css properties by default inherit values set on the current element's parent element, and some don't. this can also cause some behavior that you might not expect. let's start by taking a quick look at the
key things we are dealing with, then we'll look at each in turn and see how they interact with each other and your css. this can seem like a set of tricky concepts to understand. as you get more practice writing css, however, the way it works will become more obvious to you. the cascade stylesheets cascade — at a very simple level this means that the order of css rules matter; when two rules appl...
Pseudo-classes and pseudo-elements - Learn web development
do-class? a pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. they tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code. pseudo-classes are
keywords that start with a colon: :pseudo-class-name simple pseudo-class example let's look at a simple example. if we wanted to make the first paragraph in an article larger and bold, we could add a class to that paragraph and then add css to that class, as shown in the first example below: however, this could be annoying to maintain — what if a new paragraph got added to the top of the docu...
...teracts with the document in some way. these user-action pseudo-classes, sometimes referred to as dynamic pseudo-classes, act as if a class had been added to the element when the user interacts with it. examples include: :hover — mentioned above; this only applies if the user moves their pointer over an element, typically a link. :focus — only applies if the user focuses the element using
keyboard controls. what is a pseudo-element? pseudo-elements behave in a similar way, however they act as if you had added a whole new html element into the markup, rather than applying a class to existing elements. pseudo-elements start with a double colon ::. ::pseudo-element-name note: some early pseudo-elements used the single colon syntax, so you may sometimes see this in code or example...
Getting started with CSS - Learn web development
in the course. styling things based on state the final type of styling we shall take a look at in this tutorial is the ability to style things based on their state. a straightforward example of this is when styling links. when we style a link we need to target the <a> (anchor) element. this has different states depending on whether it is unvisited, visited, being hovered over, focused via the
keyboard, or in the process of being clicked (activated). you can use css to target these different states — the css below styles unvisited links pink and visited links green. a:link { color: pink; } a:visited { color: green; } you can change the way the link looks when the user hovers over it, for example removing the underline, which is achieved by in the next rule: a:hover { text-decor...
...ross mdn. when we talk about accessibility we are referring to the requirement for our webpages to be understandable and usable by everyone. your visitor may well be on a computer with a mouse or trackpad, or a phone with a touchscreen. or they might be using a screenreader, which reads out the content of the document, or they may need to use much larger text, or be navigating the site using the
keyboard only. a plain html document is generally accessible to everyone — as you start to style that document it is important that you don't make it less accessible. combining selectors and combinators it is worth noting that you can combine multiple selectors and combinators together. for example: /* selects any <span> that is inside a <p>, which is inside an <article> */ article p span { .
How CSS is structured - Learn web development
not valid for a given property, the declaration is processed as invalid. it is completely ignored by the browser's css engine. important: in css (and other web standards), it has been agreed that us spelling is the standard where there is language variation or uncertainty. for example, color should be spelled color, as colour will not work. functions while most values are relatively simple
keywords or numeric values, there are some values which take the form of a function. an example would be the calc() function, which can do simple math within css: <div class="outer"><div class="box">the inner box is 90% - 30px.</div></div> .outer { border: 5px solid black; } .box { padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white; } this renders as...
... looks like this: look up different values of properties listed below. write css rules that apply styling to different html elements: transform background-image, in particular gradient values color, in particular rgb/rgba/hsl/hsla values @rules css @rules (pronounced "at-rules") provide instruction for what css should perform or how it should behave. some @rules are simple with just a
keyword and a value. for example, @import imports a stylesheet into another css stylesheet: @import 'styles2.css'; one common @rule that you are likely to encounter is @media, which is used to create media queries. media queries use conditional logic for applying css styling. in the example below, the stylesheet defines a default pink background for the <body> element. however, a media query foll...
Using your new knowledge - Learn web development
e you more examples of its use. font-family color border-bottom font-weight font-size text-decoration i have used a mixture of selectors, styling elements such as h1 and h2, but also creating a class for the job title and styling that. use css to change how this biography looks by changing the values of the properties i have used. make the level one heading pink, using the css color
keyword hotpink. give the heading a 10px dotted border-bottom which uses the css color
keyword purple. make the level 2 heading italic. give the ul used for the contact details a background-color of #eeeeee, and a 5px solid purple border. use some padding to push the content away from the border. make the links green on hover. you should end up with something like this image. afterwards try ...
... if you can't see their code. a link to the actual task or assessment page, so we can find the question you want help with. what's next? congratulations on finishing this first module. you should now have a good general understanding of css, and be able to understand much of what is happening in a stylesheet. in the next module, css building blocks, we will go on to look at a number of
key areas in depth. previous overview: first steps in this module what is css? getting started with css how css is structured how css works using your new knowledge ...
What is CSS? - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to learn what css is. ...
...ber organization. new css features are developed, or specified, by the css working group. sometimes because a particular browser is interested in having some capability, other times because web designers and developers are asking for a feature, and sometimes because the working group itself has identified a requirement. css is constantly developing, with new features coming available. however, a
key thing about css is that everyone works very hard to never change things in a way that would break old websites. a website built in 2000, using the limited css available then, should still be usable in a browser today! as a newcomer to css, it is likely that you will find the css specs overwhelming — they are intended for engineers to use to implement support for the features in user agents, no...
Styling links - Learn web development
, when it isn't in any other state. this can be specifically styled using the :link pseudo class. visited: a link when it has already been visited (exists in the browser's history), styled using the :visited pseudo class. hover: a link when it is being hovered over by a user's mouse pointer, styled using the :hover pseudo class. focus: a link when it has been focused (for example moved to by a
keyboard user using the tab
key or similar, or programmatically focused using htmlelement.focus()) — this is styled using the :focus pseudo class. active: a link when it is being activated (e.g. clicked on), styled using the :active pseudo class. default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and centering the text to make i...
...example that you couldn't get back from.) # just links to the current page. you'll notice a few things as you explore the default styles: links are underlined. unvisited links are blue. visited links are purple. hovering a link makes the mouse pointer change to a little hand icon. focused links have an outline around them — you should be able to focus on the links on this page with the
keyboard by pressing the tab
key (on mac, you'll need to use option + tab, or enable the full
keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were back in the early days of browsers in the mid-1990s. this is because users know and...
What are browser developer tools? - Learn web development
un through the examples below, open the beginner's example site that we built during the getting started with the web article series. you should have this open as you follow the steps below. how to open the devtools in your browser the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: how do you pull it up? three ways:
keyboard: ctrl + shift + i, except internet explorer and edge: f12 macos: ⌘ + ⌥ + i menu bar: firefox: menu ➤ web developer ➤ toggle tools, or tools ➤ web developer ➤ toggle tools chrome: more tools ➤ developer tools safari: develop ➤ show web inspector. if you can't see the develop menu, go to safari ➤ preferences ➤ advanced, and check the show dev...
...ese features are especially handy: the rules applied to the current element are shown in order of most-to-least-specific. click the checkboxes next to each declaration to see what would happen if you removed the declaration. click the little arrow next to each shorthand property to show the property's longhand equivalents. click a property name or value to bring up a text box, where you can
key in a new value to get a live preview of a style change. next to each rule is the file name and line number the rule is defined in. clicking that rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved. you can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for ...
What is accessibility? - Learn web development
volume to accommodate their unique needs. visual impairment again, provide a text transcript that a user can consult without needing to play the video, and an audio-description (an off-screen voice that describes what is happening in the video). pausing capacity users may have trouble understanding someone in a video. let them pause the video to read the subtitles or process the information.
keyboard capacity let the user tab into/out of a video, play it, and pause it without being trapped in it. the basics of web accessibility a few necessities for basic web accessibility include: whenever your site needs an image to convey meaning, include text as an alternative for visually-challenged users or those with slow connections. make sure all users can operate graphical interfaces (l...
...to/out of a video, play it, and pause it without being trapped in it. the basics of web accessibility a few necessities for basic web accessibility include: whenever your site needs an image to convey meaning, include text as an alternative for visually-challenged users or those with slow connections. make sure all users can operate graphical interfaces (like unfolding menus) solely with a
keyboard (e.g., with tab and the return
key). provide an attribute explicitly specifying your content's language, so that screen readers read your text properly. make sure that a user can navigate to all widgets on a page solely with the
keyboard, without getting trapped. (at least let them tab in and out.) and that's just the beginning. accessibility champions since 1999, the w3c has operated ...
Sending forms through JavaScript - Learn web development
nd xml". how is it different? the xmlhttprequest (xhr) dom object can build http requests, send them, and retrieve their results. historically, xmlhttprequest was designed to fetch and send xml as an exchange format, which has since been superceded by json. but neither xml nor json fit into form data request encoding. form data (application/x-www-form-urlencoded) is made of url-encoded lists of
key/value pairs. for transmitting binary data, the http request is reshaped into multipart/form-data. note: the fetch api is often used in place of xhr these days — it is a modern, updated version of xhr, which works in a similar fashion but has some advantages. most of the xhr code you'll see in this article could be swapped out for fetch. if you control the front-end (the code that's executed...
...and obey the specifics of form data requests. let's look at an example: <button>click me!</button> and now the javascript: const btn = document.queryselector('button'); function senddata( data ) { console.log( 'sending data' ); const xhr = new xmlhttprequest(); let urlencodeddata = "", urlencodeddatapairs = [], name; // turn the data object into an array of url-encoded
key/value pairs. for( name in data ) { urlencodeddatapairs.push( encodeuricomponent( name ) + '=' + encodeuricomponent( data[name] ) ); } // combine the pairs into a single string and replace all %-encoded spaces to // the '+' character; matches the behaviour of browser form submissions. urlencodeddata = urlencodeddatapairs.join( '&' ).replace( /%20/g, '+' ); // define what happens ...
Your first form - Learn web development
ute. it represents a basic single-line text field that accepts any kind of text input. for the second input, we use the value <input/email>, which defines a single-line text field that only accepts a well-formed e-mail address. this turns a basic text field into a kind of "intelligent" field that will perform some validation checks on the data typed by the user. it also causes a more appropriate
keyboard layout for entering email addresses (e.g. with an @ symbol by default) to appear on devices with dynamic
keyboards, like smartphones. you'll find out more about form validation in the client-side form validation article later on. last but not least, note the syntax of <input> vs. <textarea></textarea>. this is one of the oddities of html. the <input> tag is an empty element, meaning that i...
...bel for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </li> ... in our example, the form will send 3 pieces of data named "user_name", "user_email", and "user_message". that data will be sent to the url "/my-handling-form-page" using the http post method. on the server side, the script at the url "/my-handling-form-page" will receive the data as a list of 3
key/value items contained in the http request. the way this script will handle that data is up to you. each server-side language (php, python, ruby, java, c#, etc.) has its own mechanism of handling form data. it's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our sending form data article later on. summary congratulat...
HTML basics - Learn web development
orrectly. that's all you need to know for now. <html></html> — the <html> element. this element wraps all the content on the entire page and is sometimes known as the root element. <head></head> — the <head> element. this element acts as a container for all the stuff you want to include on the html page that isn't the content you are showing to your page's viewers. this includes things like
keywords and a page description that you want to appear in search results, css to style our content, character set declarations and more. <meta charset="utf-8"> — this element sets the character set your document should use to utf-8 which includes most characters from the vast majority of written languages. essentially, it can now handle any textual content you might put on it. there is no reason ...
... they are visually impaired. users with significant visual impairments often use tools called screen readers to read out the alt text to them. something has gone wrong causing the image not to display. for example, try deliberately changing the path inside your src attribute to make it incorrect. if you save and reload the page, you should see something like this in place of the image: the
keywords for alt text are "descriptive text". the alt text you write should provide the reader with enough information to have a good idea of what the image conveys. in this example, our current text of "my test image" is no good at all. a much better alternative for our firefox logo would be "the firefox logo: a flaming fox surrounding the earth." try coming up with some better alt text for your im...
JavaScript basics - Learn web development
art on coding in other languages too! important: in this article, try entering the example code lines into your javascript console to see what happens. for more 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 de...
... variable explanation example string this is a sequence of text known as a string. to signify that the value is a string, enclose it in single quote marks. let myvariable = 'bob'; number this is a number. numbers don't have quotes around them. let myvariable = 10; boolean this is a true/false value. the words true and false are special
keywords that don't need quote marks. let myvariable = true; array this is a structure that allows you to store multiple values in a single reference. let myvariable = [1,'bob','steve',10]; refer to each member of the array like this: myvariable[0], myvariable[1], etc. object this can be anything. everything in javascript is an object, and can be stored in a vari...
Add a hitmap on top of an image - Learn web development
te: <img src="image-map.png" alt="" usemap="#example-map-1" /> step 2: activate your hotspots in this step, put all your code inside a <map> element. <map> only needs one attribute, the same map name as you used in your usemap attribute above: <map name="example-map-1"> </map> inside the <map> element, we need <area> elements. an <area> element corresponds to a single hotspot. to keep
keyboard navigation intuitive, make sure the source order of <area> elements corresponds to the visual order of hotspots. <area> elements are empty elements, but do require four attributes: shape coords shape takes one of four values: circle, rect, poly, and default. (a default <area> occupies the entire image, minus any other hotspots you’ve defined.) the shape you choose determines the co...
...n alt attribute. <map name="example-map-1"> <area shape="circle" coords="200,250,25" href="page-2.html" alt="circle example" /> <area shape="rect" coords="10, 5, 20, 15" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and devices. try following links with your
keyboard alone. try turning images off. if your image map is wider than about 240px, you’ll need to make further adjustments to make your website responsive. it's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image. if you must use image maps, you may want to look into matt stow's jquery plugin. alternatively, dudley storey demonst...
Creating hyperlinks - Learn web development
ref="https://www.mozilla.org/" title="the best place to find more information about mozilla's mission and how to contribute">the mozilla homepage</a>. </p> this gives us the following result and hovering over the link displays the title as a tooltip. i'm creating a link to the mozilla homepage. note: a link title is only revealed on mouse hover, which means that people relying on
keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information. if a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text. active learning: creating your own example link create an html document using your local code editor...
...r link wording it's easy to throw links up on your page. that's not enough. we need to make our links accessible to all readers, regardless of their current context and which tools they prefer. for example: screenreader users like jumping around from link to link on the page, and reading links out of context. search engines use link text to index target files, so it is a good idea to include
keywords in your link text to effectively describe what is being linked to. visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. they will find descriptive link text useful. let's look at a specific example: good link text: download firefox <p><a href="https://firefox.com/"> download firefox </a></p> bad li...
Adding vector graphics to the Web - Learn web development
nction() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = ''; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).s...
...0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.on
keyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; summary this article has provided you with a quick tour of what vector graphics and svg a...
From object to iframe — other embedding technologies - Learn web development
568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab
key tabbing out of textarea and // make it write a tab at the caret position instead textarea.on
keydown = function(e){ if (e.
keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.
keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).
...<iframe> elements are designed to all...
Introduction to events - Learn web development
are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire browser window. there are many different types of events that can occur. for example: the user selects a certain element or hovers the cursor over a certain element. the user chooses a
key on the
keyboard. the user resizes or closes the browser window. a web page finishes loading. a form is submitted. a video is played, paused, or finishes. an error occurs. you can gather from this (and from glancing at the mdn event reference) that there are a lot of events that can be responded to. each available event has an event handler, which is a block of code (usually a javascript f...
...e button is focused and unfocused; try pressing the tab to focus on the button and press the tab again to focus away from the button. these are often used to display information about filling in form fields when they are focused, or displaying an error message if a form field is filled with an incorrect value. btn.ondblclick — the color changes only when the button is double-clicked. window.on
keypress, window.on
keydown, window.on
keyup — the color changes when a
key is pressed on the
keyboard. the
keypress event refers to a general press (button down and then up), while
keydown and
keyup refer to just the
key down and
key up parts of the
keystroke, respectively. note: it doesn't work if you try to register this event handler on the button itself — we've had to register it on the window...
Functions — reusable blocks of code - Learn web development
alert('hello ' + name + ': welcome to our company.'); } // second.js let name = 'zaptec'; function greeting() { alert('our company is called ' + name + '.'); } both functions you want to call are called greeting(), but you can only ever access the first.js file's greeting() function (the second one is ignored). in addition, attempting to declare the name variable a second time with the let
keyword in the second.js file results in an error. note: you can see this example running live on github (see also the source code). keeping parts of your code locked away in functions avoids such problems, and is considered the best practice. it is a bit like a zoo. the lions, zebras, tigers, and penguins are kept in their own enclosures, and only have access to the things inside their enclosu...
...same manner as the function scopes. if they were able to get into other enclosures, problems would occur. at best, different animals would feel really uncomfortable inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. at worst, the lions and tigers might try to eat the penguins! the zoo keeper is like the global scope — he or she has the
keys to access every enclosure, to restock food, tend to sick animals, etc. active learning: playing with scope let's look at a real example to demonstrate scoping. first, make a local copy of our function-scope.html example. this contains two functions called a() and b(), and three variables — x, y, and z — two of which are defined inside the functions, and one in the global scope. it also ...
Working with JSON - Learn web development
article to teach it in much more detail. to start with, we store the url of the json we want to retrieve in a variable. add the following at the bottom of your javascript code: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; to create a request, we need to create a new request object instance from the xmlhttprequest constructor, using the new
keyword. add the following below your last line: let request = new xmlhttprequest(); now we need to open the request using the open() method. add the following line: request.open('get', requesturl); this takes at least two parameters — there are other optional parameters available. we only need the two mandatory ones for this simple example: the http method to use when making the n...
...t. stringify(): accepts an object as a parameter, and returns the equivalent json string form. you can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the xhr to return the raw json text, then used parse() to convert it to an actual javascript object. ...
Object-oriented JavaScript for beginners - Learn web development
g: function person(name) { this.name = name; this.greeting = function() { alert('hi! i\'m ' + this.name + '.'); }; } the constructor function is javascript's version of a class. notice that it has all the features you'd expect in a function, although it doesn't return anything or explicitly create an object — it basically just defines properties and methods. notice also the this
keyword being used here as well — it is basically saying that whenever one of these object instances is created, the object's name property will be equal to the name value passed to the constructor call, and the greeting() method will use the name value passed to the constructor call too. note: a constructor function name usually starts with a capital letter — this convention is used to make co...
... same name property and greeting() method available. note that they are using their own name value that was assigned 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...
Object prototypes - Learn web development
ype property's value is an object, which is basically a bucket for storing properties and methods that we want to be inherited by objects further down the prototype chain. so object.prototype.tostring(), object.prototype.valueof(), etc., are available to any object types that inherit from object.prototype, including new object instances created from the person() constructor. object.is(), object.
keys(), and other members not defined inside the prototype bucket are not inherited by object instances or object types that inherit from object.prototype. they are methods/properties available just on the object() constructor itself. note: this seems strange — how can you have a method defined on a constructor, which is itself a function? well, a function is also a type of object. see the funct...
...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']); now try accessing your new object's features, for example: person3.name.first person3.age person3.bio() this works well. you won't need to use it often, but it can be really use...
Aprender y obtener ayuda - Learn web development
d out more about responsive web design, you could search for "responsive web design". if you want to find out more about a specific technology feature, such as the html <video> element, or the css background-color or opacity properties, or the javascript date.settime() method, you should just search for the feature's name. if you are looking for some more specific information, you can add other
keywords as modifiers, for example "<video> element autoplay attribute", or "date.settime parameters". if you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want. run code after several promises are fulfilled play a video stream from a webcam in the browser create a linear gradient in the background of your element ...
...h reference material for looking up code syntax, and guides/tutorials for learning techniques. we've provided most of the answers to the questions you'll have about web development fundamentals in this part of mdn. if you are stuck, then it is good to re-read the associated articles to see if you missed anything. if you are not sure which article to read, then try searching mdn for some related
keywords (as indicated above), or try a general web search. to search on mdn, you can either use the site's in-built search functionality or better still, use your favorite search engine and put "mdn" in front of the search term, for example, "mdn responsive web design" or "mdn background-color". other online resources we already mentioned stack overflow, but there are other online resources that c...
Getting started with Ember - Learn web development
of the ember framework along the way. todomvc is a basic to-do tracking app implemented in many different technologies. here is the completed ember version, for reference. a note on todomvc and accessibility the todomvc project has a few issues in terms of adhering to accessible/default web practices. there are a couple of github issues open about this on the todomvc family of projects: add
keyboard access to demos re-enable outline on focusable elements ember has a strong commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for website / app design. that said, because this tutorial is a focus on the javascript side of making a small web application, todomvc's value comes from providing pre-made css and recomm...
...this goes some way towards fixing one of the major accessibility disadvantages of the default todomvc app. starting the development server you may start the app in development mode by typing the following command in your terminal, while inside the todomvc directory: ember server this should give you an output similar to the following: build successful (190ms) – se...
Framework main features - Learn web development
uthorcredit component, and its content as defined in the props included on the authorcredit component call: <figure> <img src="assets/zelda.png" alt="portrait of zelda schiff" > <figcaption> zelda schiff is editor-in-chief of the library times. </figcaption> </figure> state we talked about the concept of state in the previous chapter — a robust state-handling mechanism is
key to an effective framework, and each component may have data to control the state of. this stage will persist in some way as long as the component is in use. like props, state can be used to affect how a component is rendered. as an example, consider a button that counts how many times it has been clicked. this component should be responsible for tracking its own count state, and could be written...
... mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. as with other features, the exact mechanism will differ between frameworks, but the end result is the same. components tend to import components into other components using the standard javascript module syntax, or at least something similar. components in components one
key benefit of component-based ui architecture is that components can be composed together. just like you can write html tags inside each other to build a website, you can use components inside other components to build a web application. each framework allows you to write components that utilize (and thus depend on) other components. for example, our authorcredit react component might be utilized i...
React resources - Learn web development
y in the browser. it adds a new panel to your browser's developer tools, and with it you can inspect the state and props of various components, and even edit state and props to make immediate changes to your application. this screenshot shows our finished application as it appears in react devtools: on the left, we see all of the components that make up our application, including some unique
keys for the things that are rendered from arrays. on the right, we see the props and hooks that our app component utilizes. notice, too, that the form, filterbutton, and todo components are indented to the right – this indicates that app is their parent. in more complex apps, this view is great for understanding parent/child relationships at a glance. react devtools is available in a number of fo...
...act router and reach router. react router is well-suited to applications with complex routing needs, and it meets some edge cases better than reach router. react router is a larger library, however. reach router is well-suited to simpler applications, and automatically manages focus as the user navigates from page to page. focus management is essential in client-side routing — without it,
keyboard users can be trapped in focus limbo, and screen-reader users may have no idea that they have moved to a new page. because reach router is better for accessibility, it's a good place to start. there's one caveat, however: these projects will be merging in the near future. when this merge happens, react router will be the surviving project (with the addition of the focus management features o...
Getting started with Svelte - Learn web development
on the <script> block contains javascript that runs when a component instance is created. variables declared (or imported) at the top level are 'visible' from the component's markup. top-level variables is the way svelte handles the component state, and they are reactive by default. we will explain in detail what this means later on. <script> export let name; </script> svelte uses the export
keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). this is one example of svelte extending javascript syntax to make it more useful, while keeping it familiar. the markup section in the markup section you can insert any html you like, and in addition you can insert valid javascript expression insid...
... svelte, including how to install it locally, create a starter app, and how the basics work. in the next article we'll start building our first proper application — a todo list. before we do that, however, let's recap some of the things we’ve learned. in svelte: we define the script, style and markup of each component in a single .svelte file. component props are declared with the export
keyword. svelte components can be used just by importing the corresponding .svelte file. components styles are scoped, keeping them from clashing with each other. in the markup section you can include any javascript expression by putting it between curly braces. the top-level variables of a component constitute its state. reactivity is fired just by assigning a new value to a top level variable.
Getting started with Vue - Learn web development
-router, testing, and more. we’ll look at using this below. initializing a new project to explore various features of vue, we will be building up a sample todo list app. we'll begin by using the vue cli to create a new app framework to build our app into. follow the steps below: in terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue. use the arrow
keys and enter to select the "manually select features" option. the first menu you’ll be presented with allows you to choose which features you want to include in your project. make sure that "babel" and "linter / formatter" are selected. if they are not, use the arrow
keys and the space bar to toggle them on. once they are selected, press enter to proceed. next you’ll select a config for the l...
...preset for future options. this is entirely up to you. if you like these settings over the existing presets and want to use them again, type y , otherwise type n. the cli will now begin scaffolding out your project, and installing all of your dependencies. if you've never run the vue cli before, you'll get one more question — you'll be asked to choose a package manager. you can use the arrow
keys to select which one you prefer. the vue cli will default to this package manager from now on. if you need to use a different package manager after this, you can pass in a flag --packagemanager=<package-manager>, when you run vue create. so if you wanted to create the moz-todo-vue project with npm and you'd previously chosen yarn, you’d run vue create moz-todo-vue --packagemanager=npm. note:...
Understanding client-side JavaScript frameworks - Learn web development
our todo list app. this includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. we'll look at conditional ui rendering along the way. 6. accessibility in react in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both
keyboard-only and screen reader users. 7. react resources our final article provides you with a list of react resources that you can use to go further in your learning. ember tutorials note: ember tutorials last tested in may 2020, with ember/ember cli version 3.18.0. if you need to check your code against our version, you can find a finished version of the sample ember app code in the ember-t...
...ing capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. we'll also look at adding functionality to delete todo items. 8. focus management with vue refs we are nearly done with vue. the last bit of functionality to look at is focus management, or put another way, how we can improve our app's
keyboard accessibility. we'll look at using vue refs to handle this — an advanced feature that allows you to have direct access to the underlying dom nodes below the virtual dom, or direct access from one component to the internal dom structure of a child component. 9. vue resources now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learn...
Introduction to cross browser testing - Learn web development
s and javascript features. different devices with different capabilities, from the latest greatest tablets and smartphones, through smart tvs, right down to cheap tablets and even older feature phones that may run browsers with limited capabilities. people with disabilities, who use the web with the aid of assistive technologies like screenreaders, or don't use a mouse (some people use only the
keyboard). remember that you are not your users — just because your site works on your macbook pro or high-end galaxy nexus, doesn't mean it will work for all your users — there's a whole lot of testing to be done! note: make the web work for everyone provides more useful perspective on the different browsers people use, their market share, and related cross browser compatibility issues. we...
...ng/discovery after each implementation phase, you will need to test the new functionality. to start with, you should make sure there are no general issues with your code that are stopping your feature from working: test it in a couple of stable browsers on your system, like firefox, safari, chrome, or ie/edge. do some lo-fi accessibility testing, such as trying to use your site with only the
keyboard, or using your site via a screen reader to see if it is navigable. test on a mobile platform, such as android or ios. at this point, fix any problems you find with your new code. next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross browser issues (see the next article for more information on dete...
Command line crash course - Learn web development
e directory, you type cd into your terminal, followed by the directory you want to move to. assuming the directory is inside your home directory, you can use cd desktop (see the screenshots below). try typing this into your system's terminal: cd desktop if you want to move back up to the previous directory, you can use two dots: cd .. note: a very useful terminal shortcut is using the tab
key to autocomplete names that you know are present, rather than having to type out the whole thing. for example, after typing the above two commands, try typing cd d and pressing tab — it should autocomplete the directory name desktop for you, provided it is present in the current directory. bear this in mind as you move forward. if the directory you want to go to is nested deep, you need to kno...
... note: to find out exactly what options each command has available, you can look at its man page. this is done by typing the man command, followed by the name of the command you want to look up, for example man ls. this will open up the man page in the terminal’s default text file viewer (for example, less in my terminal), and you should then be able to scroll through the page using the arrow
keys, or some similar mechanism. the man page lists all the options in great detail, which may be a bit intimidating to begin with, but at least you know it’s there if you need it. once you are finished looking through the man page, you need to quit out of it using your text viewer’s quit command ("q" in less; you may have to search on the web to find it if it isn’t obvious). note: to run a ...
Accessibility information for UI designers and developers
it helps to add labels besides the colored chart lines:people who cannot see the difference between the colors, can use the labels instead. or in this one, you could consider using patterns besides colored areas: again, if people are unable to distinguish the colors, they can rely on the patterns instead. see also: understanding sc 1.4.3: contrast the focus indicator users who navigate by
keyboard (or other specialised input methods), rely on focus styles to see where they are on the page. only one element has focus at a given time, typically revealed by browsers with a dotted outline. css lets authors change what the focus indicator look like, so you can design it to match branding. here's an example of someone tabbing through a footer, the focus moves around: note: don't remove...
...onses in those cases, ensure users can change submissions, automatically check for errors. or provide an opportunity to review the input before submitting it. use default controls controls that are built into browsers come with a lot of accessibility for free. for example, the select element displays an ideal mobile interface on mobile operating systems like android and ios. on desktop with a
keyboard, it lets people type a character, say ‘k’, to jump directly to options starting with ‘k’. it is recommended to use native controls, visibly or under the hood. links vs buttons to keep your interface in line with user expectations, use links for interactions that go somewhere (on the current page or another page) and buttons for interactions that do something (like submit a form or ...
Information for users
firefox 2 now has help topics (from the menubar: ? > help contents f1 > accessibility features) which describe any special features and
keyboard shortcuts designed to help users with disabilities. please check the accessibility help topic for more information. firefox accessibility features this page defines most of the accessibility features possible in firefox. features include assistive technology support on windows (like window-eyes, jaws, etc.), firefox
keyboard support, available accessibility extensions like fire vox and other extensions. assistive technology compatibility this is a wiki page which users can edit to provide up to date information on any issues related to compatibility with assistive technologies such as screen readers, screen magnifiers, voice input ...
... planning ahead for accessibility this document is intended to help testers and designers understand and plan what still needs to be added to our ui for full usable accessibility. ...
Accessibility and Mozilla
firefoxfirefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5. we are optimistic that jaws support will catch up this year. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. in fact, the same
keyboard commands are still available, so users can become comfortable and productive right away.accessibility information for core gecko developersboth end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility. since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night.accessibility information ...
... on the live irc channel at irc.mozilla.org/#accessibility. since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night.information for governments and other organizations evaluating mozillainformation for usersfirefox 2 now has help topics (from the menubar: ? > help contents f1 > accessibility features) which describe any special features and
keyboard shortcuts designed to help users with disabilities. please check the accessibility help topic for more information.links and resourceshere are some useful links for those interested in web accessibility as well as open source accessibility.mozilla accessibility architecturethis page is maintained by aaron leventhal and by the mozilla accessibility community. feedback and constructive suggest...
Theme concepts
{ "theme_frame": "empty.png", "additional_backgrounds": [ "weta_for_tiling.png"] }, and the images tiling with: "properties": { "additional_backgrounds_alignment": [ "top" ], "additional_backgrounds_tiling": [ "repeat" ] }, full details of how to setup this theme can be found in the themes example weta_tiled. full detais of the alignment and tiling options can be found in the "theme"
key description. alternatively, you can use multiple images, say combining the original weta image with this one anchored to the left of the header to create this effect where the images are specified with: "images": { "theme_frame": "empty.png", "additional_backgrounds": [ "weta.png", "weta-left.png"] }, and their alignment by: "properties": { "additional_backgrounds_alignment": [ "r...
... images are specified with: "images": { "theme_frame": "empty.png", "additional_backgrounds": [ "weta.png", "weta-left.png"] }, and their alignment by: "properties": { "additional_backgrounds_alignment": [ "right top" , "left top" ] }, full details of how to setup this theme can be found in the themes example weta_mirror. full details of the alignment options can be found in the "theme"
key description. static animated themes it is possible to create an animated theme using an apng format image, as in the themes example animated. however, remember that rapid animations, such as the one in the example might be too distracting for a practical theme. you can also animate themes programmatically, which we discuss in dynamic themes. updating static themes if your static theme is hos...
Adding a new CSS property
rties that are part of shorthands if you want the shorthand parser to be able to reuse the longhand parser. ...
...roperty css_property_parse_value_list, the shorthand property parser would be assumed to be reusing the longhand parser once per item, not for a whole list, as for properties like background-image or transform-timing-function.) if the property takes a list of
keywords other than inherit/initial/etc., auto, none, or normal (which can be expressed using the variant_* flags), you should use variant_
keyword and add a
keyword table to the nscssprops class. the name of this
keyword table needs to go in the nscssproplist entry; otherwise that
keyword table should be null. if you need a
keyword table, you should include auto, normal, or none (if needed) in that table rather than combining variant_
keyword with variant_auto, variant_normal, or variant_none. if you add a shorthand property, you'll n...
Updating NSPR or NSS in mozilla-central
ss 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. ...
... push the update: $ hg push ...
Obsolete Build Caveats and Tips
ng: due to a bug in old versions of mozillabuild (prior to 1.6), if you download version 7.1 of the windows 7 sdk (which is the current version available), your build will fail, often while building cairo with "ocidl.h" errors. in order to fix this issue, you need to use the latest version of mozillabuild. windows vista sdk obsolete since gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this is the sdk that mozilla-1.9.1 (firefox 3.5) builds used to be built against. features that depend on this sdk include: windows vista parental controls file associations and application registration on vista and above ability to ...
...sing windows xp, you must have windows xp service pack 2 and .net framework 2.0 installed before installing the vista sdk. use visual studio 2008 professional. gecko 1.9.2 through 11: if you would like to use this sdk, add ac_add_options --with-windows-version=600 to your .mozconfig. windows server 2003 r2 platform sdk obsolete since gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this is your only option if you're on windows 2000. this also used to be necessary for building a default gecko 1.9.2 through 8 with visual c++ express editions (see atlbase.h for more). you can download the sdk from the microsoft downlo...
Contributing to the Mozilla code base
bug submitter, reviewer, and component owner know that you'd like to work on the bug. you might receive some extra information, perhaps also made the assignee. fix your pet peeve if there's something you'd like to fix about firefox, thunderbird, or your other favorite mozilla application, this can be a great place to start. there are a number of ways to do this: search bugzilla for relevant
keywords. see pages on bugzilla for further help learn the bugzilla component, with which your pet peeve is implemented, using the components list. browse this component on bugzilla for related bugs ask in our matrix channels : #introduction:mozilla.org or #developers:mozilla.org find a bug we've identified as a good fit for new contributors. with more than a million bugs filed in bugzilla, it c...
...hould request level 3 access so you can land your own code after it has been reviewed. ...
mach
h when octopi does what you want and even has a gui? those makepkg scripts named pkgbuild are (typically) simple bash scripts that are easy to maintain and modify. python based mach tends to involve more complexity and potential for breakage. another possible reason: mach gives you an error, while running, say bootstrap.py directly (that is to type in a bash shell: python2 ./bootstrap.py enter-
key ) in an otherwise empty ..../subdir/ may work for you! less may be better! and mach's error messages tend to be cryptic and not utterly helpful. that above bootstrap.py will download and setup everything so you can build a mozilla app such as firefox etcetera, so it is a nice starting point. why should i use mach? you should use mach because it provides a better and more unified developer expe...
...he 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 as
keyword arguments using the **kwargs calling convention. so, you should define default values for all of your method's arguments. the return value from the @command method should be the integer exit code from the process. if not defined or none, 0 will be used. registering mach command providers once you've written a python module providing a mach command, you'll need to register it with mach. the...
Displaying Places information using views
ay the title of the nsinavhistoryresultnode of each row in that column. the following table shows the mappings between these magic column id values and their corresponding nsinavhistoryresultnode properties: treecol id or anonid corresponding nsinavhistoryresultnode property title title url uri date time visitcount accesscount
keyword * description * dateadded dateadded lastmodified lastmodified tags tags ** icon *
keyword and description are looked up in the places database using the nsinavhistoryresultnode property itemid. **the title column (and only the title column) automatically receives the favicon referenced by the nsinavhistoryresultnode propert...
...3.6 / thunderbird 3.1 / fennec 1.0) create a built-in menu view by setting the type attribute to "places" on an empty menupopup element (which would be a child of some parent menu element): <menu> <menupopup type="places" /> </menu> the place attribute or property should be set on the menupopup as well. in firefox 4 and later requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamon
key 2.1) you can add places information to a popup like this: <menu id="bookmarksmenu"> <menupopup placespopup="true"> onpopupshowing="if (!document.getelementbyid('bookmarksmenu')._placesview) new placesmenu(event, 'place:folder=bookmarks_menu');" </menupopup> </menu> the menu view is implemented in browser/components/places/content/menu.xml. see the menupopup an...
overflow-clip-box
e 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 overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties. ...
...rdcoded; since then it uses this property that can be used elsewhere too. note that this property is activated by default only in the ua stylesheet and chrome contexts. initial valuepadding-boxapplies toall elementsinheritednomediavisualcomputed valueas specifiedanimation typediscretecanonical orderthe unique non-ambiguous order defined by the formal grammar syntax values padding-box this
keyword makes the clipping be related to the padding box. content-box this
keyword makes the clipping be related to the content box. formal syntax padding-box | content-box examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> c...
Roll your own browser: An embedding how-to
ked 'mozilla examples' refer to clients and sample code to be found within the mozilla source tree. linux external projects sashxb: ibm uses mozilla to implement part of their sash development/desktop environment. part of the gnome effort. activestate's komodo: development environment, based on mozilla's xul. (screenshot) light: very simple non-bloated gtk+ interface, familiar netscape 4.x
keyboard shortcuts, context menus, etc. (screenshot) xparts: kde extension that allows mozilla to be embedded into the konqueror browser. uses gtkmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/. (news release, screenshot) mozilla examples gtkmozembed widget: gtk widget wrapper for the mozilla gecko engine. testgtkembed: bas...
... widget wrapper for the mozilla gecko engine. testgtkembed: basic browser built with the gtkmozembed widget. url location field, menu bar, html area, supports ssl. windows external projects k-meleon browser: the windows answer to galeon. fast ie-look-alike browser, uses ie and ns bookmarking system, fast loading time, privacy features, java support and complete control of the menus and "hot
keys". implemented with mozilla embedding apis. (screenshots) neoplanet browser: a gecko add-on for the neoplanet browser. activestate's komodo: development environment, based on mozilla's xul. (screenshot) macromedia homesite html editor: internal browser for the homesite studio application is implemented by embedding mozilla. (mozilla blurb) bradsoft's topstyle css builder: implements an intern...
IPDL Tutorial
ately, before the message has been delivered. the parameters of the recv* methods (const nscstring& pluginpath in the example) are references to temporary objects, so copy them if you need to keep their data around. direction each message type includes a "direction." the message direction specifies whether the message can be sent from-parent-to-child, from-child-to-parent, or both ways. three
keywords serve as direction specifiers; child was introduced above. the second is parent, which means that the messages declared under the parent label can only be sent from-child-to-parent. the third is both, which means that the declared messages can be sent in both directions. the following artificial example shows how these specifiers are used and how these specifiers change the generated abstrac...
...ent receives the message and the response arrives, and in asynchronous semantics from the parent to the child the parent will not block. when creating a plugin instance, the browser should block until instance creation is finished, and needs some information returned from the plugin: sync protocol pplugininstance { child: sync init() returns (bool windowless, bool ok); }; we added two new
keywords to the plugin protocol, sync and returns. sync marks a message as being sent synchronously. the returns
keyword marks the beginning of the list of values that are returned in the reply to the message. async message return values bug 1313200 introduced the ability to use returns with async messages: protocol pplugininstance { child: async asyncinit() returns (bool windowless, bool ok);...
CustomizableUI.jsm
the same id as the id property described above, so that customizableui can find the node again later. ...
...get({ id: 'navigator-throbber', //id in cui.jsm // should match id of that in dom (line #11) type: 'custom', defaultarea: customizableui.area_navbar, onbuild: function(adocument) { var toolbaritem = adocument.createelementns('http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul', 'toolbaritem'); var image = adocument.createelementns('http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul', 'image'); image.setattribute('src', 'chrome://branding/content/icon16.png'); var props = { id: 'navigator-throbber', //id in dom // should match id of that in cui.jsm (line #2) title: 'activity indicator', align: 'center', pack: 'center', mousethrough: 'always', removable:...
Http.jsm
, it takes two parameters: the responsetext and the xhr object. onerror a function handle to call when an error occurs, it takes three parameters: the error, the responsetext and the xhr object. logger an object that implements the debug and log methods (e.g. log.jsm). headers or post data are given as an array of arrays, for each inner array the first value is the
key and the second is the value. for example: [["
key1", "value1"], ["
key2", "value2"]]. submitting post data httprequest allows attaching data to the post requests. the data can be specified via postdata option. postdata can be of 2 different types: a string or an array of parameters. when null/undefined is given, no post data will be attached. if a string is given the data will be appended to the ...
...itting post data httprequest allows attaching data to the post requests. the data can be specified via postdata option. postdata can be of 2 different types: a string or an array of parameters. when null/undefined is given, no post data will be attached. if a string is given the data will be appended to the request as is. in case an array of parameters is given, it will be treated as an array of
key-value pairs. the elements of the array will be url-encoded and "application/x-www-form-urlencoded; charset=utf-8" will be enforced as the content type. http.jsm only forces the content type if the post data is an array, and it serializes it automatically. if the provided postdata is a string, the content type isn't touched. in this case, the content type may be set through the headers parameter. ...
PromiseWorker.jsm
n thread, postmessage is typically used. however with promiseworker objects this is no longer the case, simply return data or throw from your function depending if you want to resolve or reject the promise. in summary, from a worker file, data can only be sent back as a response to a request from the main thread, it is not possible for a worker to send data to the main thread otherwise, this is a
key difference between promiseworker worker file and all other types of workers. resolving the promise to resolve the promise from the worker, simply return anything from the worker scope, and the main thread promise will be resolved with the returned value. function func(buffer) { // do something with buffer... return 1; // 1 is sent back to main thread, as a resolved promise. } transferri...
...or syntaxerror typeerror urierror in addition to them, stopiteration is also supported (note that stopiteration is deprecated). you can also construct and throw your own custom error objects as needed. when custom error is caught by abstractworker, tomsg method will be called to convert it into message. the tomsg function should return an object which has exn property, that is the property
key for the frommsg function in main thread side. // worker // define a custom error prototype. function customerror(message) { this.message = message; } customerror.prototype.tomsg = function() { return { exn: 'customerror', message: this.message, }; }; // a function called by message. function func() { ... // throw a custom error. throw new customerror('meow'); } the conver...
Localizing with Pontoon
etween languages to localize. go opens project-resource-locale selection. progress indicator displays your progress on the resource being localized. more details are available in the popup. user menu allows for user-specific tasks, like commiting to repository, downloading files and signing out. info menu gives important information, like the anticipated project timeline and a list of
keyboard shortcuts. alright, how about we do some translating now? translate strings when using pontoon for localization, you have a couple of options to translate your strings. you can translate in-context, out-of-context, or a combination of the two. we'll start with looking at in-context translation. in-context pontoon's in-context translation mode is what puts it above others. it open...
...late strings: history displays previously suggested translations, including from other users. machinery displays matches from various services: internal translation memory, mozilla transvision, open source translation memory, microsoft terminology and machine translation. other locales displays matching translations from other locales. search almost like machinery, but takes provided
keyword as input parameter instead of the original string. by clicking a suggestion, it gets copied into translation area. publishing your localization suppose you now want to publish your l10n work by committing it to a repo. pontoon lets you do that too! actually, it does that for you by automatically syncing with repositories on hourly basis. you can now pat yourself on the back, do a little...
Localizing without a specialized tool
$ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing > ~/desktop/x-testing.compare open the x-testing.compare file that is on your desktop. ...
...ozilla-1.9.2 x-testing > ~/desktop/x-testing.compare open the x-testing.compare file that is on your desktop. you should see something like this: x-testing browser chrome browser aboutcerterror.dtd // add and localize this file aboutdialog.dtd +aboutlink +aboutlink.access
key +aboutversion +closecmdgnome.access
key +closecmdgnome.label +copyright +copyright.access
key +copyrightgnome.access
key +copyrightinfo1 +copyrightinfo2 +licenselink +licenselinktext aboutprivatebrowsing.dtd // add and localize this file aboutrobots.dtd // add and localize this file ... .
MathML Accessibility in Mozilla
a list of mathml constructions and how they are read in mozilla applications for various platforms: windows: mathml support is provided by nvda, which actually delegates math reading to the proprietary mathplayer plugin. we started exposing generic accessible objects for mathml in bug 920547 and so these can be retrieved by nvda starting with gecko 27.0 (firefox 27.0 / thunderbird 27.0 / seamon
key 2.24). mozilla and nvda developers essentially do not have control on how mathematical formulas are read, please contact design science for any inquiries. mac: mathml support is provided by voiceover. in bug 1175269 and bug 1001641, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions. hence basic support is available in gecko 41.0 (firefox 41.0 / thunderbird 4...
...lla and nvda developers essentially do not have control on how mathematical formulas are read, please contact design science for any inquiries. mac: mathml support is provided by voiceover. in bug 1175269 and bug 1001641, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions. hence basic support is available in gecko 41.0 (firefox 41.0 / thunderbird 41.0 / seamon
key 2.38) and we are still trying to keep in sync with webkit/voiceover. note that voiceover is proprietary so we do not have control on improvements to mathml accessibility in voiceover. linux: mathml support is provided by the development version of orca. we try to keep in sync with webkit/atk/orca developments. at the moment, it is recommended to use a nightly build to ensure that the accessible ...
Mozilla Development Strategies
ikes to check in. but keep in mind that your checkin rate isn't everything. it's better to fix one data loss bug, crasher, or performance bug that really affects the user than edge case bugs that are rarely seen or minor bugs. make sure documentation gets updated if the bug you're fixing is likely to require an update to developer documentation once it's fixed, be sure to add the dev-doc-needed
keyword to the bug (or ask someone to do it, if you don't have editbugs privileges on bugzilla). this puts the bug on the radar of our documentation team to ensure that once the bug is resolved, the documentation will be updated appropriately. if you don't mark the bug, your work might go unnoticed by the docs team! of course, our documentation is a wiki; you can really help by updating the document...
...dated appropriately. if you don't mark the bug, your work might go unnoticed by the docs team! of course, our documentation is a wiki; you can really help by updating the documentation yourself. even if you're not comfortable with your writing skills, keep in mind that our helpful, happy documentation gnomes will follow along behind you and clean up for you. note: you can mark the bug with this
keyword at any time; you don't need to wait until it's actually fixed. take extra time to do it right the first time it's also better to come up with one really solid, well tested, well commented, clean, easy to maintain piece of code than a bunch of quick fixes. you (or someone else) will be back in that code someday. it's easier to do it right once, when your mind is in the problem, than to do it...
Profiling with the Firefox Profiler
a significant portion of time can be spent in idle, blocking calls like waiting for events. this is ideal for a responsive application to be ready to service incoming events. there are os-specific waiting functions like ntwaitformultipleobjects seen in the example above taken on windows or mach_msg_trap on macos. tip: you can quickly go deeper into the call tree by holding down your right arrow
key. alternatively, expand an entire tree segment by holding alt and clicking on the arrow to the left of the collapsed tree segment. as we progress into a more specific part of the tree, you'll notice that the 'running time' decreases. this happens when a function has 2 or more non-trivial calls: the running time will be split between its children. tip: focus on one section of the tree by clicki...
... to allow storage access on permission settings before launching it. adb shell am start -n org.mozilla.fennec_aurora/.app \ --es env0 moz_profiler_startup=1 \ --es env1 moz_profiler_shutdown=/sdcard/download/profiler.json then, if you select quit menu, you can collect profiling data to moz_profiler_shutdown file. profiling js benchmark (xpcshell) to profile the script run.js with ionmon
key (-i), type inference (-n) and jäegermon
key (-m). thgis requires the following command: $ xpcshell -m -i -n -e ' const ci = components.interfaces; const cc = components.classes; var profiler = cc["@mozilla.org/tools/profiler;1"].getservice(ci.nsiprofiler); profiler.startprofiler( 10000000 /* = profiler memory */, 1 /* = sample rate: 100µs with patch, 1ms without */, ["stac...
Preferences system
xul elements and attributes. ...
...dow id="apppreferences" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> .. ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" access
key="&check1.access
key;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay. you should be careful to read the higs for the platforms you are targeting and use the xul preprocessor if necessary to set different window...
Preferences
these articles provide information about how to use the preference system. documentation preferences system an introduction to using the preference system in mozilla. xul school: handling preferences the xul school tutorial chapter on preferences. mozilla preference reference a reference guide to all mozilla preferences; currently a work in progress. ...
...bout the core preference system. using preferences from application code firefox 6 introduced static functions for accessing preferences efficiently from within application code. this api is not available for add-ons, but if you're working on a gecko application, this api is the preferred way to access preferences. mozilla networking preferences a guide to
key networking-related preferences. mozilla preferences for uber-geeks a guide to preferences that only truly elite geeks should play with. examples code snippets preference-related code snippets. adding preferences to an extension how to add preferences to an existing extension. relat...
JSHydra
jshydra is a static analysis tool that is capable of performing analysis of general javascript code. it is inspired by the dehydra and treehydra tools, which can perform similar tasks in c++ code. in its back-end, it uses the parse tree created by the spidermon
key engine. all analysis is performed by running javascripts. documentation installing jshydra download, installation and dependency info for jshydra community view jshydra forums... ...
...ripts. ...
L20n Javascript API
literal source string of the entity as fallback, and compiler.indexerror otherwise. ctx.removeeventlistener(event: string, callback: function) remove an event listener previously registered with addeventlistener. ctx.updatedata(ctxdata: object) update the context data which will be available to all entities in the context. the ctxdata is an object which extends the context data per
key and per level of hierarchy. in other words, the following two calls: ctx.updatedata({ user: { name: "bob" } }); ctx.updatedata({ user: { gender: "masculine" } }); will make the internally-stored context data look like this: { "user" : { "name": "bob", "gender": "masculine" } } ctx.getsync(id: string, ctxdata: object?) retrieve a string value of an entity called id. if pass...
... node.classlist.remove('hidden'); }); the callback becomes bound to the entities on the ids list. it will be called when the entities become available (asynchronously) or whenever the translation of any of the entities changes. localize should be the preferred way of localizing the ui. the callback function is passed an l10n object with the following properties: entities: an object whose
keys are the identifiers and value are the entity objects as returned by getentitysync, reason: an object with the reason why callback was invoked. the reason object can be: { locales: array<string> } if callback was invoked because of a change of the current locale (see requestlocales), { global: string } if callback was invoked because the value of one of the globals used in the translation ...
MailNews automated testing
ifferent cases. this page and its sub-pages describe (and link to) the available test mechanisms within mailnews, and provide supporting information for developers and testers. functional testing xpcshell-tests and make check these are core test harnesses to which mailnews adds its own tests. these tests are run against almost every changeset that gets committed to the thunderbird and seamon
key code bases. xpcshell-tests are run in javascript without any chrome present. this makes them especially useful for testing at the component / module level. xpcshell-tests are the quickest tests to run. mailnews provides additional facilities as described on the mailnews automated testing page (see below). "make check" is used to run compiled code tests. these tests can go beyond the limitatio...
...t synthesized messages via local or imap (using a fake server). message manipulation: mark messages as read, tag them, untag them, move them to other folders, trash them, etc. enhanced logging: supports generating rich json streams to disk or over the network for consumption by logsploder or other tools. performance testing mail leak and bloat tests these tests start up thunderbird or seamon
key and record any leaks found, as well as the total memory requirement. although currently based on simple tests, these are useful for determining if new leaks have been introduced. for more information, see leak and bloat tests. ...
PLHashAllocOps
syntax #include <plhash.h> typedef struct plhashallocops { void *(pr_callback *alloctable)(void *pool, prsize size); void (pr_callback *freetable)(void *pool, void *item); plhashentry *(pr_callback *allocentry)(void *pool, const void *
key); void (pr_callback *freeentry)(void *pool, plhashentry *he, pruintn flag); } plhashallocops; #define ht_free_value 0 /* just free the entry's value */ #define ht_free_entry 1 /* free value and entire entry */ description users of the hash table functions can provide their own memory allocation functions. a pair of functions is used to allocate and tree the table, and another pair of functions is used to allocate and free the table entries. the first argument, pool, for all four functions is a void * pointer that is a piece of data for the me...
...other pair of functions is used to allocate and free the table entries. the first argument, pool, for all four functions is a void * pointer that is a piece of data for the memory allocator. typically pool points to a memory pool used by the memory allocator. the freeentry function does not need to free the value of the entry. if flag is ht_free_entry, the function frees the entry. remark the
key argument for the allocentry function does not seem to be useful. it is unused in the default allocentry function. ...
PLHashFunction
see also pl_hashstring ...
... see also pl_hashstring ...
NSS Certificate Download Specification
y text before the first begin certificate line, and ignores any text after the first end certificate line. between those two lines, there must be exactly one item of any of the supported binary formats described above, and that one item must be base64 encoded. regardless of which of the supported binary formats is used, the begin and end lines must say certificate, and not any other word (such as
key). the begin and end lines must begin and end with 5 dashes, with no extra leading or trailing white space (excluding the end of line characters). importing certificate chains several of the formats described above can contain several certificates. when nss's certificate decoder encounters one of these collections of multiple certificates they are handled in the following way: the first certi...
...g certificates into mozilla browsers mozilla browsers import certificates found in http protocol responses. there are several mime content types that are used to indicate to the browser what type of certificate is being imported. these mime types are: application/x-x509-user-cert the certificate being downloaded is a user certificate belonging to the user operating the browser. if the private
key associated with the certificate does not exist in the user's local
key database, then an error dialog is generated and the certificate is not imported. if a certificate chain is being imported then the first certificate in the chain must be the user certificate, and any subsequent certificates will be added as untrusted ca certificates to the local database. application/x-x509-ca-cert the certif...
Introduction to Network Security Services
target system has a 32-bit cpu or a 64-bit cpu. nss will pick the right one for the local system at run time. note that nss 3.x is also available in the lp64 model for these platforms, but the lp64 model of nss 3.x does not have these two extra shared libraries. ...
... as mentioned above, nss is built on top of nspr. ...
4.3 Release Notes
release date: 01 april 2009 introduction network security services for java (jss) 4.3 is a minor release with the following new features: sqlite-based shareable certificate and
key databases libpkix: an rfc 3280 compliant certificate path validation library pkcs11 needslogin method support hmacsha256, hmacsha384, and hmacsha512 support for all nss 3.12 initialization options jss 4.3 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1. ...
...eedslogin method support hmacsha256, hmacsha384, and hmacsha512 support for all nss 3.12 initialization options jss 4.3 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1. new in jss 4.3 a list of bug fixes and enhancement requests were implemented in this release can be obtained by running this bugzilla query jss 4.3 requires nss 3.12 or higher. new sqlite-based shareable certificate and
key databases by prepending the string "sql:" to the directory path passed to configdir parameter for crypomanager.initialize method or using the nss environment variable nss_default_db_type. libpkix: an rfc 3280 compliant certificate path validation library (see pkixverify) pk11token.needslogin method (see needslogin) support hmacsha256, hmacsha384, and hmacsha512 (see hmactest.java) support for...
NSS_3.12.2_release_notes.html
shared libraries bin< - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.12.2 requires. nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/. new in nss 3.12.2 new functions in the nss shared library: sec_pkcs12addcertorchainand
key (see p12.h) new pkcs11 errors (see secerr.h) sec_error_pkcs11_general_error sec_error_pkcs11_function_failed sec_error_pkcs11_device_error bugs fixed the following bugs have been fixed in nss 3.12.2. bug 200704: pkcs11: invalid session handle 0 bug 205434: fully implement new libpkix cert verification api from bug 294531 bug 302670: use the installed libz.so where available bug...
...cs11_device_error bugs fixed the following bugs have been fixed in nss 3.12.2. ...
NSS 3.12.6 release notes
bug 360421 for details. note: the tls server name indication for clients is already fully implemented in nss. new functions for sni (see ssl.h for more information): sslsnisocketconfig return values: ssl_sni_current_config_is_used: libssl must use the default cert and
key. ssl_sni_send_alert: libssl must send the "unrecognized_name" alert. ssl_snisocketconfighook ssl_reconfigfd ssl_configserversessionidcachewithopt ssl_settrustanchors ssl_getnegotiatedhostinfo new enum for s...
... new types in sslt.h sslextensiontype new environment variables sqlite_force_proxy_locking 1 means force always use proxy, 0 means never use proxy, null means use proxy for non-local files only. ssl
keylogfile
key log file. if set, nss logs rsa pre-master secrets to this file. this allows packet sniffers to decrypt tls connections. see documentation. note: the code must be built with trace defined to use this functionality. bugs fixed the following bugs have been ...
NSS 3.12.9 release notes
ew in nss 3.12.9 removed functions new ssl options new error codes bugs fixed the following bugs have been fixed in nss 3.12.9. bug 609068: implement j-pake in freebl bug 607058: crash [@ nss_cms_decoder_work_data] bug 613394: november/december 2010 batch of nss root ca changes bug 610843: need way to recover softoken in child after fork() bug 617492: add pk11_
keygenwithtemplate function to pk11wrap (for firefox sync) bug 610162: sha-512 and sha-384 hashes are incorrect for inputs of 512mb or larger when running under windows and other 32-bit platforms (fx 3.6.12 and 4.0b6) bug 518551: vfychain crashes in pkits tests. bug 536485: crash during ssl handshake in [@ intel_aes_decrypt_cbc_256] bug 444367: nss 3.12 softoken returns the certificate type o...
...running under windows and other 32-bit platforms (fx 3.6.12 and 4.0b6) bug 518551: vfychain crashes in pkits tests. bug 536485: crash during ssl handshake in [@ intel_aes_decrypt_cbc_256] bug 444367: nss 3.12 softoken returns the certificate type of a certificate object as ckc_x_509_attr_cert. bug 620908: certutil -t -d "sql:." dumps core bug 584257: need a way to expand partial private
keys. bug 596798: win_rand.c (among others) uses unsafe _snwprintf bug 597622: do not use the sec_error_bad_info_access_location error code for bad crl distribution point urls bug 619268: memory leaks in cert_changecerttrust and cert_savesmimeprofile bug 585518: addtrust qualified ca root serial wrong in certdata.txt trust entry bug 337433: need cert_findcertbynicknameoremailaddrbyusage b...
NSS 3.16.2.3 release notes
n ssl socket option that enables tls_fallback_scsv. off by default. in sslerr.h ssl_error_inappropriate_fallback_alert - a new ssl error code. in sslproto.h tls_fallback_scsv - a a signaling cipher suite value that indicates a handshake is the result of tls version fallback. ...
... in sslerr.h ssl_error_inappropriate_fallback_alert - a new ssl error code. in sslproto.h tls_fallback_scsv - a a signaling cipher suite value that indicates a handshake is the result of tls version fallback. notable changes in nss 3.16.2.3 bug 1057161: check that an imported elliptic curve public
key is valid. previously nss would only validate the peer's public
key before performing ecdh
key agreement. now ec public
keys are validated at import time. bugs fixed in nss 3.16.2.3 bug 1057161 - nss hangs with 100% cpu on invalid ec
key bug 1036735 - add support for draft-ietf-tls-downgrade-scsv to nss compatibility nss 3.16.2.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared l...
NSS 3.17.2 release notes
7.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_2_rtm/src/ new in nss 3.17.2 new functionality no new functionality is introduced in this release. this is a patch release to fix a regression and other bugs. ...
...ub/mozilla.org/security/nss/releases/nss_3_17_2_rtm/src/ new in nss 3.17.2 new functionality no new functionality is introduced in this release. this is a patch release to fix a regression and other bugs. notable changes in nss 3.17.2 bug 1049435: change rsa_private
keycheck to not require p > q. this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private
keys (such as in pkcs #12 files) generated by other crypto libraries. bug 1057161: check that an imported elliptic curve public
key is valid. previously nss would only validate the peer's public
key before performing ecdh
key agreement. now ec public
keys are validated at import time. bug 1078669: certutil crashes when an argument is passed to the --certversion option. bugs fixed in nss 3.17.2 thi...
NSS 3.18 release notes
s (nss) 3.18, which is a minor release. distribution information the hg tag is nss_3_18_rtm. nss 3.18 requires nspr 4.10.8 or newer. nss 3.18 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_18_rtm/src/ new in nss 3.18 new functionality when importing certificates and
keys from a pkcs#12 source, it's now possible to override the nicknames, prior to importing them into the nss database, using new api sec_pkcs12decoderrenamecertnicknames. the tstclnt test utility program has new command-line options -c, -d, -b and -r. use -c one, two or three times to print information about the certificates received from a server, and information about the locally found and trus...
...ion. an application that uses sec_pkcs12decoderrenamecertnicknames must implement a callback function that implements this function interface. notable changes in nss 3.18 the highest tls protocol version enabled by default has been increased from tls 1.0 to tls 1.2. similarly, the highest dtls protocol version enabled by default has been increased from dtls 1.0 to dtls 1.2. the default
key size used by certutil when creating an rsa
key pair has been increased from 1024 bits to 2048 bits. on mac os x, by default the softokn shared library will link with the sqlite library installed by the operating system, if it is version 3.5 or newer. the following ca certificates had the websites and code signing trust bits turned off ou = equifax secure certificate authority ...
NSS 3.19.2 release notes
19.2 requires nspr 4.10.8 or newer. nss 3.19.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_rtm/src/ new in nss 3.19.2 new functionality no new functionality is introduced in this release. notable changes in nss 3.19.2 bug 1172128 - in nss 3.19.1, the minimum
key sizes that the freebl cryptographic implementation (part of the softoken cryptographic module used by default by nss) was willing to generate or use was increased - for rsa
keys, to 512 bits, and for dh
keys, 1023 bits. this was done as part of a security fix for bug 1138554 / cve-2015-4000. applications that requested or attempted to use
keys smaller then the minimum size would fail. however, th...
...fault by nss) was willing to generate or use was increased - for rsa
keys, to 512 bits, and for dh
keys, 1023 bits. this was done as part of a security fix for bug 1138554 / cve-2015-4000. applications that requested or attempted to use
keys smaller then the minimum size would fail. however, this change in behaviour unintentionally broke existing nss applications that need to generate or use such
keys, via apis such as sec
key_creatersaprivate
key or sec
key_createdhprivate
key. 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 encour...
NSS 3.27 release notes
. distribution information the hg tag is nss_3_27_rtm. nss 3.27 requires netscape portable runtime (nspr) 4.13 or newer. nss 3.27 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_rtm/src/ new in nss 3.27 new functionality allow custom named group priorities for tls
key exchange handshake (ssl_namedgroupconfig). added support for rsa-pss signatures in tls 1.2 and tls 1.3 new functions in ssl.h ssl_namedgroupconfig notable changes in nss 3.27 update 2016-10-02: the maximum tls version supported has been increased to tls 1.3 (draft). although the maximum tls version enabled by default is still tls 1.2, there are applications that qu...
...ery the list of tls protocol versions supported by nss, and enable all supported versions. for those applications, updating to nss 3.27 may result in tls 1.3 (draft) to be enabled. the tls 1.3 (draft) protocol can be disabled, by defining symbol nss_disable_tls_1_3 when building nss. npn can not be enabled anymore. hard limits on the maximum number of tls records encrypted with the same
key are enforced. disabled renegotiation in dtls. the following ca certificates were removed cn = igc/a, o = pm/sgdn, ou = dcssi sha256 fingerprint: b9:be:a7:86:0a:96:2e:a3:61:1d:ab:97:ab:6d:a3:e2:1c:10:68:b9:7d:55:57:5e:d0:e1:12:79:c1:1c:89:32 cn = juur-sk, o = as sertifitseerimiskeskus sha256 fingerprint: ec:c3:e9:c3:40:75:03:be:e0:91:aa:95:2f:41:34:8f:f8:8b:...
NSS 3.30 release notes
pk11pub.h pk11_hasattributeset - allows to check if a pkcs#11 object in a given slot has a specific boolean attribute set. in ssl.h ssl_alertreceivedcallback - register a callback function, that will be called whenever an ssl/tls alert is received ssl_alertsentcallback - register a callback function, that will be called whenever an ssl/tls alert is sent ssl_setsessionticket
keypair - configures an asymmetric
key pair, for use in wrapping session ticket
keys, used by the server. this function currently only accepts an rsa public/private
key pair. new macros in ciferfam.h pkcs12_aes_cbc_128, pkcs12_aes_cbc_192, pkcs12_aes_cbc_256 - cipher family identifiers corresponding to the pkcs#5 v2.1 aes based encryption schemes used in the pkcs#12 support in nss ...
...11n.h cka_nss_mozilla_ca_policy - identifier for a boolean pkcs#11 attribute, that should be set to true, if a ca is present because of it's acceptance according to the mozilla ca policy notable changes in nss 3.30 the tls server code has been enhanced to support session tickets when no rsa certificate (e.g. only an ecdsa certificate) is configured. rsa-pss signatures produced by
key pairs with a modulus bit length that is not a multiple of 8 are now supported. the pk12util tool now supports importing and exporting data encrypted in the aes based schemes defined in pkcs#5 v2.1. bugs fixed in nss 3.30 this bugzilla query returns all the bugs fixed in nss 3.30: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product...
NSS 3.34 release notes
ires sse2 instructions. new in nss 3.34 new functionality when listing an nss database. using certutil -l, and the database hasn't yet been initialized with any non-empty or empty password, the text "database needs user init" will be included in the listing. when using certutil, to set an inacceptable password in fips mode, a correct explanation of acceptable passwords will be printed. ssl
keylogfile is now supported with tls 1.3, see bug 1287711 for details. sslchannelinfo has two new fields (bug 1396525) sslnamedgroup originalkeagroup holds the
key exchange group of the original handshake, when the session was resumed. prbool resumed is pr_true when the session is resumed, and pr_false otherwise. rsa-pss signatures are now supported on certificates. certificates with...
...th tls 1.3, see bug 1287711 for details. sslchannelinfo has two new fields (bug 1396525) sslnamedgroup originalkeagroup holds the
key exchange group of the original handshake, when the session was resumed. prbool resumed is pr_true when the session is resumed, and pr_false otherwise. rsa-pss signatures are now supported on certificates. certificates with rsa-pss or rsa-pkcs#1v1.5
keys can be used to create an rsa-pss signature on a certificate, using the --pss-sign argument to certutil. new functions bugs fixed in nss 3.34 this bugzilla query returns all the bugs fixed in nss 3.34: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.34 compatibility nss 3.34 shared libraries are backwa...
NSS 3.40 release notes
_40_rtm. nss 3.40 requires nspr 4.20 or newer. nss 3.40 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_40_rtm/src/ new in nss 3.40 new functionality the draft-00 version of encrypted sni support is implemented tstclnt now takes -n option to specify encrypted sni
key new functions none notable changes in nss 3.40 the mozilla::pkix library has been ported from mozilla psm to nss. this is a c++ library for building certification paths. mozilla::pkix apis are not exposed in the libraries nss builds. it is easier to build nss on windows in mozilla-build environments. the following ca certificates were removed: cn = visa ecommerce root sh...
...y for building certification paths. mozilla::pkix apis are not exposed in the libraries nss builds. it is easier to build nss on windows in mozilla-build environments. the following ca certificates were removed: cn = visa ecommerce root sha-256 fingerprint: 69fac9bd55fb0ac78d53bbee5cf1d597989fd0aaab20a25151bdf1733ee7d122 bugs fixed in nss 3.40 bug 1478698 - ffdhe
key exchange sometimes fails with decryption failure this bugzilla query returns all the bugs fixed in nss 3.40: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.40 compatibility nss 3.40 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.
NSS 3.46 release notes
ion the next nss team plans to make two changes to the default tls configuration in nss 3.47, which will be released in october: tls 1.3 will be the default maximum tls version. see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. ...
...- remove -wmaybe-uninitialized warning in lgattr.c bug 1561558 - remove -wmaybe-uninitialized warning in httpserv.c bug 1561556 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1561332 - ec.c:28 warning: comparison of integers of different signs: 'int' and 'unsigned long' bug 1564714 - print certutil commands during setup bug 1565013 - hacl image builder times out while fetching gpg
key bug 1563786 - update hacl-star docker image to pull specific commit bug 1559012 - improve gcm perfomance using pmull2 bug 1528666 - correct resumption validation checks bug 1568803 - more tests for client certificate authentication bug 1564284 - support profile mobility across windows and linux bug 1573942 - gtest for pkcs11.txt with different breaking line formats bug 1575968 - add strscl...
NSS 3.47 release notes
cert bug 1588557 - bad debug statement in tls13con.c bug 1579060 - mozilla::pkix tag definitions for issueruniqueid and subjectuniqueid shouldn't have the constructed bit set bug 1583068 - nss 3.47 should pick up fix from bug 1575821 (nspr 4.23) bug 1152625 - support aes hw acceleration on armv8 bug 1549225 - disable dsa signature schemes for tls 1.3 bug 1586947 - pk11_importandreturnprivate
key does not store nickname for ec
keys bug 1586456 - unnecessary conditional in pki3hack, pk11load and stanpcertdb bug 1576307 - check mechanism param and param length before casting to mechanism-specific structs bug 1577953 - support longer (up to rfc maximum) hkdf outputs bug 1508776 - remove refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and ...
...h pk12util bug 1578626 - [cid 1453375] ub: decrement nullptr. bug 1578751 - ensure a consistent style for pk11_find_certs_unittest.cc bug 1570501 - add cmac to freebl and pkcs #11 libraries bug 657379 - nss uses the wrong oid for signaturealgorithm field of signerinfo in cms for dsa and ecdsa bug 1576664 - remove -mms-bitfields from mingw nss build. bug 1577038 - add pk11_getcertsfromprivate
key to return all certificates with public
keys matching a particular private
key this bugzilla query returns all the bugs fixed in nss 3.47: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.47 compatibility nss 3.47 shared libraries are backward compatible with all older nss 3.x shared libraries. a program l...
NSS 3.54 release notes
ibution information the hg tag is nss_3_54_rtm. nss 3.54 requires nspr 4.26 or newer. nss 3.54 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_54_rtm/src/ other releases are available in nss releases. notable changes in nss 3.54 support for tls 1.3 external pre-shared
keys (bug 1603042). use arm cryptography extension for sha256, when available. (bug 1528113). certificate authority changes the following ca certificates were added: bug 1645186 - certsign root ca g2 sha-256 fingerprint: 657cfe2fa73faa38462571f332a2363a46fce7020951710702cdfbb6eeda3305 bug 1645174 - e-szigno root ca 2017 sha-256 fingerprint: beb00b30839b9bc...
.... bug 1618402 - remove symantec root certificates and disable email trust bit. bug 1640516 - nss 3.54 should depend on nspr 4.26. bug 1642146 - fix undefined reference to `port_zalloc_stub' in seed.c. bug 1642153 - fix infinite recursion building nss. bug 1642638 - fix fuzzing assertion crash. bug 1642871 - enable ssl_sendsessionticket after resumption. bug 1643123 - support ssl_exportearly
keyingmaterial with external psks. bug 1643557 - fix numerous compile warnings in nss. bug 1644774 - ssl gtests to use clearservercache when resetting self-encrypt
keys. bug 1645479 - don't use secitem_makeitem in secutil.c. bug 1646520 - stricter enforcement of asn.1 integer encoding. this bugzilla query returns all the bugs fixed in nss 3.54: https://bugzilla.mozilla.org/buglist.cgi?resoluti...
NSS Sample Code Sample_2_Initialization of NSS
>source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password which will be used to encrypt your
keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 = getpassword(input, output, "e...
... */ rv = changepw(slot, plainpass, 0, pwfile, 0); if (rv != secsuccess) { pr_fprintf(pr_stderr, "failed to change password\n"); } if (slot) { pk11_freeslot(slot); } rvshutdown = nss_shutdown(); if (rvshutdown != secsuccess) { pr_fprintf(pr_stderr, "failed : nss_shutdown()\n"); ...
Initialize NSS database - sample 2
>source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password which will be used to encrypt your
keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 = getpassword(input, output, "e...
... */ rv = changepw(slot, plainpass, 0, pwfile, 0); if (rv != secsuccess) { pr_fprintf(pr_stderr, "failed to change password\n"); } if (slot) { pk11_freeslot(slot); } rvshutdown = nss_shutdown(); if (rvshutdown != secsuccess) { pr_fprintf(pr_stderr, "failed : nss_shutdown()\n"); ...
NSS_Initialize
name nss_initialize - initialize nss. syntax secstatus nss_initialize(const char *configdir, const char *certprefix, const char *
keyprefix, const char *secmodname, pruint32 flags); parameters nss_initialize has five parameters: configdir [in] the directory where the certificate,
key, and module databases live. to-do: document the "sql:" prefix. certprefix [in] prefix added to the beginning of the certificate database, for example, "https-server1-".
keyprefix [in] prefix added to the beginning of the
key database, for example, "https-server1-". secmodname [in] name of the security module database, usually "secmod.db". flags [in] bit flags that specify how nss should be initialized. de...
...nss should be initialized. description nss_initialize initializes nss. it is more flexible than nss_init, nss_initreadwrite, and nss_nodb_init. if any of those simpler nss initialization functions suffices for your needs, call that instead. the flags parameter is a bitwise or of the following flags: nss_init_readonly - open the databases read only. nss_init_nocertdb - don't open the cert db and
key db's, just initialize the volatile certdb. nss_init_nomoddb - don't open the security module db, just initialize the pkcs #11 module. nss_init_forceopen - continue to force initializations even if the databases cannot be opened. nss_init_norootinit - don't try to look for the root certs module automatically. nss_init_optimizespace - optimize for space instead of speed. use smaller tables and cac...
NSS tools : vfychain
options] certfile] ... synopsis vfychain description the verification tool, vfychain, verifies certificate chains. modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations. this tool can also create certificate,
key, and module security database files. the tasks associated with security module database management are part of a process that typically also involves managing
key databases and certificate databases. options -a the following certfile is base64 encoded -b yymmddhhmmz validate date (default: now) -d directory database directory -f enable cert fetching from aia url -o oid set policy oid for cert val...
... check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site relates directly to nss code changes and releases. mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun. authors: elio maldonado <emaldona@redhat.com>, deon lac
key <dlac
key@redhat.com>. copyright (c) 2010, red hat, inc. licensed under the gnu public license version 2. references visible links 1. http://www.mozilla.org/projects/security/pki/nss/ ...
NSS Tools
secutil.h interface to pkcs #11 interface. eliminate redundant functionality in tools. many tools implement private versions of pkcs11init(), opencertdb(), etc. eliminate use of getopt() and replace with nspr calls to get command options (to eliminate platform dependencies with getopt()). tools information tool description links certutil 2.0 manage certificate and
key databases (cert7.db and
key3.db). source, documentation, tasks/plans cmsutil 1.0 performs basic cms operations such as encrypting, decrypting, and signing messages. source, documentation crlutil manage certificate revocation lists (crls). source, documentation, dbck 1.0 analyze and repair certificate databases (not working in nss 3.2) source, tas...
... dbck 1.0 analyze and repair certificate databases (not working in nss 3.2) source, tasks/plans modutil 1.1 manage the database of pkcs11 modules (secmod.db). add modules and modify the properties of existing modules (such as whether a module is the default provider of some crypto service). source, documentation, tasks/plans pk12util 1.0 import and export
keys and certificates between the cert/
key databases and files in pkcs12 format. source, documentation, tasks/plans signtool 1.3 create digitally-signed jar archives containing files and/or code. source, documentation, signver 1.1 verify signatures on digitally-signed objects. source, documentation, tasks/plans sslstrength ssl strength docume...
NSS Tools certutil-tasks
nss security tools: certutil tasks newsgroup: mozilla.dev.tech.crypto task list better error reporting. most certutil errors provide no detail. mistakes with command-line options just print a usage message. improve certificate listings. allow for sorting by name and trust. sorting by trust will return ca certs first. allow listing and lookup of
keys by index and nickname. improve coherence of
key and certificate nicknames. remove
keys "stranded" without a certificate (except for the imminent (????) encryption
key for password files). support importing
keys from a file. improve hardware token support. (bugfix) some certificate extensions cause certutil to crash. (bugfix) certificate entries require a serial number; one ...
...ithout a certificate (except for the imminent (????) encryption
key for password files). support importing
keys from a file. improve hardware token support. (bugfix) some certificate extensions cause certutil to crash. (bugfix) certificate entries require a serial number; one should be generated automatically if not provided. (bugfix) null password is given to new
key3.db; should prompt user for an initial password. (bugfix) listing provate
keys does not work: requires password authentication. (bugfix) listing certificate extensions has typos and does not provide much information. ...
NSS tools : vfychain
synopsis vfychain description the verification tool, vfychain, verifies certificate chains. modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations. this tool can also create certificate,
key, and module security database files. the tasks associated with security module database management are part of a process that typically also involves managing
key databases and certificate databases. options -a the following certfile is base64 encoded -b yymmddhhmmz validate date (default: now) -d directory database directory -f ...
... wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site relates directly to nss code changes and releases. mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun. authors: elio maldonado <emaldona@redhat.com>, deon lac
key <dlac
key@redhat.com>. copyright (c) 2010, red hat, inc. licensed under the gnu public license version 2. references visible links 1. http://www.mozilla.org/projects/security/pki/nss/ ...
Network Security Services
e. if you're a developer and would like to contribute to nss, you might want to read the documents highlevel overview of internal details of nss and getting started with nss. documentation background information overview of nss provides a brief summary of nss and its capabilities. nss faq answers basic questions about nss. introduction to public-
key cryptography explains the basic concepts of public-
key cryptography that underlie nss. introduction to ssl introduces the ssl protocol, including information about cryptographic ciphers supported by ssl and the steps involved in the ssl handshake. getting started nss releases this page contains information about the current and past releases of nss. g...
... netscape portable runtime (nspr) netscape portable runtime nspr project page. nspr reference nspr api documentation. additional information using the window.crypto object from javascript delegation of http download for ocsp tls cipher suite discovery nss certificate download specification fips mode - an explanation format of
key log files view all nss-related articles on mdn planning information on nss planning can be found at wiki.mozilla.org, including: fips validation nss roadmap page nss improvement project community view mozilla security forums... mailing list newsgroup rss feed view mozilla cryptography forums... ...
Creating JavaScript jstest reftests
the js/src/tests directories test files are run by the jstest harness in the shell and the reftest harness in the browser. this directory contains tests of spidermon
key conformance to ecmascript as well as spidermon
key non-standard extenstions to ecmascript. directory overview in the js/src/tests directory, there are a few important subdirectories. non262 tests the directory js/src/tests/non262/ should contain all tests of the following type: regressions of spidermon
key non-standard spidermon
key extensions to the javascript language test of "implementation-defined" details of the ecmascript standard for example, the exact definition of pi or some details of array sorting. you should not add tests of the following type: tests of the jit test of jit corr...
...ey extensions to the javascript language test of "implementation-defined" details of the ecmascript standard for example, the exact definition of pi or some details of array sorting. you should not add tests of the following type: tests of the jit test of jit correctness belong in the jit-test suite, read more here. performance tests or stress tests tests of spidermon
key's comformance to the ecmascript standard a brief history: in 2017, spidermon
key started comsuming test262, a comprehensive tests suite for ecmascript implementations. before using test262, spidermon
key had a fair number of internal tests of conformance to ecmascript, and many of those tests remain in the js/src/non262 directory as regressions. test262 tests test262 is the implementation confo...
Creating JavaScript tests
see running automated javascript tests for details. in which test suite does your new test belong? jit-tests are intended to test the implementation of the jit. only add tests to these suites which test jit correctness or functionality. jstests is intended for tests of language-visible functionality. please put tests of functionality into jstests even if related tests are in jit-tests, since jstests are closer to (and more easily converted to) test262 tests. ...
... it's also a good sanity check to run each new test against an unpatched shell or browser. the test should fail if it's working properly. checking in completed tests tests are usually reviewed and pushed just like any other code change. just include the test in your patch. security-sensitive tests should not be committed until the corresponding bug has been made public. instead, ask a spidermon
key peer how to proceed. it is ok under certain circumstances to push new tests to certain repositories without a code review. don't do this unless you know what you're doing. ask a spidermon
key peer for details. ...
Bytecodes
the javascript frontend constructs an ast from the source text, then emits stack-based bytecodes from that ast as a part of the jsscript data structure. bytecodes can reference atoms and objects (typically by array index) which are also contained in the jsscript data structure. within the engine, all bytecode execute within a stack frame -- even global (top-level) and eval code has a stack frame associated with it. a frame on the stack has space for javascript values (the tagged value format) in a few different categories. ...
...ity, holding values like this and the callee / return value. there is always a "top of stack" (tos) that corresponds to the latest value pushed onto the expression stack. all bytecodes implicitly operate in terms of this location. bytecode listing all opcodes are annotated with a [-popcount, +pushcount] to represent the overall stack-effects their execution. bytecode listing was moved to spidermon
key internals: bytecode descriptions page. ...
JIT Optimization Strategies
support the "jit coach" feature intended for inclusion in firefox developer tools. this page has two intended uses: 1. provide a repository of jit optimization strategy information which the jit coach tool can parse to display in its ui. 2. provide a user-browsable documentation of optimization strategies, how they work, how they are defeated, and options for how to re-enable them. spidermon
key's optimizing jit, ionmon
key, uses various strategies to optimize operations. the most commonplace operations that are relevant for fast program execution are property accesses and function calls. optimization information is currently collected for the following operations: getproperty (obj.prop) setproperty (obj.prop = val) getelement (obj[elemname]) setelement (obj[elemname] = val) call ...
...trategies to optimize operations. the most commonplace operations that are relevant for fast program execution are property accesses and function calls. optimization information is currently collected for the following operations: getproperty (obj.prop) setproperty (obj.prop = val) getelement (obj[elemname]) setelement (obj[elemname] = val) call (func(...)) at each operation site, ionmon
key tries a battery of strategies, from the most optimized but most restrictive to the least optimized but least restrictive. for each strategy attempted, its outcome is tracked. an outcome is either success or a reason why the strategy failed to apply. this page documents the various optimization strategies and their outcomes. it provides information on what they attempt to do, what general level o...
JSAPI Cookbook
basics working with values the basic, undifferentiated value type in the jsapi is js::value. ...
...*/ js::rootedvalue constructor_val(cx); if (!js_getproperty(cx, js_getglobalobject(cx), "person", &constructor_val)) return false; if (!constructor_val.isobject()) { js_r...
INT_TO_JSVAL
obsolete since jsapi 42this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. converts a specified integer value to a js integer value. please use js::int32value instead in spidermon
key 45 or later. syntax jsval int_to_jsval(int32_t i); name type description i any integer type c integer to convert to a jsval. ...
...ed at any time. try to avoid using it. converts a specified integer value to a js integer value. please use js::int32value instead in spidermon
key 45 or later. syntax jsval int_to_jsval(int32_t i); name type description i any integer type c integer to convert to a jsval. description int_to_jsval converts a c integer, i, to a jsval. before spidermon
key 1.8.5, not all integers can be stored in a jsval; use int_fits_in_jsval to test. starting in spidermon
key 1.8.5, jsval can store a full 32-bit integer, so this check isn't needed any longer for 32-bit integers.") }} if i does not fit into a jsval (see int_fits_in_jsval), the behavior is undefined. to convert any number to a jsval, regardless of whether it fits in an int jsval, use js_newnumberva...
JS::CallArgs
syntax js::callargs js::callargsfromvp(unsigned argc, js::value *vp); name type description args unsigned number of argument. (2nd argument of jsnative) vp js::value * a pointer to the argument value array. (3nd argument of jsnative) methods methods of js::callargs method description bool requireatleast(jscontext *cx, const char *fnname, unsigned required) returns true if there are at least required arguments passed in. if false, it reports an error message on the context. ...
...alls js_computethis and returns it. bool isconstructing() const returns true if the function is called via new. mutablehandlevalue rval() const returns the currently-set return value. the initial contents of this value are unspecified. once this method has been called, callee() and calleev() can no longer be used. (if you're compiling against a debug build of spidermon
key, these methods will assert to aid debugging.) if the method you're implementing succeeds by returning true, you *must* set this. (spidermon
key doesn't currently assert this, but it will do so eventually.) you don't need to use or change this if your method fails. description js::callargs is helper class encapsulating access to the callee, this value, arguments, and argument count...
JS::Compile
this article covers features introduced in spidermon
key 17 compile a script for execution. ...
... this article covers features introduced in spidermon
key 17 compile a script for execution. ...
JS::CompileOptions
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. version jsversion javascript version used to compile the script. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. version jsversion javascript version used to compile the script. ...
JS::DeflateStringToUTF8Buffer
dst mozilla::rangedptr<char> the ranged pointer to the buffer. dstlenp size_t* the pointer to receive the number of bytes written to the buffer. ...
... dst mozilla::rangedptr<char> the ranged pointer to the buffer. dstlenp size_t* the pointer to receive the number of bytes written to the buffer. ...
JS::Handle
this is most useful as a parameter type, which guarantees that the t value is properly rooted. syntax bool somefunction(jscontext *cx, js::handle<t> var) { ... } methods here, ptr represents the private member of js::handle<t>, typed with t. method description const t *address() const returns a pointer to ptr. const t &get() const returns ptr. operator const t&() const t operator->() const bool operator!=(const t &other) const compares ptr and other. ...
...on, define a js::handlebase<t> specialization containing them. ...
JS::Rooted
syntax js::rooted<t> var(cx); js::rooted<t> var(cx, initial); js::rooted<t> var(rt); js::rooted<t> var(rt, initial); name type description cx jscontext * the context in which to add the root. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. rt jsruntime * the runtime in which to add the root. initial t an initial value for the rooted variable. methods here, ptr represents the private member of js::rooted<t>, typed with t. method description t &get() returns ptr. ...
...cific specialization, define a js::rootedbase<t> specialization containing them. ...
JSConstDoubleSpec
name const char * name to assign the double. flags uint8_t property attributes for the double. ...
...describes a double and integer value and assigns it a name. syntax template<typename t> struct jsconstscalarspec { const char *name; t val; /* uint8_t flags; // obsolete from jsapi 35 uint8_t spare[3]; // obsolete from jsapi 35 */ }; typedef jsconstscalarspec<double> jsconstdoublespec; typedef jsconstscalarspec<int32_t> jsconstintegerspec; // added in spidermon
key 38 name type description val double or int32_t value for the double or integer. name const char * name to assign the double. flags uint8_t property attributes for the double. obsolete since jsapi 35 currently these can be 0 or more of the following values or'd: jsprop_enumerate: property is visible in for loops. jsprop_re...
JSExtendedClass
hooks. a c/c++ program can use a jsextendedclass with the js_initclass and js_newobject apis to create objects that have custom methods and properties implemented in c/c++. syntax struct jsextendedclass { jsclass base; jsequalityop equality; jsobjectop outerobject; jsobjectop innerobject; jsiteratorop iteratorobject;// added in spidermon
key 1.8 jsobjectop wrappedobject; // added in spidermon
key 1.8 ...and additional reserved fields. }; name type description base jsclass the basic class information and callbacks for this class. this contains some required fields. equality jsequalityop optional. overrides the javascript == and != operators. outerobject jsobjecto...
.... equality jsequalityop optional. overrides the javascript == and != operators. outerobject jsobjectop optional. return the current outer object. this is used to implement split objects. innerobject jsobjectop optional. return the current inner object. this is used to implement split objects. iteratorobject jsiteratorop added in spidermon
key 1.8 optional. creates and returns a new iterator. wrappedobject jsobjectop added in spidermon
key 1.8 optional. if non-null, an object of this class may serve as a wrapper for another object. wrappers sometimes transparently behave like the object they wrap. for example, an object and its wrappers are all equal under ===. description to implement a custom class that uses any o...
JSFastNative
obsolete since javascript 1.8.5this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermon
key 1.8 jsfastnative is the type of fast native functions in the jsapi. apis such as js_initclass and js_definefunctions can create custom methods that are implemented as c/c++ functions of this type, instead of jsnative. the term "native" here refers to c/c++ code as opposed to javascript code. added in spidermon
key 1.8.1 jsfastnative has been renamed to jsnative. syntax typedef jsbool (*jsfastnative)(jscontext *cx, unsigned int argc, jsval *vp); name type description cx jscontext * the context in which the f...
..._set_rval (at least once) and return js_true. on error or exception, it must return js_false. to create a jsfunctionspec that points to a jsfastnative, use js_fn. when a jsfastnative is called, no jsstackframe is generated. this is what makes a fast native fast. however, it causes the function not to appear on the stack in javascript debuggers. it also means that applications that use spidermon
key's security features, particularly those that implement jscheckaccessop or jscheckaccessidop in terms of apis such as js_frameiterator and js_stackframeprincipals, must take extra care, as the native function's principals will be missing from the stack. see also jsnative ...
JSID_IS_STRING
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
JSNative
is argument, the return-value slot, and the callee function object are accessible through this pointer using macros described below. description jsnative is the type of native implementations of javascript functions. full documentation of how to define a jsnative (or a jsfastnative, the equivalent typedef which preceded it) is available in the api header "js/callargs.h" added in spidermon
key 24. this header is new, but the semantics it describes are applicable to all recent spidermon
key releases. the preferred way to implement a function is to use the js::callargs structure defined there; the macros providing equivalent functionality are deprecated. the behavior of a jsnative is implemented using a js::callargs structure added in spidermon
key 17. (this structure is now provided in...
... on success, the callback must set js::callargs::rval() or call js_set_rval (at least once) and return true. otherwise it should either report an error (using e.g. ...
JSObjectOps.defaultValue
see bug 408416 for details. ...
...tomized [[defaultvalue]] behavior. the jsclass.convert callback should convert obj to the given type, returning js_true with the resulting value in *vp on success, and returning js_false on error or exception. on success, *vp must be a primitive value: per es5 §8.12.8, every object "must ensure that its [[defaultvalue]] internal method can return only primitive values." debug builds of spidermon
key will assert if a convert callback is successful but leaves *vp holding a primitive value. js_convertstub implements the default behavior for the jsclass.convert hook, which is to call obj.valueof() and obj.tostring() in accordance with the algorithm in es5 §8.12.8. ...
JSObjectPrincipalsFinder
obsolete since jsapi 17this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. jsobjectprincipalsfinder is the type of a security callback that can be configured using js_setobjectprincipalsfinderjsapi 1.8 and earlier or js_setruntimesecuritycallbacksadded in spidermon
key 1.8.1. callback syntax typedef jsprincipals * (* jsobjectprincipalsfinder)(jscontext *cx, jsobject *obj); name type description cx jscontext * the context in which to find principals. obj jsobject * the object whose principals are needed. description the javascript engine calls this callback to obtain principals for a jsprincipals.subsume check. for example, when a ...
...ne calls the object principals finder callback to obtain principals for the local scope object, to check that the caller has access to that object. the two debugger functions js_stackframeprincipals and js_evalframeprincipals also use this callback. since it is very common for jsobjectops.checkaccess or jsclass.checkaccess hooks to call these functions, the object principals finder callback is a
key security feature. the callback returns a pointer to the principals associated with obj, possibly via the immutable parent chain leading from obj to a top-level container (such as a window object in the dom). if there are no principals associated with obj, return null. therefore null does not mean an error was reported; in no event should an error be reported or an exception be thrown by this cal...
JS_CallFunction
calls a specified js function. ...
...ction pointer to the function to call. fun should be a native function or jsapi-compiled function. see below. name const char * pointer to the name of function to call. fval js::handlevalue pointer to the function value to call. args const js::handlevaluearray & reference to the array of argument values to pass to the function. added in spidermon
key 31 argc unsigned number of arguments you are passing to the function. obsolete since jsapi 30 argv jsval * pointer to the array of argument values to pass to the function. obsolete since jsapi 30 rval js::mutablehandlevalue out parameter. on success, *rval receives the return value from the function call. description js_callfunction calls a spe...
JS_ConstructObject
obsolete since jsapi 16this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. as of spidermon
key 1.8.8, js_constructobject and js_constructobjectwitharguments have been removed from the jsapi. the preferred alternative is to save a copy of the constructor function for the class, then to call it using js_new. a less-preferred short-term solution might be to use this reimplementation of the method, but note that this reimplementation is not guaranteed to continue working across spidermon
key releases. create a new object of the specified class, with the specified prototype and parent, then invokes a constructor function to initialize the new object. syntax jsobject * js_constructobject...
...te the new object. clasp is a pointer to the class of object to create. proto and parent may specify objects to be used as the new object's prototype and parent. if either is null, the engine tries to find reasonable defaults. js_constructobjectwitharguments is the same but additionally passes zero or more arguments to the constructor. neither of these functions is quite like the javascript new
keyword. for details on how we find the appropriate constructor and default prototype, see js_newobject: choosing a default prototype. roughly speaking, we use parent or cx to find a global object, and then find clasp's constructor in that global object. if parent is null, the engine chooses an object to serve as the new object's parent. on success, js_constructobject returns a pointer to the new...
JS_ConvertArguments
pi 38this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. converts a series of js values, passed in an argument array, to their corresponding js types. syntax bool js_convertarguments(jscontext *cx, const js::callargs &args, const char *format, ...); // added in spidermon
key 31 bool js_convertarguments(jscontext *cx, unsigned argc, jsval *argv, const char *format, ...); // obsolete since jsapi 30 name type description cx jscontext * the context in which to perform any necessary conversions. cx also affects the interpretation of format, if js_addargumentformatter has been called. requires request. in a js_th...
...escription cx jscontext * the context in which to perform any necessary conversions. cx also affects the interpretation of format, if js_addargumentformatter has been called. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. args const js::callargs & reference to the arguments to convert. added in spidermon
key 31 argc unsigned the number of arguments to convert. obsolete since jsapi 30 argv jsval * pointer to the vector of arguments to convert. obsolete since jsapi 30 this must be an argv pointer created by the js engine and passed to a jsnative or jsfastnative callback, not an array created by application code. in certain error cases, js_convertarguments cal...
JS_DecompileFunctionBody
generate the source code representing the body of a function, minus the function
keyword, name, parameters, and braces. syntax jsstring * js_decompilefunctionbody(jscontext *cx, js::handle<jsfunction*> fun, unsigned indent); name type description cx jscontext * the context in which to decompile the function. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. fun js::handle<jsfunction*> the function to decompile. indent unsigned if it's not js_dont_pretty_print, js_decompilefunction returns pretty printed source code of the function. ...
...n a js_threadsafe build, the caller must be in a request on this jscontext. fun js::handle<jsfunction*> the function to decompile. indent unsigned if it's not js_dont_pretty_print, js_decompilefunction returns pretty printed source code of the function. description js_decompilefunctionbody generates the source code of a function's body, minus the function
keyword, name, parameters, and braces, from a function's compiled form, fun. if successful, js_decompilefunctionbody returns a string containing the source code of the function body. otherwise, it returns null. the source code generated by this function is accurate but unadorned and is not suitable for recompilation without providing the function's declaration. if you decompile a function that makes ...
JS_DefineFunction
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handle<jsobject*> object for which to define a function as a property (method). name const char * or const char16_t * name to assign to the func...
...quires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handle<jsobject*> object for which to define a function as a property (method). name const char * or const char16_t * name to assign to the function. id js::handle<jsid> a pointer to jsid for name to assign to the function. added in spidermon
key 17 call jsnative the native c/c++ function to be wrapped by the new function. nargs unsigned number of arguments that are passed to the function when it is called. flags unsigned the logical or of zero or more property attributes. description js_definefunction exposes a c/c++ function to scripts by defining a new method on an existing javascript ...
JS_DefineProperty
me, size_t namelen, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); // ---- added in spidermon
key 45 ---- bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handle<jspropertydescriptor> desc, js::objectopresult &result); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handle<jspropertydescriptor> desc); bool js_defineucproperty(jscontext *cx, js::handleob...
...scriptor> desc, js::objectopresult &result); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handle<jspropertydescriptor> desc); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handle<jspropertydescriptor> desc); // ---- added in spidermon
key 1.8.1 ---- bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handleobject value, unsigned attrs, js...
JS_DeleteProperty
removes a specified property from an object. ...
... removes a specified property from an object. ...
JS_FS
macros for describing functions, for use with js_defineproperties and js_initclass. syntax #define js_fs(name,call,nargs,flags) ... #define js_fn(name,call,nargs,flags) ... #define js_sym_fn(symbol,call,nargs,flags) ... // added in spidermon
key 38 #define js_fninfo(name,call,info,nargs,flags) ... // added in spidermon
key 17 #define js_self_hosted_fn(name,selfhostedname,nargs,flags) ... // added in spidermon
key 31 #define js_self_hosted_sym_fn(symbol, selfhostedname, nargs, flags) ... // added in spidermon
key 38 #define js_sym_fnspec(symbol, call, info, nargs, flags, selfhostedname) ... // added in spidermon
key 38 #define js_fnspec(name,call,info,nargs,flags,selfhostedname) ... // added in spidermon
key 31 #define js_fs_end ... name type description name ...
...o define an array of jsfunctionspecs to pass to js_definefunctions or js_initclass. js_fn (whose name pays homage to the old jsnative/jsfastnative split) simply adds the flag jsfun_stub_gsops. js_fninfo allows the simple adding of jsjitinfos. js_self_hosted_fn declares a self-hosted function. finally js_fnspec has slots for all the fields. the _sym variants allow defining a function with a symbol
key rather than a string
key. for example, use js_sym_fn(iterator, ...) to define an @@iterator method. (in builds without es6 symbols, it defines a method with the string id "@@iterator".) see an example in the jsapi user guide. see also mxr id search for js_fs mxr id search for js_fn mxr id search for js_sym_fn mxr id search for js_fninfo mxr id search for js_self_hosted_fn mxr id search for...
JS_GC
obsolete since jsapi 50 description js_gc performs garbage collection of js objects, strings and other internal data structures that are no longer reachable in the specified context or runtime. ...
...obsolete since jsapi 50 description js_gc performs garbage collection of js objects, strings and other internal data structures that are no longer reachable in the specified context or runtime. ...
JS_GetClassObject
get the builtin class constructor. syntax bool js_getclassobject(jscontext *cx, jsproto
key key, js::mutablehandle<jsobject*> objp); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext.
key jsproto
key the
key of the prototype. objp js::mutablehandle<jsobject*> out parameter. if successful, receive the class constructor. description js_getclassobject gets the builtin class costructor for the specified prototype
key. if successful, js_getclassobject stores the class constructor to *objp and returns true, otherwise returns false and the value of *objp is undefined. see also mxr id search for js_getclassobj...
... out parameter. if successful, receive the class constructor. description js_getclassobject gets the builtin class costructor for the specified prototype
key. ...
JS_GetClassPrototype
get the builtin class prototype object. syntax bool js_getclassprototype(jscontext *cx, jsproto
key key, js::mutablehandle<jsobject*> objp); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext.
key jsproto
key the
key of the prototype. objp js::mutablehandle<jsobject*> out parameter. if successful, receive the class prototype object. description js_getclassprototype gets the builtin class costructor for the specified prototype
key. if successful, js_getclassprototype stores the class prototype object to *objp and returns true, otherwise returns false and the value of *objp is undefined. see also mxr i...
...r. if successful, receive the class prototype object. description js_getclassprototype gets the builtin class costructor for the specified prototype
key. ...
JS_GetParent
bject should not be passed to any other jsapi function that could expose it to script code. each object is assigned a parent when it is created: the standard library objects and functions all have the global object as their parent. objects created by standard library functions, such as array.prototype.concat, have the global object as their parent. an object created by a script via the new
keyword has the same parent as the constructor. for example, after d = new date, d has the same parent as date, ordinarily the global object. an object created by a script via implicit conversion (the ecmascript toobject operator), an object initializer ({a: 1, b: 2}), or an array initializer ([1, 2, 3]), has the global object as its parent. the parent of a function created by evaluating a functio...
...d. otherwise the new object has no parent. this is often the case for the global object, which is typically the first object created in a new context. the preferred way to set an object's parent is by using the parent parameter to js_newobject or js_constructobject. an application can also use js_setparent, but see the caveats on that page. an object's parent serves two purposes in spidermon
key: for some functions, it is used to implement lexical scoping (but this is an implementation detail). applications that use spidermon
key's custom security features can use the parent during security checks, as a convenient way to determine the security domain of an object being accessed. the typical rule is that every object is in the same security domain as its parent. (but each application c...
JS_GetPositiveInfinityValue
description js_getpositiveinfinityvalue returns a js::value that represents an ieee floating-point positive infinity. js_getnegativeinfinityvalue returns the corresponding negative infinity. ...
... description js_getpositiveinfinityvalue returns a js::value that represents an ieee floating-point positive infinity. js_getnegativeinfinityvalue returns the corresponding negative infinity. ...
JS_GetReservedSlot
index uint32_t index of the reserved slot to access. v js::value (in js_setreservedslot) the value to store. ...
... index uint32_t index of the reserved slot to access. v js::value (in js_setreservedslot) the value to store. ...
JS_InitClass
rting, and resolving properties. the jsapi provides reasonable default behavior for all of these; ordinarily you don't want to overload any of them. after a successful call to js_initclass, javascript code can see and manipulate the class's constructor and prototype just as if it were an ordinary javascript function with a prototype property. javascript code can create new instances using the new
keyword. classes can have methods and properties that are present on all instances. they can also have methods and properties that are only present on the constructor; these are called "static methods" and "static properties" because they serve the same purpose and use the same syntax as static methods and fields in java. on success, js_initclass returns a pointer to a js object that is the prototype...
...ns a pointer to a js object that is the prototype for the newly initialized class. if js_initclass fails, it returns null. the constructor for the class is built in the same context as cx, and in the same scope as obj. if you pass null as the constructor parameter, then a constructor is not built, and you cannot specify static properties and functions for the class. note: starting with spidermon
key 1.8, the prototype and constructor are set up with stub getter and setter operations instead of class operations. if you provide a constructor for the class, then you should also pass an object to parent_proto. js_initclass uses parent_proto to build a prototype object for the class. the prototype object inherits properties and methods from the parent_proto object you provide. once the constructo...
JS_InitStandardClasses
these global objects, functions, constructors, and constants are created as properties of obj. as a side effect, js_initstandardclasses establishes obj as the global object for cx, if one is not alre...
... these global objects, functions, constructors, and constants are created as properties of obj. ...
JS_IsConstructing
. description js_isconstructing must be called only from a jsnative called from the engine. cx and vp must be the arguments that the engine passed to that jsnative. ...
...g the new
keyword, or from c/c++ using a jsapi function such as js_constructobject. otherwise it returns js_false. ordinary non-constructor jsnatives have no need to call this; it always returns js_false for such functions. many constructors do not need to call it either. in the common case where a constructor should have the same behavior (creating a new object) whether it is called with the new
keyword or not, it does not need to call js_isconstructing. mxr id search for js_isconstructing bug 918462 ...
JS_IsIdentifier
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. str js::handlestring the string to test. chars const char16_t * the pointer of the string to test. length size_t the length of chars. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. str js::handlestring the string to test. chars const char16_t * the pointer of the string to test. length size_t the length of chars. ...
JS_MaybeGC
e collection in cx's runtime would free up enough memory to be worth the amount of time it would take. if so, it performs some garbage collection. calling js_maybegc when the application is idle can help prevent garbage collection from happening at less convenient times. ...
...the analysis is simplistic but produces acceptable performance for many applications. ...
JS_New
this article covers features introduced in spidermon
key 1.8 create an object as though by using the new
keyword and a javascript function. syntax jsobject * js_new(jscontext *cx, js::handleobject ctor, const js::handlevaluearray& args); // added in jsapi 32 jsobject * js_new(jscontext *cx, jsobject *ctor, unsigned argc, jsval *argv); // obsolete since jsapi 32 name type description cx jscontext * the context in which to create the new object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ctor js::handleobject the constructor function object. ...
... name type description cx jscontext * the context in which to create the new object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ctor js::handleobject the constructor function object. args js::handlevaluearray & an array of argument values to pass to the constructor. added in spidermon
key 38 argc unsigned the number of arguments to pass to the constructor. obsolete since jsapi 32 argv jsval * pointer to the element 0 of an array of argument values to pass to the constructor. if argc is 0, this may be null. obsolete since jsapi 32 description js_new creates a new object as though by using the new operator, as described in ecma 262-3 §11.2.2. ...
JS_NewGlobalObject
syntax jsobject * js_newglobalobject(jscontext *cx, const jsclass *clasp, jsprincipals *principals, js::onnewglobalhookoption hookoption, const js::compartmentoptions &options = js::compartmentoptions()); name type description cx jscontext * the context in which to create the new global object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. clasp jsclass * the class to use for the new global object. ...
...nsure that the jsclass remains alive throughout the lifetime of the new object, including the garbage collection cycle that finally frees it. the usual way to do this is to make jsclasses global or static. principals jsprincipals * the security information to associate with this compartment. hookoption js::onnewglobalhookoption see debugger api hook added in spidermon
key 31 options const js::compartmentoptions & the option for new compartment (passed to jscompartment constructor). added in spidermon
key 31 description js_newglobalobject creates a new global object based on the specified class. the new object has no parent. it initially has no prototype either, since it is typically the first object created; call js_initstandardclasses t...
JS_NumberValue
description js_numbervalue converts a c floating-point number of type double to js::value, the type of javascript values. the result is an integer js::value if d can be stored that way. otherwise, a new floating-point js::value is created. ...
... description js_numbervalue converts a c floating-point number of type double to js::value, the type of javascript values. the result is an integer js::value if d can be stored that way. otherwise, a new floating-point js::value is created. ...
JS_PreventExtensions
attempts to forbid the addition of any new properties to an object. syntax // added in spidermon
key 45 bool js_preventextensions(jscontext *cx, js::handleobject obj, js::objectopresult &result); // obsolete since jsapi 39 bool js_preventextensions(jscontext *cx, js::handleobject obj, bool *succeeded); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to be made non-extensible. result js::objectopresult & (out parameter) receives the result of the operation. added in spidermon
key 45 succeeded bool * outparam indicating, on jsapi success, whether the object is now non-extensible. obsole...
...39 description all javascript objects recognize the concept of extensibility: whether new properties may be added to the object. in some situations, it may be convenient to prohibit new properties. in javascript this may be accomplished using the object.preventextensions method. the similar jsapi method is js_preventextensions. the failure-mode information below is new as of spidermon
key 36. before then, js_preventextensions did not accept a succeeded argument; in those cases where *succeeded would be set to false, js_preventextensions would throw a typeerror and return false. unlike object.preventextensions, js_preventextensions doesn't necessarily throw a typeerror if the object couldn't be made non-extensible. there are instead two modes of failure: through internal error,...
JS_SameValue
this article covers features introduced in spidermon
key 1.8.1 determines if two jsvals are the same, as determined by the samevalue algorithm in ecmascript 262, 5th edition. samevalue slightly differs from strict equality (===) in that +0 and -0 are not the same and in that nan is the same as nan. ...
...262, 5th edition. samevalue slightly differs from strict equality (===) in that +0 and -0 are not the same and in that nan is the same as nan. the samevalue algorithm is equivalent to the following javascript: function samevalue(v1, v2) { if (v1 === 0 && v2 === 0) return 1 / v1 === 1 / v2; if (v1 !== v1 && v2 !== v2) return true; return v1 === v2; } syntax // added in spidermon
key 45 bool js_samevalue(jscontext *cx, js::handle<js::value> v1, js::handle<js::value> v2, bool *same); // obsolete since jsapi 39 bool js_samevalue(jscontext *cx, jsval v1, jsval v2, bool *same); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller...
JS_SetContextCallback
d or destroyed. syntax void js_setcontextcallback(jsruntime *rt, jscontextcallback cxcallback, void *data); name type description rt jsruntime * pointer to a js runtime. cxcallback jscontextcallback pointer to the callback function, described below. data void * any data passed as 3rd argument to the callback function. added in spidermon
key 31 callback syntax typedef bool (* jscontextcallback)(jscontext *cx, unsigned contextop, void *data); name type description cx jscontext * pointer to a jscontext which the callback may use to call into jsapi functions. this is the context which was just created, or is about to be destroyed. for example, the callback my call js_getcontextprivate(cx) in order to...
...r is about to be destroyed. for example, the callback my call js_getcontextprivate(cx) in order to free up resources previously allocated by js_setcontextprivate. contextop unsigned see jscontextop. for future compatibility the callback must do nothing and return true if any other value is passed. data void * data specified in js_setcontextcallback. added in spidermon
key 31 typedef enum jscontextop { jscontext_new, jscontext_destroy } jscontextop; enumeration meaning jscontext_new js_newcontext successfully created a new jscontext instance. the callback can initialize the instance as required. if the callback returns js_false, the instance will be destroyed and js_newcontext returns null. in this case the callback is not cal...
JS_SetElement
assign a value to a numeric property of an object. ...
...res request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object to modify, commonly an array object. index uint32_t index number of the element to set. v js::handlevalue or js::handleobject or js::handlestring or int32_t or uint32_t or double the value to assign to the element. added in spidermon
key 31 vp js::mutablehandlevalue in/out parameter. *vp is the value to assign to the element. js_setelement ordinarily leaves *vp unchanged, but a jsclass.addproperty hook or non-default setter may modify it. obsolete since jsapi 29 description js_setelement assigns a value to a numeric property of an object. it behaves like the javascript expression obj[index] = v. on success, ...
JS_SetGCZeal
syntax void js_setgczeal(jscontext *cx, uint8_t zeal, uint32_t frequency); name type description cx jscontext * a context. the gc zeal level of the associated jsruntime is set. zeal uint8_t the desired level of garbage collection. frequency uint32_t with some zeal levels, a gc is triggered every frequency allocations. description js_setgczeal sets the level of additional garbage collection to perform for a runtime, for the purpose of finding or reproducing bugs. ...
...they happen more reliably) and debug (they happen sooner, closer to the source of the bug). the drawback is that gc zeal can cause javascript code to run extremely slowly. regularly running your test suite with gc zeal enabled at level 2 is a good practice. this function is available only in debug builds. to enable this function in an optimized build, define the macro js_gc_zeal building spidermon
key. (in a debug build of gecko, you can also set the current gc zeal level using the javascript.options.gczeal preference.) see also mxr id search for js_setgczeal mxr id search for js_gc_zeal js_schedulegc bug 308429 bug 650978 ...
JS_StrictlyEqual
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v1, v2 js::handle<js::value> / jsval the value to compare. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v1, v2 js::handle<js::value> / jsval the value to compare. ...
JS_SuspendRequest
since then, a jsruntime is tied to the thread that created it; it may not be accessed by any other thread. suspends the calling thread's current request, if any, to allow the thread to block or perform time-consuming calculations. ...
...may be 0. js_resumerequest resumes the previously suspended requests. the savedepth argument must be the value returned by the matching js_suspendrequest call. if savedepth is nonzero and garbage collection is underway, js_resumerequest blocks until the garbage collector is done. jsapi 1.7 and earlier js_suspendrequest and js_resumerequest are available only in js_threadsafe builds. in spidermon
key 1.8 and later, these functions will be present, but will do nothing, in non-js_threadsafe builds. mxr id search for js_suspendrequest mxr id search for js_resumerequest ...
JSDBGAPI
see bug 1069694. ...
...see profiling javascript with shark. js_connectshark js_disconnectshark js_startchudremote js_stopchudremote the following jsnative functions can be used to expose the above four apis to scripts. js_connectshark js_disconnectshark js_startshark js_stopshark ...
Mozilla Projects
baron that helps extension and chrome developers to find memory leaks. it will pop-up an alert when a window is closed and javascript still links to that window (for example, an observer that is not cleared when the window closes). mailnews mailnews stands for "mail and newsgroups". mailnews is the back end of the messaging parts of seamon
key and thunderbird. it provides a number of functions and capabilities, including: mccoy mccoy uses xulrunner which is bound to break, for details see this post. mozilla calls mccoy a "simple system" which is a clear sign that something probably is not working, and indeed, is not. mccoy is an application ...
...cally embedded into java applications to provide scripting to end users. it is embedded in j2se 6 as the default java scripting engine. shumway this article will help you understand shumway — mozilla's open standards-based flash renderer — and what it means for the community of developers currently creating the adobe flash platform. spidermon
key: the mozilla javascript runtime standalone source code releases can be found on the releases page. thread sanitizer thread sanitizer (tsan) is a fast data race detector for c/c++ programs. it uses a compile-time instrumentation to check all non-race-free memory access at runtime. unlike other tools, it understands compiler-builtin atomics and s...
Pinning violation reports
the error page displayed by firefox when you encounter a pin violation gives you the option of reporting this error. doing this can help us to make the web safer. ...
... the error page displayed by firefox when you encounter a pin violation gives you the option of reporting this error. doing this can help us to make the web safer. ...
Gecko events
t_asynch_significant_change an object had a significant layout change which could affect the type of accessible object -- this is a layout occurance and is thus asynchronous is supported: yes event_active_decendent_changed the active descendant of a component has changed. the active descendant is used in objects with transient children. is supported: no event_focus an object has received the
keyboard focus. is supported: yes event_state_change an object's state has changed. is supported: yes states: state_focused, state_busy, xxx: event_location_change an object has changed location, shape, or size. is supported: no event_name_change an object's name property has changed. is supported: yes targets: table_cell - the cell of <xul:tree/>, any accessible for html element when @title...
...n object's description property has changed. is supported: no event_value_change an object's value property has changed. is supported: yes event_help_change an object's help has changed. is supported: no event_defaction_change an object's default action has changed. is supported: no event_action_change an object's action has changed. is supported: no event_accelerator_change an object's
keyboard shortcut has changed. is supported: no event_selection the selection within a container object has changed. is supported: yes event_selection_add an item within a container object has been added to the selection. is supported: yes event_selection_remove an item within a container object has been removed from the selection. is supported: yes event_selection_within numerous selection c...
Gecko Roles
presents a combo box; an edit control with an associated list box that provides a set of predefined choices. role_droplist represents the calendar control. role_progressbar represents a progress bar, dynamically showing the user the percent complete of an operation in progress. role_dial represents a dial or knob whose purpose is to allow a user to set a value. role_hot
keyfield represents a hot-
key field that allows the user to enter a combination or sequence of
keystrokes. role_slider represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values. role_spinbutton represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy...
...nts which are accessed by the user on a page by page basis. role_section a container of document content. role_redundant_object an object which is redundant with another object in the accessible hierarchy. ats typically ignore objects with this role. role_form a container of form controls. role_ime an object which is used to allow input of characters not found on a
keyboard, such as the input of chinese characters on a western
keyboard. role_app_root ??? role_parent_menuitem represents a menu item, which is an entry in a menu that a user can choose to display another menu. role_calendar a calendar that allows the user to select a date. role_combobox_list a list of items that is shown by combobox. role_combobox_option a i...
History Service Design
ces of data based on common patterns, this is directly usable by the end user, but also by implementers to provide a variety of nice features. for example, is possible to create a query folder containing the 10 pages most visited by the user, allowing to fast find good candidates for bookmarking. a locationbar intelligent algorithm (aka: the awesomebar) allows searchs through bookmarks, history,
keywords (and much more) detaching the user from the old long searches through tree views. this is possible through a relevance algorithm that assigns a param called frecency to every page in history, see the places frecency algorithm for major informations. history service provides the basics to create such adaptive search paths, allowing for a better browsing experience through a common interface. ...
... seconds. many queries are especially optimized, for example limited history queries, often used to build menus, allowing for good performances even in presence of a really large history. storing pages and visits pages (intended as uris) are stored into a table shared by both history and bookmarks, every url is unique in this table and is associated with a place id, commonly used as the foreign
key on other tables. this table has common attributes for a page like typed, hidden and frecency. certain scheme are excluded from history, so they will never be added, for example: about, view-source, chrome. if a page can be added we first check if it exists already, then it is added or updated accordingly to the previous check, and common attributes are set based on concurrent visit properties. t...
extIApplication
this content covers features introduced in thunderbird 3 the extiapplication is defined in toolkit/components/exthelper/extiapplication.idl. implemented via xpcom service for extiapplication: see the instructions on the fuel (firefox), steel (thunderbird) and smile (seamon
key) pages. method overview boolean quit() boolean restart() void getextensions(extiextensionscallback acallback) attributes the following interfaces are available to all applications: attribute type description id readonly attribute astring the id of the application. name readonly attribute astring the name of the application. version readonly attribute astring the version number of the application. console ...
...llback) return value none. ...
extIExtension
this content covers features introduced in thunderbird 3 the extiextension interface represents an extension. extiextension is defined in toolkit/components/exthelper/extiapplication.idl. implemented via xpcom service for extiapplication: see the instructions on the fuel (firefox), steel (thunderbird) and smile (seamon
key) pages. method overview fixme: attributes attribute type description id readonly attribute astring the id of the extension. name readonly attribute astring the name of the extension. enabled readonly attribute boolean true if the extension is currently enabled. version readonly attribute astring the version number of th...
... ...
extIPreferenceBranch
t of "extensions.extensionid.", while the application-level preferences have an empty root. all preference "aname" parameters used in this interface are relative to the root branch. extipreferencebranch is defined in toolkit/components/exthelper/extiapplication.idl. implemented via xpcom service for extiapplication: see the instructions on the fuel (firefox), steel (thunderbird) and smile (seamon
key) pages. method overview boolean has(in astring aname) extipreference get(in astring aname) nsivariant getvalue(in astring aname, in nsivariant adefaultvalue) void setvalue(in astring aname, in nsivariant avalue) void reset() attributes attribute type description root readonly attribute astring the name of the bra...
...: this function has not been implemented and will raise an exception. ...
extISessionStorage
this content covers features introduced in thunderbird 3 extisessionstorage allows an extension to store data for the life time of the application (e.g. browser). extisessionstorage is defined in toolkit/components/exthelper/extiapplication.idl. implemented via xpcom service for extiapplication: see the instructions on the fuel (firefox), steel (thunderbird) and smile (seamon
key) pages. method overview these methods are usually accessed via application.storage. return type method boolean has(in astring aname) void set(in astring aname, in nsivariant avalue) nsivariant get(in astring aname, in nsivariant adefaultvalue) attributes attribute type description events readonly attribute extievents the ev...
...return value get() gets the value of a storage item with the given name. returns a default value if the item does not exist. nsivariant get(in astring aname, in nsivariant adefaultvalue) parameters aname the name of an item return value value of the item or the given default value if no item exists with the given name. see also fuel (firefox), steel (thunderbird) and smile (seamon
key) ...
Fun With XBL and XPConnect
plete listener (like my auto complete session object). creating the event handler the last part is the easy part. i wanted a handler that would kick off the auto complete search. ...
...ener (like my auto complete session object). creating the event handler the last part is the easy part. i wanted a handler that would kick off the auto complete search. ...
Observer Notifications
before the first window for the application is displayed. sessionstore-windows-restored sent by the session restore process to indicate that all initial browser windows have opened. note that while the window are open and the chrome loaded the tabs in the windows may still be being restored after this notification. note: this notification is specific to firefox and seamon
key 2.0 applications application shutdown these are the topics that you can observe on shutdown, in order of appearance. topic description quit-application-requested something has requested that the application be shutdown. you can cancel the shutdown from here by setting asubject.data to true (asubject is the first parameter to your observer, the data value is an...
...igin (for use in security checks), eg "http://developer.mozilla.org". document-element-inserted document null sent immediately after the root element of a document has been created, but before executing any script on it. user-interaction-active nsidomwindow null sent once every 5000ms while this chrome document sees some kind of user activity (for example,
keyboard or mouse events), and at the exact moment of the state transition from idle to active. user-interaction-inactive nsidomwindow null sent when the chrome document has seen no user activity for a while. the notification is not repeated during a continuous inactivity period. windows these topics indicate points of interest during the lifetime of a window. ...
amIWebInstallInfo
ozapps/extensions/amiwebinstalllistener.idlscriptable this interface is used by the default implementation of amiwebinstalllistener to communicate with the running application and allow it to warn the user about blocked installs and start the installs running. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void install(); attributes attribute type description installs nsivariant an array of addoninstall objects. read only. originatinguri nsiuri the uri that started the installs. for example, the referring page for a link to an xpi download. read only. originatingwindow nsidomwindow the window t...
...tion installs nsivariant an array of addoninstall objects. read only. originatinguri nsiuri the uri that started the installs. for example, the referring page for a link to an xpi download. read only. originatingwindow nsidomwindow the window that started the installs. read only. note: prior to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5), this was an nsidomwindowinternal. methods install() starts all installs. void install(); parameters none. ...
imgIContainerObserver
image/public/imgicontainerobserver.idlscriptable an interface to implement to listen to activities on an imgicontainer object. 1.0 66 introduced gecko 1.7 inherits from: nsisupports last changed in gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9) if you wish to listen for activities on an imgicontainer, you should implement the framechanged() method. method overview void framechanged(in imgirequest arequest, in imgicontainer acontainer, [const] in nsintrect adirtyrect); native code only! methods native code only!framechanged called when the frame for an image container has changed. void framechanged( in imgirequest arequest, in imgicontainer acontainer, [const] in nsintrect adirtyrect ); parameters arequest th...
...see also imgidecoderobserver imgicontainer ...
mozIStorageService
the database should not be open, or you should ensure that no database activity is happening when you call this method. the filename provided is only used as a suggestion. if the filename is already taken, attempts will be...
...ble with this method. ns_error_out_of_memory allocating a new storage object failed. openspecialdatabase() opens a connection to a named special database storage that identifies the type of storage requested. note: you should only access the profile database from the main thread since other callers may also be using it. mozistorageconnection openspecialdatabase( in string astorage
key ); parameters astorage
key a string
key identifying the type of storage requested. valid values are "profile" and "memory". return value a new mozistorageconnection providing access to the requested database. exceptions thrown ns_error_invalid_arg if astorage
key is invalid. openunshareddatabase() opens a database connection to the specified file without using a sha...
mozIStorageStatement
ant value description moz_storage_statement_invalid 0 the sql statement is invalid. moz_storage_statement_ready 1 the sql statement is ready to be executed. moz_storage_statement_executing 2 the sql statement is executing at the moment. methods initialize() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) note: this method has been removed for gecko 1.9.1. to initialize a statement, consumers should call mozistorageconnection.createstatement(). this method exists back to gecko 1.8.0. initialize this query with the given sql statement. void initialize( in mozistorageconnection adbconnection, in autf8string asqlstatement ); parameters adbconnection a mozistorageconnection ...
...emoved for gecko 1.9.1. to initialize a statement, consumers should call mozistorageconnection.createstatement(). this method exists back to gecko 1.8.0. initialize this query with the given sql statement. void initialize( in mozistorageconnection adbconnection, in autf8string asqlstatement ); parameters adbconnection a mozistorageconnection database connection. asqlstatement string
key representing the sql statement. finalize() finalizes a statement which releases all resources that were allocated for it. you must call this method on every active statement before you try to call mozistorageconnection.close(). void finalize(); note: this method does not need to be used from native callers because you have to release the statement in order to not leak. finalize will be call...
nsIAccessNode
accessible/public/nsiaccessnode.idlscriptable an interface used by in-process accessibility clients to get style, window, markup and other information about a dom node. when accessibility is active in gecko, every dom node can have one nsiaccessnode. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) the nsiaccessnode implementations are instantiated lazily. the nsiaccessnode tree for a given dom window has a one to one relationship to the dom tree. if the dom node for this access node is "accessible", then a queryinterface to nsiaccessible will succeed. method overview nsiaccessnode getchildnodeat(in long childnum); obsolete since gecko 2.0 nsidomcssprimitivevalue getcomputedstylecssvalue(in domstring pseudoe...
....0 rootdocument nsiaccessibledocument the root document accessible that this access node resides in. read only. uniqueid voidptr a unique id calculated for this dom node, for the purposes of caching and referencing this object. read only. native code only! methods getchildnodeat() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) get the nth child of this node. nsiaccessnode getchildnodeat( in long childnum ); parameters childnum zero-based child index. return value the nth nsiaccessnode child. exceptions thrown ns_error_failure indicates that the access node is unattached from the accessible tree. getcomputedstylecssvalue() retrieve the computed style value as nsidomcssprimitivevalue fo...
nsIAccessibleText
accessible/public/nsiaccessibletext.idlscriptable please add a summary to this article. ...
...ers, its use is discouraged since it could be removed at any time. try to avoid using it. constant value description coord_type_screen 0 coord_type_window 1 methods addselection() void addselection( in long startoffset, in long endoffset ); parameters startoffset endoffset getattributerange() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) get the accessible and start/end offsets around the given offset. this accessible get return the dom node and layout frame with the uniform attributes for this range of text. nsiaccessible getattributerange( in long offset, out long rangestartoffset, out long rangeendoffset ); parameters offset rangestartoffset rangeendoffset return value getcharacteratoffset() it would...
nsIAutoCompleteInput
vent will be dispatched. read only. controller nsiautocompletecontroller the controller. read only. disableautocomplete boolean true if auto-complete is currently disabled; otherwise false. forcecomplete boolean if true, the text field automatically completes to the default result whenever the user hits the enter
key or the text field loses focus. maxrows unsigned long the maximum number of rows to display in the autocomplete suggestion popup. minresultsforpopup unsigned long specifies a minimum number of search results that must be available before the autocomplete popup will open. popup nsiautocompletepopup the view in which...
...o the popup, showing the comment for each autocomplete result. showimagecolumn boolean if true, a column is added to the popup, showing an additional image for each autocomplete result. textvalue astring the value of the text in the autocomplete text field. timeout unsigned long the number of milliseconds after a
keystroke before a search begins. methods getsearchat() returns the name of one of the autocomplete search session objects. acstring getsearchat( in unsigned long index ); parameters index the index number of the search session object whose name is to be returned. return value the name of the specified object. onsearchbegin() called when the search starts. void onsearchbeg...
nsIBrowserSearchService
netwerk/base/public/nsibrowsersearchservice.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) implemented by: @mozilla.org/browser/search-service;1. to access this service, use: var browsersearchservice = components.classes["@mozilla.org/browser/search-service;1"] .getservice(components.interfaces.nsibrowsersearchservice); attempting to use any method or attribute of this interface before init() has completed will force the service to fall back to a slower, synchronous, initialization. this is not an issue if your code is executed in reaction to a user interaction, as initialization is complete b...
... search engine is installed in a global location, this will just hide the engine. if the engine is in the user's profile directory, it will be removed from disk. void removeengine( in nsisearchengine engine ); parameters engine the engine to remove. restoredefaultengines() un-hides all engines installed in the directory corresponding to the directory service's ns_app_search_dir
key. (that is the set of engines returned by getdefaultengines()) void restoredefaultengines(); parameters none. ...
nsICache
eam_based 1 all entries for a cache session are stored as streams of data or as objects. this constant specify that cache session is a stream based entry when calling nsicacheservice.createsession() method. non_blocking 0 the synchronous opencacheentry() may be blocking or non-blocking. if a cache entry is waiting to be validated by another cache descriptor (so no new cache descriptors for that
key can be created), opencacheentry() will return ns_error_cache_wait_for_validation in non-blocking mode. if the cache entry is validated, then a descriptor for that entry will be created and returned. if the cache entry was doomed, then a descriptor will be created for a new cache entry for the
key. blocking 1 the synchronous opencacheentry() may be blocking or non-blocking. in blocking mode, it ...
...return ns_error_cache_wait_for_validation in non-blocking mode. if the cache entry is validated, then a descriptor for that entry will be created and returned. if the cache entry was doomed, then a descriptor will be created for a new cache entry for the
key. blocking 1 the synchronous opencacheentry() may be blocking or non-blocking. in blocking mode, it will wait until the cache entry for the
key has been validated or doomed. if the cache entry is validated, then a descriptor for that entry will be created and returned. if the cache entry was doomed, then a descriptor will be created for a new cache entry for the
key. note: if you think that you might need to modify cached data or meta data, then you must open a cache entry requesting write access. only one cache entry descriptor, per ...
nsICacheService
netwerk/cache/public/nsicacheservice.idlscriptable handles visiting and evicting entries operations along with the creating of cache sessions and creation of temporary client ids operations for offline caching. 66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) this interface is no longer supported and planned to be removed soon: use nsicachestorageservice instead. at the time of writing there is no documentation for nsicachestorageservice but comments are available in the source. note: starting in gecko 2.0, cache i/o is handled asynchronously. method overview nsicachesession createsession(in string clientid, in nscachestoragepolicy storagepolicy, in boolean streambased);...
...ted. evictentries() this method evicts all entries in all devices implied by the storage policy. note: this function may evict some items but will throw if it fails to evict everything. void evictentries( in nscachestoragepolicy storagepolicy ); parameters storagepolicy the cache storage policy. init() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) initialize the cache service. void init(); parameters none. exceptions thrown missing exception missing description shutdown() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) shutdown() the cache service. void shutdown(); parameters none. visitentries() this method visits entries stored in the cache. used to imple...
nsIChannelEventSink
netwerk/base/public/nsichanneleventsink.idlscriptable implement this interface to gain control over various channel events, such as redirects. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) channels will try to get this interface from a channel's notificationcallbacks or, if not available there, from the loadgroup's notificationcallbacks. these methods are called before onstartrequest. note: prior to gecko 2.0, redirect handling was synchronous, using the onchannelredirect() method. starting in gecko 2.0, that method no longer exists, and instead the asynconchannelredirect() method is called; this uses a callback to handle redirects asynchronously. method overview ...
...ect_permanent will always be set. callback object to inform about the async result of this method. exceptions thrown this method can throw any exception; if an exception occurs, the load will be canceled, and no network requests will occur for the new channel. the redirect will be canceled. onchannelredirect() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) called when a redirect occurs. this may happen due to an http 3xx status code. void onchannelredirect( in nsichannel oldchannel, in nsichannel newchannel, in unsigned long flags ); parameters oldchannel the channel that's being redirected. newchannel the new channel. this channel is not opened yet. flags flags indicating the type of redirect. a bitm...
nsIConsoleService
xpcom/base/nsiconsoleservice.idlscriptable the console service is the back-end for the error console, bundled with every mozilla application, and for firefox's web console and browser console. it is used to log various messages, warnings, and errors and to obtain the logged messages. ...
... void logmessage(in nsiconsolemessage message); void logstringmessage(in wstring message); void registerlistener(in nsiconsolelistener listener); void reset(); void unregisterlistener(in nsiconsolelistener listener); methods getmessagearray() to obtain an array of all logged messages. obsolete since gecko 19 (firefox 19 / thunderbird 19 / seamon
key 2.16)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void getmessagearray( [array, size_is(count)] out nsiconsolemessage messages, out pruint32 count ); parameters messages an array of logged messages. count the number of messages in the array. if no messages are logged, this f...
nsICrashReporter
xpcom/system/nsicrashreporter.idlscriptable provides access to crash reporting functionality. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void annotatecrashreport(in acstring
key, in acstring data); void appendappnotestocrashreport(in acstring data); void appendobjcexceptioninfotoappnotes(in voidptr aexception); native code only! void writeminidumpforexception(in voidptr aexceptioninfo); native code only! attributes attribute type description enabled boolean enable or disable the crashreporter at runtime. minidumppath nsilocalfile get or set the path on the local system to which minidumps will be written when a crash happens. excepti...
...braries. exceptions thrown ns_error_failure on get if no url is set. ns_error_invalid_arg on set if a non-http(s) url is assigned. ns_error_not_initialized if crash reporting is not initialized. submitreports boolean user preference for submitting crash reports. methods annotatecrashreport() add some extra data to be submitted with a crash report. void annotatecrashreport( in acstring
key, in acstring data ); parameters
key name of the data to be added. data data to be added. exceptions thrown ns_error_invalid_arg if
key or data contain invalid characters. invalid characters for
key are '=' and '\n'. invalid character for data is '\0'. ns_error_not_initialized if crash reporting not initialized. appendappnotestocrashreport() append some data to the "notes" field, to be subm...
nsIDOMStorageEventObsolete
obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. dom/interfaces/storage/nsidomstorageeventobsolete.idlscriptable this interface represents an event that occurs to notify interested parties about changes to the contents of a dom storage space; it is used for both session storage and local storage. 1.0 66 introduced gecko 1.8 obsolete gecko 2.0 inherits from: nsidomevent last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) when a dom storage event is received, the recipient can check its domain attribute to determine which domain's data store has changed. if t...
...mine which domain's data store has changed. if the value of the domain attribute is "#session", then the session storage has changed. note: this interface describes the old, non-standard form of this event. you should use the nsidomstorageevent interface instead. method overview void initstorageevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in domstring
keyarg, in domstring oldvaluearg, in domstring newvaluearg, in domstring urlarg, in nsidomstorage storageareaarg); attributes attribute type description domain domstring the domain of the storage area which changed, or "#session" if the event represents a change to session storage. read only. methods initstorageevent() initializes a storage event. void ...
nsIDOMStorageManager
dom/interfaces/storage/nsidomstoragemanager.idlscriptable this interface provides methods for managing data stored in the offline apps cache. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) implemented by @mozilla.org/dom/storagemanager;1 as a service: var domstoragemanager = components.classes["@mozilla.org/dom/storagemanager;1"] .getservice(components.interfaces.nsidomstoragemanager); method overview void clearofflineapps(); nsidomstorage getlocalstorageforprincipal(in nsiprincipal aprincipal, in domstring adocumenturi); long getusage(in astring aownerdomain); methods clearofflineapps() clears
keys owned by offline applications. all data ...
...torage getlocalstorageforprincipal( nsiprincipal aprincipal, domstring adocumenturi ); parameters aprincipal the principal for which to return the local storage object. adocumenturi the document's uri. return value the local storage object for the specified principal. getusage() returns the amount of disk space used by a domain. usage is checked against the domain of the page that set the
key (the owner domain), not the domain of the storage object. long getusage( astring aownerdomain ); parameters aownerdomain the domain to check. return value the space usage of the domain, in bytes.see also offline apps dom storage structured client-side storage (html 5 specification) ...
nsIDOMUserDataHandler
dom/interfaces/core/nsidomuserdatahandler.idlscriptable the callback function for the setuserdata method. 1.0 66 introduced gecko 1.5 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void handle(in unsigned short operation, in domstring
key, in nsivariant data, in nsidomnode src, in nsidomnode dst); constants constant value description node_cloned 1 the node was cloned. node_imported 2 the node was cloned into a new document. node_deleted 3 unimplemented node_renamed 4 unimplemented node_adopted 5 the node was adopted into a new document. methods handle() this method is a callback which will be called if a node with user data is being cloned, imported or adopted. void handle( in unsigned short ope...
...cloned 1 the node was cloned. node_imported 2 the node was cloned into a new document. node_deleted 3 unimplemented node_renamed 4 unimplemented node_adopted 5 the node was adopted into a new document. methods handle() this method is a callback which will be called if a node with user data is being cloned, imported or adopted. void handle( in unsigned short operation, in domstring
key, in nsivariant data, in nsidomnode src, in nsidomnode dst ); parameters operation one of the node_* operation type constants from the above table.
key the
key that was used to set the user data. data the data that was set on the original node. src the original node. dst the new node, for clone and import operations. ...
nsIDOMWindowInternal
dom/interfaces/base/nsidomwindowinternal.idlscriptable this interface is part of a chain of interfaces used to represent a window in the dom. 66 introduced gecko 1.0 deprecated gecko 8.0 inherits from: nsidomwindow last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) in gecko 8.0 this interface was merged into the nsidomwindow interface. this interface no longer has any members; it exists solely to prevent add-ons that reference it from failing completely. add-ons should be updated to use nsidomwindow instead. it provides many of the common functions used in javascript such as alert() or open(). note: because most of nsidomwindowinternal's functions and attributes are well documented in window, those articles are linked to rather than re-docum...
... ...
nsIDragService
add-ons should use the standard datatransfer drag and drop api instead. the only exception is getcurrentsession(), since there's currently no way to check for a drag in progress using standard dom methods or properties. ...
...to move the popup being dragged. enddragsession() tells the drag service to end a drag session. this is called when an external drag occurs. void enddragsession( in prbool adonedrag ); parameters adonedrag if adonedrag is true, the drag has finished, otherwise the drag has just left the window. firedrageventatsource() obsolete since gecko 43 (firefox 43 / thunderbird 43 / seamon
key 2.40)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. fire a drag event at the source of the drag. this was changed in gecko 43, see the following section. void firedrageventatsource( in unsigned long amsg ); obsolete since gecko 43 parameters amsg one of the ns_dragdrop_* contants...
nsIEditor
« xpcom api reference editor/nsieditor.idlscriptable provides methods and attributes used when editing page content. ...
...n nsidomdocument doc, in nsipresshellptr shell, obsolete since gecko 5 in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags ); parameters doc the document to observe. shell obsolete since gecko 5.0 the nsipresshellptr representing the presentation shell displaying the document. this parameter was removed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamon
key 2.2). aroot the root of the editable section of this document; if it's null, the editor gets its root from document.body. aselcon the nsiselectioncontroller object used to get selection location information. this should be null for html editors. aflags a bit mask of flags controlling the editor's behavior. need to document what the possible values are. ...
nsIFile
xpcom/io/nsifile.idlscriptable an instance of this interface is a cross-platform representation of a location in the filesystem. inherits from: nsisupports last changed in gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamon
key 2.27) nsifile is the correct platform-agnostic way to specify a file; you should always use this instead of a string to ensure compatibility. with an nsifile you can navigate to ancestors or descendants without having to deal with the different path separators used on different platforms, query the state of any file or directory at the position represented by the nsifile and create, move or copy items in the filesystem. an nsifile can be retrieved by either instantiating an nsilocalfile using a platform specific path string or by using cross-platform location...
...thod tests whether or not this nsifile corresponds to a file or directory that may be modified by the user. as of gecko 9, files on read only shares will return false. files that are exclusively opened on win32 will return true if they are normally writable, and files that don't have write permissions will return false. for specific handling before gecko 9 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6), please see bug 682571. boolean iswritable(); parameters none. return value true if the file or directory may be modified by the user. otherwise it returns false. moveto() this method moves this file to a new location. note: if this method succeeds, this instance will be updated to point to the new file. if the current file path corresponds to a regular file (for storage of bytes),...
nsIFilePicker
widget/nsifilepicker.idlscriptable the file picker component is used to display standard user interface for selecting files and directories, as well as for selecting destinations for, and naming, new files. inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamon
key 2.14) implemented by: @mozilla.org/filepicker;1. to create an instance, use: var filepicker = components.classes["@mozilla.org/filepicker;1"] .createinstance(components.interfaces.nsifilepicker); method overview void appendfilter(in astring title, in astring filter); void appendfilters(in long filtermask); void init(in nsidomwindow parent, in astring title, in short mode); void open(in nsifilepickershowncallback afilepic...
...picker to create. open() opens the file dialog asynchrounously. the passed in object's done method will be called upon completion. void open( in nsifilepickershowncallback afilepickershowncallback ); parameters afilepickershowncallback the nsifilepickershowncallback to be called on completion. show() obsolete since gecko 57.0 (firefox 57.0 / thunderbird 57.0 / seamon
key 2.54) displays the file picker dialog. the dialog is displayed modally. short show(); parameters none. return value one of the return constants. example here's an example: const nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(window, "dialog title", nsifilepicker.m...
nsIHTMLEditor
editor/idl/nsihtmleditor.idlscriptable please add a summary to this article. ...
...void setparagraphformat(in astring aparagraphformat); void updatebaseurl(); attributes attribute type description iscssenabled boolean a boolean which is true is the htmleditor has been instantiated with css knowledge and if the css pref is currently checked. returninparagraphcreatesnewparagraph boolean a boolean indicating if a return
key pressed in a paragraph creates another paragraph or just inserts a <br> at the caret. constants constant value description eleft 0 ecenter 1 eright 2 ejustify 3 methods adddefaultproperty() registers a default style property with the editor. void adddefaultproperty( in nsiatom aproperty, in a...
nsIIdleService
widget/nsiidleservice.idlscriptable the idle service lets you monitor how long the user has been 'idle', that is they have not used their mouse or
keyboard. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 16 (firefox 16 / thunderbird 16 / seamon
key 2.13) you can get the idle time directly, but in most cases you will want to register an observer for a predefined interval. the observer will get an 'idle' notification when the user is idle for that interval (or longer), and receive a 'back' (gecko 3 to 15) or 'active' (gecko 16+) notification when the user starts using their computer again. note: the idle service is for computer-wide idle detection, not just application idle detection. in other words, even if the user is w...
...r, in unsigned long time ); parameters observer the nsiobserver to be removed. time the amount of time they were listening for. example example 1 var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice) settimeout(function() { alert(idleservice.idletime) }, 1000) // if you don't use the mouse or the
keyboard after running this snippet, // you'll see a number around 1000 alerted. example 2 var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice) var idleobserver = { observe: function(subject, topic, data) { alert("topic: " + topic + "\ndata: " + data); } }; idleservice.addidleobserver(idleobserver, 60)...
nsILocalFileMac
xpcom/io/nsilocalfilemac.idlscriptable please add a summary to this article. ...
...tfsspec note: observes the state of the followlinks attribute. if the file object is an alias and followlinks is true, returns the target of the alias. if followlinks is false, returns the unresolved alias file. fsspec getfsspec(); parameters none. return value the fsspec of the file object. native code only!inittoappwithcreatorcode obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. init this object to point to an application having the given creator code. if this app is missing, this will fail. it will first look for running application with the given creator. void inittoappwithcreatorcode( in ostype aappcreator );...
nsILoginManagerCrypto
toolkit/components/passwordmgr/public/nsiloginmanagercrypto.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview astring decrypt(in astring ciphertext); astring encrypt(in astring plaintext); attributes attribute type description isloggedin boolean current login state of the token used for encryption. if the user is not logged in, performing a crypto operation will result in a master password prompt. read only. uibusy boolean true when a master password prompt is being displayed. read only. methods decrypt() decrypts the specified string, returning the plain text value. can throw if the user cancels en...
...eration will result in a master password prompt. read only. uibusy boolean true when a master password prompt is being displayed. read only. methods decrypt() decrypts the specified string, returning the plain text value. can throw if the user cancels entry of their master password, or if the ciphertext value can not be successfully decrypted (for example, if it was encrypted with some other
key). astring decrypt( in astring ciphertext ); parameters ciphertext the string to be decrypted. return value the decrypted string. encrypt() encrypts the specified string, returning the ciphertext value. note: the current implemention of this inferface simply uses nss/psm's "secret decoder ring" service. it is not recommended for general purpose encryption/decryption. can throw if the user ca...
nsIMsgDBViewCommandUpdater
orts in thunderbird this is implemented for different windows in several different places: nsmsgdbviewcommandupdater (for the standalone message window) nsmsgdbviewcommandupdater (for the threadpane message window) nsmsgsearchcommandupdater (for search dialogs) method overview void updatecommandstatus(); void displaymessagechanged(in nsimsgfolder afolder, in astring asubject, in acstring a
keywords); void updatenextmessageafterdelete(); methods updatecommandstatus() called when the number of selected items changes. void updatecommandstatus(); parameters none. displaymessagechanged() called when the displayed message has changed. void displaymessagechanged(in nsimsgfolder afolder, in astring asubject, in acstring a
keywords ); parameters afolder the folder containing s...
...commandstatus() called when the number of selected items changes. void updatecommandstatus(); parameters none. displaymessagechanged() called when the displayed message has changed. void displaymessagechanged(in nsimsgfolder afolder, in astring asubject, in acstring a
keywords ); parameters afolder the folder containing selected message. asubject the subject of the selected message. a
keywords
keywords associated with the selected message. updatenextmessageafterdelete() allows the backend to tell the front end to re-determine which message we should select after a delete or move void updatenextmessageafterdelete(); parameters none. ...
nsIMsgIdentity
the nsimsgidentity interface contains all the personal outgoing mail information for a given person. each identity is identified by a
key, which is the id string in the identity preferences, such as in mail.identity.<id>.replyto. inherits from: nsisupports method overview void clearallvalues(); void copy(in nsimsgidentity identity); astring getunicharattribute(in string name); void setunicharattribute(in string name, in astring value); acstring getcharattribute(in string name); void setcharattribute(in string name, in acstring value); boolean getboolattribute(in string name); void setboolattribute(in string name, in boolean value); long getintattribute(in string name); void setintattribute(in ...
...oryserver astring overrideglobalpref boolean autocompletetomydomain boolean if this is false, don't append the user's domain to an autocomplete address with no matches. valid boolean determines if the ui should use this identity and the wizard uses this to determine whether or not to ask the user to complete all the fields. smtpserver
key astring the preferred smtp server for this identity. if this is set, this is the smtp server that should be used for the message send. requestreturnreceipt boolean readonly: default request for return receipt option for this identity. if this is set, the return receipt menu item on the compose window will be checked. receiptheadertype long readonly: re...
nsIMsgSearchValue
* (range 0-100, 100 is junk) */ attribute unsigned long j...
... * (range 0-100, 100 is junk) */ attribute unsigned long junkperc...
nsINavBookmarkObserver
toolkit/components/places/nsinavbookmarksservice.idlscriptable this interface is an observer for bookmark changes. ...
... this method notifies this observer that an item is about to be removed. it is called before the actual removal takes place. void onbeforeitemremoved( in long long aitemid, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid ); parameters aitemid the ...
nsINavHistoryQueryOptions
toolkit/components/places/nsinavhistoryservice.idlscriptable represents the global options for executing a query. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamon
key 2.10) method overview nsinavhistoryqueryoptions clone(); attributes attribute type description applyoptionstocontainers boolean if true, the query options are only applied to the containers. asyncenabled boolean when true, the root container node generated by these options and all of its descendant containers are opened asynchronously if they support doing so. by default, this is false. ...
.... sort_by_uri_ascending 5 sort by the ascending uri order. sort_by_uri_descending 6 sort by the descending uri order. sort_by_visitcount_ascending 7 sort by the ascending visit count order. sort_by_visitcount_descending 8 sort by the descending visit count order. sort_by_
keyword_ascending 9 sort by the ascending
keyword order. sort_by_
keyword_descending 10 sort by the descending
keyword order. sort_by_dateadded_ascending 11 sort by the ascending added date order. sort_by_dateadded_descending 12 sort by the descending added date order. sort_by_lastmodified_a...
nsINavHistoryService
toolkit/components/places/nsinavhistoryservice.idlscriptable this interface provides complex query functions, more fine-grained getters and setters. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamon
key 2.19) implemented by: "@mozilla.org/browser/nav-history-service;1". to use this service, use: var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); method overview astring getpagetitle(in nsiuri auri); void markpageasfollowedbookmark(in nsiuri auri); void markpageasfollowedlink(in nsiuri auri); void markpageastyped(in nsiuri auri...
...mponents may want to check if this page would go in the history (that is for annotations). boolean canadduri( in nsiuri auri ); parameters auri the uri that needs to be added to the history system. return value returns true if this uri would be added to the history, otherwise returns false. addvisit() obsolete since gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamon
key 2.19) note: this method was removed in gecko 22.0. you should use the new async api moziasynchistory.updateplaces() instead. see this code for how a function to add visits and handle errors using the new api could look like. this method adds a visit for a specific page. this will probably not be commonly used other than for backup/restore type operations. if the uri does not have an ...
nsIObserverService
a particular topic. see example. void notifyobservers( in nsisupports asubject, in string atopic, in wstring somedata ); parameters asubject a notification specific interface pointer. this usually corresponds to the source of the notification, but could be defined differently depending on the notification topic and may even be null. atopic the notification topic. this string-valued
key uniquely identifies the notification. this parameter must not be null. somedata a notification specific string value. the meaning of this parameter is dependent on the topic. it may be null. removeobserver() this method is called to unregister an observer for a particular topic. void removeobserver( in nsiobserver anobserver, in string atopic ); parameters anobserver the nsiobserv...
...otification specific string value. the meaning of this parameter is dependent on the topic. it may be null. removeobserver() this method is called to unregister an observer for a particular topic. void removeobserver( in nsiobserver anobserver, in string atopic ); parameters anobserver the nsiobserver instance to remove. atopic the notification topic or subject. this string-valued
key uniquely identifies the notification. this parameter must not be null. example this notifies all nsiobservers watching the "mytopicid" topic with an additional data parameter. components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice) .notifyobservers(null, "mytopicid", "someadditionalinformationpassedas'data'parameter"); ...
nsIProperties
inherits from: nsisupports last changed in gecko 1.2 implemented by: @mozilla.org/file/directory_service;1. to get an instance, use: var properties = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties); method overview void get(in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result); void get
keys(out pruint32 count, [array, size_is(count), retval] out string
keys); boolean has(in string prop); void set(in string prop, in nsisupports value); void undefine(in string prop); methods get() gets the xpcom object associated with a particular name. void get( in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result ); parameters prop the property name. iid the ...
...ct associated with a particular name. void get( in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result ); parameters prop the property name. iid the desired interface. result the resulting object instance. exceptions thrown ns_error_failure if the property does not exist. ns_error_no_interface if the property exists, but does not support the requested interface. get
keys() returns an array of property names. nsmemory.h defines the macro ns_free_xpcom_allocated_pointer_array, which can be used to free a
keys when it is no longer needed. void get
keys( out pruint32 count, [array, size_is(count), retval] out string
keys ); parameters count the length of the result array.
keys the resulting array of
keys. has() tests if a property exists. boolean has( in stri...
nsIPropertyBag2
nsivariant get( in astring prop ); parameters prop property to return the value of. return value the property value as an nsivariant. getpropertyasacstring() acstring getpropertyasacstring( in astring prop ); parameters prop property to return the value of. ...
... return value the property value as a pruint32. note: accessing a property of a different type may attempt conversion to this type. getpropertyasuint64() pruint64 getpropertyasuint64( in astring prop ); parameters prop property to return the value of. return value the property value as a pruint64. note: accessing a property of a different type may attempt conversion to this type. has
key() check for the existence of a
key. prbool has
key( in astring prop ); parameters prop property to check for
key existence. return value true if a
key for the property exists, false if it does not. ...
nsIPushService
nsipushservice supports the push api implementation in firefox, and can be used directly from privileged code to create system subscriptions. ...
... .getservice(ci.nsipushservice); pushservice.subscribe( "chrome://my-module/push", scriptsecuritymanager.getsystemprincipal(), (code, subscription) => { if (!components.issuccesscode(code)) { cu.reporterror("error creating subscription: " + code); return; } // `subscription` implements `nsipushsubscription`. subscription.endpoint; subscription.get
key("p256dh"); subscription.get
key("auth"); } ); getsubscription() fetches an existing subscription. void getsubscription( in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback ); parameters scope the unique scope url, as passed to nsipushservice.subscribe(). principal the subscription nsiprincipal, as passed to nsipushservice.subscribe(). cal...
nsIResumableChannel
netwerk/base/public/nsiresumablechannel.idlscriptable this interface is meant to be implemented by the channels that support resuming broken downloads (for example necko's html and ftp channels). inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void asyncopenat(in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid); obsolete since gecko 1.8 void resumeat(in unsigned long long startpos, in acstring entityid); attributes attribute type description entityid acstring the entity id for this uri. available after onstartrequest. read only. exceptions thrown ns_error_not_resumable if this load is not resumable. methods asyncopenat() ...
...e gecko 1.8 void resumeat(in unsigned long long startpos, in acstring entityid); attributes attribute type description entityid acstring the entity id for this uri. available after onstartrequest. read only. exceptions thrown ns_error_not_resumable if this load is not resumable. methods asyncopenat() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) open this channel, and read starting at the specified offset. the request given to the nsistreamlistener will be qiable to nsiresumableinfo. void asyncopenat( in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid ); parameters listener as for asyncopen. ctxt as for asyncopen. startpos the starting offset, in bytes, ...
nsIScreen
widget/nsiscreen.idlscriptable this interface provides information about a display screen. inherits from: nsisupports last changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamon
key 2.10) use nsiscreenmanager to obtain references to screens. implemented by: @mozilla.org/gfx/screenmanager;1 as a service: var screen = components.classes["@mozilla.org/gfx/screenmanager;1"] .getservice(components.interfaces.nsiscreen); method overview void getavailrect(out long left, out long top, out long width, out long height); void getrect(out long left, out long top, out long width, out long height); void lockminimumbrightness(in unsigned long brightness); void unlockminimumbrightness(in unsigned long brightness); attributes ...
...onstants screen brightness constants constant value description brightness_dim 0 the screen is fully dimmed (that is, off). brightness_full 1 the screen is at full brightness. brightness_levels 2 the number of different brightness levels. screen rotation constants requires gecko 13.0(firefox 13.0 / thunderbird 13.0 / seamon
key 2.10) constant value description rotation_0_deg 0 0° of rotation (that is, no rotation, or default orientation). rotation_90_deg 1 90° of rotation. rotation_180_deg 2 180° of rotation. rotation_270_deg 3 270° of rotation. methods getavailrect() returns a rectangle indicating the portion of the screen that is ava...
nsIScriptError2
e represents javascript errors and warnings for use by the console service; augments nsiscripterror by adding a way to initialize the error with the window id of the outer window with which the error is associated. 1.0 66 introduced gecko 2.0 obsolete gecko 12.0 inherits from: nsiscripterror last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6) in gecko 12.0 this interface was merged into the nsiscripterror interface. method overview void initwithwindowid(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindowid); attributes attribute type description ...
...g to the problem character. flags one of the script error flag constants. category a string indicating what kind of code caused the message. there are quite a few category strings and they don't seem to be listed in a single place. see categories for a partial list. innerwindowid the id of the inner window associated with the error. prior to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6), this was the outer window id. ...
nsIScriptableIO
nsiuri newuri(in nsivariant auri); methods getfile() retrieves a reference to a file or directory on disk. the file does not have to exist already; this method simply creates the file reference which may then be passed to the newinputstream() or newoutputstream() method to open the file for reading or writing. files are located by starting at a known directory, specified using a location
key string. for example, if the location
key is specified as "desk" and the file name is specified as "foo.txt", the file reference generated will refer to a file named "foo.txt" on the user's desktop. note: the filename may only be the name of a file. if you need to select a file in a subdirectory, you should get a reference to the directory, then use the file's append() method to navigate through t...
...he directory, then use the file's append() method to navigate through the directory hierarchy to the file you really want. this properly allows platform-independent path construction. you may specify an empty filename string if you wish to get a reference to the directory itself. nsifile getfile( in astring alocation, in astring afilename ); parameters alocation a location
key identifying a known standard directory. the afilename parameter is treated as being local to this directory. afilename the relative path of the file to generate a reference for. return value returns an nsifile object referencing the specified file location. exceptions thrown ns_error_invalid_arg alocation was null. getfilewithpath() returns a file reference using an...
nsISelection
implemented by: ?????????????????????????????????????. ...
... range from the current selection. void removerange( in nsidomrange range ); parameters range selectallchildren() adds all children of the specified node to the selection. void selectallchildren( in nsidomnode parentnode ); parameters parentnode the parent of the children to be added to the selection. selectionlanguagechange() modifies the cursor bidi level after a change in
keyboard direction. void selectionlanguagechange( in boolean langrtl ); parameters langrtl is pr_true if the new language is right-to-left or pr_false if the new language is left-to-right. tostring() returns the whole selection into a plain text string. domstring tostring(); remarks see also ...
nsISelectionPrivate
this page wasn't updated since the initial import in 2011. see the idl file linked above for up-to-date information. ...
.... allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. resultcount returns the number of ranges that overlap (or touch) the input range. results returns the ranges that overlap (or touch) the input range. native code only!getrangesforintervalcomarray obsolete since gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this method became obsolete in gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9). use getrangesforintervalarray() instead. void getrangesforintervalcomarray( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode...
nsISessionStartup
browser/components/sessionstore/nsisessionstartup.idlscriptable handles the session restore process. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5) implemented by: @mozilla.org/browser/sessionstartup;1. to use this service, use: var sessionstartup = components.classes["@mozilla.org/browser/sessionstartup;1"] .getservice(components.interfaces.nsisessionstartup); method overview boolean dorestore(); attributes attribute type description sessiontype unsigned long the type of session being restored; this will be one of the session type constants. read only. state jsval the session state, as a javascript object. read only. note: prior to gec...
... .getservice(components.interfaces.nsisessionstartup); method overview boolean dorestore(); attributes attribute type description sessiontype unsigned long the type of session being restored; this will be one of the session type constants. read only. state jsval the session state, as a javascript object. read only. note: prior to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5), this was a string. it was changed in order to improve performance, which was suffering due to the need to parse and stringify the data. constants session type constants constant value description no_session 0 there's no data available from the previous session. recover_session 1 the last session crashed. it will either be restored or about:sessionrestore will be displayed. re...
nsISmsDatabaseService
nsismsdatabaseservice dom/sms/interfaces/nsismsdatabaseservice.idlscriptable used to store and manage sms text messages for the websms api 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamon
key 2.12) implemented by: @mozilla.org/sms/smsdatabaseservice;1. to create an instance, use: var smsservice = components.classes["@mozilla.org/sms/smsdatabaseservice;1"] .createinstance(components.interfaces.nsismsdatabaseservice); method overview long savereceivedmessage(in domstring asender, in domstring abody, in unsigned long long adate); long savesentmessage(in domstring areceiver, in domstring abody, in unsigned long long adate); void getmessage(in long messageid, ...
...stid a number representing the id of the message list. requestid a number representing the id of the request. processid optional a number representing the id of the process. clearmessagelist() void getnextmessageinlist( in long listid, ); parameters listid a number representing the id of the message list. markmessageread() requires gecko 15.0(firefox 15.0 / thunderbird 15.0 / seamon
key 2.12) void markmessageread( in long messageid, in boolean value, in long requestid, [optional] in unsigned long long processid ); parameters messageid a number representing the id of the message. value a boolean indicating whether a message is read or unread. requestid a number representing the id of the request. processid optional a number representing the id of the process. ...
nsISocketTransportService
ayer proxy type to use. set to null if no proxy should be used. for more details on communicating information about proxies like socks (which are transparent to upper protocols), see nsiproxiedprotocolhandler , nsiprotocolproxyservice or proxies in necko. return value an nsisockettransport containing the sockettransport. init() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) void init(); parameters none. native code only! notifywhencanattachsocket if the number of sockets reaches the limit, then consumers can be notified when the number of sockets becomes less than the limit. the notification is asynchronous, delivered via the given nsirunnable instance on the socket transport thread. note: this function may only be called from an event dispatch on the ...
...delivered via the given nsirunnable instance on the socket transport thread. note: this function may only be called from an event dispatch on the socket thread. void notifywhencanattachsocket( in nsirunnable aevent ); parameters aevent event that will receive the notification when a new socket can be attached. shutdown() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) void shutdown(); parameters none. example // at first, we need a nsisockettransportservice .... var transportservice = components.classes["@mozilla.org/network/socket-transport-service;1"] .getservice(components.interfaces.nsisockettransportservice); // ... then it is time to create the transport. it will connect to ... // ... mozilla.org:2000 with tls support and defa...
nsIStringBundleService
mplemented by: @mozilla.org/intl/stringbundle;1. to access this service, use: var stringbundleservice = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice); method overview nsistringbundle createbundle(in string aurlspec); nsistringbundle createextensiblebundle(in string aregistry
key); void flushbundles(); wstring formatstatusmessage(in nsresult astatus, in wstring astatusarg); methods createbundle() nsistringbundle createbundle( in string aurlspec ); parameters aurlspec the url of the properties file to load. this is typically a locale url, e.g. chrome://global/locale/global.properties return value a string bundle corresponding to the pr...
...lly a locale url, e.g. chrome://global/locale/global.properties return value a string bundle corresponding to the properties file. this string bundle has functions available on it. on the return value object on you can call functions like getstringfromname and formatstringfromname see nsistringbundle. createextensiblebundle() nsistringbundle createextensiblebundle( in string aregistry
key ); parameters aregistry
key the name of the category under which the properties file(s) have been registered. return value an extensible bundle corresponding to the properties file(s). flushbundles() flushes the string bundle cache - useful when the locale changes or when we need to get some extra memory back. (automatically called for the memory-pressure and chrome-flush-caches global ...
nsIToolkitProfileService
toolkit/profile/public/nsitoolkitprofileservice.idlscriptable the profile service manages user profiles. inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) note: starting in gecko 1.9.1, this service is implemented by @mozilla.org/toolkit/profile-service;1. to access the service, you can use the following code: var toolkitprofileservice = components.classes["@mozilla.org/toolkit/profile-service;1"] .createinstance(components.interfaces.nsitoolkitprofileservice); prior to gecko 1.9.1 only the built-in profile manager was able to access the toolkit profile service. to access the built-in profile manager in versions of firefox up to 4.0 and thunderbird up to 3.3 you can launch with the -profileman...
... of firefox up to 4.0 and thunderbird up to 3.3 you can launch with the -profilemanager command line flag. future versions will require the separate profile manager application. warning: this service is synchronous so it is recommended that you use os.file to find the profile directory via os.constants.path.profiledir. os.file is available from gecko 18 (firefox 18.0 / thunderbird 18.0 / seamon
key 2.15). method overview nsitoolkitprofile createprofile(in nsilocalfile arootdir, in autf8string aname); void flush(); nsitoolkitprofile getprofilebyname(in autf8string aname); nsiprofilelock lockprofilepath(in nsilocalfile adirectory, in nsilocalfile atempdirectory); attributes attribute type description profilecount unsign...
nsITreeColumns
he nsitreecolumns interface represents the tree columns. layout/xul/base/src/tree/public/nsitreecolumns.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview nsitreecolumn getcolumnat(in long index); nsitreecolumn getcolumnfor(in nsidomelement element); nsitreecolumn getfirstcolumn(); nsitreecolumn get
keycolumn(); nsitreecolumn getlastcolumn(); nsitreecolumn getnamedcolumn(in astring id); nsitreecolumn getprimarycolumn(); nsitreecolumn getsortedcolumn(); void invalidatecolumns(); void restorenaturalorder(); attributes attribute type description count long the number of columns. read only. length long an alias for count (for the benefit of scripts which treat this as an array)...
...ters index index of the column return value a nsitreecolumn for this index. getcolumnfor() get the column for a given element. nsitreecolumn getcolumnfor( in nsidomelement element ); parameters element a dom element return value a nsitreecolumn for this element. getfirstcolumn() get the first column. nsitreecolumn getfirstcolumn(); parameters none. return value the first nsitreecolumn. get
keycolumn() get the
key column. nsitreecolumn get
keycolumn(); parameters none. return value the
key nsitreecolumn. getlastcolumn() get the last column. nsitreecolumn getlastcolumn(); parameters none. return value the last nsitreecolumn. getnamedcolumn() get a column for a given name. nsitreecolumn getnamedcolumn( in astring id ); parameters id a column id return value the nsitreecolumn for thi...
nsIURL
netwerk/base/public/nsiurl.idlscriptable this interface provides convenience methods that further break down the path portion of nsiuri. ...
...ng path including the directory and file portions of a url. for example, the filepath of "http://host/foo/bar.html#baz" is "/foo/bar.html". some characters may be escaped. param autf8string parameters specified after the ; in the url. some characters may be escaped. obsolete since gecko 9.0 note: this was removed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6) because the semicolon is not actually valid for this purpose and should not have been specially handled. query autf8string query portion (the part after the "?") of the url. if there isn't one, an empty string is returned. some characters may be escaped. ref autf8string reference portion (the part after the "#") of the url. if there isn't one, an empty strin...
nsIXULAppInfo
xpcom/system/nsixulappinfo.idlscriptable this interface provides information about the host application. it can be used to distinguish between different mozilla-based applications. it provides application name, application version, gecko version and more. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) in xulrunner applications nsixulappinfo obtains app-specific information from application.ini. implemented by: @mozilla.org/xre/app-info;1. to create an instance, use: var xulappinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); the nsixulruntime interface is also implemented by "xre/app-info". it contains advanced in...
... this has traditionally been in the form "{aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee}" but for new applications a more readable form is encouraged: "appname@vendor.tld". only the following characters are allowed: a-z a-z 0-9 - . @ _ { } * read only. name acstring the name of the application. this must be ascii, and is normally mixed-case, for example "firefox", "thunderbird" or "seamon
key". must not be null or an empty string. read only. platformbuildid acstring the build id/date of gecko and the xulrunner platform. read only. platformversion acstring the version of gecko or xulrunner platform, for example "1.8.1.19" or "1.9.3pre". in "firefox 3.7 alpha 1" the application version is "3.7a1pre" while the platform version is "1.9.3pre" read only. ...
nsIXULSortService
content/xul/templates/public/nsixulsortservice.idlscriptable a service used to sort the contents of a xul widget. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void insertcontainernode(in nsirdfcompositedatasource db, in nsrdfsortstate sortstateptr, in nsicontent root, in nsicontent trueparent, in nsicontent container, in nsicontent node, in boolean anotify); native code only! obsolete since gecko 1.9 void sort(in nsidomnode anode, in astring asort
key, in astring asorthints); constants constant value description sort_comparecase 0x0001 sort_integer 0x0100 methods native code only!insertcontainernode obsolete since gecko 1.9 (firefox 3)this feature is obsolete. although it may still work i...
...used internally for insertion sorting. void insertcontainernode( in nsirdfcompositedatasource db, in nsrdfsortstate sortstateptr, in nsicontent root, in nsicontent trueparent, in nsicontent container, in nsicontent node, in boolean anotify ); parameters db sortstateptr root trueparent container node anotify sort() sort the contents of the widget containing anode using asort
key as the comparison
key, and asorthints as how to sort. void sort( in nsidomnode anode, in astring asort
key, in astring asorthints ); parameters anode a node in the xul widget whose children are to be sorted. asort
key the value to be used as the comparison
key. asorthints one or more hints as to how to sort: ascending: sort the contents in ascending order descending: sort the contents in d...
nsIZipReader
modules/libjar/nsizipreader.idlscriptable this interface provides methods for reading compressed (zip) files. inherits from: nsisupports last changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7) implemented by: @mozilla.org/libjar/zip-reader;1. ...
...eateinstance(components.interfaces.nsizipreader); about character sets and code pages note: nsizipreader has a code page problem; that is, in the zip specification, filenames are supposed to use 7-bit ascii; however, most modern filesystems use 8 bit code pages, such as utf-8. this can mismatch characters in the nsizipreader api. starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7), the nsizipreader api supports a limited 8 bit code page usage. all functions now pass the filenames (both in and out) as autf8string. so you can now read and extract what you wrote with nsizipwriter. if you show filenames from the findentries() result in the user interface, the character matching is only fine on utf-8 zip archives. method overview void close(); void e...
nsMsgSearchAttrib
const...
...10; /* result list only */ const nsmsgsearchattribvalue message
key = 11; /* message result elems */ const nsmsgsearchattribvalue ageindays = 12; const nsmsgsearchattribvalue folderinfo = 13; /* for "view thread context" from result */ const nsmsgsearchattribvalue size = 14; const nsmsgsearchattribvalue anytext = 15; const nsmsgsearchattribvalue
keywords = 16; //
keywords are the internal representation of tags. const nsmsgsearchattribvalue name = 17; const nsmsgsearchattribvalue displayname = 18; const nsmsgsearchattribvalue nickname = 19; const nsmsgsearchattribvalue screenname = 20; const nsmsgsearchattribvalue email = 21; const nsmsgsearchattribvalue additionalemail = 22; const nsmsgsearchattribvalue ...
nsIMsgSearchValue
* (range 0-100, 100 is junk) */ attribute unsigned long j...
... * (range 0-100, 100 is junk) */ attribute unsigned long junkperc...
Weak reference
// ...or append this to the list of observers return ns_ok; } nsresult nsobservable::notifyobservers( nsimessage* amessage ) { nscomptr<nsiobserver> observer = do_queryreferent(mobserver); if ( observer ) observer->noticemessage(amessage); else mobserver = 0; // or remove this observer from the list, he's gone away return ns_ok; } // ... it's
key to note that an nsweakptr has exactly the same interface as an nscomptr. in fact, nsweakptr is defined like this typedef nscomptr<nsiweakreference> nsweakptr; well this sucks! by now you've probably noticed that this particular weak reference implementation doesn't give you exactly the interface you were hoping for. why can't i just directly call my interfaces methods on the weak reference? ...
...erence can't be aggregated to the target object. hence, we can't use queryinterface to move between them. i know this sounds more convenient, but the global routine ns_getweakreference makes it easy to go from the target object to the weak reference; and nsiweakreference::queryreferent gives you the same functionality as queryinterface for getting back. additionally, nscomptr now supports the new
key do_queryreferent to simplify life even further. how do i make a class support weak references? in javascript, just make sure that your queryinterface method returns your object for the nsisupportsweakreference interface, and you're set; xpconnect does all the work for you. just roll in nssupportsweakreference, a mix-in class that does all the work, and adjust your queryinterface accordingly, e...
XPIDL
avascript properties, in that they are a getter and (optionally) a setter pair. in javascript contexts, attributes are exposed as a regular property access, while native code sees attributes as a get and possibly a set method. attributes can be declared readonly, in which case setting causes an error to be thrown in script contexts and native contexts lack the set method, by using the "readonly"
keyword. to native code, on attribute declared 'attribute type foo;' is syntactic sugar for the declaration of two methods 'type getfoo();' and 'void setfoo(in type foo);'. if foo were declared readonly, the latter method would not be present. attributes support all of the properties of methods with the exception of optional_argc, as this does not make sense for attributes. there are some special r...
... call release. for inout parameters, the callee must clean up the old data if it chooses to replace it. buffers must be deallocated with ns_free, and interface pointers must be release'd. afterwards, the above rules for out apply. shared out-parameters should not be freed, as they are intended to refer to constant string literals. resources (mostly outdated) some unsorted notes including a
keyword list xpidl is a tool for generating c++ headers, java interfaces, xpconnect typelibs, and html documentation from xpidl files generating xpt files on windows a google groups post with instructions on how to use variable-length argument lists using xpidl. ...
XUL Overlays
ibute. thus, given the following base: ... <menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> </menupopup> </menu> ... and given the following overlay: <?xml version="1.0"?> <overlay id="singleitemex" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_filepopup"> <menu id="file_menu"> <menuitem name="super stream player"/> </menu> </menupopup> </overlay> the result will be: ... <menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> <menuitem name="super stream player"/> </m...
...ide a hint for insertion into the master document. in the following example, the last menu item, example four, will be placed just after the "new" menu item instead of being appended to the end of the menu like the other kids. <overlay id="main-overlay" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <menu id="file_menu"> <menuitem name="example one"/> <menuitem name="example two"/> <menuitem name="example three"/> <menuitem name="example four" position="1"/> </menu> </overlay> the node with the position attribute orders itself to the top of the menu. the position can also be given for nodes in overlay files that will be ordered in a group of sim...
Address Book examples
address book interfaces provides an overview of the related interfaces. see an overview of thunderbird components for a general description of the thunderbird user interface and related programmatic interfaces. how do i get all address books? use the address book manager to get an nsisimpleenumerator, then progress through the enumerator, looking for nsiabitem, nsiabcollection or nsiabdirectory interfaces as you require. ...
..." both use the toolkit interfaces to provide autocomplete facilities. to use them in code all you need to do is set up your text box as follows: <textbox id="myautocompletetextbox" type="autocomplete" autocompletesearch="mydomain addrbook"/> the attributes of the toolkit autocomplete element can also be used here. the "mydomain" and "addrbook" behaviours can be changed by passing an identity
key (see nsimsgidentity.
key) via an attribute autocompletesearchparam on the textbox element. ldap autocomplete ldap autocomplete still uses the xpfe interfaces, it is planned (bug 452232) to move this over to the toolkit interfaces at some stage. the best example of how to use this is via the existing code that can be found here. click here for a addon demonstrating autocomplete with ldap and ad...
Mail client architecture overview
re stored in one file, the berkeley mailbox format is used. datasources - datasources are the glue code that reflect mail data such as folders and messages into rdf. rdf will use the datasource to create user interfaces based on this data. datasources are also used to run commands that operate on this mail data. events - as data changes throughout the mail application, the event system notifies
key components such as datasources and the url system of these changes. mail window management - each mail window maintains a certain amount of state to aid in view navigation, progress display, etc. url display and dispatching - in order to perform network operations such as downloading new mail, copying and moving messages, and displaying messages from a remote server, the url system interacts wi...
...mail window. there are also a number of protocol independant subsystems that have a symbiotic relationship with base: libmime - for dealing with rfc822 messages and their mime parts. this library has the cabability to stream messages to an html renderer such as gecko, manage individual parts of messages, and so forth. msgdb - a message database for a given folder is a summary of some of the
key attributes in a folder such as the author and subject. finally, there are larger modules outside of the mail client that are mail-oriented. most of these modules have little dependancy on the mail reader itself: compose - the mail compose module is responsible for anything that has to do with sending mail. this includes the mail compose window, creation of rfc822 messages from the data a use...
Main Windows
ird is messenger.xul: messenger.xul itself doesn’t contain a lot. its main focus is on handling the folderpane, threadpane, and the message preview sections shown above. the rest is loaded from overlays: mailwindowoverlay.xul this is the red sections shown in the interface above (where?), including the toolbars, notification bars, and the status bar, but also includes most of the commands,
keysets, and context menus of thunderbird, along with a whole lot of javascript. mailoverlay.xul a really small overlay that only adds a few “new message” and “new card” commands to the menus, along with their associated javascript. msghdrviewoverlay.xul shown in blue above (where?), this overlay consists of three boxes. two are stacked showing either a brief or expanded view of the heade...
...t exactly the same as messenger.xul in terms of overlays, but just lacks the folder and threadpanes normally shown. menus, toolbar buttons, and headers are all taken from exactly the same overlays listed above though. mailwindowoverlay.xul this is the red sections shown in the interface above, including the toolbars, notification bars and the status bar.it also includes most of the commands,
keysets, and context menus of thunderbird, along with a whole lot of javascript. msghdrviewoverlay.xul shown in blue above, this overlay consists of three boxes. two are stacked showing either a brief or expanded view of the headers. the third is the attachment box which can be toggled into a slim or an expanded view basemenuoverlay.xul contains the contents of most of the menus (i.e. file, edit,...
Add Option to Context Menu
assuming this on chrome.manifest: overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myext/content/thunderbird-overlay.xul add the next in thunderbird-overlay.xul. ...
... xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </popup> </overlay> for thunderbird 2 and 3 in the same xpi if our extension needs to support thunderbird 2 and 3 we need to make custom overlays for each version. this can be reached by adding these ...
Using Mozilla code in other projects
there are also modules that aren't used in firefox but are available for use by other applications; an example of this is rhino, the javascript engine written in java. ...
...ference to xul. xulrunner a mozilla runtime package that can be used to bootstrap xul and xpcom applications with ease. mozilla toolkit information about the mozilla toolkit api. signing mozilla apps for mac os x how to code-sign applications based on mozilla code for mac os x's application security model. using mozilla components spidermon
key spidermon
key is the javascript runtime engine used by mozilla projects. nspr the netscape portable runtime provides a platform-neutral api for system level and libc-type functions. necko the mozilla networking library provides cross-platform networking functionality. embedding mozilla for information on embedding a web browser into your own application se...
Working with windows in chrome code
it has a more useful example opener code: window.opendialog("chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementbyid("progressmeter"); if("arguments" in window && window.arguments.length > 0) { maxprogress = window.arguments[0].maxprogress; setprogress(window.arguments[0].progress); ...
...books about creating xpcom components online. using fuel application object the fuel library has been deprecated as of firefox 41 the fuel javascript library has a simple method for sharing data between windows. the application object supports a storage property which can be used to store data globally. this method is a simplified form of the xpcom singleton method. application.storage.set(
keyname, data); var data = application.storage.get(
keyname, default); where:
keyname is a string used to identify the data data is the data default is the data value to return if
keyname does not exists pros: its the "right way". you can store arbitrary javascript objects in the component. the scope is not shared between components, so you don't have to worry about nam...
Plug-in Basics - Plugins
s that range from personal information managers to games the range of possibilities for using plug-in technology seems boundless, as shown by the growing numbers of independent software vendors who are creating new and innovative plug-ins. with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive
keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page. go to the help menu, and clic...
...n a gecko-based browser starts up, it checks certain directories for plug-ins, in this order: windows directory pointed to by moz_plugin_path environment variable. %appdata%\mozilla\plugins, where %appdata% denotes per-user application data directory. plug-ins within toolkit bundles. profile directory\plugins, where profile directory is a user profile directory. directories pointed to by h
key_current_user\software\mozillaplugins\*\path registry value, where * can be replaced by any name. directories pointed to by h
key_local_machine\software\mozillaplugins\*\path registry value, where * can be replaced by any name. mac os x ~/library/internet plug-ins. /library/internet plug-ins. /system/library/frameworks/javavm.framework/versions/current/resources. plug-ins within toolkit bu...
Plug-in Development Overview - Plugins
from the server can also be sent to a particular browser window or frame for display, or delivered to the plug-in instance in a new stream. the npn_posturlnotify function operates like npn_posturl, except that it notifies the plug-in of the result when the operation completes. for information about using these methods, see urls. starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7), you can get the origin of the document in a secure, convenient way by calling npn_getvalue() to retrieve the value of the variable npnvdocumentorigin. the returned value is the unicode serialization of the document's origin converted to nfkc-encoded (that is, normalized) utf-8. your plug-in must free the returned string's memory by calling npn_memfree() when you're done with it. getting ve...
...plug-in-identifier should follow the specification): hklm/software/mozillaplugins/plugin-identifier descripton: reg_sz "description of the plugin" path: reg_sz "c:\..path to the plugin.dll" productname: reg_sz "the plugin name" vendor: reg_sz "the plugin author/vendor" version: reg_sz "0.5.whatever plugin version string" hklm/software/mozillaplugins/plugin-identifier/mimetypes add a sub-
key for each mime type the plugin supports, with no values install to known locations on linux and mac on linux and mac, plug-ins are installed to well-known locations: linux: /usr/lib/mozilla/plugins or /usr/lib64/mozilla/plugins mac: /library/internet plug-ins or ~/library/internet plug-ins ...
Preferences System
xul elements and attributes. ...
...dow id="apppreferences" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> .. ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" access
key="&check1.access
key;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay. you should be careful to read the higs for the platforms you are targeting and use the xul preprocessor if necessary to set different window...
3D view - Firefox Developer Tools
can click on elements to see their html in the html panel or the style panel. conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3d view. if you do not see the 3d button in the page inspector, it is possible that your graphics driver needs to be updated. see the blocklisted drivers page for more information. ...
...ly, you can click on elements in the breadcrumb bar to change which element is selected in the 3d view. if you do not see the 3d button in the page inspector, it is possible that your graphics driver needs to be updated. see the blocklisted drivers page for more information. controlling the 3d view there are
keyboard shortcuts and mouse controls available for the 3d view. ...
Browser Toolbox - Firefox Developer Tools
ebugging". to do this, open the developer tools settings, go to the section "advanced settings", and check the settings "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging". opening the browser toolbox open the browser toolbox through the menu button and the menu items "developer" then "browser toolbox". you can also open it with the ctrl + alt +shift + i
key combination ( cmd + opt +shift + i on a mac). you will be presented with a dialog like this (it can be removed by setting the devtools.debugger.prompt-connection property to false): click ok, and the browser toolbox will open in its own window: you'll be able to inspect the browser's chrome windows and see, and be able to debug, all the javascript files loaded by the browser itself and by any ...
...me selection popup lists when there are two browser windows open, one with one content tab, and one with two: debugging popups it's hard to debug popups, because the browser hides them as soon as you click outside them. there is a way to disable this behavior. click the toolbox menu and select disable popup auto-hide. now when you open any popup, it will stay open until you press the esc
key. you can use the inspector's node picker to select that panel, and examine and modify its content: you can use the same technique to debug popups created by add-ons. note: this change is not persistent across browser restarts. when you close the browser toolbox, the setting will be cleared. ...
Set event listener breakpoints - Firefox Developer Tools
t breakpoint to use an event breakpoint, you open up the javascript debugger, and find and expand the event listener breakpoints section in the right hand column. to break when event listeners are hit, check the boxes next the events you are interested in. all of the standard events supported in your version of firefox are listed, arranged by which api or api area they're part of. now when a
keydown,
keyup,
keypress, or input event occurs, execution will pause as soon as it enters the listener code. when execution pauses, the source pane displays the highlighted line of the javascript code that is next to be executed, along with the surrounding code for context. in addition, you get a box overlaid on the viewport saying "paused on event breakpoint", with buttons to step over that line...
...he code or watch the console to see what happens. logging on events in firefox 71 onwards, the “log” checkbox is available in the event listener breakpoints list. selecting this and then choosing some events to break on will mean that when you step through code, information about events fired will be logged to the console instead of the devtools breaking on each one. so if we choose to log
keyboard events, for example, the code no longer pauses as each event is fired: instead, we can then switch to the console, and whenever we press a
key we are given a log of where related events were fired. there's an issue here — the console is showing that the
keypress event is being fired somewhere inside jquery. instead, it’d be far more useful if we showed where in our own app code is ...
Debugger.Environment - Firefox Developer Tools
local environment is parented by its enclosing environment (in ecmascript terms, its ‘outer’ environment). we say an environmentbinds an identifier if that environment itself associates the identifier with a variable, independently of its outer environments. we say an identifier isin scope in an environment if the identifier is bound in that environment or any enclosing environment. ...
... variable, independently of its outer environments. we say an identifier isin scope in an environment if the identifier is bound in that environment or any enclosing environment. spidermon
key creates debugger.environment instances as needed as the debugger inspects stack frames and function objects; calling debugger.environment as a function or constructor raises a typeerror exception. spidermon
key creates exactly one debugger.environment instance for each environment it presents via a given debugger instance: if the debugger encounters the same environment through two different routes (perhaps two functions have closed over the same environment), spidermon
key presents the same debugger.environment instance to the debugger each time. this means that the debugger can use the == operator to r...
DOM allocation example - Firefox Developer Tools
dom-allocs/alloc.html. ...
...th.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton = document.createelement("span"); toolbarbutton.classlist.add("toolbarbutton"); // stop spidermon
key from sharing instances toolbarbutton[getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar = document.createelement("div"); // stop spidermon
key from sharing instances toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var toolbarbutton = createtoolbarbutton(); toolbar.appendchild(toolbarbutton); } return toolbar; } function createtoolbars() { var container = document.getelementbyid("container"); for (var i = 0; i < toolbarcount; i++) { var toolbar = createtoolbar(); containe...
Network request details - Firefox Developer Tools
erwise, this field is not shown. response headers the response headers section shows details about the response. for each line in the response headers section, a question mark links to the documentation for that response header, if one is available. a raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text. note that the
keys in the response header are all in lowercase, while the request headers
keys are not. http/2 requires that all headers be lowercase; response headers are shown as they are received from the server. (there may be some exceptions, such as x-firefox-spdy, which is added by firefox.) you can copy some or all of the response header in json format by using the context menu: if you select copy, a s...
...he response header are all in lowercase, while the request headers
keys are not. http/2 requires that all headers be lowercase; response headers are shown as they are received from the server. (there may be some exceptions, such as x-firefox-spdy, which is added by firefox.) you can copy some or all of the response header in json format by using the context menu: if you select copy, a single
key word, value pair is copied. if you select copy all, the entire header is copied in json format, giving you something like this (after running the results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "ba...
Network request list - Firefox Developer Tools
domain or the file portions. you can filter requests that don't contain your filter string by prefixing your query with the "-" operator. for example, the query "-google.com" will show all requests that don't have "google.com" in the url. request properties use the search box in the toolbar. see next section. ...
... string by prefixing your query with the "-" operator. for example, the query "-google.com" will show all requests that don't have "google.com" in the url. request properties use the search box in the toolbar. see next section. filtering by properties the search box recognizes specific
keywords, which can be used to filter the requests by specific request properties. those
keywords are followed by a colon and a related filter value. the filter values are matched case insensitive. prepending a minus (-) negates the filter. you can combine different filters together by separating them with a space.
keyword meaning examples status-code shows resources that have the specific http status code. status-code:304 method shows resources...
Animation inspector example: Web Animations API - Firefox Developer Tools
in: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var icon
keyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var note
keyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var icon
keyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', ...
...: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var note
keyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var icon
keyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var note
keyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); var iconanimation = icon.animate(icon
keyframeset, icon
keyframeoptions); var noteanimation = note.animate(note
keyframeset, note
keyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; func...
Allocations - Firefox Developer Tools
ection (gc). with a garbage-collected language, like javascript, the runtime periodically needs to walk the heap looking for objects that are no longer reachable, and then freeing the memory they occupy. while gc events like this are executing, the javascript engine must be paused, so your program is suspended and will be completely unresponsive. to reduce the impact on responsiveness, spidermon
key (the javascript engine in firefox) can perform gc in small increments, letting the program run in between. sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish. gc events are shown as red markers in the waterfall view, and are a big red flag for responsiveness, sometimes running for hundreds of milliseconds: if you're seeing g...
... letting the program run in between. sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish. gc events are shown as red markers in the waterfall view, and are a big red flag for responsiveness, sometimes running for hundreds of milliseconds: if you're seeing gc events in your site's performance profile, what can you do? spidermon
key uses a complex set of heuristics to decide when to do what sort of garbage collection. in general, though: allocation pressure - allocating a lot of memory, or allocating memory at a high rate - makes spidermon
key more likely to run garbage collection, and more likely to run full, non-incremental garbage collection. if a gc event was caused by allocation pressure, then the sidebar on the right ...
Responsive Design Mode - Firefox Developer Tools
nd behave on different devices. toggling responsive design mode there are three ways to toggle responsive design mode: from the firefox menu: select responsive design mode from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos). from the developer tools toolbox: press the responsive design mode button in the toolbox's toolbar: from the
keyboard: press ctrl + shift + m (or cmd + opt + m on macos). controlling responsive design mode with responsive design mode enabled, the content area for web pages is set to the screen size for a mobile device. initially, it's set to 320 x 480 pixels. note: the device you select when in responsive design mode and the orientation (portrait or landscape) is saved between sessions. information...
...d between sessions. information for the selected device is centered over the display. from left to right, the display includes: name of the selected device - a drop-down list that includes whatever devices you have selected from the device settings screen. screen size - you can edit the width and height values to change the device size by editing a number directly or using the up and down
keys to increase or decrease the value by 1 pixels on each
keypress or hold and shift to change the value by 10. the mouse wheel changes the size values by 1 pixel at a time you can also change the device's screen size by grabbing the bottom-right corner of the viewport and dragging it to the size you want. orientation (portrait or landscape) - this setting persists between sessions ...
Storage Inspector - Firefox Developer Tools
he time being, the storage inspector only gives you a read-only view of storage. but we're working to let you edit storage contents in future releases. opening the storage inspector you can open the storage inspector by selecting "storage inspector" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its shift + f9
keyboard shortcut. the toolbox will appear at the bottom of the browser window, with the storage inspector activated. it's just called "storage" in the developer toolbox. storage inspector user interface the storage inspector ui is split into three main components: storage tree table widget sidebar storage tree the storage tree lists all the storage types that the storage inspector can...
...e sidebar is shown with details about that row. if a cookie is selected, it will list all the details about that cookie. the sidebar can parse the value of the cookie or local storage item or an indexeddb item and convert it into a meaningful object instead of just a string. for example: a stringified json like '{"foo": "bar"}' is shown as the origin json: {foo: "bar"}. a string containing a
key separated value, like "1~2~3~4" or "1=2=3=4" is shown like an array: [1, 2, 3, 4]. a string containing
key-value pairs, like "id=1234:foo=bar" is shown as json: {id:1234, foo: "bar"}. the shown values can also be filtered using the search box at the top of the sidebar. working with the storage inspector the following articles cover different aspects of using the network monitor: cookies ...
Toolbox - Firefox Developer Tools
"toggle tools" from the web developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x. see also
keyboard shortcuts. by default, the window appears docked to the bottom side of the firefox window, but you can detach it if you like. this is what it looks like when it's docked: the window itself is split into two parts: a toolbar along the top, and a main pane underneath: note: since firefox 62, you can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish ...
...ttached to the bottom of the browser window, and attached to the side of the browser window toggle the window between standalone and attached to the browser window access developer tool settings settings see the separate page on the developer tools settings. main pane the content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.
keyboard shortcuts these shortcuts work whenever the toolbox is open, no matter which tool is active. command windows macos linux cycle through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right to left ctrl + [ cmd + [ ctrl + [ toggle between active tool and settings. f1 f1 f1 toggle toolbox ...
The JavaScript input interpreter - Firefox Developer Tools
multi-line editing pane, or press ctrl+b (windows/linux) or cmd+b (macos). accessing variables you can access variables defined in the page, both built-in variables like window and variables added by javascript libraries like jquery: autocomplete the editor has autocomplete: enter the first few letters and a popup appears with possible completions: press enter, tab, or the right arrow
key to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions. console autocomplete suggestions are case-insensitive. the console suggests completions from the scope of the currently executing stack frame. this means that if you've hit a breakpoint in a function you get autocomplete for objects local to the funct...
...int 4. $x(xpath, element, resulttype) evaluates the xpath xpath expression in the context of element and returns an array of matching nodes. if unspecified, element defaults to document. the resulttype parameter specifies the type of result to return; it can be an xpathresult constant, or a corresponding string: "number", "string", "bool", "node", or "nodes"; if not provided, any_type is used.
keys() given an object, returns a list of the
keys (or property names) on that object. this is a shortcut for object.
keys. values() given an object, returns a list of the values on that object; serves as a companion to
keys(). clear() clears the console output area. inspect() given an object, opens the object inspector for that object. pprint() obsolete since gecko 74 formats the specified v...
Firefox Developer Tools
roject, you can join the devtools community. note: if you are just getting started with web development and using developer tools, our learning docs will help you — see getting started with the web and what are browser developer tools? for good starting points. the core tools you can open the firefox developer tools from the menu by selecting tools > web developer > toggle tools or use the
keyboard shortcut ctrl + shift + i or f12 on windows and linux, or cmd + opt + i on macos. the ellipsis menu on the right-hand side of developer tools contains several commands that let you perform actions or change tool settings. this button only appears when there are multiple iframes on a page. click it to display a list of the iframes on the current page and select the one with ...
...creenshots take a screenshot of the entire page or of a single element. measure a portion of the page measure a specific area of a web page. rulers overlay horizontal and vertical rulers on a web page for the latest developer tools and features, try firefox developer edition. download firefox developer edition connecting the developer tools if you open the developer tools using
keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab. but you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices. about:debugging debug add-ons, content tabs, and workers running in the browser. connecting to firefox for android connect the develo...
Animation() - Web APIs
nimations api returns a new animation object instance. syntax var animation = new animation([effect][, timeline]); parameters effect optional the target effect, as an object based on the animationeffectreadonly interface, to assign to the animation. although in the future other effects such as sequenceeffects or groupeffects might be possible, the only kind of effect currently available is
keyframeeffect. this can be null (which is the default) to indicate that there should be no effect applied. timeline optional specifies the timeline with which to associate the animation, as an object of a type based on the animationtimeline interface. currently the only timeline type available is documenttimeline, but in the future there my be timelines associated with gestures or scrolling, for e...
...d on the animationtimeline interface. currently the only timeline type available is documenttimeline, but in the future there my be timelines associated with gestures or scrolling, for example. the default value is document.timeline, but this can be set to null as well. examples in the follow the white rabbit example, the animation() constructor is used to create an animation for the rabbitdown
keyframes using the document's timeline: var rabbitdownanimation = new animation(rabbitdown
keyframes, document.timeline); specifications specification status comment web animationsthe definition of 'animation()' in that specification. working draft editor's draft. ...
Animation - Web APIs
tructor animation() creates a new animation object instance. properties animation.currenttime the current time value of the animation in milliseconds, whether running or paused. if the animation lacks a timeline, is inactive or hasn't been played yet, its value is null. animation.effect gets and sets the animationeffectreadonly associated with this animation. this will usually be a
keyframeeffect object. animation.finished read only returns the current finished promise for this animation. animation.id gets and sets the string used to identify the animation. animation.pending read only indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation. animation.playstate read only returns a...
...imeline associated with this animation. event handlers animation.oncancel gets and sets the event handler for the cancel event. animation.onfinish gets and sets the event handler for the finish event. animation.onremove allows you to set and run an event handler that fires when the animation is removed (i.e., put into an active replace state). methods animation.cancel() clears all
keyframeeffects caused by this animation and aborts its playback. animation.commitstyles() commits the end styling state of an animation to the element being animated, even after that animation has been removed. it will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute. animation.finish() seeks either end of an animation...
Attr - Web APIs
you should revise your code accordingly. see deprecated properties and methods for a complete list. properties name read only the attribute's name. namespaceuri read only a domstring representing the namespace uri of the attribute, or null if there is no namespace. localname read only a domstri...
...note: dom level 4 removed this property. the assumption was that since you get an attr object from an element, you should already know the associated element. as that doesn't hold true in cases like attr objects being returned by document.evaluate, the dom living standard reintroduced the property. gecko outputs a deprecation note starting from gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4). this note was removed again in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamon
key 2.46). specified read only this property always returns true. originally, it returned true if the attribute was explicitly specified in the source code or by a script, and false if its value came from the default one defined in the document's dtd. value the attribute's value. note: dom level 3...
AudioWorkletProcessor() - Web APIs
channelcount optional an array defining the number of channels for each output. for example, outputchannelcount: [n, m] specifies the number of channels in the first output to be n and the second output to be m. the array length must match numberofoutputs. parameterdata optional an object containing the initial values of custom audioparam objects on this node (in its parameters property), with
key being the name of a custom parameter and value being its initial value. processoroptions optional any additional data that can be used for custom initialization of the underlying audioworkletprocessor. note that there are default values for the first two properties, so even if there are no options object passed to the audioworkletnode constructor, the options object passed by the node to the au...
...essoroptions.someusefulvariable) } process (inputs, outputs, parameters) { return true } } registerprocessor('test-processor', testprocessor) next, in our main script file we'll load the processor, create an instance of audioworkletnode passing it the name of the processor and options object. in the options object we pass processoroptions with a map instance under someusefulvariable
key. we don't pass numberofinputs and see how it gets its default value. const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('test-processor.js') const testnode = new audioworkletnode(audiocontext, 'test-processor', { processoroptions: { someusefulvariable: new map([[1, 'one'], [2, 'two']]) } }) the console output will be as follows: > 1 // audioworkletnode o...
CacheStorage.match() - Web APIs
syntax caches.match(request, options).then(function(response) { // do something with the response }); parameters request the request you want to match. ...
... syntax caches.match(request, options).then(function(response) { // do something with the response }); parameters request the request you want to match. this can be a request object or a url string. options optional an object whose properties control how matching is done in the match operation. ...
CredentialsContainer.get() - Web APIs
nstances should include user (as opposed to federated) credentials. federated: a federatedcredentialrequestoptions object containing requirements for returned federated 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. public
key: an public
keycredentialrequestoptions 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 a...
...ith a credential instance that matches the provided parameters. if a single credential cannot be unambigiously obtained, the promise will resolve to null. specifications specification status comment credential management level 1the definition of 'get()' in that specification. working draft initial definition. web authentication: an api for accessing public
key credentials level 1 recommendation initial definition. ...
DOMTokenList.forEach() - Web APIs
an> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the values using foreach(), writing each one to the <span>'s node.textcontent inside the foreach() inner function. ...
...t. we when retrieve an iterator containing the values using foreach(), writing each one to the <span>'s node.textcontent inside the foreach() inner function. ...
DOMTokenList - Web APIs
newtoken. domtokenlist.supports(token) returns true if a given token is in the associated attribute's supported tokens. domtokenlist.toggle(token [, force]) removes token from the list if it exists, or adds token to the list if it doesn't. returns a boolean indicating whether token is in the list after the operation. ...
...oken from the list if it exists, or adds token to the list if it doesn't. returns a boolean indicating whether token is in the list after the operation. domtokenlist.entries() returns an iterator, allowing you to go through all
key/value pairs contained in this object. domtokenlist.foreach(callback [, thisarg]) executes a provided callback function once per domtokenlist element. domtokenlist.
keys() returns an iterator, allowing you to go through all
keys of the
key/value pairs contained in this object. domtokenlist.values() returns an iterator, allowing you to go through all values of the
key/value pairs contained in this object. examples in the following simple example, we retrieve the list of classes set on a <p> element as a domtokenlist using element.classlist, add a class usin...
Detecting device orientation - Web APIs
finally, interval represents the interval of time, in milliseconds, at which data are obtained from the device. specific...
...is from south to north z: represents the axis perpendicular to the ground for rotationrate, the situation is a bit different; the information corresponds to the following in each case: alpha: represents a rotation rate along the axis perpendicular to the screen (or
keyboard for desktop). beta: represents a rotation rate along the axis going from left to right of the plane of the screen (or
keyboard for desktop). gamma: represents a rotation rate along the axis going from bottom to top of the plane of the screen (or
keyboard for desktop). finally, interval represents the interval of time, in milliseconds, at which data are obtained from the device. specifications specification status comment deviceorientation event specification editor's draft init...
Document.createElementNS() - Web APIs
w to use this parameter. the new element will be given an is attribute whose value is the custom element's tag name. custom elements are an experimental feature only available in some browsers. return value the new element. ...
...ozilla.org/
keymaster/gatekeeper/there.is.only.xul xbl http://www.mozilla.org/xbl example this creates a new <div> element in the xhtml namespace and appends it to the vbox element. ...
Document.execCommand() - Web APIs
the exception — it will wrap any containing block element). requires a tag-name string as a value argument. virtually all block-level elements can be used. (internet explorer and edge support only heading tags h1–h6, address, and pre, which must be wrapped in angle brackets, such as "<h1>".) forwarddelete deletes the character ahead of the cursor's position, identical to hitting the delete
key on a windows
keyboard. heading adds a heading element around a selection or insertion point line. requires the tag-name string as a value argument (i.e. "h1", "h6"). (not supported by internet explorer and safari.) hilitecolor changes the background color for the selection or at the insertion point. requires a color value string as a value argument. usecss must be true for this to function. (...
...xplorer.) increasefontsize adds a <big> tag around the selection or at the insertion point. (not supported by internet explorer.) indent indents the line containing the selection or insertion point. in firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented. insertbronreturn controls whether the enter
key inserts a <br> element, or splits the current block element into two. (not supported by internet explorer.) inserthorizontalrule inserts a <hr> element at the insertion point, or replaces the selection with it. inserthtml inserts an html string at the insertion point (deletes selection). requires a valid html string as a value argument. (not supported by internet explorer.) insertimage inse...
Document.xmlEncoding - Web APIs
if the xml declaration states: <?xml version="1.0" encoding="utf-16"?> ...the result should be "utf-16". ...
...gh it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the encoding as determined by the xml declaration. should be null if unspecified or unknown. warning: do not use this attribute; it has been removed from the dom level 4 specification and is no longer supported in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7). if the xml declaration states: <?xml version="1.0" encoding="utf-16"?> ...the result should be "utf-16". however, firefox 3.0 includes information on endianness (e.g., utf-16be for big endian encoding), and while this extra information is removed as of firefox 3.1b3, firefox 3.1b3 is still consulting the file's encoding, rather than the xml declaration as the spec defines it ("an attri...
EffectTiming.direction - Web APIs
the direction property of the web animations api dictionary effecttiming indicates an animation's playback direction along its timeline, as well as its behavior when it reaches the end of an iteration element.animate(),
keyframeeffectreadonly(), and
keyframeeffect() all accept an object of timing properties including direction. the value of direction corresponds directly to animationeffecttimingreadonly.direction in timing objects returned by animationeffectreadonly,
keyframeeffectreadonly, and
keyframeeffect. syntax var timingproperties = { direction: "normal" | "reverse" | "alternate" | "alternate-reverse" }; timingproperties.direction = "normal" | "reverse" | "alternate" | "alternate-reverse"; value a domstring which specifies the direction in which the animation shou...
...teration, going forward through the animation sequence the first iteration, then backward through the sequence the second iteration, and so forth. "alternate-reverse" similar to "alternate", except the animation playback starts by going from the end of the animation sequence toward the beginning the first iteration, then goes forward during the second, and so forth. ...
EffectTiming.easing - Web APIs
the effecttiming dictionary's easing property in the web animations api specifies the timing function used to scale the time to produce easing effects, where easing is the rate of the animation's change over time. element.animate(),
keyframeeffectreadonly(), and
keyframeeffect() all accept an object of timing properties including easing. the value of easing corresponds directly to animationeffecttimingreadonly.easing in timing objects returned by animationeffectreadonly,
keyframeeffectreadonly, and
keyframeeffect. syntax var timingproperties = { easing: single-transition-timing-function } timingproperties.easing = single-transition-timing-function value a string defining the timing function to use for easing transitions during the animation process. accepts several pre-d...
...parameter, which is optional, specifies the point at which the change of values occur within the interval. if the second parameter is omitted, it is given the value end. step-start equivalent to steps(1, start) step-end equivalent to steps(1, end). ...
EffectTiming.iterations - Web APIs
the web animations api dictionary effecttiming's iterations property specifies the number of times the animation should repeat. the default value is 1, indicating that it should only play once, but you can set it to any floating-point value (including positive infinity defaults to 1, and can also take a value of infinity to make it loop infinitely. element.animate(),
keyframeeffectreadonly(), and
keyframeeffect() all accept an object of timing properties including iterations. the value of iterations corresponds directly to animationeffecttimingreadonly.iterations in timing objects returned by animationeffectreadonly,
keyframeeffectreadonly, and
keyframeeffect. syntax var timingproperties = { iterations: numberofiterations }; timingproperties.iterations = numberofiterations...
...ay through. any value from 0 (don't play the animation at all) to positive infinity (run the animation indefinitely) is supported. defaults to 1, meaning the animation sequence plays through once then stops automatically. exceptions typeerror an attempt was made to set the value of this property to a negative number or nan. the property's value is left unchanged. ...
Element.getBoundingClientRect() - Web APIs
document.body).scrolltop examples this simple example retrieves the domrect object representing the bounding client rect of a simple <div> element, and prints out its properties below it. <div></div> div { width: 400px; height: 200px; padding: 20px; margin: 50px auto; background: purple; } let elem = document.queryselector('div'); let rect = elem.getboundingclientrect(); for (var
key in rect) { if(typeof rect[
key] !== 'function') { let para = document.createelement('p'); para.textcontent = `${
key } : ${ rect[
key] }`; document.body.appendchild(para); } } notice how the width/height are equal to the equal to its width/height + padding. also note how the values of x/left, y/top, right, and bottom are equal to the absolute distance from the relevant edge of ...
... with ie and edge, not being able to add missing properties to their returned clientrect, object prevents backfilling x and y. due to compatibility problems (see below), it is safest to rely on only properties left, top, right, and bottom. properties in the returned domrect object are not own properties. while the in operator and for...in will find returned properties, other apis such as object.
keys() will fail. moreover, and unexpectedly, the es2015 and newer features such as object.assign() and object rest/spread will fail to copy returned properties. rect = elt.getboundingclientrect() // the result in emptyobj is {} emptyobj = object.assign({}, rect) emptyobj = { ...rect } {width, ...emptyobj} = rect domrect properties top, left, right, and bottom are computed using the values of the ...
Encrypted Media Extensions API - Web APIs
the encrypted media extensions api provides interfaces for controlling the playback of content which is subject to a digital restrictions management scheme. interfaces media
keymessageevent contains the content and related data when the content decryption module (cdm) generates a message for the session. media
keys represents a set of
keys that an associated htmlmediaelement can use for decryption of media data during playback. media
keysession represents a context for message exchange with a content decryption module (cdm). ...
...ement scheme. interfaces media
keymessageevent contains the content and related data when the content decryption module (cdm) generates a message for the session. media
keys represents a set of
keys that an associated htmlmediaelement can use for decryption of media data during playback. media
keysession represents a context for message exchange with a content decryption module (cdm). media
keystatusmap is a read-only map of media
key statuses by
key ids. media
keysystemaccess provides access to a
key system for decryption and/or a content protection provider. media
keysystemconfiguration provides configuration information about the media
key system. specifications specification status comment encrypted media extensions recommendation initial definit...
Event - Web APIs
it can also be triggered programmatically, such as by calling the htmlelement.click() method of an element, or by defining the event, then sending it to a specified target using eventtarget.dispatchevent(). there are many types of events, some of which use other interfaces based on the main event interface. event itself contains the properties and methods which are common to all events. ...
...event audioprocessingevent beforeinputevent beforeunloadevent blobevent clipboardevent closeevent compositionevent cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent
keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent touchevent trackeven...
FormData() - Web APIs
the formdata() constructor creates a new formdata object. note: this feature is available in web workers. syntax var formdata = new formdata(form) parameters form optional an html <form> element — when specified, the formdata object will be populated with the form's current
keys/values using the name property of each element for the
keys and their submitted value for the values. it will also encode file input content. ...
... form optional an html <form> element — when specified, the formdata object will be populated with the form's current
keys/values using the name property of each element for the
keys and their submitted value for the values. it will also encode file input content. ...
Using FormData Objects - Web APIs
the transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data. ...
...the transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data. ...
FormData.append() - Web APIs
note: this method is available in web workers. syntax there are two versions of this method: a two and a three parameter version: formdata.append(name, value); formdata.append(name, value, filename); parameters name the name of the field whose data is contained in value. value the field's value. ...
...fault filename for file objects is the file's filename. note: if you specify a blob as the data to append to the formdata object, the filename that will be reported to the server in the "content-disposition" header used to vary from browser to browser. returns void. example the following line creates an empty formdata object: var formdata = new formdata(); // currently empty you can add
key/value pairs to this using formdata.append: formdata.append('username', 'chris'); formdata.append('userpic', myfileinput.files[0], 'chris.jpg'); as with regular form data, you can append multiple values with the same name. for example (and being compatible with php's naming conventions by adding [] to the name): formdata.append('userpic[]', myfileinput.files[0], 'chris1.jpg'); formdata.append('...
FormData.set() - Web APIs
note: this method is available in web workers. syntax there are two versions of this method: a two and a three parameter version: formdata.set(name, value); formdata.set(name, value, filename); parameters name the name of the field whose data is contained in value. value the field's value. ...
...s "blob". the default filename for file objects is the file's filename. note: if you specify a blob as the data to append to the formdata object, the filename that will be reported to the server in the "content-disposition" header used to vary from browser to browser. ...
GlobalEventHandlers.onanimationcancel - Web APIs
se the animation is intended to begin as soon as the page loads, rather than based on an event. ...
...width); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; animation: 5s ease-in-out 0s infinite alternate both slidebox; } the animation's
keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner. @
keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } since the animation is described as taking place an infinite number of times, alternating direction each time, the box will glide back and forth between the two corners until stopped or the page is closed. javascript before we get to the animation code,...
GlobalEventHandlers.onanimationiteration - Web APIs
rt animating right away. we'll add the animation style later to start animating the box. ...
...; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; animation: 2s ease-in-out 0s infinite alternate both paused slidebox; } the animation's
keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner. @
keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } javascript some javascript code will need to be written to handle the click on the button to start the next iteration. let's have a look. var box = document.getelementbyid("box"); var iterationcounter = 0; box.onanimationiteration = function(event) { ...
HTMLAreaElement - Web APIs
dth="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. element.access
key is a domstring containing a single character that switches input focus to the control. htmlareaelement.alt is a domstring that reflects the alt html attribute, containing alternative text for the element. htmlareaelement.coords is a domstring that reflects the coords html attribute, containing coordinates to define the hot-spot region. htmlareaelement.download is a domstring indicating t...
...e following property has been added: download. technically, the url-related properties, media, host, hostname, pathname, port, protocol, search, and hash, have been moving to the htmlhyperlinkelementutils mixin, and htmlareaelement implements this mixin. html5the definition of 'htmlareaelement' in that specification. recommendation technically, the properties tabindex and access
key are now defined on htmlelement. the following property is now obsolete: nohref. the following properties have been added: rel, rellist, media, hreflang, type, host, hostname, pathname, port, protocol, search, and hash. document object model (dom) level 2 html specificationthe definition of 'htmlareaelement' in that specification. obsolete no change from document object mode...
HTMLLegendElement - Web APIs
ter-events: all;} properties inherits properties from its parent, htmlelement. htmllegendelement.form read only is a htmlformelement representing the form that this legend belongs to. if the legend has a fieldset element as its parent, then this attribute returns the same value as the form attribute on the parent fieldset element. otherwise, it returns null. htmllegendelement.access
key is a domstring representing a single-character access
key to give access to the element. htmllegendelement.align is a domstring representing the alignment relative to the form set methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmllegendelement' in that...
...mlelement. specifications specification status comment html living standardthe definition of 'htmllegendelement' in that specification. living standard html 5.1the definition of 'htmllegendelement' in that specification. recommendation html5the definition of 'htmllegendelement' in that specification. recommendation the property access
key is now defined on htmlelement. the following property is now obsolete: align. document object model (dom) level 2 html specificationthe definition of 'htmllegendelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmllegendelement' in that specific...
HTMLOrForeignElement - Web APIs
specifications specification status comment html living standardthe definition of 'htmlorforeignelement' in that specification. living stan...
... a given fetch will be allowed to proceed.tabindexthe tabindex property of the htmlorforeignelement interface represents the tab order of the current element.methodsblur()the htmlelement.blur() method removes
keyboard focus from the current element.focus()the htmlelement.focus() method sets focus on the specified element, if it can be focused. the focused element is the element which will receive
keyboard and similar events by default. specifications specification status comment html living standardthe definition of 'htmlorforeignelement' in that specification. living standard initial definition. ...
The HTML DOM API - Web APIs
, modification date, referring site, and so forth. access to lists of elements in the document's <head> block and body, as well as lists of the images, links, scripts, etc. contained in the document. support for interacting with the user by examining focus and by executing commands on editable content. event handlers for document events defined by the html standard to allow access to mouse and
keyboard events, drag and drop, media control, and more. event handlers for events that can be delivered to both elements and documents; these presently include only copy, cut, and paste actions. html element interfaces the element interface has been further adapted to represent html elements specifically by introducing the htmlelement interface, which all more specific html element classes inher...
...erits the properties and methods of all of its ancestors. for example, consider a <a> element, which is represented in the dom by an object of type htmlanchorelement. the element, then, includes the anchor-specific properties and methods described in that class's documentation, but also those defined by htmlelement and element, as well as from node and, finally, eventtarget. each level defines a
key aspect of the utility of the element. from node, the element inherits concepts surrounding the ability for the element to be contained by another element, and to contain other elements itself. of special importance is what is gained by inheriting from eventtarget: the ability to receive and handle events such as mouse clicks, play and pause events, and so forth. there are elements that share com...
Drag Operations - Web APIs
ement, including images and links. however, for these last two, the default value is true, so you would only use the draggable attribute with a value of false to disable dragging of these elements. note: when an element is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse. instead, the user must hold down the alt
key to select text with the mouse, or use the
keyboard. starting a drag operation in this example, a listener is added for the dragstart event by using the ondragstart attribute. <p draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')"> this text <strong>may</strong> be dragged. </p> when a user begins to drag, the dragstart event is fired. in th...
...effect, should be set within one of these events to specify which single operation should be performed. valid values for dropeffect are none, copy, move, or link. the combination values are not used for this property. with the dragenter and dragover event, the dropeffect property is initialized to the effect that the user is requesting. the user can modify the desired effect by pressing modifier
keys. although the exact
keys used vary by platform, typically the shift and control
keys would be used to switch between copying, moving, and linking. the mouse pointer will change to indicate which operation is desired. for instance, for a copy, the cursor might appear with a plus sign next to it. you can modify the dropeffect property during the dragenter or dragover events, if for example, a par...
Headers.entries() - Web APIs
the headers.entries() method returns an iterator allowing to go through all
key/value pairs contained in this object. the both the
key and value of each pairs are bytestring objects. note: this method is available in web workers. syntax headers.entries(); return value returns an iterator. ...
...ey/value pairs contained in this object. the both the
key and value of each pairs are bytestring objects. note: this method is available in web workers. syntax headers.entries(); return value returns an iterator. ...
Headers - Web APIs
about the available headers by reading our http headers reference. constructor headers() creates a new headers object. methods headers.append() appends a new value onto an existing header inside a headers object, or adds the header if it does not already exist. headers.delete() deletes a header from a headers object. ...
...entries() returns an iterator allowing to go through all
key/value pairs contained in this object. headers.foreach() executes a provided function once for each array element. headers.get() returns a bytestring sequence of all the values of a header within a headers object with a given name. headers.has() returns a boolean stating whether a headers object contains a certain header. headers.
keys() returns an iterator allowing you to go through all
keys of the
key/value pairs contained in this object. headers.set() sets a new value for an existing header inside a headers object, or adds the header if it does not already exist. headers.values() returns an iterator allowing you to go through all values of the
key/value pairs contained in this object. note: to be clear, the differen...
Ajax navigation example - Web APIs
alert("server error #" + vmsg); break; default: /* unknown status */ ajaxerror(); } } closereq(); } function filterurl (surl, sviewmode) { return surl.replace(rsearch, "") + ("?" + surl.replace(rhost, "&").replace(rview, sviewmode ? ...
...se; } return true; } function init () { opageinfo.title = document.title; history.replacestate(opageinfo, opageinfo.title, opageinfo.url); for (var olink, nidx = 0, nlen = document.links.length; nidx < nlen; document.links[nidx++].onclick = processlink); } const /* customizable constants */ stargetid = "ajax-content", sview
key = "view_as", sajaxclass = "ajax-nav", /* not customizable constants */ rsearch = /\?.*$/, rhost = /^[^\?]*\?*&*/, rview = new regexp("&" + sview
key + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox = document.createelement("div"), ocover = document.createelement("div"), oloadingimg = new image(), opageinfo = { title: null, url: locat...
Working with the History API - Web APIs
nce after the user restarts the browser. the new url does not need to be absolute; if it's relative, it's resolved relative to the current url. the new url must be of the same origin as the current url; otherwise, pushstate() will throw an exception. this parameter is optional; if it isn't specified, it's set to the document's current url. note: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) through gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamon
key 2.2), the passed object is serialized using json. starting in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3), the object is serialized using the structured clone algorithm. this allows a wider variety of objects to be safely passed. in a sense, calling pushstate() is similar to setting window.location = "#foo", in that ...
...shstate(), except that replacestate() modifies the current history entry instead of creating a new one. note that this doesn't prevent the creation of a new entry in the global browser history. replacestate() is particularly useful when you want to update the state object or url of the current history entry in response to some user action. note: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) through gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamon
key 2.2), the passed object is serialized using json. starting in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3), the object is serialized using the structured clone algorithm. this allows a wider variety of objects to be safely passed. example of replacestate() method suppose http://mozilla.org/foo.html executes the follo...
HkdfParams - Web APIs
the hkdfparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.derive
key(), when using the hkdf algorithm. properties name a domstring. this should be set to hkdf. hash a domstring representing the digest algorithm to use. this may be one of: sha-1 sha-256 sha-384 sha-512 salt a buffersource. the hkdf specification states that adding salt "adds significantly to the strength of hkdf". ideally, the salt is a random or pseudo-random value with the same length as the output of the digest function. unlike the input
key material passed into derive
key(), salt does not need to be kept secret. info a buffersource representing application-specific contextual information. this is used to bind the derive...
...ecification states that adding salt "adds significantly to the strength of hkdf". ideally, the salt is a random or pseudo-random value with the same length as the output of the digest function. unlike the input
key material passed into derive
key(), salt does not need to be kept secret. info a buffersource representing application-specific contextual information. this is used to bind the derived
key to an application or context, and enables you to derive different
keys for different contexts while using the same input
key material. it's important that this should be independent of the input
key material itself. this property is required but may be an empty buffer. examples see the examples for subtlecrypto.derive
key(). specifications specification status comment ...
HmacImportParams - Web APIs
the hmacimportparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.import
key() or subtlecrypto.unwrap
key(), when generating a
key for the hmac algorithm. properties name a domstring. this should be set to hmac. hash a domstring representing the name of the digest function to use. the can take a value of sha-256, sha-384, or sha-512. warning: although you can technically pass sha-1 here, this is strongly discouraged as it is considered vulnerable. length optional a number representing the length in bits of the
key. if this is omitted the length of the
key is equal to the length of the digest generated by the digest function you have chosen. unless you have a good reason to use a different length, ...
...discouraged as it is considered vulnerable. length optional a number representing the length in bits of the
key. if this is omitted the length of the
key is equal to the length of the digest generated by the digest function you have chosen. unless you have a good reason to use a different length, omit this property and use the default. examples see the examples for subtlecrypto.import
key(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.hmacimportparams' in that specification. recommendation ...
IDBCursor.direction - Web APIs
cursor.direction; value a string (defined by the idbcursordirection enum) indicating the direction in which the cursor is traversing the data. possible values are: value description next this direction causes the cursor to be opened at the start of the source. nextunique this direction causes the cursor to be opened at the start of the source. for every
key with duplicate values, only the first record is yielded. prev this direction causes the cursor to be opened at the end of the source. prevunique this direction causes the cursor to be opened at the end of the source. for every
key with duplicate values, only the first record is yielded. example in this simple fragment we create a transaction, retrieve an obje...
...rate through all the records in the object store. within each iteration we log the direction of the cursor, something like this: prev note: we can't change the direction of travel of the cursor using the direction property, as it is read-only. we specify the direction of travel using the 2nd argument of idbobjectstore.opencursor. the cursor does not require us to select the data based on a
key; we can just grab all of it. also note that in each iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function backwards() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectsto...
IDBCursorWithValue - Web APIs
interface of the indexeddb api represents a cursor for traversing or iterating over multiple records in a database. it is the same as the idbcursor, except that it includes the value property. the cursor has a source that indicates which index or object store it is iterating over. it has a position within the range, and moves in a direction that is increasing or decreasing in the order of record
keys. the cursor enables an application to asynchronously process all the records in the cursor's range. you can have an unlimited number of cursors at the same time. you always get the same idbcursorwithvalue object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web workers. <div id="interfacediagram" style="di...
...m its parent interface, idbcursor. properties inherits properties from its parent interface, idbcursor. idbcursorwithvalue.value read only returns the value of the current cursor. example in this example we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. the cursor does not require us to select the data based on a
key; we can just grab all of it. also note that in each iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); ...
IDBDatabase: abort event - Web APIs
if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event. ...
...'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
IDBDatabase: close event - Web APIs
ce event event handler property onerror examples this example opens a database and listens for the close event: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
... console.log('database connection closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
IDBDatabase: error event - Web APIs
ening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
... const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
IDBDatabase: versionchange event - Web APIs
handler property onversionchange examples this example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
...nsole.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
IDBDatabaseSync - Web APIs
ed for use only with web workers, and was eventually removed from the spec because its need was questionable. it may however be reintroduced in the future if there is enough demand from web developers. the databasesync interface in the indexeddb api represents a synchronous connection to a database. ...
...ames of the object stores that exist in the connected database. version readonly domstring the version of the connected database. has the null value when the database is first created. methods createobjectstore() creates and returns a new object store with the given name in the connected database. idbobjectstoresync createobjectstore( in domstring name, in domstring
keypath, in optional boolean autoincrement ) raises (idbdatabaseexception); parameters name the name of a new object store.
keypath the
key path used by the new object store. if a null path is specified, then the object store does not have a
key path, and uses out-of-line
keys. autoincrement if true, the object store uses a
key generator; if false, it does not use one. returns idbob...
IDBIndex.count() - Web APIs
the count() method of the idbindex interface returns an idbrequest object, and in a separate thread, returns the number of records within a
key range. note: this feature is available in web workers. syntax var request = myindex.count(); var request = myindex.count(
key); parameters
key optional the
key or
key range that identifies the record to be counted. return value a idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbindex's transaction is inactive. dataerror the
key or
key range provided contains an invalid
key. invalidstateerror the idbindex has bee...
...emoved. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary
key. myindex.count() is then used to count the number of records in the index, and the result of that request is logged to the console when its success callback returns. finally, we iterate through each record, and insert the data into an html table. for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ...
IDBIndex.getAll() - Web APIs
the getall() method of the idbindex interface retrieves all objects that are inside the index. there is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. to use a feature like getall(), the browser has to create all the objects at once. if you are just interested in looking at each of the
keys, for instance, it is more efficient to use a cursor. if you are trying to get an array of all the objects in an object store, though, you should use getall(). syntax var getall
keysrequest = idbindex.getall(); var getall
keysrequest = idbindex.getall(query); var getall
keysrequest = idbindex.getall(query, count); parameters query optional a
key or an idb
keyrange identifying the records to retrieve. if this value is null or missing...
... count optional the number records to return. if this value exceeds the number of records in the query, the browser will only retrieve the first item. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. ...
IDBIndex.multiEntry - Web APIs
the multientry read-only property of the idbindex interface returns a boolean value that affects how the index behaves when the result of evaluating the index's
key path yields an array. this is decided when the index is created, using the idbobjectstore.createindex method. this method takes an optional options parameter whose multientry property is set to true/false. note: this feature is available in web workers. syntax var ismultientry = myindex.multientry; value a boolean: value effect true there is one record in the index for each item in an array of
keys. false there is one record for each
key that is an array. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts ...
... array. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary
key. the multi-entry status of the index is logged to the console: it should be returned as false. finally, we iterate through each record, and insert the data into an html table. for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); ...
IDBIndex.unique - Web APIs
the unique read-only property returns a boolean that states whether the index allows duplicate
keys. this is decided when the index is created, using the idbobjectstore.createindex method. this method takes an optional parameter, unique, which if set to true means that the index will not be able to accept duplicate entries. note: this feature is available in web workers. syntax var isunique = idbindex.unique; value a boolean: value effect true the current index does not allow duplicate values for a
key. false the current index allows duplicate
key values. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using i...
...values. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary
key. the unique status of the index is logged to the console: it should be returned as false. finally, we iterate through each record, and insert the data into an html table. for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var ...
IDBObjectStore.delete() - Web APIs
the delete() method of the idbobjectstore interface returns an idbrequest object, and, in a separate thread, deletes the specified record or records. either a
key or an idb
keyrange can be passed, allowing one or multiple records to be deleted from a store. to delete all records in a store, use idbobjectstore.clear. bear in mind that if you are using a idbcursor, you can use the idbcursor.delete() method to more efficiently delete the current record — without having to explicitly look up the record's
key. note: this feature is available in web workers. syntax var request = objectstore.delete(
key); var request = objectstore.delete(
keyrange); parameters
key the
key of the record to be deleted, or an idb
keyrange to delete all records with
keys in range. return value an idbreq...
...t attribute is set to undefined. exceptions this method may raise a domexception of the following types: exception description transactioninactiveerror this object store's transaction is inactive. readonlyerror the object store's transaction mode is read-only. invalidstateerror the object store has been deleted. dataerror the
key is not a valid
key or a
key range. example in the following code snippet, we open a read/write transaction on our database and delete one specific record out of our object store using delete() — a sample record with the
key "walk dog". for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.op...
IDBObjectStore.openCursor() - Web APIs
t. used for iterating through an object store with a cursor. to determine if the add operation has completed successfully, listen for the results’s success event. note: this feature is available in web workers. syntax var request = objectstore.opencursor(); var request = objectstore.opencursor(query); var request = objectstore.opencursor(query, direction); parameters query optional a
key or idb
keyrange to be queried. if a single valid
key is passed, this will default to a range containing only that
key. if nothing is passed, this will default to a
key range that selects all the records in this object store. direction optional an idbcursordirection telling the cursor what direction to travel. valid values are "next", "nextunique", "prev", and "prevunique". the default is "next".
...brequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror this idbobjectstore or idbindex has been deleted. transactioninactiveerror this idbobjectstore's transaction is inactive. dataerror the specified
key or
key range is invalid. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = even...
IDBOpenDBRequest: blocked event - Web APIs
roperty onblocked examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
...request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
IDBRequest: error event - Web APIs
record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); })...
...xample, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
IDBRequest: success event - Web APIs
atabase and listens for the success event using addeventlistener(): // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
... the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
IDBTransaction: complete event - Web APIs
property oncomplete examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
... = objectstore.add(newitem); }; using the oncomplete property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
IDBTransaction: error event - Web APIs
ening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
... const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', {
keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); };...
MIDIMessageEvent - Web APIs
constructor midimessageevent.midimessageevent creates a new midimessageevent object instance. ...
... constructor midimessageevent.midimessageevent creates a new midimessageevent object instance. ...
MediaDevices.getUserMedia() - Web APIs
n can request the camera and microphone capabilities it needs and wants, using additional constraints. the following expresses a preference for 1280x720 camera resolution: { audio: true, video: { width: 1280, height: 720 } } the browser will try to honour this, but may return other resolutions if an exact match is not available, or the user overrides it. to require a capability, use the
keywords min, max, or exact (a.k.a. min == max). the following demands a minimum resolution of 1280x720: { audio: true, video: { width: { min: 1280 }, height: { min: 720 } } } if no camera exists with this resolution or higher, then the returned promise will be rejected with overconstrainederror, and the user will not be prompted. the reason for the difference in behaviour is that...
... min, max, or exact (a.k.a. min == max). the following demands a minimum resolution of 1280x720: { audio: true, video: { width: { min: 1280 }, height: { min: 720 } } } if no camera exists with this resolution or higher, then the returned promise will be rejected with overconstrainederror, and the user will not be prompted. the reason for the difference in behaviour is that the
keywords min, max, and exact are inherently mandatory. whereas plain values and a
keyword called ideal are not. here's a full example: { audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 576, ideal: 720, max: 1080 } } } an ideal value, when used, has gravity, which means that the browser will try to find the setting (and camera, if you have more than...
close() - Web APIs
}); return value a promise. specifications specification status comment encrypted media extensionsthe definition of 'close()' in that specification. ...
...}); return value a promise. specifications specification status comment encrypted media extensionsthe definition of 'close()' in that specification. ...
load() - Web APIs
return value a promise that resolves to a boolean indicating whether the load succeeded or failed. specifications specification status comment encrypted media extensionsthe definition of 'load()' in that specification. ...
... return value a promise that resolves to a boolean indicating whether the load succeeded or failed. specifications specification status comment encrypted media extensionsthe definition of 'load()' in that specification. ...
setServerCertificate() - Web APIs
}); specifications specification status comment encrypted media extensionsthe definition of 'setservercertificate()' in that specification. ...
...}); specifications specification status comment encrypted media extensionsthe definition of 'setservercertificate()' in that specification. ...
MouseEvent() - Web APIs
ientx", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the client window of user's screen; setting this value doesn't move the mouse pointer. "clienty", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the client window of the user's screen; setting this value doesn't move the mouse pointer. ...
...of the mouse event on the client window of user's screen; setting this value doesn't move the mouse pointer. "clienty", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the client window of the user's screen; setting this value doesn't move the mouse pointer. "ctrl
key", optional and defaulting to false, of type boolean, that indicates if the ctrl
key was simultaneously pressed. "shift
key", optional and defaulting to false, of type boolean, that indicates if the shift
key was simultaneously pressed. "alt
key", optional and defaulting to false, of type boolean, that indicates if the alt
key was simultaneously pressed. "meta
key", optional and defaulting to false, of type boolean, that indicates if the meta
key was simultaneously pressed. ...
MouseEvent.screenX - Web APIs
defined this as an integer referring to the number of pixels. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove event. ...
... integer referring to the number of pixels. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove event. ...
Navigator - Web APIs
ll be ignored and true otherwise. navigator.geolocation read only returns a geolocation object allowing accessing the location of the device. navigatorconcurrenthardware.hardwareconcurrency read only returns the number of logical processor cores available. navigatorplugins.javaenabled read only returns a boolean flag indicating whether the host browser is java-enabled or not. navigator.
keyboard read only returns a
keyboard object which provides access to functions that retrieve
keyboard layout maps and toggle capturing of
key presses from the physical
keyboard. navigatorlanguage.language read only returns a domstring representing the preferred language of the user, usually the language of the browser ui. the null value is returned when this is unknown. navigatorlanguage.lan...
...or permission, returns the audio or video stream associated to a camera or microphone on the local computer. navigator.registercontenthandler() obsolete since gecko 59 allows web sites to register themselves as a possible handler for a given mime type. navigator.registerprotocolhandler() allows web sites to register themselves as a possible handler for a given protocol. navigator.requestmedia
keysystemaccess() returns a promise for a media
keysystemaccess object. navigator.sendbeacon() used to asynchronously transfer a small amount of data using http from the user agent to a web server. navigator.share() invokes the native sharing mechanism of the current platform. navigatorid.taintenabled() deprecated since gecko 1.7.8 obsolete since gecko 9.0 returns false. javascript taint/...
Node.cloneNode() - Web APIs
hole subtree—including text that may be in child text nodes—is also copied. if false, only node will be cloned. any text that node contains is not cloned, either (since text is contained by one or more child text nodes). deep has no effect on empty elements (such as the <img> and <input> elements). *note: in the dom4 specification (since gecko 13.0 (firefox 13 / thunderbird 13 / seamon
key 2.10)), the optional deep argument defaults to true. this behavior has been changed in the latest spec! although deep it still optional, it now defaults to false. you should always provide an explicit value for backward and forward compatibility. with gecko 28.0 (firefox 28 / thunderbird 28 / seamon
key 2.25 / firefox os 1.3)), the console warned developers not to omit the argument. st...
...s behavior has been changed in the latest spec! although deep it still optional, it now defaults to false. you should always provide an explicit value for backward and forward compatibility. with gecko 28.0 (firefox 28 / thunderbird 28 / seamon
key 2.25 / firefox os 1.3)), the console warned developers not to omit the argument. starting with gecko 29.0 (firefox 29 / thunderbird 29 / seamon
key 2.26)), a shallow clone is defaulted instead of a deep clone. example let p = document.getelementbyid("para1") let p_prime = p.clonenode(true) notes cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners. it does not copy event listeners added using addeventlistener() or those assigned to element properties (e.g., node.onclick = somefuncti...
PaymentRequest.show() - Web APIs
the paymentrequest interface's show() method instructs the user agent to begin the process of showing and handling the user interface for the payment request to the user. for security reasons, the paymentrequest.show() method can't just be initiated at any time. it may only be called while handling events that represent user interactions, such as click,
keyup, or the like. only one payment request can be in the process of being handled at once, across all documents. once one paymentrequest's show() method has been called, any other call to show() will by rejected with an aborterror until the returned promise has been concluded, either by being fulfilled with a paymentresponse indicating the results of the payment request, or by being rejected with an error. note: in reality, de...
... shown for this request (its state is interactive because it is being shown already). notsupportederror the promise rejects with a notsupportederror if the user agent does not support the payment methods specified when the paymentrequest constructor was called. securityerror the promise rejects with a securityerror if the call to show() was not in response to a user action, such as a click or
keyup event. other reasons a securityerror may be thrown are at the discretion of the user agent, and may include situations such as too many calls to show() being made in a short time or show() being called while payment requests are blocked by parental controls. usage notes the most common patterns for using show() involve either the async/await syntax or the use of show().then().catch() to hand...
Payment processing concepts - Web APIs
the credit card processing service is the payment method provider. payment handler the implementation of the code needed to interface with a particular payment method provider in order to process payments. some payment handlers use merchant validation, which is the process of validating the identity of a merchant in some way, usually using some form of cryptographic response such as a public
key. validated merchants are allowed to interface with a payment handler. payment method identifiers payment handlers are identified by payment method identifiers, which are strings uniquely identifying the payment handler. these may be either one of the standardized payment handler identifiers, or a url used by the payment processing service to both identify itself and to handle payments. standar...
...identity of a merchant in some way, usually using some form of cryptographic challenge. if the merchant doesn't successfully validate, it's not allowed to use the payment handler. the exact validation technology depends on the payment handler, and merchant validation is entirely optional. in the end, the only thing that the web site or app is responsible for is fetching the merchant's validation
key and passing it into the event's complete() method. paymentrequest.onmerchantvalidation = function(event) { event.complete(fetchvalidationdata(event.validationurl)); } in this example, fetchvalidationdata() is a function which loads the payment handler specific identifying information from the address given by validationurl. note this function must go through the merchant server, because a cl...
performance.mark() - Web APIs
name a domstring representing the name of the mark. if the name given to this method already exists in the performancetiming interface, syntaxerror is thrown. return value void example the following example shows how to use mark() to create and retrieve performancemark entries. // create a bunch of marks. ...
...ng the name of the mark. if the name given to this method already exists in the performancetiming interface, syntaxerror is thrown. return value void example the following example shows how to use mark() to create and retrieve performancemark entries. // create a bunch of marks. performance.mark("squirrel"); performance.mark("squirrel"); performance.mark("mon
key"); performance.mark("mon
key"); performance.mark("dog"); performance.mark("dog"); // get all of the performancemark entries. const allentries = performance.getentriesbytype("mark"); console.log(allentries.length); // 6 // get all of the "mon
key" performancemark entries. const mon
keyentries = performance.getentriesbyname("mon
key"); console.log(mon
keyentries.length); // 2 // clear out all of the marks. performance.clearmark...
PushManager.subscribe() - Web APIs
ng subscription. syntax pushmanager.subscribe(options).then(function(pushsubscription) { ... } ); parameters options optional an object containing optional configuration parameters. it can have the following properties: uservisibleonly: a boolean indicating that the returned push subscription will only be used for messages whose effect is made visible to the user. applicationserver
key: a base64-encoded domstring or arraybuffer containing an ecdsa p-256 public
key that the push server will use to authenticate your application server. if specified, all messages from your application server must use the vapid authentication scheme, and include a jwt signed with the corresponding private
key. this
key is not the same ecdh
key that you use to encrypt the data. for more information,...
...ent.data); // from here we can write the data to indexeddb, send it to any open // windows, display a notification, etc. } navigator.serviceworker.register('serviceworker.js'); // use serviceworker.ready to ensure that you can subscribe for push navigator.serviceworker.ready.then( function(serviceworkerregistration) { var options = { uservisibleonly: true, applicationserver
key: applicationserver
key }; serviceworkerregistration.pushmanager.subscribe(options).then( function(pushsubscription) { console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to it using, // for example, an xmlhttprequest. }, function(error) { // during...
Push API - Web APIs
rgery (csrf) prevention cheat sheet preventing csrf and xsrf attacks for an app to receive push messages, it has to have an active service worker. when the service worker is active, it can subscribe to push notifications, using pushmanager.subscribe(). the resulting pushsubscription includes all the information that the application needs to send a push message: an endpoint and the encryption
key needed for sending data. the service worker will be started as necessary to handle incoming push messages, which are delivered to the serviceworkerglobalscope.onpush event handler. this allows apps to react to push messages being received, for example, by displaying a notification (using serviceworkerregistration.shownotification().) each subscription is unique to a service worker. the endpoin...
...application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. this handles cases where a burst of push messages is received, and not all generate a visible notification. note: chrome versions earlier than 52 require you to set up a project on google cloud messaging to send push messages, and use the associated project number and api
key when sending push notifications. it also requires an app manifest, with some special parameters to use this service. interfaces pushevent represents a push action, sent to the global scope of a serviceworker. it contains information sent from an application to a pushsubscription. pushmanager provides a way to receive notifications from third-party servers, as well as request urls for push...
RTCConfiguration.certificates - Web APIs
s. description if this property isn't included in the configuration, a set of certificates is automatically generated for each instance of rtcpeerconnection. although a given dtls connection only uses a single certificate, providing multiple options in the certificates list may improve the odds of establishing a connection by increasing the chances a mutually-compatible encryption algorithm and
key size may be found. the method by which a browser decides which certificate to use is implementation-dependent. some browsers may simply choose the first listed certificate and ignore the rest of the list; others may take a different approach. using certificates when you wish to provide your own certificates for use by an rtcpeerconnection instead of having the rtcpeerconnection generate them a...
...y one certificate, providing multiple certificates allows support for multiple encryption algorithms. the implementation of rtcpeerconnection will choose which certificate to use based on the algorithms it and the remote peer support, as determined during dtls handshake. if you don't provide certificates, new ones are generated automatically. one obvious benefit to providing your own is identity
key continuity—if you use the same certificate for subsequent calls, the remote peer can tell you're the same caller. this also avoids the cost of generating new
keys. <<<--- add link to information about identity --->>> examples specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration.certificate...
Range.commonAncestorContainer - Web APIs
ed text, and triggers an animation to highlight them. ...
... <li>cello</li> <li>violin <ul> <li>first chair</li> <li>second chair</li> </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @
keyframes to animate a fading outline. ...
Report - Web APIs
we loop over each report using a basic for loop, then iterate over each e...
...t listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let
key in reports[i].body) { let innerlistitem = document.createelement('li'); let
keyvalue = reports[i].body[
key]; innerlistitem.textcontent =
key + ': ' +
keyvalue; innerlist.appendchild(innerlistitem); } } } the reports parameter contains an array of all the reports in the observer's report queue. we loop over each report using a basic for loop, then iterate over each entry of in the report's body using a for...in structure, displaying each
key/value pair insi...
SVGElement - Web APIs
this works just like html's htmlelement.dataset property and html's data-* global attribute. svgelement.classname read only an svganimatedstring that reflects the value of the class ...
...this works just like html's htmlelement.dataset property and html's data-* global attribute. ...
Storage - Web APIs
s, for example, the addition, modification, or deletion of stored data items. to manipulate, for instance, the session storage for a domain, a call to window.sessionstorage is made; whereas for local storage the call is made to window.localstorage. properties storage.length read only returns an integer representing the number of data items stored in the storage object. methods storage.
key() when passed a number n, this method will return the name of the nth
key in the storage. storage.getitem() when passed a
key name, will return that
key's value. storage.setitem() when passed a
key name and value, will add that
key to the storage, or update that
key's value if it already exists. storage.removeitem() when passed a
key name, will remove that
key from the storage. storage...
... examples here we access a storage object by calling localstorage. we first test whether the local storage contains data items using !localstorage.getitem('bgcolor'). if it does, we run a function called setstyles() that grabs the data items using storage.getitem() and uses those values to update page styles. ...
StylePropertyMapReadOnly - Web APIs
on of a css declaration block that is an alternative to cssstyledeclaration. retrieve an instance of this interface using element.computedstylemap(). properties stylepropertymapreadonly.size returns an unsinged long integer containing the size of the stylepropertymapreadonly object. methods stylepropertymapreadonly.entries() returns an array of a given object's own enumerable property [
key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). stylepropertymapreadonly.foreach() executes a provided function once for each element of stylepropertymapreadonly. stylepropertymapreadonly.get() returns the value of the specified property. stylepropertymapreadonly.getall() ret...
... once for each element of stylepropertymapreadonly. stylepropertymapreadonly.get() returns the value of the specified property. stylepropertymapreadonly.getall() returns an array of cssstylevalue objects containing the values for the provided property. stylepropertymapreadonly.has() indicates whether the specified property is in the stylepropertymapreadonly object. stylepropertymapreadonly.
keys() returns a new array iterator containing the
keys for each item in stylepropertymapreadonly. stylepropertymapreadonly.values() returns a new array iterator containing the values for each index in the stylepropertymapreadonly object. examples we have to have an element to observe: <p> this is a paragraph with some text. we can add some css, or not. the style map will include all the...
TouchEvent() - Web APIs
touching the surface. "targettouches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact that is touching the surface and started on the element that is the target of the current event. "changedtouches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact which contributed to the event. ...
...ch[], that is a list of objects for every point of contact that is touching the surface and started on the element that is the target of the current event. "changedtouches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact which contributed to the event. "ctrl
key", optional and defaulting to false, of type boolean, that indicates if the ctrl
key was simultaneously pressed. "shift
key", optional and defaulting to false, of type boolean, that indicates if the shift
key was simultaneously pressed. "alt
key", optional and defaulting to false, of type boolean, that indicates if the alt
key was simultaneously pressed. "meta
key", optional and defaulting to false, of type boolean, that indicates if the meta
key was simultaneously pressed. ...
UIEvent.isChar - Web APIs
when this is the case, ischar returns false. it is used when event handlers need to do something like echo the input on the screen. ...
...when this is the case, ischar returns false. it is used when event handlers need to do something like echo the input on the screen. ...
URLSearchParams.set() - Web APIs
the generated url (when uncommented). ...
...eurl.searchparams.entries()) { console.debug(pair[0] + ' = \'' + pair[1] + '\''); } console.debug(theurl) } return theurl } var url = genurl( /(^\s*\/\/|\s*[^:]\/\/).*\s*$|\s*\/\*(.|\n)+?\*\/\s*$/gm // single/multi-line comments // /(^\s*\/\/.*|\s*[^:]\/\/.*)/g // single-line comments ,[ "these should work:", "", "// eslint-disable-next-line no-unused-vars", "lockpref( '
keyword.url',\t\t'https://duckduckgo.com/html/?q=!+' )\t// test", "/*", " * bla bla ", "*/", "", "/* bla bla */", "", "// bla bla ", "", "these shouldn\'t work:", "console.log(\"http://foo.co.uk/\")", "var url = \"http://regexr.com/foo.html?q=bar\"", "alert(\"https://mediatemple.net\")", ] , true ) console.info( url, url.tostring() ) // window.open( url, 'regex_site'...
URLSearchParams.sort() - Web APIs
the urlsearchparams.sort() method sorts all
key/value pairs contained in this object in place and returns undefined. the sort order is according to unicode code points of the
keys. this method uses a stable sorting algorithm (i.e. the relative order between
key/value pairs with equal
keys will be preserved). note: this feature is available in web workers. syntax searchparams.sort(); parameters none. return value undefined. ...
...ode points of the
keys. this method uses a stable sorting algorithm (i.e. the relative order between
key/value pairs with equal
keys will be preserved). note: this feature is available in web workers. syntax searchparams.sort(); parameters none. return value undefined. examples // create a test urlsearchparams object var searchparams = new urlsearchparams("c=4&a=2&b=3&a=1"); // sort the
key/value pairs searchparams.sort(); // display the sorted query string console.log(searchparams.tostring()); the result is: a=2&a=1&b=3&c=4 specifications specification status comment urlthe definition of 'sort()' in that specification. living standard initial definition ...
UserDataHandler - Web APIs
obsolete since gecko 26 (firefox 26 / thunderbird 26 / seamon
key 2.23 / firefox os 1.2)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary when associating user data with a
key on a node, node.setuserdata() can also accept, in its third argument, a handler which will be called when the object is cloned, imported, deleted, renamed, or adopted. per the specification, exceptions should not be thrown in a userdatahandler. in both document.importnode() and node.clonenode(), although user data is not copied over, the handler will be called. properties none. ...
...ode.setuserdata() can also accept, in its third argument, a handler which will be called when the object is cloned, imported, deleted, renamed, or adopted. per the specification, exceptions should not be thrown in a userdatahandler. in both document.importnode() and node.clonenode(), although user data is not copied over, the handler will be called. properties none. methods handle (operation,
key, data, src, dst) (no return value) this method is a callback which will be called if a node is being cloned, imported, renamed and as well, if deleted or adopted. operation (unsigned short) is an operation type integer (see below).
key (domstring) is the user
key. data (domuserdata) is the user data. src (node) is the source node (null if being deleted). dst (node) is the destination node...
Visual Viewport API - Web APIs
the visual viewport api provides an explicit mechanism for querying and modifying the properties of the window's visual viewport. the visual viewport is the visual portion of a screen excluding on-screen
keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page. visual viewport concepts and usage the mobile web contains two viewports, the layout viewport and the visual viewport. the layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. ...
...a page. visual viewport concepts and usage the mobile web contains two viewports, the layout viewport and the visual viewport. the layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. when the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. user-interface features like the on-screen
keyboard (osk) can shrink the visual viewport without affecting the layout viewport. what happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? for example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device? current browsers vary in how they handle this. the visual viewport lets web d...
WebRTC Statistics API - Web APIs
this object contains ...
...rtcstats local-candidate statistics about a local ice candidate associated with the connection's rtcicetransports. rtcicecandidatestats rtcstats media-source statistics about the media produced by the mediastreamtrack attached to an rtp sender. the dictionary this
key maps to depends on the track's kind. rtcaudiosourcestats or rtcvideosourcestats rtcmediasourcestats rtcstats rtcaudiosourcestats or rtcvideosourcestats outbound-rtp statistics describing the state of one of the outbound data streams on this connection. rtcoutboundrtpstreamstats ...
Web Animations API Concepts - Web APIs
document’s timeline. in the future we may see timeline objects that correspond to the length of the page, perhaps a scrolltimeline, or other things entirely. animation animation objects can be imagined as dvd players: they’re used for controlling media playback, but without media to play, they don’t do anything. ...
... they don’t do anything. animation objects accept media in the form of animation effects, specifically
keyframe effects (we’ll get to those in a moment). like a dvd player, we can use the animation object’s methods to play, pause, seek, and control the animation’s playback direction and speed. animation effect if animation objects are dvd players, we can think of animation effects, or
keyframe effects, as dvds.
keyframe effects are a bundle of information including at the bare minimum a set of
keys and the duration they need to be animated over. the animation object takes this information and, using the timeline object, assembles a playable animation we can view and reference. we currently have only one animation effect type available:
keyframeeffect. potentially we could have al...
Web Animations API - Web APIs
concepts and usage the web animations api provides a common language for browsers and developers to describe animations on dom elements. to get more information on the concepts behind the api and how to use it, read using the web animations api. web animations interfaces animation provides playback controls and a timeline for an animation node or source. can take an object created with the
keyframeeffect() constructor.
keyframeeffect describes sets of animatable properties and values, called
keyframes and their timing options. these can then be played using the animation() constructor. animationtimeline represents the timeline of animation. this interface exists to define timeline features (inherited by documenttimeline and future timeline objects) and is not itself accessed by dev...
... timeline of animation. this interface exists to define timeline features (inherited by documenttimeline and future timeline objects) and is not itself accessed by developers. animationevent actually part of css animations. documenttimeline represents animation timelines, including the default document timeline (accessed using the document.timeline property). effecttiming element.animate(),
keyframeeffectreadonly.
keyframeeffectreadonly(), and
keyframeeffect.
keyframeeffect() all accept an optional dictionary object of timing properties. extensions to other interfaces the web animations api adds some new features to document and element. extensions to the document interface document.timeline the documenttimeline object representing the default document timeline. document.getanima...
Using the Web Speech API - Web APIs
android speech, etc. note: on some browsers, like chrome, using speech recognition on a web page involves a server-based recognition engine. your audio is sent to a web service for recognition processing, so it won't work offline. demo to show simple usage of web speech recognition, we've written a demo called speech color changer. when the screen is tapped/clicked, you can say an html color
keyword, and the app's background color will change to that color. to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop browser, or navigate to the live demo url in a supporting mobile browser like chrome. browser support support for web speech api speech recognition is curently limited to chrome for desktop and and...
...turns a message reporting the character number and name that the speech was paused at. utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } finally, we call blur() on the text input. this is mainly to hide the
keyboard on firefox os. inputtxt.blur(); } updating the displayed pitch and rate values the last part of the code simply updates the pitch/rate values displayed in the ui, each time the slider positions are moved. pitch.onchange = function() { pitchvalue.textcontent = pitch.value; } rate.onchange = function() { ratevalue.textcontent = rate.value; } ...
Window.pkcs11 - Web APIs
for more information on installing pkcs11 modules, see installing pkcs11 modules. see bug 326628 for details on why the property was removed. ...
...iscouraged since it could be removed at any time. try to avoid using it. summary returns the pkcs11 object, which is used to install drivers and other software associated with the pkcs11 protocol. if pkcs11 isn't supported, this property returns null. note: this property has been returned null since gecko 1.9.0.14 (firefox 3.0.14) and removed in gecko 29.0 (firefox 29 / thunderbird 29 / seamon
key 2.26)) for security reasons. for more information on installing pkcs11 modules, see installing pkcs11 modules. see bug 326628 for details on why the property was removed. syntax objref = window.pkcs11 example window.pkcs11.addmodule(smod, secpath, 0, 0); notes see nsidompkcs11 for more information about how to manipulate pkcs11 objects. specification not part of specification. ...
Window.sidebar - Web APIs
end users can use the "load this bookmark in the sidebar" option instead. also see creating a firefox sidebar. ...
... end users can use the "load this bookmark in the sidebar" option instead. also see creating a firefox sidebar. ...
WindowOrWorkerGlobalScope.setInterval() - Web APIs
an anonymous function to call your callback, although this solution is a bit more expensive. example: var intervalid = setinterval(function() { myfunc('one', 'two', 'three'); }, 1000); another possibility is to use function's bind. example: var intervalid = setinterval(function(arg1) {}.bind(undefined, 10), 1000); inactive tabs requires gecko 5.0(firefox 5.0 / thunderbird 5.0 / seamon
key 2.2) starting in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamon
key 2.2), intervals are clamped to fire no more often than once per second in inactive tabs. the "this" problem when you pass a method to setinterval() or any other function, it is invoked with the wrong this value. this problem is explained in detail in the javascript reference. explanation code executed by setinterval() run...
...ire no more often than once per second in inactive tabs. the "this" problem when you pass a method to setinterval() or any other function, it is invoked with the wrong this value. this problem is explained in detail in the javascript reference. explanation code executed by setinterval() runs in a separate execution context than the function from which it was called. as a consequence, the this
keyword for the called function is set to the window (or global) object, it is not the same as the this value for the function that called settimeout. see the following example (which uses settimeout() instead of setinterval() – the problem, in fact, is the same for both timers): myarray = ['zero', 'one', 'two']; myarray.mymethod = function (sproperty) { alert(arguments.length > 0 ? this[spro...
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
when you pass a method to settimeout() (or any other function, for that matter), it will be invoked with a this value that may differ from your expectation. this issue is explained in detail in the javascript reference. explanation code executed by settimeout() is called from an execution context separate from the function from which settimeout was called. the usual rules for setting the this
keyword for the called function apply, and if you have not set this in the call or with bind, it will default to the window (or global) object. it will not be the same as the this value for the function that called settimeout. see the following example: myarray = ['zero', 'one', 'two']; myarray.mymethod = function (sproperty) { alert(arguments.length > 0 ? this[sproperty] : this); }; myarray.mym...
...timeout in a modern browser, you can use window.postmessage() as described here. note: the minimum delay, dom_min_timeout_value, is 4 ms (stored in a preference in firefox: dom.min_timeout_value), with a dom_clamp_timeout_nesting_level of 5. note: 4 ms is specified by the html5 spec and is consistent across browsers released in 2010 and onward. prior to (firefox 5.0 / thunderbird 5.0 / seamon
key 2.2), the minimum timeout value for nested timeouts was 10 ms. timeouts in inactive tabs throttled to ≥ 1000ms to reduce the load (and associated battery usage) from background tabs, timeouts are throttled to firing no more often than once per second (1,000 ms) in inactive tabs. firefox implements this behavior since version 5 (see bug 633421, the 1000ms constant can be tweaked through the ...
Sending and Receiving Binary Data - Web APIs
r i=0; i< longint8view.length; i++) { longint8view[i] = i % 256; } var xhr = new xmlhttprequest; xhr.open("post", url, false); xhr.send(myarray); this is building a 512-byte array of 8-bit integers and sending it; you can use any binary data you'd like, of course. note: support for sending arraybuffer objects using xmlhttprequest was added to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6). add information about other browsers' support here. submitting forms and uploading files please, read this paragraph. firefox-specific examples this example transmits binary content asynchronously, using the post method, and firefox's non-standard sendasbinary(). var req = new xmlhttprequest(); req.open("post", url, true); // set headers and mime-type appropriately req.setrequestheader...
... 741); req.sendasbinary(abody); line 4 sets the content-length header to 741, indicating that the data is 741 bytes long. obviously you need to change this value based on the actual size of the data being sent. line 5 uses the sendasbinary() method to initiate the request. note: this non-standard sendasbinary method is considered deprecated as of gecko 31 (firefox 31 / thunderbird 31 / seamon
key 2.28) and will be removed soon. the standard send(blob data) method can be used instead as explained above. you can also send binary content by passing an instance of the nsifileinputstream to send(). in that case, you don't have to set the content-length header yourself, as the information is fetched from the stream automatically: // make a stream from a file. var stream = components.classes["...
Using XMLHttpRequest - Web APIs
f this argument is true or not specified, the xmlhttprequest is processed asynchronously, otherwise the process is handled synchronously. a detailed discussion and demonstrations of these two types of requests can be found on the synchronous and asynchronous requests page. do not use synchronous requests outside web workers. note: starting with gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamon
key 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience. note: the constructor function xmlhttprequest isn't limited to only xml documents. it starts with "xml" because when it was created the main format that was originally used for asynchronous data exchange were xml handling responses there are several types of response attribut...
...we used the sendasbinary() method in conjunction with the readasbinarystring() method of the filereader api. as such, the above script makes sense only when you are dealing with small files. if you do not intend to upload binary content, consider instead using the formdata api. note: the non-standard sendasbinary method is considered deprecated as of gecko 31 (firefox 31 / thunderbird 31 / seamon
key 2.28) and will be removed soon. the standard send(blob data) method can be used instead. using formdata objects the formdata constructor lets you compile a set of
key/value pairs to send using xmlhttprequest. its primary use is in sending form data, but can also be used independently from a form in order to transmit user
keyed data. the transmitted data is in the same format the form's submit()...
XRInputSourceArray.entries() - Web APIs
each item in the array is an xrinputsource object. most frequently, you will use this in tandem with statements such as for...of. syntax let inputsourceiterator = xrinputsourcearray.entries(); for (let entry of xrinputsourcearray.entries()) { /* ... */ } parameters none. return value an iterator which can be used to walk through the list of xrinputsource objects included in the input source array. ...
...input() method. specifications specification status comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in information contained in a webidl file for information on how an iterable declaration in an interface definition causes entries(), foreach(),
keys(), and values() methods to be exposed from objects that implement the interface. ...
XRPose - Web APIs
see the article movement, orientation, and motion for further details and an example with thorough explanations of what's going on. properties xrpose.transform read only a xrrigidtransform which provides the position and orientation of the pose relative to the base xrspace. xrpose.emulatedposition read only a boolean value which is false if the position and orienta...
... boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer). if any component of the transform is computed or created artificially (such as by using mouse or
keyboard controls to move through space), this value is instead true, indicating that the transform is in part emulated in software. example <<<--- todo: needs example --->>> specifications specification status comment webxr device apithe definition of 'xrpose' in that specification. working draft initial definition. ...
ARIA: figure role - Accessibility
ether and consumed as a figure (which could include images, video, audio, code snippets, or other content) can be identified as a figure using role="figure". there are no hard and fast rules about how you should write your figure content. you should make sure that it is accessible just like any other content. for example, make sure it is perceivable by users of assistive technology, navigable by
keyboard as well as mouse, and so on. you can add a caption or label to your figure in a number of ways. you could add an id to an element containing content that describes the figure, and then reference that id inside an appropriate attribute on the figure to associate the figure with the label: <div role="figure" aria-labelledby="figure-1"> ... <p id="figure-1">text that describes the figure.
...les, states, and properties aria-describedby the id of an element containing reference text serving as a caption. aria-labelledby the id of an element containing text serving as a label. aria-label if there is no element containing text that could serve as a label, you can add the label directly as a value on the aria-label on the element with the figure role or on the <figure> element.
keyboard interactions no role specific
keyboard interactions. required javascript features no role specific javascript requirements. if you don't have control over the html semantics, you can improve the accessibility of html by adding these roles and properties with javascript. examples we could extend the initial example on the page to also identify a paragraph that provides a descriptive labe...
ARIA: Navigation Role - Accessibility
to main website locations --> </div> this is a website's main navigation. description the navigation role is a landmark role. landmark roles provide a way to identify the organization and structure of a web page. by classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically. screen readers use landmark roles to provide
keyboard navigation to important sections of a page. like the html <nav> element, navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation. if a page includes more than one navigation landmark, each should have a unique label. if two or more navigational landmark on a page have the same set of links, use the same l...
...nav> element will automatically communicate a section has a role of navigation. developers should always prefer using the correct semantic html element over using aria. associated wai-aria roles, states, and properties aria-label a brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label.
keyboard interactions none. required javascript features none. examples <div role="navigation" aria-label="customer service"> <ul> <li><a href="#">help</a></li> <li><a href="#">order tracking</li> <li><a href="#">shipping & delivery</a></li> <li><a href="#">returns</a></li> <li><a href="#">contact us</a></li> <li><a href="#">find a store</a></li> </ul> </div> ac...
Web applications and ARIA FAQ - Accessibility
how do assistive technologies work? assistive technologies use an api built into each operating system specifically designed to describe the roles, states, and structure of an application's user interface. for example, a screen reader uses this api to read the user interface with a text-to-speech engine, a magnifier uses it to highlight important or active areas of the screen, and an onscreen
keyboard might use it to provide the most efficient
keyboard layout for a given context or ui control. assitive technologies often access a page's dom as well through this api in order to understand the semantics and attributes of the page. aria provides a bridge between the world of the dom and the desktop. browsers expose aria-enabled elements to the assistive technology api as if they were native...
...windows accessibility inspector on os x accprobe on linux firebug's dom inspector the accessibility inspector for firebug the audits tab in chrome devtools there are several free or open source screen readers that can be used to do hands-on testing with aria. they include: orca for linux nvda for windows voiceover is built into os x when you're testing with a screen reader, keep two
key points in mind: casual testing with a screen reader user can never replace feedback, testing, and help from real users. there's more to accessibility than just supporting screen readers. try testing with a variety of usability and accessibility techniques. other helpful testing tools and techniques for aria-enabled applications and widgets: yahoo!'s aria bookmarklets fluid project's sim...
ARIA - Accessibility
is not otherwise a mechanism. for example, aria enables accessible navigation landmarks in html4, javascript widgets, form hints and error messages, live content updates, and more. many of these widgets were later incorporated into html5, and developers should prefer using the correct semantic html element over using aria, if such an element exists. for instance, native elements have built-in
keyboard accessibility, roles and states. however, if you choose to use aria, you are responsible for mimicking (the equivalent) browser behaviour in script. here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> </div> this progress bar is built using a <div>, which has no meaning. unfortunately, th...
... aria landmarks a nice intro to using aria landmarks to improve web page navigation for screen reader users. see also, aria landmark implementation notes and examples on real sites (updated as of july 2011). improving form accessibility aria is not just for dynamic content! learn how to improve accessibility of html forms using additional aria attributes. aria for scripted widgets writing
keyboard-navigable javascript widgets built-in elements like <input>, <button> etc have built-in
keyboard accessibility. if you 'fake' these with <div>s and aria, you must ensure your widgets are
keyboard accessible. live regions live regions provide suggestions to screen readers about how to handle changes to the contents of a page. using aria live regions to announce content changes a quick su...
Cognitive accessibility - Accessibility
as a skiplink, to bypass blocks of content that are repeated on multiple web pages. focus order makes sense the order of focus for interactive elements should make sense. to achieve this, the dom order should match the visual order, which in turn should match the tabbing order. if the tab order jumps around, especially in a way that does not match the visual order when navigating with a
keyboard, users can become disoriented. focused elements should be visibly focused when a user navigates using a
keyboard, the ui should make it obvious which element currently has focus. don't alter or remove the browser's default :focus styling, unless you're making focus even more obvious. link text conveys meaning the link's text should clearly and concisely communicate what the user s...
...used in an unusual way, or has been given a specialized meaning. for these users, the ability to read and understand may depend on the availability of specific definitions or the expanded forms of acronyms or abbreviations. some users may experience great difficulty in recognizing written words yet they understand extremely complex and sophisticated documents when the text is read aloud, or when
key processes and ideas are illustrated visually. declare the language of the page and any content not in that main language. the language of every page must be declared by using the lang attribute on the <html> element. include the lang attribute again on text that is in a language other than the main language of the document. proper use of lang allows some screen readers to announce the t...
Understandable - Accessibility
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 pages containing the acronym expansion and explanation, or at the very least include them in the surrounding text in context. see abbreviations. 3.1.5 reading level (aaa) if text is provided that requires a higher reading level that lower secondary educa...
...r disorientate the user. this is a matter of sensible design — people don't want interfaces to surprise them; they want things to be intuitive and behave as expected. for example, focusing a navigation menu option should not change the displayed page — it should be activated before the display changes. globaleventhandlers.onfocus contains some useful information. also see building
keyboard accessibility back in for some useful implementation ideas. 3.2.2 on input (a) when data is inputted into a control, or a setting is changed, context should not be changed unexpectedly. the user should be warned/advised of the impending change before it occurs. again, sensible design should be implemented. for example, if pressing a button causes the application to exit...
Accessibility
an individual's physical and cognitive abilities and no matter how they access the web. "the web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. ...
...ooks at mobile-specific accessibility considerations. other documentation understanding the web content accessibility guidelines this set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the w3c web content accessibility guidelines 2.0 (wcag 2.0 or just wcag, for the purposes of this writing).
keyboard-navigable javascript widgets until now, web developers who want to make their styled <div> and <span> based widgets accessible have lacked the proper techniques.
keyboard accessibility is part of the minimum accessibility requirements which a developer should be aware of. aria a collection of articles to learn how to use aria to make your html documents more accessible. assistive technol...
-moz-context-properties - CSS: Cascading Style Sheets
with the embedding element (its context) to have the image adopt property values set on the embedding element. to do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the context-fill value. syntax /*
keyword values */ -moz-context-properties: fill; -moz-context-properties: fill, stroke; /* global values */ -moz-context-properties: inherit; -moz-context-properties: initial; -moz-context-properties: unset; values fill expose the fill value set on the image to the embedded svg. stroke expose the stroke value set on the image to the embedded svg. fill-opacity expose the fill-opacity value ...
...note that if a color is set directly on the svg, but then the context color is also specified, the context color overrides the direct color. note: you can find a working exam...
-moz-user-focus - CSS: Cascading Style Sheets
the element will be skipped in the tab sequence. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes focus. ...
...ll be skipped in the tab sequence. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes focus. instead, xbl creates an anonymous html <input> element inside the textbox, and that element is what receives focus. you can stop the textbox from taking
keyboard focus by setting its tab index to -1, and from taking mouse focus by preventing the default action of mousedown events. syntax values ignore the element does not accept the
keyboard focus and will be skipped in the tab order. normal the element can accept the
keyboard focus. select-after ? select-before ? select-menu ? select-same ? select-all ? none ? formal definition...
-webkit-mask-composite - CSS: Cascading Style Sheets
the -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another. mask images are composited in the opposite order that they are declared with the -webkit-mask-image property. ...
... syntax values clear overlapping pixels in the source mask image and the destination mask image are cleared. copy the source mask image replaces the destination mask image. source-over the source mask image is rendered over the destination mask image. source-in overlapping pixels in the source mask image and the destination mask image are replaced by the pixels of the source mas...
system - CSS: Cascading Style Sheets
algorithm to be used for converting the integer value of a counter to a string representation. it is used in a @counter-style to define the behavior of the defined style. if the algorithm specified in the system descriptor is unable to construct the representation for a particular counter value, then that value's representation will be constructed using the fallback system provided. ...
...onstruct the representation for a particular counter value, then that value's representation will be constructed using the fallback system provided. syntax /*
keyword values */ system: cyclic; system: numeric; system: alphabetic; system: symbolic; system: additive; system: fixed; /* combined values */ system: fixed 3; system: extends decimal; this may take one of three forms: one of the
keyword values cyclic, numeric, alphabetic, symbolic, additive, or fixed. the
keyword value fixed along with an integer. the
keyword value or extends along with a @counter-style name. cyclic cycles through the list of symbols provided. once the end of the list of symbols is reached, it will loop back to the beginning and start over. this system is useful for simple bullet styles with just ...
forced-colors - CSS: Cascading Style Sheets
ts specifics are subject to change. syntax the forced-colors media feature indicates whether or not the browser is currently in forced-colors mode. values none forced colors mode is not active; the page’s colors are not being forced into a limited palette. active indicates that forced colors mode is active. the browser provides the color palette to authors through the css system color
keywords and, if appropriate, it triggers the appropriate value of prefers-color-scheme so that authors can adapt the page. usage notes properties affected by forced-color mode in forced colors mode, the values of the following properties are treated as if they have no author-level values specified. that is, user-specified values (if any) or browser-specified values are used instead. color fi...
...the values of the following properties are treated as if they have no author-level values specified. that is, user-specified values (if any) or browser-specified values are used instead. color fill stroke text-decoration-color text-emphasis-color border-color outline-color column-rule-color scrollbar-color -webkit-tap-highlight-color box-shadow text-shadow you can use system color
keywords with any property other than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode. user preferences currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely rely on the settings provided by...
update - CSS: Cascading Style Sheets
none once it has been rendered, the layout can no longer be updated. example: documents printed on paper. slow the layout may change dynamically according to the usual rules of css, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. examples: e-book readers or severely underpowered devices. ...
...animation. examples: e-book readers or severely underpowered devices. fast the layout may change dynamically according to the usual rules of css, and the output device is not unusually constrained in speed, so regularly-updating things like css animations can be used. example: computer screens. examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @
keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } } result specifications specification status comment media queries level 4the definition of 'update' in that specification. candidate recommendation initial definition.
size - CSS: Cascading Style Sheets
the size css at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page. most of the time, this size corresponds to the target size of the printed page if applicable. size may either be defined with a "scalable"
keyword (in this case the page will fill the available dimensions) or with absolute dimensions. syntax /*
keyword values for scalable size */ size: auto; size: portrait; size: landscape; /* <length> values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /*
keyword values for absolute size */ size: a4; size: b5; size: jis-b4; size: letter; /* mixing size and orientation */ size: a4 portrait; values auto the user agent decides the size of the page. in ...
... used dimensions for personal printing.) a3 this matches the standard, iso dimensions: 297mm x 420mm. b5 this matches the standard, iso dimensions: 176mm x 250mm. b4 this matches the standard, iso dimensions: 250mm x 353mm. jis-b5 this correspond to the jis standard dimensions: 182mm x 257mm. jis-b4 this correspond to the jis standard dimensions: 257mm x 364mm. letter this
keyword is a equivalent to the dimensions of letter paper in north america i.e. 8.5in x 11in. legal this
keyword is a equivalent to the dimensions of legal papers in north america i.e. 8.5in x 14in. ledger this
keyword is a equivalent to the dimensions of ledger pages in north america i.e. 11in x 17in. formal definition related at-rule@pageinitial valueautocomputed valueas specified, b...
At-rules - CSS: Cascading Style Sheets
given condition. @document — a conditional group rule that will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. (deferred to level 4 of css spec) @page — describes the aspect of layout changes that will be applied when printing the document. @font-face — describes the aspect of an external font to be downloaded. @
keyframes — describes the aspect of intermediate steps in a css animation sequence. @viewport — describes the aspects of the viewport for small screen devices. (currently at the working draft stage) @counter-style — defines specific counter styles that are not part of the predefined set of styles. (at the candidate recommendation stage, but only implemented in gecko as of writing) @f...
... ...
Using URL values for the cursor property - CSS: Cascading Style Sheets
gecko 1.8 supports url values for the css cursor property on windows and linux. mac support was added in gecko 2 (firefox 4). this allows specifying arbitrary images as mouse cursors — any image format supported by gecko can be used. syntax the basic (css 2.1) syntax for this property is: cursor: [ <url> , ]* <
keyword> this means that zero or more urls may be specified (comma-separated), which must be followed by one of the
keywords defined in the css specification, such as auto or pointer. for example, the following value would be allowed: cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; this will first try loading foo.cur. if that file does not exist or is not valid for some other reason, bar.gif is tried, and if that can't be used either, auto will be used. suppo...
...e following value would be allowed: cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; this will first try loading foo.cur. if that file does not exist or is not valid for some other reason, bar.gif is tried, and if that can't be used either, auto will be used. support for the css 3 syntax for cursor values got added in gecko 1.8 (firefox 1.5): cursor: [ <uri> [ <x> <y> ]? , ]* <
keyword> it allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. if none are specified, the coordinates of the hotspot are read from the file itself (for cur and xbm files) or are set to the top left corner of the image. an example of the css3 syntax is: .foo { cursor: auto; cursor: url(cursor1.png) 4 12, auto; } .bar { cu...
Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
ed, as the content is treated as a single alignment subject. justify-self the justify-self property is used to align an item inside its containing block on the inline axis. this property does not apply to floated elements or table cells. absolutely positioned elements the alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. the normal
keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start. align-self the align-self property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. it also does not apply to table cells. absolutely positioned elements the alignment container is the positioned block, accounting for the ...
...replaced element, in which case it resolves to start. align-self the align-self property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. it also does not apply to table cells. absolutely positioned elements the alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. the normal
keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start. aligning in these layout methods today as we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the ali...
Using feature queries - CSS: Cascading Style Sheets
k dates back to css1. however the values display: flex and display: grid are newer. there are often additional values added to properties in css, and so the fact that you have to test for property and value means that you can detect support for these values. ...
... for the opposite by adding in the not
keyword: @supports not (property: value) { css rules to apply } the css inside the following example feature query will run if the browser does not support row-gap. testing for more than one feature you may need to test support for more than one property in your feature query. to do so, you can include a list of features to test for, separated by and
keywords: @supports (property1: value) and (property2: value) { css rules to apply } for example, if the css you want to run requires that the browser supports css shapes and css grid, you could create a rule which checks for both of these things. the following rule will only return true if both shape-outside: circle() and display: grid are supported by the browser. you can also use or, if one...
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
explained that flexbox is writing mode aware. writing modes are fully detailed in the css writing modes specification, which details how css supports the various different writing modes that exist internationally. we need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. understanding block and inline directions is
key to new layout methods. it is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. see this article for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons. the writing modes the writing modes specification defines ...
...he basic concepts article, flex items can be allowed to wrap but, once they do so, each line becomes a flex container of its own. when space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other. if we create a very similar layout using grid, we can control the layout in both rows and columns. these examples point to another
key difference between these layout methods. in grid layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. in flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves. in some cases you could happily use either layout method, but as you become...
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
rid-template-rows: repeat(3, 100px); grid-gap: 1em 20px; } in terms of line-based positioning of items, the gap acts as if the line has gained extra width. anything starting at that line starts after the gap and you cannot address the gap or place anything into it. if you want gutters that act more like regular tracks you can of course define a track for the purpose instead. using the span
keyword in addition to specifying the start and end lines by number, you can specify a start line and then the number of tracks you would like the area to span. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapp...
...the following two examples will create the same grid area. in the first we set the start row line, then the end line we explain that we want to span 3 lines. the area will start at line 1 and span 3 lines to line 4. .box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: span 3; } in the s...
Logical properties for sizing - CSS: Cascading Style Sheets
e. try changing the example below to vertical-rl, as with the first example, to see the effect it has. i am using min-height in the first example and min-block-size in the second. max-width and max-height example finally you can use max-inline-size and max-block-size as logical replacements for max-width and max-height. try playing with the below example in the same way as before. ...
...second. max-width and max-height example finally you can use max-inline-size and max-block-size as logical replacements for max-width and max-height. try playing with the below example in the same way as before. logical
keywords for resize the resize property sets whether or not an item can be resized and has physical values of horizontal and vertical. the resize property also has logical
keyword values. using resize: inline allows resizing in the inline dimension and resize: block allow resizing in the block dimension. the
keyword value of both for the resize property works whether you are thinking physically or logically. it sets both dimensions at once. try playing with the below example. note that currently the logical values for resize are only supported by firefox. ...
Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
the scroll-snap-type property is used on the scroll container to state the type and direction of scrolling. ...
...ion that scrolling will snap to. the below example demonstrates scroll snapping along the y axis, with scroll-snap-align used on the section element to dictate the point the scrolling should stop. using scroll-snap-type the scroll-snap-type property needs to know the direction in which scroll snapping happens. this could be x or y, or the logical mappings block or inline. you can also use the
keyword both to have scroll snapping work along both axes. you can also pass in the
keywords mandatory, or proximity. the mandatory
keyword tells the browser whether the content has to snap to a certain point, no matter where the scroll is. the proximity
keyword means that it may snap to the point, but does not have to. using mandatory gives a very consistent experience — you know that the brows...
Shorthand properties - CSS: Cascading Style Sheets
background-color: red; background: url(images/bg.gif) no-repeat left top; will not set the color of the background to red but to background-color's default, transparent, as the second rule has precedence. only the individual properties values can inherit. as missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. the
keyword inherit can be applied to a property, but only as a whole, not as a
keyword for one value or another. that means that the only way to make some specific value to be inherited is to use the longhand property with the
keyword inherit. shorthand properties try not to force a specific order for the values of the properties they replace. this works well when these properties use values of differe...
... of the link? do you understand why the third and fourth links are the color that they are? check the description of the values above if not. which of the links will change color if you define a new color for the <a> element — for example a { color: red; }? see cascade and inheritance or introducing the css cascade for more information about how inheritance works in css. see also css
key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. definitions of value syntax, shorthand properties and replaced elements. shorthand properties: animation, background, border, border-bottom, border-color, border-l...
background-position-x - CSS: Cascading Style Sheets
gin. 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 value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
...ned with the right edge of the container, thus a value of 50% horizontally centers the background image. formal definition initial valueleftapplies toall elementsinheritednopercentagesrefer to width of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin
keywordanimation typediscrete formal syntax [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#where <length-percentage> = <length> | <percentage> examples basic example the following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately. html <...
background-position-y - CSS: Cascading Style Sheets
gin. 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 value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
...gned with the bottom edge of the container, thus a value of 50% vertically centers the background image. formal definition initial valuetopapplies toall elementsinheritednopercentagesrefer to height of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin
keywordanimation typediscrete formal syntax [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#where <length-percentage> = <length> | <percentage> examples basic example the following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately. html <...
background - CSS: Cascading Style Sheets
size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetsbackground-size: relative to the background positioning areacomputed valueas each of the properties of the shorthand:background-image: as specified, but with <url> values made absolutebackground-position: a list, each item consisting of two
keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentagebackground-size: as specified, but with relative lengths converted into absolute lengthsbackground-repeat: a list, each item consisting of two
keywords, one per dimensionbackground-origin: as specifiedbackground-clip: as specifiedbackground-attachment: as...
...entage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting backgrounds with color
keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p> css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; } result specifications specification status comment css backgrounds ...
border-bottom-style - CSS: Cascading Style Sheets
css property sets the line style of an element's bottom border. 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. note: the specification doesn't define how borders of different styles connect in the corners. ...
... formal definition initial valuenoneapplies toall elements. it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples demonstrating all border styles html ...
border-color - CSS: Cascading Style Sheets
css level 2 (revision 1)the definition of 'border-color' in that specification. recommendation the property is now a shorthand property. css leve...
...n: 0.5em; padding: 0.5em; } ul { margin: 0; list-style: none; } result specifications specification status comment css logical properties and values level 1 editor's draft added the logical
keyword. css backgrounds and borders module level 3the definition of 'border-color' in that specification. candidate recommendation the transparent
keyword has been removed as it is now a part of the <color> data type. css level 2 (revision 1)the definition of 'border-color' in that specification. recommendation the property is now a shorthand property. css level 1the definition of 'border-color' in that specification. recommendation initial definition. ...
border-image - CSS: Cascading Style Sheets
/ <'border-image-outset'> ]? | <'border-image-repeat'> examples bitmap in th...
...r-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacomputed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the
keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with relative lengths converted into absolute lengthsanimation typediscrete ...
border-left-style - CSS: Cascading Style Sheets
le css property sets the line style of an element's left border. 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. note: the specification doesn't define how borders of different styles connect in the corners. ...
... formal definition initial valuenoneapplies toall elements. it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1...
border-right-style - CSS: Cascading Style Sheets
e css property sets the line style of an element's right border. 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. note: the specification doesn't define how borders of different styles connect in the corners. ...
... formal definition initial valuenoneapplies toall elements. it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples border styles html <table> <tr> ...
border-top-style - CSS: Cascading Style Sheets
p-style css property sets the line style of an element's top border. 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 specification doesn't define how borders of different styles connect in the corners. ...
... formal definition initial valuenoneapplies toall elements. it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1...
bottom - CSS: Cascading Style Sheets
xed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored. syntax /* <length> values */ bottom: 3px; bottom: 2.4em; /* <percentage>s of the height of the containing block */ bottom: 10%; /*
keyword value */ bottom: auto; /* global values */ bottom: inherit; bottom: initial; bottom: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the bottom edge of the containing block. for relatively positioned elements, the distance that the element is moved above its normal position. <percentage> a <p...
...positioned elements, the distance of the element from its normal position is based on the top property; or if top is also auto, the element is not moved vertically at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>, or the auto
keyword. formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and fixe...
box-lines - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard. see flexbox for information about the current standard. the box-lines css property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes). /*
keyword values */ box-lines: single; box-lines: multiple; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; by default a horizontal box will lay out its children in a single row, and a vertical box will lay out its children in a single column. this behavior can be changed using the box-lines property. the default value is single, which means that all elements will be placed in a single row or column, and any e...
...ther than 0 stretch as necessary in an attempt to fill the remaining space on the lines. each line computes flexes independently, so only elements on that line are considered when evaluating box-flex and box-flex-groups. the packing of elements in a line, as specified by the box-pack property, is also computed independently for each line. syntax the box-lines property is specified as one of the
keyword values listed below. values single box elements lay out in a single row or column. multiple box elements layout in multiple rows or columns. formal definition initial valuesingleapplies tobox elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax single | multiple examples simple usage example in the original version of the spec, box-lines allowed you...
box-orient - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard. see flexbox for information about the current standard. the box-orient css property sets whether an element lays out its contents horizontally or vertically. /*
keyword values */ box-orient: horizontal; box-orient: vertical; box-orient: inline-axis; box-orient: block-axis; /* global values */ box-orient: inherit; box-orient: initial; box-orient: unset; syntax the box-orient property is specified as one of the
keyword values listed below. values horizontal the box lays out its contents horizontally. vertical the box lays out its contents vertically. inline-axis (html) the box displays its children along the inline axis. block-axis (html) the box displa...
... description html dom elements lay out their contents along the inline-axis by default. this css property will only apply to html elements with a css display value of box or inline-box. ...
break-after - CSS: Cascading Style Sheets
ver the break-inside value). if any of the three concerned values is an avoid break value (avoid, avoid-page, avoid-region, or avoid-column), no such break will be applied at that point. once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value. syntax the break-after property is specified as one of the
keyword values from the list below. values generic break values auto allows, but does not force, any break (page, column, or region) to be inserted right after the principal box. avoid avoids any break (page, column, or region) from being inserted right after the principal box. always forces a page break right after the principal box. the type of this break is that of the immediately-cont...
... all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification. candidate recommendation adds the recto and verso
keywords. changes the media type of this property from paged to visual. defines the breaking algorithm with different kinds of breaks. css regions module level 1the definition of 'break-after' in that specification. working draft extends the property to handle region breaks. adds the avoid-region and region
keywords. css multi-column layout modulethe definition of 'break-after...
break-before - CSS: Cascading Style Sheets
er the break-inside value). if any of the three concerned values is an avoid break value (avoid, avoid-page, avoid-region, or avoid-column), no such break will be applied at that point. once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value. syntax the break-before property is specified as one of the
keyword values from the list below. values generic break values auto allows, but does not force, any break (page, column, or region) to be inserted right before the principal box. avoid avoids any break (page, column, or region) from being inserted right before the principal box. always forces a page break right after the principal box. the type of this break is that of the immediately-co...
...ll; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification. candidate recommendation adds the recto and verso
keywords. changes the media type of this property from paged to visual. defines the breaking algorithm with different kinds of breaks. css regions module level 1the definition of 'break-before' in that specification. working draft extends the property to handle region breaks. adds the avoid-region and region
keywords. css multi-column layout modulethe definition of 'break-befo...
break-inside - CSS: Cascading Style Sheets
the break-inside css property sets how page, column, or region breaks should behave inside a generated box. if there is no generated box, the property is ignored. /*
keyword values */ break-inside: auto; break-inside: avoid; break-inside: avoid-page; break-inside: avoid-column; break-inside: avoid-region; /* global values */ break-inside: inherit; break-inside: initial; break-inside: unset; each possible break point (in other words, each element boundary) is affected by three properties: the break-after value of the previous element, the break-before value of the next element, and the break-inside value of the containing element. to determine if a break must be done, the following rules are applied: if any of the three concerned values is a forced break value (always, left, right, pa...
...ver the break-inside value. if any of the three concerned values is an avoid break value (avoid, avoid-page, avoid-region, or avoid-column), no such break will be applied at that point. once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value. syntax the break-inside property is specified as one of the
keyword values from the list below. values auto allows, but does not force, any break (page, column, or region) to be be inserted within the principal box. avoid avoids any break (page, column, or region) from being inserted within the principal box. avoid-page avoids any page break within the principal box. avoid-column avoids any column break within the principal box. avoid-region av...
column-rule-width - CSS: Cascading Style Sheets
the column-rule-width css property sets the width of the line drawn between columns in a multi-column layout. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... syntax /*
keyword values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* <length> values */ column-rule-width: 1px; column-rule-width: 2.5em; /* global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset; the column-rule-width property is specified as a single <'border-width'> value. values <'border-width'> is a
keyword defined by border-width describing the width of the rule. it may be either a <length> or one of the thin, medium, or thick
keywords. formal definition initial valuemediumapplies tomulticol elementsinheritednocomputed valuethe absolute length; 0 if the column-rule-style is none or hiddenanimation typea length formal syntax <'border-width'> examples setting a thick column rule html <p>t...
column-span - CSS: Cascading Style Sheets
values none the element does not span multiple columns. all the element spans across all columns. content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. ...
... values none the element does not span multiple columns. all the element spans across all columns. content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. ...
column-width - CSS: Cascading Style Sheets
b.com/mdn/interactive-examples and send us a pull request. this property can help you create responsive designs that fit different screen sizes. especially in the presence of the column-count property (which has precedence), you must specify all related length values to achieve an exact column width. in horizontal text these are width, column-width, column-gap, and column-rule-width. syntax /*
keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* global values */ column-width: inherit; column-width: initial; column-width: unset; the column-width property is specified as one of the values listed below. values <length> indicates the optimal column width. the actual column width may differ from the specified value...
...si enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> css .content-box { column-width: 100px; } result specifications specification status comment css writing modes level 4the definition of 'column-width' in that specification. candidate recommendation adds intrinsic sizes via the
keywords min-content, max-content, fill-available, and fit-content. css multi-column layout modulethe definition of 'column-width' in that specification. working draft initial definition. ...
conic-gradient() - CSS: Cascading Style Sheets
if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two option...
...(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) ); values <angle> preceded by the from
keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction. <position> using the same length, order and
keyterm values as the background-position property, the position defines center of the gradient. if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axis). <color-hint> th color-hint is an interpolation hint defining how the...
contain - CSS: Cascading Style Sheets
f widgets that are all independent, as it can be used to prevent each widget's internals from having side effects outside of the widget's bounding-box. note: if applied (with value: paint, strict or content), this property creates: a new containing block (for the descendants whose position property is absolute or fixed). a new stacking context. a new block formatting context. syntax /*
keyword values */ contain: none; contain: strict; contain: content; contain: size; contain: layout; contain: style; contain: paint; /* multiple
keywords */ contain: size paint; contain: size layout paint; /* global values */ contain: inherit; contain: initial; contain: unset; the contain property is specified as either one of the following: using a single none, strict, or content
keyword. usin...
... values none indicates the element renders as normal, with no containment applied. strict indicates that all containment rules except style are applied to the element. this is equivalent to contain: size layout paint. ...
<display-inside> - CSS: Cascading Style Sheets
syntax valid <display-inside> values: flow the element lays out its contents using flow layout (block-and-inline layout). if its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. otherwise it generates a block container box. ...
... syntax valid <display-inside> values: flow the element lays out its contents using flow layout (block-and-inline layout). if its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. otherwise it generates a block container box. ...
<display-legacy> - CSS: Cascading Style Sheets
this page details those values. syntax valid <display-legacy> values: inline-block the element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). it is equivalent to inline flow-root. inline-table the inline-table value does not have a direct mapping in html. it behaves like an html <table> element, but as an inline box, rather than a block-level box. inside the table box is a block-level context. it is equivalent to inline table. ...
...line table. inline-flex the element behaves like an inline element and lays out its content according to the flexbox model. it is equivalent to inline flex. inline-grid the element behaves like an inline element and lays out its content according to the grid model. it is equivalent to inline grid. examples in the below example, we are creating an inline flex container with the legacy
keyword inline-flex. html <div class="container"> <div>flex item</div> <div>flex item</div> </div> not a flex item css .container { display: inline-flex; } result in the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type. .container { display: inline flex; } specifications spe...
<display-listitem> - CSS: Cascading Style Sheets
note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. if no outer value is specified, the principal box will have an outer display type of block. ...
...marker pseudo-element with the content specified by its list-style properties (for example a bullet point) together with a principal box of the specified type for its own contents. syntax a single value of list-item will cause the element to behave like a list item. this can be used together with list-style-type and list-style-position. list-item can also be combined with any <display-outside>
keyword and the flow or flow-root <display-inside>
keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. if no outer value is specified, the principal box will have an outer display type of block. examples html <div class="fake-list">i will display as a list item</div> css .fake-list { display: list-item; list-style-positio...
filter - CSS: Cascading Style Sheets
%; height:auto; } #img3 { height:100%; } drop-shadow() the drop-shadow() function applies a drop shadow effect to the input image. a drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. the function accepts a parameter of type <shadow> (defined in css3 backgrounds), with the exception that the inset
keyword is not allowed. this function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance. the parameters of the <shadow> parameter are as follows: <offset-x> <offset-y> (required) these are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. negative...
... placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set). <blur-radius> (optional) this is a third <length> value. the larger this value, the bigger the blur, so the shadow becomes bigger and lighter. negative values are not allowed. if not specified, it will be 0 (the shadow's edge is sharp). <color> (optional) see <color> values for possible
keywords and notations. if not specified, the color used depends on the browser - it is usually the value of the <color> property, but note that safari currently paints a transparent shadow in this case. filter: drop-shadow(16px 16px 10px black) <svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddev...
flex - CSS: Cascading Style Sheets
available in its flex container. 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. ...
...lex-shrink | flex-basis */ flex: 2 2 10%; /* global values */ flex: inherit; flex: initial; flex: unset; the flex property may be specified using one, two, or three values. one-value syntax: the value must be one of: a <number>: in this case it is interpreted as flex: <number> 1 0; the <flex-shrink> value is assumed to be 1 and the <flex-basis> value is assumed to be 0. one of the
keywords: none, auto, or initial. two-value syntax: the first value must be a <number> and it is interpreted as <flex-grow>. the second value must be one of: a <number>: then it is interpreted as <flex-shrink>. a valid value for width: then it is interpreted as <flex-basis>. three-value syntax: the values must be in the following order: a <number> for <flex-grow>. a <num...
font-kerning - CSS: Cascading Style Sheets
thub.com/mdn/interactive-examples and send us a pull request. kerning defines how letters are spaced. in well-kerned fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be. in the image below, for instance, the examples on the left do not use kerning, while the ones on the right do: syntax the font-kerning property is specified as one of the
keyword values listed below. values auto the browser determines whether font kerning should be used or not. for example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text. normal font kerning information stored in the font must be applied. none font kerning information stored in the font is disabled. formal definition initial valueauto...
...g html <div id="kern"></div> <div id="nokern"></div> <textarea id="input">av t. ij</textarea> css div { font-size: 2rem; font-family: serif; } #nokern { font-kerning: none; } #kern { font-kerning: normal; } javascript let input = document.getelementbyid('input'); let kern = document.getelementbyid('kern'); let nokern = document.getelementbyid('nokern'); input.addeventlistener('
keyup', function() { kern.textcontent = input.value; /* update content */ nokern.textcontent = input.value; }); kern.textcontent = input.value; /* initialize content */ nokern.textcontent = input.value; specifications specification status comment css fonts module level 3the definition of 'font-kerning' in that specification. candidate recommendation initial...
font-language-override - CSS: Cascading Style Sheets
the font-language-override css property controls the use of language-specific glyphs in a typeface. /*
keyword value */ font-language-override: normal; /* <string> values */ font-language-override: "eng"; /* use english glyphs */ font-language-override: "trk"; /* use turkish glyphs */ /* global values */ font-language-override: initial; font-language-override: inherit; font-language-override: unset; by default, html's lang attribute tells browsers to display glyphs designed specifically for that language. for example, a lot of fonts have a special character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two versions of the "i," one with a dot (i) and one wi...
...-override property lets you override the typeface behavior for a specific language. this is useful, for example, when the typeface you're using lacks proper support for the language. for instance, if a typeface doesn't have proper rules for the azeri language, you can force the font to use turkish glyphs, which follow similar rules. syntax the font-language-override property is specified as the
keyword normal or a <string>. values normal tells the browser to use font glyphs that are appropriate for the language specified by the lang attribute. this is the default value. <string> tells the browser to use font glyphs that are appropriate for the language specified by the string. the string must match a language tag found in the opentype language system. for example, "eng" is english, a...
font-style - CSS: Cascading Style Sheets
style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use font-synthesis to control this behavior). syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10deg; /* global values */ font-style: inherit; font-style: initial; font-style: unset; the font-style property is specified as a single
keyword chosen from the list of values below, which can optionally include an angle if the
keyword is oblique. values normal selects a font that is classified as normal within a font-family. italic selects a font that is classified as italic. if no italic version of the face is available, one classified as oblique is used instead. if neither is available, the style is artificially simulated. ...
...anted towards the beginning. in general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm). variable fonts variable fonts can offer a fine control over the degree to which an oblique face is slanted. you can select this using the <angle> modifier for the oblique
keyword. for truetype or opentype variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. see font-variation-settings. for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in which font-style: oblique can accept an <angle>. html <header> ...
font-variant-alternates - CSS: Cascading Style Sheets
the font-variant-alternates css property controls the usage of alternate glyphs. these alternate glyphs may be referenced by alternative names defined in @font-feature-values. ...
...ont-variant-alternates: unset; the @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with opentype parameters. this property allows those human-readable names (defined in @font-feature-values) in the stylesheet. syntax this property may take one of two forms: either the
keyword normal or one or more of the other
keywords and functions listed below, space-separated, in any order. values normal this
keyword deactivates alternate glyphs. historical-forms this
keyword enables historical forms — glyphs that were common in the past but not today. it corresponds to the opentype value hist. stylistic() this function enables stylistic alternates for individual c...
font-variant-caps - CSS: Cascading Style Sheets
ds of i (one with the dot, one without) and two case pairings: i/İ and ı/i. in german (de), the ß may become ẞ (u+1e9e) in uppercase. in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (άι/ΑΪ). ...
...in each case, if the font doesn't support the opentype value, then it synthesizes the glyphs. values normal deactivates of the use of alternate glyphs. small-caps enables display of small capitals (opentype feature: smcp). small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters. all-small-caps enables d...
font-variant-position - CSS: Cascading Style Sheets
the font-variant-position css property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript. the glyphs are positioned relative to the baseline of the font, which remains unchanged. these glyphs are typically used in <sub> and <sup> elements. /*
keyword values */ font-variant-position: normal; font-variant-position: sub; font-variant-position: super; /* global values */ font-variant-position: inherit; font-variant-position: initial; font-variant-position: unset; when the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs. these alternate glyphs share the same em-box and t...
...phically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs. these alternate glyphs share the same em-box and the same baseline as the rest of the font. they are merely graphically enhanced, and have no effect on the line-height and other box characteristics. syntax the font-variant-position property is specified as one of the
keyword values listed below. values normal deactivates alternate superscript and subscript glyphs. sub activates subscript alternate glyphs. if, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs. super activates superscript alternate glyphs. if, in a given run, one such glyph is not available for a character, ...
grid-area - CSS: Cascading Style Sheets
tom-ident>, all four longhands are set to that value. otherwise, it is set to auto. the grid-area property can also be set to a <custom-ident> which acts as a name for the area, which can then be placed using grid-template-areas. ...
... <custom-ident> if there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid item’s placement. note: named grid areas automatically generate implicit named lines of this form, so specifying ...
grid-column-end - CSS: Cascading Style Sheets
ion within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. 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. ...
... <custom-ident> if there is a named line with the name '<custom-ident>-end', it contributes the first such line to the grid item’s placement. note: named grid areas automatically generate implicit named lines of this form, so specifying gri...
grid-column-start - CSS: Cascading Style Sheets
the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. this start position defines the block-start edge of the grid area. 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. ...
...-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-start: span 3; grid-column-start: span somegridarea; grid-column-start: span somegridarea 5; /* global values */ grid-column-start: inherit; grid-column-start: initial; grid-column-start: unset; this property is specified as a single <grid-line> value. a <grid-line> value can be specified as: either the auto
keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the
keyword span together with either a <custom-ident> or an <integer> or both. values auto a
keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1. <custom-ident> if th...
grid-row-end - CSS: Cascading Style Sheets
ition within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. 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. ...
... <custom-ident> if there is a named line with the name '<custom-ident>-end', it contributes the first such line to the grid item’s placement. note: named grid areas automatically generate implicit named lines of this form, so specifying gri...
grid-row-start - CSS: Cascading Style Sheets
ion within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. 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. ...
...start: 2; grid-row-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-start: span 3; grid-row-start: span somegridarea; grid-row-start: 5 somegridarea span; /* global values */ grid-row-start: inherit; grid-row-start: initial; grid-row-start: unset; this property is specified as a single <grid-line> value. a <grid-line> value can be specified as: either the auto
keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the
keyword span together with either a <custom-ident> or an <integer> or both. values auto is a
keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1. <custom-ident> if...
grid-row - CSS: Cascading Style Sheets
oject, please clone https://github.com/mdn/interactive-examples and send us a pull request. if two <grid-line> values are specified, the grid-row-start longhand is set to the value before the slash, and the grid-row-end longhand is set to the value after the slash. ...
... <custom-ident> if there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid item’s placement. note: named grid areas automatically generate implicit named lines of this ...
grid-template - CSS: Cascading Style Sheets
reas. 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. ...
...there are no named grid areas. rows and columns will be implicitly generated; their size will be determined by the grid-auto-rows and grid-auto-columns properties. <'grid-template-rows'> / <'grid-template-columns'> sets grid-template-rows and grid-template-columns to the specified values, and sets grid-templ...
height - CSS: Cascading Style Sheets
ea. if box-sizing is set to border-box, however, it instead determines the height of the border area. 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 min-height and max-height properties override height. syntax /*
keyword value */ height: auto; /* <length> values */ height: 120px; height: 10em; /* <percentage> value */ height: 75%; /* global values */ height: inherit; height: initial; height: unset; values <length> defines the height as an absolute value. <percentage> defines the height as a percentage of the containing block's height. auto the browser will calculate and select a height for the sp...
...height: 100px; } #child { height: 50%; width: 75%; } result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification. editor's draft css box sizing module level 3the definition of 'height' in that specification. working draft added the max-content, min-content, fit-content
keywords. css level 2 (revision 1)the definition of 'height' in that specification. recommendation adds support for the <length> values and precises on which element it applies to. css level 1the definition of 'height' in that specification. recommendation initial definition. ...
image-orientation - CSS: Cascading Style Sheets
hould not be used for any other orientation adjustments; instead, the transform property should be used with the rotate <transform-function>. warning: this property is deprecated in the specification. its functionality may be moved into properties on the <img> and/or <picture> elements, with the possible exception of from-image. the flip and <angle> values were made obsolete in firefox 63. /*
keyword values */ image-orientation: none; image-orientation: from-image; /* use exif data from the image */ /* global values */ image-orientation: inherit; image-orientation: initial; image-orientation: unset; /* obsolete values. obsolete since gecko 63 */ image-orientation: 90deg; /* rotate 90deg */ image-orientation: 90deg flip; /* rotate 90deg, and flip it horizontally */ image-orientation: fli...
...gle> value is applied. if no <angle> is given, 0deg is used. description this property is intended only to be used for the purpose of correcting the orientation of images which were shot with the camera rotated. it should not be used for arbitrary rotations. for any purpose other than correcting an image's orientation due to how it was shot or scanned, use a transform property with the rotate
keyword to specify rotation. this includes any user-directed changes to the orientation of the image, or changes required for printing in portrait versus landscape orientation. if used in conjunction with other css properties, such as a <transform-function>, any image-orientation rotation is applied before any other transformations. formal definition initial value0degapplies toall elementsinherite...
ime-mode - CSS: Cascading Style Sheets
it was introduced by microsoft with internet explorer 5 as a proprietary extension: -ms-ime-mode attribute | imemode property. note: in general, it's not appropriate for a public web site to change the ime mode. ...
...as introduced by microsoft with internet explorer 5 as a proprietary extension: -ms-ime-mode attribute | imemode property. note: in general, it's not appropriate for a public web site to change the ime mode. this property should only be used for private web applications or to undo the property if it was previously set by legacy code. syntax the ime-mode property is specified using one of the
keyword values listed below. values auto no change is made to the current input method editor state. this is the default. normal the ime state should be normal; this value can be used in a user style sheet to override the page's setting. this value is not supported by internet explorer. active the input method editor is initially active; text entry is performed through it unless the user spe...
Inheritance - CSS: Cascading Style Sheets
l value of that property (as specified in the property's summary). a typical example of a non-inherited property is the border property. given the style rules: p { border: medium solid; } ... and the markup: <p>this paragraph has <em>emphasized text</em> in it.</p> ... the words "emphasized text" will not have a border (since the initial value of border-style is none). notes the inherit
keyword allows authors to explicitly specify inheritance. it works on both inherited and non-inherited properties. you can control inheritance for all properties at once using the all shorthand property, which applies its value to all properties. for example: font { all: revert; font-size: 200%; font-weight: bold; } this reverts the style of the font property to the user agent's default unle...
... font-size: 200%; font-weight: bold; } this reverts the style of the font property to the user agent's default unless a user stylesheet exists, in which case that is used instead. then it doubles the font size and applies a font-weight of "bold". see also css values for controlling inheritance: inherit, initial, unset, and revert introducing the css cascade cascade and inheritance css
key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. definitions of value syntax, shorthand properties and replaced elements. ...
initial-letter-align - CSS: Cascading Style Sheets
values auto the user agent selects the value which corresponds to the language of the text. western languages would default to alphabetic, cjk languages to ideographic, and some indic languages to hanging. ...
... values auto the user agent selects the value which corresponds to the language of the text. western languages would default to alphabetic, cjk languages to ideographic, and some indic languages to hanging. ...
initial-letter - CSS: Cascading Style Sheets
values normal no special initial-letter effect. text behaves as normal. ...
... values normal no special initial-letter effect. text behaves as normal. <number> defines the size of the initial letter, in terms of how many lines it occupies. negative values are not allowed. <integer> defines the number of lines the initial letter should sink when the size of it is given. values must be greater than ...
left - CSS: Cascading Style Sheets
it has no effect on non-positioned elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /*
keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block. for relatively positioned elements, the distance that the element is moved to the right of its normal position. <percentage> a <p...
...oned elements, the distance of the element from its normal position is based on the right property; or if right is also auto, the element is not moved horizontally at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>, or the auto
keyword. description the effect of left depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the left property specifies the distance between the element's left edge and the left edge of its containing block. (the containing block is the ancestor to which the element is relatively positioned.) when position is set to r...
line-height - CSS: Cascading Style Sheets
ecifies the minimum height of line boxes within the element. on non-replaced inline elements, it specifies the height that is used to calculate line box height. 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. ...
... values normal depends on the user agent. desktop browsers (including firefox) use a default value of roughly 1.2, depending on the element's font-family. <number> (unitless) the used value is this unitless <number> multiplied by the element's own font size. the computed value is the same as the specified <number>. in most cases, this is the preferred way to set line-height and...
list-style-type - CSS: Cascading Style Sheets
make it apply to all list items. syntax /* partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-chinese-informal; list-style-type: kannada; /* <string> value */ list-style-type: '-'; /* identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /*
keyword value */ list-style-type: none; /* global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; the list-style-type property may be defined as any one of: a <custom-ident> value a symbols() value a <string> value the
keyword none. note that: some types require a suitable font installed to display as expected. the cjk-ideographic is identical to t...
...ese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open and disclosure-closed. extends <counter-style> with the symbols() functional notation. css lists module level 3the definition of 'list-style-type' in that specification. working draft modify syntax to support for identifiers used in @counter-style rules to
keywords. support for a simple <string>. css level 2 (revision 1)the definition of 'list-style-type' in that specification. recommendation initial definition ...
list-style - CSS: Cascading Style Sheets
if list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable. values list-style-type see list-style-type. list-style-image see list...
...if list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable. ...
mask-clip - CSS: Cascading Style Sheets
the mask-clip css property determines the area which is affected by a mask. the painted content of an element must be restricted to this area. /* <geometry-box> values */ mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /*
keyword values */ mask-clip: no-clip; /* non-standard
keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* multiple values */ mask-clip: padding-box, no-clip; mask-clip: view-box, fill-box, border-box; /* global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset; syntax one or more of the
keyword values listed below, separated by commas. values content-box the ...
... uses the nearest svg viewport as reference box. if a viewbox attribute is specified for the element creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the reference box is set to the width and height values of the viewbox attribute. no-clip the painted content is not clipped. border this
keyword behaves the same as border-box. padding this
keyword behaves the same as padding-box. content this
keyword behaves the same as content-box. text this
keyword clips the mask image to the text of the element. formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocompute...
mask-composite - CSS: Cascading Style Sheets
values for the composition the current mask layer is referred to as source, while all layers below it are referred to as destination. add the source is placed over the destination. ...
... values for the composition the current mask layer is referred to as source, while all layers below it are referred to as destination. add the source is placed over the destination. ...
mask-image - CSS: Cascading Style Sheets
<mask-source> a <url> reference to a <mask> or to a css image. ...
... <mask-source> a <url> reference to a <mask> or to a css image. <image> an image value used as mask image layer. formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absolut...
mask-origin - CSS: Cascading Style Sheets
the mask-origin css property sets the origin of a mask. /*
keyword values */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box; /* multiple values */ mask-origin: padding-box, content-box; mask-origin: view-box, fill-box, border-box; /* non-standard
keyword values */ -webkit-mask-origin: content; -webkit-mask-origin: padding; -webkit-mask-origin: border; /* global values */ mask-origin: inherit; mask-origin: initial; mask-origin: unset; for elements rendered as a single box, this property specifies the mask positioning area. in other words, this property specifies the origin position of an image specified by the mask-image css property. for elements rendered as mult...
... this property specifies the mask positioning area. in other words, this property specifies the origin position of an image specified by the mask-image css property. for elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes box-decoration-break operates upon to determine the mask positioning area. syntax one or more of the
keyword values listed below, separated by commas. values content-box the position is relative to the content box. padding-box the position is relative to the padding box. for single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner. border-box the position is relative to the border box. margin-box the position is relative to the margin box. fill-b...
mask-position - CSS: Cascading Style Sheets
the mask-position css property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image. /*
keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 25% 75%; mask-position: 0px 0px; mask-position: 10% 8em; /* multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* global values */ mask-position: inherit; mask-position: initial; mask-position: unset; syntax one or more <position> values, separated by commas. values <position> one to four values representing a 2d position regarding the edges of the element's box. relative or absolute offsets can be given. note that the position can be set outsid...
...offsets can be given. note that the position can be set outside of the element's box. ...
mask-type - CSS: Cascading Style Sheets
the mask-type css property sets whether an svg <mask> element is used as a luminance or an alpha mask. it applies to the <mask> element itself. /*
keyword values */ mask-type: luminance; mask-type: alpha; /* global values */ mask-type: inherit; mask-type: initial; mask-type: unset; this property may be overridden by the mask-mode property, which has the same effect but applies to the element where the mask is used. alpha masks will generally be faster to render. syntax the mask-type property is specified as one of the
keyword values listed below. ...
... mask-type: alpha; /* global values */ mask-type: inherit; mask-type: initial; mask-type: unset; this property may be overridden by the mask-mode property, which has the same effect but applies to the element where the mask is used. alpha masks will generally be faster to render. syntax the mask-type property is specified as one of the
keyword values listed below. values luminance is a
keyword indicating that the associated mask image is a luminance mask, i.e., that its relative luminance values must be used when applying it. alpha is a
keyword indicating that the associated mask image is an alpha mask, i.e., that its alpha channel values must be used when applying it. formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimati...
mask - CSS: Cascading Style Sheets
other shorthands or the individual properties to override any mask settings earlier in the cascade. this will ensure that mask-border has also been reset to allow the new styles to take effect. ...
...ng the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-position: refer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueas each of the properties of the shorthand:mask-image: as specified, but with <url> values made absolutemask-mode: as specifiedmask-repeat: consists of two
keywords, one per dimensionmask-position: consists of two
keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.mask-clip: as specifiedmask-origin: as specifiedmask-size: as specified, but with relative lengths converted into absolute lengthsmask-composite: as specifiedanimation typeas each of the propertie...
max-width - CSS: Cascading Style Sheets
d by max-width. 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. max-width overrides width, but min-width overrides max-width. syntax /* <length> value */ max-width: 3.5em; /* <percentage> value */ max-width: 75%; /*
keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content(20em); /* global values */ max-width: inherit; max-width: initial; max-width: unset; values <length> defines the max-width as an absolute value. <percentage> defines the max-width as a percentage of the containing block's width. auto the browser will calculate and select a max-width fo...
...kground: gold; width: 100%; max-width: 150px; } result specifications specification status comment css box sizing module level 4the definition of 'max-width' in that specification. editor's draft css box sizing module level 3the definition of 'max-width' in that specification. working draft adds the max-content, min-content, fit-content
keywords. css level 2 (revision 1)the definition of 'max-width' in that specification. recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxint...
min-height - CSS: Cascading Style Sheets
xample is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the element's height is set to the value of min-height whenever min-height is larger than max-height or height. syntax /* <length> value */ min-height: 3.5em; /* <percentage> value */ min-height: 10%; /*
keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* global values */ min-height: inherit; min-height: initial; min-height: unset; values <length> defines the min-height as an absolute value. <percentage> defines the min-height as a percentage of the containing block's height. auto the browser will calculate and select a min-height for the s...
... css level 2 (revision 1)the definition of 'min-height' in that specification. recommendation initial definition. ...
min-width - CSS: Cascading Style Sheets
ctive 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 element's width is set to the value of min-width whenever min-width is larger than max-width or width. syntax /* <length> value */ min-width: 3.5em; /* <percentage> value */ min-width: 10%; /*
keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content(20em); /* global values */ min-width: inherit; min-width: initial; min-width: unset; values <length> defines the min-width as an absolute value. <percentage> defines the min-width as a percentage of the containing block's width. auto the browser will calculate and select a min-width for the specified e...
...ement width table { min-width: 75%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification. editor's draft css box sizing module level 3the definition of 'min-width' in that specification. working draft adds the max-content, min-content, fit-content
keywords. css flexible box layout modulethe definition of 'min-width' in that specification. candidate recommendation adds the auto
keyword and uses it as the initial value. css level 2 (revision 1)the definition of 'min-width' in that specification. recommendation initial definition. browser compatibility the compatibility table on this page is generated from s...
offset-anchor - CSS: Cascading Style Sheets
the offset-anchor css property specifies the point inside the box of an element travelling along an offset-path that is actually moving along the path. ...
... working draft initial definition ...
offset-path - CSS: Cascading Style Sheets
url() references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path. <basic-shape> specifies a css shape including circle(), ellipse(), inset(), polygon(), or path(). path() a path string defined with svg coordinate syntax. none specifies no motion path at all. description this property def...
... working draft initial definition ...
outline-width - CSS: Cascading Style Sheets
t is drawn around an element, outside the border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often more convenient to use the shorthand property outline when defining the appearance of an outline. syntax /*
keyword values */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> values */ outline-width: 1px; outline-width: 0.1em; /* global values */ outline-width: inherit; the outline-width property is specified as any one of the values listed below. values <length> the width of the outline specified as a <length>. thin depends on the user agent. typically equivalent to...
... agent. typically equivalent to 1px in desktop browsers (including firefox). medium depends on the user agent. typically equivalent to 3px in desktop browsers (including firefox). thick depends on the user agent. typically equivalent to 5px in desktop browsers (including firefox). ...
overflow-x - CSS: Cascading Style Sheets
-x css property sets what shows when content overflows a block-level element's left and right edges. this may be nothing, a scroll bar, or the overflow content. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ overflow-x: visible; overflow-x: hidden; overflow-x: clip; overflow-x: scroll; overflow-x: auto; /* global values */ overflow-x: inherit; overflow-x: initial; overflow-x: unset; the overflow-x property is specified as a single
keyword chosen from the list of values below. values visible content is not clipped and may be rendered outside the padding box's left and right edges...
...d outside the padding box's left and right edges. if overflow-y is hidden, scroll or auto and this property is visible, it will implicitly compute to auto. hidden content is clipped if necessary to fit horizontally in the padding box. no scrollbars are provided. clip like for hidden, the content is clipped to the element's padding box. the difference between clip and hidden is that the clip
keyword also forbids all scrolling, including programmatic scrolling. the box is not a scroll container, and does not start a new formatting context. if you wish to start a new formatting context, you can use display: flow-root to do so. scroll content is clipped if necessary to fit horizontally in the padding box. browsers display scrollbars whether or not any content is actually clipped. (this pr...
overflow-y - CSS: Cascading Style Sheets
-y css property sets what shows when content overflows a block-level element's top and bottom edges. this may be nothing, a scroll bar, or the overflow content. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ overflow-y: visible; overflow-y: hidden; overflow-y: clip; overflow-y: scroll; overflow-y: auto; /* global values */ overflow-y: inherit; overflow-y: initial; overflow-y: unset; the overflow-y property is specified as a single
keyword chosen from the list of values below. if overflow-x is hidden, scroll or auto and this property is visible (default) it will implicitly compute to...
... (default) it will implicitly compute to auto. values visible content is not clipped and may be rendered outside the padding box's top and bottom edges. hidden content is clipped if necessary to fit vertically in the padding box. no scrollbars are provided. clip like for hidden, the content is clipped to the element's padding box. the difference between clip and hidden is that the clip
keyword also forbids all scrolling, including programmatic scrolling. the box is not a scroll container, and does not start a new formatting context. if you wish to start a new formatting context, you can use display: flow-root to do so. scroll content is clipped if necessary to fit vertically in the padding box. browsers display scrollbars whether or not any content is actually clipped. (this prev...
overscroll-behavior-x - CSS: Cascading Style Sheets
values auto the default scroll overflow behavior occurs as normal. ...
... values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. ...
overscroll-behavior - CSS: Cascading Style Sheets
the overscroll-behavior css property sets what a browser does when reaching the boundary of a scrolling area. it's a shorthand for overscroll-behavior-x and overscroll-behavior-y. /*
keyword values */ overscroll-behavior: auto; /* default */ overscroll-behavior: contain; overscroll-behavior: none; /* two values */ overscroll-behavior: auto contain; /* global values */ overscroll-behavior: inherit; overscroll-behavior: initial; overscroll-behavior: unset; by default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. you may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying ...
... the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining. in some cases these behaviors are not desirable. you can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's facebook/twitter app-inspired "pull to refresh"-type behavior. syntax the overscroll-behavior property is specified as one or two
keywords chosen from the list of values below. two
keywords specifies the overscroll-behavior value on the x and y axes respectively. if only one value is specified, both x and y are assumed to have the same value. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effec...
quotes - CSS: Cascading Style Sheets
quotes css property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the css content property. 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. ...
... 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 9samsung internet android full support 1.0auto
keywordchrome no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingedge no support nonotes no support non...
radial-gradient() - CSS: Cascading Style Sheets
alues <position> the position of the gradient, interpreted in the same way as background-position or transform-origin. if unspecified, it defaults to center. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-
keyword> a
keyword describing how big the ending shape must be. the possible values are:
keyword description closest-side the gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner the gradient's ending shape is siz...
... farthest-side similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). farthest-corner the default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. note: early implementations of this function included other
keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. use the standard
keywords only, as some implementations have already dropped those older variants. <linear-color-stop> a color-stop's <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a len...
right - CSS: Cascading Style Sheets
has no effect on non-positioned elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /*
keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block. for relatively positioned elements, the distance that the element is moved to the left of its normal position. <percentage> ...
...tioned elements, the distance of the element from its normal position is based on the left property; or if left is also auto, the element is not moved horizontally at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>, or the auto
keyword. description the effect of right depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block. when position is set to relative, the right property specifies the distance the element's right edge is move...
ruby-position - CSS: Cascading Style Sheets
the ruby-position css property defines the position of a ruby element relatives to its base element. it can be position over the element (over), under it (under), or between the characters, on their right side (inter-character). ...
...on of a ruby element relatives to its base element. it can be position over the element (over), under it (under), or between the characters, on their right side (inter-character). /*
keyword values */ ruby-position: over; ruby-position: under; ruby-position: inter-character; /* global values */ ruby-position: inherit; ruby-position: initial; ruby-position: unset; syntax values over is a
keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts. under is a
keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts. inter-character is a
keyword indicating that the ruby has to be placed between the different characters. formal definition in...
scrollbar-color - CSS: Cascading Style Sheets
the scrollbar-color css property sets the color of the scrollbar track and thumb. the track refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position. the thumb refers to the moving part of the scrollbar, which usually floats on top of the track. syntax /*
keyword values */ scrollbar-color: auto; scrollbar-color: dark; scrollbar-color: light; /* <color> values */ scrollbar-color: rebeccapurple green; /* two valid colors. the first applies to the thumb of the scrollbar, the second to the track. */ /* global values */ scrollbar-color: inherit; scrollbar-color: initial; scrollbar-color: unset; values <scrollbar-color> defines the color of the scrollbar. auto default platform rendering for the track portion of the sc...
... <color> <color> applies the first color to the scrollbar thumb, the second to the scrollbar track. note: user agents must apply any scrollbar-color value set on the root element to the viewport. accessibility concerns when using scrollbar-color property with specific color values, authors should ensure the specified colors have enough contrast between them. for
keyword values, uas should ensure the colors they use have enough contrast. see techniques for wcag 2.0: g183: using a contrast ratio of 3:1. formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typea color formal syntax auto | dark | light | <color>{2}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | cur...
scrollbar-width - CSS: Cascading Style Sheets
the scrollbar-width property allows the author to set the maximum thickness of an element’s scrollbars when they are shown. initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete syntax /*
keyword values */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; /* global values */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: unset; values <scrollbar-width> defines the width of the scrollbar as a
keyword. it must be one of the following values: auto the default scrollbar width for the platform. thin a thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width. none no scroll...
...set on the root element to the viewport. accessibility concerns use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism. while swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative. wcag criterion 2.1.1 (
keyboard) has been in place for a long time to advise on basic
keyboard accessibility, and this should include scrolling of content areas. and introduced in wcag 2.1, criterion 2.5.5 (target size) advises that touch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised). mdn understanding wcag, guideline 2.1 ...
shape-outside - CSS: Cascading Style Sheets
around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes. 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. ...
...interpolate as <length>, <percentage>, or calc() where possible. if list values are not one of those types but are identical (such as finding nonzero in the same list position in both lists), those values do interpolate. both shapes must use the same reference box. if both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side
keywords, interpolate between each value in the shape functions. if both shapes are of type inset(), interpolate between each value in the shape functions. if both shapes are of type polygon(), both polygons have the same number of vertices, and use the same <fill-rule>, interpolate between each value in the shape functions. in all other cases no interpolation occurs. formal definition initial ...
text-combine-upright - CSS: Cascading Style Sheets
the space of a single character. if the combined text is wider than 1em, the user agent must fit the contents within 1em. the resulting composition is treated as a single upright glyph for layout and decoration. this property only has an effect in vertical writing modes. this is used to produce an effect that is known as tate-chū-yoko (縦中横) in japanese, or as 直書橫向 in chinese. ...
... of consecutive ascii digits (u+0030–u+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. if the integer is omitted, it computes to 2. integers outside the range of 2-4 are invalid. formal definition initial valuenoneapplies tonon-replaced inline elementsinheritedyescomputed valuespecified
keyword, plus integer if 'digits'animation typediscrete formal syntax none | all | [ digits <integer>? ] examples digits the digits value requires less markup than the all value when digits are being combined, but it is currently not very widely supported by browsers. html <p lang="ja" class="exampletext">平成20年4月16日に</p> css .exampletext { writing-mode: vertical-lr; text-com...
text-decoration-line - CSS: Cascading Style Sheets
or overline. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...
...b.com/mdn/interactive-examples and send us a pull request. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...
text-decoration-skip - CSS: Cascading Style Sheets
the text-decoration-skip css property sets what parts of an element’s content any text decoration affecting the element must skip over. it controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors. note: most other browsers are converging on supporting the simpler text-decoration-skip-ink property. ...
...l text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors. note: most other browsers are converging on supporting the simpler text-decoration-skip-ink property. /*
keyword values */ text-decoration-skip: none; text-decoration-skip: objects; text-decoration-skip: spaces; text-decoration-skip: edges; text-decoration-skip: box-decoration; /* multiple
keywords */ text-decoration-skip: objects spaces; text-decoration-skip: leading-spaces trailing-spaces; text-decoration-skip: objects edges box-decoration; /* global values */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset; syntax values none nothing is skipped. thus, text decoration is drawn for all text content and across atomic inline-level boxes.
top - CSS: Cascading Style Sheets
ute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored. syntax /* <length> values */ top: 3px; top: 2.4em; /* <percentage>s of the height of the containing block */ top: 10%; /*
keyword value */ top: auto; /* global values */ top: inherit; top: initial; top: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the top edge of the containing block. for relatively positioned elements, the distance that the element is moved below its normal position. <percentage> a <percentage> of t...
...oned elements, the distance of the element from its normal position is based on the bottom property; or if bottom is also auto, the element is not moved vertically at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>, or the auto
keyword. formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples body { backgrou...
touch-action - CSS: Cascading Style Sheets
the touch-action css property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser). /*
keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (scrolling) and pinching gestures are handled exclusively by the browser. an application using pointer events will receive a pointercancel event when the browser starts handling a touch gesture. by explicitly specifying which gestures should be handled by the browser, an applicat...
...means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants. after a gesture starts, changes to touch-action will not have any impact on the behavior of the current gesture. syntax the touch-action property may be specified as either: one of the
keywords auto, none, manipulation, or one of the
keywords pan-x, pan-left, pan-right, and/or one of the
keywords pan-y, pan-up, pan-down, plus optionally the
keyword pinch-zoom. values auto enable browser handling of all panning and zooming gestures. none disable browser handling of all panning and zooming gestures. pan-x enable single-finger horizontal panning gestures. may be combined wi...
transform - CSS: Cascading Style Sheets
than none, a stacking context will be created. in that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains. only transformable elements can be transformed. that is, all elements whose layout is governed by the css box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes. ...
... if perspective() is one of multiple function values, it must be listed first. values <transform-function> one or more of the css transform functions to be applied. the transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left. none speci...
user-modify - CSS: Cascading Style Sheets
values read-only default value. contents are read-only. read-write the user is able to read and write contents. ...
... values read-only default value. contents are read-only. read-write the user is able to read and write contents. read-write-plaintext-only same as read-write, but rich text formatting will be lost. write-only the user is able to edit the content, but not to read it. ...
width - CSS: Cascading Style Sheets
the border area. 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 min-width and max-width properties override width. syntax /* <length> values */ width: 300px; width: 25em; /* <percentage> value */ width: 75%; /*
keyword values */ width: max-content; width: min-content; width: fit-content(20em); width: auto; /* global values */ width: inherit; width: initial; width: unset; the width property is specified as either: one of the following
keyword values: min-content, max-content, fit-content, auto. a <length> or a <percentage>. values <length> defines the width as an absolute value. <percentage> d...
...minblue">the mozilla community produces a lot of great software.</p> specifications specification status comment css box sizing module level 4the definition of 'width' in that specification. editor's draft css box sizing module level 3the definition of 'width' in that specification. working draft added the max-content, min-content, fit-content
keywords. css level 2 (revision 1)the definition of 'width' in that specification. recommendation precises on which element it applies to. css level 1the definition of 'width' in that specification. recommendation initial definition. ...
word-spacing - CSS: Cascading Style Sheets
the word-spacing css property sets the length of space between words and between tags. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword value */ word-spacing: normal; /* <length> values */ word-spacing: 3px; word-spacing: 0.3em; /* <percentage> values */ word-spacing: 50%; word-spacing: 200%; /* global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; values normal the normal inter-word spacing, as defined by the current font and/or the browser. <length> specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font. <percentage> ...
...wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the width of the affected glyphcomputed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the
keyword normalanimation typea length formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css text module level 3the definition of 'word-spacing' in that specification. working draft replaces the previous values with a <spacing-limit> value that defines the same thing, plus the <...
WAI ARIA Live Regions/API Support - Developer guides
fficult for a screen reader to decide when to interrupt a user with changes on a page. if the screen reader automatically reads too much, then the web page will be too annoying to use. if the screen reader doesn't read anything, then the user may miss important information. it is believed this information will be useful for heuristics. often, changes in a page that are directly caused by a user's
keystrokes should be read. they are synchronous with what the user is doing and can thus likely be read without disorienting the user. once the user presses the next
key the speech will move on to echoing that
key anyway. the screen reader may wish to take other factors into account, such as the type of change, the size of the change, where the change occured, etc. this is a potential area for innova...
...are neutral. they are only counted as user input if the original reason they happened was because of user input. ...
Live streaming web audio and video - Developer guides
lay live events such as sports, concerts and more generally tv and radio programmes that are output live. often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. this is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started. the
key consideration when streaming media to a browser is the fact that rather than playing a finite file we are relaying a file that is being created on the fly and has no pre-determined start or end.
key differences between streamed and static media in this case, we are using static media to describe media that is represented by a file, whether it be an mp3 or webm file. this file sits on a server a...
...tly, opus is supported by firefox desktop and mobile as well as the latest versions of desktop chrome and opera. note: opus is a mandatory format for webrtc browser implementations. mp3, aac, ogg vorbis most common audio formats can be streamed using specific server-side technologies. note: it's potentially easier to stream audio using non-streaming formats because unlike video there are no
keyframes. server-side streaming technologies in order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services. gstreamer gstreamer is an open source cross-platform multimedia framework that allows you to create a variety of media-handling components, including streaming components. through its plugin system, gstreamer provides s...
Writing Web Audio API code that works in every browser - Developer guides
ented in firefox yet. what do we do!? we don't want to maintain two or more separate code bases, and feature detection code is cumbersome! plus we want to write code that reliably works in the future, or at least, works with a minimum amount of changes. is there a way to satisfy all these constraints at the same time? probably! writing for today (and tomorrow) first, get a copy of audiocontext-mon
keypatch by chris wilson. this little library will "normalise" the interfaces for you and make it look as if your code is running in a standards compliant browser, by aliasing prefixed names to the unprefixed versions. and it won't do anything if the unprefixed versions are already present. once you include it in your page, you can write in "modern web audio api" style, and do things such as: var aud...
...new audiocontext(); everywhere, including chrome/ium, opera, safari, and ---of course!--- firefox. also, if new methods such as start are not detected in some nodes, the library will also alias them to their old names. thus, start is mapped to noteon, stop to noteoff, and so on. if you're porting moderately "old" code (say, a year old) it's possible that it uses some methods that audiocontext-mon
keypatch doesn't alias, because it helps you to write code in the new style. for example, the way to create instances of gainnode used to be var gain = audiocontext.creategainnode(); but nowadays it is just var gain = audiocontext.creategain(); since the old method names are not present in firefox, existing code may crash with something like creategainnode is not a function, and you now know why. t...
DOM onevent handlers - Developer guides
d the specific onevent handlers. this page focuses on how the latter work. registering onevent handlers the onevent handlers are properties on certain dom elements to manage how that element reacts to events. elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <body> element). events are actions like: being clicked detecting pressed
keys getting focus the onevent handler is usually named with the event it reacts to, like onclick, on
keypress, onfocus, etc. you can specify an on<…> event handler for a particular event (such as click) for a given object in different ways: adding an html attribute named on<eventtype>: <button onclick="handleclick()">, or by setting the corresponding property from javascript: document.q...
...e return value when the event handler is specified as an html attribute, the specified code is wrapped into a function with the following parameters: event — for all event handlers except onerror. event, source, lineno, colno, and error for the onerror event handler. note that the event parameter actually contains the error message as a string. when the event handler is invoked, the this
keyword inside the handler is set to the dom element on which the handler is registered. for more details, see the this
keyword documentation. the return value from the handler determines if the event is canceled. the specific handling of the return value depends on the kind of event; for details, see "the event handler processing algorithm" in the html specification. when the event handler is invo...
Touch events (Mozilla experimental) - Developer guides
you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12. this api allowed you to track the movement of the user's finger on a touch screen, monitoring the raw touch events generated by the system. ...
...you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12. this api allowed you to track the movement of the user's finger on a touch screen, monitoring the raw touch events generated by the system. ...
Index - Developer guides
of events and event handling explains the code design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle. 25 touch events (mozilla experimental) dom the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) to gecko/firefox 17. you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12. 26 using device orientation with 3d transforms advanced, css, dom, needsupdate, orientation, transforms this article provides tips on how to use device orientation information in tandem with css 3d transforms. ...
... woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations. it adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired. 42 user input and controls screen orientation, contenteditable, drag and drop, fullscreen,
keyboard, mouse, pointer lock, touch, user input modern web user input goes beyond simple mouse and
keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies...
Developer guides
lgorithm (bidi) the unicode® bidi algorithm is part of the unicode text standard. it describes how the browser should order characters while rendering unicode text. this guide covers the algorithm in general and how it applies to content you create—especially when you build properly localized and internationalized content. ...
...dering unicode text. this guide covers the algorithm in general and how it applies to content you create—especially when you build properly localized and internationalized content. using formdata objects the formdata object lets you compile a set of
key/value pairs to send using xmlhttprequest. it's primarily intended for sending form data, but can be used independently from forms to transmit
keyed data. the transmission is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". user input and controls modern web user input goes beyond simple mouse and
keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, al...
HTML attribute: crossorigin - HTML: Hypertext Markup Language
pport for cors, defining how the element handles crossorigin requests, thereby enabling the configuration of the cors requests for the element's fetched data. depending on the element, the attribute can be a cors settings attribute. the crossorigin content attribute on media elements is a cors settings attribute. these attributes are enumerated, and have the following possible values:
keyword description anonymous cors requests for this element will have the credentials flag set to 'same-origin'. use-credentials cors requests for this element will have the credentials flag set to 'include'. "" setting the attribute name to an empty value, like crossorigin or crossorigin="", is the same as anonymous. by default (that is, when the attrib...
... element will have the credentials flag set to 'same-origin'. use-credentials cors requests for this element will have the credentials flag set to 'include'. "" setting the attribute name to an empty value, like crossorigin or crossorigin="", is the same as anonymous. by default (that is, when the attribute is not specified), cors is not used at all. the "anonymous"
keyword means that there will be no exchange of user credentials via cookies, client-side ssl certificates or http authentication as described in the terminology section of the cors specification, unless it is in the same origin. an invalid
keyword and an empty string will be handled as the anonymous
keyword. example: crossorigin with the script element you can use the following <script> element t...
<a>: The Anchor element - HTML: Hypertext Markup Language
d post requests with the body ping to the urls. typically for tracking. referrerpolicy how much of the referrer to send when following the link. see referrer-policy for possible values and their effects. rel the relationship of the linked url as space-separated link types. target where to display the linked url, as the name for a browsing context (a tab, window, or <iframe>). the following
keywords have special meanings for where to load the url: _self: the current browsing context. (default) _blank: usually a new tab, but users can configure browsers to open a new window instead. _parent: the parent browsing context of the current one. if no parent, behaves as _self. _top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). if no anc...
...ble in <body> content that points to the beginning of the page's main content. usually, css hides a skip link offscreen until focused. <body> <a href="#content">skip to main content</a> <header> … </header> <main id="content"> <!-- the skip link jumps to here --> .skip-link { position: absolute; top: -3em; background: #fff; } .skip-link:focus { top: 0; } skip links let
keyboard users bypass content repeated throughout multiple pages, such as header navigation. skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious. webaim: "skip navigation" links how-to: use skip navigation links mdn / unde...
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
ontent. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. usage notes use the <b> for cases like
keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance). do not confuse the <b> element with the <strong>, <em>, or <mark> elements. the <strong> element represents text of certain importance, <em> puts some emphasis on the text and the <mark> element represents text of certain relevance. the <b...
... the html. historically, the <b> element was meant to make text boldface. styling information has been deprecated since html4, so the meaning of the <b> element has been changed. if there is no semantic purpose to using the <b> element, you should use the css font-weight property with the value "bold" instead in order to make text bold. examples <p> this article describes several <b class="
keywords">text-level</b> elements. it explains their usage in an <b class="
keywords">html</b> document. </p>
keywords are displayed with the default style of the <b>element, likely in bold.</b> result specifications specification status comment html living standardthe definition of '<b>' in that specification. living standard html5the definition of ...
<img>: The Image Embed element - HTML: Hypertext Markup Language
sed by people with visual impairments) the user chooses not to display images (saving bandwidth, privacy reasons) the image is invalid or an unsupported type in these cases, the browser may replace the image with the text in the element's alt attribute. for these reasons and others, provide a useful value for alt whenever possible. omitting alt altogether indicates that the image is a
key part of the content and no textual equivalent is available. setting this attribute to an empty string (alt="") indicates that this image is not a
key part of the content (it’s decoration or a tracking pixel), and that non-visual browsers may omit it from rendering. visual browsers will also hide the broken image icon if the alt is empty and the image failed to display. this attribute is also ...
...tion to accompany an image's alt description. if an image needs a caption, use the figure and figcaption elements. the value of the title attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. while this can provide additional information to the user, you should not assume that the user will ever see it: the user may only have
keyboard or touchscreen. if you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using title. using the html title attribute – updated | the paciello group technical summary content categories flow content, phrasing content, embedded content, palpable content. if the element has a usemap ...
<link>: The External Resource Link element - HTML: Hypertext Markup Language
https://github.com/mdn/interactive-examples and send us a pull request. to link an external stylesheet, you'd include a <link> element inside your <head> like this: <link href="main.css" rel="stylesheet"> this simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a value of stylesheet. the rel stands for "relationship", and is probably one of the
key features of the <link> element — the value denotes how the item being linked to is related to the containing document. as you'll see from our link types reference, there are many different kinds of relationship. there are a number of other common types you'll come across. for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel valu...
...ion is performed). if the server does not give credentials to the origin site (through access-control-allow-credentials http header), the resource will be tainted and its usage restricted. if the attribute is not present, the resource is fetched without a cors request (i.e. without sending the origin http header), preventing its non-tainted usage. if invalid, it is handled as if the enumerated
keyword anonymous was used. see cors settings attributes for additional information. disabled for rel="stylesheet" only, the disabled boolean attribute indicates whether or not the described stylesheet should be loaded and applied to the document. if disabled is specified in the html when it is loaded, the stylesheet will not be loaded during page load. instead, the stylesheet will be loaded on-d...
autocapitalize - HTML: Hypertext Markup Language
the behavior of such mechanisms is that they often assist users by automatically capitalizing the first letter of sentences. the autocapitalize attribute enables authors to override that behavior per-element. the autocapitalize attribute never causes autocapitalization t...
...e defaults to a capital letter; all other letters default to lowercase words: the first letter of each word defaults to a capital letter; all other letters default to lowercase characters: all letters should default to uppercase the autocapitalize attribute doesn’t affect behavior when typing on a physical
keyboard. instead, it affects the behavior of other input mechanisms, such as virtual
keyboards on mobile devices and voice input. the behavior of such mechanisms is that they often assist users by automatically capitalizing the first letter of sentences. the autocapitalize attribute enables authors to override that behavior per-element. the autocapitalize attribute never causes autocapitalization to be enabled for an <input> element with a type attribute whose value is url, email, o...
Link types: noreferrer - HTML: Hypertext Markup Language
specifications specification status comment html living standardthe definition of 'noreferrer' in that specification. ...
... specifications specification status comment html living standardthe definition of 'noreferrer' in that specification. ...
Identifying resources on the Web - HTTP
ttps://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your browser's address bar to tell it to load the associated page (resource). a url is composed of different parts, some mandatory and others are optional. a more complex example might look like this: http://www.example.com:80/path/to/myfile.html?
key1=value1&
key2=value2#somewhereinthedocument urns a uniform resource name (urn) is a uri that identifies a resource by name in a particular namespace. urn:isbn:9780141036144 urn:ietf:rfc:7230 the two urns correspond to the book nineteen eighty-four by george orwell, the ietf specification 7230, hypertext transfer protocol (http/1.1): message syntax and routing. syntax of uniform resource...
... the http protocol (80 for http and 443 for https) to grant access to its resources. otherwise it is mandatory. path /path/to/myfile.html is the path to the resource on the web server. in the early days of the web, a path like this represented a physical file location on the web server. nowadays, it is mostly an abstraction handled by web servers without any physical reality. query ?
key1=value1&
key2=value2 are extra parameters provided to the web server. those parameters are a list of
key/value pairs separated with the & symbol. the web server can use those parameters to do extra stuff before returning the resource to the user. each web server has its own rules regarding parameters, and the only reliable way to know how a specific web server is handling parameters is by asking t...
HTTP caching - HTTP
roxy as part of its local network infrastructure to serve many users so that popular resources are reused a number of times, reducing network traffic and latency. targets of caching operations http caching is optional, but reusing a cached resource is usually desirable. however, common http caches are typically limited to caching responses to get and may decline other methods. the primary cache
key consists of the request method and target uri (oftentimes only the uri is used as only get requests are caching targets). common forms of caching entries are: successful results of a retrieval request: a 200 (ok) response to a get request containing a resource like html documents, images or files. permanent redirects: a 301 (moved permanently) response. error responses: a 404 (not found) res...
...rms of caching entries are: successful results of a retrieval request: a 200 (ok) response to a get request containing a resource like html documents, images or files. permanent redirects: a 301 (moved permanently) response. error responses: a 404 (not found) result page. incomplete results: a 206 (partial content) response. responses other than get if something suitable for use as a cache
key is defined. a cache entry might also consist of multiple stored responses differentiated by a secondary
key, if the request is target of content negotiation. for more details see the information about the vary header below. controlling caching the cache-control header the cache-control http/1.1 general-header field is used to specify directives for caching mechanisms in both requests and res...
Configuring servers for Ogg media - HTTP
in order to determine the duration of the media. your server should accept the accept-ranges: bytes http header if it can accept byte-range requests. it must return 206: partial content to all byte range requests; otherwise, browsers can't be sure you actually support byte range requests. your server must also return 206: partial content for the request range: bytes=0- as well. ...
...p header if it can accept byte-range requests. it must return 206: partial content to all byte range requests; otherwise, browsers can't be sure you actually support byte range requests. your server must also return 206: partial content for the request range: bytes=0- as well. include regular
key frames when the browser seeks through ogg media to a specified time, it has to seek to the nearest
key frame before the seek target, then download and decode the video from there until the requested target time. the farther apart your
key frames are, the longer this takes, so it's helpful to include
key frames at regular intervals. by default, ffmpeg2theora uses one
key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well. note: of course, the more ke...
About JavaScript - JavaScript
text). for a more in depth discussion of javascript programming follow the javascript resources links below. what javascript implementations are available? the mozilla project provides two javascript implementations. the first ever javascript was created by brendan eich at netscape, and has since been updated to conform to ecma-262 edition 5 and later versions. this engine, code named spidermon
key, is implemented in c/c++. the rhino engine, created primarily by norris boyd (also at netscape) is a javascript implementation written in java. like spidermon
key, rhino is ecma-262 edition 5 compliant. several major runtime optimizations such as tracemon
key (firefox 3.5), jägermon
key (firefox 4) and ionmon
key were added to the spidermon
key javascript engine over time. work is always ongoing to ...
...onsible for reflecting the dom into javascript. another common application for javascript is as a (web) server side scripting language. a javascript web server would expose host objects representing a http request and response objects, which could then be manipulated by a javascript program to dynamically generate web pages. node.js is a popular example of this. javascript resources spidermon
key information specific to mozilla's implementation of javascript in c/c++ engine (aka spidermon
key), including how to embed it in applications. rhino information specific to the javascript implementation written in java (aka rhino). language resources pointers to published javascript standards. a re-introduction to javascript javascript guide and javascript reference. javascript® is a ...
Iterators and generators - JavaScript
lgorithm by writing a single function whose execution is not continuous. generator functions are written using the function* syntax. when called, generator functions do not initially execute their code. instead, they return a special type of iterator, called a generator. when a value is consumed by calling the generator's next method, the generator function executes until it encounters the yield
keyword. the function can be called as many times as desired, and returns a new generator each time. each generator may only be iterated once. we can now adapt the example from above. the behavior of this code is identical, but the implementation is much easier to write and read. function* makerangeiterator(start = 0, end = 100, step = 1) { let iterationcount = 0; for (let i = start; i < e...
...teration behavior, such as what values are looped over in a for...of construct. some built-in types, such as array or map, have a default iteration behavior, while other types (such as object) do not. in order to be iterable, an object must implement the @@iterator method. this simply means that the object (or one of the objects up its prototype chain) must have a property with a symbol.iterator
key. it may be possible to iterate over an iterable more than once, or only once. it is up to the programmer to know which is the case. iterables which can iterate only once (such as generators) customarily return this from their @@iterator method, whereas iterables which can be iterated many times must return a new iterator on each invocation of @@iterator. function* makeiterator() { yield 1;...
Meta programming - JavaScript
rty deletion delete proxy[foo] delete proxy.foo reflect.deleteproperty() a property cannot be deleted if it exists as a non-configurable own property of target. handler.enumerate() property enumeration / for...in: for (let name in proxy) {...} reflect.enumerate() the enumerate method must return an object. handler.own
keys() object.getownpropertynames() object.getownpropertysymbols() object.
keys() reflect.own
keys() the result of own
keys is a list. the type of each result list element is either string or symbol. the result list must contain the
keys of all non-configurable own properties of target. if the target object is not extensible, then the result list must contain ...
... handler.apply() proxy(..args) function.prototype.apply() and function.prototype.call() reflect.apply() there are no invariants for the handler.apply method. ...
Public class fields - JavaScript
hpublicinstancemethod { publicmethod() { return 'hello world' } } examples public static fields public static fields are useful when you want a field to exist only once per class, not on every class instance you create. this is useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances. public static fields are declared using the static
keyword. they are added to the class constructor at the time of class evaluation using object.defineproperty(). they are accessed again from the class constructor. class classwithstaticfield { static staticfield = 'static field' } console.log(classwithstaticfield.staticfield) // expected output: "static field" fields without initializers are initialized to undefined. class classwithstaticfi...
...static methods aren't called on instances of the class. instead, they're called on the class itself. these are often utility functions, such as functions to create or clone objects. class classwithstaticmethod { static staticmethod() { return 'static method has been called.'; } } console.log(classwithstaticmethod.staticmethod()); // expected outp...
extends - JavaScript
the .prototype of the extension must be an object or null. examples using extends the first example creates a class called square from a class called polygon. this example is extracted from this live demo (source). ...
... class declarations or class expressions to create a class that is a child of another class. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax class childclass extends parentclass { ... } description the extends
keyword can be used to subclass custom classes as well as built-in objects. the .prototype of the extension must be an object or null. examples using extends the first example creates a class called square from a class called polygon. this example is extracted from this live demo (source). class square extends polygon { constructor(length) { // here, it calls the parent class' constructor ...
SyntaxError: missing ) after condition - JavaScript
the javascript exception "missing ) after condition" occurs when there is an error with how an if condition is written. it must appear in parenthesis after the if
keyword. message syntaxerror: expected ')' (edge) syntaxerror: missing ) after condition (firefox) error type syntaxerror what went wrong? there is an error with how an if condition is written. in any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. the if statement executes a statement if a specified condition is truthy. in javascript, this condition must appear in parenthesis after the if
keyword, like this: if (condition) { // do something if the condition is true } examples missing parenthesis it might just be an oversight, carefully check all you p...
... { // do something if the condition is true } examples missing parenthesis it might just be an oversight, carefully check all you parenthesis in your code. if (3 > math.pi { console.log("wait what?"); } // syntaxerror: missing ) after condition to fix this code, you would need to add a parenthesis that closes the condition. if (3 > math.pi) { console.log("wait what?"); } misused is
keyword if you are coming from another programming language, it is also easy to add
keywords that don't mean the same or have no meaning at all in javascript. if (done is true) { console.log("we are done!"); } // syntaxerror: missing ) after condition instead you need to use a correct comparison operator. for example: if (done === true) { console.log("we are done!"); } ...
ReferenceError: assignment to undeclared variable "x" - JavaScript
en assigned to an undeclared variable. message referenceerror: assignment to undeclared variable "x" (firefox) referenceerror: "x" is not defined (chrome) referenceerror: variable undefined in strict mode (edge) error type referenceerror warning in strict mode only. what went wrong? a value has been assigned to an undeclared variable. in other words, there was an assignment without the var
keyword. there are some differences between declared and undeclared variables, which might lead to unexpected results and that's why javascript presents an error in strict mode. three things to note about declared and undeclared variables: declared variables are constrained in the execution context in which they are declared. undeclared variables are always global. declared variables are created...
...age. errors about undeclared variable assignments occur in strict mode code only. in non-strict code, they are silently ignored. examples invalid cases in this case, the variable "bar" is an undeclared variable. function foo() { 'use strict'; bar = true; } foo(); // referenceerror: assignment to undeclared variable bar valid cases to make "bar" a declared variable, you can add the var
keyword in front of it. function foo() { 'use strict'; var bar = true; } foo(); ...
TypeError: "x" is (not) "y" - JavaScript
e) typeerror: "x" is (not) "y" (firefox) examples: typeerror: "x" is undefined typeerror: "x" is null typeerror: "undefined" is not an object typeerror: "x" is not an object or null typeerror: "x" is not a symbol error type typeerror. what went wrong? there was an unexpected type. this occurs oftentimes with undefined or null values. ...
... if (foo !== undefined) { // now we know that foo is defined, we are good to go. ...
SyntaxError: function statement requires a name - JavaScript
instead: var greet = function() { return 'hello world'; }; or, you function is maybe intended to be an iife (immediately invoked function expression), which is a function that runs as soon as it is defined. you will need a few more braces in this case: (function () { })(); labeled functions if you are using function labels, you will still need to provide a function name after the function
keyword. this doesn't work: function greeter() { german: function () { return "moin"; } } // syntaxerror: function statement requires a name this would work, for example: function greeter() { german: function g() { return "moin"; } } object methods if you intended to create a method of an object, you will need to create an object. the following syntax without a name after the fu...
...his doesn't work: function greeter() { german: function () { return "moin"; } } // syntaxerror: function statement requires a name this would work, for example: function greeter() { german: function g() { return "moin"; } } object methods if you intended to create a method of an object, you will need to create an object. the following syntax without a name after the function
keyword is valid then. var greeter = { german: function () { return "moin"; } }; callback syntax also, check your syntax when using callbacks. brackets and commas can get difficult easily. promise.then( function() { console.log("success"); }); function() { console.log("error"); } // syntaxerror: function statement requires a name correct would be: promise.then( function...
Method definitions - JavaScript
ub repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax const obj = { get property() {}, set property(value) {}, property( parameters… ) {}, *generator( parameters… ) {}, async property( parameters… ) {}, async* generator( parameters… ) {}, // with computed
keys get [property]() {}, set [property](value) {}, [property]( parameters… ) {}, *[generator]( parameters… ) {}, async [property]( parameters… ) {}, async* [generator]( parameters… ) {}, }; description the shorthand syntax is similar to the getter and setter syntax introduced in ecmascript 2015. given the following code: const obj = { foo: function() { // ... }, ba...
...le to shorten this to: const obj = { foo() { // ... }, bar() { // ... } } generator methods generator methods can be defined using the shorthand syntax as well. when doing so: the asterisk (*) in the shorthand syntax must be before the generator property name. (that is, * g(){} will work, but g *(){} will not.) non-generator method definitions cannot contain the yield
keyword. this means that legacy generator functions won't work either, and will throw a syntaxerror. always use yield in conjunction with the asterisk (*). // using a named property const obj2 = { g: function* () { let index = 0 while (true) { yield index++ } } }; // the same object using shorthand syntax const obj2 = { * g() { let index = 0 while (true) { y...
Array.prototype.filter() - JavaScript
ototype.filter = function(func, thisarg) { 'use strict'; if ( ! ...
... t = this, c = 0, i = -1; var kvalue; if (thisarg === undefined){ while (++i !== len){ // checks to see if the
key was set if (i in this){ kvalue = t[i]; // in case t is changed in callback if (func(t[i], i, t)){ res[c++] = kvalue; } } } } else{ while (++i !== len){ // checks to see if the
key was set if (i in this){ kvalue = t[i]; if (func.call(thisarg, t[i], i, t)){ res[c++] = kvalue; } } } } res.length = c; // shrink down array to proper size return res; }; } examples filtering out all small values the following example uses filter() to create a filtered array that has all elements with values less tha...
BigInt64Array - JavaScript
read only. bigint64array.prototype.length returns the number of elements hold in the bigint64array. this is fixed at construction time and thus read only. instance methods bigint64array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). bigint64array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). bigint64array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). bigint64array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). bigint64array.prot...
...urning true or false as appropriate. see also array.prototype.includes(). bigint64array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). bigint64array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). bigint64array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). bigint64array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). bigint64array.prototype.map() creates a new array with the results of calling a ...
BigUint64Array - JavaScript
only. biguint64array.prototype.length returns the number of elements hold in the biguint64array. this is fixed at construction time and thus read only. instance methods biguint64array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). biguint64array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). biguint64array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). biguint64array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). biguint64array.p...
...ing true or false as appropriate. see also array.prototype.includes(). biguint64array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). biguint64array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). biguint64array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). biguint64array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). biguint64array.prototype.map() creates a new array with the results of calling ...
Error - JavaScript
column number in the line that raised this error. error.prototype.stack a non-standard mozilla property for a stack trace. instance methods error.prototype.tostring() returns a string representing the specified object. overrides the object.prototype.tostring() method. ...
...of raising it using the throw
keyword. you can handle the error using the try...catch construct: try { throw new error('whoops!') } catch (e) { console.error(e.name + ': ' + e.message) } handling a specific error you can choose to handle only specific error types by testing the error type with the error's constructor property or, if you're writing for modern javascript engines, instanceof
keyword: try { foo.bar() } catch (e) { if (e instanceof evalerror) { console.error(e.name + ': ' + e.message) } else if (e instanceof rangeerror) { console.error(e.name + ': ' + e.message) } // ... etc } custom error types you might want to define your own error types deriving from error to be able to throw new myerror() and use instanceof myerror to check the kind of error in t...
Float32Array - JavaScript
me and thus read only. float32array.prototype.length returns the number of elements hold in the float32array. fixed at construction time and thus read only. instance methods float32array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). float32array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). float32array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). float32array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). float32array.prototy...
...returning true or false as appropriate. see also array.prototype.includes(). float32array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). float32array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). float32array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). float32array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). float32array.prototype.map() creates a new array with the results of calling a pr...
Float64Array - JavaScript
me and thus read only. float64array.prototype.length returns the number of elements hold in the float64array. fixed at construction time and thus read only. instance methods float64array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). float64array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). float64array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). float64array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). float64array.prototy...
...returning true or false as appropriate. see also array.prototype.includes(). float64array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). float64array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). float64array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). float64array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). float64array.prototype.map() creates a new array with the results of calling a pr...
Function.prototype.bind() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax let boundfunc = func.bind(thisarg[, arg1[, arg2[, ...argn]]]) parameters thisarg the value to be passed as the this parameter to the target function func when the bound function is called. the value is ignored if the bound function is constructed using the new operator. ...
...t first argument. const addthirtyseven = addarguments.bind(null, 37); const list2 = leadingthirtysevenlist(); // [37] const list3 = leadingthirtysevenlist(1, 2, 3); // [37, 1, 2, 3] const result2 = addthirtyseven(5); // 37 + 5 = 42 const result3 = addthirtyseven(5, 10); // 37 + 5 = 42 // (the second argument is ignored) with settimeout() by default within window.settimeout(), the this
keyword will be set to the window (or global) object. when working with class methods that require this to refer to class instances, you may explicitly bind this to the callback function, in order to maintain the instance. function latebloomer() { this.petalcount = math.floor(math.random() * 12) + 1; } // declare bloom after a delay of 1 second latebloomer.prototype.bloom = function() { window.
Function.name - JavaScript
property returns the name of a function statement. function dosomething() {} dosomething.name; // "dosomething" function constructor name functions created with the syntax new function(...) or just function(...) create function objects and their name is "anonymous". (new function).name; // "anonymous" anonymous function expression anonymous function expressions that were created using the
keyword function or arrow functions would have ""(an empty string) as their name. (function() {}).name; // "" (() => {}).name; // "" inferred function names variables and methods can infer the name of an anonymous function from its syntactic position (new in ecmascript 2015). let f = function() {}; let object = { somemethod: function() {} }; console.log(f.name); // "f" console.log(object.some...
...warnings below): function foo() {} // es2015 syntax: class foo {} var fooinstance = new foo(); console.log(fooinstance.constructor.name); // logs "foo" warning: the script interpreter will set the built-in function.name property only if a function does not have an own property called name (see section 9.2.11 of the ecmascript2015 language specification). however, es2015 specifies the static
keyword such that static methods will be set as ownproperty of the class constructor function (ecmascript2015, 14.5.14.21.b + 12.2.6.9). therefore we can't obtain the class name for virtually any class with a static method property name(): class foo { constructor() {} static name() {} } with a static name() method foo.name no longer holds the actual class name but a reference to the name() f...
Int16Array - JavaScript
ction time and thus read only. int16array.prototype.length returns the number of elements hold in the int16array. fixed at construction time and thus read only. instance methods int16array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). int16array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). int16array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). int16array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). int16array.prototype.fil...
...ment, returning true or false as appropriate. see also array.prototype.includes(). int16array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). int16array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). int16array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). int16array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). int16array.prototype.map() creates a new array with the results of calling a provid...
Int32Array - JavaScript
ction time and thus read only. int32array.prototype.length returns the number of elements hold in the int32array. fixed at construction time and thus read only. instance methods int32array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). int32array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). int32array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). int32array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). int32array.prototype.fil...
...ment, returning true or false as appropriate. see also array.prototype.includes(). int32array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). int32array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). int32array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). int32array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). int32array.prototype.map() creates a new array with the results of calling a provid...
Int8Array - JavaScript
struction time and thus read only. int8array.prototype.length returns the number of elements hold in the int8array. fixed at construction time and thus read only. instance methods int8array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). int8array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). int8array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). int8array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). int8array.prototype.filter...
...element, returning true or false as appropriate. see also array.prototype.includes(). int8array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). int8array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). int8array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). int8array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). int8array.prototype.map() creates a new array with the results of calling a provided...
Intl.Collator.prototype.resolvedOptions() - JavaScript
tions() return value a new object with properties reflecting the locale and collation options computed during the initialization of the given collator object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 language tag that led to this locale, the
key-value pairs that were requested and are supported for this locale are included in locale. usage sensitivity ignorepunctuation the values provided for these properties in the options argument or filled in as defaults. collation the value requested using the unicode extension
key "co", if it is supported for locale, or "default". numeric casefirst the values requested for these properties ...
...if the implementation does not support these properties, they are omitted. ...
Intl.Locale.prototype.caseFirst - JavaScript
ed in the table below. casefirst values value description upper upper case to be sorted before lower case. lower lower case to be sorted before upper case. false no special case ordering. examples setting the casefirst value via the locale string in the unicode locale string spec, the values that casefirst represents correspond to the
key kf. kf is treated as a locale string "extension subtag". these subtags add additional data about the locale, and are added to locale identifiers by using the -u extension
key. thus, the casefirst value can be added to the inital locale identifier string that is passed into the locale constructor. to add the casefirst value, first add the -u extension
key to the string. next, add the -kf extension...
...finally, add the casefirst value to the string. ...
Intl.Locale.prototype.numberingSystem - JavaScript
finally, add the ...
...wara warang citi digits wcho wancho digits examples setting the numberingsystem value via the locale string in the unicode locale string spec, the values that numberingsystem represents correspond to the
key nu. nu is considered a locale string "extension subtag". these subtags add additional data about the locale, and are added to locale identifiers by first adding the -u
key. to set the numberingsystem value via the string argument to the locale constructor, first add the -u extension
key. next, add the -nu extension
key to indicate that you are adding a value for numberingsystem. finally, add the numberingsystem value to the string. let numberingsystemviastr = new intl.locale("fr-latn-fr-u-nu-mong"); console.log(numberingsystemstr.numberingsystem); // prints "mong"...
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
lue a new object with properties reflecting the locale and number formatting options computed during the initialization of the given relativetimeformat object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 language tag that led to this locale, the
key-value pairs that were requested and are supported for this locale are included in locale. style the length of the internationalized message. possible values are: "long" (default, e.g., in 1 month) "short" (e.g., in 1 mo.), or "narrow" (e.g., in 1 mo.). the narrow style could be similar to the short style for some locales. numeric the format of output message. possible values are: ...
...n 1 mo.), or "narrow" (e.g., in 1 mo.). the narrow style could be similar to the short style for some locales. numeric the format of output message. possible values are: "always" (default, e.g., 1 day ago), or "auto" (e.g., yesterday). the "auto" value allows to not always have to use numeric values in the output. numberingsystem the value requested using the unicode extension
key "nu" or filled in as a default. examples using the resolvedoptions method var de = new intl.relativetimeformat('de-de'); var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.style; // "long" usedoptions.numeric; // "always" usedoptions.numberingsystem; // "latn" specifications specification status comment ecm...
Reflect.defineProperty() - JavaScript
the static reflect.defineproperty() method is like object.defineproperty() but returns a boolean. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.defineproperty(target, property
key, attributes) parameters target the target object on which to define the property. property
key the name of the property to be defined or modified. attributes the attributes for the property being defined or modified. return value a boolean indicating whether or not the property was successfully defined. exceptions a typeerror, if target is not an object. description the reflect.defineproperty method allows...
...tes the attributes for the property being defined or modified. return value a boolean indicating whether or not the property was successfully defined. exceptions a typeerror, if target is not an object. description the reflect.defineproperty method allows precise addition to or modification of a property on an object. for more details, see the object.defineproperty which is similar. one
key difference: object.defineproperty returns the object or throws a typeerror if the property has not been successfully defined. reflect.defineproperty, however, simply returns a boolean indicating whether or not the property was successfully defined. examples using reflect.defineproperty() let obj = {} reflect.defineproperty(obj, 'x', {value: 7}) // true obj.x ...
Reflect.set() - JavaScript
the static reflect.set() method works like setting a property on an object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.set(target, property
key, value[, receiver]) parameters target the target object on which to set the property. property
key the name of the property to set. value the value to set. receiver optional the value of this provided for the call to target if a setter is encountered. return value a boolean indicating whether or not setting the property was successful. exceptions a typeerror, if target is not an object. description the reflect.set method allows you to s...
... and is like the property accessor syntax as a function. examples using reflect.set() // object let obj = {} reflect.set(obj, 'prop', 'value') // true obj.prop // "value" // array let arr = ['duck', 'duck', 'duck'] reflect.set(arr, 2, 'goose') // true arr[2] // "goose" // it can truncate an array. reflect.set(arr, 'length', 1) // true arr // ["duck"] // with just one argument, property
key and value are "undefined". let obj = {} reflect.set(obj) // true reflect.getownpropertydescriptor(obj, 'undefined') // { value: undefined, writable: true, enumerable: true, configurable: true } specifications specification ecmascript (ecma-262)the definition of 'reflect.set' in that specification. ...
Set.prototype.entries() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... 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. ...
Set.prototype.forEach() - JavaScript
sertion order. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax myset.foreach(callback[, thisarg]) parameters callback function to execute for each element, taking three arguments: currentvalue, current
key the current element being processed in the set. as there are no
keys in set, the value is passed for both arguments. set the set object which foreach() was called upon. thisarg value to use as this when executing callback. return value undefined. description the foreach() method executes the provided callback once for each value which actually exists in the set object. it is not ...
...s this when executing callback. return value undefined. description the foreach() method executes the provided callback once for each value which actually exists in the set object. it is not invoked for values which have been deleted. however, it is executed for values which are present but have the value undefined. callback is invoked with three arguments: the element value the element
key the set object being traversed there are no
keys in set objects, however, so the first two arguments are both values contained in the set. this is to make it consistent with other foreach() methods for map and array. if a thisarg parameter is provided to foreach(), it will be passed to callback when invoked, for use as its this value. otherwise, the value undefined will be passed for use as ...
Symbol.asyncIterator - JavaScript
e 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. description the symbol.asynciterator symbol is a builtin symbol that is used to access an object's @@asynciterator method. in order for an object to be async iterable, it must have a symbol.asynciterator
key. property attributes of symbol.asynciterator writable no enumerable no configurable no examples user-defined async iterables you can define your own async iterable by setting the [symbol.asynciterator] property on an object. const myasynciterable = { async* [symbol.asynciterator]() { ...
... // "hello" // "async" // "iteration!" } })(); when creating an api, remember that async iterables are designed to represent something iterable — like a stream of data or a list —, not to completely replace callbacks and events in most situations. built-in async iterables there are currently no built-in javascript objects that have the [symbol.asynciterator]
key set by default. however, whatwg streams are set to be the first built-in object to be async iterable, with [symbol.asynciterator] recently landing in the spec. specifications specification ecmascript (ecma-262)the definition of 'symbol.asynciterator' in that specification. ...
TypedArray - JavaScript
tion time and thus read only. typedarray.prototype.length returns the number of elements held in the typed array. fixed at construction time and thus read only. instance methods typedarray.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). typedarray.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). typedarray.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). typedarray.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). typedarray.prototype.fil...
...ment, returning true or false as appropriate. see also array.prototype.includes(). typedarray.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). typedarray.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). typedarray.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). typedarray.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). typedarray.prototype.map() creates a new array with the results of calling a provid...
Uint16Array - JavaScript
n time and thus read only. uint16array.prototype.length returns the number of elements hold in the uint16array. fixed at construction time and thus read only. instance methods uint16array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). uint16array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). uint16array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). uint16array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). uint16array.prototype.
...t, returning true or false as appropriate. see also array.prototype.includes(). uint16array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). uint16array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). uint16array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). uint16array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). uint16array.prototype.map() creates a new array with the results of calling a prov...
Uint32Array - JavaScript
n time and thus read only. uint32array.prototype.length returns the number of elements hold in the uint32array. fixed at construction time and thus read only. instance methods uint32array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). uint32array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). uint32array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). uint32array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). uint32array.prototype.
...t, returning true or false as appropriate. see also array.prototype.includes(). uint32array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). uint32array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). uint32array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). uint32array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). uint32array.prototype.map() creates a new array with the results of calling a prov...
Uint8Array - JavaScript
ction time and thus read only. uint8array.prototype.length returns the number of elements held in the uint8array. fixed at construction time and thus read only. instance methods uint8array.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). uint8array.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). uint8array.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). uint8array.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). uint8array.prototype.fil...
...ment, returning true or false as appropriate. see also array.prototype.includes(). uint8array.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). uint8array.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). uint8array.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). uint8array.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). uint8array.prototype.map() creates a new array with the results of calling a provid...
Uint8ClampedArray - JavaScript
y. uint8clampedarray.prototype.length returns the number of elements hold in the uintclamped8array. fixed at construction time and thus read only. instance methods uint8clampedarray.prototype.copywithin() copies a sequence of array elements within the array. see also array.prototype.copywithin(). uint8clampedarray.prototype.entries() returns a new array iterator object that contains the
key/value pairs for each index in the array. see also array.prototype.entries(). uint8clampedarray.prototype.every() tests whether all elements in the array pass the test provided by a function. see also array.prototype.every(). uint8clampedarray.prototype.fill() fills all the elements of an array from a start index to an end index with a static value. see also array.prototype.fill(). uint8clamp...
...or false as appropriate. see also array.prototype.includes(). uint8clampedarray.prototype.indexof() returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.indexof(). uint8clampedarray.prototype.join() joins all elements of an array into a string. see also array.prototype.join(). uint8clampedarray.prototype.
keys() returns a new array iterator that contains the
keys for each index in the array. see also array.prototype.
keys(). uint8clampedarray.prototype.lastindexof() returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. see also array.prototype.lastindexof(). uint8clampedarray.prototype.map() creates a new array with the results of ca...
Iteration protocols - JavaScript
behavior, such as what values are looped over in a for...of construct. some built-in types are built-in iterables with a default iteration behavior, such as array or map, while other types (such as object) are not. in order to be iterable, an object must implement the @@iterator method, meaning that the object (or one of the objects up its prototype chain) must have a property with a @@iterator
key which is available via constant symbol.iterator: property value [symbol.iterator] a zero-argument function that returns an object, conforming to the iterator protocol. whenever an object needs to be iterated (such as at the beginning of a for...of loop), its @@iterator method is called with no arguments, and the returned iterator is used to obtain the values to...
...onforming to the iterator protocol. whenever an object needs to be iterated (such as at the beginning of a for...of loop), its @@iterator method is called with no arguments, and the returned iterator is used to obtain the values to be iterated. note that when this zero-argument function is called, it is invoked as a method on the iterable object. therefore inside of the function, the this
keyword can be used to access the properties of the iterable object, to decide what to provide during the iteration. this function can be an ordinary function, or it can be a generator function, so that when invoked, an iterator object is returned. inside of this generator function, each entry can be provided by using yield. the iterator protocol the iterator protocol defines a standard way to pro...
Equality (==) - JavaScript
if you compare one of these with a string literal, the string object will be converted to a string literal and the contents will be compared. however, if both operands are string objects, then they...
...if you compare one of these with a string literal, the string object will be converted to a string literal and the contents will be compared. however, if both operands are string objects, then they are compared as objects and must...
Object initializer - JavaScript
be a string after json.parse(). json.parse() will reject computed property names and an error will be thrown. examples creating objects an empty object with no properties can be created like this: let object = {} however, the advantage of the literal or initializer notation is, that you are able to quickly create objects with properties inside the curly braces. you simply notate a list of
key: value pairs delimited by commas. the following code creates an object with three properties and the
keys are "foo", "age" and "baz". the values of these
keys are a string "bar", the number 42, and another object. let object = { foo: 'bar', age: 42, baz: {myprop: 12} } accessing properties once you have created an object, you might want to read or change them. object properties can be a...
...d in strict mode return true; } catch(e) { // error thrown, duplicates prohibited in strict mode return false; } } method definitions a property of an object can also refer to a function or a getter or setter method. let o = { property: function (parameters) {}, get property() {}, set property(value) {} } in ecmascript 2015, a shorthand notation is available, so that the
keyword "function" is no longer necessary. // shorthand method names (es2015) let o = { property(parameters) {}, } in ecmascript 2015, there is a way to concisely define properties whose values are generator functions: let o = { *generator() { ........... } }; which is equivalent to this es5-like notation (but note that ecmascript 5 has no generators): let o = { generator: function* ...
Property accessors - JavaScript
et notation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.property object['property'] description one can think of an object as an associative array (a.k.a. map, dictionary, hash, lookup table). the
keys in this array are the names of the object's properties. it's typical when speaking of an object's properties to make a distinction between properties and methods. however, the property/method distinction is little more than a convention. a method is simply a property that can be called (for example, if it has a reference to a function instance as its value). there are two ways to access proper...
... symbol. any other value, including a number, is coerced to a string. this outputs 'value', since 1 is coerced into '1'. let object = {} object['1'] = 'value' console.log(object[1]) this also outputs 'value', since both foo and bar are converted to the same string. let foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; object[foo] = 'value' console.log(object[bar]) in the spidermon
key javascript engine, this string would be "[object object]". method binding a method is not bound to the object that it is a method of. specifically, this is not fixed in a method. put another way, this does not necessarily refer to the object containing a method. instead, this is "passed" by the function call. see method binding. examples bracket notation vs. eval javascript novices often mak...
Spread syntax (...) - JavaScript
the source for this interactive example is stored in a github repository. ...
...bjects themselves are not iterable, but they become iterable when used in an array, or with iterating functions such as map(), reduce(), and assign(). when merging 2 objects together with the spread operator, it is assumed another iterating function is used when the merging occurs. spread syntax (other than in the case of spread properties) can be applied only to iterable objects: const obj = {'
key1': 'value1'}; const array = [...obj]; // typeerror: obj is not iterable spread with many values when using spread syntax for function calls, be aware of the possibility of exceeding the javascript engine's argument length limit. see apply() for more details. specifications specification ecmascript (ecma-262)the definition of 'array initializer' in that specification. ...
delete operator - JavaScript
strict vs. non-strict mode when in strict mode, if delete is used on a direct reference to a variable, a function argument or a function name, it will throw a syntaxerror. therefore, to avoid syntax errors in strict mode, you must use the delete operator in the form...
...f one later adds back a property with the same name, the property will be iterated in its old position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back. if you want to use an ordered associative array in a cross-browser environment, use a map object if available, or simulate this structure with two separate arrays (one for the
keys and the other for the values), or build an array of single-property objects, etc. examples // creates the property adminname on the global scope. adminname = 'xyz'; // creates the property empcount on the global scope. // since we are using var, this is marked as non-configurable. the same is true of let and const. var empcount = 43; employeedetails = { name: 'xyz', age: 5, designation...
void operator - JavaScript
javascript uris when a browser follows a javascript: uri, it evaluates the code in the uri and then replaces the contents of the page with the returned value...
... void (2 == '2'); // void (2 == '2'), returns undefined examples immediately invoked function expressions when using an immediately-invoked function expression, void can be used to force the function
keyword to be treated as an expression instead of a declaration. void function iife() { console.log("executed!"); }(); // output: "executed!" executing the above function without the void
keyword will result in an uncaught syntaxerror. javascript uris when a browser follows a javascript: uri, it evaluates the code in the uri and then replaces the contents of the page with the returned value, unless the returned value is undefined. the void operator can be used to return undefined. for example: <a href="javascript:void(0);"> click here to do nothing </a> <a href="javascript:void(...
yield - JavaScript
the yield
keyword is used to pause and resume a generator function (function* or legacy generator function). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax [rv] = yield [expression] expression optional defines the value to return from the generator function via the iterator protocol. if omitted, undefined is returned instead. rv optional retrieves the optional value passed to the generator's next() method to resume its execution. description the yield
keyword pauses generator function execution and the value of the expression following the yield
keyword is returned to the generator's caller. i...
...or protocol. if omitted, undefined is returned instead. rv optional retrieves the optional value passed to the generator's next() method to resume its execution. description the yield
keyword pauses generator function execution and the value of the expression following the yield
keyword is returned to the generator's caller. it can be thought of as a generator-based version of the return
keyword. yield can only be called directly from the generator function that contains it. it cannot be called from nested functions or from callbacks. the yield
keyword causes the call to the generator's next() method to return an iteratorresult object with two properties: value and done. the value property is the result of evaluating the yield expression, and done is false, indicating that the gene...
for...in - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax for (variable in object) statement variable a different property name is assigned to variable on each iteration. object object whose non-symbol enumerable properties are iterated over. description a for...in loop only iterates over enumerable, non-symbol properties. ...
... object properties, not recommended for use with arrays, and options like array.prototype.foreach() and for...of exist, what might be the use of for...in at all? it may be most practically used for debugging purposes, being an easy way to check the properties of an object (by outputting to the console or otherwise). although arrays are often more practical for storing data, in situations where a
key-value pair is preferred for working with data (with properties acting as the "
key"), there may be instances where you want to check if any of those
keys hold a particular value. examples using for...in the for...in loop below iterates over all of the object's enumerable, non-symbol properties and logs a string of the property names and their values. var obj = {a: 1, b: 2, c: 3}; for (const p...
for...of - JavaScript
alue of iterable) { console.log(value); } // "b" // "o" // "o" iterating over a typedarray const iterable = new uint8array([0x00, 0xff]); for (const value of iterable) { console.log(value); } // 0 // 255 iterating over a map const iterable = new map([['a', 1], ['b', 2], ['c', 3]]); for (const entry of iterable) { console.log(entry); } // ['a', 1] // ['b', 2] // ['c', 3] for (const [
key, value] of iterable) { console.log(value); } // 1 // 2 // 3 iterating over a set const iterable = new set([1, 1, 2, 2, 3, 3]); for (const value of iterable) { console.log(value); } // 1 // 2 // 3 iterating over the arguments object you can iterate over the arguments object to examine all of the parameters passed into a javascript function: (function() { for (const argument of argume...
...upon exiting a loop, the generator is closed and trying to iterate over it again does not yield any further results. const gen = (function *(){ yield 1; yield 2; yield 3; })(); for (const o of gen) { console.log(o); break; // closes iterator } // the generator should not be re-used, the following does not make sense! for (const o of gen) { console.log(o); // never called. } ...
import - JavaScript
in such cases, the default import will have to be declared first. for instance: import mydefault, * as mymodule from '/modules/my-module.js'; // mymodule used as a namespace or import mydefault, {foo, bar} from '/modules/my-module.js'; // specific, named imports when importing a default export with dynamic imports, it works a bit differently. you need to destructure and rename the "default"
key from the returned object. (async () => { if (somethingistrue) { const { default: mydefault, foo, bar } = await import('/modules/my-module.js'); } })(); dynamic imports the standard import syntax is static and will always result in all code in the imported module being evaluated at load time. in situations where you wish to load a module conditionally or on demand, you can use a dynamic...
...se side effects unless some condition is true. (it is recommended not to have any side effects in a module, but you sometimes cannot control this in your module dependencies.) use dynamic import only when necessary. the static form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and tree shaking. to dynamically import a module, the import
keyword may be called as a function. when used this way, it returns a promise. import('/modules/my-module.js') .then((module) => { // do something with the module. }); this form also supports the await
keyword. let module = await import('/modules/my-module.js'); examples standard import the code below shows how to import from a secondary module to assist in processing an ajax json req...
Statements and declarations - JavaScript
statements and declarations by category for an alphabetical listing see the sidebar on the left. control flow block a block statement is used to group zero or more statements. the block is delimited by a pair of curly brackets. ...
... statements and declarations by category for an alphabetical listing see the sidebar on the left. control flow block a block statement is used to group zero or more statements. the block is delimited by a pair of curly brackets. ...
JavaScript
and tutorials. for complete beginners head over to our learning area javascript topic if you want to learn javascript but have no previous experience of javascript or programming. the complete modules available there are as follows: javascript first steps answers some fundamental questions such as "what is javascript?", "what does it look like?", and "what can it do?", along with discussing
key javascript features such as variables, strings, numbers, and arrays. javascript building blocks continues our coverage of javascript's
key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. introducing javascript objects the object-oriented nature of javascript is important to understand if you...
...e, error, function, json, math, number, object, regexp, string, map, set, weakmap, weakset, and others. expressions and operators learn more about the behavior of javascript's operators instanceof, typeof, new, this, the operator precedence, and more. statements and declarations learn how do-while, for-in, for-of, try-catch, let, var, const, if-else, switch, and more javascript statements and
keywords work. functions learn how to work with javascript's functions to develop your applications. tools & resources helpful tools for writing and debugging your javascript code. firefox developer tools web console, javascript profiler, debugger, and more. javascript shells a javascript shell allows you to quickly test snippets of javascript code. learn javascript an excellent resource...
Values - MathML
88889em constant value veryverythinmathspace 1/18em verythinmathspace 2/18em thinmathspace 3/18em mediummathspace 4/18em thickmathspace 5/18em verythickmathspace 6/18em veryverythickmathspace 7/18em negative contstants are introduced in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) (bug 650530) negativeveryverythinmathspace -1/18em negativeverythinmathspace -2/18em negativethinmathspace -3/18em negativemediummathspace -4/18em negativethickmathspace -5/18em negativeverythickmathspace -6/18em negativeveryverythickmathspace -7/18em note: namedspace binding is deprecated in mathm...
... ...
CSS and JavaScript animation performance - Web Performance
he new transition starts from the current style immediately instead of jumping to the end css state. see using css transitions for more details. css animations, on the other hand, allow developers to make animations between a set of starting property values and a final set rather than between two states. css animations consist of two components: a style describing the css animation, and a set of
key frames that indicate the start and end states of the animation's style, as well as possible intermediate points. see using css animations for more details. in terms of performance, there is no difference between implementing an animation with css transitions or animations. both of them are classified under the same css-based umbrella in this article. requestanimationframe the requestanimation...
... the animation can be switched to requestanimationframe() by clicking the toggle button. try running them both now, comparing the fps for each (the first purple box.) you should see that the performance of css animations and requestanimationframe() are very close. off main thread animation even given the test results above, we'd argue that css animations are the better choice. but how? the
key is that as long as the properties we want to animate do not trigger reflow/repaint (read css triggers for more information), we can move those sampling operations out of the main thread. the most common property is the css transform. if an element is promoted as a layer, animating transform properties can be done in the gpu, meaning better performance/efficiency, especially on mobile. find out m...
Privacy, permissions, and information security
feature policy lets web developers selectively enable, disable, and modify the behavior of certain features and apis both for a document and for subdocuments loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow attribute on an <iframe> specifies which web features the document in the frame should be allowed to access http public
key pinning (hpkp) hpkp is used by servers to instruct a client to associate a specific public
key with the server going forward in order to decrease the likelihood of man-in-the-middle attacks http strict transport security (hsts) hsts is used by servers to let them protect themselves from protocol downgrade and cookie hijack attacks by letting sites tell clients that they can only us...
... the allow attribute to delegate that permission to the contents of the frame. in this case, it's possible for the user to wind up being prompted repeatedly for that same resource, first by the main page, then by the document in the frame. browsers may choose to provide ways around this. for example, in firefox 73, the user permission requests were revised so that when an <iframe> uses the allow
keyword to delegate permission to the embeded document, the browser asks the user to grant the parent document permission to use the resource, and that permission is then shared with the embedded content that requested the resource to begin with. <-- diagram and/or code snippet to clarify things--> ...
Introduction to progressive web apps - Progressive web apps (PWAs)
of given features: works offline, is installable, is easy to synchronize, can send push notifications, etc. in addition, there are tools to measure how complete (as a percentage) a web app is, such as lighthouse. by implementing various technological advantages, we can make an app more progressive, thus ending up with a higher lighthouse score. but this is only a rough indicator. there are some
key principles a web app should try to observe to be identified as a pwa. it should be: discoverable, so the contents can be found through search engines. installable, so it can be available on the device's home screen or app launcher. linkable, so you can share it by simply sending a url. network independent, so it works offline or with a poor network connection. progressive, so it's still us...
...y have a number 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. howe...
alignment-baseline - SVG: Scalable Vector Graphics
nt. before-edge the alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element. text-bottom matches the bottom of the box to the top of the parent’s content area. text-before-edge the alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element. note: this
keyword may be mapped to text-top. middle aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. central matches the box’s central baseline to the central baseline of its parent. after-edge the alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element. text-top m...
...s parent. after-edge the alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element. text-top matches the top of the box to the top of the parent’s content area. text-after-edge the alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element. note: this
keyword may be mapped to text-bottom. ideographic matches the box’s ideographic character face under-side baseline to that of its parent. alphabetic matches the box’s alphabetic baseline to that of its parent. hanging the alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element. mathematical matches the box’s mathematica...
preserveAspectRatio - SVG: Scalable Vector Graphics
width="160" height="60" preserveaspectratio="none" x="0" y="30"> <use href="#smiley" /> </svg> </svg> path { fill: yellow; stroke: black; stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } rect:hover, rect:active { outline: 1px solid red; } syntax preserveaspectratio="<align> [<meetorslice>]" its value is made of one or two
keywords: a required alignment value and an optional "meet or slice" reference as described below: alignment value the alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the viewbox doesn't match the aspect ratio of the viewport. the alignment value must be one of the following
keywords: none do not force uniform s...
...t's viewbox with the maximum y value of the viewport. xmaxymax - force uniform scaling. align the <min-x>+<width> of the element's viewbox with the maximum x value of the viewport. align the <min-y>+<height> of the element's viewbox with the maximum y value of the viewport. ...
xChannelSelector - SVG: Scalable Vector Graphics
aphic" scale="30" xchannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this
keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis. g this
keyword specifies that the green color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis. b this
keyword specifies that the blue color channel of th...
... specifications specification status comment filter effects module level 1the definition of 'xchannelselector' in that specification. ...
yChannelSelector - SVG: Scalable Vector Graphics
aphic" scale="30" ychannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this
keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis. g this
keyword specifies that the green color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis. b this
keyword specifies that the blue color channel of th...
... specifications specification status comment filter effects module level 1the definition of 'ychannelselector' in that specification. ...
Content type - SVG: Scalable Vector Graphics
s use of the color attribute and is a component of the definitions of attributes fill, stroke, stop-color, flood-color, and lighting-color, which also offer optional icc-based color specifications. svg supports all of the syntax alternatives for <color> defined in css2 syntax and basic data types, and (depend on the implementation) in the future css color module level 3. a <color> is either a
keyword or a numerical rgb specification. in addition to these color
keywords, users may specify
keywords that correspond to the colors used by objects in the user's environment. the normative definition of these
keywords is found in user preferences for colors (css2, section 18.2). the format of an rgb value in hexadecimal notation is a "#" immediately followed by either three or six hexadecimal...
...s. all rgb colors are specified in the srgb color space. using srgb provides an unambiguous and objectively measurable definition of the color, which can be related to international standards. color ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)? | "rgb("integer, integer, integer")" | "rgb("integer "%", integer "%", integer "%)" | color-
keyword hexdigit ::= [0-9a-fa-f] where color-
keyword matches (case insensitively) one of the color
keywords listed in css color module level 3, or one of the system color
keywords listed in user preferences for colors (css2, section 18.2). the corresponding svg dom interface definitions for <color> are defined the one defined by css. svg's extension to color, including the ability to specify icc...
SVG documentation index - SVG: Scalable Vector Graphics
columns and rows in the kernel matrix. 118 kerning deprecated, svg, svg attribute the kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero). 119
keypoints svg, svg attribute the
keypoints attribute indicates the simple duration of an animation. 120
keysplines svg, svg attribute the
keysplines attribute defines a set of bézier curve control points associated with the
keytimes list, defining a cubic bézier function that controls interval pacing. this attribute is ignored unless the calcmode attribute is set t...
...oints attribute indicates the simple duration of an animation. 120
keysplines svg, svg attribute the
keysplines attribute defines a set of bézier curve control points associated with the
keytimes list, defining a cubic bézier function that controls interval pacing. this attribute is ignored unless the calcmode attribute is set to spline. if there are any errors in the
keysplines specification (bad values, too many or too few values), the animation will not occur. 121
keytimes svg, svg attribute the
keytimes attribute represents a list of time values used to control the pacing of the animation. each time in the list corresponds to a value in the values attribute list, and defines when the value is used in the animation. 122 lang ...
Using custom elements - Web Components
this article introduces the use of the custom elements api. note: custom elements are supported by default in firefox, chrome, and edge (76). opera and safari so far support only autonomous custom elements. high-level view the controller of custom elements on a web document is the customelementregistry object — this object allows you to register a custom element on the page, return information on what custom elements are registered, etc. ...
... function updatestyle(elem) { const shadow = elem.shadowroot; shadow.queryselector('style').textcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; backgroun...
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
the bcd for <xsl:fallback>, <xsl:import>, <xsl:namespace-alias>, <xsl:number>, <xsl:output>, <xsl:stylesheet>, <xsl:text> and <xsl:value-of> is fully migrated. ...
...:template><xsl:text><xsl:transform><xsl:value-of><xsl:variable><xsl:when><xsl:with-param> <xsl:apply-imports> <xsl:apply-templates> <xsl:attribute> <xsl:attribute-set> <xsl:call-template> <xsl:choose> <xsl:comment> <xsl:copy> <xsl:copy-of> <xsl:decimal-format> <xsl:element> <xsl:fallback> (not supported) <xsl:for-each> <xsl:if> <xsl:import> (mostly supported) <xsl:include> <xsl:
key> <xsl:message> <xsl:namespace-alias> (not supported) <xsl:number> (partially supported) <xsl:otherwise> <xsl:output> (partially supported) <xsl:param> <xsl:preserve-space> <xsl:processing-instruction> <xsl:sort> <xsl:strip-space> <xsl:stylesheet> (partially supported) <xsl:template> <xsl:text> (partially supported) <xsl:transform> <xsl:value-of> (partially supported) <xsl:variable...
The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
orted) xsl:attribute (supported) xsl:attribute-set (supported) xsl:call-template (supported) xsl:choose (supported) xsl:comment (supported) xsl:copy (supported) xsl:copy-of (supported) xsl:decimal-format (supported) xsl:element (supported) xsl:fallback (not supported) xsl:for-each (supported) xsl:if (supported) xsl:import (mostly supported) xsl:include (supported) xsl:
key (supported) xsl:message (supported) xsl:namespace-alias (not supported) xsl:number (partially supported) xsl:otherwise (supported) xsl:output (partially supported) xsl:param (supported) xsl:preserve-space (supported) xsl:processing-instruction xsl:sort (supported) xsl:strip-space (supported) xsl:stylesheet (partially supported) xsl:template (supported) xsl:text (partiall...
...ceding-sibling self functions boolean() (supported) ceiling() (supported) concat() (supported) contains() (supported) count() (supported) current() (supported) document() (supported) element-available() (supported) false() (supported) floor() (supported) format-number() (supported) function-available() (supported) generate-id() (supported) id() (partially supported)
key() (supported) lang() (supported) last() (supported) local-name() (supported) name() (supported) namespace-uri() (supported) normalize-space() (supported) not() (supported) number() (supported) position() (supported) round() (supported) starts-with() (supported) string() (supported) string-length() (supported) substring() (supported) substring-after() (supported) su...
Caching compiled WebAssembly modules - WebAssembly
rr => { console.log(`failed to store in wasm cache: ${err}`) }; request.onsuccess = err => { console.log(`successfully stored ${url} in wasm cache`) }; } using our helper functions with all the promise-based helper functions defined, we can now express the core logic of an indexeddb cache lookup. ...
...e with the
key url stored in the given db: return opendatabase().then(db => { return lookupindatabase(db).then(module => { if we do, we instantiate it with the given import object: console.log(`found ${url} in wasm cache`); return webassembly.instantiate(module, importobject); }, if not, we compile it from scratch and then store the compiled module in the database with a
key of url, for next time we want to use it: errmsg => { console.log(errmsg); return webassembly.instantiatestreaming(fetch(url)).then(results => { storeindatabase(db, results.module); return results.instance; }); }) }, note: it is for this kind of usage that webassembly.instantiate() returns both a module and an instance: the module represents the compi...
Interacting with page scripts - Archive of obsolete content
eventlistener("click", function() { alert(window.foo.greetme("page script")); }, false); </script> </body> </html> reverting to the old behavior you can switch firefox back to the old behavior in which content scripts could expose objects and functions to page scripts using unsafewindow. to do this, add an option called “unsafe-content-script” under the “permissions”
key in package.json, and set it to true. "permissions": { "unsafe-content-script": true } this is only a temporary migration aid, and will be removed eventually. communicating with page scripts there are two different ways a content script can communicate with a page script: using the dom postmessage() api using custom dom events using the dom postmessage api note that before firefox...
Content Scripts - Archive of obsolete content
'});' }); cross-domain content scripts by default, content scripts don't have any cross-domain privileges. in particular, they can't access content hosted in an iframe, if that content is served from a different domain, or make cross-domain xmlhttprequests. however, you can enable these features for specific domains by adding them to your add-on's package.json under the "cross-domain-content"
key, which itself lives under the "permissions"
key. see the article on cross-domain content scripts. ...
Classes and Inheritance - Archive of obsolete content
cript 6 standard, a javascript class was defined by creating a constructor function for that class. to illustrate this, let's define a simple constructor for a class shape: function shape(x, y) { this.x = x; this.y = y; } we can now use this constructor to create instances of shape: let shape = new shape(2, 3); shape instanceof shape; // => true shape.x; // => 2 shape.y; // => 3 the
keyword new tells javascript that we are performing a constructor call. constructor calls differ from ordinary function calls in that javascript automatically creates a new object and binds it to the
keyword this for the duration of the call. moreover, if the constructor does not return a value, the result of the call defaults to the value of this. constructors are just ordinary functions, however, s...
Modules - Archive of obsolete content
called by the loading script, even if that method was installed by a malicious script. to avoid problems like this, the object passed to loadsubscript should be a true global object, having its own instances of the built-in constructors. this is exactly what sandboxes are for. a sandbox is a global object that lives in a separate compartment. compartments are a fairly recent addition to spidermon
key, and can be seen as a separate memory space. objects living in one compartment cannot be accessed directly from another compartment: they need to be accessed through an intermediate object, known as a wrapper. compartments are very useful from a security point of view: each compartment has a set of privileges that determines what a script running in that compartment can and cannot do. compartment...
context-menu - Archive of obsolete content
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 string an optional arbitrary value to associate with the item. it must be either a string or an object that implements tostring(). it will be passed to click listeners. access
key single-character string new in firefox 35. access
key for the item. pressing this
key selects the item when the context menu is open. context value if the item is contained in the top-level context menu, this declaratively specifies the context under which the item will appear; see specifying contexts above. contentscript string,ar...
private-browsing - Archive of obsolete content
tus is a property of an individual browser window. the user enters private browsing by opening a new private browser window. when they do this, any existing non-private windows are kept open, so the user will typically have both private and non-private windows open at the same time. ...
request - Archive of obsolete content
ead-only. properties url the url of the response content. text the content of the response as plain text. json the content of the response as a javascript object. the value will be null if the document cannot be processed by json.parse. status the http response status code (e.g. 200). statustext the http response status line (e.g. ok). headers the http response headers represented as
key/value pairs. to print all the headers you can do something like this: for (var headername in response.headers) { console.log(headername + " : " + response.headers[headername]); } anonymous boolean indicating if the request was anonymous. ...
self - Archive of obsolete content
dd-on's version string. it comes from the version property set in the package.json file in the main package. loadreason this property contains of the following strings describing the reason your add-on was loaded: install enable startup upgrade downgrade isprivatebrowsingsupported this property indicates whether or not the add-on supports private browsing. it comes from the private-browsing
key in the add-on's package.json file. data the data object is used to access data that was bundled with the add-on. this data lives in the add-on's data/ directory, immediately below the package.json file. all files in this directory will be copied into the xpi and made available through the data object. the package specification article explains the package.json file. methods data.load(name) ...
High-Level APIs - Archive of obsolete content
otherwise, all these modules are "stable": we'll avoid making incompatible changes to them. addon-page create a page that does not contain navigational elements. base64 data encoding and decoding using base64 algorithms. clipboard interact with the system clipboard, setting and getting its contents. context-menu adds items, submenus, and menu separators to the page's context menu. hot
keys assign hot
key combinations to functions in your add-on. indexed-db exposes the indexeddb api to add-ons. l10n localize strings appearing in the add-on's javascript code. notifications display transient, toaster-style desktop messages to the user. page-mod run scripts in the context of web pages whose url matches a given pattern. page-worker create a permanent, invisible page and acces...
content/loader - Archive of obsolete content
s once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. contenturl the url of the content loaded. allow permissions for the content, with the following
keys: ...
event/target - Archive of obsolete content
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 eventtarget interface defines on method, that can be used to register event listeners on them for the given event type: target.on('message', function onmessage(message) { // note: `this` pseudo variable is...
places/history - Archive of obsolete content
y within a query object. multiple query objects are then or'd together. options : object optional options: name type count number the number of bookmark items to return. if left undefined, no limit is set. sort string a string specifying how the results should be sorted. possible options are 'title', 'date', 'url', 'visitcount', '
keyword', 'dateadded' and 'lastmodified'. descending boolean a boolean specifying whether the results should be in descending order. by default, results are in ascending order. placesemitter the placesemitter is not exposed in the module, but returned from the search functions. the placesemitter inherits from event/target, and emits data, error, and end. data event...
preferences/service - Archive of obsolete content
ar name = "extensions.checkcompatibility.nightly"; var nightlycompatchk = require("sdk/preferences/service").get(name); has(name) parameters name : string preference name. returns boolean : returns whether or not the application preference name exists. defaultvalue example: var name = "extensions.checkcompatibility.nightly"; if (require("sdk/preferences/service").has(name)) { // ... }
keys(root) parameters root : string preference root name. returns array : returns an array of strings representing the child preferences of the root of this branch. isset(name) parameters name : string preference name. returns boolean : returns whether or not the application preference name both exists and has been set to a non-default value by the user (or a program acting on the user's b...
system/xul-app - Archive of obsolete content
r bound of the version range to compare. the range does not include this bound. returns boolean : true if version falls in the given range and false otherwise. properties id the guid of the host application. for example, for firefox this value is "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}". name the host application name. the possible values here are: "firefox" "fennec" "mozilla" "seamon
key" "sunbird" "thunderbird" "firefox"and"fennec"` are the most commonly used values. version the host application version. platformversion the gecko/xulrunner platform version. ids a mapping of application names to their ids. for example, ids["firefox"] == "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}". ...
test/assert - Archive of obsolete content
is a date object, the actual value is equivalent if it is also a date object that refers to the same time. other pairs that do not both pass typeof value == "object", equivalence is determined by ==. for all other object pairs, including array objects, equivalence is determined by having the same number of owned properties (as verified with object.prototype.hasownproperty.call), the same set of
keys (although not necessarily the same order), equivalent values for every corresponding
key, and an identical "prototype" property. note: this accounts for both named and indexed properties on arrays. assert.deepequal({ a: "foo" }, { a: "foo" }, "equivalent objects"); parameters actual : object the actual result. expected : object the expected result. message : string optional message to ...
util/list - Archive of obsolete content
erty. examples: var { list } = require("sdk/util/list"); var mylist = list.compose({ add: function add(item1, item2, /*item3...*/) { array.slice(arguments).foreach(this._add.bind(this)); }, remove: function remove(item1, item2, /*item3...*/) { array.slice(arguments).foreach(this._remove.bind(this)); } }); mylist('foo', 'bar', 'baz').length == 3; // true new mylist('new', '
keyword').length == 2; // true mylist.apply(null, [1, 2, 3]).length == 3; // true let list = mylist(); list.length == 0; // true list.add(1, 2, 3) == 3; // true properties length number of elements in this list. ...
window/utils - Archive of obsolete content
alog=no'. args object extra argument(s) to be attached to the new window as the window.arguments property. returns nsidomwindow windows() returns an array of all currently opened windows. note that these windows may still be loading. in order to see private windows in this list, your add-on must have opted into private browsing and you must include the includeprivate
key in the list of options: var allwindows = window_utils.windows(null, {includeprivate:true}); parameters type : string string identifying the type of window to return. this is passed directly into nsiwindowmediator.getenumerator(), so its possible values are the same as those expected by that function. in particular: null: get all window types navigator:browser: get "normal" browser window...
Release notes - Archive of obsolete content
removed isprivatebrowsing from browserwindow. details github commits made between firefox 34 and firefox 35. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 34 and firefox 35. this will not include any uplifts made after this release entered aurora. firefox 34 highlights new api: dev/panel enables you to extend the firefox developer tools. jpm beta released. "./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. ...
cfx to jpm - Archive of obsolete content
round described in https://bug635044.bugzilla.mozilla.org/show_bug.cgi?id=1243467 commands and command options permanently removed commands jpm has dropped support for all the "internal" cfx commands. permanently removed options jpm has dropped support for: --extra-packages --use-config --package-path --pkgdir --no-strip-xpi --harness-option --manifest-overload --output-file --templatedir --
keydir --profiledir --overload-modules --static-args --app --no-run --addons --e10s --logfile --dependencies --force-mobile --test-runner-pkg instead of --profiledir and --overload-modules, use --profile and --overload. instead of using --force-mobile, explicitly add fennec to engines section of your package.json. package.json fields many package.json fields are implicit commands to cfx. in jpm, ...
Implementing the widget - Archive of obsolete content
tory widget. we'll keep the widget's files here. this hierarchy isn't mandatory; you could just keep them all under data. but it seems tidier this way. the widget's content script the widget's content script just listens for left- and right- mouse clicks and posts the corresponding message to the add-on code: this.addeventlistener('click', function(event) { if(event.button == 0 && event.shift
key == false) self.port.emit('left-click'); if(event.button == 2 || (event.button == 0 && event.shift
key == true)) self.port.emit('right-click'); event.preventdefault(); }, true); save this in your data/widget directory as widget.js. the widget's icons you can copy the widget's icons from here: or, if you're feeling creative, you can make your own icons. either way, save them in...
Overview - Archive of obsolete content
es the mouse over an annotated element the matcher tells the main add-on code, which displays the annotation panel. working with data we'll use the simple-storage module to store annotations. because we are recording potentially sensitive information, we want to prevent the user creating annotations when in private browsing mode. the simplest way to do this is to omit the "private-browsing"
key from the add-on's "package.json" file. if we do this, then the add-on won't see any private windows, and the annotator's widget will not appear in any private windows. getting started let's get started by creating a directory called "annotator". navigate to it and type cfx init. next, we will implement the widget. ...
Getting Started (jpm) - Archive of obsolete content
https://addons.mozilla.org so other users can download and install them. to build an xpi, just execute the command jpm xpi from the add-on's directory: jpm xpi you should see a message like: jpm info successfully created xpi at /path/to/my-addon/@my-addon-0.0.1.xpi to test that this worked, try installing the xpi file in your own firefox installation. you can do this by pressing the ctrl+o
key combination (cmd+o on mac) from within firefox, or selecting the "open" item from firefox's "file" menu. this will bring up a file selection dialog: navigate 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 installe...
Getting started (cfx) - Archive of obsolete content
xpi files yourself or publish them to https://addons.mozilla.org so other users can download and install them. to build an xpi, just execute the command cfx xpi from the add-on's directory: cfx xpi you should see a message like: exporting extension to my-addon.xpi. to test that this worked, try installing the xpi file in your own firefox installation. you can do this by pressing the ctrl+o
key combination (cmd+o on mac) from within firefox, or selecting the "open" item from firefox's "file" menu. this will bring up a file selection dialog; navigate to the "my-addon.xpi" file, open it and follow the prompts to install the add-on. summary in this tutorial we've built and packaged an add-on using three commands: cfx init to initialize an empty add-on template cfx run to run a new in...
Troubleshooting - Archive of obsolete content
ur text console when errors are generated in the sdk's apis and your code, they are logged to the text console. this should be the same console or shell from which you ran the jpm command. search for known issues someone else might have experienced your problem, too. other users often post problems to the project mailing list. you can also browse the list of known issues or search for specific
keywords. contact the project team and user group sdk users and project team members discuss problems and proposals on the project mailing list. someone else may have had the same problem you do, so try searching the list. you're welcome to post a question, too. you can also chat with other sdk users in #jetpack on mozilla's irc network. and if you'd like to report a bug in the sdk, that's always...
Using third-party modules (jpm) - Archive of obsolete content
e a new directory called, for example, "my-menuitem", navigate to it, type "jpm init" and accept all the defaults: mkdir my-menuitem cd my-menuitem jpm init install the menuitem package from npm: npm install menuitem --save this will install the package in the current directory, under a directory called "node_modules". the --save argument instructs npm to add this package to the dependencies
key in the add-on's package.json file. you'll now see a new directory in "my-menuitem" called "node_modules". it will contain a single directory "addon-pathfinder", and the modules included in this package will be somewhere in that directory: my-menuitem index.js node_modules menuitem package.json test we're interested in using the "menuitem" module, which...
Embedding SVG - Archive of obsolete content
width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg...
Examples and demos from articles - Archive of obsolete content
e instantiation of them. convert relative paths to absolute this example show how to translate relative paths to absolute paths. a shortcut to massively modify the dom this example shows how to create a framework able to modify many properties of dom objects at the same time. filter the digitation into a form field, capture the digitation of a hidden word this example shows the use of the on
keypress event during a digitation into a form field. ajax – submitting forms and uploading files this paragraph shows how to submit forms in pure-ajax. multipage ajax navigation example this article provides a working (minimalist) example of a pure-ajax web site composed only of three pages. do something if current document has changed since last visit here is a possible example of how to sh...
Progress Listeners - Archive of obsolete content
used with a tabbrowser, you cannot choose which types of events that will be received. instead, you receive those events that the tabbrowser is interested in, except that the onlinkiconavailable and onrefreshattempted notifications are optional. the tabbrowser uses a strong reference to your listener object. gecko 2.0 note starting in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1), all events are optional. the tabbrowser only notifies you of the events for which you provide a callback. remember to change mylistener to a unique identifier. example: notification when the value in address bar changes a commonly asked question is how to get notified whenever the url in the address bar (also known as location bar) changes. using the following code, you will get notifie...
QuerySelector - Archive of obsolete content
l example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.getelementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/javascript"><![cdata[ element.prototype.$ = function (selector) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul'; alert(document.getelementsbytagnamens(xulns, 'hbox')[0].$('vbox').nodename); // vbox ]]></script> xml example: <foo xmlns="somens"><bar/></foo> in document earlier var foo = document.getelementsbytagnamens('somens', 'foo')[0]; alert(foo.$('bar')); note that for plain xml, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute...
Scrollbar - Archive of obsolete content
override: override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css change some color values inside the app/chrome/skin/global/scrollbars.css to test that the css is used. example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/
keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...
Windows - Archive of obsolete content
you can get a dom window's id using the nsidomwindowutils attribute outerwindowid. each time a new window is created, it gets assigned an id one greater than the last created window. this can be used in cases in which you need to uniquely identify a dom window during the duration of the application's lifespan: var util = win.queryi...
Default Preferences - Archive of obsolete content
mozilla provides a simple way of shipping default settings by allowing default preferences. remember that preferences are held in two separate trees. one with user supplied prefs, another with default prefs. user supplied prefs are set using the gui and also by modifying a profile's prefs.js file (which uses the user_pref() function). default preferences are set similarly but inside an extension and use the pref() function. ...
Developing add-ons - Archive of obsolete content
r add-ons. add-ons topics submitting an add-on to amo provides helpful information for add-on developers to help them properly package and deliver their add-ons. this includes information about addons.mozilla.org, mozilla's add-on distribution web site. extensions extensions add new functionality to mozilla applications such as firefox, seamon
key and thunderbird. they can add anything from a toolbar button to a completely new feature. plugins information about how to create plugins, which are binary components that let mozilla based software display content they can't handle natively. jetpack browser extension development for everyone. jetpack developers only need to know the tools of the modern web: html, css, and jav...
How to convert an overlay extension to restartless - Archive of obsolete content
, xul overlays and windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own. some of that will have to be replaced and the rest will need to be loaded differently. next, what's the minimum version of firefox we should require (preferably an esr)? this guide targets firefox 17 esr or later (or anything else gecko 17+, such as seamon
key 2.14+). this is two esrs back (as of this writing), which should be plenty. using the current firefox esr, stable version, or nightly is generally a better idea if given the option, but some users take forever to upgrade. there will be no usage of the add-on sdk or any other external libraries here. everything will use apis available in firefox 17+ or code provided here. step 1: use services.js...
Inline options - Archive of obsolete content
tail view in the add-on manager. this functionality originally appeared in firefox mobile and is now available in firefox on the desktop as well. options file the xul allowed for the inline options is limited to a few new tags. here is an example of an options.xul file: <?xml version="1.0"?> <!doctype mydialog system "chrome://myaddon/locale/mydialog.dtd"> <vbox xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <setting type="bool" pref="extensions.myaddon.bool" title="boolean" desc="stored as a boolean preference" /> </vbox> note that it's limited to <setting> tags. the root <vbox> just acts as a container, it isn't merged into the main window. if you need script support, see the display notifications section. setting types there are several types of <setting>...
Installing Extensions and Themes From Web Pages - Archive of obsolete content
upted file being served by a mirror download server, for example. you can use any hash function supported by nsicryptohash. the hash is specified as hash function:hash value, for example, sha1:28857e60d043447c5f4550853f2d40770b326a13. tostring() the tostring() property should return the xpi url, for compatibility with firefox browsers older than version 1.0, and other applications such as seamon
key. themes pretty much everything i've described applies to themes too, except you'll use the installchrome function. because so many sites installed extensions by direct-linking the xpi file and relying on content handling to invoke the confirmation ui, many sites are (incorrectly) doing so for theme jar files too and wondering why they aren't auto-detected and installed. well, xpi is a mozilla-s...
Offering a context menu for form controls - Archive of obsolete content
was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. overlay the content the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls. <overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls. window.addeventlistener("load", function() { let settargetoriginal = nscontextmenu.prototype.settarget; componen...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
ese for the firefox developers conference summer 2007. any discussion of open-source software deserves an explanation of licensing-related issues. in this chapter, i’ll explain some of the basics: what open-source software (oss) licenses are, what types of licenses exist, and when they’re appropriate. what is an oss license? what are the different kinds of oss licenses and what are their
key characteristics? applying an oss license oss licensing today and in the future references what is an oss license? an open-source software license is a statement that anyone is free to use your source code in whatever way they want. the open source definition states what conditions the oss license must satisfy. perhaps surprisingly, these licenses enforce their terms through the exercise of ...
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
fledged javascript debugger that runs inside firefox. it works like typical debuggers, and is useful not only for developing extensions, but also for general web development. also, because it works with the javascript in extensions and firefox itself, the debugger can be a good way to learn about design methods. installing this is bundled with the mozilla suite and the current version of seamon
key, but it needs to be installed as an extension in firefox. see https://addons.mozilla.org/firefox/216/. install the extension in firefox directly from the above url and relaunch firefox. starting up select “javascript debugger” from the tools menu. targeting javascript for debugging. when venkman first launches, it can only debug the file currently open in your web browser. this is becaus...
Adding menus and submenus - Archive of obsolete content
revious sections, the best place to overlay your extension menu is inside the tools menu. that is, unless there's a place inside the menu structure where your extension menus make more sense. if you're overlaying the tools menu, your overlay code should have something like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" access
key="&xulschoolhello.hellomenu.access
key;" insertafter="javascriptconsole,devtoolsseparator"> <menupopup> <!-- your menuitem goes here. --> </menupopup> </menu> </menupopup> now let's look at some specialized types of menu items. menu types checkbox menu items you can make a menuitem "checkable" to allow the user to enable/disable options using the menu. we use two attributes...
Appendix D: Loading Scripts - Archive of obsolete content
rlay.js” from the same directory as the overlay file into the window which it overlays. the script will be read with the utf-8 encoding, based on the encoding of the overlay, and will execute as javascript version 1.8, based on the version specified in the script tag. <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="script-overlay" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript;version=1.8" src="overlay.js"/> </overlay> evalinsandbox the components.utils.evalinsandbox method may be used to load arbitrary code into components.utils.sandbox objects. javascript files or urls may be loaded in this manner by first retrieving their contents into memory using an xmlhttprequest. this is the method...
Connecting to Remote Content - Archive of obsolete content
eed to create an xslt stylesheet that acts as a template. this template will transform the xml you receive (in our case, the example xml document above) and convert it into xul. the xslt tutorial contains details for building these templates. ...
Getting Started with Firefox Extensions - Archive of obsolete content
onal features, while keeping the applications small to download. taken from the extensions page. as described in the quoted text, an extension is a small application that adds something new to one or more mozilla applications. this tutorial focuses on extensions for firefox, but the same (or very similar) principles apply to creating extensions for other applications such as thunderbird, seamon
key, and flock. it is also worth noting that there are differences between the definition of extension and add-on. all extensions are add-ons, but add-ons can also be themes, plugins, or language packs. this tutorial is about extension development, but themes and language packs are developed in a very similar way. plugins are entirely different, and they will not be covered here. you can read more a...
Intercepting Page Loads - Archive of obsolete content
etection, and filtering by url. you can also use these in conjunction with nsitraceablechannel to get and modify the response text before it gets to the original requester. you won't be able to make dom modifications like with the load events, since these notifications are triggered before the response arrives and is parsed into dom tree, so this is not the best approach for the typical greasemon
key-style extensions. notes on usage: efficiency is very important when adding http observers. remember that your observe method will be called for every http request made by firefox, usually several dozen per page visit. in the previous example, one of the first things we do is check if the url is of interest to us, otherwise we let it go. avoid heavy, time-consuming operations, or the user's brow...
Introduction - Archive of obsolete content
copy and adapt to your needs, as well as some working example extensions. the tutorial aims to be as brief as possible, often falling back on mozilla documentation for more detailed information. you can think of it as a quick guide to the expansive world that is the mozilla platform. most links in this documentation are meant to be clicked and read. we'll start with a brief introduction to some
key concepts, in case you're not familiar with mozilla and firefox. mozilla and firefox the term mozilla can be used to refer to several concepts: the mozilla project, the mozilla foundation, the mozilla corporation and the old mozilla browser. even firefox is sometimes referred to as "mozilla". if you're unfamiliar with these terms, it's good that you take some time and learn a little about mozill...
Setting Up a Development Environment - Archive of obsolete content
amo) rather than rely on extension signatures. on the other hand, it is standard practice for big companies to sign their extensions. you'll need to download some libraries in order to be able to sign your extension. follow the instructions, and add something like the following to your makefile: # the directory where the signature sources are located. signature_dir := signature # the signing
key /certificate file. signature_extra_files := $(build_dir)/meta-inf/manifest.mf \ $(build_dir)/meta-inf/zigbert.sf # the signing
key /certificate file. signature_rsa_file = $(build_dir)/meta-inf/zigbert.rsa# the signing
key /certificate file. signature_files := $(signature_extra_files) \ $(signature_rsa_file) $(signature_files): $(build_dir) $(xpi_built)...
The Box Model - Archive of obsolete content
labels so that the inner spacing in the text looks right. another option is to take it up a notch and really use html. xulschoolhello.linkedtext.label = go to <html:a onclick="%s">our site</html:a> for more information to include html in a xul document, you need to add the namespace for it in the document root: <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> then you can have an html:p (paragraph) element where you insert the result of parsing the property string. you can easily parse xml using the domparser object. since xul documents are strict xml, you can only use strict xhtml in xul, and not the more loosely-formatted forms of html. exercise use the dom inspec...
User Notifications and Alerts - Archive of obsolete content
red a password on. notification boxes are very easy to create, and are very customizable: let nb = gbrowser.getnotificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.getstring("xulschoolhello.friendmessage.label"); let that = this; acceptbutton.label = this._bundle.getstring("xulschoolhello.acceptbutton.label"); acceptbutton.access
key = this._bundle.getstring("xulschoolhello.acceptbutton.access
key"); acceptbutton.popup = null; acceptbutton.callback = function() { that.acceptrequest(); }; // similarly for decline button. nb.appendnotification( message, "xulschoolhello-friend-notification", "chrome://xulschoolhello/skin/friend-notification.png", nb.priority_info_high, [ acceptbutton, declinebutton ]); all browser tabs...
XPCOM Objects - Archive of obsolete content
t to pass the right type in the first place. this section is a quick guide on how to read xpcom documentation, which basically amounts to understanding the syntax of xpidl, the language used to specify xpcom interfaces. at mdc, you'll see stuff like this: void setcharpref(in string aprefname, in string avalue); one of the most important details to notice is that both paratemers have the in
keyword. this specifies that these are input parameters, values that the method will use to perform its actions. when is a parameter not an in parameter? in some methods the out
keyword is used for parameters that are return values in reality. this is done for certain value types that are not valid as return values in idl, such as typed arrays. void getchildlist(in string astartingat, out unsigned...
MozOrientation - Archive of obsolete content
you should use that api instead. an event that is repeatedly fired on the window as accelerator data is provided to the browser. note: this below describes how these values worked for the now obsolete mozorientation. the x axis represents the amount of right-to-left tilt. this value is 0 if the device is level along the x axis, and approaches 1 as the device is tilted toward the left, and -1 as the device is tilted toward the right. ...
cert_override.txt - Archive of obsolete content
by the user. this file is used by firefox, thunderbird, and other xul-based applications. since there is no way to add easily an exception in a xulrunner 1.9 project, you can open the page in firefox, accept the certificate, then copy the cert_override.txt to the xulrunner application profile. the syntax is described on this web site. example here is an example for a sha1-256 hash algorithm. the
key and the website are not valid: # psm certificate override settings file # this is a generated file! do not edit. some.website.com:443 oid.2.16.840.1.101.3.4.2.1 00:11:22:33:44:55:66:77:88:99:aa:bb:cc:dd:ee:ff:ff:ee:dd:cc:bb:aa:99:88:77:66:55:44:33:22:11:00 u aaaaaaaaaaaaaaabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaa...
Notes on HTML Reflow - Archive of obsolete content
e any damage that the incremental reflow of the child frame caused, possibly reflowing other children as well. dirty reflows if several incremental changes occur in the same part of the frame hierarchy, it is possible to have several incremental reflows targeted at nearby frames. in this case, it is likely that the individual incremental reflows will end up doing redundant work. for example, each
keystroke typed into a text widget could generate a separate incremental reflow targeted at the text frame. were we to process each individually, the text widget would be flowed once for each
keystroke, which would be wasteful if the latency of an individual reflow exceeds the speed at which text is being typed. the purpose of the dirty reflow is to allow these individual reflows to be coalesced inte...
Using content preferences - Archive of obsolete content
for any site use downloadlastdir.jsm for access to these preferences. browser.upload.lastdir path of a filesystem directory this preference is stored and retrieved automatically by file upload controls. spellcheck.lang language code (e.g., "en-us") private browsing requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamon
key 2.6) prior to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6), the content preference service always stores preferences on disk. because of this, in private browsing mode, use of the content preference service needed to be avoided while in private browsing mode; instead, information needed to be stored in memory or preferences had to be avoided. starting in gecko 9.0, when in private b...
How Mozilla finds its configuration files - Archive of obsolete content
how mozilla finds its configuration files mozilla looks into the binary %userprofile%\application data\mozilla\registry.dat file for its "registry", which contains, amongst other information, a pointer to the directory where the profile is stored (located at common/profiles/profilename/directory. the value contained in this
key is a litteral value, no variables (such as %userprofile%/mozprofile) allowed. we chose to point this to the user's home directory (h:\mozilla). the configuration itself is stored in the specified directory, in a file named prefs.js. this is a readable file of javascript commands. all other files in that directory are dynamically created by mozilla on first start. the of the binary registry file is described here. you may use the following items: a program t...
How Thunderbird and Firefox find their configuration files - Archive of obsolete content
heir configuration files thunderbird looks into the binary %appdata%\thunderbird\profiles.ini file for its "registry", which contains, amongst other information, a pointer to the directory where the profile is stored (usually located in %appdata%\thunderbird\profiles\profilename). likewise, firefox uses a similar file, located in %appdata%\mozilla\firefox\profiles.ini. the value contained in this
key is a litteral value, no variables (such as %userprofile%/mozprofile) allowed. we chose to point this to the user's home directory (h:\thunderbird). the configuration itself is stored in the specified directory, in a file named prefs.js. this is a readable file of javascript commands. all other files in that directory are dynamically created by mozilla on first start. unlike mozilla's binary regis...
Bonsai - Archive of obsolete content
can: get a list of checkins, see what checkins have been made by a given person, or on a given cvs branch, or in a particular time period. it also includes tools for looking at checkin logs (and comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame"). start at the main bonsai query page or seamon
key tree control page here are some example queries that will give you a taste of what bonsai is capable of: today's checkins to the mozilla source mainline. checkins to any branch of xfe by ramiro between 26-feb-1998 and 12-may-1998 differences between revisions 3.1 and 3.3 of the file mozilla/cmd/xfe/forms.c that's a small sample, but it should be enough to get you started. play around wit...
Structure of an installable bundle - Archive of obsolete content
refox 2 and greater /dictionaries/*.{aff|dic} myspell dictionaries firefox 2 and greater of course, an extension need not (and normally won't) have all of these directories. themes are limited for security reasons, and can normally only provide a chrome.manifest which registers the theme and a jar file. platform-specific files gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) removed support for platform-specific subdirectories, described below. instead, you need to use manifest flags, such as the os and abi flags, in your chrome manifest to specify components that should be loaded for specific platforms. for example: binary-component components/windows/mycomponent.dll abi=winnt_x86-msvc binary-component components/mac/mycomponent.dylib abi=darwin_x86-gcc3 bina...
Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
add javascript code that changes its status when the tinderbox status changes. the first step is to write a function that queries the tinderbox server and retrieves the current status. var gxmlhttprequest; function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamon
key/panel.html"); gxmlhttprequest.send(null); } xmlhttprequest is an interface in mozilla for retrieving documents via http. although it is designed to retrieve xml content and parse it into a dom, it can retrieve (but not parse) other kinds of content as well. in this case we use it to retrieve an html page containing a brief summary of the current tinderbox state. that document gets updated by ...
Enabling the behavior - updating the status periodically - Archive of obsolete content
now that we have code to retrieve tinderbox status and update the icon, we need to run it periodically. function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamon
key/panel.html"); gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus, 60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time. we use it inside the loadtinderboxstatus function to make that function run a second (1,000 milliseconds) after startup and a minute (60,000 milliseconds) after each invocation. this allows users to get relatively frequent updates about tinderbox without overloading the tinderbox server or s...
Creating a Mozilla Extension - Archive of obsolete content
see building an extension for an up-to-date tutorial (it focuses on firefox, but is also applicable to other new applications). a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection). ...
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?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:mozilla:install-manifest"> <em:id>author@oftheme.com</em:id> <em:version>2.0b1</em:version> <!-- seamon
key --> <em:targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0b1pre</em:minversion> <em:maxversion>2.0b2pre</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my_theme</em:name> <em:description>my first theme</em:description> <!-- front end integration hooks (used by ...
Creating a Microsummary - Archive of obsolete content
web pages can reference generators via <link rel="microsummary"> elements in their <head> elements. generators can also be independently downloaded and installed by users if they include a list of pages to which they apply. in this tutorial we're going to create a microsummary generator for the spread firefox home page that displays the current firefox download count along with the label fx downloads; for example: 174475447 fx downloads. ...
FAQ - Archive of obsolete content
y increase the skin version number. this is the number that is defined in contents.rdf. test your skin with every major release of mozilla. if a message appears in the preferences window telling you that it's an old skin, you're going to have to look over the code to see what changed. developers try to keep changes like this to a minimum, but sometimes it just can't be helped. what is an access
key? an access
key is a
keyboard shortcut to access something. in the case of skins the access
key that you are defining is accessible by going to edit->preferences, appearance->themes, and then pressing a letter. c will select classic and m will select modern. ...
contents.rdf - Archive of obsolete content
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:access
key="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resource="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li re...
Creating regular expressions for a microsummary generator - Archive of obsolete content
a sequence of characters) that matches patterns of characters in other strings. microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages' urls. in this tutorial, we'll explain how to make regular expressions that match the urls for ebay auction item pages. by the end of the tutorial, you should know some basics about regular expressions and understand how to create expressions that match urls. ...
Dehydra Function Reference - Archive of obsolete content
not specified then it will not be passed to the runtime. version integer: this sets js version similar to version() in js 1.7. strict boolean: controls js strict mode werror boolean: turns js warnings into errors gczeal int: this is a write-only parameter to set turn on frequent garbage collection. it is a mainly useful for debugging dehydra for rooting bugs. gczeal is only enabled when spidermon
key and dehydra are compiled with debug macro defined. require() example require({strict:true, gczeal:2}) if (require().werror) print("werror is set") warning([code,] msg [, loc]) print a warning message using the gcc warning mechanism. if -werror is specified this will cause compilation to fail. optional: code is an integer parameter that allows warnings to be enabled(-wfoo) and disabled(-wno-) o...
Dehydra Object Reference - Archive of obsolete content
r type object if the type represents a bitfield, the base type of the bitfield. function type these represent the types functions and methods in the type system: property type description .type type object the function return type. .parameters array of type objects the parameter types for the function. .isexplicit boolean flag true for constructors declared using the c++ explicit
keyword template objects property type description .name string the name of the template, for example "nscomptr". .arguments array an array where arguments are either strings representing c++ constants or type objects. location objects location objects are passed to builtin functions such as warning() and error() to specify the location of the message. they convert to a string of the...
Dehydra - Archive of obsolete content
worked on for mozilla 2 todo steps to dehydra 1.0 release community view dehydra forums... mailing list newsgroup rss feed #static on irc.mozilla.org blogs taras glek david mandelin benjamin smedberg related topics pork c/c++ refactoring tools, mozilla 2, spidermon
key categories interwiki language links ...
Drag and Drop Example - Archive of obsolete content
r the data instead of text. the problem with using text is that if the text from an external drag just happens to be set to button, a button will be created on the board. a custom type means that the board will only accept drags from the palette. ...
Editor Embedding Guide - Archive of obsolete content
etes current selection. getcommandstate "state_enabled" (boolean) docommand no parameter note getcommandstate in these cases will return whether or not it is possible to call docommand. this will not really give you any concrete information on the state of the command. cmd_deletecharbackward deletes one character backward relative to the current selection end point. acts like backspace
key. getcommandstate "state_enabled" (boolean) docommand no parameter note getcommandstate in these cases will return whether or not it is possible to call docommand. this will not really give you any concrete information on the state of the command. cmd_deletecharforward deletes one character forward relative to the current selection end point. acts like delete
key. getcommandstate "s...
Extension Frequently Asked Questions - Archive of obsolete content
for thunderbird, you may also find the extension howto or faq pages helpful. if you're looking for a place to get started, try our tutorial, building an extension or mozillazine's getting started tutorial. use the extension wizard to generate a template to start with. be sure to set the development preferences. todo: add content. ...
Downloading Nightly or Trunk Builds - Archive of obsolete content
e and most buggy state of the source. trunk builds are provided so that one can execute tests without going to the trouble of building the source. the current trunk is mozilla 1.9.2. tinderbox builds. for the trunk and the latest two branches, there are machines at mozilla and maybe elsewhere compiling builds as fast as they can make them for at least all three of firefox, thunderbird and seamon
key on all three of linux-i686, mac-universalbinary and win32. these are the "tinderbox builds", also known as "hourly builds" though it usually takes more than one hour to make one; they are followed by automatic tests and their main purpose is to check that nothing is horridly wrong with the latest change to the source: what they are doing is to constantly check that the current source can be built...
JavaScript Client API - Archive of obsolete content
return true if an item with the given guid exists in the store, false otherwise. changeitemid(oldid, newid) must find the stored item currently associated with the guid oldid and change it to be associated with the guid newid. getallids() must return an iterable list containing the guids of every item being stored on the local system. this can be a dictionary-type object where the
keys are the guids and the values are whatever; or it can simply be a list of guids. this is the method that the engine will call the first time it syncs, in order to get a complete inventory of what data there is that will need to be uploaded to the server. unless the items you're syncing have their own inherent guids already defined, you'll need to invent guids for all your items at this time. when...
Introducing the Audio API extension - Archive of obsolete content
the audio data api extension extends the html5 specification of the <audio> and <video> media elements by exposing audio metadata and raw audio data. this enables users to visualize audio data, to process this audio data and to create new audio data. obsolete since gecko 28 (firefox 28 / thunderbird 28 / seamon
key 2.25 / firefox os 1.3)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. deprecated since gecko 22 (firefox 22 / thunderbird 22 / seamon
key 2.19)this feature has been removed from the web standards. though some browsers may still support it, it is in the process of being dropped. avoid using it and update existing code if possible; see the compatibility table at...
CRMF Request object - Archive of obsolete content
being dropped. avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <
keygen> or the future web crypto api instead. rfc 4211, the internet x.509 public
key infrastructure certificate request message format (crmf), defines a certreqmessage. the object returned by generatecrmfrequest() contains one of those. ...
Java in Firefox Extensions - Archive of obsolete content
use of liveconnect. liveconnect gives your extension's javascript code (linked from or contained in xul code) access to 2 objects: java and packages (note that per this thread, although the new documentation for the liveconnect reimplementation states that these globals will be deprecated (in the context of applets), "firefox and the java plug-in will continue to support the global java/packages
keywords, in particular in the context of firefox extensions."). these 2 objects let you make use of the standard jdk classes, e.g., var ajavalist = new java.util.linkedlist(); if you want to load your own jars, then you can create your own java class loader. the following technique only works in javascript code linked from or contained in xul files. if you wish to call java code from within javasc...
Menu - Archive of obsolete content
icon to display in the menuitem. note that some environments, notably gnome 2.28, do not support menuitem icons either by default or at all. label string the label of the menuitem. menu jetpack.menu if defined, the menuitem expands into a submenu. mnemonic string a character that is used as the item's shortcut
key while the menu is open. it should be one of the characters that appears in the item's label. on some platforms this character is underlined in the label. type string currently only "separator" is supported. if this property is undefined, the item is a normal menuitem. note that when type == "separator", any other properties (such as label) may be specified. fancy sepa...
Simple Storage - Archive of obsolete content
simple storage is really simple. jetpack.storage.simple is a single, persistent javascript object private to each jetpack. for the most part this object is like any other javascript object, and a jetpack can set whatever properties it wants on it. to manipulate its persistent data, a jetpack therefore need only use the various standard javascript functions and operators. the jetpack.simple.storage object is automatically and periodically flushed to disk. how and when it is flushed is an implementation detail. ...
statusBar - Archive of obsolete content
be used inside the item onload (event) this event fires when the item was appended. its acutally not implemented in the current version. onready (event) occurs when the item was loaded onunload (event) triggers when the item was removed. example jetpack.statusbar.append({ html: 'hello <i>world</i>!', onready: function(widget){ $(widget).click(function(){ jetpack.tabs.open("http://www.jog
key.de"); }); } }); ...
Message Summary Database - Archive of obsolete content
the nsimsgdatabase level (probably the easiest), or we could invent a whole new database interface and change all the code that uses the nsimsgdatabase interface. message headers the message header object implements the nsimsgdbhdr interface. this includes a set of per-message flags, the more commonly used headers (e.g., subject, sender, from, to, cc, date, etc), and a few other attributes, e.g.,
keywords. there are a set of generic property methods so that core code and extensions can set attributes on msg headers without changing nsimsghdr.idl.msg threads we store thread information persistently in the database and expose these object through the [nsimsgthread interface. so the db knows which messages are in a thread, which message a message is in reply to, etc. this allows us to store watc...
Microsummary XML grammar reference - Archive of obsolete content
a microsummary generator is an xml document that describes how to pull specific information from a web page to be presented in summary form as a bookmark whose title changes based on the content of the page it targets. warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) this article provides detailed information about the xml grammar used to build microsummary generators, describing each element and their attributes. for an introduction to how to create a microsummary, read the article creating a microsummary. example the microsummary generator created in the creating a microsummary tutorial: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <templat...
Microsummary topics - Archive of obsolete content
warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) programmatically installing a microsummary generator to programmatically install a microsummary generator -- for example, in an extension that helps users create custom generators for their favorite sites -- obtain a reference to the nsimicrosummaryservice interface implemented by the nsimicrosummaryservice component, then call its installgenerator() method, passing it an xml document containing the generator. for example, the following code snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox ...
Modularization techniques - Archive of obsolete content
virtual interfaces. a pure virtual interface is simply a class where every method is defined as pure virtual, that is: virtual int foo(int bar) = 0; pure virtual interfaces provide an easy mechanism for passing function tables between modules that may reside in separate, possibly dynamically loaded, libraries. each interface is assigned a unique interface identifier, or iid. nsisupports the
key interface in our model is the nsisupports interface, our equivalent to com's iunknown interface. nsisupports provides two
key features, interface interrogation and reference counting. interface interrogation is a simple, uniform mechanism for determining which interfaces a object supports, and for hiding the the mechanics of how the object was implemented. interface interrogation is performed us...
LIR - Archive of obsolete content
quad; 2nd operand is an int 99 negd double negate double 100 addd double add double 101 subd double subtract double 102 muld double multiply double 103 divd double divide double 104 modd double modulo double lir_modd is just a place-holder opcode, ie. the back-ends cannot generate code for it.it's used in tracemon
key briefly but is always demoted to a lir_modl or converted to a function call before nanojit has to do anything serious with it. 105 cmovi integer conditional move int 106 cmovq quad 64 bit conditional move quad 107 cmovd double conditional move double conversions 108 i2q quad 64 bit sign-extend int to quad 109 ui2uq quad 64 bit zero...
New Security Model for Web Services - Archive of obsolete content
iptaccess 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 access file exists in the subdirectory, then no access is granted. if the root's access file did not delegate, then that access file also handles all resources in subdirectories. any syntax error in the document will result in the rest of the ...
Configuration - Archive of obsolete content
f the web app: http://mail.google.com name the display name of the application: gmail icon the icon you want to use for the prism window when running this web app. the actual icon file should be stored in the webapp bundle. status turns the status messages on or off for this web app: yes or no location turns the readonly location bar on or off for this web app: yes or no navigation turns the hot
key history navigation (alt+left, alt+right and alt+home) on or off for this web app: yes or no splashscreen filename of an html page to be displayed while the app is loading. the file must be located in the web app home directory: splashscreen.html include uris that should be opened in the web app, rather than in the default browser. an asterisk is used to match any string. separate multiple uris wi...
Prism - Archive of obsolete content
browser). basic desktop integration: support of desktop features can make using the app more natural and convenient for end users. this includes the ability to create desktop shortcuts, to place the application icon in the tray or dock and to display pop-up notifications. customization: apps can be run using a shared browser runtime and customized using client-side script (similar to greasemon
key). custom stylesheets can be used to tweak the ui. architectural overview prism is a xulrunner application. in addition to the browser engine included in xulrunner, it consists of: web app bundle management: code for creating new web app bundles and loading existing bundles. shortcut creation ui: a dialog box lets the user specify attributes of the web app (name, uri, icon, shortcut location...
PyDOM - Archive of obsolete content
ly run from trusted sources. this means you can only have python code in chrome. content loaded from anywhere other than a chrome:// url can not host python. ...
Reading textual data - Archive of obsolete content
o code snippets page, you can convert it to utf-8 // sstream is nsiscriptableinputstream var str = sstream.read(4096); var utf8converter = components.classes["@mozilla.org/intl/utf8converterservice;1"]. getservice(components.interfaces.nsiutf8converterservice); var data = utf8converter.converturispectoutf8 (str, "utf-8"); gecko 1.8 and newer reading strings starting with gecko 1.8 (seamon
key 1.0, firefox 1.5), you can use nsiconverterinputstream to read strings from a stream (nsiinputstream). this work was done in bug 295047. usage: var charset = /* need to find out what the character encoding is. using utf-8 for this example: */ "utf-8"; const replacementchar = components.interfaces.nsiconverterinputstream.default_replacement_character; var is = components.classes["@mozilla.org/in...
Safely loading URIs - Archive of obsolete content
passing a uri object to an api that loads uri objects, etc.) use whichever method best fits the data you can get your hands on. if you have a choice as to what data you have, prefer checkloaduriwithprincipal to checkloaduri and prefer checkloaduri to checkloaduristr. note that checkloaduriwithprincipal is not scriptable in gecko 1.8, so extensions are not able to use it. changes in gecko 1.9 a
key security change in gecko 1.9 is the addition of the new security.fileuri.strict_origin_policy preference. this boolean preference, which defaults to true, can be set to false if the user doesn't want to strictly enforce the same origin policy on file: uris. see same-origin policy for file: uris for details. ...
open - Archive of obsolete content
file is non-standard, not generally compiled into distributions, is a potential source of huge security holes, and not well tested. summary opens the file, specifying file mode and type. syntax open(mode,type) parameters mode a comma-delimited list describing the method to use to open the file, described in detail here. type a string describing the type of file being opened. description this method opens the file, preparing its resources for use by subsequent methods to examine or modify the file. certain methods of file, such as read and write should not be used when the file is not open. ...
Supporting private browsing mode - Archive of obsolete content
rivate information */ } in the above example, we only save the user's private information if not in private browsing mode. note: private browsing mode may only be detected by chrome code, such as extensions; web content cannot detect whether or not private browsing is in effect. detecting whether private browsing mode is permanent requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamon
key 2.1) firefox 4 added support for having private browsing mode permanently enabled. the theme looks different in this scenario. to determine whether or not the browser is permanently in private browsing mode, you can look at the privatebrowsingmode attribute on the document root. its value is "permanent" if private browsing is permanently enabled for the session, "temporary" if private browsing i...
Actionscript Acceptance Tests - Archive of obsolete content
er to the current directory. this example passes in another .abc file as an argument to the file being run: -- $dir/file.abc another use would be to pass a specific argument to the shell: -dtimeout this file can have multiple lines with different arguments. when there are multiple lines, the harness will re-run the test for every line passing along the different arguments. there is one special
keyword that can be used, uses_swfversion. when that
keyword is encountered, the test harness will run the test against all possible -swfversion versions: uses_swfversion is the equivalent of: -swfversion 9 -swfversion 10 -swfversion 11 -swfversion 12 ... any additional args on the uses_swfversion line will be passed to each run of the vm. (see bug 587093 for details.) specifying multiple .abcs: i...
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
, 32 & 64 bit * mac ox x ppc & intel, 32 bit * linux, 32 bit * windows mobile arm version asc-4200 of the actionscript compiler was used for all tests. performance testsuite time metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700) as well as current against the vm in flash player 10. the
key takeaway is that the interpreter is much improved. osdefault-jitinterpretedaggressive jit mac (os/x 10.4 intel, 2ghz dual core)tc-703 vs tc-700: 0.0%tc-703 vs flash10: 1.1% slowertc-703 vs tc-700: 17.4% fastertc-703 vs flash10: 165.3% fastertc-703 vs tc-700: 0.1% fastertc-703 vs flash10: 0.8% slower windows (xp pro, 2.13ghz dual core)tc-703 vs tc-700: 0...
The Download Manager schema - Archive of obsolete content
e current database schema version is 8. this information is available using nsidownloadmanager methods to retrieve nsidownload objects for each download entry; however, if you feel like poking directly into the table, you can do so using the storage api. the schema table field name type description id integer a unique id for the download. this field is the primary
key for the table. name text the download's file name. source text the source uri for the download. target text the destination uri for the download. temppath text the path of the temporary file being used for the download. starttime integer the download's start time. endtime integer the download's end time. ...
Treehydra - Archive of obsolete content
n polynomial time community view treehydra forums... mailing list newsgroup rss feed #static on irc.mozilla.org blogs taras glek david mandelin related topics pork c/c++ refactoring tools, mozilla 2, spidermon
key categories interwiki language links ...
Venkman Internals - Archive of obsolete content
ce. scriptinstance all scriptwrappers are parented by a single scriptinstance, which holds all of the scriptwrappers for a particular url. from here, you can set and clear breakpoints by line number (instead of by program counter), locate a scriptwrapper for a given line number, and do a few other useful things. scriptinstance.functions is a hash of all of the functions in the script instance,
keyed by the tag property of the jsdscript. scriptinstance.toplevel is the top-level script for the instance. scriptmanager sometimes the same url is loaded more than once in the browser. to deal with this, all scriptinstances are parented by a single scriptmanager. a scriptmanager keeps all of the loaded instances of a particular url in the scriptmanager.instances array, in the order that they we...
Using Breakpoints in Venkman - Archive of obsolete content
akpoints. breakpoints are places in code where execution is suspended. when you set a breakpoint in a debugging application such as venkman, you can take advantage of the suspension to examine variables, objects, and other featues of the execution. this article describes breakpoints in javascript and how to use venkman to set and examine breakpoints. basic breakpoints the stop button and debugger
keyword are useful features of the javascript debugger, but when you are debugging deep in code—especially code you have authored yourself and are responsible for troubleshooting—you're going to need breakpoints. types of breakpoints venkman has two types of breakpoints. the first, and most common, is called the "hard" breakpoint. a hard breakpoint represents an actual trap instruction included i...
When To Use ifdefs - Archive of obsolete content
ic ifdefs, see nscrt.h. feature ifdefs the mozilla code has many features that can be enabled or disabled by configure flags. for instance, it is possible to disable most of the xul rendering engine by specifying --disable-xul when configuring the build. when adding ifdefs that implement these configure flags, care must be taken to obey the build dependencies. for instance, xpcom, the spidermon
key javascript engine, and the networking engine do not know anything about xul and should not have any ifdefs based on --disable-xul. one special "feature ifdef" that deserves special attention is "moz_xul_app". this variable marks any application that is using the "toolkit". moz_xul_app ifdefs are not acceptable in tier 9, but are acceptable (even necessary) in later tiers. for an example of featur...
Example Sticky Notes - Archive of obsolete content
the others are only needed if you plan to handle xul (xml user interface language) or/and svg (scalable vector graphics) in your bindings; xlink in xml also may come useful sometimes. all namespaces above are sup...
XML in Mozilla - Archive of obsolete content
l test documents on the mercurial repository are located in content/xml/tests. we also have a couple online: the books demo and the irs table of contents demo. both of them demonstrate xml, associating stylesheets with xml, displaying xml with css, namespaces in xml, xhtml, simple xlinks, and manipulation of xml with scripts via dom. there is an xml component in bugzilla. we also have the "xhtml"
keyword for xhtml bugs (these tend to be scattered across components). how can i help? if you can code, look for helpwanted
keyword in xml bugs. we don't use that always, so if you want to avoid doing duplicate work you could start working on bugs that have future milestone, or otherwise have a milestone that is set way into the future. you can always test our xml support. we'd really like to get tes...
File.windowsShortcut - Archive of obsolete content
file.windowsshortcut in this example, the windowsshortcut method is used to add a shortcut in the program directory ("program" is a
keyword for the directory in which the program itself is installed, for example, c:\program files\netscape\netscape 6\" on windows) to windows software (misc.exe) that is installed in the "windows" directory. var xpisrc = "misc.exe"; var vi = "1.1.1.1"; initinstall( "windows shortcut", "test", vi, 0); f = getfolder("windows"); g = getfolder("temporary"); addfile( "miscshortcut", "2.2.2.2", xpisrc, f, xpisrc, true); target = getfolder(f, xpisrc); shortcutpath = getfolder("program"); err = file.windowsshortcut( target, shortcutpath, "misc shortcut", g, "", target, 0); logcomment("file.windowsshortcut returns: " + err); if ...
logComment - Archive of obsolete content
returns an integer error code. for a list of possible values, see return codes. description the install log is created in the product directory by default (where the browser executable is) if it can be, and if the installation doesn't have proper permission, the install log is written to the user's profile directory. respectively, these directories correspond to the "program" and "current user"
keywords for the getfolder method. ...
getString - Archive of obsolete content
getstring retrieves a value from a .ini file. method of winprofile object syntax string getstring ( string section, string
key); parameters the method has the following parameters: section section in the file, such as "boot" or "drivers".
key the
key in that section whose value to return. returns the value of the
key or an empty string if none was found. description the getstring method is similar to the windows api function getprivateprofilestring. unlike that function, this method does not support using a null
key to return a list of
keys in a section. example to get the name of the wallpaper file from the desktop section of the win.ini file, use this call: ini = getwinprofile (getfolder("windows"), "win.ini"); var wallpapervalue = ini.getstring ("desk...
writeString - Archive of obsolete content
summary changes a value in a .ini file. method of winprofile object syntax boolean writestring ( string section, string
key, string value); parameters the method has the following parameters: section section in the file, such as "boot" or "drivers".
key the
key in that section whose value to change. value the new value. returns true if successfully scheduled, otherwise, false. description the writestring method is similar to the windows api function writeprivateprofilestring. to delete an existing value, supply null as the value parameter. unlike the writeprivateprofilestring function, this method does not support using a null
key to delete an entire section. values are not actually written until performinstall is called. example to ...
WinProfile Object - Archive of obsolete content
ension. winprofile (windows only) windows developers use this object to manipulate the content of a windows .ini file. overview this object does not have a public constructor. instead, you construct an instance of this object by calling the getwinprofile method of the install object. the two methods of the winprofile object, getstring and writestring, allow you to read and write the data in the
key/value pairs of a windows .ini file. ...
getValue - Archive of obsolete content
getvalue netscape 6 and mozilla do not currently support this method. retrieves the value of an arbitrary
key. method of winreg object syntax winregvalue getvalue ( string sub
key, string valname); parameters the getvalue method has the following parameters: sub
key the
key path to the appropriate location in the
key hierarchy, such as "software\\netscape\\navigator\\mail". valname the name of the value-name/value pair whose value you want. returns a winregvalue object representing the value of the named value-name/value pair or null if there is no value or if there is an error. see winregvalue for information about these values. description the getvalue method retrieves the value of an arbitraty
key. use this method if the value you want is not a string. ...
getValueNumber - Archive of obsolete content
getvaluenumber gets the value of a
key when that value is a number. method of winreg object syntax number getvaluenumber ( string sub
key, string valname); parameters the getvaluestring method has the following parameters: sub
key the
key path to the appropriate location in the
key hierarchy, such as "software\\netscape\\navigator\\mail". valname the name of the value-name/value pair whose value you want. returns number value of the specified
key or null if there's an error, the value is not found, or the value is not a string. ...
getValueString - Archive of obsolete content
valname the name of the value-name/value pair whose value you want. returns a string representing the value of the named value-name/value pair or null if there's an error, the value is not found, or the value is not a string. description the getvaluestring method gets the value of a string. ...
setValueNumber - Archive of obsolete content
summary sets the value of a
key, when that value is a number. method of winreg object syntax int setvaluenumber ( string sub
key, string valname, number value ); parameters the method has the following parameters: sub
key the
key path to the appropriate location in the
key hierarchy, such as "software\\netscape\\navigator\\mail". valname the name of the value-name/value pair whose value you want to change. value a number representing the new string value. returns 0 if it succeeded; a nonzero number if it failed to schedule the action. for a list of possible values, see return codes. description the setvaluenumber method sets the value of a
key when that value is a number. use this method if the value you want to set is a number. if th...
setValueString - Archive of obsolete content
setvaluestring sets the value of a
key, when that value is a string. method of winreg object syntax int setvaluestring ( string sub
key, string valname, string value); parameters the method has the following parameters: sub
key the
key path to the appropriate location in the
key hierarchy, such as "software\\netscape\\navigator\\mail". valname the name of the value-name/value pair whose value you want to change. value the new string value. returns 0 if it succeeded; a nonzero number if it failed to schedule the action. for a list of possible values, see return codes. description the setvaluestring method sets the value of a
key when that value is a string. use this method if the value you want to set is a string. if the value is not a string...
WinReg Object - Archive of obsolete content
windows registry. overview this object does not have a public constructor. instead, you construct an instance of this object by calling the getwinregistry method of the install object. this discussion assumes you are already familiar with the windows registry. for information on it, see api documentation for windows nt or windows 95. when you construct a winreg object, it is set to operate with h
key_classes_root as its root
key. to use a different root
key, use the setroot
key method. typically values in the windows registry are strings. to manipulate such values, use the getvaluestring and setvaluestring methods. to manipulate other values, use the getvalue and setvalue methods. reading registry values is immediate. however, writing to the registry is delayed until performinstall is called. ...
XPInstall API reference - Archive of obsolete content
isdirectory isfile macalias moddate moddatechanged move remove rename size windowsgetshortname windowsregisterserver windowsshortcut winprofile no properties methods getstring writestring winreg no properties methods create
key delete
key deletevalue enum
keys enumvaluenames getvalue getvaluenumber getvaluestring is
keywritable
keyexists setroot
key setvalue setvaluenumber setvaluestring valueexists winregvalue constructor other information return codes see complete list examples trigger scripts a...
Installer Script - Archive of obsolete content
lable / 1024); 9. // do the verification 10. if(spaceavailable < spacerequired) 11. { 12. logcomment("insufficient disk space: " + dirpath); 13. logcomment(" required : " + spacerequired + " k"); 14. logcomment(" available: " + spaceavailable + " k"); 15. return(false); 16. } 17. return(true); 18. } 19. var srdest = 17311; 20. var err = initinstall("netscape seamon
key", "browser", "6.0.0.2000110807"); 21. logcomment("initinstall: " + err); 22. var communicatorfolder = getfolder("program"); 23. logcomment("communicatorfolder: " + communicatorfolder); 24. if (verifydiskspace(communicatorfolder, srdest)) 25. { 26. err = adddirectory("program", 27. "6.0.0.2000110807", 28. "bin", // jar source folder ...
XTech 2005 Presentations - Archive of obsolete content
e4x marries xml and javascript syntax, and extends javascript to include namespaces, qualified names, and xml elements and lists. e4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants. another e4x feature: the ability to bind a w3c dom document to a new xml object, reflecting the dom in e4x terms so that updates to either the dom or the e4x object hierarchy show up in the other. ...
A XUL Bestiary - Archive of obsolete content
the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms. i selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-platform development. in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul. ...
norestorefocus - Archive of obsolete content
« xul reference home norestorefocus type: boolean if false, the default value, then when the panel is hidden, the
keyboard focus will be restored to whatever had the focus before the panel was opened. if true, the focus will not be reset, although it will be cleared if the focus is within the panel. ...
Building Trees - Archive of obsolete content
ldren element rather than all of them. once the row height is changed, we can see the full photos. note: if you want to have the state of the disclosure triangles ("twisties") be persistent, be sure to give each node a unique "id" attribute. these are used to track the current state of the disclosure triangles. support for this was introduced in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4). using tree properties since we need to use special css for trees, the properties attribute on a cell becomes extremely useful. it can be used to define extra properties for reference later in a stylesheet. for example, if the properties attribute was set to the value "?creator", you could style the photos created by different people differently. alternatively, you could also use static val...
XML Templates - Archive of obsolete content
mplate> <listbox> the url in the datasources attribute may be a relative url or an absolute url. note: if you want to have the state of the disclosure triangles ("twisties") be persistent, be sure to give each node a unique "id" attribute. these are used to track the current state of the disclosure triangles. support for this was introduced in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4). for this and the following examples, we are going to use the following xml document containing a list of people: <people> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> xml query synt...
Things I've tried to do with XUL - Archive of obsolete content
w the content, when you shrink the window, the content will simply be clipped (because now it has a bigger size than the window). you have no way of finding out what the clipped size is, so you can never shrink the content. an ugly workaround for this problem might include nesting an invisible html-element in order to access its "clientwidth" method: <window xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> ... <html:body id="invisible_element" flex="1" > <svg xmlns="http://www.w3.org/2000/svg" version="1.1"><!-- ...or _visible_ xul content or whatever... --></svg> </html:body> ... var available_width = document.getelementbyid("invisible_element").clientwidth; ... xbl in listboxes using xbl bindings in listboxes is n...
Tree Widget Changes - Archive of obsolete content
ll be hidden if the column redordering is disabled using enablecolumndrag="false". some specific changes you should now get the tree selection object from the view, not the box object, meaning use tree.view.selection instead of tree.treeboxobject.selection. use tree.columns[1].id instead of tree.treeboxobject.getcolumnid(1) to get the id of a column, in this case column 1. use tree.columns.get
keycolumn().index instead of tree.treeboxobject.get
keycolumnindex(). the nsitreeboxobject.getpagecount() method has been renamed to make it clearer what it does. it returns the number of rows that can be displayed in the tree. this should correspond to the rows attribute on the tree if it was specified. tree.treeboxobject.getpagecount() is now tree.treeboxobject.getpagelength(). the invalidateprim...
Adding HTML Elements - Archive of obsolete content
that mozilla does not actually download this url, but it does recognize it as being html. here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> then, you can use html tags as you would normally, keeping in mind the following: you must add a html: prefix to the beginning of each tag, assuming you declared the html namespace as above. the tags must be entered in lowercase. "quotes" must be placed around all attribute values. xml requires a trailing slash at the end of tags that have no content. th...
Anonymous Content - Archive of obsolete content
other widgets, but can be referred to as only a single widget. mechanisms are provided for adding attributes to the inner elements that were specified on the outer element. declaring scrollbar example the example below shows how a scrollbar might be declared (it has been simplified a bit from the real thing): <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <binding id="scrollbarbinding"> <content> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </content> </binding> </bindings> this file contains a single binding, declared with the binding element. the id attribute should be set to the id...
Content Panels - Archive of obsolete content
button and a field for typing is urls has been added to the only toolbar (we'll learn about toolbar in a later section). the web pages would appear inside the iframe. in this case, the file index.html would appear by default. this example isn't functionally complete. next, we would want to add script which changes the src attribute at the desired time, for example when the user presses the enter
key. browsers there is a second type of content panel, using the browser tag. you would use this when you want to create a frame that displays content like a browser. actually, the iframe can do this too, but the browser has a variety of additional features. for example, the browser maintains a page history for use with back and forward buttons. the browser can also load pages with referers and ...
Cross Package Overlays - Archive of obsolete content
one for each window that you want the overlay to apply to. our find files example first, let's create a simple overlay. it will just have a few elements for entering a filename and directory to search. call the file foverlay.xul and add it to the findfile directory along with findfile.xul. ...
Custom Tree Views - Archive of obsolete content
('my-tree').view = treeview; } the following presents the example together. an inline script has been used here to simplify the example. normally, you would put the script in an external script file. ...
Document Object Model - Archive of obsolete content
. so, xul elements will have that interface even if added to other xml documents, and non-xul elements will not have that interface. the xulelement interface has a number of properties and methods specific to xul elements, many inherited from the generic dom element interface. a namespace is a uri which specifies the kind of element. here are some examples: <button xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"/> <button xmlns="http://www.w3.org/1999/xhtml"/> <html:button xmlns:html="http://www.w3.org/1999/xhtml"/> <html:button xmlns:html="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"/> namespaces are specified using the xmlns attribute. the first button is a xul element as it has been placed in the xul namespace. the second element is an xhtml ...
Features of a Window - Archive of obsolete content
. gecko 1.9.2 note starting in gecko 1.9.2 (firefox 3.6), overriding the position of a window using window features will not change the persisted values saved by the session store feature. that means the next time the window is opened, it will still open in the saved location. <window id="findfile-window" title="find files" width="400" height="450" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> in this example, the window will open with a width of 400 pixels and a height of 450 pixels. even if there aren't enough elements to fit this size, the window will still open at this size and there will be blank space in the remaining area. if there are too many elements, the window will not be large enough to fit the elements. the user will have to resize th...
Grids - Archive of obsolete content
h like a grid of stack elements. the order of the elements in the grid determines which is displayed on top and which is placed underneath. if the rows element is placed after the columns element, the content within the rows is displayed on top. if the columns element is placed after the rows element, the content within the columns is displayed on top. similarly, events such as mouse buttons and
keypresses are sent only to the set on top. this is why the columns were declared after the rows in the above example. if the columns has been placed first, the rows would have grabbed the events and you would not be able to type into the fields. flexibility of grids one advantage that grids have over a set of nested boxes is that you can create cells that are flexible both horizontally and vertica...
Input Controls - Archive of obsolete content
</radiogroup> attributes like buttons, check boxes and radio buttons are made up of a label and an image, where the image switches between checked and unchecked when it is pressed. check boxes have many of the same attributes as buttons: label the label on the check box or radio button. disabled set this to either true or false to disable or enable the check box or radio button. access
key the shortcut
key that can be used to select the element. the letter specified is usually drawn underlined in the label. to view xul, you need e.g. seamon
key or waterfox and remote-xul-manager from https://github.com/jvillalobos/remote-xul-manager find files example so far : source view in the next section, we will look at some elements for entering and selecting numbers. « previous...
Introduction - Archive of obsolete content
nguages with little effort. what kinds of user interfaces can be made with xul? xul provides the ability to create most elements found in modern graphical interfaces. some elements that can be created are: input controls such as textboxes and checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information
keyboard shortcuts the displayed content can be created from the contents of a xul file or with data from a datasource. in mozilla, such datasources include a user's mailbox, their bookmarks and search results. the contents of menus, trees and other elements can be populated with this data, or with your own data supplied in an rdf file. there are several ways you can use xul: firefox extension ...
Manifest Files - Archive of obsolete content
see xulrunner. older applications if you are creating applications for older versions of mozilla software, that is, before firefox 1.5 or mozilla 1.8, the process is a bit more involved. the following describes how to set up a package for earlier versions. this section may be skipped if you are writing new extensions or xul applications. note: this older process does also apply to the new seamon
key 1.0 though. the codebase there has not yet adopted the "manifest" format. <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:myapplication"/> </rdf:seq> <rdf:description about="urn:mozilla:package:myapplicatio...
More Button Features - Archive of obsolete content
inside the button. button with menupopup you can place a menupopup inside the button to cause a menu to drop down when the button is pressed, much like the menulist. however, in this case you must set the type attribute to the value menu. example 5 : source view <button type="menu" label="device"> <menupopup> <menuitem label="printer"/> <menuitem label="mouse"/> <menuitem label="
keyboard"/> </menupopup> </button> in this example, the user may click the button to pop up a menu containing three items. note that selecting one of these menu items does not change the label on the button, unlike a menulist. this type of button is intended to be used like a menu, with scripts attached to each item to perform a task. we'll see more on menus later. you can also set the type attrib...
More Event Handlers - Archive of obsolete content
cted. to use a load event, place an onload attribute on the window tag. call code within the load handler which will initialize the interface as necessary. there is also an unload event which is called once the window has closed, or in a browser context, when the page is switched to another url. you can use this event to save any changed information, for example. next, we'll find out how to add
keyboard shortcuts. « previousnext » ...
Numeric Controls - Archive of obsolete content
10. <textbox type="number" increment="10" max="100"/> this textbox steps in multiples of 10 from 0 to 100. since the min attribute was not specified, it defaults to 0. note that the user can still enter other values if they are typed in. the increment attribute only affects the arrow buttons. the user may also increment or decrement the value using this increment by using the up and down cursor
keys while the textbox is focused. the decimalplaces attribute indicates how many decimal places to show. the default value is 0, which means show integers only. however a different value may be used to show decimal values. <textbox type="number" decimalplaces="2"/> in this example, two digits right of the decimal point are shown. values with additional fractional digits are rounded to two digits. s...
Persistent Data - Archive of obsolete content
ight use unusual values if you adjust attributes using a script. our find files example let's add the persist attribute to some of the elements in the find files dialog. to save the position of the window. to do this, we need to modify the window. <window id="findfile-window" title="find files" persist="screenx screeny width height" orient="horizontal" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> this will cause the x and y position of the window and the width and height of the window to be saved. we could extend it further to save the collapsed state of the splitter. it doesn't really make sense to save the current tab state. find files example so far : source view next, we'll look at using style sheets with xul files. « previousnext » ...
Property Files - Archive of obsolete content
(nofilesfound); this example first gets a reference to the bundle using its id then, it looks up the string 'notfoundalert' in the property file. the function getstring() returns the value of the string or null if the string does not exist. finally, the string is displayed in an alert box. text formatting the next method is getformattedstring(). this method also gets a string with the given
key name from the bundle. in addition, each occurrence of formatting code (e.g. %s) is replaced by each successive element in the supplied array. var dir = "/usr/local/document"; var count = 10; var strbundle = document.getelementbyid("strings"); var result = strbundle.getformattedstring("resultmessage", [ dir, count ]); alert(result); this example will display following message in an alert box. 1...
Stacks and Decks - Archive of obsolete content
ng the disabled appearance of buttons: example 2 : source view <stack style="background-color: #c0c0c0"> <description value="disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/> <description value="disabled" style="color: grey;"/> </stack> this arrangement of text and shadow colors creates the disabled look under some platforms. note that events such as mouse clicks and
keypresses are passed to the element on the top of the stack, that is, the last element in the stack. that means that buttons will only work properly as the last element of the stack. decks a deck element also lays out its children on top of each other much like the stack element, however decks only display one of their children at a time. this would be useful for a wizard interface where a series ...
Styling a Tree - Archive of obsolete content
ou can use these extra properties to set the appearance of containers or selected rows. the following properties are automatically set as needed: checked this property is set cells whose column is type="checkbox" focus this property is set if the tree currently has the focus. selected this property is set for rows or cells that are currently selected. current this property is set if the
keyboard cursor is at the row. only one row will have this property set at a time. hover this property is set if the mouse cursor is on the row. only one row will have this property set at a time. container this property is set for rows or cells that have child rows. leaf this property is set for rows or cells that do not have child rows. open this property is set for rows or cells which are ...
Tree Box Objects - Archive of obsolete content
also available to trees. additional scroll methods include the scrollbylines(), scrollbypages() and ensurerowisvisible() functions. the scrollbylines() scrolls up or down by a certain number of rows. use a positive number to go down and a negative number to go up. the scrollbypages() function scrolls by a number of pages and is called automatically when the user presses the page up or page down
keys while the tree is focused. a page is equal to the number of visible rows. for example if the tree shows 10 rows at a time, a page will be equivalent to 10 rows. this is a convenient method since when the user resizes a flexible tree, the page size will grow and shrink, so you don't need to calculate the page size manually. this isn't too hard to calculate manually anyway since the tree box objec...
Tree Selection - Archive of obsolete content
e contiguous. the tree provides a number of functions which can be used to determine whether an item is selected. handling the select event first, let's see how we can determine when an item is selected. the onselect() event handler may be added to the tree element. when the user selects an item from the tree, the event handler is called. the user may also change the selection by using the cursor
keys. if the user holds down the cursor
key to rapidly scroll through the items, the event handler is not called until the user stops. this results in a performance improvement. this also means that the highlight will appear on several items even though the select event is never fired for those items. the syntax of the onselect() event handler is shown below. <tree id="treeset" onselect="alert('you s...
Trees and Templates - Archive of obsolete content
ascending or descending on any column. the user may change the sort column and direction by clicking the column headers. this sorting feature is not available for trees with static content, although you can write a script to sort the data. sorting involves three attributes, which should be placed on the columns. the first attribute, sort, should be set to an rdf property that is used as the sort
key. usually, this would be the same as that used in the label of the cell in that column. if you set this on a column, the data will be sorted in that column. the user can change the sort direction by clicking the column header. if you do not set the sort attribute on a column, the data cannot be sorted by that column. the sortdirection attribute (note the mixed case) is used to set the direction in...
XBL Attribute Inheritance - Archive of obsolete content
herits attribute to as many elements as you wish, to inherit any number of attributes. note how the inherits attribute has been placed in the xbl namespace, by prefixing it with 'xbl:'. the namespace should be declared somewhere earlier, usually on the bindings element. the next example demonstrates this. <bindings xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <xbl:binding id="buttonbinding"> <xbl:content> <xul:button label="ok" xbl:inherits="label"/> </xbl:content> </xbl:binding> in this example, the button inherits the label attribute, but this attribute is also given a value directly in the xbl. this technique is used to set the default value if the attribute is not present. this button will inherit its...
XBL Example - Archive of obsolete content
call the onget script of the page property, which in turn will retrieve the initial page from the selectedindex attribute. <constructor> var totalpages=this.childnodes.length; document.getanonymousnodes(this)[0].childnodes[1].childnodes[1] .setattribute("value",(this.page+1)+" of "+totalpages); </constructor> additional features we can add some additional features as well. some
keyboard shortcuts could be used for the previous and next buttons, (say backspace and the enter
key). first and last buttons could be added to go to the first and last pages. the label element could be changed to a field where the user could enter the page to go to, or a popup could be added to allow selection of the page from a menu. we could also add a border around the deck with css to make it lo...
XUL Structure - Archive of obsolete content
a specific language. the locale structure is similar to the others, so it won't be listed here. the localized text is stored in two types of files: dtd files and properties files. the dtd files have a .dtd extension and contain entity declarations, one for each text string that is used in a window. for example, the file browser.dtd contains entity declarations for each menu command. in addition,
keyboard shortcuts for each command are also defined, because they may be different for each language. dtd files are used by xul files so, in general, you will have one per xul file. the locale part also contains properties files, which are similar, but are used by script files. the file browser.properties contains a few such localized strings. this structure allows you to translate mozilla or a com...
XUL Tutorial - Archive of obsolete content
e button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers
keyboard shortcuts focus and selection commands updating commands broadcasters and observers document object model document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view details tree box objects rdf and templates introduction to rdf templates ...
Window icons - Archive of obsolete content
your bundle. these icons will override the global icon files, which are located in app_dir/browser/chrome/icons/default. note: the global icons override does not currently work due to bug bug 543490. global icon files currently take precedence and bundles are only searched for icons which are not provided by the application. starting with firefox 3.0, xulrunner 3.0, thunderbird 3.0 and seamon
key 2.0 you can now specify png format icons instead of xpm format on linux. you can specify up to 4 different sizes of png icons using the suffixes .png, 16.png, 32.png and 48.png. older versions to support older applications, such as firefox 1.0, you need to copy the icons to app_dir/chrome/icons/default manually on the first start (example code). ...
arrowscrollbox - Archive of obsolete content
o update additional state. smoothscroll type: boolean true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it. currently, smooth scrolling supports horizontal arrowscrollboxes only. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, r...
description - Archive of obsolete content
to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an elem...
dialogheader - Archive of obsolete content
rties | methods | related ] a heading row for a dialog box. this element should be placed inside a dialog element. the header may have a title and a description. attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped te...
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k
key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorn...
menubar - Archive of obsolete content
when set to false, the default, the grippy will be shown. statusbar type: id if you set this attribute to the id of a statusbar element, the label on the statusbar will update to the statustext of the items on the menu as the user moves the mouse over them. properties accessibletype type: integer ...
notificationbox - Archive of obsolete content
of notificationbox) : priority_info_low priority_info_medium priority_info_high priority_warning_low priority_warning_medium priority_warning_high priority_critical_low priority_critical_medium priority_critical_high priority_critical_block buttons : the buttons argument is an array of button descriptions. each description is an object with the following properties: access
key - the access
key to appear on the button callback - function to be called when the button is activated. this function is passed three arguments: the <notification> the button is associated with the button description as passed to appendnotification. the element which was the target of the button press event. if the return value from this function is not true, then the notification ...
radiogroup - Archive of obsolete content
ute is true if the element is focused. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an elem...
resizer - Archive of obsolete content
user will be able to resize the window by dragging it. the resizer will send a command event after the resize is complete. note: starting in gecko 2.0, you can also specify a target element using the element attribute, to use the resizer to resize the specified element instead of the window. ...
richlistitem - Archive of obsolete content
lls back to use the label property. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an elem...
scrollbar - Archive of obsolete content
n the arrows are clicked(or scales are dragged). the default value is 1. maxpos type: integer the maximum position of the scrollbar. the default value is 100. pageincrement type: integer the amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down
keys are pressed. the default value is 10. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statuste...
tabs - Archive of obsolete content
s clicked. onselect type: script code this event is sent to the tabs element when this tab is changed. selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. setfocus type: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the
keyboard. if this attribute is false, the focus does not change during navigation. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab"
key. elements with a higher tabindex are later in the tab sequence. tooltiptextnew not in firefox type: string used to set the text which appears in the toolti...
titlebar - Archive of obsolete content
n't want this behavior, you can override it by setting allowevents="true" on the titlebar element. the titlebar will send a command event after the move is complete. examples this xul file will create a hud-style window that can be moved with the mouse. it will close if the mouse button is released. ...
wizard - Archive of obsolete content
dowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2, getbutton, getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="secretcode" on
keyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that i...
XUL - Archive of obsolete content
documentation xul tutorial a guided tutorial that will help you get started with xul, originally from xulplanet. xul reference xul elements, attributes, properties, methods, and event handlers. xul controls a quick list of all of the available xul controls. the joy of xul describes the
key features and components of xul. menus and popups guide a guide on using menus and popup panels. template guide a detailed guide on xul templates, which is a means of generating content from a datasource. drag and drop how to perform drag and drop operations. overlays overlays are used to describe extra content for the...
Getting started with XULRunner - Archive of obsolete content
pplication step 7: create some xul finally, we need to create a simple xul window, which is described in the file main.xul. nothing fancy here, just the minimum we need to make a window. no menus or anything. main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>" oncommand="showmore();"/> <separator/> <description id="more-text" hidden="true">this is a simple xulrunner application. xul is simple to use and quite powerful and can even be used on mobile devices.</d...
XULRunner Hall of Fame - Archive of obsolete content
allowing to execute an external javascript script which can manipulate web content. its goal is to provide a tool like phantomjs, with the same api, except that it runs gecko instead of webkit, and it is not headless (but you can still use xvfb to have a headless slimerjs). sqlite manager manage all your sqlite databases using this lightweight extension for firefox, thunderbird, seamon
key, songbird, komodo etc. sqlite manager is also available as a xulrunner application. surebo browselorer a new, simple yet highly functional and customizable web browser, based on xulrunner 22. websecurify web application security testing environment. source yoono desktop win/mac application to get all your friend updates, update your status and share stuff easily across fac...
How to enable locale switching in a XULRunner application - Archive of obsolete content
toolkitchromereg = chromeregservice.queryinterface(components.interfaces.nsitoolkitchromeregistry); var selectedlocale = xulchromereg.getselectedlocale("localeswitchdemo"); var availablelocales = toolkitchromereg.getlocalesforpackage("localeswitchdemo"); // render locale menulist by iterating through the query result from getlocalesforpackage() const xul_ns = "http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.getelementbyid("locale-listbox"); var selecteditem = null; while(availablelocales.hasmore()) { var locale = availablelocales.getnext(); var listitem = document.createelementns(xul_ns, "listitem"); listitem.setattribute("value", locale); listitem.setattribute("label", locale); if (locale == selectedl...
MacFAQ - Archive of obsolete content
ing, so: create a default preference of "browser.chromeurl" that points to your new "hiddenwindow" as such: "chrome://myxul/content/hiddenwindow.xul" next take the code below and drop it in, to create the hiddenwindow.xul (note: the debug function and nsicommandline try/catch can be removed, all you need is the window.arguments[0]) <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul" id="myxul_hidden" windowtype="myxul:hiddenwindow" title="" width="0" height="0" persist="screenx screeny width height sizemode" > <!-- load the mozilla helpers --> <script type="application/javascript" src="chrome://global/content/nsusersettings.js" /> <script><![cdata[ function debug(alogstring) { var mconsoleservice =...
XULRunner tips - Archive of obsolete content
/1.0 jar:inspector.jar!/skin/modern/inspector/ skin inspector classic/1.0 jar:inspector.jar!/skin/classic/inspector/ overlay chrome://inspector/content/popupoverlay.xul chrome://inspector/content/viewers/dom/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/stylerules/commandoverlay.xul overlay chrome://inspector/content/
keysetoverlay.xul chrome://inspector/content/viewers/dom/
keysetoverlay.xul overlay chrome://inspector/content/popupoverlay.xul chrome://inspector/content/viewers/stylerules/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/dom/commandoverlay.xul to launch dom inspector in your application, you need to open its main window, with a command ...
What XULRunner Provides - Archive of obsolete content
res the following user interface is supplied by xulrunner, and may be overridden by embedders under certain circumstances: apis and user interface for installing, uninstalling, and upgrading xul applications. see the wikimo:xul:installation story. ...
XUL Application Packaging - Archive of obsolete content
l-app" if xulrunner is registered on the system. see command line options for more details. note: for instructions on deploying your applications see deploying xulrunner. application.ini the application.ini manifest is located at the root of the extension and provides 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. required name example: name=testapplication version specifies the application version number. required see toolkit version fo...
application/http-index-format specification - Archive of obsolete content
e space and 8 bit characters must be url encoded. content-length base 10 digits representing the size of the file in bytes. only digits are legal. last-modified rfc 1123 date format url encoded. content-type mime content type. whitespace and 8-bit characters must be url-encoded. the mime-type for a directory can be given as application/http-index-format. file-type one of the following
keywords to represent a special status for a file: file directory symbolic-link sym-file (a symbolic link to a file) sym-directory (a symbolic link to a directory) permissions unix type file permission syntax. 3 slots either 'r', 'w', 'x', or '-' representing, in order, read, write, or execute permissions. a '-' indicates that the particular permission is not set. example "rw-" means read an...
nsIContentPolicy - Archive of obsolete content
dom/base/nsicontentpolicy.idlscriptable interface used to implement a content policy mechanism. implementations of this interface can be used to control the loading of various types of out-of-line content, or the processing of certain types of inline content. 63 introduced gecko 1.0 inherits from: nsicontentpolicybase last changed in gecko 42 (firefox 42 / thunderbird 42 / seamon
key 2.39) you can observe content that is being loaded into your browser by implementing nsicontentpolicy. this interface can be very useful if you are developing a content-aware plugin (blocking ads or altering the look of content, for example), or if you want to stop or allow user-browsed urls. warning: do not block the caller in your implementations of shouldload() or shouldprocess() (for exam...
reftest opportunities files - Archive of obsolete content
at google groups). layout bugs that needs a reftest many of the bugzilla bugs in the core product, layout components with the in-testsuite? flag needs one or more reftests. if you create a reftest for any of these bugs please attach the reftest to the bug and ask for review from the assignee (or anyone else that seems appropriate judging from comments in the bug). note that bugs with the testcase
keyword already have one or more testcases attached to the bug that can be used when creating the reftest. tests from dbaron http://dbaron.org/css/test/cachetest http://dbaron.org/css/test/lenunit http://dbaron.org/css/test/implied http://dbaron.org/css/test/formelem http://dbaron.org/css/test/sec010303 http://dbaron.org/css/test/sec0302 http://dbaron.org/css/test/sec0302_xml http://dbaron.org/css/t...
Mozilla release FAQ - Archive of obsolete content
(formerly raptor) is the new html rendering engine in mozilla. it features speed improvements, a more modular nature, and significantly less platform-dependant code. it is more suitable for being embedded in other applications than the previous rendering engine. ...
2006-10-26 - Archive of obsolete content
ures suggestion john describes his suggestions for "killer features" for firefox. debug minefield on intel mac an inqury about how to debug minefield on an intel mac. rebuild firefox after modifying source code an inqury about how to rebuild the code after making a minor change - the user is unfamiliar with how to use the command prompt. bug in firefox when import passwords from seamon
key a possible bug find - perhaps a version error instead? there should be a 'changes' faq a user suggests that a faq page be made for changes, since the same two questions keep coming up. nsialertsservice under linux an inqury about why nsialertsservice is not a service found in firefox 2. is this a bug in firefox? an inqury about inaccurate layout for firefox being a bug - shaver sugge...
2006-10-27 - Archive of obsolete content
ures suggestion john describes his suggestions for "killer features" for firefox. debug minefield on intel mac an inqury about how to debug minefield on an intel mac. rebuild firefox after modifying source code an inqury about how to rebuild the code after making a minor change - the user is unfamiliar with how to use the command prompt. bug in firefox when import passwords from seamon
key a possible bug find - perhaps a version error instead? there should be a 'changes' faq a user suggests that a faq page be made for changes, since the same two questions keep coming up. nsialertsservice under linux an inqury about why nsialertsservice is not a service found in firefox 2. is this a bug in firefox? an inqury about inaccurate layout for firefox being a bug - shaver sugge...
2006-10-20 - Archive of obsolete content
this will make the language packages available to everyone. if you anyone has questions please feel free to ask benjamin smedberg. you can do this by replying to the following post. discussions sparky and comet going away on friday on october 19th j. paul reed posted the following discussion: j. paul reed stated that he is also going to decommission comet, the machine that performed seamon
key trunk gtk1 builds, this friday. j. paul reed's long-term goal is to remove old incompatible hardware. on the same day robert kaiser responded to j. paul reed's post: robert kaiser shared the following information about comet and btek machines: comet and btek are used as machines that upload nightly gtk1 builds. comet and btek are currently the fastest-cycling tinderboxes available therefore...
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.l10n - november 10, 2006 announcements seamon
key 1.0.5 in belarusian belarusian [be-by] localization for seamon
key 1.0.5 is available now. latvian pellcheck dictionary for ff2.0 newest openoffice dictionary files for ff 2.0 spell-checker is available. trunk / 1_8 for kurdish firefox the firefox translations of the kurdish are only in trunk translating the firefox privacy policy the final and approved en-us version of privacy policy is available here and ready for localization team to translate. seamon
key 1.0.6 and 1.1 beta upcoming seamon
key 1.0.6 and 1.1 beta are both available here. discussions help about firefox 3 a discussion on how to syncronise mozilla_1_8_branch with the trunk, which tag should be used to check-in files on trunk...
2006-11-3 - Archive of obsolete content
, is available here. check thread for complete details. mozillatranslator 5.13 released mozillatranslator 5.13 is available here. opening l10n repository on mozilla_1_8_branch for approved check-ins mozilla_1_8_branch is opened for approved check-ins. check-ins are limited to bug fixes filed in bugzilla and should mention their bug, describe the change, and who approved the change. seamon
key 1.0.6 and 1.1 beta upcoming the seamon
key projet is planning a security release of the stable 1.0 series as well as a beta for the 1.1 version, all possibly in the next days or week. community is advised to perform tests on both builds to ensure they work flawlessly. 1.0.6 build is located here, and 1.1 beta build is located here. discussions last check-ins on sun-calendar-event-dialog.* f...
2006-12-08 - Archive of obsolete content
summary: mozilla.dev.l10n - december 8, 2006 announcements mozilla sponsored server for l10n the server for mozilla sponsored server for l10n should be up and running soon. seamon
key 1.1b es-es language and region packs language and region packs for seamon
key 1.1b is ready for downloading. new strings in thunderbird new strings in thunderbird new bugzilla-staging.mozilla.org a staging server for a new bugzilla upgrade. discussions none for this week. meetings none for this week. authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers101) ...
2006-10-20 - Archive of obsolete content
discussions sparky and comet going away on friday preed wants to get rid of sparky and comet (both older desktop class linux boxes). robert kaiser gave some background on the boxes. ...
2006-10-20 - Archive of obsolete content
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. ...
2006-11-10 - Archive of obsolete content
discussion spidermon
key for the server side a user frusturated by the difference in programming languages between client and server asks if there is a javascript server-side framework. ...
2006-11-17 - Archive of obsolete content
announcements relicensing rhino to mpl rhino has been released under mpl/gpl license which makes it possible to distribute third party software with apache. discussions js_addnamedroot a user is wondering where and when he would need to call js_addnamedroot in c code. special characters inquiry of how to use special characters in spidermon
key. recycle array objects a user trying to overcome the need of using huge number of arrays (as vectors) asks if its possible to reuse unreferenced array objects instead of create new ones in spidermon
key. mike shaver's response was that resurrecting objects is not possible and that objects in spidermon
key are not reference counted. ...
JS-Engine FAQ - Archive of obsolete content
spidermon
key how long are private pointers? 2-byte aligned. check the jsval macros at the top of js/src/jsapi.h can an embedded spidermon
key js engine use domparser extension of mozilla? domparser is not part of js but part of mozilla browser which makes it available to script in the browser using xpconnect. an alternative would be to use built-in e4x. newly created threads in js from mozilla_1_8_branch causes to hang in windows patch from bug 351602 should fix the problem. after applying that patch, recompile js and define js_use_only_nspr_locks in the build. spidermon
key library loading mechanism? to write wrappers in pure javascript to interface with any c library on the system there are mechanisms such as xpcshell, wxjs, jsdb, jsni coding spidermon
key in c check ...
NPN_GetURLNotify - Archive of obsolete content
shed loading the url. if the target is null, the browser calls npp_urlnotify() after closing the stream by calling npn_destroystream(). if this function is called with a target parameter value of _self or a parent to _self, this function should return nperr_invalid_param. this is the only way to notify the plug-in once it is deleted. warning: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1), npn_geturlnotify() does not notify the plug-in if notifydata is null. see bug 638367 for details. see also npn_geturl() npn_posturl() npn_posturlnotify() npp_urlnotify() npp ...
NPN_SetValue - Archive of obsolete content
de is npp_new, so the browser knows right away what mode the plugin is designed to operate in. nppvpluginwindowbool (windows and unix) specifies that the plugin operates in windowed mode. the alternative is windowless where no window messages are sent to the plugin as there is no window associated with it. in windowless mode all the browser to plugin communications related to drawing, mouse, and
keyboard input are accomplished via npp_handleevent. to set windowless operation, call npn_setvalue with nppvpluginwindowbool as the variable parameter and false as the value parameter. by default, plugins are windowed. nppvplugintransparentbool (windows and unix) specifies that a plugin is either opaque or transparent. to specify an opaque mode, the plugin calls npn_setvalue with nppvplugintranspar...
Samples and Test Cases - Archive of obsolete content
the samples may not build any more on all platforms. there are plans to clean up the sample plugin situation - better organization, updated build systems, get them building on all platforms. however, even if one cannot build the samples they can still be very valuable as code references. there is a guide to compiling the npruntime sample in visual studio. in addition to those samples, there are 2 more plugins in the tree that might be helpful. ...
Adobe Flash - Archive of obsolete content
lash animation (the grey text box below). example 2: javascript to flash communication note: javascript to flash communication may not work with flash player versions older than version 8 if the user has installed multiple mozilla based browsers onto the same machine (see bug 284057 and bug 233533). enter some text in the html form field below and then click outside the field, or hit the enter
key, to send the text to the flash movie below: the example is missing. example 2 shows the use of macromedia flash's setvariable method being invoked from javascript. in general, to invoke a macromedia-defined method on a flash animation in netscape gecko browsers: use dom methods to get a handle to the html element that spawns the plugin. this may be the embed element or the object element's ...
Writing a plugin for Mac OS X - Archive of obsolete content
sample plugin to do whatever you want. notes and tips this section provides some additional information that may be helpful if you're trying to get a plugin building on your own. info.plist the plugin communicates its mime and filename extension information using the info.plist file, which is packaged in the plugin bundle. the plugin also communicates its bundle type in that file, under the
key cfbundlepackagetype; the type is 'brpl'. if the type isn't an npapi plugin type, the bundle won't load as an npapi plugin. you can always just use 'brpl'. xp_macosx it's important to define the gcc preprocessor definition xp_macosx to 1; this is used by the npapi headers to build properly on mac os x. if you don't define it, they won't be interpreted correctly. this is easy to miss in the s...
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
x, the xt code that hosts the plugins is at best hacky and has been the source for many minor problems including inconsistent focus behavior as well as occasional crashes. it's recommended that you have a look at the gecko plugin api reference since this document will include information that assumes that you are already familiar with the way that plugins are currently hosted as well as the apis.
key differences all of the interfaces that you would normally expect to exist in the plugins will still exist when using xembed plugins. there are only two
key differences: in the npp_setwindow call, the window parameter will be the xid of the hosting xembed window. as an implementation note, this is really the xid of a gtksocket window. in your plugin instance npp_getvalue call you need to make sur...
TCP/IP Security - Archive of obsolete content
es that controls at other layers do not. ssl is the most commonly used transport layer security control. depending on how ssl is implemented and configured, it can provide any combination of the following types of protection: confidentiality. ssl can ensure that data cannot be read by unauthorized parties. this is accomplished by encrypting data using a cryptographic algorithm and a secret
key—a value known only to the two parties exchanging data. the data can only be decrypted by someone who has the secret
key. integrity. ssl can determine if data has been changed (intentionally or unintentionally) during transit. the integrity of data can be assured by generating a message authentication code (mac) value, which is a
keyed cryptographic checksum of the data. if the data is alte...
Threats - Archive of obsolete content
tion. for example, a mail which appears to be to be sent from a bank, asking to verify your identity by giving away your private information. ddos network attack. the volume and strength of ddos attacks are growing as hackers try to bring organizations offline or steal their data by flooding websites and networks with spurious traffic. original document information author(s): ella deon lac
key last updated date: 2012 copyright information: © 2012 red hat, inc. link: red hat certificate system common criteria certification 8.1: deployment, planning, and installation original document information author(s): joint task force transformation initiative title: national institute of standards and technology (nist) special publication 800-30 revision 1, guide for conducting risk as...
Vulnerabilities - Archive of obsolete content
design processes. however, software flaws are purely negative—they provide no positive benefit to security or functionality—while software feature misuse vulnerabilities occur as a result of providing additional features. there may also be confusion regarding misuse vulnerabilities for features that can be enabled or disabled—in a way, configured—versus security configuration issues. the
key difference is that for a misuse vulnerability, the configuration setting enables or disables the entire feature and does not specifically alter just its security; for a security configuration issue vulnerability, the configuration setting alters only the software’s security. for example, a setting that disables all use of html in emails has a significant impact on both security and functionali...
Security - Archive of obsolete content
ssues mentioned at the beginning of this document. but encryption and decryption, by themselves, do not address another problem: tampering.encryption and decryptionencryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. decryption is the process of transforming encrypted information so that it is intelligible again.introduction to public-
key cryptographypublic-
key cryptography and related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and secure sockets layer (ssl) communications. this document introduces the basic concepts of public-
key cryptography. for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encry...
Table Reflow Internals - Archive of obsolete content
tyle height constraints, its rows and cells, and the actual heights of its rows and cells from the pass 2 reflow. if the table has a style height, it allocates extra height to its row groups, rows and cells. in each pass, row groups reflow rows which reflow cells which reflow cell blocks. ...
Common Firefox theme issues and solutions - Archive of obsolete content
on missing toolbar button icons due to firefox bug 679708 and bug 702558, some toolbar buttons icons may be missing on firefox 8 and later running on mac os x lion. in order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/:
keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows. the problem is commonly caused by a -moz-appearance:menulist style rule...
contents.rdf - Archive of obsolete content
<rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:description about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:access
key="n" chrome:author="" chrome:authorurl="" chrome:description="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my_theme:browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozi...
Making sure your theme works with RTL locales - Archive of obsolete content
96px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode. gecko 1.9.1 (firefox 3.5) and earlier the chromedir attribute firefox, thunderbird and seamon
key expose an attribute named chromedir on certain elements. all you have to do is add css rules to your theme that test for the value of this attribute, and use that to apply any rtl-specific rules that you may have. that's how the default theme works, so you can use it as an example. toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 398px 34px 360px); } toolbar[...
Theme changes in Firefox 2 - Archive of obsolete content
is for themes. the third is for locales, the fourth is for plugins, the fifth is for updates, and the sixth is for installs. mozapps/pref this entire directory is no longer used in firefox 2 and should be removed. changes in browser bookmarks/addbookmark.css the addbookmarks.css file should have the following lines added to the top: @namespace url("http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); some microsummary-related css also needs to be added, to provide formatting for the microsummary picker. these are used to make the picker look like a regular text box instead of like an editable menu list when there are no microsummaries available. menulist#name[droppable="false"] menulist#name[dropp...
Using Firebug and jQuery (Screencast) - Archive of obsolete content
arklets: in the presentation, i refer to a bookmarklet that you can use to introduce jquery into a web page. drag these bookmarklets found on this page into the bookmarks toolbar of your browser, in order to use them. related links: firebug firefox extension jquery javascript library jquery selector documentation digg learning jquery: jquerify bookmarklet if you wish to use greasemon
key instead of a bookmarklet, then by all means, please do so. you can use the ability to quickly analyze and inspect a page that firebug and jquery affords you, using the results to build a greasemon
key script, instead of a simple bookmarklet. i only really intended this to be a quick introduction to the subject, so please feel free to explore it more! more tips: here are some more jquery select...
-moz-stack-sizing - Archive of obsolete content
-moz-stack-sizing is an extended css property. normally, a <xul:stack> will change its size so that all of its child elements are completely visible. for example, moving a child of the stack far to the right will widen the stack so the child remains visible. /*
keyword values */ -moz-stack-sizing: auto; -moz-stack-sizing: ignore; /* global values */ -moz-stack-sizing: inherit; -moz-stack-sizing: initial; -moz-stack-sizing: unset; if you wish to prevent the stack from resizing automatically to accommodate its children, you can set -moz-stack-sizing to ignore on the child element. the property is set not on the stack itself, but on the stack's children. this lets you ignore certain children, but not others. note: in previous versions of gecko it was possible to work around the p...
-moz-window-shadow - Archive of obsolete content
in firefox 3.5 the default changed, with all windows having a shadow. this version introduced the -moz-window-shadow css property to provide a way to turn off unwanted shadows. initial valuedefaultapplies toall elements that create native windows, e.g. <window>, <panel>inheritednocomputed valueas specifiedanimation typediscrete syntax the -moz-window-shadow property is specified as one of the
keyword values listed below. values default the window will have a shadow with the default window shadow style. menu the window will have the shadow style that's appropriate for menus. tooltip the window will have the shadow style that's appropriate for tooltips. sheet the window will have the shadow style that's appropriate for sheet windows. none the window won't have a shadow. forma...
-ms-content-zoom-snap-points - Archive of obsolete content
ents. when a user pans or scrolls and then lifts his or her contact (for instance, a finger), the content can continue to move with inertia. snap-points can change the animation that runs when the user lifts his or her finger so that you can adjust where the content will stop. by placing snap-points, you can make it easy for your users to manipulate your content and make it stop at convenient or
key places. starting with windows 8.1, this property is also supported for touchpad interaction. this property requires windows 8 or later. ...
-ms-content-zoom-snap-type - Archive of obsolete content
ents. when a user pans or scrolls and then lifts his or her contact (for instance, a finger), the content can continue to move with inertia. snap-points can change the animation that runs when the user lifts his or her finger so that you can adjust where the content will stop. by placing snap-points, you can make it easy for your users to manipulate your content and make it stop at convenient or
key places. starting with windows 8.1, this property is also supported for touchpad interaction. this property requires windows or later. ...
-ms-ime-align - Archive of obsolete content
andidate window box relative to the element on which the ime composition is active. the extension is implemented in microsoft edge and internet explorer 11. ime candidate lists are positioned on the screen with sufficient size to allow basic text input. in some cases, the ime may enforce a reasonable minimum size. in the case of -ms-ime-align: after, an ime might adjust the candidate window and
keyboard input behavior to provide a better user experience, such as using a horizontal candidate list and allowing some
keys to be sent to the app for suggestion list navigation. initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax /*
keyword values */ -ms-ime-align: auto; -ms-ime-align: after; values auto initial value. the ime may align...
-ms-scroll-snap-y - Archive of obsolete content
. .scroll1 { -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: snapinterval(0, 100%); } .scroll2 { -ms-scroll-snap-y: mandatory snapinterval(0, 100%); } specifications not part of any specification. remarks this property requires windows 8 or later. this property has no effect on non-scrollable elements. starting with windows 8.1, this property is also supported for mouse,
keyboard, and touchpad interaction. ...
-ms-scroll-translation - Archive of obsolete content
nables you to change this behavior for vertical scroll events. by setting the -ms-scroll-translation property to vertical-to-horizontal, you are specifying that vertical scroll events should be interpreted as their corresponding horizontal scroll events. this property's initial value is inherit on all elements, except the <html> element, where it defaults to none. this property has no effect on
keyboard interaction. the default css templates for windows apps using javascript, "ui-light.css" and "ui-dark.css", set this property to vertical-to-horizontal by default on the <html> element. ...
-moz-windows-theme - Archive of obsolete content
te: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. the -moz-windows-theme gecko-only css media feature is useful for customizing application skins and other chrome code to work well with the user's windows theme. syntax the -moz-windows-theme feature is specified as a
keyword value that indicates which windows theme is currently being used. values aero luna-blue luna-olive luna-silver royale generic zune media: media/visual accepts min/max prefixes: no ...
display-inside - Archive of obsolete content
the display-inside css property specifies the inner display type of the box generated by an element, dictating how its contents lay out inside the box. /*
keyword values */ display-inside: auto; display-inside: block; display-inside: table; display-inside: flex; display-inside: grid; display-inside: ruby; /* global values */ display-inside: inherit; display-inside: initial; display-inside: unset; value not found in db! syntax one of the
keyword values listed below. values auto if the element's computed <display-outside> value is inline-level, the element is an inline element, and lays out its contents using inline layout. if the element's computed <display-outside> value is an layout-specific internal type, this elements acts as normal for its given <display-outside> val...
CSS - Archive of obsolete content
so the child remains visible.-moz-text-blinkthe -moz-text-blink non-standard mozilla css extension specifies the blink mode.-moz-window-shadowthe -moz-window-shadow css property specifies whether a window will have a shadow. ...
Displaying notifications (deprecated) - Archive of obsolete content
this non standard api has been dropped in firefox 22 in favor of the standard api. to see how to use the standard api, please read: using web notifications mobile only in gecko 2.0 available only in firefox mobile as of gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system. for example, on android, notifications appear in the bar at the top of the screen, and in the panel that appears when you drag that bar downward. creating a notification the first thing you need to do is create the notification object ...
Processing XML with E4X - Archive of obsolete content
array methods such as foreach, and array generics such as array.foreach() are not compatible with xmllist objects. we can also use the for each...in statement introduced in javascript 1.6 as part of javascript's e4x support: for each (var lang in languages.lang) { alert(lang); } for each...in can also be used with regular javascript objects to iterate over the values (as opposed to the
keys) contained in the object. as with for...in, using it with arrays is strongly discouraged. it is possible to create an xmllist using xml literal syntax without needing to create a well-formed xml document, using the following syntax: var xmllist = <> <lang>javascript</lang> <lang>python</lang> </>; the += operator can be used to append new elements to an xmllist within a document: l...
E4X - Archive of obsolete content
document in a form that feels natural for ecmascript programmers. the goal is to provide an alternative, simpler syntax for accessing xml documents than via dom interfaces. a valid alternative to e4x is a non-native jxon algorithm. e4x is standardized by ecma international in ecma-357 standard (currently in its second edition, december 2005). e4x is implemented (at least partially) in spidermon
key (gecko's javascript engine) and in rhino (javascript engine written in java). note: in gecko 1.8 based browsers such as firefox 1.5, e4x is already partially enabled for web page authors. to fully enable e4x, the <script> element needs to have the mime type "text/javascript;e4x=1" (i.e., have an attribute of the form type="text/javascript;e4x=1"). the difference between the two modes is that wit...
Namespaces - Archive of obsolete content
riety of namespaces. you can declare the default namespace for your e4x objects by placing the statement: default xml namespace = "http://www.w3.org/1999/xhtml"; within the same scope as your e4x. you can also change namespaces at any time, by repeating the statement. default xml namespace = "http://www.w3.org/1999/xhtml"; var a = <p>some text</p>; default xml namespace = "http://www.mozilla.org/
keymaster/gat...re.is.only.xul"; var b = <label>more text</label>; a.appendchild(b); gives <p xmlns="http://www.w3.org/1999/xhtml"> some text <label xmlns="http://www.mozilla.org/
keymaster/gat...re.is.only.xul">more text</label> </p> name() using name() on an xml object returns a qname object (qualified name). qname is a global constructor available in javascript implementations supporting e4x.
Iterator - Archive of obsolete content
non-standard. the iterator function is a spidermon
key-specific feature, and will be removed at some point. for future-facing usages, consider using for..of loops and the iterator protocol. the iterator function returns an object which implements legacy iterator protocol and iterates over enumerable properties of an object. syntax iterator(object, [
keyonly]) parameters object object to iterate over properties.
keyonly if
keyonly is truthy value, iterator.prototype.next returns property_name only. description returns iterator instance that iterates over object. iterator instance returns [property_name, property_value] array for each iteration if
keyonly is falsy, otherwise, if
keyonly is truthy, it returns property_name for each iteration. if object is the iterator instan...
Legacy generator function expression - Archive of obsolete content
to make the function a legacy generator, the function body should contain at least one yield expression. syntax function [name]([param1[, param2[, ..., paramn]]]) { statements } parameters name the function name. can be omitted, in which case the function is anonymous. the name is only local to the function body. paramn the name of an argument to be passed to the function. a function can have up to 255 arguments. ...
Legacy generator function - Archive of obsolete content
for future-facing usages, consider using function*. the legacy generator function statement declares legacy generator functions with the specified parameters. you can also define functions using the function constructor with functionbody and at least one yield expression, and a legacy generator function expression. syntax function name([param,[, param,[..., param]]]) { [statements] } name the function name. param the name of an argument to be passed to the function. a function can have up to 255 arguments. statements the statements which comprise the body of the function. ...
ActiveXObject - Archive of obsolete content
pename the type or class of the object to create. location optional the name of the network server where the object is to be created. remarks automation servers provide at least one type of object. for example, a word-processing application may provide an application object, a document object, and a toolbar object. you may be able to identify servername.typename values on a host pc in the h
key_classes_root registry
key. for example, here are a few examples of values you may find there, depending on which programs are installed: excel.application excel.chart scripting.filesystemobject wscript.shell word.document important: activex objects may present security issues. to use the activexobject, you may need to adjust security settings in internet explore...
New in JavaScript 1.3 - Archive of obsolete content
. if one element is removed, an array of one element is returned. changes to string.prototype.replace(). changes to the boolean object. changes to tostring(). non-ecma-262 features of javascript 1.3 the following is a comparison between the june 1998 version of ecma-262 and javascript 1.3. the following features were not part of the standard at that time, but implemented in javascript 1.3.
keywords and operators strict equality operators vertical tab (\v or \u000b) as an escape sequence. statements label switch do...while export import built-in objects regexp methods of built-in objects tosource() object.prototype.watch() object.prototype.unwatch() function.arity function.prototype.apply() function.prototype.call() array.prototype.concat() array.prototype.
New in JavaScript 1.7 - Archive of obsolete content
new features of javascript 1.7, you need to specify that you wish to use javascript 1.7. in html or xul code, use: <script type="application/javascript;version=1.7"></script> when using the javascript shell, you need to set the version you wish to use using the -version 170 switch on the command line or using the version() function: version(170); the features that require the use of the new
keywords "yield" and "let" require you to specify version 1.7 because existing code might use those
keywords as variable or function names. the features that do not introduce new
keywords (destructuring assignment and array comprehensions) can be used without specifying the javascript version. new features in javascript 1.7 the following features added with javascript 1.7 were not part of an ecma-2...
New in JavaScript 1.8.1 - Archive of obsolete content
the following is a changelog for javascript 1.8.1. this version was included in firefox 3.5. javascript 1.8.1 is a modest update syntactically to javascript; the main change in this release is the addition of the tracemon
key just-in-time compiler, which improves performance. new features in javascript 1.8.1 object.getprototypeof() support for native json string.prototype.trim() string.prototype.trimleft() string.prototype.trimright() changed functionality in javascript 1.8.1 implicit setting of properties in object and array initializers no longer execute setters in javascript. this makes the behavior of setting the values of properties more predictable. ...
Object.prototype.__count__ - Archive of obsolete content
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the __count__ property used to store the count of enumerable properties on the object, but it has been removed. ...
Object.prototype.__noSuchMethod__ - Archive of obsolete content
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the __nosuchmethod__ property used to reference a function to be executed when a non-existent method is called on an object, but this function is no longer available. while __nosuchmethod__ has been dropped, the ecmascript 2015 specification has the proxy object, with which you can achieve the below (and more). syntax obj.__nosuchmethod__ = fun parameters fun a function that takes the form function (id, args) { . . . ...
String.prototype.quote() - Archive of obsolete content
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the non-standard quote() method returns a copy of the string, replacing various special characters in the string with their escape sequences and wrapping the result in double-quotes ("). syntax str.quote() return value a new string representing the original string wrapped in double-quotes, with any special characters escaped. examples using quote in the table below the quote() method replaces any special characters and wraps the strings in double-quotes. ...
for each...in - Archive of obsolete content
7. please see warning: javascript 1.6's for-each-in loops are deprecated for migration help. the for each...in statement iterates a specified variable over all values of object's properties. for each distinct property, a specified statement is executed. syntax for each (variable in object) { statement } variable variable to iterate over property values, optionally declared with the var
keyword. this variable is local to the function, not to the loop. object object for which the properties are iterated. statement a statement to execute for each property. to execute multiple statements within the loop, use a block statement ({ ... }) to group those statements. description some built-in properties are not iterated over. these include all built-in methods of objects, e.g. ...
LiveConnect - Archive of obsolete content
liveconnect provides javascript with the ability to call methods of java classes and vice-versa using the existing java infrastructure. older versions of gecko included special support for the java<->javascript bridge (such as the java and packages global objects), but as of mozilla 16 (firefox 16 / thunderbird 16 / seamon
key 2.13) liveconnect functionality is provided solely by the oracle's java plugin. documentation java plugin - liveconnect documentation this is likely the most up-to-date documentation of liveconnect. removal of java and packages global objects in mozilla 16 see bug 748343 for the rationale and workarounds. you can still embed java applets and access their api from javascript. liveconnect overview an overview fo...
JavaClass - Archive of obsolete content
hods of a javaclass object are the static methods of the java class. examples example: using javaclass in the following example, x is a javaclass object referring to java.awt.font. because bold is a static field in the font class, it is also a property of the javaclass object. x = java.awt.font; myfont = x("helv", x.bold, 10); // creates a font object the previous example omits the packages
keyword and uses the java synonym because the font class is in the java package. example in the following example, the javaclass object java.lang.string is passed as an argument to the newinstance method which creates an array: var cars = java.lang.reflect.array.newinstance(java.lang.string, 15); see also javaarray, javaobject, javapackage, packages ...
JavaPackage - Archive of obsolete content
description in java, a package is a collection of java classes or other java packages. for example, the netscape package contains the package netscape.javascript; the netscape.javascript package contains the classes jsobject and jsexception. in javascript, a javapackage is a reference to a java package. ...
StopIteration - Archive of obsolete content
for future-facing usages, consider using for..of loops and the iterator protocol. the stopiteration object was used to tell the end of the iteration in the legacy iterator protocol. do not use this ancient feature. syntax stopiteration description stopiteration is a part of legacy iterator protocol, and it will be removed at the same time as legacy iterator and legacy generator. examples stopiteration is thrown by iterator. ...
Writing JavaScript for XHTML - Archive of obsolete content
pare correctly and will do no harm in xhtml where the names are already lower case. problem: my cookie isn't saved! we found out already, that the document object in xml files is different from the ones in html files. now we take a look at one widly used property that is missing in xml files. in xml documents there is no document.cookie. that is, you can write something like document.cookie = "
key=value"; in xml as well, but nothing is saved in cookie storage. solution: use the storage object with firefox 2 there was a new feature enabled, the html 5 storage object. although this feature is not free of critics, you can use it to bypass the non-existing cookie, if your document is of type xml. again, you will have to write your own wrapper to respect any given combination of mime type a...
XForms Help Element - Archive of obsolete content
the message of the help element can exist in instance data, in a remote document, or as inline text. if more than one source of message is specified in this element, the order of precedence is: single node binding attributes, linking attributes, inline text. ...
XForms Input Element - Archive of obsolete content
introduction this element is an important and oft-used xforms element to show and change the instance data to which this xforms control is bound (see the spec). 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 access
key - used to specify the
keyboard shortcut for focusing this control single-node binding special inputmode - not supported for this control incremental - supported. the default value is 'false'. mozilla extensions labelposition - only for boolean types: show the label before or after the checkbox (see below) type restrictions the input element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any dat...
XForms Output Element - Archive of obsolete content
introduction serves to show the instance data that the element is bound to in a read-only manner (see the spec). to see how they work you can try an xhtml example or a xul example. 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 access
key - used to specify the
keyboard shortcut for focusing this control single-node binding special value - xpath expression whose evaluation result is used as the output's value. if binding attributes are present on the control then the value attribute is is ignored. type restrictions the output element can be bound to a node containing simple content of any data type. representations the xforms output element can be represented ...
XForms Range Element - Archive of obsolete content
introduction allows the user to choose a value from within a specific range of values (see the spec). attributes ui common appearance - isn't supported. access
key - used to specify the
keyboard shortcut for focusing this control. single-node binding special incremental - supported, default value is false start - lower bound of possible values end - upper bound of possible values step - is used for incrementing/decrementing values start/end/step attributes if the value of the bound instance node is outside the range of values specified by the start and end attributes, then the range element receives a xforms-out-of-range event. if the bound value then becomes in range, the range element receives a xforms-in-range event. start specifies the lower bound of possible values, i.
XForms Select Element - Archive of obsolete content
or itemset (see the spec) elements. you can visually group these pre-defined items by using the choices (see the spec) element to contain them. note, some representations of the select element do not support visual grouping. 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. access
key - used to specify the
keyboard shortcut for focusing this control. single-node binding special selection - isn't currently supported. this attribute, when set to 'open', allows the user to provide free entry to the list. possible values are open and closed, default is closed. incremental - supported, default value is true properties selection - see corresponding attribute incremental -...
XForms Select1 Element - Archive of obsolete content
r itemset (see the spec) elements. you can visually group these pre-defined items by using the choices (see the spec) element to contain them. note, some representations of the select1 element do not support visual grouping. 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. access
key - used to specify the
keyboard shortcut for focusing this control. single-node binding special selection - this attribute, when set to 'open', allows the user to provide free entry to the list. possible values are open and closed, default is closed (see #representations section to refer if the attribute is supported for every representation). incremental - supported, default value is true ...
XForms Submit Element - Archive of obsolete content
ich could be local or remote (see the spec). upon receiving a domactivate event, this form control dispatches a xforms-submit event to 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. access
key - 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 ...
XForms Textarea Element - Archive of obsolete content
single-node binding special inputmode - isn't supported. incremental - supported. the default value is false. type restrictions the textarea element can be bound to a node of type xsd:string or any type derived from it. representations the xforms textarea element is represented by a multiline text field (xhtml/xul). ...
XForms Trigger Element - Archive of obsolete content
introduction allows the user to initiate actions (see the spec). actions are described by the xforms action module (see the spec). 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 access
key - used to specify the
keyboard shortcut for focusing this control single-node binding type restrictions the trigger element can be bound to a node containing data of any type. actually, the trigger element doesn't interact with the data in the bound node. however, relevant model item property on the bound node has an effect on a trigger. if the bound node is irrelevant, then the trigger will be hidden. representations the xforms trigger element can be...
XForms Upload Element - Archive of obsolete content
f files that the user can select from. visually, the upload control is shown as a file picker dialog that hides disallowed (filtered) file types. the xforms author can set the filter by using the mediatype attribute directly on the upload element or by placing a mediatype element (see the spec) as a direct child of the upload element. attributes ui common appearance - isn't supported. access
key - used to specify the
keyboard shortcut for focusing this control. single-node binding special mediatype - supported. incremental - isn't supported. type restrictions the upload element can be bound to a node of type xsd:anyuri, xsd:base64binary or xsd:hexbinary or any type derived from one of these. representations the xforms upload element is represented by visually combining thre...
Mozilla's DOCTYPE sniffing - Archive of obsolete content
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this page describes behavior of the old html parser in firefox 3.6 and older. it has been replaced by a new html 5 parser in firefox 4 and newer. this document describes how mozilla uses the doctype declaration to determine strict mode vs. quirks mode. the code that makes this determination is currently in determineparsemode() in nsparser.cpp. see bug 1312 and bug 55264 for some of the history of the mode determination. ...
RDF in Fifty Words or Less - Archive of obsolete content
the resource description framework, or "rdf", is really two things. first, rdf is a graph-based model for describing internetresources (like web pages and email messages), and how these resources relate to one another. but what does that mean,really? to a mozilla developer, it means that the rdf data model (the "graph") can be used as a mechanism for integrating and organizing internet resources. let's look at an example:bookmarks. right now, most web browsers let you organize your bookmarks hierarchically intofolders. ...
Windows Media in Netscape - Archive of obsolete content
architecture, such as in netscape 4x - 7.02 and opera browsers } since ie for mac also exposes window.activexobject it is wise to determine if the browser in question is on windows. both activexobject and geckoactivexobject function similarly. the next subsection discusses them in detail. geckoactivexobject vs. activexobject both geckoactivexobject and activexobject work very similarly, with one
key difference: both take a programmatic id (progid) and use it to create a reference to the windows media player. the progid of windows media player is mediaplayer.mediaplayer.1. while the progid cannot be used to create a windows media player object that exposes all its properties and methods, it is useful for rapid detections. here is a code snippet that shows this: var player; try { if (window.
Archive of obsolete content
relying on these obsolete security articles is highly discouraged. doing so may put your systems at risk. solaris 10 build prerequisites sunbird theme tutorial this tutorial is a step-by-step guide to making a theme for sunbird 0.3a1 and later versions. it is designed for beginners. it does not cover advanced topics. table reflow internals
key: tamarin tracing build documentation the following instructions are for obtaining and building the tamarin tracing source code. for instructions on tamarin central, please see the basics of web services summary: a current hot topic on the web right now are web services. this short guide will allow you to learn more about web services. themes archive...
Using the DOM File API in chrome code - Extensions
e. you can do so like this: var dsfile = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .get("profd", components.interfaces.nsifile); dsfile.append("myfilename.txt"); var file = file.createfromnsifile(dsfile); this uses the directory service to locate the profile directory (with the location
key "profd", see below for more details), then appends the name of the file we want to work with by calling nsifile.append(). finally, we instantiate the file object by calling file.createfromnsifile. other such
keys as the "profd"
key are available, check the known locations. notes starting in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5), you can also do this in component code. ...
Anatomy of a video game - Game development
op contents } main(); // start the cycle })(); we now have a variable declared in our mygame namespace, which we call stopmain, that contains the id returned from our main loop's most recent call to requestanimationframe(). at any point, we can stop the main loop by telling the browser to cancel the request that corresponds to our token. window.cancelanimationframe( mygame.stopmain ); the
key to programming a main loop, in javascript, is to attach it to whatever event should be driving your action and pay attention to how the different systems involved interplay. you may have multiple components driven by multiple different types of events. this feels like unnecessary complexity but it might just be good optimization (not necessarily, of course). the problem is that you are not progra...
Game monetization - Game development
the path to becoming an independent game developer able to make a living, read on and see what your options are. the technology is mature enough; now it's just about chosing the right approach. paid games the first, most obvious choice that may come to your mind might be selling the games the way it is done for huge aaa titles — with a fixed, up front price. even though the digital market is
key and you don't need to print covers and put your game in a physical store in boxes, to earn decent money on selling your games for a fixed price you have to invest your time and money in marketing. only the best games will break even or earn more than they cost to make, and you still need a lot of luck for that. how much you charge for your game depends on the market, quality of your game and a l...
Game promotion - Game development
process easier. manakeep is a website builder made for indie game developers and provides a great starting point to create your website. presskit() is a press kit builder that helps you create a press page to share with the media. social media your social media presence is very important — follow the right hashtags, make friends, engage in conversations, help other devs in need. honesty is
key and you should be authentic, because nobody likes boring press releases or pushy advertisements. when the time comes your community will help you spread the word about your shiny little game. you should use at least twitter and facebook and be active on appropriate forums — the most popular one is html5gamedevs.com. share your gamedev news and answer questions, so people will value what you're...
WebVR — Virtual Reality for the Web - Game development
iment with vr websites and games: read the building up a basic demo with a-frame tutorial for more details. immersion is more important than gameplay or graphics - you have to feel you're "inside" the experience. it's not easy to achieve, but it doesn't require realistic images. quite the contrary as having a basic shapes flying around in high framerate can make a lot. remember: experimenting is
key - see what works for your game in particular. the future of webvr it's happening — consumer devices are reaching the market right now, and we already have javascript apis to support them on the web. all we need now is a stable specification, good ux and ui, better hardware and more tools and libraries — and all of that is on the horizon. it's the perfect time to dive in and experiment with ...
Audio for Web games - Game development
delay = tempo - (remainder*tempo); source.start(context.currenttime+delay, relativetime+delay); } note: you can try our wait calculator code here, on jsfiddle (i've synched to the bar in this case). note: if the first parameter is 0 or less than the context currenttime, playback will commence immediately. positional audio positional audio can be an important technique in making audio a
key part of an immersive gaming experience. the web audio api not only enables us to position a number of audio sources in three-dimensional space but it can also allow us to apply filters that make that audio appear more realistic. the pannernode harnesses the positional capabilities of the web audio api so we can relate further information about the game world to the player. there's a tutorial her...
Mobile touch controls - Game development
top and left edges of the screen and is 80 pixels wide. the stick being pressed can be handled during the gameplay in the update function like so: if(this.stick.isdown) { // move the player } we can adjust the player's velocity based on the current angle of the stick and move him appropriately. summary that covers adding touch controls for mobile; in the next article we'll see how to add
keyboard and mouse support. overview: control mechanisms next ...
Collision detection - Game development
he brick plus its height. let's write that down in code: function collisiondetection() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; } } } } add the above block to your code, below the
keyuphandler() function. making the bricks disappear after they are hit the above code will work as desired and the ball changes its direction. the problem is that the bricks are staying where they are. we have to figure out a way to get rid of the ones we've already hit with the ball. we can do that by adding an extra parameter to indicate whether we want to paint each brick on the screen or not. ...
Create the Canvas and draw on it - Game development
y coordinates of the arc's center arc radius start angle and end angle (what angle to start and finish drawing the circle, in radians) direction of drawing (false for clockwise, the default, or true for anti-clockwise.) this last parameter is optional. the fillstyle property looks different than before. this is because, just as with css, color can be specified as a hexadecimal value, a color
keyword, the rgba() function, or any of the other available color methods. instead of using fill() and filling the shapes with colors, we can use stroke() to only colour the outer stroke. try adding this code to your javascript too: ctx.beginpath(); ctx.rect(160, 10, 100, 40); ctx.strokestyle = "rgba(0, 0, 255, 0.5)"; ctx.stroke(); ctx.closepath(); the code above prints a blue-stroked empty rectan...
2D breakout game using pure JavaScript - Game development
f articles you should already have basic to intermediate javascript knowledge. after working through this tutorial you should be able to build your own simple web games. lesson details all the lessons — and the different versions of the mdn breakout game we are building together — are available on github: create the canvas and draw on it move the ball bounce off the walls paddle and
keyboard controls game over build the brick field collision detection track the score and win mouse controls finishing up starting with pure javascript is the best way to get a solid knowledge of web game development. after that, you can pick any framework you like and use it for your projects. frameworks are just tools built with the javascript language; so even if you plan on working with t...
Initialize the framework - Game development
ee options are auto, canvas and webgl. we can set one of the latter two explicitly or use auto to let phaser decide which one to use. it usually uses webgl if available in the browser, falling back to canvas 2d if not. the id of the <canvas> to use for rendering if one already exists on the page (we've specified null because we want phaser to create its own.) the names to use for phaser's three
key functions that load and start the game, and update the game loop on every frame; we will use the same names to keep it clean. preload takes care of preloading the assets create is executed once when everything is loaded and ready update is executed on every frame. compare your code here's the full source code of the first lesson, running live in a jsfiddle: next steps now ...
Cipher - MDN Web Docs Glossary: Definitions of Web-related terms
to withstand attacks discovered by a cryptanalyst. there is no guarantee that all attack methods have been discovered, but each algorithm is judged against known classes of attacks. ciphers operate two ways, either as block ciphers on successive blocks, or buffers, of data, or as stream ciphers on a continuous data flow (often of sound or video). they also are classified according to how their
keys are handled: symmetric
key algorithms use the same
key to encode and decode a message. the
key also must be sent securely if the message is to stay confidential. asymmetric
key algorithms use a different
key for encryption and decryption. ...
Ciphertext - MDN Web Docs Glossary: Definitions of Web-related terms
in cryptography, a ciphertext is a scrambled message that conveys information but is not legible unless decrypted with the right cipher and the right secret (usually a
key), reproducing the original cleartext. a ciphertext's security, and therefore the secrecy of the contained information, depends on using a secure cipher and keeping the
key secret. learn more general knowledge ciphertext on wikipedia ...
Compile - MDN Web Docs Glossary: Definitions of Web-related terms
nstance to compile from typescript to javascript. those are considered productivity tools. most compilers work either ahead-of-time (aot) or just-in-time (jit). as a programmer, you usually invoke aot compilers from a command line or your ide. the most famous, "gcc" is one example. jit compilers are usually transparent to you, used for performance. for instance in the browser: firefox' spidermon
key javascript engine has a jit built-in that will compile javascript in a website to machine code while you're viewing it so it runs faster. projects like webassembly work on making this even better. learn more general knowledge compiler on wikipedia the gnu compiler collection (gcc) learning resources base cs introduction on compilers a big list of learning material on stackoverflow ...
DTLS (Datagram Transport Layer Security) - MDN Web Docs Glossary: Definitions of Web-related terms
e 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 transport protocol (srtp) security context using dtls rfc 5764: dtls extension to establish
keys for the secure real-time transport protocol (srtp) rfc 6083: dtls for stream control transmission protocol (sctp) rfc 8261: datagram transport layer security (dtls) encapsulation of sctp packets rfc 7350: datagram transport layer security (dtls) as transport for session traversal utilities for nat (stun) rfc 7925: tls / dtls profiles for the internet of things ...
Decryption - MDN Web Docs Glossary: Definitions of Web-related terms
in cryptography, decryption is the conversion of ciphertext into cleartext. decryption is a cryptographic primitive: it transforms a ciphertext message into plaintext using a cryptographic algorithm called a cipher. like encryption, decryption in modern ciphers is performed using a specific algorithm and a secret, called the
key. since the algorithm is often public, the
key must stay secret if the encryption stays secure. decryption is the reverse of encryption and if the
key stays secret, decryption without knowing the specific secret, decryption is mathematically hard to perform. how hard depends on the security of the cryptographic algorithm chosen and evolves with the progress of cryptanalysis. learn more technical reference encryption and decryption ...
Encryption - MDN Web Docs Glossary: Definitions of Web-related terms
in cryptography, encryption is the conversion of cleartext into a coded text or ciphertext. a ciphertext is intended to be unreadable by unauthorized readers. encryption is a cryptographic primitive: it transforms a plaintext message into a ciphertext using a cryptographic algorithm called a cipher. encryption in modern ciphers is performed using a specific algorithm and a secret, called the
key. since the algorithm is often public, the
key must stay secret if the encryption stays secure. without knowing the secret, the reverse operation, decryption, is mathematically hard to perform. how hard depends on the security of the cryptographic algorithm chosen and evolves with the progress of cryptanalysis. learn more learn more about encryption and decryption ...
Entity - MDN Web Docs Glossary: Definitions of Web-related terms
an html entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) . entities are frequently used to display reserved characters (which would otherwise be interpreted as html code), and invisible characters (like non-breaking spaces). you can also use them in place of other characters that are difficult to type with a standard
keyboard. many characters have memorable entities. for example, the entity for the copyright symbol (©) is ©. for less memorable characters, such as — or —, you can use a reference chart or decoder tool. reserved characters some special characters are reserved for use in html, meaning that your browser will parse them as html code. for example, if you use the less-than (<) sign, the browser inte...
Google Chrome - MDN Web Docs Glossary: Definitions of Web-related terms
chrome supports its own layout called blink. note that the ios version of chrome uses that platform's webview, not blink. learn more general knowledge google chrome on wikipedia for chrome users use one of these links if you're an everyday user. android ios desktop for web developers if you want to try the latest chrome features, install one of the pre-stable builds. google pushes updates frequently and has designed the distributions to run side-by-side with the stable version. ...
HMAC - MDN Web Docs Glossary: Definitions of Web-related terms
hmac is a protocol used for cryptographically authenticating messages. it can use any kind of cryptographic functions, and its strengh depends on the underlying function (sha1 or md5 for instance), and the chosen secret
key. with such a combination, the hmac verification algorithm is then known with a compound name such as hmac-sha1. hmac is used to ensure both integrity and authentication. learn more general knowledge hmac on wikipedia technical reference rfc 2104 on ietf ...
ITU - MDN Web Docs Glossary: Definitions of Web-related terms
the international telecommunication union (itu) is the organization authorized by the united nations to establish standards and rules for telecommunication, including telegraph, radio, telephony and the internet. from defining rules for ensuring transmissions get to where they need to go to and creating the "sos" alert signal used in morse code, the itu has long played a
key role in how we use technology to exchange information and ideas. in the internet age, the itu's role of establishing standards for video and audio data formats used for streaming, teleconferencing, and other purposes. for example, the itu and the moving picture experts group (mpeg) worked together to develop and publish, as well as to maintain, the various mpeg specifications, such as mpeg-2 (itu h.262), avc (itu...
Intrinsic Size - MDN Web Docs Glossary: Definitions of Web-related terms
and extrinsic sizing specification. intrinsic sizing takes into account the min-content and max-content size of an element. for text the min-content size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. for a box containing a string of text, the min-content size would be defined by the longest word. the
keyword value of min-content for the width property will size an element according to the min-content size. the max-content size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. the
keyword value max-content exposes this behavior. ...
MitM - MDN Web Docs Glossary: Definitions of Web-related terms
tips: don't just ignore certificate warnings. you could be connecting to a phishing server or an imposter server. sensitive sites without https encryption on public wi-fi networks aren't trustworthy. check for https in your address bar and ensure encryption is in-place before logging in. learn more owasp article: man-in-the-middle attack wikipedia: man-in-the-middle attack the public-
key-pins header (hpkp) can significantly decrease the risk of mitm by instructing browsers to require a whitelisted certificate for all subsequent connections to that website. ...
QUIC - MDN Web Docs Glossary: Definitions of Web-related terms
ation delivery. as tcp is built into the kernel of many operating systems being able to experiment with changes, test them and implement modifications is an extremely slow process. the creation of quic allows developers to conduct experiments and try new things faster. quic was designed to support the semantics of http/2. it provides multiplexing, flow control, security and congestion control.
key features of quic include: reduction in connection establishment time. improved congestion control. multiplexing without head-of-line blocking. forward error correction. connection migration. there is limited browser and server support for quic today. resources chromium projects documentation ietf draft see also http/2 ...
Response header - MDN Web Docs Glossary: Definitions of Web-related terms
t strictly speaking, the content-encoding and content-type headers are entity header: 200 ok access-control-allow-origin: * connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: mon, 18 jul 2016 16:06:00 gmt etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a" keep-alive: timeout=5, max=997 last-modified: mon, 18 jul 2016 02:36:04 gmt server: apache set-cookie: my
key=myvalue; expires=mon, 17-jul-2017 16:06:00 gmt; max-age=31449600; path=/; secure transfer-encoding: chunked vary: cookie, accept-encoding x-backend-server: developer2.webapp.scl3.mozilla.com x-cache-info: not cacheable; meta data too large x-kuma-revision: 1085259 x-frame-options: deny ...
Search engine - MDN Web Docs Glossary: Definitions of Web-related terms
fic information. a search engine conducts the following processes: web crawling: searching web sites by navigating hyperlinks on web pages, both within a site, and from one site to another. a web site owner can exclude areas of the site from being accessed by a search engine's web crawler (or spider), by defining "robot exclusion" information in a file named robots.txt. indexing: associating
keywords and other information with specific web pages that have been crawled. this enables users to find relevant pages as quickly as possible. searching: looking for relevant web pages based on queries consisting of
key words and other commands to the search engine. the search engine finds the urls of pages that match the query, and ranks them based on their relevance. it then presents results to ...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
ed above. it is therefore a good idea to use the right html element for the right job. html should be coded to represent the data that will be populated and not based on its default presentation styling. presentation (how it should look), is the sole responsibility of css. ...
Signature (security) - MDN Web Docs Glossary: Definitions of Web-related terms
a signature, or digital signature, is a protocol showing that a message is authentic. from the hash of a given message, the signing process first generates a digital signature linked to the signing entity, using the entity's private
key. on receiving the message, the verification process authenticates the sender - uses the sender's public
key to decrypt the signature and recover the hash, which can only be created with the sender's private
key, and checks message integrity - compares the hash with a newly calculated one from the received document (the two hashes will differ if the document has been tampered with) the system fails if the private
key is compromised or the recipient is deceitfully given the wrong public
key. learn more general knowledge digital signature on...
Type coercion - MDN Web Docs Glossary: Definitions of Web-related terms
type coercion is the automatic or implicit conversion of values from one data type to another (such as strings to numbers). type conversion is similar to type coercion because they both convert values from one data type to another with one
key difference — type coercion is implicit whereas type conversion can be either implicit or explicit. examples const value1 = '5'; const value2 = 9; let sum = value1 + value2; console.log(sum); in the above example, javascript has coerced the 9 from a number into a string and then concatenated the two values together, resulting in a string of 59. javascript had a choice between a string or a number and decided to use a string. the compiler could have coerced the 5 into a number and returned a sum of 14, but it did not. to return this result,...
UI - MDN Web Docs Glossary: Definitions of Web-related terms
user interface (ui) is anything that facilitates the interaction between a user and a machine. in the world of computers, it can be anything from a
keyboard, a joystick, a screen or a program. in case of computer software, it can be a command-line prompt, a webpage, a user input form, or the front-end of any application. learn more general knowledge user interface on wikipedia front end development on wikipedia ...
Visual Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
the portion of the viewport that is currently visible is called the visual viewport. this can be smaller than the layout viewport, such as when the user has pinched-zoomed. the visual viewport is the visual portion of a screen excluding on-screen
keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page. learn more general knowledge visual viewport api viewport on wikipedia a tale of two viewports (quirksmode) viewport in the mdn glossary layout viewport in the mdn glossary ...
Assessment: Accessibility troubleshooting - Learn web development
needed by sighted users. how can you add a label that is only accessible to screenreaders? the two <input> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? note that you'll need to update some of the css rule as well. the show/hide comment control the show/hide comment control button is not current
keyboard-accessible. can you make it
keyboard accessible, both in terms of focusing it using the tab
key, and activating it using the return
key? the table the data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. can you add some features to your html t...
Test your skills: CSS and JavaScript accessibility - Learn web development
cessibility 1 in our final task here, you have some javascripting to do. we have a simple app that presents a list of animal names. clicking one of the animal names causes a further description of that animal to appear in a box below the list. but it is not very accessible — in its current state you can only operate it with the mouse. we'd like you to add to the html and javascript to make it
keyboard acessible too. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code ...
Test your skills: WAI-ARIA - Learn web development
ask to work in your own editor or in an online editor. wai-aria 3 for this final wai-aria task, we return to an example we previously saw in the css and javascript skilltest. as before, we have a simple app that presents a list of animal names. clicking one of the animal names causes a further description of that animal to appear in a box below the list. here, we are starting with a mouse- and
keyboard-accessible version. the problem we have now is that when the dom changes to show a new decription, screenreaders cannot see what has changed. can you update it so that description changes are annouced by the screenreader? download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter...
Accessibility - Learn web development
t topics), cross browser testing, and some tips on enforcing accessibility from the start. we'll cover accessibility in special detail. overview when someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments. sites should be accessible to
keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like alexa and google home. applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities. sites should also not cause harm: web features like motion can cause migraines or epileptic seizures. by default, html ...
Advanced styling effects - Learn web development
4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you could use it in any way you want, for example to create a more realistic look with shadows based on multiple light sources. other box shadow features unlike text-shadow, box-shadow has an inset
keyword available — putting this at the start of a shadow declaration causes it to become an inner shadow, rather than an outer shadow. let's have a look and see what we mean. first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradie...
Images, media, and form elements - Learn web development
have to do something like following: img { width: 100%; height: 100%; } this would however stretch the image, so probably isn't what you'd want to do. form elements form elements can be a tricky issue when it comes to styling with css, and the web forms module contains detailed guides to the trickier aspects of styling form elements, which i will not fully reproduce here. there are a few
key basics worth highlighting in this section of the article. many form controls are added to your page by way of the <input> element — 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...
Overflowing content - Learn web development
ak or overflow-wrap properties. in addition, some of the methods discussed in sizing items in css may help you create boxes that scale better with varying amounts of content. as with scroll, you get a scrollbar in the scrolling dimension whether or not there is enough content to cause a scrollbar. note: you can specify x and y scrolling using the overflow property, passing two values. if two
keywords are specified, the first applies to overflow-x and the second applies to overflow-y. otherwise, both overflow-x and overflow-y are set to the same value. for example, overflow: scroll hidden would set overflow-x to scroll and overflow-y to hidden. if you only want scrollbars to appear when there is more content than can fit in the box, use overflow: auto. this allows the browser to determi...
Sizing items in CSS - Learn web development
t of the content below the viewport, meaning that it will only appear once the document is scrolled. 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: sizing. summary this lesson has given you a rundown of some
key issues that you might run into when sizing things on the web. when you move onto css layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on. previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selector...
Styling tables - Learn web development
le { background-color: #ff33cc; } earlier on you saw the :nth-child selector being used to select specific child elements. it can also be given a formula as a parameter, so it will select a sequence of elements. the formula 2n-1 would select all the odd numbered children (1, 3, 5, etc.) and the formula 2n would select all the even numbered children (2, 4, 6, etc.) we've used the odd and even
keywords in our code, which do exactly the same things as the aforementioned formulae. in this case we are giving the odd and even rows different (lurid) colors. we've also added a repeating background tile to all the body rows, which is just a bit of noise (a semi-transparent .png with a bit of visual distortion on it) to provide some texture. lastly, we've given the entire table a solid backgroun...
CSS building blocks - Learn web development
-grained precision when selecting elements to style. in this article and its sub-articles, we'll run through the different types in great detail, seeing how they work. the sub-articles are as follows: type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model everything in css has a box around it, and understanding these boxes is
key to being able to create layouts with css, or to align items with other items. in this lesson, we will take a proper look at the css box model, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it. backgrounds and borders in this lesson we will take a look at some of the creative things you can do with css backgrou...
Grids - Learn web development
e row. as many columns as will fit we can combine some of the things we have learned about track listing, repeat notation and minmax() to create a useful pattern. sometimes it is helpful to be able to ask grid to create as many columns as will fit into the container. we do this by setting the value of grid-template-columns using repeat() notation, but instead of passing in a number, pass in the
keyword auto-fill. for the second parameter of the function we use minmax(), with a minimum value equal to the minimum track size that we would like to have, and a maximum of 1fr. try this in your file now, using the below css: as many columns as will fit body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-rad...
Positioning - Learn web development
the z-axis — it doesn't work like that. higher values will go above lower values, and it is up to you what values you use. using 2 and 3 would give the same effect as 300 and 40000. note: you can see the example at this point live at 5_z-index.html (see source code). fixed positioning let's now look at fixed positioning. this works in exactly the same way as absolute positioning, with one
key difference: whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor (the initial containing block if there isn't one), fixed positioning usually fixes an element in place relative to the visible portion of the viewport, except if one of its ascendants is a fixed containing block due to its transform property being different from none. this means that you...
Practical positioning examples - Learn web development
hat it doesn't interfere with the remainder of the layout. .info-box .panels { height: 352px; position: relative; clear: both; } finally for this section, we will style the individual <article> elements that comprise our panels. the first rule we'll add will absolutely position the panels, and make them all sit flush to the top and left of their <div> container — this part is absolutely
key to this whole layout feature, as it makes the panels sit on top of one another. the rule also gives the panels the same set height as the container, and gives the content some padding, a text color, and a background-color. the second rule we'll add here makes it so that a panel with a class of active-panel set on it will have a z-index of 1 applied to it, which will make it sit above the other p...
Responsive design - Learn web development
s. using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger. this enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixellated if the column becomes wider than the image. the third
key component was the media query. media queries enable the type of layout switch that cameron adams had previously explored using javascript, using only css. rather than having one layout for all screen sizes, the layout could be changed. sidebars could be repositioned for the smaller screen, or alternate navigation could be displayed. it is important to understand that responsive web design isn't...
CSS layout - Learn web development
. it is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it. beginner's guide to media queries the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". media queries are a
key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. in this lesson you will first learn about the syntax used in media queries, and then move on to use them in a work...
CSS first steps - Learn web development
in or glitch. guides this module contains the following articles, which will take you through all the basic theory of css, and provide opportunities for you to test out some skills. what is css? css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood? this article explains what css is, with a simple syntax example, and also covers some
key terms about the language. getting started with css in this article we will take a simple html document and apply css to it, learning some practical things about the language along the way. how css is structured now that you have an idea about what css is and the basics of using it, it is time to look a little deeper into the structure of the language itself. we have already met many of the co...
CSS FAQ - Learn web development
shorter stylesheets, rather than having to write out the same styling information in multiple rules that use id selectors. shorter stylesheets are more performant. class selectors have lower specificity than id selectors, so are easier to override if needed. note: see selectors for more information. how do i restore the default value of a property? initially css didn't provide a "default"
keyword and the only way to restore the default value of a property is to explicitly re-declare that property. for example: /* heading default color is black */ h1 { color: red; } h1 { color: black; } this has changed with css 2; the
keyword initial is now a valid value for a css property. it resets it to its default value, which is defined in the css specification of the given property. /* headin...
Fundamental text and font styling - Learn web development
e (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you'll rarely use any of them except for normal and bold: normal, bold: normal and bold font weight lighter, bolder: sets the current element's boldness to be one step lighter or heavier than its parent element's boldness. 100–900: numeric boldness values that provide finer grained control than the above
keywords, if needed. text-transform: allows you to set your font to be transformed. values include: none: prevents any transformation. uppercase: transforms all text to capitals. lowercase: transforms all text to lower case. capitalize: transforms all words to have the first letter capitalized. full-width: transforms all glyphs to be written inside a fixed-width square, simil...
What text editors are available? - Learn web development
works great for writing notes to yourself, but when you're doing web development and writing in html, css, and javascript, you can produce some pretty large, complex files. make it easier on yourself by choosing a text editor that understands the technologies you're working with. many text editors help you out with features like: syntax highlighting. make your file more legible by color-coding
keywords based on the technology you're using. code completion. save you time by auto-completing recurring structures (for example, automatically close html tags, or suggesting valid values for a given css property). code snippets. as you saw when starting a new html document, many technologies use the same document structure over and over. save yourself the hassle of retyping all this by using a c...
How do you make sure your website works properly? - Learn web development
ctrl+c sends an “interrupt” signal to the runtime and tells it to stop. if you don't stop the runtime, ping will ping the server indefinitely. a simple checklist check for 404s make sure all webpages are behaving as you expect check your website in several browsers to make sure it renders consistently next steps congratulations, your website is up and running...
What HTML features promote accessibility? - Learn web development
to “there”. link titles if you have a link that isn’t self-descriptive, or the link destination could benefit from being explained in more detail, you can add information to a link using the title attribute. <p>i'm really bad at writing link text. <a href="inept.html" title="why i'm rubbish at writing link text: an explanation and an apology.">click here</a> to find out more.</p> access
keys access
keys provide easier navigation by assigning a
keyboard shortcut to a link, which will usually gain focus when the user presses alt or ctrl + the access
key. the exact
key combination varies by platform. <a href="somepage.html" access
key="s">some page</a> skip links to aid tabbing, you can supply links that allow users to jump over chunks of your web page. you might want to allow someo...
How do I use GitHub Pages? - Learn web development
mands to do things like create files and run programs, rather than clicking inside a user interface. it will look something like this: note: you could also consider using a git graphical user interface to do the same work, if you feel uncomfortable with the command line. every operating system comes with a command line tool: windows: command prompt can be accessed by pressing the windows
key, typing command prompt, and choosing it from the list that appears. note that windows has its own command conventions differing from linux and os x, so the commands below may vary on your machine. os x: terminal can be found in applications > utilities. linux: usually you can pull up a terminal with ctrl + alt + t. if that doesn't work, look for terminal in an app bar or menu. this may seem a...
What are hyperlinks? - Learn web development
gs easier, but it's hard to type a long url whenever you want to access a document. this is where hyperlinks revolutionized everything. links can correlate any text string with a url, such that the user can instantly reach the target document by activating the link. links stand out from the surrounding text by being underlined and in blue text. tap or click a link to activate it, or if you use a
keyboard, press tab until the link is in focus and hit enter or spacebar. links are the breakthrough that made the web so useful and successful. in the rest of this article, we discuss the various types of links and their importance to modern web design. deeper dive as we said, a link is a text string tied to a url, and we use links to allow easy jumping from one document to another. that said, ...
What is a Domain Name? - Learn web development
they provide a human-readable address for any web server available on the internet. any internet-connected computer can be reached through a public ip address, either an ipv4 address (e.g. 173.194.121.32) or an ipv6 address (e.g., 2027:0da8:8b73:0000:0000:8a2e:0370:1337). ...
What is a web server? - Learn web development
ning) excusing downtime and systems troubles, a dedicated web server is always connected to the internet. a dedicated web server can have the same ip address all the time. this is known as a dedicated ip address. (not all isps provide a fixed ip address for home lines) a dedicated web server is typically maintained by a third-party. for all these reasons, finding a good hosting provider is a
key part of building your website. examine the various services companies offer. choose one that fits your needs and budget. (services range from free to thousands of dollars per month.) you can find more details in this article. once you have web hosting service, you must upload your files to your web server. communicating through http second, a web server provides support for http (hypertext tra...
Common questions - Learn web development
in this article we describe various web-related concepts: webpages, websites, web servers, and search engines. these terms are often a source of confusion for newcomers to the web, or are used incorrectly. let's discover what they actually mean! what are hyperlinks? in this article, we'll go over what hyperlinks are and why they matter. what is a url? with hypertext and http, url is a
key concept when it comes to the internet. it is the mechanism used by browsers to retrieve any published resource on the web. what is a domain name? domain names are a
key component of the internet infrastructure. they provide a human-readable address for any web server available on the internet. what is a web server? the term "web server" can refer to the hardware or software that serve...
Advanced form styling - Learn web development
or build your own. note: it is worth mentioning <input type="number"> here too — this also has a spinner that you can use to increment/decrement values, so potentially suffers from the same problem. however, in the case of the number type the data being collected is simpler, and it is easy to just use a text input type instead if desired (or tel if you want mobile browsers to show the numeric
keypad). range input types <input type="range"> is annoying to style. you can use something like the following to remove the default slider track completely and replace it with a custom style (a thin red track, in this case): input[type="range"] { appearance: none; -webkit-appearance: none; background: red; height: 2px; padding: 0; outline: 1px solid transparent; } however, it is ver...
Basic native form controls - Learn web development
<input type="image" alt="click me!" src="my-img.png" width="80" height="30"> if the image button is used to submit the form, this control doesn't submit its value — instead, the x and y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate (0, 0)). the coordinates are sent as two
key/value pairs: the x value
key is the value of the name attribute followed by the string ".x". the y value
key is the value of the name attribute followed by the string ".y". so for example when you click on the image at coordinate (123, 456) and it submits via the get method, you'll see the values appended to the url as follows: http://foo.com?pos.x=123&pos.y=456 this is a very convenient ...
Client-side form validation - Learn web development
e="email">, which is required, and has a minlength of 8 characters. let's check these using our own code, and show a custom error message for each one. we are aiming to show the error messages inside a <span> element. the aria-live attribute is set on that <span> to make sure that our custom error message will be presented to everyone, including it being read out to screenreader users. note: a
key point here is that setting the novalidate attribute on the form is what stops the form from showing its own error message bubbles, and allows us to instead display the custom error messages in the dom in some manner of our own choosing. now onto some basic css to improve the look of the form slightly, and provide some visual feedback when the input data is invalid: body { font: 1em sans-seri...
Example 3 - Learn web development
on () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, false); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('
keyup', function (event) { if (event.
keycode === 27) { deactivateselect(select); } }); }); }); result ...
Example 4 - Learn web development
optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('
keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.
keycode === 27) { deactivateselect(select); } if (event.
keycode === 40 && index < length - 1) { index++; } if (event.
keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
Example 5 - Learn web development
, function (event) { updatevalue(select, index); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('
keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.
keycode === 27) { deactivateselect(select); } if (event.
keycode === 40 && index < length - 1) { index++; } if (event.
keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
How to structure a web form - Learn web development
t. there are other use cases, and in general the <fieldset> element can also be used to section a form. ideally, long forms should be spread across multiple pages, but if a form is getting long and must be on a single page, putting the different related sections inside different fieldsets improves usability. because of its influence over assistive technology, the <fieldset> element is one of the
key elements for building accessible forms; however it is your responsibility not to abuse it. if possible, each time you build a form, try to listen to how a screen reader interprets it. if it sounds odd, try to improve the form structure. the <label> element as we saw in the previous article, the <label> element is the formal way to define a label for an html form widget. this is the most importa...
Sending form data - Learn web development
g it in the url bar, which would be very insecure. if you need to send a large amount of data, the post method is preferred because some browsers limit the sizes of urls. in addition, many servers limit the length of urls they accept. on the server side: retrieving the data whichever http method you choose, the server receives a string that will be parsed in order to get the data as a list of
key/value pairs. the way you access this list depends on the development platform you use and on any specific frameworks you may be using with it. example: raw php php offers some global objects to access the data. assuming you've used the post method, the following example just takes the data and displays it to the user. of course, what you do with the data is up to you. you might display it, stor...
The web and web standards - Learn web development
uld work in the best way to fulfill all of their use cases. the w3c is the best known web standards body, but there are others such as the whatwg (who were responsible for the modernization of the html language), ecma (who publish the standard for ecmascript, which javascript is based on), khronos (who publish technologies for 3d graphics, such as webgl), and others. "open" standards one of the
key aspects of web standards, which timbl and the w3c agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written. because web technologies are created openly,...
Use JavaScript within a webpage - Learn web development
ctices for adding javascript: make all content available as (structured) text. rely on html for your content as much as possible. for example, if you've implemented a nice javascript progress bar, make sure to supplement it with matching text percentages inside the html. likewise, your drop-down menus should be structured as unordered lists of links. make all functionality accessible from the
keyboard. let users tab through all controls (e.g., links and form input) in a logical order. if you use pointer events (like mouse events or touch events), duplicate the functionality with
keyboard events. test your site using a
keyboard only. don't set nor even guess time limits. it takes extra time to navigate with the
keyboard or hear content read out. you can hardly ever predic...
Debugging HTML - Learn web development
quote string". if you look at the listing, you can probably see how println!(hello, world!"); might logically be missing a double quote. however, error messages can quickly get more complicated and less easy to interpret as programs get bigger, and even simple cases can look a little intimidating to someone who doesn't know anything about rust. debugging doesn't have to be scary though — the
key to being comfortable with writing and debugging any programming language or code is familiarity with both the language and the tools. html and debugging html is not as complicated to understand as rust. html is not compiled into a different form before the browser parses it and shows the result (it is interpreted, not compiled). and html's element syntax is arguably a lot easier to understand t...
Document and website structure - Learn web development
main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <p>©copyright 2050 by nobody. all rights reversed.</p> </footer> </body> </html> take some time to look over the code and understand it — the comments inside the code should also help you to understand it. we aren't asking you to do much else in this article, because the
key to understanding document layout is writing a sound html structure, and then laying it out with css. we'll wait for this until you start to study css layout as part of the css topic. html layout elements in more detail it's good to understand the overall meaning of all the html sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with ...
Introduction to HTML - Learn web development
ay with some html to get you interested! what’s in the head? metadata in html the head of an html document is the part that is not displayed in the web browser when the page is loaded. it contains information such as the page <title>, links to css (if you want to style your html content with css), links to custom favicons, and metadata (data about the html, such as who wrote it, and important
keywords that describe the document). html text fundamentals one of html's main jobs 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 real...
Graceful asynchronous programming with Promises - Learn web development
of all, the second promise we return is different depending on what the type value is. inside the executor function, we include a simple if ... else if statement to return a different promise depending on what type of file we need to decode (in this case we've got a choice of blob or text, but it would be easy to extend this to deal with other types as well). second, we have added the return
keyword before the fetch() call. the effect this has is to run the entire chain and then run the final result (i.e. the promise returned by blob() or text()) as the return value of the function we've just defined. in effect, the return statements pass the results back up the chain to the top. at the end of the block, we chain on a .catch() call, to handle any error cases that may occ...
Build your own function - Learn web development
s don't. start by accessing the function-start.html file and making a local copy. you'll see that the html is simple — the body contains just a single button. we've also provided some basic css to style the custom message box, and an empty <script> element to put our javascript in. next, add the following inside the <script> element: function displaymessage() { } we start off with the
keyword function, which means we are defining a function. this is followed by the name we want to give to our function, a set of parentheses, and a set of curly braces. any parameters we want to give to our function go inside the parentheses, and the code that runs when we call the function goes inside the curly braces. finally, add the following code inside the curly braces: const html = document...
Function return values - Learn web development
of some kind. you want to get to a final result, which involves some values that need to be calculated by a function. after the function calculates the value, it can return the result so it can be stored in a variable; and you can use this variable in the next stage of the calculation. using return values in your own functions to return a value from a custom function, you need to use the return
keyword. we saw this in action recently in our random-canvas-circles.html example. our draw() function draws 100 random circles somewhere on an html <canvas>: function draw() { ctx.clearrect(0, 0, width, height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); }...
Test your skills: Events - Learn web development
create a simple event handler that causes the text inside the button (btn) to change when it is clicked on, and change back when it is clicked again. the html should not be changed; just the javascript. 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. events 2 now we'll look at
keyboard events. to pass this assessment you need to build an event handler that moves the circle around the provided canvas when the wasd
keys are pressed on the
keyboard. the circle is drawn with the function drawcircle(), which takes the folllowing parameters as inputs: x — the x coordinate of the circle. y — the y coordinate of the circle. size — the radius of the circle. try updatin...
JavaScript building blocks - Learn web development
you've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have some familiarity with the basics of html and css, and you should have also worked through our previous module, javascript first steps. ...
Introduction to web APIs - Learn web development
ctions that you can attach to your web page to speed up or enable writing common functionality. examples include jquery, mootools and react. javascript frameworks — the next step up from libraries, javascript frameworks (e.g. angular and ember) tend to be packages of html, css, javascript, and other technologies that you install and then use to write an entire web application from scratch. the
key difference between a library and a framework is “inversion of control”. when calling a method from a library, the developer is in control. with a framework, the control is inverted: the framework calls the developer's code. what can apis do? there are a huge number of apis available in modern browsers that allow you to do a wide variety of things in your code. you can see this by taking a ...
Video and Audio APIs - Learn web development
enables the default set of playback controls. if you don't specify this, you get no playback controls: this is not as immediately useful for video playback, but it does have advantages. one big issue with the native browser controls is that they are different in each browser — not very good for cross-browser support! another big issue is that the native controls in most browsers aren't very
keyboard-accessible. you can solve both these problems by hiding the native controls (by removing the controls attribute), and programming your own with html, css, and javascript. in the next section we'll look at the basic tools we have available to do this. the htmlmediaelement api part of the html5 spec, the htmlmediaelement api provides features to allow you to control video and audio players ...
JavaScript object basics - Learn web development
operty to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name. what is "this"? you may have noticed something slightly strange in our methods. look at this one for example: greeting: function() { alert('hi! i\'m ' + this.name.first + '.'); } you are probably wondering what "this" is. the this
keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. so why not just write person instead? as you'll see in the object-oriented javascript for beginners article, when we start creating constructors and so on, this is very useful — it always ensures that the correct values are used when a member's context changes (for example, two di...
JavaScript — Dynamic client-side scripting - Learn web development
les this topic contains the following modules, in a suggested order for working through them. javascript first steps in our first javascript module, we first answer some fundamental questions such as "what is javascript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript. after that, we discuss some
key javascript features in detail, such as variables, strings, numbers and arrays. javascript building blocks in this module, we continue our coverage of all javascript's
key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. you've seen this stuff already in the course, but only in passing — here w...
HTML performance features - Learn web development
previous overview: performance next 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 when a webpage is not optimized for mobile devices. this module intends to walk you through the
key html performance features that can drastically improve the quality of your webpage. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the impact of html elements and attributes on web performance optimization. elements & attributes impacting performance the <picture> element th...
Perceived performance - Learn web development
ing is laggy when they take more than 50ms to react. they feel that a page is janky when content repaints slower than 16.67ms (or 60 frames per second) or repaints at uneven intervals. make things like type-ahead a progressive enhancement: use css to display input modal, js to add typeahead/autocomplete as it is available make task initiators appear more interactive making a content request on
keydown rather than waiting for
keyup can shave 200ms off the perceived load of the content. adding an interesting but unobtrusive 200ms animation to that
keyup even can reduce another 200ms of the perceived load. you're not saving 400ms of time, but the user doesn't feel like they're waiting for content until, well, until they're waiting for content. conclusion by turning as much of the download, ...
The business case for web performance - Learn web development
ng and promoting a budget helps performance proponent advocates for good user experience against competing interests, such as marketing, sales, or even other developers that may want to add videos, 3rd party scripts, or even frameworks. performance budgets help developer teams protect optimal performane for users while enabling the business to tap into new markets and deliver custom experiences.
key performance indicators setting
key performance indicators (kpi) as objectives can hiltie performance objectives that are also business objectives. kpis can be both a set of important business metrics in measuring the impact of user experience and performance on the business's top line, and a way of demonstrating the benefits of prioritizing performance. here are some kpis to consider: convers...
Client-Server Overview - Learn web development
) separating each pair. url parameters are inherently "insecure" as they can be changed by users and then resubmitted. as a result url parameters/get requests are not used for requests that update data on the server. post data. post requests add new resources, the data for which is encoded within the request body. client-side cookies. cookies contain session data about the client, including
keys that the server can use to determine their login status and permissions/accesses to resources. 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 contains an http response status code indicating whether or not the request succeeded (e.g. "200 ok" for success, "404 not found" if the resource ...
Introduction to the server side - Learn web development
t can also more easily be shared and updated with other business systems (for example, when products are sold either online or in a shop, the shop might update its database of inventory). note: your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information: go to amazon or some other e-commerce site. search for a number of
keywords and note how the page structure doesn't change, even though the results do. open two or three different products. note again how they have a common structure and layout, but the content for different products has been pulled from the database. for a common search term ("fish", say) you can see literally millions of returned values. using a database allows these to be stored and shared ef...
Server-side web frameworks - Learn web development
for example, database access and support for users and sessions are provided through independent libraries). there are many excellent independent components, but sometimes it can be hard to work out which is the best for a particular purpose! many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on express, including feathers, itemsapi,
keystonejs, kraken, loopback, mean, and sails. a lot of high profile companies use express, including: uber, accenture, ibm, etc. (a list is provided here). deno (javascript) deno is a simple, modern, and secure javascript/typescript runtime and framework built on top of chrome v8 and rust. deno is powered by tokio — a rust-based asynchronous runtime which lets it serve web pages faster. it als...
Website security - Learn web development
sing it. command injection. command injection attacks allow a malicious user to execute arbitrary system commands on the host operating system. the solution is to sanitize user input before it might be used in system calls. for a comprehensive listing of website security threats see category: web security exploits (wikipedia) and category: attack (open web application security project). a few
key messages almost all of the security exploits in the previous sections are successful when the web application trusts data from the browser. whatever else you do to improve the security of your website, you should sanitize all user-originating data before it is displayed in the browser, used in sql queries, or passed to an operating system or file system call. important: the single most importa...
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
fn allows for partial application, which is similar to bind, but it never changes the invocation context; this is equivalent to using bind with a null first argument. try restarting the dev server and going to localhost:4200 again, and you'll now see that we have a fully-operational battlestation “todos left” counter and clear button: if you're asking yourself why we're ...
Introduction to client-side frameworks - Learn web development
llow you to write code that describes how your ui should look, and the framework makes it happen in the dom behind the scenes. the vanilla javascript approach to building out new dom elements in repetition was difficult to understand at a glance. by contrast, the following block of code illustrates the way you might use vue to describe our list of tasks: <ul> <li v-for="task in tasks" v-bind:
key="task.id"> <span>{{task.name}}</span> <button type="button">delete</button> </li> </ul> that's it. this snippet reduces approximately thirty-two lines of code down to six lines. if the curly braces and v- attributes here are unfamiliar to you, that's okay; you’ll learn about vue-specific syntax later on in the module. the thing to take away here is that this code looks like the ui it...
Beginning our React todo list - Learn web development
ur todo list case study, and get the basic app structure and styling in place. our app's user stories in software development, a user story is an actionable goal from the perspective of the user. defining user stories before we begin our work will help us focus our work. our app should fulfill the following stories: as a user, i can read a list of tasks. add a task using the mouse or
keyboard. mark any task as completed, using the mouse or
keyboard. delete any task, using the mouse or
keyboard. edit any task, using the mouse or
keyboard. view a specific subset of tasks: all tasks, only the active task, or only the completed tasks. we'll tackle these stories one-by-one. pre-project housekeeping create-react-app has made a few files we won't be using at all for our project.
Deployment and next steps - Learn web development
y # go into your project's root directory git init git remote add origin https://gitlab.com/[your-user]/mdn-svelte-todo.git git add . git commit -m "initial commit" git push -u origin master note: you could use the git protocol instead of https, which is faster and saves you from typing your username and password every time you access your origin repo. to use it you'll have to create an ssh
key pair. your origin url will be like this: git@gitlab.com:[your-user]/mdn-svelte-todo.git. with these instructions we initialize a local git repository, then set our remote origin (where we will push our code to) as our repo on gitlab. next we commit all the files to the local git repo, and then push those to the remote origin on gitlab. gitlab uses a built-in tool called gitlab ci/cd to bu...
Using Vue computed properties - Learn web development
late; we'll add this inside an <h2> element, just above our <ul>. we'll also add an id and an aria-labelledby attribute to assign the <h2> contents to be a label for the <ul> element. add the described <h2> and update the <ul> inside your app's template as follows: <h2 id="list-summary">{{listsummary}}</h2> <ul aria-labelledby="list-summary" class="stack-large"> <li v-for="item in todoitems" :
key="item.id"> <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item> </li> </ul> you should now see the list summary in your app, and the total number of items update as you add more todo items! however, if you try checking and unchecking some items, you'll reveal a bug. currently, we're not actually tracking the "done" data in any fashion, so the number of completed it...
Vue conditional rendering: editing existing todos - Learn web development
the edit-cancelled event (which is then listened for inside todoitem.vue, see above). summary this article has been fairly intense, and we covered a lot here. we've now got edit and delete functionality in our app, which is fairly exciting. we are nearing the end of our vue series now. the last bit of functionality to look at is focus management, or put another way, how we can improve our app's
keyboard accessibility. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility ...
Implementing feature detection - Learn web development
supports those features or not. let's look at an example to show how you'd use those properties. first of all, make a local copy of the modernizr-js.html example file. attach the modernizr library to the html using a <script> element, as we have done in previous demos. put it above the existing <script> element, which is attaching the google maps api to the page. next, fill in the your-api-
key placeholder text in the second <script> element (as it is now) with a valid google maps api
key. to get a
key, sign in to a google account, go to the get a
key/authentication page, then click the blue get a
key button and follow the instructions. finally, add another <script> element at the bottom of the html body (just before the </body> tag), and put the following script inside the tags: if ...
Handling common JavaScript problems - Learn web development
the easy way to get around this situation is to create a new version of the objects that are prefixed in some browsers, and make it equal to the non-prefixed version, or the prefixed version (or any other prefixed versions that need consideration) — whichever one...
Package management basics - Learn web development
sion number for the app: again, just press return to accept the default 1.0.0. description: a quick description of the app's purpose. type in something really simple, like "a simple npm package to learn about using npm", then press return. entry point: this will be the top-level javascript file of the app. the default index.js is fine for now — press return. test command, git repository, and
keywords: press return to leave each of these blank for now. author: the author of the project. type your own name, and press return. license: the license to publish the package under: press return to accept the default for now. press return one more time to accept these settings. go into your parcel-experiment directory and you should now find you've got a package.json file. open it up and it s...
Accessibility Information for Core Gecko Developers
html accessibility dynamic web content is not accessible because it uses vanilla <div>s and <span>s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views. these widgets are often not even
keyboard focusable, and assistive technologies do not understand these widgets. this document shows several interactive desktop-style widgets that are accessible by
keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and formats working group (pfwg) to address the issue of dhtml accessibility. mozilla accessibility architecture this document explains how we implement the cross-platform accessibility layer in mozilla. it contains a class hierararchy and an exp...
Embedding API for Accessibility
setboolpref("browser.accept.timed_events", accepttimedevents); no timer speed setintpref("timer.relative_speed", percent); /* 100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setboolpref("
keyboardnav.allow_cycling", allowcycling); no mouse pointer moves with
keyboard focus setboolpref("
keyboardnav.mouse_follows_
keyboard_focus", mousefollows); /* if this pref is set, the mouse pointer will always be move to the 0,0 pixel of the current
keyboard focus frame */ no browse with ca...
Information for Assistive Technology Vendors
information for assistive technology vendors accessibility features in mozilla & call for testers! mozilla now has enough accessibility support that we're reading for early adopters and testers to start giving it a try. please read this page if you're interested in an alternative accessible browser.
keyboard documentation this lists mozilla's
keyboard docs in a single long document. gecko info for windows accessibility vendors mozilla supports msaa (microsoft active accessibility) in html and in our user interface (based on xul technology). this makes it possible for the vendors of windows accessibility software, such as screen readers, voice dictation packages and screen magnifiers to provide support for mozilla. in addition, we provide some simple interfaces via whic...
ZoomText
're finding. my email address is aaronleventhal@moonset.net. issues for ai squared, from high to low priority docreader and appreader don't respect the structure of the document -- no support for columns. zoomtext text to speech doesn't always echo what it should -- need more details from testers. mozilla issues cannot tab into frames and iframes. cannot customize the sidebar with the
keyboard only. comboboxes report incorrect bounds, causing zoomtext tracking to move to the wrong area of the screen. ...
Index
675 creating an appealing add-on listing add-ons, beginner, guide, webextension, publishing there are two essential steps to getting people to use your add-on: they need to discover your add-on and open the listing page, then the listing page needs to encourage them to click the add to firefox button. the content you add to a listing is therefore vital: from making effective use of
keywords in your descriptions, to get visibility in external search engine results, through having an icon that attracts a user’s attention from a category list, to screenshots that show how useful your add-on is. 676 index add-ons, glossary, guide, index found 689 pages: 677 signing and distributing your add-on add-ons, extensions, webextensions, distribution, p...
Obsolete
keeping for the time being as potential source material for updated docs. ...
Themes
browser theme concepts get an introduction to creating themes for the latest versions of firefox using the amo theme generator use the theme generator to create and submit a new theme to amo lightweight themes lightweight themes have been deprecated and are no longer accepted by amo. only browser themes will be accepted going forward. tools & resources browser theme manifest.json
keys browser extensions theme api discourse forum theme related blog posts archived resources ...
Adding phishing protection data providers
owsing.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 returned by the
keyurl request. optional preferences browser.safebrowsing.provider.idnum.reporturl an url used for reporting when users visit p...
Testopia
(capital t). if you are on windows or another case insensitive file system you should first rename the folder (testopia-old for example) and then unzip the tarball. you can then merge your changes before deleting the old version. api users take note: positional parameters are now deprecated. all params should now be sent in a hash (struct, dict, hashmap or whatever your language of choice calls
key, value pairs). though all attempts have been made to provide continuing support for positional parameters, please be aware that some api calls may fail until you make this change. also, future versions may remove this support completely. as always please backup your installation before attempting to install or upgrade. testopia 2.3 this version supports bugzilla 3.4. the main new features are:...
Bugzilla
documentation about b.m.o. what to do and what not to do in bugzilla tips for how to use bugzilla, as well as things you should avoid. bugzilla etiquette a guide to etiquette; this guide will help you understand how best to conduct yourself on b.m.o. and how using proper manners and civility will help ensure your problem gets solved sooner rather than later. ...
Building Mozilla
in this article, we list documents that will guide you in building firefox or other projects based upon mozilla code. build instructions building on windows with msys building on windows using the msvc toolkit building on fedora core 5 compiling mozilla with mingw compiling mozilla with clang on windows seamon
key building a seamon
key package ...
Choosing the right memory allocator
with nscrt::free allocating memory within plugins there are special memory allocation routines specifically intended for use from plugins, which must not be used from within mozilla itself. see gecko plugin api reference:memory. npn_memalloc npn_memfree npn_memflush javascript api memory allocators there are also routines intended for use within the javascript runtime engine (spidermon
key). this is the /js/ subtree of the source code. also, all consumers of the jsapi must use these routines for allocating memory they plan to pass to the javascript runtime. see jsapi reference for further information. js_malloc() js_realloc() js_free() js_strdup() arena allocators nspr exposes arena allocators that can be used to efficiently allocate lots of small, uniformly sized objects.
Creating MozSearch plugins
html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> let's say the user chooses to use the yahoo! search engine plugin and enters "mozilla" in the search box and presses the enter
key. firefox will use the above search engine description to construct the following search url: http://search.yahoo.com/search?p=mozilla&ei=utf-8&fr=moz2 if the user clicks the magnifying glass icon in the search bar, or chooses the web search option in the tools menu when the search bar isn't visible, the browser will take them to http://search.yahoo.com/, the value of the <searchform> element. ...
Creating a Firefox sidebar
ourself without the sdk. a sample extension to add a web panel is available as a starter.obsolete since gecko 57 if you'd like to have a deeper integration with the browser to offer more complex features, a traditional overlay extension can be an option. the document might be obsolete, though.obsolete since gecko 57 the social api obsolete since gecko 57 (firefox 57 / thunderbird 57 / seamon
key 2.54)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this content covers features introduced in firefox 17. the window.sidebar api obsolete since gecko 23 (firefox 23 / thunderbird 23 / seamon
key 2.20)this feature is obsolete. although it may still work in some browsers, its use is d...
Creating a Login Manager storage module
ny secondary replacements of kdewallet. if you just want to use the login manager in your extensions, refer to the article using nsiloginmanager. overriding the built-in login manager storage consists of two tasks: implement the nsiloginmanagerstorage interface. register that interface in a specific category. some work has already been done to integrate the login manager with the mac os x
keychain (bug 106400) and gnome
keyring manager (bug 309807). you should start with the existing code if you want to implement that in your extension. to see some debugging output in the console set signon.debug to true using about:config. sample javascript implementation the following code snippet is a javascript component that implements a dummy nsiloginmanagerstorage interface. see how_to_build...
Creating a spell check dictionary add-on
n> <em:maxversion>46.0</em:maxversion> </description> </em:targetapplication> <!-- thunderbird --> <em:targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>22.0</em:maxversion> </description> </em:targetapplication> <!-- seamon
key --> <em:targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.15a1</em:minversion> <em:maxversion>2.49</em:maxversion> </description> </em:targetapplication> </description> </rdf> there are some rules about how you should adapt the install.rdf file: if you are creating a new dictionary add...
Debugging Internet Explorer
to run internet explorer in a single process add a dword registry value to h
key_current_user\software\microsoft\internet explorer\main called tabprocgrowth and set it to 0. edgehtml lets you extract various debugging dumps through a special webdriver ms/dumpinternal url. use jrmuizel's script to get started. ...
Debugging JavaScript
x via the following command to have a native console : firefox.exe -console using normal javascript object inspection, you can write a function that dumps a whole object, similar to this ddumpobject(). log.jsm (formerly log4moz) this is a partial implementation of the log4* interfaces (for example, see log4j or log4net). components.utils.import("resource://gre/modules/log.jsm"); "debugger"
keyword you can halt venkman or chromebug at a line using the
keyword debugger. in debug builds this also dumps a stack trace to the console, even when the debugger is not running. in extensions you can print the callstack using components.stack like this: function getstackdump() { var lines = []; for (var frame = components.stack; frame; frame = frame.caller) { lines.push(frame.filename + ...
Debugging on Mac OS X
if you want to debug from the terminal see debugging mozilla with lldb. for specific information on a way to debug hangs, see debugging a hang on os x. creating a debuggable build first, you need to build the application you're going to debug using --disable-optimize--enable-debug-symbols in your .mozconfig (also add --enable-debug if you want assertions etc. compiled in). see building firefox for macos if you need help creating your own build. ...
Debugging on Windows
if vc++ and your mozilla application hang shortly after you launch the application under the debugger, see problems loading debug symbols. ways to start the debugger first of all, it's necessary to install a visual studio extension to be able to follow child processes as they are created. firefox, in general, and even in non-e10s mode, does not start the main process directly, it starts it via a launcher process. ...
Adding APIs to the navigator object
simply add an entry to the "javascript-navigator-property" category. the object must be implemented as an xpcom component. each method below of adding new objects to the navigator object requires that the new object is a registered xpcom component. you can read about creating and registering xpcom components in javascript. ...
Configuring Build Options
choose an application the --enable-application=application flag is used to select an application to build. firefox is the default. choose one of the following options to add to your mozconfig file: browser (firefox) ac_add_options --enable-application=browser note: this is the default mail (thunderbird) ac_add_options --enable-application=comm/mail mozilla suite (seamon
key) ac_add_options --enable-application=suite calendar (lightning extension, uses thunderbird) ac_add_options --enable-application=comm/mail ac_add_options --enable-calendar selecting build options the build options you choose depends on what application you are building and what you will be using the build for. if you want to use the build regularly, you will want a release build wi...
How Mozilla's build system works
= ../../.. topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk module = layout library_name = gkbase_s # requires and cppsrcs omitted here for brevity # # we don't want the shared lib, but we want to force the creation of a static lib. force_static_lib = 1 include $(topsrcdir)/config/rules.mk the
key here is setting force_static_lib = 1. this creates libgkbase_s.a (on unix) and gkbase_s.lib on windows and copies it to dist/lib. now, let's take a look at how to link several static libraries together to create a component: depth = ../.. topsrcdir = @top_srcdir@ srcdir = @srcdir@ vpath = @srcdir@ include $(depth)/config/autoconf.mk module = la...
Creating Custom Events That Can Pass Data
this page describes how to implement custom dom events that can be used to pass data. using this technique you can add extra parameters and query them. for example, if you want firefox to perform an action whenever something happens (i.e., something other than the standard mouse/
keyboard events) and, depending on the data passed along with this event, you want firefox to react differently. note that starting with version 6, firefox supports dom level 3 customevent, which lets you dispatch custom events with arbitrary data from javascript. (see bug 427537) requirements in order to do this you must be able to do all of the following: download mozilla source code build mozilla creating custom firefox extensions with the mozilla build system. this is the foundation for everything we'll d...
Interface development guide
the articles linked from this page offer guidelines for developing and using these interfaces. documentation xpidl the xpcom interface description language is used to specify xpcom interface classes. idl interface rules design guidelines and rules when creating and changing xpcom interfaces. ...
Developer guide
ontributor. documentation topics getting started a step-by-step beginner's guide to getting involved with mozilla. for new mozilla developers a directory of articles which are particularly helpful for new mozilla developers. working with mozilla source code a code overview, how to get the code, and the coding style guide. build instructions how to build firefox, thunderbird, seamon
key, or other mozilla applications. development process overview an overview of the entire mozilla development process. managing multiple profiles when working with prerelease versions of firefox, it's often helpful to have multiple firefox profiles, such as one for each channel, or for different kinds of testing. getting documentation updated how to ensure that documentation is kept up to date...
Error codes returned by Mozilla APIs
ncorrect, for example returning a plain html document advertised as content-encoding: gzip ns_error_ftp_list (0x804b001c) ns_error_unknown_host (0x804b001e) ns_error_redirect_loop (0x804b001f) ns_error_entity_changed (0x804b0020) ns_error_unknown_proxy_host (0x804b002a) ns_error_unknown_socket_type (0x804b0033) ns_error_socket_create_failed (0x804b0034) ns_error_cache_
key_not_found (0x804b003d) ns_error_cache_data_is_stream (0x804b003e) ns_error_cache_data_is_not_stream (0x804b003f) ns_error_cache_wait_for_validation (0x804b0040) ns_error_cache_entry_doomed (0x804b0041) ns_error_cache_read_access_denied (0x804b0042) ns_error_cache_write_access_denied (0x804b0043) ns_error_cache_in_use (0x804b0044) ns_error_document_not_cached (0x804...
Experimental features in Firefox
when tabbing between elements), and not when they are focused using a mouse or other pointing device. see bug 1617600 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.focus-visible.enable...
Multiple Firefox profiles
find the profile you want to use. press the “launch profile in new browser” button next to it. windows windows xp click the start button. click "run". type firefox --new-instance--profilemanager. windows vista/7 click the start button. click the search bar at the bottom. type firefox --new-instance --profilemanager. windows 8/8.1/10 press "windows + r" on your
keyboard. type firefox --new-instance --profilemanager. linux if firefox is already included in your linux distribution, or if you have installed firefox with the package manager of your linux distribution: open a terminal emulator or your shell’s command prompt: alt-f2 if you use gnome shell or kde plasma, consult your desktop environment documentation for other environments. ...
Performance
the more expensive they are to execute the longer it will take for the browser to become responsive after startup. frame scripts also get executed on non-restored tabs. all their overhead is thus not just incurred by active tabs but by the total number of tabs in a session. ...
Performance best practices for Firefox front-end engineers
in thread should be treated as deprecated. avoid doing it. instead, animate using element.animate(). see the article animating like you just don't care for more information on how to do this. explicitly define start and end animation values some optimizations in the animation code of gecko are based on an expectation that the from (0%) and the to (100%) values will be explicitly defined in the @
keyframes definition. even though these values may be inferred through the use of initial values or the cascade, the offscreen animation optimizations are dependent on the explicit definition. see this comment and a few previous comments on that bug for more information. use indexeddb for storage appcache and localstorage are synchronous storage apis that will block the main thread when you use the...
Security best practices for Firefox front-end engineers
sanitize all html fragments that are created for chrome-privileged documents. this policy includes all dom apis that take a string and parse it into a dom tree. we use our built-in sanitizer with the following flags: sanitizerallowstyle sanitizerallowcomments sanitizerdropforms sanitizerlogremovals the sanitizer removes all scripts (script tags, event handlers) and form elements (form, input,
keygen, option, optgroup, select, button, datalist). the canonical truth for the list of whitelisted elements is the source code. the last flag ensures that developers will identify and avoid the problems early on in the development cycle and before shipping the code. linter rules against unsanitized dom interaction the security assurance team maintains an eslint rule that disallows unsafe uses ...
mozbrowsericonchange
e read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: href a domstring representing the path to the new icon. sizes a domstring listing the sizes the new icon is available in, e.g. "16x16" or "16x16 32x32". the any
keyword can also be used, to represent "any size." rel a domstring representing the rel attribute value from the <link> element used to link to the icon. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll m...
HTMLIFrameElement.sendMouseEvent()
to the browser <iframe>'s visible area in css pixels. y a number representing the y position of the cursor relative to the browser <iframe>'s visible area in css pixels. button a number representing which button has been pressed on the mouse: 0 (left button), 1 (middle button), or 2 (right button). clickcount the number of clicks that should be performed. modifiers a number representing a
key pressed at the same time the mouse button was clicked: 1 : alt 2 : ctrl 4 : shift 8 : meta 16 : alt gr 32 : caps lock 64 : fn 128 : num lock 256 : scroll 512 : symbol lock 1024 : win note: you can specify multiple
key modifiers separated by a pipe symbol, for example 1 | 1014. examples var browser = document.queryselector('iframe'); browser.sendmous...
HTMLIFrameElement.sendTouchEvent()
dius of each touch point in css pixels. ry an array of numbers representing the y radius of each touch point in css pixels. rotationangles an array of numbers representing the angle of each touch point in degrees. forces an array of numbers representing the intensity of each touch in the range 0–1. count the number of touches that should be performed. modifiers a number representing a
key pressed at the same time the mouse button was clicked: 1 : alt 2 : ctrl 4 : shift 8 : meta 16 : alt gr 32 : caps lock 64 : fn 128 : num lock 256 : scroll 512 : symbol lock 1024 : win note: you can specify multiple
key modifiers separated by a pipe symbol, for example 1 | 1014. examples var browser = document.queryselector('iframe'); browser.sendtouc...
-moz-window-dragging
itial value drag applies to all elements that create native windows, e.g. <window>, <panel> inherited no media visual computed value as specified animation type discrete canonical order the unique non-ambiguous order defined by the formal grammar syntax the -moz-window-dragging property is specified as one of the
keyword values listed below. values drag the window is draggable. no-drag the window is not draggable formal syntax drag | no-drag example toolbarpaletteitem { -moz-window-dragging: no-drag; } specifications this property is not part of any specification. ...
overflow-clip-box-block
the overflow-clip-box-block css property specifies relative to which box the clipping happens when there is an overflow — in the block direction. /*
keyword values */ overflow-clip-box-block: padding-box; overflow-clip-box-block: content-box; /* global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this
keyword makes the clipping be related to the padding box. content-box this
keyword makes the clipping be related to the content box. formal...
overflow-clip-box-inline
the overflow-clip-box-inline css property specifies relative to which box the clipping happens when there is an overflow — in the inline direction. /*
keyword values */ overflow-clip-box-inline: padding-box; overflow-clip-box-inline: content-box; /* global values */ overflow-clip-box-inline: inherited; overflow-clip-box-inline: initial; overflow-clip-box-inline: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. note that this property is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this
keyword makes the clipping be related to the padding box. content-box this
keyword makes the clipping be related to the content box. ...
HTML parser threading
blocked). external scripts arriving from document.write() block the parser. if there is data in document.write() input after a an external script (or any data at all if a previous document.write() call has contained an external script and blocked the parser), the data is left in a linked list of nshtml5owningutf16buffer objects. (how exactly data is inserted into the buffer list depends on parser
keys when document.write() is invoked re-entrantly, but that's outside the scope of this document, since this document is about parser threading.) whenever the argument of document.write() isn't tokenized to completion synchronously, the part left unprocessed by the main document.write() tokenizer/tree builder is processed by the third tokenizer/tree builder pair. the tree ops from that processing ar...
Gecko
ecko is the name of the layout engine developed by the mozilla project. it was originally named nglayout. gecko's function is to render web content, such as html, css, xul, javascript, and render it on the user's screen or print it. in xul-based applications gecko also renders the application's user interface. gecko is used in many applications, including a few browsers such as firefox and seamon
key (for a complete list, please refer to wikipedia's article on gecko). products using the same version of gecko have identical support for web standards. documentation chrome this page contains information specific to browser chrome (not google chrome) code running in gecko. gecko faq frequently asked questions about gecko. gecko dom referen...
Getting Started with Chat
ple, you can connect using ssl or a non-secure connection, and you can configure the client to automatically connect to a server and join a particular set of channels when you start the client. the following are some other options available to you: windows mac linux colloquy ● irssi ● ● ●* xchat ● ○ ●
key: ● — binary or executable program available ○ — only available by downloading and compiling source code ●* — binary or executable may be available. if not, you'll have to download source code and compile. note: for a complete list of irc clients go here. web-based clients there are also a few web-based clients which allow connecting to irc by clicking on irc:// links. one of t...
How Mozilla determines MIME Types
ed, a list of "extra" mime types is searched for an extension match. see line 507 for the complete list. if that also failed, the list of loaded plugins is checked for a plugin that can handle this extension, and is asked for the mime type if no plugin is registered, the ext-to-type-mapping xpcom category is searched for the extension. this allows extensions to register additional mappings. the
key of the category entry is the extension without leading dot, the value is the mime type. the extension must be lowercase. if no ext-to-type-mapping category is found, the externalhelperappservice returns application/x-extension-ext, where ext is the extension of the file. helper applications a somewhat related issue are the helper applications. when loading an uri with a type that mozilla can ...
How to get a stacktrace for a bug report
t. a stacktrace will tell mozilla developers what crashed and provide a starting point for investigating its cause. this article describes how to use the mozilla crash reporter (breakpad) to get a crash id, which our engineers can use to get a stacktrace, and alternative ways to get a stacktrace if you can't get a crash id. requirements you need a binary build of firefox from mozilla.org. seamon
key and thunderbird also support crash reporting. mozilla's crash report server currently only has debug information for mozilla builds and thus the crash reporter cannot work if you use a build from a linux distribution or if you compile from source code. in these cases you will need to use one of the alternative methods listed below. note: when filing a crash report, it is important to know wheth...
How to get a stacktrace with WinDbg
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 after each one...
Implementing Download Resuming
introduction various protocols support getting partial files. this means that if a download was interrupted, it can be resumed from that point on, rather than regetting the whole file. the necko implementations of http 1.1 (rfc 2616) as well as ftp support this feature. ...
Integrated Authentication
provide spnego; sspi on microsoft windows, and gss-api on linux, mac osx, and other unix-like systems. the mozilla implementation of spnego can be found under extensions/auth/. it used to live in extensions/negotiateauth. mozilla also supports raw ntlm authentication using an internal implementation (based on the documentation provided by eric glass) that supports ntlmv1/lmv1 and ntlm2 session
key modes. as of mozilla 1.7, there is no support for ntlmv2/lmv2. this is mainly due to the fact that ntlmssp does not provide a means to negotiate use of ntlmv2/lmv2. <i>this document is incomplete ...</i> flow diagram the diagram below shows how various components interact. configuration by default, mozilla rejects all spnego challenges from a web server. this is to protect the user from the...
Addon
ile was included in the package. boolean hasresource( in string path ) parameters path a "/" separated path for the resource. getresourceuri() gets an nsiuri to the file resource for this add-on. nsiuri getresourceuri( in string path ) parameters path a "/" separated path for the resource. getdatadirectory() requires gecko 32.0(firefox 32.0 / thunderbird 32.0 / seamon
key 2.29) returns the path of the preferred directory, within the current profile, where an add-on should store data files. if the directory does not already exist, it will be created. void getdatadirectory( in datadirectorycallback callback ) ...
Add-on Manager
hod. finding updates add-ons can be checked for updates using the findupdates() method. it must be passed an updatelistener to receive information about compatibility information and new update information. any available update is returned as an addoninstall which is ready to be downloaded and installed. detecting add-on changes requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) you can also get lists of add-ons that, at startup, were changed in various ways. the getstartupchanges() method lets you find out which add-ons were installed, removed, updated, enabled, or disabled at application startup. for example, to take a look at the add-ons that were disabled at startup: components.utils.import("resource://gre/modules/addonmanager.jsm"); let addonids = addonman...
DeferredTask.jsm
u may have to rewrite data very soon afterwards. with deferredtask, the task is delayed by a few milliseconds and, should a new change to the data occur during this period, only the final version of the data is actually written; a further grace delay is added to take into account other changes. the deferredtask constructor requires gecko 18.0(firefox 18.0 / thunderbird 18.0 / seamon
key 2.15) if you have a function call you want to defer for two seconds, you can do so using the deferredtask constructor, like this: var task = new deferredtask(myfunction, 2000); you can also pass a generator function as the first argument of constructor. method overview bool ispending();obsolete since gecko 28 void start();obsolete since gecko 28 void flush();obs...
Downloads.jsm
ghts: there is no difference between active downloads and finished downloads. the download object can be used without requiring direct database access. observer notifications (for example, "dl-done") and download listeners are replaced by views on the downloadlist object returned by the getlist() method. object identity replaces the use of numeric identifiers. you can use download objects as
keys in a set or map to associate your own state to them for the session. there is no separate count of active downloads. if a count is needed, it should be maintained using a view on a downloadlist. the start() method can be used to restart a failed download. handling of downloads that have been paused is also different. while some of the legacy methods and properties have an equivalent in downl...
Interfacing with the Add-on Repository
lays a notification box offering to install the recommended add-on, if one was found, or reports an error if the search failed: shownotification: function(prompt, button, installobj) { this.install = installobj; var box = popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", prompt, null, /* anchor id */ { label: button, access
key: "i", callback: function() { if (popupnotifications.install) { popupnotifications.install.install(); } else { popupnotifications.remove(box); } } }, null /* secondary action */ ); } the code here starts by stashing the passed-in addoninstall object for later use, then...
Following the Android Toasts Tutorial from a JNI Perspective
n page shows this: there are two columns, the first column is the return, and the second column is the method name and arguments. we see that maketext returns static toast. this means it is a static method. we see that the return column of the show method does not contain the word static. therefore, it is a plain method. let's declare these methods in the third argument of loadclass we add a
key-value pair, with the
key being static_methods and methods and the value being an array. var toast = jni.loadclass(my_jenv, sig.toast.substr(1, sig.toast.length - 2), { static_methods: [ { name: 'maketext', sig: '()' } ], methods: [ { name: 'show', sig: '()' } ] }); the sig of methods is always in the format of "method format" from our types table above. the reas...
JNI.jsm
ended 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, ajavastring ); parameters ajenv the return...
OS.File for the main thread
with os.file.error in case of any error, in particular if the path does not represent an existing file. os.file.setpermissions() sets the file's access permission bits. promise<void> setpermissions( in string path, in object options ) arguments path the complete path to the file. options the new attributes to set winattributes this is an object with following optional
keys. ignored under non-windows platforms. hidden boolean. set to true to make the target hidden, or false to make it visible. readonly boolean. set to true to make the target "read only". system boolean. toggles the "system" attribute, this is equivalent . unixmode number. this is an number can be created with the constants available in os.constants.libc.s_i* or os.constants.libc.s_o*. ignor...
OSFile.jsm
itical because some platforms have extremely slow storage (e.g. smartphones, tablets) and because, regardless of the platforms, doing too much i/o penalizes not just your application but potentially all the applications running on the system, which is quite bad for the user experience. finally, i/o is often expensive in terms of energy, so wasting i/o is wasting battery. consequently, one of the
key design choices of os.file is to provide operations that are low-level enough that they do not hide any i/o from the developer (which could cause the developer to perform more i/o than they think) and, since not all platforms have the same features, offer system-specific information that the developer can use to optimize his algorithms for a platform. using os.file ... from the main thread m...
PopupNotifications.jsm
ns notification action objects describe the user interface for actions associated with the notification. the main action is used to describe the button presented in the notification panel, while secondary actions are displayed in the drop-down menu associated with the button. a notification action object must contain the following properties: label a text label describing the action. access
key a string indicating the
keystroke that will trigger the action. callback a javascript function to be invoked when the action is selected by the user. notification options the notification options object lets you further customize the notification panel. any combination of the following properties may be provided: persistence an integer value indicating the number of page loads for which...
Sqlite.jsm
); // it worked! if (callback) { callback(null, accounts); } note: the then parameters can be anonymous functions (i.e. function() ), and only are labeled as onstatementcomplete and onerror for readability. this example demonstrates retrieving a row without using the onrow function parameter, and instead, using the conn.execute result. this example also demonstrates retrieving the primary
key row id of the last inserted row. async function () { try { conn = await sqlite.openconnection({ path: dbfile.path }); let statement = "insert into accounts (username, details) values (:username, :details)" let params = { username:"lordbusiness", details: "all i'm asking for is total perfection." }; await conn.execute(statement,params); // get accountid of the insert. ...
Using JavaScript code modules
ts.utils.import("resource://app/my_module.jsm"); alert(bar); // displays "[object object]" the main effect of the by-value copy is that global variables of simple types won't be shared across scopes. always put variables in a wrapper class and export the wrapper (such as bar in the above example). unloading code modules requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) components.utils.unload() allows you to unload a previously imported code module. once this method has been called, references to the module will continue to work but any subsequent import of the module will reload it and give a new reference. examples a template to download and edit is seen here on github - gists - _template-bootstrapjsm.xpi extending resource: urls prior to gecko ...
Using workers in JavaScript code modules
you can do so by using chromeworker instead of the standard worker object. it works exactly like a standard worker, except that it has access to js-ctypes via a global ctypes object available in the global scope of the worker obsolete since gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. note: as of gecko 8.0, the nsiworkerfactory interface has been removed starting in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1), you can use workers in javascript code modules (jsms). this lets you run code in a separate thread from your jsm. to create a chromeworker for this purpose, you need to use the nsiworkerfactory ...
XPCOMUtils.jsm
the xpcomutils.jsm javascript code module offers utility routines for javascript components loaded by the javascript component loader. to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/xpcomutils.jsm"); using xpcomutils exposing a javascript class as a component using these utility methods requires four
key steps: import xpcomutils.jsm, as explained previously. 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. constructor the constructo...
JavaScript code modules
bookmarks from the old-school "bookmarks.html" style bookmark files. ctypes.jsm provides an interface that allows javascript code to call native libraries without requiring the development of an xpcom component. customizableui.jsm allows you to interact with customizable buttons and items in firefox's main window ui. deferredtask.jsm run a task after a delay. dict.jsm provides an api for
key/value pair dictionaries. downloadlastdir.jsm supplies the path to the directory into which the last download occurred. downloads.jsm provides a single entry point to interact with the downloading capabilities of the platform. fileutils.jsm provides helpers for dealing with files. geometry.jsm provides routines for performing basic geometric operations on points and rectangles. http.jsm ...
Bootstrapping a new locale
th on your terminal. (you should "cd" to the directory before beginning.) in the terminal, type the following command: $ hg clone http://hg.mozilla.org/releases/mozilla-x.x.x/ where "x.x.x" is the existing release branch version. for instance, for firefox 3.6, we use mozilla-1.9.2. refer to l10n:branches for the list of all branches. if you are interested in localizing thunderbird 3, seamon
key 2 or other mozilla projects based on gecko 1.9.1 you'll need to follow the instructions on getting the source-code of the comm-central repository. create a bare-bones localization next, create a base localization. this is done by cloning the en-us (united states english) files into your localization. first, you should specify your locale's language identifier in ab-cd format, where "ab" is th...
Localization notes
omments are generally referred to as localization notes. there is an established format for those, which is described in this document. it's important to follow the format as closely as possible. there are a number of automated tools that parse these comments for easier access and use by localizers. dtd files <!-- localization note (entity name): comment --> properties files # localization note (
key): comment file-wide comments should use the same format, be at the top of the file (after the license header, though) and just drop the (entity name/
key) reference. ...
Localizing with Koala
now let's create the other file. double-click on search.properties and click "ok" when koala asks if you want to create this file. from the sidebar, add the cmd_addfoundengine string to the newly-created search.properties file in your locale file structure. translate the cmd_addfoundengine string. notice that the .properties files have a different syntax than the dtd files. they're just a simple
key=value mapping. save the file to save your work. re-running the comparison a common scheme of working with the compare-locales tools (included in koala) is to incrementally translate and commit the files and then re-run comparison to see what is left to be translated. to make sure you're always translating the most recent en-us reference, you should update the source repository before you start ...
Patching a Localization
say you have found a problem with an existing localization. more specifically, it's a problem with an already released localization. what do you do now? well, you have come to the right place! this page will walk you through creating a patch for an existing localization. the steps below are fairly generic; for the most part they apply to creating l10n patches for firefox, thunderbird, seamon
key, or calendar. i'll use firefox in the example below to help you understand the general steps to creating a l10n patch. prerequisites if you are to the point that you are patching existing localizations, we assume that you have the basic set of tools listed on the l10n prerequisites wiki page. if you do not have these tools, take a few steps back, grab a cookie (because, let's face it, you deserve...
Localization prerequisites
ld should get you everything you need. tools a recent posix shell python 2.5 or newer. perl 5.6 or higher older perl versions may work if you upgrade file::spec to version 0.8 gnu make 3.79.1 or higher. other varieties of "make" will not work. autoconf-2.13 - autoconf 2.5x will not work. zip 2.3 (or higher) mercurial 1.2 or higher recommended. needed for development of firefox 3.5/seamon
key 2.0/thunderbird 3.0 and later. a text editor. you can try one of these: notepad++ or notepad2 on windows, vim, gedit or kate on gnu/linux, bbedit on mac os x. to verify that they work, open a shell. linux users should know, on the mac, you find terminal in applications/utilities. on windows, mozillabuild offers a start-shell-l10n.bat in c:\mozilla-build. let’s try our entry ...
Translation phase
fox® web browser has security, speed and new features that will change the way you use the web. see the list of the most critical strings for localizing in firefox, as well as a guide to understanding how they're organized. thunderbird enjoy safe, fast and easy email, mozilla-style. the thunderbird® email client includes intelligent spam filters, powerful search and customizable views. seamon
key seamon
key® is the all-in-one application formerly known as the "mozilla application suite", containing a web browser, a mail and newsgroups client, an html editor, web development tools, and an irc chat client. firefox mobile by adding firefox® to your mobile phone, you can access rich web content and enjoy your favorite firefox features wherever you go. lightning lightning is a popular ca...
Localization sign-off reviews
nges this greatly impacts productization. we look for these changes and file bugs when they're found in a new revision. further indications of tool-originated corruption this is common. most bugs filed from sign-offs are caused by a tool corrupting your localization's files. newly translated strings that shouldn't have been translated self-explanatory enough, right? access
key changes we ensure that when access
keys are changed that they are consistent with the
keyboard layout for that particular locale and not blended between two or more distinct layouts. how it all works a large part of the review process takes place before you even submit your request for a sign-off review. to put it simply, when we receive your request, we expect that you have spent time tes...
Localization formats
ctual content that was translated. so, if a localizer wanted to use one of the many powerful gettext tools, like po-editor, the msgid provides no context for translation or for other localizers to verify translations when qa-ing. this should have been avoided. in the case of download day, someone created entity-like identifiers in the msgid, which we have shown above with the "certificate_intro"
key. then, an en-us repository was created holding the translations to all the entity-like values of msgid. this is very non-standard because it avoids one of the obvious powers of gettext. when english content is used as the value of the msgid, there is no need to place that content in a special repository. but, in the download day example, when changes were made to en-us, the web-developer had to ...
What every Mozilla translator should know
if you get the approval you will see who_is_ap:approval1.8.xxx+ now, you can upload the changes approved to the cvs server. when you commit the changes you must write in the comment the bug number, what you have changed and who has approved. for example: bug 12345, fix typos and resize prefwindow, a=l10n as soon as you have committed, put the bug in fixed state and write fixed1.8.xxx in the
keyword field you have to verify in the next build that the changes have been successful. if so, change the state of the bug to verified and write verified1.8.xxx in the
keyword field tinderbox in tinderbox you can see the result of the build process. once you have made some changes in mercurial, as soon as the next build is done you can check the tinderbox and see if something was wrong. l10n...
Extras
/math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 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>...
Fonts for Mozilla's MathML engine
see the authoring mathml page for details and try the mathml torture test. you can use fontforge and fonttools to edit the math table and create your own mathematical fonts. ...
MathML Torture Test
ares the rendering by the xetex engine using the default latin modern math font against the mathml rendering by your browser using the default math font, or an alternative opentype math fonts. to get the best rendering, be sure to have appropriate mathematical fonts installed on your system and to use a browser with opentype math support such as gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamon
key 2.28) or higher. you may also try this test page for mathematical opentype fonts which instead relies on web fonts. finally, you may want to check this table comparing how the tests are read by various screen readers for mozilla browsers. link to test: mathml torture test demo ...
Mozilla MathML Status
ys enabled since bug 660762. cdgroup accepted, but does not have any effect on the rendering. attributes shared by all mathml elements see § 2.1.6 and § 3.1.10. attribute notes id, class, style implemented. xref accepted, but does not have any effect on the rendering. href implemented. the user interface works correctly in seamon
key but not in firefox. see bug 958957. mathcolor implemented. mathbackground implemented. token elements element [- attribute] notes mi implemented. the mathvariant attribute is fully supported starting with (firefox 28.0 / thunderbird 28.0 / seamon
key 2.25). see bug 114365. mn implemented. mo implemented. mo - li...
Mozilla Style System
ties in the same style struct must also be in the same css struct all of the properties in a style struct must be inherited or they must all be non-inherited (see inheritance for an explanation of the difference) the first of these rules is no longer important (in fact, the separation of the specified values into nscss* structs is no longer important). however, the second of these rules is the
key to many of the performance and memory-use optimizations in the style system. most callers who interact with the style system do so using the style structs. the style context has a getter for each struct, and nsiframe, which represents the concept of a css box (or rendering object), also has getters that forward to the frame's style context. thus, typical calling code looks like this: if (afram...
BloatView
yahoo netscape total blank mozilla yahoo netscape total total 1754408 432556 179828 404184 2770976 nsstr 20 6261600 3781900 1120920 1791340 12955760 222760 48760 13280 76160 360960 nshash
key 8 610568 1842400 2457872 1134592 6045432 32000 536 568 1216 34320 nstexttransformer 548 8220 469088 1414936 1532756 3425000 0 0 0 0 0 nsstylecontextdata 736 259808 325312 489440 338560 1413120 141312 220800 -11040 94944 446016 nslinelayout ...
Investigating CSS Performance
two counts are collected which allow for an estimation of the amount of work being done during restyle: resolvestyleforcount this is incremented everytime that we do style resolution on an element contentenumfunccount this is incremented roughly for every rule that we test against time during restyle can be spent in a bunch of places. for example, hasstatedependentstyle will compute a hint that determines how many elements we'll restyle. ...
JS::PerfMeasurement
necessarily the total number of events that a particular os allows you to measure. (at time of writing, linux allows all the above events to be measured, and we don't have back ends for any other operating system. static bool perfmeasurement::canmeasuresomething() this class method returns true if and only if some -- not necessarily all -- events can be measured by the current build of spidermon
key, running on the current os. at present, it returns true on linux when the <linux/perf_event.h> api is available (kernel 2.6.31 or later), and false everywhere else. perfmeasurement::perfmeasurement(eventmask tomeasure) the constructor creates a new profiling object, which measures some subset of the requested events. perfmeasurement::~perfmeasurement() take care not to leak profiling objects, as...
Memory reporting
this is doubly true if d features multiple inheritance. and if amallocsizeof is passed a pointer that doesn't point to the start of an object it will give bogus results or even crash. so, if in doubt, define d::sizeofincludingthis and you should be safe. the override annotations say that d's methods override the corresponding methods in b. on supporting compilers it gets expanded to the override
keyword. it helps prevent accidentally having small differences in the function signatures (e.g. forgetting a const) that prevent the overriding from happening. other considerations a number of the existing basic data structures already have sizeof{in,ex}cludingthis functions, e.g. nstarray and nsthashtable. nsthashtable's functions take an extra argument which is a pointer to a function that meas...
Reporting a Performance Problem
ofile quickly enough after you notice a performance problem. if you choose custom settings (and then clicking edit settings) for the profiler, you can adjust the size of the buffer (presently defaults to 90 mb) and the time interval between data collection (presently defaults to 1 ms). note that increasing the buffer size uses more memory and can make capturing a profile take longer. using the
keyboard shortcuts is often more convenient than using the mouse to interact with the ui: ctrl+shift+1 - start/stop the profiler ctrl+shift+2 - take a profile and launch the viewer to view it capturing and sharing a profile while the profiler is recording, reproduce the performance problem. if possible let the problem manifest itself for 5-10 seconds. press ctrl+shift+2 or click on the prof...
Performance
ns faster because it uses static source code instrumentation. lsan is part of mozilla's continuous integration testing, with most tests running through it as part of the addresssanitizer (a.k.a. asan) test jobs. apple tools apple provides some tools for mac os x that report similar problems to those reported by lsan and valgrind. the "leaks" tool is not recommended for use with spidermon
key or firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see bug 390944). leak gauge leak gauge is a tool that can be used to detect certain kinds of leaks in gecko, including those involving documents, window objects, and docshells. logalloc logalloc is a tool that dumps a log of memory allocations in gecko. that log can then ...
accessibility.tabfocus
type:integer default value: 7 (windows and linux); 2 (mac os x) exists by default: no application support:gecko 1.7 status: active introduction: bugs: bug 140612 values 1 give focus only to text fields (default on mac osx) 2 give focus to all form elements except text fields. 4 give focus only to links and linked images. ...
browser.altClickSave
the preference browser.altclicksave controls whether clicking a link while holding the alt
key starts the download of that link. type:boolean default value: false exists by default: yes application support:firefox 13.0 status: active; last updated 2012-03-19 introduction: pushed to nightly on 2012-03-02 bugs: bug 713052 values true clicking a link while holding the alt
key starts the download of that link. false (default) no action triggered (see bug 736985). ...
dom.event.clipboardevents.enabled
boardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected. the emitting of the oncopy, oncut and onpaste events are controlled by this preference. type:boolean default value:true exists by default: no application support: gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamon
key 2.10) status: active; last updated 2012-02-15 introduction: pushed to nightly on 2012-02-14 bugs: bug 542938 values true (default) the oncopy, oncut and onpaste events are enabled for web content. false the oncopy, oncut and onpaste events are disabled for web content. ...
ui.alertNotificationOrigin
ui.alertnotificationorigin controls the position and direction from which popup notifications invoked by nsialertsservice are sliding in. ...
ui.tooltipDelay
ui.tooltipdelay stores the delay in milliseconds between the mouse stopping over an element and the appearing of its tooltip. type:integer default value:500 exists by default: no application support: gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamon
key 2.8) status: active; last updated 2012-02-21 introduction: pushed to nightly on 2011-12-15 bugs: bug 204786 values integer (milliseconds, default: 500) the time for delay between the mouse stopping over the element and the tooltip appearing is stored in milliseconds and the default value is 500ms. ...
Preference reference
set it to true to enable it, or false to disable it.browser.dom.window.dump.filebrowser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true. ...
Profile Manager
. reporting bugs profile manager bugs should be reported in bugzilla, under testing -> profilemanager. starting profile manager to start profile manager, just launch profilemanager.exe (on windows) or profilemanager-bin (on linux and mac). by default, profile manager will manage firefox profiles, but you can also use it to work with profiles of other xulrunner apps, like thunderbird or seamon
key. to use profile manager with an application other than firefox, you need to launch it using the application's name as an argument, for example: profilemanager-bin seamon
key profiles and application versions profile manager manages two different lists: one of user profiles, and the other of application versions that can be used with the profiles. by default, this means it tracks a list of f...
A guide to searching crash reports
of any search can be easily shared by copying and pasting the page's url. to become an expert at searching and grouping requires understanding the full range of the 100+ fields available for searching and grouping. one way to learn about them is to read lots of individual crash reports; note that all fields shown in the details tab of an individual crash report have a tool-tip that indicates its
key for search. alternatively, you can browse the complete list. there is also an api through which searches can be performed programmatically. see the api documentation for full details; note that it uses the term "aggregation" for grouping/faceting. ...
Firefox Sync
ersions of firefox, as well as firefox for android and firefox for ios. firefox sync synchronizes state and configuration data used by the browser, such as bookmarks, history, preferences, bookmarks, and so forth among all your devices. the exact types of information synced is user-configurable in the browser's preferences or options page. it uses firefox accounts for account, 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 l...
Installing JSHydra
prerequisites mercurial 1.0 is needed to access source repositories. prerequisites for building spidermon
key spidermon
key is part of the build process, but since jshydra will get the code if required, you do not need to worry about obtaining the right version of spidermon
key. building jshydra jshydra requires, as part of its build process, spidermon
key. by default, the configure script will obtain a known working copy of spidermon
key; it is possible via the --moz-src and --moz-obj configure arguments to tell jshydra to use existing copies of the source and build. cd $home/jshydra hg clone http://hg.mozilla.org/users/pidgeot18_gmail.com/jshydra/ cd jshydra ./configure make # run jshydra tests make check processing input files jshydra requires the files it processes to be co...
L20n HTML Bindings
ion use: 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...
AsyncTestUtils extended framework
rs but the second element in each sub-list is an nsimutablearray instead of a js list. manipulating messages setread(aberead) setread(true) marks all the messages in the set as read, setread(false) marks them as unread. setstarred(abestarred) setstarred(true) marks all the messages in the set as starred ("flagged" in imap parlance), setstarred(false) makes them not be starred. addtag(atag
key) adds the given tag to all the messages in the set. the tag
key must correspond to an existing tag. the tag
key is not the label, but what is actually stored on the imap server. for example, all our default tags are actually things like $label1 and $label2, but that is not what we show to the user. removetag(atag
key) removes the given tag from all the messages in the set. see the addtag notes.
Leak And Bloat Tests
e discussion page of the mozilla wiki. results printed on tinderbox output, these consist of: mail rlk reference count leaks mail lk total bytes malloc'ed and not free'd mail mh maximum heap size mail a allocations - number of calls to malloc and friends. there are currently no graphs for these results. manually running tests setting up build set up build thunderbird or seamon
key with your standard mozconfig file, but with the following options set: ac_add_options --enable-debug ac_add_options --enable-trace-malloc running the tests in your <objdir> run the following command: make mailbloat this will run the tests and produce some result files. see debugging memory leaks for more information on what to do with this data. todo: add more information on processing output. ...
MailNews
it provides a number of functions and capabilities, including: communications protocols - smtp, pop3, imap, nntp message management, including search and filtering message composition address book the mailnews code lives in the mailnews/ directory of comm-central. asynctestutils extended framework the asynctestutils extended framework is one mechanism for testing the mailnews component of thunderbird. see mailnews automated testing for a description of the other testing mechanisms. ...
Introduction to NSPR
the current implementation of nspr allows developers to compile a single source code base on macintosh (ppc), win32 (nt 3.51, nt 4.0, win'95), and over twenty versions of unix. ...
PLHashEntry
syntax #include <plhash.h> typedef struct plhashentry plhashentry; description plhashentry is a structure that represents an entry in the hash table. an entry has a
key and a value, represented by the following fields in the plhashentry structure. const void *
key; void *value; the
key field is a pointer to an opaque
key. the value field is a pointer to an opaque value. if the
key of an entry is an integral value that can fit into a void * pointer, you can just cast the
key itself to void * and store it in the
key field. similarly, if the value of an entry is an integral value that can fit into a void * pointer, you can cast the value itself to void * and store it in the value field. warning: there are other fields in the plhashentry structure besides
key and value. these fields are...
PLHashNumber
syntax #include <plhash.h> typedef pruint32 plhashnumber; #define pl_hash_bits 32 description plhashnumber is an unsigned 32-bit integer. plhashnumber is the data type of the return value of a hash function. a hash function maps a
key to a hash number, which is then used to compute the index of the bucket. the macro pl_hash_bits is the size (in bits) of the plhashnumber data type and has the value of 32. see also plhashfunction ...
PL_CompareStrings
compares two character strings. syntax #include <plhash.h> printn pl_comparestrings( const void *v1, const void *v2); description pl_comparestrings compares v1 and v2 as character strings using strcmp. if the two strings are equal, it returns 1. if the two strings are not equal, it returns 0. pl_comparestrings can be used as the comparator function for string-valued
key or entry value. ...
PL_HashString
a general-purpose hash function for character strings. syntax #include <plhash.h> plhashnumber pl_hashstring(const void *
key); parameter the function has the following parameter:
key a pointer to a character string. returns the hash number for the specified
key. description pl_hashstring can be used as the
key hash function for a hash table if the
key is a character string. ...
PL_HashTableAdd
add a new entry with the specified
key and value to the hash table. syntax #include <plhash.h> plhashentry *pl_hashtableadd( plhashtable *ht, const void *
key, void *value); parameters the function has the following parameters: ht a pointer to the the hash table to which to add the entry.
key a pointer to the
key for the entry to be added. value a pointer to the value for the entry to be added. returns a pointer to the new entry. description add a new entry with the specified
key and value to the hash table. if an entry with the same
key already exists in the table, the freeentry function is invoked with the ht_free_value flag. you can write your freeentry function to free the value of the specified entry if the old value should be freed. the default freeentry functi...
String Operations
libraries built on top of nspr, such as the netscape security libraries, use these functions to manipulate strings. if you are copying or examining strings for use by such libraries or freeing strings that were allocated by such libraries, you must use these nspr functions rather than the libc equivalents. ...
Getting Started With NSS
e samples via: hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update samples_branch how to contribute ... (this section is still under construction, but there are many contribution opportunities) start by opening a bugzilla account at bugzilla.mozilla.org if you don't have one. nss :: libraries component for issues you'd like to work on. we maintain a list of nss bugs marked with a
keyword "good-first-bug" that you can view. creating your patch seee our section on nss sources, building, and testing to get started making your patch. when you're satisfied with it, you'll need code review. code review http://phabricator.services.mozilla.com/ is our code review tool, which uses your bugzilla account. use our phabricator user instructions to upload patches for review. some item...
JSS
won't be able to access that smartcard through the sunpkcs11-nss bridge. if you use jss, you can easily get lists of modules and tokens that are configured in the nss db and freely access all of it. documentation before you use jss, you should have a good understanding of the crypto technologies it uses. you might want to read these documents: introduction to public-
key cryptography. explains the basic concepts of public-
key cryptography that underlie nss and jss. introduction to ssl. introduces the ssl protocol, including information about cryptographic ciphers supported by ssl and the steps involved in the ssl handshake. for information on downloading nss releases, see nss sources building testing. read using jss to get you started with dev...
NSS 3.14.2 release notes
environment variable. initial manual pages for some nss command line tools have been added. they are still under review, and contributions are welcome. the documentation is in the docbook format and can be rendered as html and unix-style manual pages using an optional build target. new types: in certt.h cert_pi_useonlytrustanchors in secoidt.h sec_oid_ms_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...
NSS 3.14.3 release notes
distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_3_rtm/src/ new in nss 3.14.3 new functionality no new major functionality is introduced in this release. this release is a patch release to address cve-2013-1620. new functions in pk11pub.h pk11_signwithsym
key - similar to pk11_sign, performs a signing operation in a single operation. however, unlike pk11_sign, which uses a sec
keyprivate
key, pk11_signwithsym
key performs the signature using a symmetric
key, such as commonly used for generating macs. new types ck_nss_mac_constant_time_params - parameters for use with ckm_nss_hmac_constant_time and ckm_nss_ssl3_mac_constant_time. new pkcs #11...
NSS 3.15.1 release notes
tus handshake message correctly. bug 882829 - on windows, nss initialization fails if nss cannot call the rtlgenrandom function. bug 875601 - secmod_closeuserdb/secmod_openuserdb fails to reset the token delay, leading to spurious failures. bug 884072 - fix a typo in the header include guard macro of secmod.h. bug 876352 - certutil now warns if importing a pem file that contains a private
key. bug 565296 - fix the bug that shlibsign exited with status 0 even though it failed. the nss_survive_double_bypass_failure build option is removed. bugs fixed in nss 3.15.1 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.15.1;product=nss compatibility nss 3.15.1 shared libraries are backward comp...
NSS 3.15.4 release notes
or testing purposes (httpserv utility). support sha-1 signatures with tls 1.2 client authentication. added the --empty-password command-line option to certutil, to be used with -n: use an empty password when creating a new database. added the -w command-line option to pp: don't wrap long output lines. new functions cert_forcepostmethodforocsp cert_getsubjectnamedigest cert_getsubjectpublic
keydigest ssl_peercertificatechain ssl_recommendedcanfalsestart ssl_setcanfalsestartcallback new types cert_rev_m_force_post_method_for_ocsp: when this flag is used, libpkix will never attempt to use the http get method for ocsp requests; it will always use post. new pkcs #11 mechanisms none. notable changes in nss 3.15.4 reordered the cipher suites offered in ssl/tls client hello messages t...
NSS 3.15 release notes
t for ocsp stapling (rfc 6066, certificate status request) has been added for both client and server sockets. tls client applications may enable this via a call to ssl_optionsetdefault(ssl_enable_ocsp_stapling, pr_true); added function secitem_reallocitemv2. it replaces function secitem_reallocitem, which is now declared as obsolete. support for single-operation (eg: not multi-part) symmetric
key encryption and decryption, via pk11_encrypt and pk11_decrypt. certutil has been updated to support creating name constraints extensions. new functions in ssl.h ssl_peerstapledocspresponse - returns the server's stapled ocsp response, when used with a tls client socket that negotiated the status_request extension. ssl_setstapledocspresponses - set's a stapled ocsp response f...
NSS 3.16.1 release notes
nss 3.16.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_1_rtm/src/ new in nss 3.16.1 new functionality added the "ecc" flag for modutil to select the module used for elliptic curve cryptography (ecc) operations. new functions in pk11pub.h pk11_exportderprivate
keyinfo and pk11_exportpriv
keyinfo - exports a private
key in a der-encoded asn.1 private
keyinfo type or a sec
keyprivate
keyinfo structure. only rsa private
keys are supported now. in secmod.h secmod_internaltopubmechflags - converts from nss-internal to public representation of mechanism flags. new types in sslt.h ssl_padding_xtn - the value of this enum constant changed fro...
NSS 3.16.2.2 release notes
16.2.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_2_rtm/src/ new in nss 3.16.2.2 new functionality no new functionality is introduced in this release. this is a patch release to fix a regression. notable changes in nss 3.16.2.2 bug 1049435: change rsa_private
keycheck to not require p > q. this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private
keys (such as in pkcs #12 files) generated by other crypto libraries. bugs fixed in nss 3.16.2.2 bug 1049435 - importing an rsa private
key fails if p < q compatibility nss 3.16.2.2 shared libraries are backward compatible with all older nss 3.x shared libraries. ...
NSS 3.16.2 release notes
p mechanism. new intel aes assembly code for 32-bit and 64-bit windows, contributed by shay gueron and vlad krasnov of intel. new functions in cert.h cert_addextensionbyoid - adds an extension to a certificate. it is the same as cert_addextension except that the oid is represented by a secitem instead of a secoidtag. in pk11pub.h pk11_privdecrypt - decrypts with a private
key. the algorithm is specified with a ck_mechanism_type. pk11_pubencrypt - encrypts with a public
key. the algorithm is specified with a ck_mechanism_type. new macros in sslerr.h ssl_error_next_protocol_no_callback - an ssl error code that means the next protcol negotiation extension was enabled, but the callback was cleared prior to being needed. ssl_error_next_protocol_no_proto...
NSS 3.16.6 release notes
nss 3.16.6 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_6_rtm/src/ new in nss 3.16.6 new functionality no new functionality is introduced in this release. this is a patch release to fix a regression. notable changes in nss 3.16.6 bug 1049435: change rsa_private
keycheck to not require p > q. this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private
keys (such as in pkcs #12 files) generated by other crypto libraries. bugs fixed in nss 3.16.6 bug 1049435 - importing an rsa private
key fails if p < q compatibility nss 3.16.6 shared libraries are backward compatible with all older nss 3.x shared libraries. a pr...
NSS 3.16 release notes
et the environment variable nss_disable_ecc=1 when building nss. bug 903885: (cve-2014-1492) in a wildcard certificate, the wildcard character should not be embedded within the u-label of an internationalized domain name. see the last bullet point in rfc 6125, section 7.2. bug 962760: libpkix should not include the common name of ca as dns names when evaluating name constraints. bug 981170: aes
keywrap_decrypt should not return secsuccess for invalid
keys. bug 974693: fix a memory corruption in sec_pkcs12_new_asafe. bug 956082: if the nss_sdb_use_cache environment variable is set, skip the runtime test sdb_measureaccess. the built-in roots module has been updated to version 1.97, which adds, removes, and distrusts several certificates. the atob utility has been improved to automatically...
NSS 3.17.4 release notes
084986: if an ssl/tls connection fails, because client and server don't have any common protocol version enabled, nss has been changed to report error code ssl_error_unsupported_version (instead of reporting ssl_error_no_cypher_overlap). bug 1112461: libpkix was fixed to prefer the newest certificate, if multiple certificates match. bug 1094492: fixed a memory corruption issue during failure of
keypair generation. bug 1113632: fixed a failure to reload a pkcs#11 module in fips mode. bug 1119983: fixed interoperability of nss server code with a libressl client. bugs fixed in nss 3.17.4 this bugzilla query returns all the bugs fixed in nss 3.17.4: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.4...
NSS 3.17 release notes
information the hg tag is nss_3_17_rtm. nss 3.17 requires nspr 4.10.7 or newer. nss 3.17 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_rtm/src/ new in nss 3.17 new functionality when using ecdhe, the tls server code may be configured to generate a fresh ephemeral ecdh
key for each handshake, by setting the ssl_reuse_server_ecdhe_
key socket option to pr_false. the ssl_reuse_server_ecdhe_
key option defaults to pr_true, which means the server's ephemeral ecdh
key is reused for multiple handshakes. this option does not affect the tls client code, which always generates a fresh ephemeral ecdh
key for each handshake. new macros in ssl.h ssl_reuse_server_ecdhe_k...
NSS 3.19.2.2 release notes
re https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_2_rtm/src/ security fixes in nss 3.19.2.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures. new in nss 3.19.2.2 new functionality no new functionality is introduced in this release. acknowledgements the nss development team would like to thank karthi
keyan bhargavan from inria for responsibly disclosing the issue in bug 1158489. compatibility nss 3.19.2.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.19.2.2 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions l...
NSS 3.19.2.4 release notes
source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_4_rtm/src/ new in nss 3.19.2.4 new functionality no new functionality has been introduced in this release. security fixes in nss 3.19.2.4 the following security fixes from nss 3.21 have been backported to nss 3.19.2.4: bug 1185033 / cve-2016-1979 - use-after-free during processing of der encoded
keys in nss bug 1209546 / cve-2016-1978 - use-after-free in nss during ssl connections in low memory bug 1190248 / cve-2016-1938 - errors in mp_div and mp_exptmod cryptographic functions in nss compatibility nss 3.19.2.4 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.19.2.4 shared librari...
NSS 3.19 release notes
n order to be compatible with tls servers that use certificates with a sha512 signature (bug 1155922). bugs fixed in nss 3.19 this bugzilla query returns all the bugs fixed in nss 3.19: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19 acknowledgements the nss development team would like to thank karthi
keyan bhargavan from inria for responsibly disclosing the issue in bug 1086145. compatibility nss 3.19 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.19 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in...
NSS 3.20.2 release notes
r secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_2_rtm/src/ security fixes in nss 3.20.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures. new in nss 3.20.2 new functionality no new functionality is introduced in this release. acknowledgements the nss development team would like to thank karthi
keyan bhargavan from inria for responsibly disclosing the issue in bug 1158489. compatibility nss 3.20.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.20.2 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions liste...
NSS 3.20 release notes
ssl_enableweakdheprimegroup must be used. each time this api is called for the first time in a process, a fresh set of weak dhe parameters will be randomly created, which may take a long amount of time. please refer to the comments in the header file that declares the ssl_enableweakdheprimegroup api for additional details. the size of the default pqg parameters used by certutil when creating dsa
keys has been increased to use 2048 bit parameters. the selfserv utility has been enhanced to support the new dhe features. nss no longer supports c compilers that predate the ansi c standard (c89). bugs fixed in nss 3.20 this bugzilla query returns all the bugs fixed in nss 3.20: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=n...
NSS 3.25 release notes
se. distribution information the hg tag is nss_3_25_rtm. nss 3.25 requires netscape portable runtime (nspr) 4.12 or newer. nss 3.25 source distributions are available on ftp.mozilla.org for secure https download at the following location. source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_25_rtm/src/ new in nss 3.25 new functionality implemented dhe
key agreement for tls 1.3. added support for chacha with tls 1.3. added support for tls 1.2 ciphersuites that use sha384 as the prf. removed the limitation that allowed nss to only support certificate_verify messages that used the same signature hash algorithm as the prf when using tls 1.2 client authentication. several functions have been added to the public api of the nss cryptoki framework. ...
NSS 3.28.4 release notes
a.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_4_rtm/src/ new in nss 3.28.4 no new functionality is introduced in this release. bugs fixed in nss 3.28.4 bug 1344380 / out-of-bounds write in base64 encoding in nss (cve-2017-5461) bug 1345089 / drbg flaw in nss (cve-2017-5462) bug 1342358 - crash in tls13_destroy
keyshares acknowledgements the nss development team would like to thank ronald crane and vladimir klebanov for responsibly disclosing the issues by providing advance copies of their research. compatibility nss 3.28.4 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.28.4 shared libraries wit...
NSS 3.29.3 release notes
e available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_29_3_rtm/src/ new in nss 3.29.3 no new functionality is introduced in this release. notable changes in nss 3.29.3 a rare crash when initializing an ssl socket fails has been fixed. bugs fixed in nss 3.29.3 bug 1342358 - crash in tls13_destroy
keyshares compatibility nss 3.29.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.29.3 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions ...
NSS 3.36.8 release notes
ses/nss_3_36_8_rtm/src/ other releases are available in nss releases. new in nss 3.36.8 new functionality no new functionality is introduced in this release. this is a patch release to fix bugs. bugs fixed in nss 3.36.8 1554336 - optimize away unneeded loop in mpi.c 1515342 - more thorough input checking (cve-2019-11729) 1540541 - don't unnecessarily strip leading 0's from
key material during pkcs11 import (cve-2019-11719) compatibility nss 3.36.8 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.36.8 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions ...
NSS 3.38 release notes
es nspr 4.19 or newer. nss 3.38 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_38_rtm/src/ new in nss 3.38 new functionality added support for the tls record size limit extension. when creating a certificate request (csr) using certutil -r, an existing orphan private
key can be reused. parameter -k may be used to specify the id of an existing orphan
key. the available orphan
key ids can be displayed using command certutil -k. when using certutil -o to print the chain for a given certificate nickname, the new parameter --simple-self-signed may be provided, which can avoid ambiguous output in some scenarios. new functions in secitem.h secitem_makeitem ...
NSS 3.43 release notes
this bugzilla query returns all the bugs fixed in nss 3.43: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&pro...
NSS 3.44.1 release notes
.1 new functionality 1546229 - add ipsec ike support to softoken many new fips test cases (note: this has increased the source archive by approximately 50 megabytes for this release.) bugs fixed in nss 3.44.1 1554336 - optimize away unneeded loop in mpi.c 1515342 - more thorough input checking (cve-2019-11729) 1540541 - don't unnecessarily strip leading 0's from
key material during pkcs11 import (cve-2019-11719) 1515236 - add a ssl
keylogfile enable/disable flag at build.sh 1473806 - fix sec
key_converttopublic
key handling of non-rsa
keys 1546477 - updates to testing for fips validation 1552208 - prohibit use of rsassa-pkcs1-v1_5 algorithms in tls 1.3 (cve-2019-11727) 1551041 - unbreak build on gcc < 4.3 big-endian compatibili...
FC_GetTokenInfo
on), 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 the version numbers of the certificate and
key databases, respectively. firmwareversion: firmware version number, 0.0 (major=0x00, minor=0x00). a user may call fc_gettokeninfo without logging into the token (to assume the nss user role). return value ckr_ok token information was successfully copied. ckr_cryptoki_not_initialized the pkcs #11 module library is not initialized. ckr_slot_id_invalid the specified slot number is out of...
FC_Login
ocation failed. ckr_pin_incorrect: the pin is incorrect. ckr_pin_len_range: the pin is too long (ulpinlen is greater than 255). the function should return ckr_pin_incorrect in this case. ckr_session_handle_invalid: the session handle is invalid. ckr_user_already_logged_in: the user is already logged in. ckr_user_type_invalid the token can't authenticate the user because there is no
key database or the user's password isn't initialized. usertype is cku_so and the normal user's pin is already initialized. see also nsc_login ...
FC_SetAttributeValue
t, ck_attribute_ptr ptemplate, ck_ulong uscount ); parameters hsession [in] session handle. hobject [in] object handle. ptemplate [in, out] pointer to template. uscount [in] number of attributes in the template. description fc_setattributevalue sets the value of one or more attributes of an object. a user must log into the token before setting the attribute values of a secret or private
key object. return value examples see also nsc_setattributevalue ...
FC_SetOperationState
name fc_setoperationstate - restore the cryptographic operation state of a session. syntax ck_rv fc_setoperationstate( ck_session_handle hsession, ck_byte_ptr poperationstate, ck_ulong uloperationstatelen, ck_object_handle hencryption
key, ck_object_handle hauthentication
key ); parameters hsession [in] handle of the open session. poperationstate [in] pointer to a byte array containing the operation state. uloperationstatelen [in] contains the total length (in bytes) of the operation state. hencryption
key [in] handle of the encryption or decryption
key to be used in in a stored session or zero if no
key is needed. hauthentication
key [in] handle of the authentication
key to be used in the stored session or zero if none is needed. description fc_setoperationstate re...
FC_SignRecover
name fc_signrecover - sign data in a single recoverable operation. syntax ck_rv fc_signrecover( ck_session_handle hsession, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr psignature, ck_ulong_ptr pussignaturelen ); parameters hsession [in] session handle. pdata [in] mechanism to be used for the signing operation. usdatalen [in] handle of the
key to be usedn. psignature [out] pointer to the buffer or null. pussignaturelen [in, out] pointer to the size of the output buffer, replaced by the length of the signature if the operation is successful. description fc_signrecover signs data in a single operation where the (digest) data can be recovered from the signature. if psignature is null only the length of the signature is returned in *pussignaturelen. a user mus...
FC_SignRecoverInit
name fc_signrecoverinit - initialize a sign recover operation. syntax ck_rv fc_signrecoverinit( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_object_handle h
key ); parameters hsession [in] session handle. pmechanism [in] mechanism to be used for the signing operation. h
key [in] handle of the
key to be used. description fc_signrecoverinit initializes a initializes a signature operation where the (digest) data can be recovered from the signature. a user must log into the token (to assume the nss user role) before calling fc_signrecoverinit. return value examples see also nsc_signrecoverinit ...
FC_VerifyInit
name fc_verifyinit - initialize a verification operation. syntax ck_rv fc_verifyinit( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_object_handle h
key ); parameters hsession [in] session handle. pmechanism [in] mechanism to be used for the verification operation. h
key [in] handle of the
key to be used. description fc_verifyinit initializes a verification operation where the signature is an appendix to the data. a user must log into the token (to assume the nss user role) before calling fc_verifyinit. return value examples see also nsc_verifyinit ...
FC_VerifyRecover
name fc_verifyrecover - verify data in a single recoverable operation. syntax ck_rv fc_verifyrecover( ck_session_handle hsession, ck_byte_ptr psignature, ck_ulong ussignaturelen, ck_byte_ptr pdata, ck_ulong_ptr pusdatalen ); parameters hsession [in] session handle. psignature [in] mechanism to be used for the signing operation. ussignaturelen [in] handle of the
key to be usedn. pdata [out] pointer to the buffer or null. pusdatalen [in, out] pointer to the size of the output buffer, replaced by the length of the signature if the operation is successful. description fc_verifyrecover verifies data in a single operation where the (digest) data can be recovered from the signature. if psignature is null only the length of the signature is returned in *pussignaturelen.
FC_VerifyRecoverInit
name fc_verifyrecoverinit - initialize a verification operation where data is recoverable. syntax ck_rv fc_verifyrecoverinit( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_object_handle h
key ); parameters hsession [in] session handle. pmechanism [in] mechanism to be used for verification. h
key [in] handle of the
key to be used. description fc_verifyrecoverinit initializes a signature verification operation where the (digest) data can be recovered from the signature. a user must log into the token (to assume the nss user role) before calling fc_verifyrecoverinit. return value examples see also nsc_verifyrecoverinit ...
NSC_Login
memory allocation failed. ckr_pin_incorrect: the pin is incorrect. ckr_pin_len_range: the pin is too long (ulpinlen is greater than 255).the function should return ckr_pin_incorrect in this case. ckr_session_handle_invalid: the session handle is invalid. ckr_user_already_logged_in: the user is already logged in. ckr_user_type_invalid the token can't authenticate the user because there is no
key database or the user's password isn't initialized. usertype is cku_so and the normal user's pin is already initialized. see also fc_login ...
NSS tools : vfyserv
check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/. the nss site relates directly to nss code changes and releases. mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun. authors: elio maldonado <emaldona@redhat.com>, deon lac
key <dlac
key@redhat.com>. copyright (c) 2010, red hat, inc. licensed under the gnu public license version 2. references visible links 1. http://www.mozilla.org/projects/security/pki/nss/ ...
NSS Tools sslstrength
policy will default to domestic if not specified. step-up step up is a mode where the connection starts out with 40-bit encryption, but due to a 'change-cipher-spec' handshake, changes to 128-bit encryption. this is only done in 'export mode', with servers with a special certificate. you can tell if you stepped-up, because the output will says 'using export policy', and you'll find the secret
key size was 128-bits. prerequisites you should have a cert7.db in the directory in which you run sslstrength. other for references, here is a table of well-known ssl port numbers: https 443 imaps 993 nntps 563 ...
Necko Architecture
igned to accommodate pluggable protocols so developers can contribute their own protocol libraries that can be dynamically loaded and used by applications utilizing necko. necko provides the following libraries: necko - core networking functionality. mimetype - mime <-> file extension mapping nkabout - about: protocol nkdata - data: protocol nkfile - file: protocol nkftp - ftp: protocol nk
keyword -
keyword: protocol nkresrc - resource: protocol cnvts - stream converters stremcnv - stream converter service these libraries will change with time and illustrate the modularity of necko. architecture after a few iterations of our original design, the current necko architecture looks something like this: urls necko's primary responsibility is moving data from one location, to anot...
Necko walkthrough
aram - remember the event was posted earlier by initiatetransaction from the main thread). nshttpconnectionmgr::onmsgnewtransaction nshttpconnectionmgr::processnewtransaction (notice the check that we're on gsocketthread) gets conn info (i.e. hostname and port) from the transaction, and then gets or creates a connection entry from the connection table, an nsclasshashtable<nscstringhash
key, nsconnectionentry> called mct in nshttpconnectionmgr. if a connection entry already exists matching the required conn info, then that one will be used; otherwise a new one is created (makenewconnection - creates socket etc.). note: nsconnectionentry has a single nshttpconnectioninfo object attached, a pending queue of nshttptransactions, and 3 arrays for connections: active nshtt...
Proxies in Necko
supports creating socket transports using an nsiproxyinfo. this proxy info will only be used if it specifies a socks proxy, through which the connection is then made. note that socks is implemented as an nsisocketprovider, and the socket transport service will therefore use it as as the downmost socket type. proxies and local hosts requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamon
key 2.6) starting with gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6), proxy servers are not used when accessing hosts with no dots in their names, if manual proxy configuration is used and "<local>" is added to the "no proxy for:" text field field. to be written xxx missing paragraphs are about pac, and more details about http proxying, and maybe some more details about socks proxies. ...
Pork
pork details that haven't been moved to mdc renaming with pork sample pork application todos pork 1.0 release tracking bug pork releases download pork here community view pork forums... mailing list newsgroup rss feed #static on irc.mozilla.org related topics dehydra, treehydra, mozilla 2, spidermon
key ...
Rhino scopes and contexts
o use dynamic scope. with dynamic scope, functions look at the top-level scope of the currently executed script rather than their lexical scope. so we can store information that varies across scopes in the instance scope yet still share functions that manipulate that information reside in the shared scope. the dynamicscopes example illustrates all the points discussed above. ...
Statistics API
there are several ways to get access to this data: the environment variable moz_gctimer controls text dumping of gc stats. moz_gctimer may be none, stderr, stdout, or a filename. if a filename is given, data is appended to that file. when logging to a file is used in combination with multi-process firefox (e10s) it is necessary to set security.sandbox.content.level = 0, otherwise the content process will crash. the browser preference javascript.options.mem.log controls dumping of human-readable gc stats messages to the developer console. ...
Invariants
a native object must never become non-native. (one reason for this is that the object may have watchpoints set; the watchpoint machinery assumes that all objects with watched properties are native. there may be other reasons that cover more cases, but nobody can remember one.) all jsobjects and heap-allocated jsstrings must be 8-byte-aligned. (the jsval encoding depends on this.) the jsstackframe::down chain never forms a cycle. (it's a stack. but note that a stack frame is not necessarily newer than the next stack frame down, thanks to generators!) an object's scope chain (found by chasing jsobject::fslots[jsslot_parent]) never forms a cycle. (we can probably loop forever if that happens. ...
JIT Optimization Outcomes
the most typical operations that are relevant for fast program execution are property accesses and function calls. this page documents the meaning of different optimization outcomes. general outcomes general outcomes shared between various optimization strategies. genericfailure the optimization attempt failed, and the reason was not recorded. genericsuccess optimization succeeded. disabled the optimization has been explicitly disallowed. notypeinfo optimization failed because there was no type information associated with an object containing the property. ...
BOOLEAN_TO_JSVAL
obsolete since jsapi 42this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. cast a c integer to a boolean js::value without any type checking or error handling. please use js::booleanvalue/js::truevalue/js::falsevalue instead in spidermon
key 45 or later. syntax jsval boolean_to_jsval(bool b); name type description b bool c integer value to be converted to a boolean jsval. description boolean_to_jsval converts a bool argument, b, to a boolean jsval. if b is false, the result is jsval_false. if b is true, the result is jsval_true. see also mxr id search for boolean_to_jsval js::booleanvalue bug 1177892 -- removed ...
DOUBLE_TO_JSVAL
obsolete since jsapi 42this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. casts a pointer to a gc-allocated jsdouble to type jsval. please use js::doublevalue instead in spidermon
key 45 or later. syntax jsval double_to_jsval(double d); name type description d double c double to convert to a jsval. description double_to_jsval is the inverse of js::tonumber. to convert a c float, double to type js::value, use js_numbervalue instead. see also mxr id search for double_to_jsval js::tonumber js_numbervalue js::doublevalue bug 1177892 -- removed ...
INT_FITS_IN_JSVAL
n be cast to jsval by calling int_to_jsval(i). otherwise, int_fits_in_jsval returns false. in this case, the application can still convert i to a jsval using js_newnumbervalue. warning: the type of the argument i must be jsint, but the c/c++ compiler does not enforce type safety here. if i is an unsigned or 64-bit value, int_fits_in_jsval can silently give the wrong answer. starting in spidermon
key 1.8.5, jsval can store a full 32-bit integer, so this check isn't needed any longer for 32-bit integers. example the following code snippet illustrates how a c variable, item, is conditionally tested in an if statement to see if it is a legal jsval integer value. if (int_fits_in_jsval(item)) { /* ... */ } else { js_reporterror(cx, "integer out of range: %d", item); } see also int_...
JS::Add*Root
these functions are obsoleted, use js::persistentrooted instead. ...
JS::AutoIdArray
syntax autoidarray(jscontext *cx, jsidarray *ida); name type description cx jscontext * the context in which to add the root. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ida jsidarray * a pointer to jsidarray to take the ownership. methods method description bool operator!() const return true if this has no owned array. jsid operator[](size_t i) const return a jsid in specified index of the owned array. size_t length() const return the length of the owned array. ...
JS::AutoSaveExceptionState
syntax js::autosaveexceptionstate(jscontext *cx); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description js::autosaveexceptionstate saves and later restores the current exception state of a given jscontext. this is useful for implementing behavior in c++ that's like try/catch or try/finally in js. example // typical usage: bool ok = js::evaluate(cx, ...); autosaveexceptionstate savedexc(cx); ... ...
JS::AutoValueArray
syntax js::autovaluearray<n> vp(cx); name type description cx jscontext * the context in which to add the root. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. n size_t size of a js::value array. description js::autovaluearray<n> holds a rooted array of js::value. this is typically used for local variables being passed to function which requires js::handlevaluearray or a pointer to js::value array. examples pass to function as a pointer to js::value. ...
JS::BooleanValue
syntax js::value js::booleanvalue(bool boo) name type description boo bool c bool to convert. description js::booleanvalue converts a c boolean of type bool to js::value, the type of javascript values. ...
JS::Call
this article covers features introduced in spidermon
key 17 call a specified js function. syntax bool js::call(jscontext *cx, js::handleobject thisobj, js::handlefunction fun, const js::handlevaluearray &args, js::mutablehandlevalue rval); bool js::call(jscontext *cx, js::handleobject thisobj, const char *name, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js::call(jscontext *cx, js::handleobject thisobj, js::handlevalue fun, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js::call(jscontext *cx, js::handlevalue thisv, js::handlevalue fun, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js::call(jscontext *cx, js::handlevalue thisv, js::handleobject funobj, const js::ha...
JS::CloneFunctionObject
syntax jsobject * js::clonefunctionobject(jscontext *cx, js::handleobject funobj); jsobject * js::clonefunctionobject(jscontext *cx, js::handleobject funobj, js::autoobjectvector &scopechain); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. funobj js::handleobject the function to clone. scopechain js::autoobjectvector the new function's scope chain. ...
JS::CompileFunction
this article covers features introduced in spidermon
key 17 create a javascript function from a text string. syntax bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, const char16_t *chars, size_t length, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, js::sourcebufferholder &srcbuf, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector...
JS::CompileOffThread
this article covers features introduced in spidermon
key 31 compile a script off thread for execution. syntax bool js::cancompileoffthread(jscontext *cx, const js::readonlycompileoptions &options, size_t length); bool js::compileoffthread(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::offthreadcompilecallback callback, void *callbackdata); jsscript * js::finishoffthreadscript(jscontext *maybecx, jsruntime *rt, void *token); typedef void (*js::offthreadcompilecallback)(void *token, void *callbackdata); name type description cx / maybe jscontext * pointer to a js context from which to derive runtime information. requires request. in...
JS::Construct
syntax bool js::construct(jscontext *cx, js::handlevalue fun, const js::handlevaluearray& args, js::mutablehandlevalue rval); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. fun js::handlevalue pointer to the function to call. should be a native function or jsapi-compiled function.. args js::handlevaluearray & arguments you are passing to the function. ...
JS::CreateError
this article covers features introduced in spidermon
key 38 create an error object. syntax // added in spidermon
key 45 bool js::createerror(jscontext *cx, jsexntype type, handleobject stack, handlestring filename, uint32_t linenumber, uint32_t columnnumber, jserrorreport *report, handlestring message, mutablehandlevalue rval); // obsolete since jsapi 39 bool js::createerror(jscontext *cx, jsexntype type, handlestring stack, handlestring filename, uint32_t linenumber, uint32_t columnnumber, jserrorreport *report, handlestring message, mutablehandlevalue rval); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a j...
JS::CurrentGlobalOrNull
syntax jsobject * js::currentglobalornull(jscontext *cx); name type description cx jscontext * the context for which to return the global object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description js::currentglobalornull() returns the global object for whatever function is currently running on the context. in other words, it returns the global object on the current scope chain. if there is no javascript running on the context, this returns the context's global, i.e., js_getglobalobject(cx). ...
JS::DoubleNaNValue
syntax js::value js::doublenanvalue() description js::doublenanvalue returns a value of type js::value that represents an ieee floating-point quiet not-a-number (nan). the result is an floating-point js::value. ...
JS::DoubleValue
syntax js::value js::doublevalue(double dbl) name type description dbl double c double to convert. description js::doublevalue converts a c floating-point number of type double to js::value, the type of javascript values. the result is an floating-point js::value. ...
JS::FalseValue
syntax js::value js::falsevalue() description js::falsevalue creates a js::value that represents the javascript value false. ...
JS::Float32Value
syntax js::value js::float32value(float f) name type description f float c float to convert. description js::float32value converts a c floating-point number of type float to js::value, the type of javascript values. the result is an floating-point js::value. ...
JS::GetDeflatedUTF8StringLength
syntax size_t getdeflatedutf8stringlength(jsflatstring* s); name type description s jsflatstring * the pointer to the string to calculate the length. description js::getdeflatedutf8stringlength returns the length of the char buffer required to encode s as utf8. the returned length does not include the null-terminator. ...
JS::GetSelfHostedFunction
syntax jsfunction* js::getselfhostedfunction(jscontext* cx, const char* selfhostedname, js::handle<jsid> id, unsigned nargs); name type description cx jscontext* the context from which to get the function. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. selfhostedname const char* function name in the self-hosted javascript. id js::handle<jsid> a pointer to jsid of the name to assign to the new function. ...
JS::HandleValueArray
syntax js::handlevaluearray(const js::rootedvalue& value); js::handlevaluearray(const js::autovaluevector& values); js::handlevaluearray(const js::autovaluearray<n>& values); js::handlevaluearray(const js::callargs& args); js::handlevaluearray::frommarkedlocation(size_t len, const js::value *elements); js::handlevaluearray::subarray(const js::handlevaluearray& values, size_t startindex, size_t len); js::handlevaluearray::empty(); name type description value js::rootedvalue & an element of newly created 1-length array. ...
JS::Int32Value
syntax js::value js::int32value(int32_t i32) name type description i32 int32_t c integer to convert. description js::int32value converts a c signed 32-bit integer of type int32_t to js::value, the type of javascript values. the result is an integer js::value. ...
JS::IsCallable
syntax bool js::iscallable(jsobject *obj); bool js::isconstructor(jsobject *obj); name type description obj jsobject * pointer to the function. description js::iscallable returns whether the given function object is callable. js::isconstructor returns whether the given function object is a valid constructor. ...
JS::MutableHandle
the underlying storage can be changed. this is useful for outparams. syntax bool somefunction(jscontext *cx, js::mutablehandle<t> outparam) { ... } methods here, ptr represents the private member of js::mutablehandle<t>, typed with t *. method description const t &get() const returns *ptr. operator const t&() const t operator->() const t *address() returns ptr. void set(t v) sets the value of *ptr to v. description js::mutablehandle<t> is a non-const reference to js::rooted<t>. ...
JS_ClearNonGlobalObject
syntax void js_clearnonglobalobject(jscontext *cx, jsobject *obj); name type description cx jscontext * the context in which to clear the object. requires request. ...
JS_CompileFileHandleForPrincipals
syntax jsobject * js_compilefilehandleforprincipals(jscontext *cx, jsobject *obj, const char *filename, file *fh, jsprincipals *principals); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * filename const char fh file * principals jsprincipals * description please provide a description. ...
JS_CompileFileHandleForPrincipalsVersion
syntax jsobject * js_compilefilehandleforprincipalsversion(jscontext *cx, jsobject *obj, const char *filename, file *fh, jsprincipals *principals, jsversion version); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * filename const char fh file * principals jsprincipals * version jsversion description please provide a description. ...
JS_CompileUCFunctionForPrincipalsVersion
syntax jsfunction * js_compileucfunctionforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *name, unsigned int nargs, const char **argnames, const jschar *chars, size_t length, const char *filename, unsigned int lineno, jsversion version); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
JS_CompileUTF8FileHandle
pile. principals jsprincipals * (only in js_compileutf8filehandleforprincipals) the security principals to associate with the new script, or null. description js_compileutf8filehandle reads a script from a stdio file handle and compiles the script for execution by the javascript engine. js_compileutf8filehandleforprincipals is a version of the function for use with spidermon
key's security features. filename is the name of the file containing the script to compile. file is the file handle. js_compileutf8filehandle does not close the file handle. if principals is non-null, it points to a jsprincipals object that is associated with the new script and any functions it creates. on success, js_compileutf8filehandle reads file to eof and returns an object representing the n...
JS_ConvertArgumentsVA
*argv, const char *format, va_list ap); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. args const js::callargs & reference to the arguments to convert. added in spidermon
key 31 argc unsigned the number of arguments to convert. obsolete since jsapi 30 argv jsval * pointer to the vector of arguments to convert. obsolete since jsapi 30 format const char * character array containing the recognized format to which to convert. ap va_list the list of pointers into which to store the converted types. there shoul...
JS_DecompileScript
is a function, it calls js_decompilefunction. otherwise, it returns the original source code of the script. if the script is not cached, it tries to load the source from file, and returns nullptr if an error happened while loading. if successful, js_decompilescript returns a string containing the source code of the script. otherwise, it returns a string containing "[no source]". from spidermon
key 17, this does not actually decompile the script, but returns the original source code (bug 761723). see also mxr id search for js_decompilescript js::compile js_compilescript js_decompilefunction js_destroyscript js::evaluate js_executescript bug 761723 ...
JS_DecompileScriptObject
syntax jsstring * js_decompilescriptobject(jscontext *cx, jsobject *scriptobj, const char *name, unsigned int indent); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
JS_DeepFreezeObject
syntax bool js_deepfreezeobject(jscontext *cx, js::handle<jsobject*> obj); name type description cx jsruntime * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handle<jsobject*> an object to freeze. description js_deepfreezeobject freezes obj, and all objects it refers to, recursively. this will not recurse through non-extensible objects, on the assumption that those are already deep-frozen. ...
JS_DefineConstDoubles
create multiple constant double or integer valued properties on an object. syntax bool js_defineconstdoubles(jscontext *cx, js::handleobject obj, const jsconstdoublespec *cds); bool js_defineconstintegers(jscontext *cx, js::handleobject obj, const jsconstintegerspec *cis); // added in spidermon
key 38 name type description cx jscontext * the context in which to define the new properties. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object for which to create new properties. cds jsconstdoublespec * pointer to an array of jsconstdoublespec records containing property names and values to create. the last array elem...
JS_DefineOwnProperty
syntax bool js_defineownproperty(jscontext *cx, js::handleobject obj, js::handleid id, js::handlevalue descriptor, bool *bp); name type description cx jscontext * the context. requires request. ...
JS_DefineProperties
threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the object on which to define new properties. ps const jspropertyspec * pointer to the first element of an array containing names, ids, flags, and getproperty and setproperty method for the properties to create. the last array element must contain 0-valued members. in spidermon
key versions prior to spidermon
key 24, the last argument to js_definepropeties was not const. description js_defineproperties creates properties on a specified object, obj. ps is a pointer to the first element of an array of jspropertyspec structures. each array element defines a single property: its name, attributes, getter, and setter. the name field of the last array element must be null. js_defi...
JS_GetParentRuntime
syntax jsruntime * js_getparentruntime(jscontext *cx); name type description cx jscontext * the context to query. description js_getparentruntime retrieves a pointer to the parent jsruntime of the runtime for a specified jscontext. if the cx's runtime has no parent runtime, js_getparentruntime returns cx's runtime itself. ...
JS_GetProperty
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or const char16_t * or js::handleid name of the property to look up. namelen size_t (in js...
JS_GetPropertyAttrsGetterAndSetter
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object from which to retrieve property attributes. name or id const char * or const jschar * or jsid the name of the property to ex...
JS_GetPropertyDefault
obsolete since jsapi 26this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermon
key 1.8.5 finds a specified property and retrieves its value or provided default value. syntax bool js_getpropertydefault(jscontext *cx, jsobject *obj, const char *name, jsval def, js::mutablehandle<js::value> vp); bool js_getpropertybyiddefault(jscontext *cx, jsobject *obj, jsid id, jsval def, js::mutablehandle<js::value> vp); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontex...
JS_GetPropertyDescriptor
finds a specified property of an object and gets a detailed description of that property. syntax bool js_getpropertydescriptor(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandle<jspropertydescriptor> desc); // added in spidermon
key 31 bool js_getpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandle<jspropertydescriptor> desc); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object to search for the property. id const char * or js::handleid the name of the property to look up. ...
JS_GetRegExpFlags
syntax unsigned js_getregexpflags(jscontext *cx, handleobject obj) name type description cx jscontext * a context. obj js::handleobject the object to get the flags. description js_getregexpflags returns flags of the specified object, obj. if successful, js_getregexpflags returns the flags, otherwise returns false. ...
JS_GetRegExpSource
syntax jsstring * js_getregexpsource(jscontext *cx, js::handleobject obj); name type description cx jscontext * a context. obj js::handleobject the object to get the source string. description js_getregexpsource returns a source string of the specified object, obj. if successful, js_getregexpsource returns a pointer to the source string, otherwise returns null. ...
JS_GetScopeChain
obsolete since javascript 1.8.7this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. retrieves the scope chain for the javascript code currently running in a given context. js_getscopechain has been removed in spidermon
key 1.8.7 with no identical replacement. when you only used this function to retrieve the scope chain's global, then you can use the function js_getglobalforscopechain. syntax jsobject * js_getscopechain(jscontext *cx); name type description cx jscontext * the context to query. description js_getscopechain returns the first jsobject on the scope chain for the javascript code currently running in the given context, cx. t...
JS_GetStringCharAt
syntax bool js_getstringcharat(jscontext *cx, jsstring *str, size_t index, char16_t *res); char16_t js_getflatstringcharat(jsflatstring *str, size_t index); name type description cx jscontext * the context in which to create the new string. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. str jsstring * or jsflatstring * the string to get character. index size_t an integer between 0 and 1-less-than the length of the string. res char16_t * (js_getstringcharat only) out parameter. ...
JS_GetStringChars
pi 33this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. retrieve a pointer to the 16-bit values that make up a given string. syntax jschar * js_getstringchars(jsstring *str); // obsolete since jsapi 1.8.5 const jschar * js_getstringcharsz(jscontext *cx, jsstring *str); // added in spidermon
key 1.8.2, obsolete since jsapi 33 name type description cx jscontext * (in js_getstringcharsz only) a context. str jsstring * the string to obtain characters from. description js_getstringchars obsolete since javascript 1.8.5 returns a pointer to the first element of an array of jschars. warnings: the array is not necessarily null-terminated. to ...
JS_GetStringCharsAndLength
syntax const jschar * js_getstringcharsandlength(jscontext *cx, jsstring *str, size_t *length); name type description cx jscontext * the context. requires request. ...
JS_GetStringEncodingLength
syntax size_t js_getstringencodinglength(jscontext *cx, jsstring *str); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext.. str jsstring * a string to encode. description js_getstringencodinglength returns the length of the specified string in bytes, regardless of its encoding. you can use this value to create a buffer to encode the string into using the js_encodestringtobuffer function. ...
JS_GetTwoByteExternalStringChars
syntax const char16_t * js_gettwobyteexternalstringchars(jsstring *str); name type description str jsstring * a string to get characters. description js_gettwobyteexternalstringchars gets the characters of the string, str. js_gettwobyteexternalstringchars always succeeds, and returns a pointer to the string. ...
JS_HasOwnProperty
syntax bool js_hasownproperty(jscontext* cx, handleobject obj, const char* name, bool* foundp) bool js_hasownpropertybyid(jscontext* cx, handleobject obj, handleid id, bool* foundp) name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or js::handleid name of the property to look up. ...
JS_HasProperty
property. syntax bool js_hasproperty(jscontext *cx, js::handleobject obj, const char *name, bool *foundp); bool js_hasucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, bool *vp); bool js_haspropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, bool *foundp); // added in spidermon
key 1.8.1 name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or const char16_t or js::handleid name of the property to look up. namelen size_t (only in ...
JS_LeaveCrossCompartmentCall
use js_leavecompartment instead. leave a the compartment, returning to the compartment active before the corresponding js_entercrosscompartmentcall. ...
JS_LinkConstructorAndPrototype
syntax bool js_linkconstructorandprototype(jscontext *cx, js::handle<jsobject*> ctor, js::handle<jsobject*> proto); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ctor js::handle<jsobject*> pointer to the constructor object. proto js::handle<jsobject*> pointer to the prototype object. ...
JS_LooselyEqual
syntax bool js_looselyequal(jscontext *cx, js::handle<js::value> v1, js::handle<js::value> v2, bool *equal); name type description cx jscontext * the context in which to perform the conversion. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v1, v2 js::handle<js::value> the value to compare. equal bool * out parameter. receives the comparison result. ...
JS_MakeStringImmutable
d-safe. syntax jsbool js_makestringimmutable(jscontext *cx, jsstring *str); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. s jsstring * the string to operate on. s must not be null. description a string's characters can never be changed, but spidermon
key uses two string optimization techniques behind the scenes: a growable string (see js_newgrowablestring ) has a buffer that the javascript engine can reallocate so that concatenating it with another string is much faster. a dependent string (see js_newdependentstring) is a substring of another (growable, dependent, or immutable) string. in memory it is represented as a pointer to the other str...
JS_NewArrayObject
create a new array object. syntax jsobject * js_newarrayobject(jscontext *cx, const js::handlevaluearray& contents); // added in spidermon
key 31 jsobject * js_newarrayobject(jscontext *cx, size_t length); // added in spidermon
key 31 jsobject * js_newarrayobject(jscontext *cx, int length, jsval *vector); // obsolete since jsapi 30 name type description cx jscontext * the context in which to create the new array. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. contents js::handlevaluearray& reference to the initial values for the array's elements. added in spidermon
key 31 length size_t or int the length of the new array. this must not be negative. vector jsval * ...
JS_NewDateObject
syntax jsobject * js_newdateobject(jscontext *cx, int year, int mon, int mday, int hour, int min, int sec); name type description cx jscontext * the context in which to create the new date object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. year int the year to set the new object to. mon int the month to set the new object to. mday int the day of the month to set the new object to. hour int the hour to set the new object to. ...
JS_NewDateObjectMsec
syntax jsobject * js_newdateobjectmsec(jscontext *cx, double msec); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. msec double time since unix epoch in milliseconds. description the returned jsobject is a standard javascript date. ...
JS_NewExternalString
garbage collected, and the javascript engine will call the string finalizer callback, allowing the application to free the array.) the array does not need to be zero-terminated. length size_t the number of characters in the array chars. fin jsstringfinalizer a string finalizer the javascript engine should use (later) to free the string buffer chars. added in spidermon
key 17 type int (js_newexternalstringwithclosure only) indicates which string finalizer callback the javascript engine should use (later) to free the string buffer chars. this must be an id number previously returned by a successful call to js_addexternalstringfinalizer. obsolete since jsapi 13 closure void * (js_newexternalstringwithclosure only) arbitrary, application-...
JS_NewObjectForConstructor
jsobject * js_newobjectforconstructor(jscontext *cx, const jsval *vp); // obsolete since jsapi 14 name type description cx jscontext * the context in which to create the new object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. clasp const jsclass * the class of the object to create. added in spidermon
key 17 vp jsval * pointer to a constructor. this must be an object that has a prototype property. args js::callargs & call argument to get a constructor as callee. added in spidermon
key 38 description js_newobjectforconstructor creates a new object exactly as the given constructor would if invoked with new. this function does not run the code of the constructor...
JS_NewPlainObject
syntax jsobject * js_newplainobject(jscontext *cx); name type description cx jscontext * the context in which to create the new object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description js_newplainobject creates a new plain object, like new object(), with object.prototype as [[prototype]]. on success, js_newplainobject returns a pointer to the new object. otherwise it returns nullptr. ...
JS_NewRuntime
jsusehelperthreads usehelperthreads, jsruntime *parentruntime = nullptr); // deprecated since jsapi 32 name type description maxbytes uint32 maximum number of allocated bytes after which garbage collection is run. maxnurserybytes uint32 nursery size in bytes. maxnurserybytes is rounded down to a multiple of chunk size. added in spidermon
key 38 parentruntime jsruntime * the topmost parent or nullptr . added in spidermon
key 31 description js_newruntime initializes the javascript runtime environment. call js_newruntime before making any other api calls except js_init. js_newruntime allocates memory for the jsruntime and initializes certain internal runtime structures. maxbytes specifies the number of allocated by...
JS_NewScriptObject
code can't do much of anything with it. on success, js_newscriptobject returns a pointer to the script's object. otherwise it returns null. (the name "js_newscriptobject" suggests that the script object is freshly allocated; this was the case in older versions of the api, but now the script object is allocated along with the jsscript itself.) (some temporary scripts used internally by spidermon
key do not have script objects allocated for them; such scripts are not accessible via jsapi.) see also the jsapi user guide contains example code using compiled scripts. mxr id search for js_newscriptobject bug 630209 ...
JS_NewUCString
use js_newstringcopyn and js_newucstringcopyn instead. syntax jsstring * js_newucstring(jscontext *cx, char16_t *chars, size_t length); jsstring * js_newstring(jscontext *cx, char *buf, size_t length); // obsolete since jsapi 1.8.5 name type description cx jscontext * the context in which to create the new string. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. buf char * or char16_t * pointer to a character array, allocated with js_malloc, containing the characters for the js string to create. the javascript engine adopts the buffer. ...
JS_ObjectIsDate
syntax bool js_objectisdate(jscontext *cx, js::handleobject obj); name type description cx jscontext * pointer to a javascript context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * jsobject that should be checked. description js_objectisdate() can be used to check if you are dealing with a date object, or a date object used across compartments (or windows or sites, in the browser embedding). ...
JS_YieldRequest
ction periodically to ensure that a long-running request does not block garbage collection indefinitely. the effect is the same as a call to js_suspendrequest immediately followed by a call to js_resumerequest. jsapi 1.7 and earlier js_yieldrequest did not cause cx to relinquish objects it created to other threads that are blocked waiting for them. this bug (bug 402898) will be fixed in spidermon
key 1.8. jsapi 1.7 and earlier js_yieldrequest is available only in js_threadsafe builds. in spidermon
key 1.8 and later, this function will be present, but will do nothing, in non-js_threadsafe builds. mxr id search for js_yieldrequest ...
JS_freeop
syntax void js_freeop(jsfreeop *fop, void *p); name type description fop jsfreeop * a pointer to jsfreeop structure to be used to get the implementation of free. p void * a pointer to the allocated memory to be freed. description js_freeop is a wrapper for js_free(p) that may delay js_free(p) invocation as a performance optimization as specified by the given jsfreeop instance. ...
JS_updateMallocCounter
syntax void js_updatemalloccounter(jscontext *cx, size_t nbytes); name type description cx jscontext * pointer to a js context to decrement the malloc counter. nbytes size_t number of bytes to decrement from malloc counter. description js_updatemalloccounter decrements malloc counter of gc and the zone of the context. malloc counter measures memory pressure for gc scheduling. it runs from maxmallocbytes down to zero. maxmallocbytes is initialized with maxbytes parameter of js_newruntime, and could be configured later by calling js_getgcparameter with jsgc_max_malloc_bytes. ...
OBJECT_TO_JSVAL
obsolete since jsapi 42this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. casts a specified js object to a js value. please use js::objectvalue/js::objectornullvalue instead in spidermon
key 45 or later. syntax jsval object_to_jsval(jsobject *obj); name type description obj jsobject * a pointer to a javascript object to convert to a jsval. description object_to_jsval casts obj from type jsobject * to jsval. if obj is null, the result is jsval_null. see also mxr id search for object_to_jsval js_valuetoobject js::objectvalue js::objectornullvalue bug 1177892 -- removed ...
PRIVATE_TO_JSVAL
obsolete since jsapi 42this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. cast raw void * pointers to type jsval and vice versa. please use js::privatevalue instead in spidermon
key 45 or later. syntax jsval private_to_jsval(void *ptr); void * jsval_to_private(jsval v); // obsoleted since jsapi 32 description with private_to_jsval(), an application can store a private data pointer, p, as a jsval. this can be useful with reserved slots. the private data pointer can point to application-defined memory of any type, but the pointer must be two-byte-aligned (that is, (int) p must be even). private data is managed entirely by the application. the javascript engine itself never us...
STRING_TO_JSVAL
obsolete since jsapi 42this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. casts a specified js string to a js value. please use js::stringvalue instead in spidermon
key 45 or later. syntax jsval string_to_jsval(jsstring *str) name type description obj jsstring * a pointer to a js string to convert to a jsval. description string_to_jsval casts a given jsstring * to jsval. str must be a non-null pointer of type jsstring *. the conversion always succeeds. see also mxr id search for string_to_jsval js::stringvalue bug 1177892 -- removed ...
jsdouble
to just replace every usage of jsdouble with double in your code. jsdouble is a c floating-point number type. it is defined to be a 64-bit, ieee 754 compliant type. see ecma 262-3 §8.5. arithmetic on jsdouble values in c should behave exactly like the floating-point arithmetic in javascript, except that c and javascript may treat not-a-number values differently. implementation note: spidermon
key has had several bugs involving details of floating-point arithmetic on various platforms. controlling the behavior of floating-point arithmetic is very architecture- and system-specific, and can be hard to get right. help in the form of test cases, commentary, and patches is always appreciated. ...
Running Automated JavaScript Tests
egexp pattern that is tested against file:///{path_to_obj_dir}/dist/test-stage/jsreftest/tests/jsreftest.html?test={relative_path_to_test_from_js/src/tests} string: ./mach jstestbrowser --filter=pattern running jstests on treeherder when viewing treeherder after a push to the mozilla repositories, jstests run in the browser are shown as r(j) meaning "javascript reftests". most of the spidermon
key shell jobs, labeled sm(...), will include js shell runs of both jstests and jit-tests. running jit-tests the jit-test suite uses a python harness that is similar to the jstests shell harness, but with some minor differences. basic usage is the same: jit_test.py path_to_js_shell developers will usually want to run like this to skip the slow tests and cover the most important options: jit_test...
Running Parsemark
the intent is to run a dozen or so large-payload js sites globbed up from across the web. yes, it includes gmail. here's how you get your mitts on it. the test files are not checked into the source tree because they're non-mozilla js code. download the suite of parse tests from bug 548621 and decompress them. within js/src/tests, run python parsemark.py -h to see help documentation. generally you'll want to capture json results for your baseline and compare them to the results for the "current" version of your shell. ...
SavedFrame
the content compartment sees it, waive the xray wrapper with components.utils.waivexrays: const contentviewofstack = components.utils.waivexrays(somestack); accessor properties of the savedframe.prototype object source the source url for this stack frame, as a string. line the line number for this stack frame. column the column number for this stack frame. functiondisplayname either spidermon
key’s inferred name for this stack frame’s function, or null. asynccause if this stack frame is the asyncparent of other stack frames, then this is a string representing the type of asynchronous call by which this frame invoked its children. for example, if this frame’s children are calls to handlers for a promise this frame created, this frame’s asynccause would be "prom...
TPS Pref Lists
for example: var prefs1 = [ { name: "browser.startup.homepage", value: "http://www.getfirefox.com" }, { name: "browser.urlbar.maxrichresults", value: 20 }, { name: "browser.tabs.autohide", value: true } ]; pref lists and phase actions the only actions supported for preference asset lists are modify and verify: prefs.modify prefs.verify sync only syncs certain preferences. to find the list of valid preferences, go to about:config on a browser that has weave installed, and search for services.sync.prefs.sync. ...
TPS Tab Lists
title: the title of the tab, optional. if specified, only used during verify actions. profile: the name of the profile the tab belongs to. required for verify actions. ...
TPS Tests
e, so try to stick to the convention established in the other tests. yes, this is cludgey, but it's effective enough and nobody has changed it. phase declarations these map the phases to profiles. both python and javascript read them in. they must look like: var phases = { "phase1": "profile1", "phase2": "profile2", "phase3": "profile1" }; between { and } it must be strict json. e.g. quoted
keys, no trailing parentheses, etc. the python testrunner will be parsing it with an unforgiving call to json.loads, so anything other than strict json will fail. you can use as many profiles or phases as you need, but every phase you define later must be declared here, or it will not be run by the python test runner. any phases declared here but not implemented later will cause the test to fail wh...
Mozinfo
.) an operating system? because information is not consolidated, checks are not done consistently, nor is it defined what we are checking for. mozinfo proposes to solve this problem. mozinfo is a bridge interface, making the underlying (complex) plethora of os and architecture combinations conform to a subset of values of relevance to mozilla software. the current implementation exposes relevant
key, values: os, version, bits, and processor. additionally, the service pack in use is available on the windows platform. api usage mozinfo is a python package. downloading the software and running python setup.py develop will allow you to do import mozinfo from python. mozinfo.py is the only file contained is this package, so if you need a single-file solution, you can just download or call this...
Exploitable crashes
llowing steps. if you need help with any of the steps (e.g. perhaps you lack necessary bugzilla privileges) please email security@mozilla.org. make sure a bug is on file. mark the bug as security-sensitive by putting it into the "security-sensitive core bug" group. do this before making comments or taking actions that expose exploitability publicly. put a security severity rating in the bug's
keywords. if you're not sure what rating to give, err on the higher side so the bug will get more attention. explain in a comment why the issue seems exploitable. other tools apple has a tool called "crashwrangler" that are still being maintained as of 2012. there is little public information about it, and it is hard to find even on the apple developer site. to get them go to the mac developer cent...
Browser security
secure development guidelinesthe following content will likely see significant revision, though can be used as a reference for security best practices to follow when developing code for mozilla.security and the jar protocolthis article di...
Gecko object attributes
e. other possible values are "polite", "assertive", and "rude", which is a suggestion for the policy when interrupting the user for changes to this region. please see the aria states and properties module for more information. additional information may be provide by the object attributes atomic and relevant. applied to: any role exposed in aria: aria-live relevant space delimited string with
keywords describing what kinds of changes in the subtree are informational, as opposed to presentational. if not specified, the default should be considered "additions text", which indicates that newly created objects and changes to text and text equivalents should be considered relevant, and that the hiding or removal of items is not. please see the aria states and properties module for more informa...
Accessibility API Implementation Details
we provide for them the support of these products on windows, linux/unix and os x platforms.at developmentthe accessibility of computer software has seen drastic improvements over the past two decades. ...
The Places database
es the id number of the corresponding record in moz_places. moz_bookmarks_roots: lists special folders that are the root folders of certain content types in the bookmarks system. the records in this table are mapped to records in the moz_bookmarks table. bookmarks, folders and separators are descendants of the bookmarks root, while tags and tagged uris are descendants of the tag root. moz_
keywords: this table is a unique list of
keywords. the moz_bookmarks table has a
keyword_id column that maps to a record in moz_
keywords table. see manipulating bookmarks using places for more information. annotation tables moz_anno_attributes: contains the names of all the annotations in the system and a name id. there should be relatively few unique names. moz_annos: contains the values o...
Retrieving part of the bookmarks tree
if you have a complex query the root will be a nsinavhistoryqueryresultnode. before accessing the children of any result container, you must first open it, and then you can iterate the children. as long as the container is open, it will listen for notification...
Places
he tagging service. using the places history service how to access history information using the places api. using the places favicon service how to manipulate favicons using the places api. using the places livemark service how to create and manage livemarks. using the places annotation service how to work with the annotation service. using the places
keywords api how to manage places
keywords querying places how to query the bookmarks and history system with specific parameters. retrieving part of the bookmarks tree how to fetch a section of the bookmarks tree using queries. displaying places information using views how to use places views to display places data in your own applications or extensions.
FUEL
ox 3. fuel is about making it easier for extension developers to be productive, by minimizing some of the xpcom formality and adding some "modern" javascript ideas. we want to start with areas that will provide the most benefit. fuel has a fueliapplication interface that implements all the functions of extiapplication. the library has also been implemented in thunderbird ("steel") and in seamon
key ("smile"). objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel applicat...
SMILE
smile is about making it easier for extension developers to be productive, by minimizing some of the xpcom formality and adding some "modern" javascript ideas. we want to start with areas that will provide the most benefit. smile has a smileiapplication interface that implements all the functions of extiapplication. the library has also been implemented in firefox ("fuel") and in thunderbird ("steel"). ...
STEEL
ider using the functions found in appconstants.jsm or services.jsm instead steel is the scriptable thunderbird easy extension library. it is a fuel-like set of interfaces to facilitate thunderbird extension development. currently, steel has an steeliapplication interface that implements all the functions of extiapplication. the library has also been implemented in firefox ("fuel") and in seamon
key ("smile"). objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code. the ob...
XML Extras
mented. thad hoffman has written a document that shows how you can mimic xml data islands in mozilla. edmond woychowsky has also written articles on xml data islands in mozilla: "make xml data islands work in mozilla", "build cross-browser xml paging code" and "implement a flexible shopping cart with xml and asp". the mozilla developer center has several pages for xmlhttprequest. ...
Bundling multiple binary components
and when registered by xpcom, the code would sniff the runtime version and operating system then the stub load the appropriate "real" xpcom component for the current configuration. it's pretty simple to do and the concept can be used to load third-party shared libraries (dll, so, dylib) used in xpcom components. in this case, we would use the stub to load the right binary component instead. some
key points: the real components have the same iids but have different filenames. one for each version of gecko and os platform. the real components are not in the "components" folder, but are in a side folder ("libraries" in the sample). the real components are manually loaded and registered using the stub ("krealcomponent" in the sample). this approach uses one binary component for each versi...
XPCOM array guide
n the array, so that the enumerator can outlive the array. to create the enumerator, use ns_newarrayenumerator(nsisimpleenumerator**, const nscomarray<t>&). for example: // melements is an nscomarray<nsielement> nsfoo::getelements(nsisimpleenumerator** aresult) { return ns_newarrayenumerator(aresult, melements); } deleting objects requires gecko 6.0(firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) introduces the removeobjectsat() method to nscomarray<t>. this lets you delete multiple objects from the array at once by specifying the index to the first item to delete as well as the number of items to delete. for example, to remove three objects, starting at the third object in the array (that is, the object with index value 2...
XPCOM changes in Gecko 2.0
component prototype // must have a .classid which is used to create it. const nsgetfactory = xpcomutils.generatensgetfactory([mycomponent]); a component may implement backwards compatibility with gecko 1.9.2 by dynamically detecting which symbols are exported by xpcomutils.jsm and exporting the correct function: /** * xpcomutils.generatensgetfactory was introduced in mozilla 2 (firefox 4, seamon
key 2.1). * xpcomutils.generatensgetmodule was introduced in mozilla 1.9 (firefox 3.0). */ if (xpcomutils.generatensgetfactory) var nsgetfactory = xpcomutils.generatensgetfactory([mycomponent]); else var nsgetmodule = xpcomutils.generatensgetmodule([mycomponent]); binary components binary components must be listed explicitly in a manifest using a binary-component directive: binary-component c...
An Overview of XPCOM
termine if they can be unloaded. another benefit of using the nsisupports interface is that you can support other interfaces as they are introduced. as we'll show when we discuss nsiclassinfo, some factories support querying information about the underlying implementation, such as what language the object is written in, interfaces that the object supports, etc. this kind of "future-proofing" is a
key advantage that comes along with deriving from nsisupports. xpidl and type libraries an easy and powerful way to define an interface - indeed, a requirement for defining interfaces in a cross-platform, language neutral development environment - is to use an interface definition language (idl). xpcom uses its own variant of the corba omg interface definition language (idl) called xpidl, which all...
Creating the Component Code
of the xpcom object itself. as you can see in onion peel view of xpcom component creation, the main accessor for the xpcom object is createinstance, which is expected to return the object that matches a given cid and iid 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 i...
Packaging WebLock
necessary installation and trigger scripts, you are ready to distribute your component so others can install it in their gecko applications. in mozilla and netscape browsers, xpinstall makes this process especially easy by providing the file format (xpi) and the necessary installation scripts for doing a web-based installation. as weblock installation script demonstrates, xpinstall uses special
keywords to refer to common installation directories such as components in a generalized, cross-platform way. if you are installing weblock in an gecko-based application for which xpinstall is not available, then you will have to devise a separate installation scheme. we leave this as an exercise for the reader. note: install-object-methods the methods are available on the main install object, wh...
XPCOM guide
document the term array refers to a container for multiple objects with a numeric, zero-based index.xpcom changes in gecko 2.0several changes that affect xpcom component compatibility are taking place in gecko 2. this article details those changes, and provides suggestions for how to update your code.xpcom hashtable guidea hashtable is a data construct that stores a set of items. each item has a
key that identifies the item. items are found, added, and removed from the hashtable by using the
key. hashtables may seem like arrays, but there are important differences:xpcom stream guidein mozilla code, a stream is an object which represents access to a sequence of characters. it is not that sequence of characters, though: the characters may not all be available when you read from the stream. ...
Components.utils.Sandbox
sandboxname a string value which identifies the sandbox in about:memory (and possibly other places in the future). this property is optional, but very useful for tracking memory usage of add-ons and other javascript compartments. a recommended value for this property is an absolute path to the script responsible for creating the sandbox. as of gecko 13 (firefox 13.0 / thunderbird 13.0 / seamon
key 2.10), if you don't specify a sandbox name it will default to the caller's filename. sandboxprototype a prototype object for the sandbox. the sandbox will inherit the contents of this object if it's provided. passing a content window object, setting wantxrays:true (default) and using an extended principal provides a clean, isolated execution environment in which javascript code that needs...
Components.utils
a deadobjectproxy. lookupmethod() looks up a native (i.e. declared in the interface) method or property of an xpcom object. serves the same purpose as xpcnativewrapper. makeobjectpropsnormal() ensures that all functions come from the specified object's scope, and aren't cross-compartment wrappers. may only be called from javascript code. nondeterministicgetweakmap
keys() return the
keys in a weak map. this operation is non-deterministic because it is affected by the scheduling of the garbage collector and the cycle collector. this should only be used to write tests of the interaction of the gc and cc with weak maps. obsolete since gecko 45 the function was moved to threadsafechromeutils nukesandbox() recomputewrappers()...
PyXPCOM
sing pyxpcom community python-xpcom bindings mailing list (activestate) #pyxpcom on irc.mozilla.org source code the pyxpcom code is available here: http://hg.mozilla.org/pyxpcom/ to build pyxpcom, see building pyxpcom. related topics xpcom pydom: replace javascript with python python-spidermon
key ...
nsDirectoryService
see also using nsidirectoryservice nsiproperties.get() nsidirectoryserviceprovider ...
IJSDebugger
js/ductwork/debugger/ijsdebugger.idlscriptable provides the javascript debugger service. you should usually interface with this using the javascript code module instead of directly. see the javascript debugger api guide for details. 1.0 66 introduced gecko 9.0 inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamon
key 2.6) implemented by: @mozilla.org/jsdebugger;1 as a service: var jsdebugger = components.classes["@mozilla.org/jsdebugger;1"] .createinstance(components.interfaces.ijsdebugger); note: you should almost never directly use this service; instead, you should use the javascript code module that does this for you. the only time you should directly use this interface to create the debugger objec...
amIInstallCallback
toolkit/mozapps/extensions/amiinstalltrigger.idlscriptable a callback function that web pages can implement to be notified when triggered installs complete. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void oninstallended(in astring aurl, in print32 astatus); methods oninstallended() called when an install completes or fails. void oninstallended( in astring aurl, in print32 astatus ); parameters aurl the url of the add-on being installed. astatus 0 if the install was successful or negative if not. ...
amIInstallTrigger
toolkit/mozapps/extensions/amiinstalltrigger.idlscriptable called when an install completes or fails. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview boolean enabled(); boolean install(in nsivariant aargs, [optional] in amiinstallcallback acallback); boolean installchrome(in pruint32 atype, in astring aurl, in astring askin); deprecated since gecko 2.0 boolean startsoftwareupdate(in astring aurl, [optional] in print32 aflags); deprecated since gecko 2.0 boolean updateenabled(); deprecated since gecko 2.0 constants retained for backwards compatibility. constant value description skin 1...
amIWebInstallListener
tered amiwebinstalllistener is used to notify about new installs triggered by websites. the default implementation displays a confirmation dialog when add-ons are ready to install and uses the observer service to notify when installations are blocked. ...
amIWebInstallPrompt
toolkit/mozapps/extensions/amiwebinstalllistener.idlscriptable called when installation by websites is currently disabled. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5) method overview void confirm(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow. methods confirm() gets a confirmation that the user wants to start the installs. void confirm( in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint32 acount optional ); parameters awindo...
amIWebInstaller
toolkit/mozapps/extensions/amiwebinstaller.idlscriptable this interface is used to allow web pages to start installing add-ons. ...
imgICache
that means that using getservice in order to obtain it will yield incorrect results. ...
imgIRequest
modules/libpr0n/public/imgirequest.idlscriptable please add a summary to this article. inherits from: nsirequest last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5) method overview void cancelandforgetobserver(in nsresult astatus); imgirequest clone(in imgidecoderobserver aobserver); void decrementanimationconsumers(); imgirequest getstaticrequest(); void incrementanimationconsumers(); void lockimage(); void requestdecode(); void unlockimage(); attributes attribute type description corsmode long the cors mode that this image was loaded with. read only. decoderobserver imgidecoderobserver read only. image imgicontainer the image container. read only. imageprincipal nsiprincipal the principal gotten from the channel the...
inIDOMUtils
layout/inspector/inidomutils.idlscriptable dom utility functions. ...
jsdIStackFrame
js/jsd/idl/jsdidebuggerservice.idlscriptable please add a summary to this article. inherits from: jsdiephemeral last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) strict mode is on. warnings reported as errors. makes eval() use the last object on its 'obj' param's scope chain as the ecma 'variables object'. private data for this object is an nsisupports object. attempting to alter this bit will result in an ns_error_illegal_value. opt_* values above, or'd together. last version set on this context. scripts typically select this with the "language" attribute. see the version_* consts on jsdidebuggerservice. unique tag among all valid jsdicontext objects, useful as a hash
key. private data for this context, if it is an nsisupports, |null| otherwise. retrieve ...
mozIAsyncFavicons
simply queryinterface() the nsifaviconservice to this interface. ...
mozIAsyncHistory
toolkit/components/places/moziasynchistory.idlscriptable this interface allows you to add multiple visits to a single url in a batch. ...
mozIColorAnalyzer
preference is given to colors that are more interesting. it avoids the background color if it can be discerned and ignores sufficiently transparent colors. this is intended to be used on favicon images. larger images take longer to process, especiall...
mozIJSSubScriptLoader
js/xpconnect/idl/mozijssubscriptloader.idlscriptable this interface can be used from privileged javascript to load and run javascript code from the given url at runtime. 66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 28 (firefox 28 / thunderbird 28 / seamon
key 2.25 / firefox os 1.3) implemented by: @mozilla.org/moz/jssubscript-loader;1. to get this service, use: var mozijssubscriptloader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .getservice(components.interfaces.mozijssubscriptloader); note: see components.utils.import for another way to import javascript code. method overview jsval loadsubscript(in string url, in object targetobj optional, in string charset optional); ...
mozIPlaceInfo
warning: this interface is experimental and will change after gecko 2.0. toolkit/components/places/public/moziasynchistory.idlscriptable this interface provides additional info for a places entry 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) attributes attribute type description frecency long read only: the frecency of the place. guid string read only: the globally unique id of the place. placeid long read only: the machine-local (internal) id of the place. title string read only: the title associated with the place. uri nsiuri read only: the uri of the place. visits mozivisitinfo[] read only: an array of mozivisitinfo objects for the place. see also moziasync...
mozIPlacesAutoComplete
toolkit/components/places/public/moziplacesautocomplete.idlscriptable this interface provides some constants used by the places autocomplete search provider as well as methods to track opened pages for autocomplete purposes. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void registeropenpage(in nsiuri auri); void unregisteropenpage(in nsiuri auri); constants constant value description match_anywhere 0 match anywhere in each searchable term. match_boundary_anywhere 1 match first on word boundaries, and if we do not get enough results, then match anywhere in each searchable term. match_boundary 2 match on word boundaries in each searchable...
mozIRepresentativeColorCallback
toolkit/components/places/mozicoloranalyzer.idlscriptable provides callback methods for mozicoloranalyzer 1.0 66 introduced gecko 17.0 inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamon
key 2.14) method overview void oncomplete(in boolean success, [optional] in unsigned long color); methods oncomplete() will be called when color analysis finishes. void oncomplete( in boolean success, [optional] in unsigned long color ); parameters success true if analysis was successful, false otherwise. analysis can fail if the image is transparent, imageuri doesn't resolve to a valid image, or the image is too big. color the representative color as an integer in rgb form. e.
mozIStorageCompletionCallback
this interface should be implemented to handle callbacks from asynchronous storage api routines. storage/public/mozistoragecompletioncallback.idlscriptable please add a summary to this article. last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) inherits from: nsisupports method overview void complete(); methods complete() called when an asynchronous storage routine has completed. void complete(); parameters none. ...
mozIStorageConnection
le this interface represents a database connection attached to a specific file or an in-memory database. it is the primary interface for interacting with a database, including creating prepared statements, executing sql, and examining database errors. 1.0 68 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) for a general overview on how to use this interface, see storage. method overview void asyncclose([optional] in mozistoragecompletioncallback acallback); void begintransaction(); void begintransactionas(in print32 transactiontype); mozistoragestatement clone([optional] in boolean areadonly); void close(); void committransaction(); ...
mozIStorageError
the mozistorageerror interface represents errors returned by the storage api, offering attributes to obtain the error code as well as a human-readable error message corresponding to the error that occurred. storage/public/mozistorageerror.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) inherits from: nsisupports attributes attribute type description message autf8string a human readable error string with details; this may be null if no details are available. read only. result long one of the error code values listed under constants on this page. constants constant value de...
mozIStorageProgressHandler
the mozistorageprogresshandler interface lets storage consumers receive callbacks during the execution of sqlite requests. storage/public/mozistorageprogresshandler.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) inherits from: nsisupports method overview boolean onprogress(in mozistorageconnection aconnection); methods onprogress() the onprogress() method is called periodically while an sqlite operation is ongoing. this allows you to monitor the progress and possibly display status information to the user. boolean onprogress( in mozistorageconnection aconnection ); parameters <tt>aconnection</tt> a mozistorageconnection connection indicating the connection for which the callback w...
mozIStorageResultSet
the mozistorageresultset interface represents a set of results from a storage statement. storage/public/mozistorageresultset.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) inherits from: nsisupports method overview mozistoragerow getnextrow(); methods getnextrow() returns the next row from the result set. mozistoragerow getnextrow(); parameters none. return value a mozistoragerow object containing the next row from the result set, or null if there are no more results. see also storage mozistorageconnection mozistoragestatement ...
mozIStorageRow
the mozistoragerow interface represents a row in the result set from a storage database query. storage/public/mozistoragerow.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) inherits from: mozistoragevaluearray method overview nsivariant getresultbyindex(in unsigned long aindex); nsivariant getresultbyname(in autf8string aname); methods getresultbyindex() returns the value from a specific column in the row, using a zero-based index to identify the column. nsivariant getresultbyindex( in unsigned long aindex ); parameters aindex the zero-based index of the column number whose value is to be returned. return value an nsivariant object containi...
mozIStorageStatementCallback
the mozistoragestatementcallback interface represents a callback handler that the storage api calls with result, error, and completion notifications while handling asynchronous database queries. storage/public/mozistoragestatementcallback.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) inherits from: nsisupports method overview void handlecompletion(in unsigned short areason); void handleerror(in mozistorageerror aerror); void handleresult(in mozistorageresultset aresultset); constants constant value description reason_finished 0 the statement has finished executing normally. reason_canceled 1 the statement stopped executing b...
nsICacheListener
the status parameter equals ns_ok on success. see nsicacheservice for accessgranted values. ...
nsICacheMetaDataVisitor
netwerk/cache/nsicacheentrydescriptor.idlscriptable this interface is used for visiting the meta data elements for a specified cache entry. inherits from: nsisupports last changed in gecko 1.7 method overview boolean visitmetadataelement(in string
key, in string value); methods visitmetadataelement() this method is called for each
key/value pair in the meta data for a cache entry. boolean visitmetadataelement( in string
key, in string value ); parameters
key the
key for visiting the meta data for a cache entry. value the value for visiting the meta data for a cache entry. return value returns true if the provided
key/value finds a cache entry, otherwise returns false. see also nsicache nsicacheentrydescriptor ...
nsICancelable
netwerk/base/public/nsicancelable.idlscriptable this interface provides a means to cancel an operation that is in progress. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void cancel(in nsresult areason); methods cancel() call this method to request that this object abort whatever operation it may be performing. void cancel( in nsresult areason ); parameters areason a failure code indicating why the operation is being canceled. it is an error to pass a success code. ...
nsICategoryManager
xpcom/components/nsicategorymanager.idlscriptable this interface provides access to a data structure that holds a list of name-value pairs, called categories, where each value is a list of strings. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) implemented by: @mozilla.org/categorymanager;1. to use this service, use: var categorymanager = components.classes["@mozilla.org/categorymanager;1"] .getservice(components.interfaces.nsicategorymanager); method overview string addcategoryentry(in string acategory, in string aentry, in string avalue, in boolean apersist, in boolean areplace); void deletecategory(in string acategory); void deletecategoryentry(in string acategory, in st...
nsIChannel
netwerk/base/nsichannel.idlscriptable this interface allows clients to construct 'get' requests for specific protocols, and manage them in a uniform way. inherits from: nsirequest last changed in gecko 19.0 (firefox 19.0 / thunderbird 19.0 / seamon
key 2.16) once a channel is created (via nsiioservice.newchannel()), parameters for that request may be set by using the channel attributes, or by calling queryinterface() to retrieve a subclass of nsichannel for protocol-specific parameters. then, the uri can be fetched by calling open() or asyncopen(). after a request has been completed, the channel is still valid for accessing protocol-specific results. for example, queryinterfacing to nsihttpchannel allows response headers to be retrieved for the corresponding http transaction. ...
nsIChannelPolicy
netwerk/base/public/nsichannelpolicy.idlscriptable a container for policy information to be used during channel creation. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) this interface exists to allow the content policy mechanism to function properly during channel redirects. channels can be created with this interface placed in the property bag and upon redirect, the interface can be transferred from the old channel to the new channel. attributes attribute type description contentsecuritypolicy nsisupports a nsicontentsecuritypolicy object to determine if the load should be allowed. loadtype unsigned long indicates what type of content is being loaded, for example nsiconten...
nsIChromeFrameMessageManager
content/base/public/nsimessagemanager.idlscriptable handles loading of content in a remote chrome frame. 1.0 66 introduced gecko 2.0 inherits from: nsiframemessagemanager last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void loadframescript(in astring aurl, in boolean aallowdelayedload); void removedelayedframescript(in astring aurl); methods loadframescript() loads a script into the remote frame. void loadframescript( in astring aurl, in boolean aallowdelayedload ); parameters aurl the url of the script to load into the frame; this must be an absolute url, but data: urls are supported. aallowdelayedload if true, the script will be loaded when the...
nsIChromeRegistry
converts a chrome url into a canonical representation by ensuring that the filename portion of the url is included, as in chrome://package/provider/file. this is useful because chrome urls are allowed to be specified in "shorthand", leaving the "file" portion off. in that case, the url is expanded to chrome://package/p...
nsIClipboardOwner
the nsiclipboardowner interface notifies the clipboard owner about the current status of ownership of the clipboard transferable at given situation and time. widget/public/nsiclipboardowner.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) inherits from: nsisupports method overview void losingownership(in nsitransferable atransferable); methods losingownership() this method notifies the owner of the clipboard transferable that the transferable is being removed from the clipboard. it results into a ns_ok if there are no errors. void losingownership( in nsitransferable atransferable ); parameters atransferable the transferable. see also nsiclipboard nsitransferable ...
nsICommandLine
it/components/commandlines/public/nsicommandline.idlscriptable represents the command line used to invoke a xul application. this may be the original command line of this instance or a command line provided remotely by another instance of the application. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) components may implement the nsicommandlinehandler interface to add custom command line handling behavior. definitions arguments any values found on the command line. switches flags. in normalized form, these are preceded by a single dash. some flags may take parameters; for example: "-url <param>" or "-install-xpi <param>". method overview long findflag(in astring aflag, in boolean ac...
nsICommandLineHandler
toolkit/components/commandlines/public/nsicommandlinehandler.idlscriptable handles arguments on the command line of a xul application. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) each command line handler is registered in the category "command-line-handler". the entries in this category are read in alphabetical order, and each category value is treated as a service contract id implementing this interface. by convention, handlers with ordinary priority should begin with "m". example: category entry value command-line-handler b-jsdebug @mozilla.org/venkman/clh;1 command-line-handler c-extensions ...
nsICommandLineRunner
the nsicommandlinerunner is an extension of nsicommandline used to initialize command lines and run them by processing the comand line handlers. toolkit/components/commandlines/public/nsicommandlinerunner.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) inherits from: nsicommandline method overview void init(in long argc, in nscharptrarray argv, in nsifile workingdir, in unsigned long state); void run(); void setwindowcontext(in nsidomwindow awindow); attributes attribute type description helptext autf8string process and combine the help text provided by each command-line handler. read only. methods init() called with the argc/argv combination passed to main. it assumes a native character ...
nsIComponentManager
xpcom/components/nsicomponentmanager.idlscriptable this interface provides methods to access factory objects and instantiate instances of classes. ...
nsICompositionStringSynthesizer
you need to use nsitextinputprocessor instead of this. every instance is associated with a dom window at created by nsidomwindowutils.createcompositionstringsynthesizer(). to create an instance for this: var domwindowutils = window.windowutils; var compositionstringsynthesizer = domwindowutils.createcompositionstringsynthesizer(); for example, when you cr...
nsIContentPref
name astring read only. value nsivariant read only. see also nsicontentprefservice2 nsicontentprefcallback2 ...
nsIContentPrefCallback2
this will be called exactly once for each method invocation, and afterward no other callback methods will be called. void handlecompletion( in unsigned short reason );...
nsIContentPrefService
use the asynchronous interface nsicontentprefservice2 instead. provides a way for extensions and browser code to save preferences for specific websites. preferences are saved as
key/value pairs on a per-website basis. dom/interfaces/base/nsicontentprefservice.idlscriptable please add a summary to this article. last changed in gecko 2 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) inherits from: nsisupports implemented by: @mozilla.org/content-pref/service;1. to create an instance, use: var contentprefservice = components.classes["@mozilla.org/content-pref/service;1"] .getservice(components.interfaces.nsicontentprefservice); method overview void addobserver(in astring aname, in nsicontentprefobserver aobserver); nsivariant getpref(in nsivar...
nsIContentPrefService2
dom/interfaces/base/nsicontentprefservice2.idlscriptable asynchronous api for content preferences 1.0 66 introduced gecko 20.0 inherits from: nsisupports last changed in gecko 20.0 (firefox 20.0 / thunderbird 20.0 / seamon
key 2.17) description content preferences allow the application to associate arbitrary data, or "preferences", with specific domains, or web "content". specifically, a content preference is a structure with three values: a domain with which the preference is associated, a name that identifies the preference within its domain, and a value. (see nsicontentpref below.) for example, if you want to remember the user's preference for a certain zoom level on www.mozilla.org pages, you might store a preference whose domain is "www.mozilla.org", whos...
nsIContentSecurityPolicy
content/base/public/nsicontentsecuritypolicy.idlscriptable describes an xpcom component used to model and enforce content security policies. ...
nsIContentView
content/base/public/nsiframeloader.idlscriptable represents a scrollable content view whose contents are actually drawn by a separate process; this is part of the electrolysis multi-process support framework. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) see working with content views for details on how to use this api. note: currently, only <frame> and <iframe> elements are handled as content views. support for using this api for all scrollable elements is coming; see bug 618975 for details. method overview void scrollby(in float dxpx, in float dypx); void scrollto(in float xpx, in float ypx); void setscale(in float xscale, in float yscale); ...
nsIConverterInputStream
xpcom/io/nsiconverterinputstream.idlscriptable a unichar input stream that wraps an input stream. this allows reading unicode strings from a stream, automatically converting the bytes from a selected character encoding. 1.0 66 introduced gecko 1.8 inherits from: nsiunicharinputstream last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) implemented by: @mozilla.org/intl/converter-input-stream;1. to create an instance, use: var converterinputstream = components.classes["@mozilla.org/intl/converter-input-stream;1"] .createinstance(components.interfaces.nsiconverterinputstream); method overview void init(in nsiinputstream astream, in string acharset, in long abuffersize, in prunichar areplacementchar); consta...
nsIConverterOutputStream
xpcom/io/nsiconverteroutputstream.idlscriptable this interface allows writing strings to a stream, doing automatic character encoding conversion. 1.0 66 introduced gecko 1.8 inherits from: nsiunicharoutputstream last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) implemented by: @mozilla.org/intl/converter-output-stream;1. to create an instance, use: var converteroutputstream = components.classes["@mozilla.org/intl/converter-output-stream;1"] .createinstance(components.interfaces.nsiconverteroutputstream); method overview void init(in nsioutputstream aoutstream, in string acharset, in unsigned long abuffersize, in prunichar areplacementcharacter); methods init() initialize this stream. must be called be...
nsICookieService
topic subject data cookie-changed broadcast whenever the cookie list changes in some way. there are four possible data strings for this notification; one notification will be broadcast for each change. depending on the data value, either an nsicookie2 interface pointer representing the cookie object that changed, or an nsiarray of nsicookie2 objects. a
keyword indicating what was done to the affected cookie. deleted a cookie was deleted. the subject is the deleted cookie. added a cookie was added. the subject is the added cookie. changed a cookie was changed. the subject is the changed cookie. batch-deleted a set of cookies were deleted as part of a purge operation. this typically happens because they ha...
nsICookieStorage
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this interface represents the storage repository for cookies. modules/plugin/base/public/nsicookiestorage.idlnot scriptable please add a summary to this article. ...
nsICryptoHash
e used to compute a cryptographic hash function of some data. you can, for example, calculate the sha256 hash of a file to determine if it contains the data you think it does. the hash algorithms supported are md2, md5, sha-1, sha-256, sha-384, and sha-512. ...
nsICycleCollectorListener
xpcom/base/nsicyclecollectorlistener.idlscriptable interface to pass to the cycle collector to get information about the cycle collector graph while it is being built. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) the order of calls will be call to begin(); then for every node in the graph a call to noteobject() and calls to noteedge() for every edge starting at that node; then a call to begindescriptions(); then for every black node in the cycle collector graph a call to either describerefcountedobject() or to describegcedobject(); and then a call to end(). if begin() returns an error none of the other functions will be called. method overview void begin(); void begindescri...
nsIDOMChromeWindow
dom/interfaces/base/nsidomchromewindow.idlscriptable this interface is implemented on the window object in chrome. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void beginwindowmove(in nsidomevent mousedownevent); void getattention(); void getattentionwithcyclecount(in long acyclecount); void maximize(); void minimize(); void notifydefaultbuttonloaded(in nsidomelement defaultbutton); void restore(); void setcursor(in domstring cursor); attributes attribute type description browserdomwindow nsibrowserdomwindow the related nsibrowserdomwindow instance which provides access to yet another layer of utility functions by chrome script. it will be null for domwindows not corresponding to br...
nsIDOMClientRect
dom/interfaces/base/nsidomclientrect.idlscriptable represents a rectangular box. the type of box is specified by the method that returns such an object. it is returned by functions like element.getboundingclientrect. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) attributes attribute type description bottom float y-coordinate, relative to the viewport origin, of the bottom of the rectangle box. read only. height float height of the rectangle box (this is identical to bottom minus top). read only. left float x-coordinate, relative to the viewport origin, of the left of the rectangle box. read only. right ...
nsIDOMNavigatorDesktopNotification
dom/interfaces/notification/nsidomnavigatordesktopnotification.idlscriptable property that extends the navigator object. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) property that extends the navigator object. attributes attribute type description moznotification nsidomdesktopnotificationcenter read only. see also nsidomdesktopnotificationcenter ...
nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscriptable this interface represents the events sent with progress information while uploading data using the xmlhttprequest object. 1.0 66 introduced gecko 1.9.1 deprecated gecko 22 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) the nsidomprogressevent is used in the media elements (<video> and <audio>) to inform interested code of the progress of the media download. this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent. method overview void initprogressevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean lengthcomputablearg, in unsi...
nsIDOMStorageItem
dom/interfaces/storage/nsidomstorageitem.idlscriptable this interface represents an object in dom storage. this is for session storage. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) gecko 1.9.1 note starting in gecko 1.9.1 (firefox 3.5), this is only used for session storage; previously, it was also used for global storage. attributes attribute type description secure boolean if true, the item was stored for an https page. note: all items, regardless of whether they were stored for an http page or an https page, are visible from https pages. however, http pages can only see items stored from http pages, and will not see items stored from https pages. as such, this a...
nsIDOMStorageList
dom/interfaces/storage/nsidomstoragelist.idlscriptable this interface is used to access the contextual storage areas used by globalstorage by domain. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview nsidomstorage nameditem(in domstring domain); methods nameditem() called when the list of available access points changes. nsidomstorage nameditem( in domstring domain ); parameters domain the name of the domain for whom to return the storage object. return value the nsidomstorage object representing the data store for the specified domain.see also dom storage structured client-side storage (html 5 specification) nsidomwindow ...
nsIDOMStorageWindow
dom/interfaces/storage/nsidomstoragewindow.idlscriptable this interface provides access to a dom window's client side storage objects. all dom windows inherit from this interface. 1.0 66 introduced gecko 1.8.1 obsolete gecko 8.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) in gecko 8.0 this interface has been merged into nsidomwindow, and this interface has been removed. attributes attribute type description globalstorage nsidomstoragelist global storage, accessible by domain. read only. localstorage nsidomstorage local storage for the current browsing context. data stored in local storage may only be accessed from the same origin that inser...
nsIDOMWindow
erface is the primary interface for a window object. it represents a single window object that may contain child windows if the document in the window contains an html frameset document, or if the document contains iframe elements. 66 introduced gecko 1.0 deprecated gecko 44 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) starting with firefox 44, this file is empty as its features were either no longer used or are only available from c++ code; see dom/base/nspidomwindow.h for those. while this interface is not officially defined by any standard bodies, it originates from the de-facto dom level 0 standard. starting in firefox 3, dom windows are actually based on nsidomwindow2, which is a subclass of nsi...
nsIDOMXULElement
t's width attribute. methods blur() attempts to remove focus from the element. void blur(); parameters none. click() unless the element is disabled, sends mouse events that simulate the effect of clicking the mouse on the element, then calls the docommand() method. void click(); parameters none. docommand() generates and dispatches a basic command event, as if the element was clicked with no
keyboard modifiers. void docommand(); parameters none. focus() attempts to set focus to the element; will not work for example for disabled elements. void focus(); parameters none. getelementsbyattribute() searches the dom subtree for elements with the given attribute that are not in a namespace. nsidomnodelist getelementsbyattribute( in domstring name, in domstring value ); parameters name t...
nsIDOMXULLabeledControlElement
dom/interfaces/xul/nsidomxullabeledcontrolel.idlscriptable this interface is used as a basis for labeled control elements in xul. inherits from: nsidomxulcontrolelement last changed in gecko 1.7 attributes attribute type description access
key domstring this should be set to a character that is used as a shortcut
key. this should be one of the characters that appears in the label for the element. when the user presses the appropriate modifier and the access
key, the element will be focused and/or activated from anywhere in the window. on non-macintosh platforms, the character on the element's label matching the access
key is underlined. note: the access
key is copied to any associated label element. command domstring this property reflects the element's command attribute...
nsIDOMXULSelectControlItemElement
dom/interfaces/xul/nsidomxulselectcntrlitemel.idlscriptable please add a summary to this article. inherits from: nsidomxulelement last changed in gecko 1.7 attributes attribute type description access
key domstring command domstring control nsidomxulselectcontrolelement read only. crop domstring disabled boolean image domstring label domstring selected boolean read only. value domstring ...
nsIDataSignatureVerifier
security/manager/ssl/public/nsidatasignatureverifier.idlscriptable an interface for verifying that a given string of data was signed by the private
key matching the given public
key. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview boolean verifydata(in acstring adata, in acstring asignature, in acstring apublic
key); methods verifydata() verifies that the data matches the data that was used to generate the signature. boolean verifydata( in acstring adata, in acstring asignature, in acstring apublic
key ); parameters adata the data to be tested. asignature the signature of the data, base64 encoded. apublic
key the public part of the
key used for signing, der encoded then base64 encoded. r...
nsIDebug
expression that failed. afile file containing assertion. aline line number of assertion. break() requests the software break into a debugger. if no debugger is running then this usually results in a program crash. however, on windows a dialog is first presented giving the user the option of aborting, breaking, or ignoring the request. the dialog can be suppressed by use of the windbgdlg registry
key. this allows the debugger to be attached before the software break. void break( in string afile, in long aline ); parameters afile file containing break request. aline line number of break request. warning() shows a warning. void warning( in string astr, in string afile, in long aline ); parameters astr warning message. afile file containing warning. aline line number of warning. ...
nsIDeviceMotion
xpcom/system/nsidevicemotion.idlscriptable this interface is used to implement accelerometer support. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) note: this interface was named nsidevicemotion prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3). method overview void addlistener(in nsidevicemotionlistener alistener); void addwindowlistener(in nsidomwindow awindow); native code only! void removelistener(in nsidevicemotionlistener alistener); void removewindowlistener(in nsidomwindow awindow); native code only! methods addlistener() when called, the accelerometer support implementation must begin to notify the specified nsidevicemotionlistener ...
nsIDeviceMotionData
xpcom/system/nsidevicemotion.idlscriptable this interface provides information about device motion. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) note: this interface was named nsidevicemotiondata prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3). attributes attribute type description type unsigned long the type of motion data reported by this object; see motion type constants for possible values. read only. x double the amount of tilt along the x axis. read only. y double the amount of tilt along the y axis. read only. z double the amount of tilt along the z axis. read only. the values of x, y, and z can range from -1 to 1, where 0 mean...
nsIDeviceMotionListener
xpcom/system/nsidevicemotion.idlscriptable this interface can be implemented by clients that want to be notified orientation or acceleration changes on supported devices. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) method overview void onmotionchange(in nsidevicemotiondata amotiondata); methods onmotionchange() called when new orientation or acceleration data is available. void onmotionchange( in nsidevicemotiondata amotiondata ); parameters aacceleration the nsidevicemotiondata object describing updated motion information. see also mozorientation nsidomorientationevent nsidevicemotion nsidevicemotiondata ...
nsIDialogCreator
embedding/base/nsidialogcreator.idlscriptable please add a summary to this article. ...
nsIDirIndexListener
netwerk/streamconv/public/nsidirindexlistener.idlscriptable this interface is used to receive contents of directory index listings from a protocol. they can then be transformed into an output format (such as rdf, html and so on) inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void onindexavailable(in nsirequest arequest, in nsisupports actxt, in nsidirindex aindex); void oninformationavailable(in nsirequest arequest, in nsisupports actxt, in astring ainfo); methods onindexavailable() called for each directory entry. void onindexavailable( in nsirequest arequest, in nsisupports actxt, in nsidirindex aindex ); parameters arequest the request. actxt opaque parameter aindex new index to add. onin...
nsIDirectoryEnumerator
table this interface provides a means for enumerating the contents of a directory. it is similar to nsisimpleenumerator except the retrieved entries are qi'ed to nsifile, and there is a mechanism for closing the directory when the enumeration is complete. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void close(); attributes attribute type description nextfile nsifile the next file in the sequence. the nextfile attribute is the first element upon the first call. this attribute is null if there is no next element. read only. methods close() closes the directory being enumerated, releasing the system resource. it is safe t...
nsIDirectoryIterator
the nsidirectoryiterator interface provides a way to iterate over the entries in a directory. xpcom/obsolete/nsifilespec.idlscriptable please add a summary to this article. ...
nsIDirectoryServiceProvider2
inherits from: nsidirectoryserviceprovider last changed in gecko 0.9.6 method overview nsisimpleenumerator getfiles(in string prop); methods getfiles() the directory service calls this when it gets a request for a prop and the requested type is nsisimpleenumerator. nsisimpleenumerator getfiles( in string prop ); parameters prop the symbolic name of the file list. return value an enumerator for a list of file locations. the elements in the enumeration are nsifile. ...
nsIDiskCacheStreamInternal
netwerk/cache/nsidiskcachestreaminternal.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void closeinternal(); methods closeinternal() we use this method internally to close nsdiskcacheoutputstream under the cache service lock. void closeinternal(); parameters none. ...
nsIDownload
downloads.jsm instead. toolkit/components/downloads/public/nsidownload.idlscriptable this interface describes a download object. download objects are used by the download manager (see nsidownloadmanager to manage files that are queued to download, being downloaded, and finished being downloaded.) inherits from: nsitransfer last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) note: once the download is completed, the download manager stops updating the nsidownload object. completed states are nsidownloadmanager::download_finished, nsidownloadmanager::download_failed, and nsidownloadmanager::download_canceled. attributes attribute type description amounttransferred long long the number of bytes downloaded so far. read only. ...
nsIDragDropHandler
e for communicating with the built-in drag and drop implementation in the content area. use this to register where the listeners should attach (something that implements nspidomeventtarget which is what we end up using under the hood). content/base/public/nsidragdrophandler.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) inherits from: nsisupports method overview void detach(); void hookupto(in nsidomeventtarget attachpoint, in nsiwebnavigation navigator); methods detach() unregisters all handlers related to drag and drop. void detach(); parameters none. hookupto() attaches drag handlers to a specified receiver, setting up callbacks to let built-in behaviors be overridden. void hookupto( in nsid...
nsIDragSession
widget/public/nsidragsession.idlscriptable provides support for interacting with an ongoing drag session during a drag and drop operation. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void getdata( in nsitransferable atransferable, in unsigned long aitemindex ); boolean isdataflavorsupported( in string adataflavor ); attributes attribute type description candrop boolean set the current state of the drag, whether it can be dropped or not. usually the target "frame" sets this so the native system can render the correct feedback. datatransfer nsidomdatatransfer the data transfer object for the current drag operation. dragaction ...
nsIDroppedLinkHandler
dom/base/nsidroppedlinkhandler.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview boolean candroplink(in nsidomdragevent aevent, in prbool aallowsamedocument); astring droplink(in nsidomdragevent aevent, out astring aname, [optional] in boolean adisallowinherit); void droplinks(in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlinkitem alinks); methods candroplink() determines if a link being dragged can be dropped. boolean candroplink( in nsidomdragevent aevent, in prbool aal...
nsIDroppedLinkItem
dom/base/nsidroppedlinkhandler.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) attributes attribute type description url domstring url of the dropped link. name domstring name of the dropped link. type domstring mime-type of the dropped link. see also nsidroppedlinkhandler ...
nsIEffectiveTLDService
own when ahost contains characters disallowed in uris. ns_error_insufficient_domain_levels this exception is thrown if there were insufficient subdomain levels in the hostname to satisfy the requested aadditionalparts value. ns_error_host_is_ip_address this exception is thrown if ahost is a numeric ipv4 or ipv6 address. remarks note: prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1), this method worked if you passed host strings starting with a period ("."). that is no longer the case, since these are not valid host names. you should strip leading periods off host names before passing them to this method. getpublicsuffix() returns the public suffix of a uri. a public suffix is the highest-level domain under which individual domains may be registered; it may therefore...
nsIEventListenerService
content/events/public/nsieventlistenerservice.idlscriptable a service that can be used to get a list of listeners observing events; this is primarily useful for debuggers. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) implemented by: @mozilla.org/eventlistenerservice;1. to create an instance, use: var eventlistenerservice = components.classes["@mozilla.org/eventlistenerservice;1"] .getservice(components.interfaces.nsieventlistenerservice); universalxpconnect privileges are required to use this service. method overview void geteventtargetchainfor(in nsidomeventtarget aeventtarget, [optional] out unsigned long acount, [retval, ar...
nsIExternalURLHandlerService
uriloader/exthandler/nsiexternalurlhandlerservice.idlscriptable the external url handler service is used for finding platform-specific applications for handling particular urls. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview nsihandlerinfo geturlhandlerinfofromos(in nsiuri aurl, out boolean afound); methods geturlhandlerinfofromos() given a url, looks up the handler info from the operating system. this should be overridden by each operating systems implementation. nsihandlerinfo geturlhandlerinfofromos( in nsiuri aurl, out boolean afound ); parameters aurl the url we are looking for. afound was an operating system default handler for this url found? re...
nsIFaviconDataCallback
toolkit/components/places/public/nsifaviconservice.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void oncomplete(in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amimetype); methods oncomplete() called when the required favicon's information is available. it's up to the invoking method to state if the callback is always invoked, or called on success only. check the method documentation to ensure that. the caller will receive the most information we can gather on the icon, but it's not guaranteed that all of them will be set. for som...
nsIFeed
components/feeds/public/nsifeed.idlscriptable this interface represents a single atom or rss (really simple syndication) news feed. it includes attributes that provide information about the feed, as well as access to the items or entries in the feed. 1.0 66 introduced gecko 1.8 inherits from: nsifeedcontainer last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) attributes attribute type description cloud nsiwritablepropertybag2 the cloud element on a feed is used to identify the api endpoint of an rsscloud ping server, which distributes notifications of changes to this feed. enclosurecount long indicates the number of enclosures associated with a feed. generator nsifeedgenerator describ...
nsIFeedContainer
categories nsiarray an array of the categories found in a feed or entry. note: the returned array will contain nsifeedcategory objects, except that interface has not been implemented yet. contributors nsiarray an array of nsifee...
nsIFeedElementBase
toolkit/components/feeds/public/nsifeedelementbase.idlscriptable this interface is a base interface from which several of the other feed access interfaces derive. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) attributes attribute type description attributes nsisaxattributes all the attributes found on the element. most derived interfaces provide convenience accessors for their standard fields, so this is only useful when looking for nonstandard fields. baseuri nsiuri the base uri for the entry or feed. interwiki link ...
nsIFeedEntry
toolkit/components/feeds/public/nsifeedentry.idlscriptable this interface describes a single entry in an rss or atom news feed, providing attributes allowing access to the entry's data. 1.0 66 introduced gecko 1.8 inherits from: nsifeedcontainer last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) attributes attribute type description content nsifeedtextconstruct the full text of the entry's content. this comes from the atom:content and/or content:encoded fields. enclosures nsiarray an array of all the enclosures included in the entry. these are used by podcasts, photocasts, and so forth. mediacontent nsiarray an array of all the enclosures or other media that might be displaye...
nsIFeedGenerator
toolkit/components/feeds/public/nsifeedgenerator.idlscriptable this interface describes the software that generated an rss or atom news feed. 1.0 66 introduced gecko 1.8 inherits from: nsifeedelementbase last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) attributes attribute type description agent astring the name of the software that created the feed. uri nsiuri a uri associated with the generator software. version astring a string indicating the version of the generator software that created the feed. interwiki link ...
nsIFeedPerson
toolkit/components/feeds/public/nsifeedperson.idlscriptable this interface describes an author of or a contributor to an rss or atom feed. 1.0 66 introduced gecko 1.8 inherits from: nsifeedelementbase last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) attributes attribute type description email astring the person's email address. name astring the name of the person. uri nsiuri a uri associated with the person; this is most likely the person's home page. see also nsifeedelementbase interwiki link ...
nsIFeedProcessor
toolkit/components/feeds/public/nsifeedprocessor.idlscriptable this interface parses rss or atom feeds, triggering callbacks based on their contents during and after the processing. 1.0 66 introduced gecko 1.8.1 inherits from: nsistreamlistener last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamon
key 1.1) implemented by: @mozilla.org/feed-processor;1. to create an instance, use: var feedprocessor = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); method overview void parseasync(in nsirequestobserver requestobserver, in nsiuri uri); void parsefromstream(in nsiinputstream stream, in nsiuri uri); void parsefromstring(in astring str, in nsiuri ...
nsIFeedProgressListener
rface defines callbacks used during the processing of an rss or atom feed. programs using the feed content access api do not have to implement any of these callbacks; they are optional, but allow you to provide feedback during the parsing process. 1.0 66 introduced gecko 1.8 inherits from: nsifeedresultlistener last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void handleentry(in nsifeedentry entry, in nsifeedresult result); void handlefeedatfirstentry(in nsifeedresult result); void handlestartfeed(in nsifeedresult result); void reporterror(in astring errortext, in long linenumber, in boolean bozo); methods handleentry() called after each entry or item is processed. if the document is...
nsIFeedResult
toolkit/components/feeds/nsifeedresult.idlscriptable this interface provides access to http and parsing metadata for a feed or entry. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void registerextensionprefix(in astring anamespace, in astring aprefix); attributes attribute type description bozo boolean the feed processor sets the bozo bit when a feed triggers a fatal error during xml parsing. there may still be feed metadata and entries that were parsed before the error occurred. doc nsifeedcontainer the parsed feed or entry. null if a non-feed was processed. headers nsiproperties the...
nsIFeedResultListener
toolkit/components/feeds/public/nsifeedlistener.idlscriptable this interface should be implemented by programs to receive events from the feed parser as parsing progresses. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void handleresult(in nsifeedresult result); methods handleresult() called when feed processing is complete. even if an error occurred during processing, there may be valid data available for feed-level data or entries processed before the error occurred. if you don't care about doing progress display or the like, this is all you need to implement in order to receive the parsed feed. void handleresult( in nsifeedresult result...
nsIFeedTextConstruct
ublic/nsifeedtextconstruct.idlscriptable this interface represents rss or atom feed text fields that may contain plain text, html, or xhtml. some extension elements also include "type" parameters, and this interface could be used to represent those as well. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamon
key 1.1) implemented by: @mozilla.org/feed-textconstruct;1, but users usually don't need to create instances of this directly. various other feed-related interfaces, such as nsifeed, nsifeedentry, and nsifeedcontainer have attributes that return objects implementing nsifeedtextconstruct. method overview nsidomdocumentfragment createdocumentfragment(in nsidomelement element); ast...
nsIFileURL
netwerk/base/public/nsifileurl.idlscriptable provides access to the underlying nsifile object corresponding to a url. the url scheme need not be file:, since other local protocols may map urls to files (e.g., resource:). inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) attributes attribute type description file nsifile get/set nsifile corresponding to this url. the getter returns a reference to an immutable object. callers must clone before attempting to modify the returned nsifile object. note: this constraint might not be enforced at runtime, so beware! the setter clones the nsifile object (allowing the caller to safely modify the nsifile object after setting it on this interface). ...
nsIFileView
t. sort() set the method used for sorting. void sort( in short sorttype, in boolean reversesort ); parameters sorttype one of the sort* constants. reversesort true, results will be sorted in ascending order. ...
nsIFormHistory2
ents/satchel/public/nsiformhistory.idlscriptable a service which holds a set of name/value pairs. the names correspond to form field names, and the values correspond to values the user has submitted. so, several values may exist for a single name. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) note: this interface provides no means to access stored values. stored values are used by the formfillcontroller to generate autocomplete matches. method overview void addentry(in astring name, in astring value); boolean entryexists(in astring name, in astring value); boolean nameexists(in astring name); void removeallentries(); void removeentriesbytimeframe(in long long abeginti...
nsIFrameLoaderOwner
content/base/public/nsiframeloader.idlscriptable represents the owner of an nsiframeloader. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview [noscript, notxpcom] alreadyaddrefed_nsframeloader getframeloader(); void swapframeloaders(in nsiframeloaderowner aotherowner); attributes attribute type description frameloader nsiframeloader the frame loader owned by this nsiframeloaderowner. read only. methods getframeloader() returns the frame loader object owned by this object. [noscript, notxpcom] alreadyaddrefed_nsframeloader getframeloader(); parameters none. return value the nsiframeloader owned by this o...
nsIFrameMessageListener
content/base/public/nsimessagemanager.idlscriptable implement this interface in a remote frame handling process to receive messages from the browser process. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) this interface is used when implementing out-of-process handling of frames; the process handling a frame should implement this interface in order to receive messages. method overview void receivemessage(); methods receivemessage() note: this method is for javascript only. called to deliver a message to the frame handling process; called with one parameter, which has the following properties: name the name of the message. sync ...
nsIFrameMessageManager
content/base/public/nsimessagemanager.idlscriptable provides methods for managing message listeners on local frames. this provides a way for local frames to receive messages from remote frames. 1.0 66 introduced gecko 2.0 obsolete gecko 17.0 inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamon
key 2.14) this interface is obsolete and was removed in firefox 17. you should use nsimessagelistenermanager or nsimessagesender instead. method overview void addmessagelistener(in astring amessage, in nsiframemessagelistener alistener, [optional] in boolean listenwhenclosed); void removemessagelistener(in astring amessage, in nsiframemessagelistener alistener); void sendasyncmes...
nsIGSettingsService
xpcom/system/nsigsettingsservice.idlscriptable please add a summary to this article. ...
nsIGeolocationUpdate
xpcom/system/nsigeolocationprovider.idlscriptable provides a way for a geolocation provider to notify the system that a new location is available. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) interface provides a way for a geolocation provider to notify the system that a new location is available. method overview void update(in nsidomgeoposition position); methods update() notify the geolocation service that a new geolocation has been discovered. note: this must be called on the main thread. void update( in nsidomgeoposition position ); parameters position a nsidomgeoposition object describing the updated position information. see also using geolocation nsigeol...
nsIHapticFeedback
xpcom/system/nsihapticfeedback.idlscriptable implemented to provide support for haptic feedback (that is, vibration support). ...
nsIHttpActivityObserver
netwerk/protocol/http/nsihttpactivityobserver.idlscriptable this interface provides a way for http transport activities to be reported to observers. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void observeactivity(in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint64 aextrasizedata, in acstring aextrastringdata); attributes attribute type description isactive boolean true when the interface is active and should observe http activity, otherwise false. if this is false, the observeactivity() method should not be called. read only. note: this attribute is present only for compatibility ...
nsIHttpHeaderVisitor
d overview void visitheader(in acstring aheader, in acstring avalue); methods visitheader() called by the nsihttpchannel implementation when visiting request and response headers. this method can throw an exception to terminate enumeration of the channel's headers. void visitheader( in acstring aheader, in acstring avalue ); parameters aheader a string containing the
key for a header such as "content-type" avalue the header's value field such as "text/html". multiple values are separated by a comma. example this example shows how to detect flash content. it implements the nsihttpheadervisitor interface in javascript and uses it to evaluate the mime type of a http response. this is done by subscribing to the http-on-examine-response and http-on-examine-cached...
nsIHttpUpgradeListener
netwerk/protocol/http/nsihttpchannelinternal.idlscriptable the callback interface for nsihttpchannelinternal.httpupgrade; this is called when an http protocol upgrade is finished. 1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) this is used, for example, by websockets in order to upgrade an http channel to use the websocket protocol. method overview void ontransportavailable(in nsisockettransport atransport, in nsiasyncinputstream asocketin, in nsiasyncoutputstream asocketout); methods ontransportavailable() called when an http protocol upgrade attempt is completed, passing in the information needed by the protocol handler to take over the channel that is no longer...
nsIINIParserFactory
xpcom/ds/nsiiniparser.idlscriptable this interface is used to create nsiiniparser objects for use in parsing ini files. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) see example for how to use this interface. method overview nsiiniparser createiniparser(in nsilocalfile ainifile); methods createiniparser() creates an ini parser, returning the nsiiniparser object that you can use to parse it. nsiiniparser createiniparser( in nsilocalfile ainifile ); parameters ainifile the ini file to parse. return value the nsiiniparser object you can use to parse the ini file. example obtaining a parser object to obtain a parser for an ini file, you ca...
nsIInputStream
a blocking input stream may suspend the calling thread in order to satisfy a call to close(), available(), read(), or readsegments(). a non-blocking input stream, on the other hand, must not block the calling thread of execution. ...
nsIInstallLocation
toolkit/mozapps/extensions/public/nsiextensionmanager.idlscriptable interface representing a location where extensions, themes and so on are installed. 1.0 66 introduced gecko 1.8 obsolete gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) note: while this api still works, firefox 4 no longer extracts xpis by default, so this will now point to the xpi file instead of to the directory. any nsifile operations that assume a directory and plain files will fail in firefox 4, unless you specify <em:unpack>. you can get the install location of a particular add-on using nsiextensionmanager interface: var il = components.classes["@mozilla.org/extensions/manager;1"] .getservi...
nsIJetpack
js/jetpack/nsijetpack.idlscriptable this interface enables communication between the chrome process and a remote jetpack process. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void sendmessage(in astring amessagename /* [optional] in jsval v1, [optional] in jsval v2, ... */); void registerreceiver(in astring amessagename, in jsval areceiver); void unregisterreceiver(in astring amessagename, in jsval areceiver); void unregisterreceivers(in astring amessagename); void evalscript(in astring ascript); nsivariant createhandle(); void destroy(); methods sendmessage() this method asynchronously sends a message to the jetpack process. void sendmessage( ...
nsIJetpackService
js/jetpack/nsijetpackservice.idlscriptable this interface enables the creation of new jetpack processes. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) implemented by: @mozilla.org/jetpack/service;1. method overview nsijetpack createjetpack(); methods createjetpack() this method creates a new jetpack process and returns an nsijetpack interface that represents it. nsijetpack createjetpack(); parameters none. return value an nsijetpack interface representing the remote process. history see bug 556846 for details. see also nsijetpack jetpack processes ...
nsIJumpListBuilder
modifying an applied jump list is not permitted. callers should begin the creation of a new jump list using initlistbuild(), add sub lists using addlisttobuild(), then commit the jump list using commitlistbuild(). ...
nsIJumpListItem
widget/public/nsijumplistitem.idlscriptable implements windows 7 taskbar jump list item interfaces. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) note: to consumers: it's reasonable to expect we'll need support for other types of jump list items (an audio file, an email message, etc.). to add types, create the specific interface here, add an implementation class to winjumplistitem, and add support to addlistbuild and removed items processing. method overview boolean equals(in nsijumplistitem item); attributes attribute type description type short retrieves the jump list item type. read only. constants constant value description jumplist_item_empty 0 empty list ...
nsILoginInfo
nsilogininfo is an object containing information for a login stored by the login manager. to create and manage logins use nsiloginmanager. toolkit/components/passwordmgr/public/nsilogininfo.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) inherits from: nsisupports implemented by: @mozilla.org/login-manager/logininfo;1. to create an instance, use: var logininfo = components.classes["@mozilla.org/login-manager/logininfo;1"] .createinstance(components.interfaces.nsilogininfo); method overview nsilogininfo clone(); boolean equals(in nsilogininfo alogininfo); void init(in astring ahostname, in astring aformsubmiturl, in astring ahttprealm, in astring auserna...
nsILoginManagerStorage
toolkit/components/passwordmgr/public/nsiloginmanagerstorage.idlscriptable this interface is implemented by modules that wish to provide storage mechanisms for the login manager. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) for example, if you wish to provide operating system integration with a native password manager system, implementing and registering a storage module for the login manager is how you do it. see creating a login manager storage module for details. note: extensions that simply want to access/store logins should use the login manager service and nsiloginmanager interface instead. the login manager will handle selecting and using the correct nsiloginmanange...
nsILoginMetaInfo
asswordmgr/public/nsiloginmetainfo.idlscriptable an object that contains metadata for logins stored by the login manager. this data can usually be ignored by most users of the login manager, which will create and maintain appropriate default values. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) you can specifically modify these values by passing changes into nsiloginmanager.modifylogin() using an nsipropertybag2 object as the input. metadata properties are ignored when comparing logins. attributes attribute type description guid astring the guid to uniquely identify the login. this can be any arbitrary string, but a format as created by nsiuuidgenerator is recommended. for ex...
nsIMemoryMultiReporter
xpcom/base/nsimemoryreporter.idlscriptable reports multiple memory measurements using a callback function that gets called once for each measurement. 1.0 66 introduced gecko 7.0 inherits from: nsisupports last changed in gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9) if you want to gather multiple measurements in a single operation (such as a single traversal of a large data structure), you can use a multi-reporter to do so. the callback, which must implement the nsimemorymultireportercallback interface, receives values that match the fields in the nsimemoryreporter object. in order for a multi-reporter to gather and generate reports, you need to call collectreports(). this will call the specified callback's nsimemorymultireportercallback.
nsIMemoryMultiReporterCallback
xpcom/base/nsimemoryreporter.idlscriptable implement this interface to handle callbacks from nsimemorymultireporter instances. 1.0 66 introduced gecko 7.0 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) method overview void callback(in acstring process, in autf8string path, in print32 kind, in print32 units, in print64 amount, in autf8string description, in nsisupports closure); methods callback() called to provide information from a multi-reporter. implement this method to handle the report information. void callback( in acstring process, in autf8string path, in print32 kind, in print32 units, in print64 amount, in autf8string description, in nsisupports closure ); parameters ...
nsIMessageListenerManager
dom/base/nsimessagemanager.idlscriptable this interface enables clients to listen for messages sent using the nsimessagebroadcaster, nsimessagesender, or nsisyncmessagesender interfaces. 1.0 66 introduced gecko 17 inherits from: nsisupports last changed in gecko 41 (firefox 41 / thunderbird 41 / seamon
key 2.38) implemented by: @mozilla.org/globalmessagemanager;1. to access this service, use: var globalmm = components.classes["@mozilla.org/globalmessagemanager;1"] .getservice(components.interfaces.nsimessagelistenermanager); method overview void addmessagelistener(in astring messagename, in nsimessagelistener listener, [optional] in boolean listenwhenclosed) void re...
nsIMessageWakeupService
c/nsimessagewakeupservice.idlscriptable implements the message manager wakeup service; this lets other components be woken up when specific message manager messages arrive. by using this service, you can avoid starting those components until they're needed. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) note: this service was introduced in gecko 5.0 on firefox for android, but was not provided on desktop until gecko 13.0 (firefox 13). there is no idl for this interface. the parentprocessmessagemanager is used for this, so messages send from childprocessmessagemanagers will be heard. requesting wakeups to request a wakeup, a wakeup condition must be registered with the category manager ...
nsIMicrosummary
summaryservice.idlscriptable this interface defines attributes and methods for dealing with microsummaries generated by an nsimicrosummarygenerator. 1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) method overview void addobserver(in nsimicrosummaryobserver observer); boolean equals(in nsimicrosummary aother); void removeobserver(in nsimicrosummaryobserver observer); void update(); attributes attribute type description content astring the content of the microsummary. since generators and pages can be remote resour...
nsIMicrosummaryGenerator
kit/components/places/public/nsimicrosummaryservice.idlscriptable this interface provides access to a microsummary that has been installed in firefox. 1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) method overview long calculateupdateinterval(in nsidomnode apagecontent); boolean equals(in nsimicrosummarygenerator aother); astring generatemicrosummary(in nsidomnode apagecontent); attributes attribute type description loaded boolean has the generator itself (which may be a remote resource) been loaded. read only. localuri nsiuri for generators installed by the user or b...
nsIMicrosummaryObserver
toolkit/components/places/public/nsimicrosummaryservice.idlscriptable this interface provides methods for observing changes to micrummaries. 1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) method overview void oncontentloaded(in nsimicrosummary microsummary); void onelementappended(in nsimicrosummary microsummary); void onerror(in nsimicrosummary microsummary); methods oncontentloaded() called when an observed microsummary updates its content. since an observer might watch multiple microsummaries at the same time, the microsummary whose content has been updated gets ...
nsIMicrosummaryService
/public/nsimicrosummaryservice.idlscriptable this interface provides methods for managing installed microsummaries, and the bookmarks they apply to. ...
nsIMicrosummarySet
toolkit/components/places/public/nsimicrosummaryservice.idlscriptable this interface provides access to sets of microsummaries returned from the nsimicrosummaryservice. 1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) method overview void addobserver(in nsimicrosummaryobserver observer); nsisimpleenumerator enumerate(); void removeobserver(in nsimicrosummaryobserver observer); methods addobserver() add a microsummary observer to this microsummary set. adding an observer to a set is the equiv...
nsIMsgAccount
view void addidentity(in nsimsgidentity identity); void clearallvalues(); void init(); void removeidentity(in nsimsgidentity identity); astring tostring(); attributes attribute type description defaultidentity nsimsgidentity identities nsisupportsarray read only. outgoing identity list (array of nsimsgidentity's) incomingserver nsimsgincomingserver incoming server stuff
key acstring internal
key identifying itself methods addidentity() adds a new identity to this account. void addidentity( in nsimsgidentity identity ); parameters identity the identity to add. clearallvalues() clear all user preferences associated with an account. void clearallvalues(); parameters none. init() initializes an account. void init(); parameters none. exceptions thrown ns_err...
Building an Account Manager Extension
styles. it is common practice to use for the javascript of the new panel, the same naming as used for the xul. this means in our example, the javascript file should be located in chrome://example@mozilla.org/content/am-devmo-account.js. ...
nsIMsgCustomColumnHandler
n should be sorted by. unsigned long getsortlongforrow(in nsimsgdbhdr ahdr); parameters ahdr the message's nsimsgdbhdr. return value the long value that sorting will be done with. isstring() boolean isstring(); parameters none. return value true if the column displays a string value. false otherwise. this affects whether getsortstringforrow or getsortlongforrow is used to determine the sort
key for the column. it does not affect whether getcelltext vs. getimagesrc is used to determine what to display. see also extensions:thunderbird:creating_a_custom_column ...
nsIMsgWindow
to create an instance, use: msgwindow = components.classes["@mozilla.org/messenger/msgwindow;1"] .createinstance(components.interfaces.nsimsgwindow); in thunderbird the default message window is stored in the global variable msgwindow. ...
nsIMutableArray
as above, it is legal to add null elements to the array. note also that null elements can be created as a side effect of insertelementat(). ...
nsINavHistoryContainerResultNode
nts/places/public/nsinavhistoryservice.idlscriptable a foundation for the interfaces that provide a description of a query result on the places service that describes a container (which is any kind of grouping, including bookmark folders). ...
nsINavHistoryQuery
toolkit/components/places/public/nsinavhistoryservice.idlscriptable encapsulates all the query parameters you're likely to need when building up history ui. all parameters are anded together. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) the nsinavhistoryquery is not intended to be a super-general query mechanism. this was designed so that most queries can be done in only one sql query. this is important because, if the user has their profile on a networked drive, query latency can be non-negligible method overview nsinavhistoryquery clone(); void getfolders([optional ]out unsigned long count, [retval,array,size_is(count)] out long long folders); void gettransition...
nsINavHistoryQueryResultNode
toolkit/components/places/nsinavhistoryservice.idlscriptable used for places queries and as a base class for bookmark folders. 1.0 66 introduced gecko 1.8 inherits from: nsinavhistorycontainerresultnode last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) note: if you request that places not be expanded in the options that generated the node, the node will report that it has no children and will never try to populate itself. method overview void getqueries([optional] out unsigned long querycount, [retval,array,size_is(querycount)] out nsinavhistoryquery queries); attributes attribute type description folderitemid long long for both simple folder nodes and simple-folder-query nodes, this is set to the concrete itemid of the ...
nsINavHistoryResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable this is the base class for all places history result nodes, containing the uri, title, and other general information. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) attributes attribute type description accesscount unsigned long total number of times the uri has been accessed. for hosts, this is the total number of the children under it, rather than the total number of times the host has been accessed (getting that information would require an additional query, so for performance reasons that information isn't given by default). read only. bookmarkindex long when this item is in a bookmark folder (its...
nsINetworkLinkService
netwerk/base/public/nsinetworklinkservice.idlscriptable network link status monitoring service. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5) implemented by: @mozilla.org/network/network-link-service;1 as a service: var networklinkservice = components.classes["@mozilla.org/network/network-link-service;1"] .getservice(components.interfaces.nsinetworklinkservice); attributes attribute type description islinkup boolean this is set to true when the system is believed to have a usable network connection. the link is only up when network connections can be established. for example, the link is down during dhcp con...
nsIParserUtils
parser/html/nsiparserutils.idlscriptable provides non-web html parsing functionality to firefox extensions and xulrunner applications. 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamon
key 2.11) warning: do not use this from within gecko--use nscontentutils, nstreesanitizer, and so on directly instead. implemented by: @mozilla.org/parserutils;1 as a service: var parserutils = components.classes["@mozilla.org/parserutils;1"] .getservice(components.interfaces.nsiparserutils); method overview astring converttoplaintext(in astring src, in unsigned long flags, in unsigned long wrapcol); nsidomdocumentfragment parsefragment(in astring fragment, ...
nsIPermission
the nsipermission interface defines a "permission" object, which is used to allow or block objects (for example cookies, images) from certain sites based on user preferences. netwerk/base/public/nsipermission.idlscriptable please add a summary to this article. last changed in gecko 2 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) inherits from: nsisupports attributes attribute type description capability pruint32 the permission to set: allow, deny, or unknown (which is the default). see nsipermissionmanager.permission_type_constants for allowed values. read only. expiretime print64 the expiration time of the permission measured in milliseconds since 1970 jan 1 0:00:00. read only. ...
nsIPermissionManager
the nsipermissionmanager interface is used to persistently store permissions for different object types (cookies, images, and so on) on a site-by-site basis. netwerk/base/nsipermissionmanager.idlscriptable please add a summary to this article. ...
nsIPrefLocalizedString
string.idlscriptable this interface is simply a wrapper interface for nsisupportsstring so the preferences service can have a unique identifier to distinguish between requests for normal wide strings nsisupportsstring) and 'localized' wide strings, which get their default values from properites files. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void setdatawithlength(in unsigned long length, [size_is(length)] in wstring data); wstring tostring(); attributes attribute type description data wstring provides access to string data stored in this property. methods setdatawithlength() used to set the contents of this object. void setdatawithlength( in unsigned...
nsIPrivateBrowsingService
netwerk/base/public/nsiprivatebrowsingservice.idlscriptable provides access to information about the state of the private browsing service. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) this interface is deprecated since firefox 20, and will probably be completely removed in firefox 21. the nsiprivatebrowsingservice interface provides access to information about the state of the private browsing feature offered in firefox 3.5 and later. when firefox is in private browsing mode, firefox shouldn't save any potentially private information. the browser itself stops caching, and also doesn't record history information. in addition, temporary, databases are created to be ...
nsISHistory
a handle to the session history object can be obtained from nsiwebnavigation. ...
nsIScriptableInputStream
xpcom/io/nsiscriptableinputstream.idlscriptable this interface provides scriptable access to a nsiinputstream instance. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview unsigned long available(); void close(); void init(in nsiinputstream ainputstream); string read(in unsigned long acount); acstring readbytes(in unsigned long acount); methods available() return the number of bytes currently available in the stream. note: this method should not be used to determine the total size of a stream, even if the stream corresponds to a local file. moreover, since a stream may make available more than 2^32 bytes of data, this method is incapable of expressing the entire size ...
nsIScriptableUnescapeHTML
parser/html/nsiscriptableunescapehtml.idlscriptable this interface is a utility interface that exposes the kind of markup parser behavior that the feed service needs. 1.0 66 introduced gecko 1.8 obsolete gecko 14.0 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) note: as of firefox 14, this interface is obsolete (but still available for compatibility with legacy extensions) and all its functionality is available with more configuration options via the nsiparserutils interface. implemented by: @mozilla.org/feed-unescapehtml;1 as a service: var scriptableunescapehtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscript...
nsIScriptableUnicodeConverter
to don't require you to use this legacy representation, you should use textdecoder and textencoder (available to chrome javascript via components.utils.importglobalproperties) instead of this api. intl/uconv/idl/nsiscriptableuconv.idlscriptable this interface is a unicode encoder for use by scripts. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) implemented by: @mozilla.org/intl/scriptableunicodeconverter. to create an instance, use: var converter = components.classes["@mozilla.org/intl/scriptableunicodeconverter"] .createinstance(components.interfaces.nsiscriptableunicodeconverter); method overview acstring convertfromunicode(in astring asrc); acstring finish(); astring converttounic...
nsISearchEngine
netwerk/base/public/nsibrowsersearchservice.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) inherits from: nsisupports method overview void addparam(in astring name, in astring value, in astring responsetype); nsisearchsubmission getsubmission(in astring data, [optional] in astring responsetype, [optional] in astring purpose); boolean supportsresponsetype(in astring responsetype); attributes attribute type description alias astring an optional shortcut alias for the engine. when non-null, this is a unique identifier. description astring a text description describing the...
nsISearchSubmission
netwerk/base/public/nsibrowsersearchservice.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) attributes attribute type description postdata nsiinputstream the post data associated with a search submission, wrapped in a mime input stream. may be null. read only. uri nsiuri the uri to submit a search to. read only. ...
nsISelection2
content/base/public/nsiselection2.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 1.8 obsolete gecko 8.0 inherits from: nsiselection last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) in gecko 8.0 this interface was merged into the nsiselectionprivate interface. method overview void getrangesforinterval(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results); void getrangesforintervalcomarray(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in range...
nsISelection3
method overview void modify(in domstring alter, in domstring direction, in domstring granularity); methods modify() modifies the selection. ...
nsISmsService
dom/sms/interfaces/nsismsservice.idlscriptable used to send sms text messages for the websms api 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamon
key 2.12) implemented by: @mozilla.org/sms/smsservice;1. to create an instance, use: var smsservice = components.classes["@mozilla.org/sms/smsservice;1"] .createinstance(components.interfaces.nsismsservice); method overview [implicit_jscontext] nsidommozsmsmessage createsmsmessage(in long id, in domstring delivery, in domstring sender, in domstring receiver, in domstring body, in jsval timestamp, in bool read ); unsigned short getnumberofmessagesfortext(in domstring text); boolean hassupp...
nsISocketProvider
netwerk/socket/nsisocketprovider.idlscriptable this interface represents a socket provider. it is implemented by several types of socket classes like: udp, socks, tls, ssl, and so on. inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) implemented by: @mozilla.org/network/socket;2?type=foo. to create an instance, use: var socketprovider = components.classes["@mozilla.org/network/socket;2?type="] .createinstance(components.interfaces.nsisocketprovider); method overview void addtosocket(in long afamily, in string ahost, in long aport, in string aproxyhost, in long aproxyport, in unsigned long aflags, in prfiledescstar afiledesc, out nsisupports asecurityinfo); native code only! void newsock...
nsISocketTransport
netwerk/base/public/nsisockettransport.idlscriptable this interface specializes nsitransport for communication over network sockets. it provides methods to open blocking or non-blocking, buffered or unbuffered streams between two end-point in a ip based network. inherits from: nsitransport last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) note: connection setup is triggered by opening an input or output stream, it does not start on its own. completion of the connection setup is indicated by a status_connected_to notification to the event sink (if set). to create an instance, call nsisockettransportservice.createtransport() method overview prnetaddr getpeeraddr(); native code only! prnetaddr getselfaddr(); native code onl...
nsISound
please use the html 5 <audio> tag instead. note that nsisound instances may play the sounds using another thread; however, this is not controlled by the caller. implemented by: @mozilla.org/sound;1. ...
nsISpeculativeConnect
nts to the networking layer that an http connection attempt to a particular site is likely to happen soon; this lets the networking layer begin setting up tcp and, if appropriate, ssl handshakes to save time when the connection is actually opened later. 1.0 66 introduced gecko 15.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamon
key 2.12) to use this service, simply call nsisupports.queryinterface() on the nsiioservice you plan to use for the connection, to get access to the i/o service's implementation of nsispeculativeconnect. then call speculativeconnect() to let the networking layer know what you might be doing in the future. method overview void speculativeconnect(in nsiuri auri, in nsiinterfacerequestor acallbacks,...
nsIStreamConverter
ailable() method. stream converter suppliers registering a stream converter: stream converter registration is a two step process. first of all the stream converter implementation must register itself with the component manager using a contractid in the format below. second, the stream converter must add the contractid to the registry. ...
nsIStringBundle
extformatter::smprintf. wstring formatstringfromid( in long aid, [array, size_is(length)] in wstring params, in unsigned long length ); parameters aid the id of the string to retrieve. params parameters to pass in to the string. length the length of the parameter list. return value returns the formatted string. formatstringfromname() returns a formatted string with the given
key name from the string bundle, where each occurrence of %s (uppercase) is replaced by each successive element in the supplied array. you may also use other formatting codes, but can only pass unicode strings in. the name should refer to a string in the bundle that uses %s, and the number of strings you pass must be the same here and in the properties file (that is you can't omit %1 and use only %2)...
nsIStructuredCloneContainer
dom/interfaces/base/nsistructuredclonecontainer.idlscriptable this interface acts as a container for an object serialized using the structured clone algorithm. 1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) you can copy an object into an nsistructuredclonecontainer using initfromvariant() or initfrombase64(). it is an error to initialize an nsistructuredclonecontainer more than once. once you've initialized the container, you can get a copy of the object it stores by calling deserializetovariant(). you can also get a base-64-encoded string containing a copy of the container's serialized data, using getdataasbase64(). method overview nsivariant deserializetovariant(); astrin...
nsIStyleSheetService
allows extensions or embeddors to add to the built-in list of user or agent style sheets. layout/base/nsistylesheetservice.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) inherits from: nsisupports implemented by: @mozilla.org/content/style-sheet-service;1. to create an instance, use: var stylesheetservice = components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); method overview void loadandregistersheet(in nsiuri sheeturi, in unsigned long type); boolean sheetregistered(in nsiuri sheeturi, in unsigned long type); void unregistersheet(in nsiuri sheeturi, in unsigned long...
nsISupportsPriority
xpcom/threads/nsisupportspriority.idlscriptable this interface exposes the general notion of a scheduled object with an integral priority value. following unix conventions, smaller (and possibly negative) values have higher priority. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) this interface does not strictly define what happens when the priority of an object is changed. an implementation of this interface is free to define the side-effects of changing the priority of an object. in some cases, changing the priority of an object may be disallowed (resulting in an exception being thrown) or may simply be ignored. method overview void adjustpriority(in long delta); attribu...
nsISupports proxies
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. xpcom proxies were a technology which allowed code to make asynchronous or synchronous xpcom calls to a different thread on arbitrary xpcom interfaces. this technology has been removed in firefox 12 because it was very complex and often lead to strange deadlock conditions. it is no longer needed because javascript code can no longer run on arbitrary threads, and compiled code can use compiled runnable to achieve the same effect in a much simpler manner. ...
nsITXTToHTMLConv
you should normally obtain an instance via the nsistreamconverterservice interface. ...
nsITaggingService
toolkit/components/places/public/nsitaggingservice.idlscriptable provides methods to tag/untag a uri, to retrieve uris for a given tag, and to retrieve all tags for a uri. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) implemented by: @mozilla.org/browser/tagging-service;1. to use this service, use: var taggingsvc = components.classes["@mozilla.org/browser/tagging-service;1"] .getservice(components.interfaces.nsitaggingservice); method overview void taguri(in nsiuri auri, in nsivariant atags); void untaguri(in nsiuri auri, in nsivariant atags); nsivariant geturisfortag(in astring atag); ...
nsITextInputProcessorNotification
when gecko supports new notification to ime, this interface may have some new attributes. so, nsitextinputprocessorcallback won't be changed for keeping backward compatibility. ...
nsIThreadPool
when you send events to the thread pool, the pool creates a new thread to process the event, up to the number of threads specified by the threadlimit attribute. ...
nsITimer
tialized by calling one of the initialization methods. you may also re-initialize (using one of the initialization methods) an existing instance to avoid the overhead of destroying and creating a timer. it is not necessary to cancel the timer in that case. xpcom/threads/nsitimer.idlscriptable please add a summary to this article. last changed in gecko 5 (firefox 5 / thunderbird 5 / seamon
key 2.2) inherits from: nsisupports implemented by: @mozilla.org/timer;1. to create an instance, use: var timer = components.classes["@mozilla.org/timer;1"] .createinstance(components.interfaces.nsitimer); users of instances of nsitimer should keep a reference to the timer until it is no longer needed in order to assure the timer is fired. method overview void cancel(); ...
nsIToolkitProfile
toolkit/profile/public/nsitoolkitprofile.idlscriptable represents a user profile. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) you should not create these objects yourself; to obtain them, use the nsitoolkitprofileservice interface to create and obtain them. method overview nsiprofilelock lock(out nsiprofileunlocker aunlocker); void remove(in boolean removefiles); attributes attribute type description localdir nsilocalfile the location of the profile local directory, which may be the same as the root directory. see nsiprofilelock.localdirectory(). read only. name autf8string the profile's name. rootdir nsilocalfile the location of the pro...
nsITransferable
widget/nsitransferable.idlscriptable a container for typed data that can be transferred from one place or owner to another, possibly involving format conversion. these objects are used during drag-and-drop operations. inherits from: nsisupports last changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamon
key 2.10) implemented by: @mozilla.org/widget/transferable;1. to create an instance, use: var transferable = components.classes["@mozilla.org/widget/transferable;1"] .createinstance(components.interfaces.nsitransferable); it's important to note that a flavor, which specifies a type of data the transferable supports, is represented by a null-terminated string indicating the mime type of the format supported by the flavor. method overview ...
nsITransport
netwerk/base/public/nsitransport.idlscriptable this interface provides a common way of accessing i/o streams connected to some resource. this interface does not in any way specify the resource. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) this interface provides methods to open blocking or non-blocking, buffered or unbuffered streams to the resource. the name "transport" is meant to connote the inherent data transfer implied by this interface (that is, data is being transfered in some fashion via the streams exposed by this interface). a transport can have an event sink associated with it. the event sink receives transport-specific events as the transfer is occurring. for a socket transport, these events can include status...
nsIURI
netwerk/base/public/nsiuri.idlscriptable this is an interface for an uniform resource identifier with internationalization support, offering attributes that allow setting and querying the basic components of a uri, and methods for performing basic operations on uris. inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamon
key 2.3) see the following rfcs for details: rfc3490: internationalizing domain names in applications (idna) rfc3986: uniform resource identifier (uri): generic syntax rfc3987: internationalized resource identifiers subclasses of nsiuri, such as nsiurl, impose further structure on the uri. to create an nsiuri object, you should use nsiioservice.newuri(), like this: function makeuri(aurl, aorigincharset, abaseuri) {...
nsIURLFormatter
toolkit/components/urlformatter/public/nsiurlformatter.idlscriptable this interface exposes methods to substitute variables in url formats. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) variable names can contain 'a-z' letters and '_' characters. mozilla applications linking to mozilla websites are strongly encouraged to use urls of the following format: http[s]://%service%.mozilla.[com|org]/%locale%/ method overview astring formaturl(in astring aformat); astring formaturlpref(in astring apref); methods formaturl() formats a string url. the set of known variables is predefined. if a variable is unknown, it is left unchanged and a non-fatal error is repor...
nsIURLParser
this was never a valid part of a url, and is now no longer supported. this makes urls with semicolons in them work correctly. ...
nsIUUIDGenerator
xpcom/base/nsiuuidgenerator.idlscriptable this interface can be used to generate an id that can be considered globally unique, often referred to as a uuid or guid. 1.0 66 introduced gecko 1.8.1 inherits from: nsisupports last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamon
key 1.1) implemented by @mozilla.org/uuid-generator; as a service: var uuidgenerator = components.classes["@mozilla.org/uuid-generator;1"] .getservice(components.interfaces.nsiuuidgenerator); method overview nsidptr generateuuid(); void generateuuidinplace(in nsnonconstidptr id); native code only! methods generateuuid() obtains a new uuid using appropriate platform-specific methods to obtain a nsid that can be considered to be globally unique. nsidptr ...
nsIUpdate
ly that, then if the application process fails fall back to downloading a complete file-replace patch. this object also contains information about the update that the front end and other application services can use to learn more about what is going on. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview nsiupdatepatch getpatchat(in unsigned long index); nsidomelement serialize(in nsidomdocument updates); attributes attribute type description appversion astring the application version of this update. billboardurl astring the url to a page that is typically localized to display in the update prompt. buildid astring the build id of this update. this is used ...
nsIUpdateCheckListener
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface describing an object that listens to the progress of an update check operation. this object is notified as the check continues, finishes and if it has an error. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void oncheckcomplete(in nsixmlhttprequest request, [array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); void onerror(in nsixmlhttprequest request, in nsiupdate update); void onprogress(in nsixmlhttprequest request, in unsigned long position, in unsigned long totalsize); methods oncheckcomplete() called when the update check is completed. void oncheckcomp...
nsIUpdateChecker
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes an object that knows how to check for software updates. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void checkforupdates(in nsiupdatechecklistener listener, in boolean force); void stopchecking(in unsigned short duration); constants constant value description current_check 1 constant for the stopchecking() method indicating that only the current update check should be stopped. current_session 2 constant for the stopchecking() method indicating that all update checks during the current session should be stopped. any_checks 3 constant for the stopchecking() method ind...
nsIUpdateManager
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes a global application service that maintains a list of previously installed updates, as well as the currently in use update. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview nsiupdate getupdateat(in long index); void saveupdates(); attributes attribute type description activeupdate nsiupdate an nsiupdate object describing the currently in use update. this update is not in the history list. read only. updatecount long the number of updates in the history list; the updates can be fetched by calling getupdateat(). read only. methods getupdateat() returns the update at the s...
nsIUpdatePatch
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface that describes an object representing a patch file that can be downloaded and applied to a version of this application so that it can be updated. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview nsidomelement serialize(in nsidomdocument updates); attributes attribute type description finalurl astring the final url this patch was being downloaded from. hashfunction astring the hash function to use when determining the integrity of the patch file. hashvalue astring the value of the hash function named in hashfunction that should be computed if the file is not corrupt. selected bo...
nsIUpdatePrompt
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes an object that can be used to show various update-related notifications to the user. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void checkforupdates(); void showupdateavailable(in nsiupdate update); void showupdatedownloaded(in nsiupdate update, [optional] in boolean background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates. void checkforupdates(); parameters none. showupdateavailable() show...
nsIUpdateTimerManager
etimermanager.idlscriptable this interface provides a global application service that provides support for long-duration timers (on the order of many days, weeks, or even months). these timers are used to schedule update checks in the future, for example. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamon
key 1.0) method overview void registertimer(in astring id, in nsitimercallback callback, in unsigned long interval); methods registertimer() presents a user interface that checks for and displays the available updates. void registertimer( in astring id, in nsitimercallback callback, in unsigned long interval ); parameters id an id used to identify the ti...
nsIUrlListManagerCallback
toolkit/components/url-classifier/public/nsiurllistmanager.idlscriptable interface for a class that manages updates of the url classifier database. ...
nsIVariant
xpconnect has magic to transparently convert between nsivariant and js types. we mark the interface [scriptable] so that js can use methods that refer to this interface. but we mark all the methods and attributes [noscript] since any nsivariant object will be automatically converted to a js type anyway. ...
nsIVersionComparator
a version-part consists of up to four parts, all of which are optional: <number-a><string-b><number-c><string-d (everything else)> a version-part may also consist of a single asterisk "*" which indicates * "infinity". ...
nsIWebBrowser
terface is implemented by web browser objects. embedders use this interface during initialization to associate the new web browser instance with the embedders chrome and to register any listeners. the interface may also be used at runtime to obtain the content dom window and from that the rest of the dom. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) warning: this interface was frozen for a very long time, but was unfrozen for gecko 2.0. method overview void addwebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void removewebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type description containerwindow nsiwebbrowserchrome ...
nsIWebBrowserChrome3
embedding/browser/webbrowser/nsiwebbrowserchrome3.idlscriptable an extension to nsiwebbrowserchrome2. 1.0 66 introduced gecko 2.0 inherits from: nsiwebbrowserchrome2 last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview astring onbeforelinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); methods onbeforelinktraversal() determines the appropriate target for a link. astring onbeforelinktraversal( in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the original link target. linkuri link destination uri. linknode link dom node. isapptab whether or not the li...
nsIWebContentHandlerRegistrar
xpfe/appshell/public/nsiwebcontenthandlerregistrar.idlscriptable applications wishing to use web content handlers need to implement this interface. typically they will prompt the user to confirm adding an entry to the local list. ...
nsIWebNavigationInfo
docshell/base/nsiwebnavigationinfo.idlscriptable exposes a way to get information on the capabilities of gecko web navigation objects. ...
nsIWebProgressListener
uriloader/base/nsiwebprogresslistener.idlscriptable this interface is implemented by clients wishing to listen in on the progress associated with the loading of asynchronous requests in the context of a nsiwebprogress instance as well as any child nsiwebprogress instances. inherits from: nsisupports last changed in gecko 15 (firefox 15 / thunderbird 15 / seamon
key 2.12) nsiwebprogress describes the parent-child relationship of nsiwebprogress instances. method overview void onlocationchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, [optional] in unsigned long aflags); void onprogresschange(in nsiwebprogress awebprogress, in nsirequest arequest, in long acurselfprogress, in long amaxselfprogress, in long acurtotalprogress, in l...
nsIWebSocketChannel
nsiwebsocketchannel netwerk/protocol/websocket/nsiwebsocketchannel.idlscriptable provides support for websocket channels. 1.0 66 introduced gecko 8.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5) implemented by: ?????????????????????????????????????. to create an instance, use: var websocketchannel = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsiwebsocketchannel); method overview void asyncopen(in nsiuri auri, in acstring aorigin, in nsiwebsocketlistener alistener, in nsisupports acontext); void close(in unsigned short acode, in autf8string areason); void sendbinarymsg(in acstring amsg); ...
nsIWebSocketListener
netwerk/protocol/websocket/nsiwebsocketlistener.idlscriptable implement this interface to receive websocket traffic events asynchronously after calling nsiwebsocketchannel.asyncopen(). ...
nsIWebappsSupport
toolkit/components/webapps/nsiwebappssupport.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) method overview void installapplication(in wstring title, in wstring uri, in wstring iconuri, in wstring icondata); boolean isapplicationinstalled(in wstring uri); methods installapplication() this method installs a web application. void installapplication( in wstring title, in wstring uri, in wstring iconuri, in wstring icondata ); parameters title the user-friendly name of the application. uri the uri of the web application. iconuri the uri of icon of the web application. icondata a base64 encoded representation of the ...
nsIWifiAccessPoint
this string is in the format "xx-xx-xx-xx-xx-xx". read only. rawssid acstring the public name of the wireless network, as an ascii string. ...
nsIWifiListener
netwerk/wifi/nsiwifilistener.idlscriptable this interface is implemented by clients interested in receiving notifications when the list of available wifi access points changes. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) method overview void onchange([array, size_is(alen)] in nsiwifiaccesspoint accesspoints, in unsigned long alen); void onerror(in long error); methods onchange() called when the list of available access points changes. void onchange( [array, size_is(alen)] in nsiwifiaccesspoint accesspoints, in unsigned long alen ); parameters accesspoints an array of nsiwifiaccesspoint objects representing all currently-available wifi access points. alen the...
nsIWifiMonitor
netwerk/wifi/nsiwifimonitor.idlscriptable this interface can be used to be alerted when the list of available wifi access points changes. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) this is used, for example, by geolocation to use wifi access points for location detection. implemented by @mozilla.org/wifi/monitor;1 as a service: var wifimonitor = components.classes["@mozilla.org/wifi/monitor;1"] .getservice(components.interfaces.nsiwifimonitor); method overview void startwatching(in nsiwifilistener alistener); void stopwatching(in nsiwifilistener alistener); methods startwatching() starts listening for changes to the wifi access point list. void...
nsIWinTaskbar
by default, there is a single taskbar preview per top level window (excluding pop-ups). ...
nsIWindowMediator
xpfe/appshell/public/nsiwindowmediator.idlscriptable the window mediator is a mozilla component that keeps track of open windows. inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5) the two most common uses of nsiwindowmediator are, enumerating all windows of a given type and getting the most recent / any window of a given type. implemented by: @mozilla.org/appshell/window-mediator;1 as a service: var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, ...
nsIWorker
dom/interfaces/threads/nsidomworkers.idlscriptable this interface represents a dom worker thread. 1.0 66 introduced gecko 1.9.1 inherits from: nsiabstractworker last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) for usage details, see worker and the article using dom workers. method overview void postmessage(in domstring amessage, [optional] in nsiworkermessageport amessageport); attributes attribute type description onmessage nsidomeventlistener an object to receive notifications when messages are received on the worker's message port. methods postmessage() used to allow the worker to send a message back to the web application that created it. void postmessage( in domstring amessage, in nsiworkermessageport amessage...
nsIWorkerFactory
you don't need to use it anymore to create workers from chrome. instead, you can just do new worker or new chromeworker. implemented by: threads/workerfactory;1. ...
nsIWorkerMessageEvent
dom/interfaces/threads/nsidomworkers.idlscriptable this interface represents an event in a web worker thread's event queue. 1.0 66 introduced gecko 1.9.1 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) method overview void initmessageevent(in domstring atypearg, in boolean acanbubblearg, in boolean acancelablearg, in domstring adataarg, in domstring aoriginarg, in nsisupports asourcearg); attributes attribute type description data domstring the event's data. read only. origin domstring the event's origin. read only. source nsisupports the event's source. read only. methods initmessageevent() initializes the message eve...
nsIWorkerMessagePort
dom/interfaces/threads/nsidomworkers.idlscriptable this interface represents a worker thread's message port, which is used to allow the worker to post messages back to its creator. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamon
key 2.0) method overview void postmessage(in domstring amessage); methods postmessage() posts a message into the event queue. void postmessage( in domstring amessage ); parameters amessage the message to post. see also using web workers nsiworkermessageevent nsiworkerglobalscope nsiworkerscope nsiabstractworker nsiworker ...
nsIZipReaderCache
modules/libjar/nsizipreader.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7) implemented by: @mozilla.org/libjar/zip-reader-cache;1. to create an instance, use: var zipreadercache = components.classes["@mozilla.org/libjar/zip-reader-cache;1"] .createinstance(components.interfaces.nsizipreadercache); method overview nsizipreader getinnerzip(in nsifile zipfile, in autf8string zipentry); nsizipreader getinnerzip(in nsifile zipfile, in string zipentry); obsolete since gecko 10 nsizipreader getzip(in nsifile zipfile); void init(in unsigned long cachesize); methods getinnerzip() returns a (possibly shared) cached nsizi...
nsMsgSearchTerm
this to specify the value of a search term [ptr] native nsmsgsearchterm(nsmsgsearchterm); // please note the ! at the start of this macro, which means the macro // needs to enumerate the non-string attributes. ...
nsMsgSearchValue
omm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl use this to specify the value of a search term [ptr] native nsmsgsearchvalue(nsmsgsearchvalue); %{c++ typedef struct nsmsgsearchvalue { nsmsgsearchattribvalue attribute; union { nsmsgpriorityvalue priority; prtime date; pruint32 msgstatus; /* see msg_flag in msgcom.h */ pruint32 size; nsmsg
key key; print32 age; /* in days */ nsimsgfolder *folder; nsmsglabelvalue label; pruint32 junkstatus; pruint32 junkpercent; } u; char *string; } nsmsgsearchvalue; ...
XPCOM Interface Reference by grouping
d nsicommandline nsicommandlinehandler nsicommandlinerunner component nsicomponentmanager preferences nsicontentprefobserver nsicontentprefservice nsicomponentregistrar internationalization nsibidi
keyboard nsilocale io filesystem nsidirectoryenumerator nsidirectoryiterator nsidirectoryservice nsidirectoryserviceprovider nsidirectoryserviceprovider2 nsidirindex nsidirindexlistener nsidirindexparser nsifile nsilocalfile ...
XPCOM reference
l xpcom primitives are scriptable, and they all implement an xpcom interface from the table below.xpcom string functionsxpcom provides these low-level string functions to let you work with strings; however, it's often better to use one of the string classes rather than directly using these functions. many xpcom pages return an nsresult. prior to gecko 19 (firefox 19 / thunderbird 19 / seamon
key 2.16), this was an integer that simply returned an error code. it is now a strongly typed enum when xpcom is built using a c++11 compiler. this causes compile-time errors to occur when improper values are returned as nsresult values, thereby making it easier to catch many bugs. ...
Performance
ut you should be able to see whether it is using indices. a command that will give you a higher level overview is "explain query plan". for example sqlite> explain query plan select * from moz_historyvisit v join moz_history h on v.page_id = h.id where v.visit_date > 1000000000; 0|0|table moz_historyvisit as v with index moz_historyvisit_dateindex 1|1|table moz_history as h using primary
key this tells us that it will first look up in moz_historyvisit using an index, and will then look up in moz_history using the primary
key. both of these are "good" because they use indices and primary
keys, which are fast. sqlite> explain query plan select * from moz_historyvisit where session = 12; 0|0|table moz_historyvisit in this example, you can see that it is not using an index, so this quer...
Reference Manual
// ... rv = getfoo( (nsifoo**)&foo ); rv = getfoo( &(nsifoo*)foo ); // sure, they compile; but now you leak. to help prevent this, we are trying to make the first form, above, illegal by making operator& private. see bug 59414. implementation details and debugging machinery although it is a class, nscomptr has no virtual methods, and therefore, no vtable or vptr. because a few
key routines are factored out into a common non-template base class, the actual underlying pointer is stored as an nsisupports* (except in debug builds where nscap_feature_debug_ptr_types is turned on). it is because of these factored routines that nscomptr users must link with the xpcom library. when nscap_feature_debug_ptr_types is turned on, instead of holding its underlying pointer in a variable ...
Using nsISimpleEnumerator
using nsisimpleenumerator <stringbundle>.strings var enumerator = document.getelementbyid('astringbundleid').strings; var s = ""; while (enumerator.hasmoreelements()) { var property = enumerator.getnext().queryinterface(components.interfaces.nsipropertyelement); s += property.
key + ' = ' + property.value + ';\n'; } alert(s); example using javascript 1.7 features // creates a generator iterating over enum's values function generatorfromsimpleenumerator(enum, interface) { while (enum.hasmoreelements()) { yield enum.getnext().queryinterface(interface); } } var b = document.getelementbyid("stringbundleset").firstchild var props = generatorfromenumerator(b.strings, components.interfaces.nsipropertyelement); var s = ""; for (let property in props) { s += property.
key +...
DB Views (message lists)
ses that implement nsimsgdbview and inherit from nsmsgdbview. these are the main view classes: nsmsgthreadeddbview - (implementation) nsmsgsearchdbview - (implementation) nsmsgquicksearchdbview - (implementation) nsmsgxfvirtualfolderdbview - (implementation) nsmsggroupview - (implementation) usually, a view object has parallel arrays, which map directly to lines in the message list: m_
keys message header
key m_flags 32 bits, combination of message header flags and view-only flags (e.g., collapsed) m_level the indentation level when in threaded mode. m_folders cross-folder views only (nsmsgsearchdbview and its descendant, nsmsgxfvirtualfolderdbview) most of the time, the thread pane is driven by an nsmsgthreadeddbview object (even when we're in a flat sort). if the user do...
Filelink Providers
lowing function: function extraargs() { var usernamevalue = document.getelementbyid("username").value; return { "username": {type: "char", value: usernamevalue}, }; } in this example, the username value is read from the input, and then the specially-crafted object is returned. once this is done, the field is accessible from within the implementation via the preferences api using the
key mail.cloud_files.accounts.account_
key.username where account_
key is the value passed into the implementations init function. the hightail settings.xhtml and settings.js file have examples of this. management interface once an account has been created, it is manageable from within the preferences dialog, in the attachment pane, in the outgoing tab. the content to the right of the menulist is...
LDAP Support
out how enterprise customers can leverage and customize ldap support in mozilla thunderbird. it is not intended as an introduction to ldap and mozilla products. it assumes you are already familiar with configuring preferences for deployed builds in addition to setting up thunderbird to use an ldap directory. it should be noted that all of this information applies to both thunderbird and the seamon
key application suite. mail compose typedown in mail compose, when typing a partial mail address, a typedown window appears listing possible matches against address books and ldap directories. for large companies, there may be a large number of users in the directory with the same name. in such a scenario, it may be hard to tell which person you really want to send the message to. in thunderbird, t...
MailNews Filters
action to the xbl widget in the filter editor if your action has a parameter, add code to initialize the ui editing an existing filter here and to save to the filter here add your action to filter.properties so it will show up in the filter log. finally, add protocol-specific code to apply your filter action in the various applyfilterhit methods imap pop3 news and "after the fact" since seamon
key and thunderbird share the filter code, you will also need to update the seamon
key .dtd and .property files. i may have missed some places, but that's a start, anyway. it would be really nice if we had a mechanism for extensions to add their own filter actions. most if not all of the above pieces of code would be involved in the extension mechanism. ...
Mail and RDF
cript is loaded by declaring the datasource variables in the source javascript as global variables. in the document's onload= handler the datasources are attached to their respective widgets by setting the database property on each rdf template's parent element. reflecting data to rdf in order to have a dynamic ui that updates when the underlying content changes, a datasource must implement two
key methods of reflecting data into rdf. answering queries: when rdf asks for information about a resource, datasources answer with the results of the query. asynchronously notifying rdf when the data itself changes, rdf needs to be notified. the details answering queries mail uses rdf resource factories to attach mail-specific information to rdf resources. (the details of rdf resource factor...
Mail event system
in 2002. mozilla mail requires an event system to notify different subsystems that data has changed. this document describes the system that events are passed amongst the mail objects. for example, when a folder gets a new message, its total message count increases. the folder pane needs to know that this changed so that it can update the message count so the user can see it. interfaces the
key interfaces here are: nsifolder.idl is an interface for storing a hierarchy of objects with properties. this interface is not (should not be) mail-related. nsifolders each store individual lists of folder listeners which are maintained with addlistener() and removelistener(). when a notification is fired on a folder, all of the folder's folder listeners and the mail session itself is notified. ...
Mailnews and Mail code review requirements
thunderbird's front-end code is stored in mozilla/mail. (a fair amount of this code is forked from code in the mailnews/ directory). mailnews and mail review rules patches affecting thunderbird user experience or interfaces note: it is recommended that when working on bugs that affect user experience or interfaces, that ui-review is obtained at an early stage in the patch development process. ...
Building a Thunderbird extension 5: XUL
e allows extensions to modify the user experience without modifying the installation files. this also enables version independence between thunderbird and thunderbird extensions. example xul overlay document create a new file called myhelloworld.xul within the content folder you created earlier with the following content: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myfirstext/content/overlay.js"/><!-- a reference to your javascript file --> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="date"/> </statusbar> </overlay> the <statusbar> widget named status-bar specifies the merge point within the application window that we want to attach to. when p...
Creating a Custom Column
hreadcols". to attach our column we add another treecol tag ("colreplyto") with the settings that we would like to use. don't forget to add in a splitter before the column to ensure that the user can easily resize and drag our column around. ...
Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Use SQLite
e check the information you've inserted you can query the tbird.sqlite file using regular sqlite programs. const cc = components.classes; const ci = components.interfaces; var tbirdsqlite = { onload: function() { // initialization code this.initialized = true; this.dbinit(); }, dbconnection: null, dbschema: { tables: { attachments:"id integer primary
key, \ name text \ encoded text not null" } }, dbinit: function() { var dirservice = cc["@mozilla.org/file/directory_service;1"]. getservice(ci.nsiproperties); var dbfile = dirservice.get("profd", ci.nsifile); dbfile.append("tbird.sqlite"); var dbservice = cc["@mozilla.org/storage/service;1"]. getservice(ci.mo...
Theme Packaging
do not add to this list without contacting benjamin smedberg. note that this page is included from the pages listed below. so: don't add breadcrumbs! structure of an installable bundle: describes the common structure of installable bundles, in...
Tips and Tricks from the newsgroups
patible with thunderbird 3.x) define a custom protocol handler to call an external program save attachment and send it repeat image display using css sprites messages use reminderfox to open a message in the default thunderbird message window (when messageuri, folderuri and gdbview are unknown) determine whether a message has been flagged as junk imap: getting message
key of copied message by nsimsgcopyservice::copyfilemessage access the plain text content of the email body get information about attachment without selecting message repeat image display using css sprites scan for new messages at startup and manually scan a folder initiated by user force listeners to run consecutively to prevent pop messages from getting garbled during message ret...
libmime content type handlers
> contents overview api's plugin location/installation sample content type handler plugin overview the libmime module implements a general-purpose mime parser and one of the primary methods provided by the parser is the ability to emit an html representation of an input stream. the primary use of libmime is to parse and render rfc822 messages for use by the messenger component of seamon
key. a necessary capability of this module is to dynamically add the ability to decode and render various content types. this functionality will be accomplished via content type handler plugins for libmime. libmime has a homegrown object system written in c, and since the content type handler plugins need to exist in this module, a description of the libmime object system should be reviewed and unde...
Thunderbird
thunderbird is built on the same technical platform as the firefox web browser. currently one of the most popular open source email clients, it is used by tens of millions of people around the world to bring together all their email accounts, chat, newsgroup and feed reading in a familiar high-productivity environment. ...
Using tab-modal prompts
that is, when an alert occurred, it blocked the user interface on all tabs in the window until the user dismissed the prompt. window-modal alert. gecko 2.0 introduces tab modal prompts, which only block the tab with which they're associated. ...
Virtualenv
r.mozilla.org/mozilla-central/source/build/virtualenv/packages.txt , into the virtualenv via one of various methods. the mozilla build system mostly uses .pth files instead of the more typically used python setup.py develop or python setup.py install to install python modules in to the virtualenv's python path due to performance concerns (although such functionality is available via the setup.py
keyword in a packages.txt file). when using this method, be aware that the parts of package installation invoked via setup.py, such as console-script creation and dependency resolution, will not be invoked. the virtualenv software, mirrored from a canonical version, lives in python/virtualenv. ...
Add to iPhoto
cfrange cfrange is a structure that identifies a range; that is, it identifies an offset to an item in a list and a number of items. in c, the declaration looks like this: typedef struct { cfindex location; cfindex length; } cfrange; to declare this for use with js-ctypes, we use the following code: this.cfrange = new ctypes...
Using Objective-C from js-ctypes
st.block_has_stret; bl.reserved = 0; bl.invoke = afunctypeptr; // create descriptor var desc = block_descriptor_1(); desc.reserved = 0; desc.size = block_literal_1.size; // set descriptor into block literal bl.descriptor = desc.address(); return bl; } an example of this function in use can be seen here: _ff-addon-snippet-objc_monitorevents - shows how to monitor and block mouse and
key events on mac os x ...
ctypes
t from uint16_t in that c jschar values are automatically converted into 1-character javascript strings. these are unicode characters. special c types these types represent c types that have special meanings. type description void_t the special c type void. this can only be used as a return value type. note: you must use void_t, not void, since void is a
keyword in javascript. voidptr_t the c type void *. this is a pointer to an indeterminate type of data. large integer types because javascript doesn't support large (64-bit) integers, js-ctypes provides two data types allowing access to 64-bit integer data. type description int64 a javascript object representing a 64-bit signed integer. uint64...
URLs - Plugins
or completion. void npp_urlnotify(npp instance, const char* url, npreason reason, void* notifydata); the instance and url parameters have the same definitions as those of npn_geturl. the notifydata parameter contains the private plug-in data passed to the corresponding call to npn_geturlnotify and npn_posturlnotify. warning: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1), npn_geturlnotify() does not notify the plug-in if notifydata is null. see bug 638367 for details. getting the url and displaying the page to retrieve a url and display it on a specified target page, you use the npn_geturl and npn_geturlnotify functions. the url can be displayed in the same window or frame, a new window, or a different window or frame, depending on the value of the target ...
DOM Inspector - Firefox Developer Tools
thunderbird users browsing amo in firefox should save the installation link, or visit the dom inspector for thunderbird page.) thunderbird 2 dom inspector for thunderbird 2 is available from thunderbird add-ons. or, build thunderbird yourself with the following options: ac_add_options --enable-extensions="default inspector" ac_add_options --enable-inspector-apis mozilla suite and seamon
key select tools > web development > dom inspector. you can install the sidebar panel via edit > preferences > advanced > dom inspector, then simply open up the inspector panel and visit a website. report a bug in dom inspector use the conveniently named "dom inspector" component in bugzilla. to find out who knows dom inspector code and where it lives, see the dom inspector module listing. ...
DOM Property Viewer - Firefox Developer Tools
er is not enabled by default. to enable it, open the developer tool settings and check the "dom" box under "default firefox developer tools". opening the dom property viewer once enabled, you can open the dom property viewer by selecting "dom" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its ctrl + shift + w
keyboard shortcut. the toolbox will appear at the bottom of the browser window, with the dom property viewer activated. it's just called "dom" in the toolbox. dom property viewer user interface dom tree the different properties of the dom are displayed as an expandable tree. the left-hand side shows the property's name, and the right-hand side shows its value. up to three properties of an object ...
Step through code - Firefox Developer Tools
oint step over: advance to the next line in the same function. step in: advance to the next line in the function, unless on a function call, in which case enter the function being called step out: run to the end of the current function, in which case, the debugger will skip the return value from a function, returning execution to the caller split console when paused, you can press the esc
key to open and close the split console to gain more insight into errors and variables: pause on breakpoints overlay since firefox 70, when your code is paused on a breakpoint an overlay appears on the viewport of the tab you are debugging. this lets you know what kind of breakpoint the code is paused on (breakpoint, event breakpoint, etc.), and also provides a step button and a play button. t...
Set an XHR breakpoint - Firefox Developer Tools
n examine the current state of the program. you can break on all requests or on those that include a specific url. to turn on the feature: open the debugger click on "pause on any url" which acts as a wild card, causing the code to pause on any call, or, click the plus sign next to the xhr breakpoints header, enter the url in which you are interested, and press enter. note: if you enter a
key word instead of a url, code execution will pause on any call to a url that contains that
keyword. when your code breaks on an xhr request, the righthand pane will have two additional sections: call stack the list of functions that were executed in order ot get to the currently executing code. click on an item in the call stack to jump to the associated line in the code display. scopes a...
Debugger.Source - Firefox Developer Tools
.source instance to represent each presentation, or it may use a single debugger.source instance to represent them all. debugger.source for webassembly for a debugger.source instance representing the serialized text of a block of webassembly code, its properties provide the serialized text as a string. currently only entire modules evaluated via new webassembly.module are represented. spidermon
key constructs exactly one debugger.source for each underlying webassembly module per debugger instance. please note at the time of this writing, support for webassembly is very preliminary. many properties below return placeholder values. convention for descriptions of properties and methods below, if the behavior of the property or method differs between the instance referring to javascript sour...
Debugger-API - Firefox Developer Tools
both firefox’s built-in developer tools and the firebug add-on use debugger to implement their javascript debuggers. however, debugger is quite general, and can be used to implement other kinds of tools like tracers, coverage analysis, patch-and-continue, and so on. debugger has three essential qualities: it is a source level interface: it operates in terms of the javascript language, not machine language. ...
The Firefox JavaScript Debugger - Firefox Developer Tools
erty reads and writes break on dom mutation disable breakpoints control execution what can you do after execution pauses? step through code black box a source debug worker threads debug eval sources look at values you probably want to see the value of variables or expressions, either during execution or when it is paused. set a logpoint set watch expressions reference
keyboard shortcuts source map errors ...
Deprecated tools - Firefox Developer Tools
vascript code. you can write, run, and examine the result of code that interacts with the web page. alternatives in firefox 71+, you can write multi-line javascript code in the web console editor mode, making it similar to the scratchpad. the editor mode can be triggered clicking on the icon on the right of the console input, or with ctrl + b (cmd + b on macos) when in editor mode, the enter
key adds a new line in the input, and you can evaluate the expression using ctrl + enter (cmd + enter on macos). when evaluating, the input isn't cleared, which makes it possible to quickly iterrate over a snippet of code. the results are displayed in the console output, to the right of the input, providing immediate feedback. unlike in scratchpad, errors are properly displayed in the output with...
Tree map view - Firefox Developer Tools
e rectangles corresponds to some quantitative aspect of the data. for the treemaps shown in the memory tool, things on the heap are divided at the top level into four categories: objects: javascript and dom objects, such as function, object, or array, and dom types like window and htmldivelement. scripts: javascript sources loaded by the page. strings other: this includes internal spidermon
key objects. each category is represented with a rectangle, and the size of the rectangle corresponds to the proportion of the heap occupied by items in that category. this means you can quickly get an idea of roughly what sorts of things allocated by your site are using the most memory. within top-level categories: objects is further divided by the object's type. scripts is further subdivided...
Edit fonts - Firefox Developer Tools
t guaranteed that a variable font will support this entire range). there are several registered axes. although it isn't required that these axes be defined for every font, if the font designer does implement a registered axis, its behavior must follow the defined behavior. all variable font axes have a four-character axis tag. the css font-variation-settings property uses the tag as part of the
key-value pair. for example, to set font-weight using font-variation-settings, you could do something like this: font-variation-settings: "wght" 350; however, you should only use font-variation-settings as a last resort if there is no basic font property available for setting those characteristic values (e.g. custom axes). note: font characteristics set using font-variation-settings will always o...
Examine and edit CSS - Firefox Developer Tools
er var( into a property value and then type a dash (-), any variables you have declared in your css will then appear in an autocomplete list, which shows a color swatch so you can see exactly what color each variable choice is storing (bug 1451211). in addition, hovering over a css variable name brings up a tooltip showing what color value is stored in that variable (bug 1431949). editing
keyboard shortcuts you can use the arrow and page up/down
keys (along with others) to increase/decrease numeric rules while editing: the up arrow increments values by 1 — for example, "1px" changes to "2px". shift + up/down increments or decrements values by 10. ctrl + up/down (on linux and windows) or alt + up/down (on mac) increments or decrements values by 0.1. shift + page up/page down i...
Inspect and select colors - Firefox Developer Tools
r, the color picker tells you whether its contrast with the background color meets accessibility guidelines. hovering the mouse over the contrast message gives a more detailed explanation. the color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page: clicking the color sample while holding down the shift
key changes the color format: ...
Select an element - Firefox Developer Tools
menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page. click an element in the html pane to select it: you can also use the arrow
keys to move around the dom with the
keyboard. with the node picker to select an element in the page itself, activate the "node picker" by clicking its icon: (also called the select element icon). after that, as you move the mouse around the page, the element under the mouse is highlighted. click the element to select it: starting in firefox 52, if you shift + click the element, then it is sele...
Select and highlight elements - Firefox Developer Tools
menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page. click an element in the html pane to select it: you can also use the arrow
keys to move around the dom with the
keyboard. with the node picker to select an element in the page itself, activate the "node picker" by clicking its icon: (also called the select element icon). after that, as you move the mouse around the page, the element under the mouse is highlighted. click the element to select it: ...
Page Inspector - Firefox Developer Tools
and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference
keyboard shortcuts settings ...
Animating CSS properties - Firefox Developer Tools
the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate. the frame rate and waterfall can give you insight into the work the browser's doing in a css animation, to help diagnose performance problems. with css animations you specify a number of
keyframes, each of which uses css to define the appearance of the element at a particular stage of the animation. the browser creates the animation as a transition from each
keyframe to the next. compared with animating elements using javascript, css animations can be easier to create. they can also give better performance, as they give the browser more control over when to render frames, and to drop frames ...
Settings - Firefox Developer Tools
new lines based on the current indentation. autoclose brackets determines whether typing an opening character like [ or { will cause the editor to insert the matching closing character ] or } for you. indent using spaces when checked, indentation will be performed using spaces, when off, the editor will use tabs instead. tab size the frequency of tab stops in the editor. select 2, 4, or 8.
keybindings choose the default codemirror
keybindings or
keybindings from one of several popular editors: vim emacs sublime text advanced settings show gecko platform data a setting to control whether or not profiles should include gecko platform symbols. disable http cache disable the browser http cache to simulate first-load performance in all tabs that have the toolbox open...
Extension Storage - Firefox Developer Tools
this storage type is only shown when debugging extensions. when selecting an extension id in the storage tree of the storage inspector, a table lists the details of all the extension storage present for the extension. this table contains the following columns:
key — the name of the stored item. value — the value of the stored item. storage area — the name of the area where the item is stored. ...
IndexedDB - Firefox Developer Tools
rage type specified for the database. origin — the origin of the database. version — the database version. object stores — the number of object stores in the database. when an indexeddb database is selected in the storage tree, details about all the object stores are listed in the table. any object store has the following details: object store name — the name of the object store.
key — the
keypath property of the object store. auto increment — is automatic incrementation of the
keys enabled? indexes — array of indexes present in the object store as shown below. when an object store is selected in the storage tree, all the items in that object store are listed in the table. all items have a
key and a value associated with them. you can delete an indexeddb database...
Local Storage / Session Storage - Firefox Developer Tools
ng to local storage or session storage will be listed in a table. you can edit local and session storage items by double-clicking inside cells in the table widget and editing the values they contain: you can delete local storage and session storage entries using the context menu: you can also delete local and session storage entries by selecting an item and pressing the delete or backspace
key. finally, you can add new storage items by clicking the "plus" (+) button and then editing the resulting new row to the value you want. ...
Tips - Firefox Developer Tools
general screenshots: entire page: click the screenshot button (; needs to be enabled first). viewport: click the screenshot button () in responsive design mode. node: right-click a node within the inspector and click "screenshot node". via web console command: screenshot <filename.png> --fullpage. settings: choose between a light and a dark theme for the developer tools. change the
keyboard bindings to vim, emacs or sublime text if you're used to different shortcuts. check or uncheck the different tools to enable or disable them. (there are more than the default tools!) page inspector in the markup view: press h with a node selected to hide/show it. press backspace or del with a node selected to delete it. alt + click on a node to expand or collapse it and all its desce...
View Source - Firefox Developer Tools
essage. wrap long lines (toggle) wraps long lines to the width of the page. syntax highlighting (toggle) applies syntax highlighting to the code.when syntax highlighting is on, view source also highlights parsing errors in red. hovering your mouse over errors displays a tooltip explaining the error. this feature is useful when you're looking for html errors. to access go to line from the
keyboard, press control + option + l on macos, or alt + shift + l on windows or linux. link to a line number it is possible to link to a particular line, by adding the #linennn anchor to the url the browser will jump to the nnn line. for example view-source:https://www.mozilla.org/#line100 view selection source if you select part of a web page and conext-click, you'll see a context menu item lab...
Rich output - Firefox Developer Tools
window document element event examining object properties when an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded. click on the triangle, and the object will be expanded to show its contents: starting with firefox 67 (available now in firefox developer) you can use the arrow
keys on your
keyboard to navigate through objects displayed in the console. the right-arrow
key opens the details of an object and the left-arrow
key closes open objects. examining request details similar to examining object details, you can see the details about a network request directly in the console. click on the arrow next to the request and a details panel will open that is equivalent to the...
Web Console UI Tour - Firefox Developer Tools
ed results of an expression, when possible, before you press enter to submit it. message display pane this is where the messages appear, both those generated by the code in the page, and those generated by the commands entered on the command line. see console messages for a lot more detail on what the messages can contain. note: you can clear the contents of the console by entering the
keyboard command ctrl + shift + l (windows, macos, and linux) or cmd + k on macos. command line the command line starts with double angle brackets (>>). use it to enter javascript expressions. in firefox 71 onwards, there is a new "split pane" icon on the right hand side of the command line — clicking this will open the new console multi-line mode. ...
Web Console - Firefox Developer Tools
f the web console parts of the web console ui. the javascript input interpreter how to interact with a document using the console. split console use the console alongside other tools. console messages details of the messages that the console logs. helper commands commands you can use that are not part of javascript. rich output see and interact with objects logged by the console.
keyboard shortcuts shortcut reference. opening the web console you open the web console from a menu or with a
keyboard shortcut: choose web console from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press the ctrl+shift+k (command+option+k on os x)
keyboard shortcut. the toolbox appear at the bottom, left, or right of the brow...
about:debugging (before Firefox 68) - Firefox Developer Tools
atically, and you'll see them the next time the content script is loaded or the popup is shown. there's a better way to handle the other cases: click the "reload" button next to the "debug" button. this does what it says: reloading any persistent scripts, such as background scripts parsing the manifest.json file again, so changes to permissions, content_scripts, browser_action or any other
keys will take effect. note that in firefox 49 onwards, the reload button is only enabled for temporary add-ons. it will be disabled for all other add-ons. tabs in firefox 49 onwards, a tabs page is available in about:debugging — this provides a complete list of all the debuggable tabs open in the current firefox instance. each tab entry has a debug button next to it — when clicked, ...
about:debugging - Firefox Developer Tools
ripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown. for other changes, click the reload button. this does what it says: reloads any persistent scripts, such as background scripts parses the manifest.json file again, so changes to permissions, content_scripts, browser_action or any other
keys take effect installed extensions the permanently installed extensions are listed in the next section, extensions. for each one, you see something like the following: the inspect button, and the extension id and internal uuid fields are the same as for temporary extensions. just as it does with temporarily loaded extensions, the link next to manifest url opens the loaded manifest in a...
AesCbcParams - Web APIs
properties name a domstring. this should be set to aes-cbc. iv a buffersource. the initialization vector. must be 16 bytes, unpredictable, and preferably cryptographically random. however, it need not be secret (for example, it may be transmitted unencrypted along with the ciphertext). ...
AesGcmParams - Web APIs
the aesgcmparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrap
key(), or subtlecrypto.unwrap
key(), when using the aes-gcm algorithm. for details of how to supply appropriate values for this parameter, see the specification for aes-gcm: nist sp800-38d, in particular section 5.2.1.1 on input data. properties name a domstring. this should be set to aes-gcm. iv a buffersource — the initialization vector. this must be unique for every encryption operation carried out with a given
key. put another way: never reuse an iv with the same
key. the aes-gcm specification recommends that the iv should be 96 bits long, and typically contains bits from a random number gen...
Animation.cancel() - Web APIs
when an animation is cancelled, its starttime and currenttime are set to null. syntax animation.cancel(); parameters none. return value none. exceptions this method doesn't directly throw exceptions; however, if the animation's playstate is anything but "idle" when cancelled, the current finished promise is rejected with a domexception named aborterror. ...
Animation.currentTime - Web APIs
e = animation.currenttime; animation.currenttime = newtime; value a number representing the current time in milliseconds, or null to deactivate the animation. examples in the drink me/eat me game, alice's height is animated so it can go from small to large or large to small. ...
Animation.effect - Web APIs
the animation.effect property of the web animations api gets and sets the target effect of an animation. the target effect may be either an effect object of a type based on animationeffectreadonly, such as
keyframeeffect, or null. syntax var effect = animation.effect; animation.effect = animationeffectreadonly value a animationeffectreadonly object describing the target animation effect for the animation, or null to indicate no active effect. specifications specification status comment web animationsthe definition of 'animation.effect' in that specification. working draft editor's draft. ...
Animation.onfinish - Web APIs
o finish event handler is set. examples animation.onfinish is used several times in the alice in web animations api land growing/shrinking alice game. here is one instance where we add pointer events back to an element after its opacity animation has faded it in: // add an animation to the game's ending credits var endingui = document.getelementbyid("ending-ui"); var bringui = endingui.animate(
keysfade, timingfade); // pause said animation's credits bringui.pause(); // this function removes pointer events on the credits. hide(endingui); // when the credits are later faded in, // we re-add the pointer events when they're done bringui.onfinish = function() { endingui.style.pointerevents = 'auto'; }; specifications specification status comment web animationsthe...
AnimationEffect - Web APIs
methods animationeffect.gettiming() returns the effecttiming object associated with the animation containing all the animation's timing values. animationeffect.getcomputedtiming() returns the calculated timing properties for this animationeffect. animationeffect.updatetiming() updates the specified timing properties of this animationeffect. ...
Attr.namespaceURI - Web APIs
d within the node interface. syntax namespace = attribute.namespaceuri example in this snippet, an attribute is being examined for its localname and its namespaceuri. if the namespaceuri returns the xul namespace and the localname returns "browser", then the node is understood to be a xul <browser/>. if (attribute.localname == "value" && attribute.namespaceuri == "http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul") { // this is a xul value } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope. the namespace uri of an attribute is frozen at the attribute creation time. in firefox 3.5 and earlier, the namespace uri for html attributes in html documents is null. in later versions, in...
AudioTrackList.getTrackById() - Web APIs
the specified string. if no match is found, this method returns null. the tracks are searched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the relative order in which the tracks are declared by the media resource. example this example suggests a hypothetical game in which movies are used as cut-scenes or other
key set pieces within the game. each movie has one audio track for each character, as well as one for the music, sound effects, and so forth. this function allows the game to disable a specific character's audio in order to adjust the movie's performance based on occurrences within the game; if the character's dialog isn't relevant, it gets left out. obviously that would require some clever graphic d...
AudioWorkletGlobalScope.registerProcessor - Web APIs
the audioworkletglobalscope interface registers a class constructor derived from audioworkletprocessor interface under a specified name. syntax audioworkletglobalscope.registerprocessor(name, processorctor); parameters name a string representing the name under which the processor will be registered. processorctor the constructor of a class derived from audioworkletprocessor. note: a
key-value pair { name: constructor } is saved internally in the audioworkletglobalscope once the processor is registered. the name is to be referred to when creating an audioworkletnode based on the registered processor. a new processor by the given name is internally created and associated with the new node. return value undefined exceptions notsupportederror the name is an empty strin...
AudioWorkletNode() - Web APIs
channelcount optional an array defining the number of channels for each output. for example, outputchannelcount: [n, m] specifies the number of channels in the first output to be n and the second output to be m. the array length must match numberofoutputs. parameterdata optional an object containing the initial values of custom audioparam objects on this node (in its parameters property), with
key being the name of a custom parameter and value being its initial value. processoroptions optional any additional data that can be used for custom initialization of the underlying audioworkletprocessor. return value the newly constructed audioworkletnode instance. exceptions notsupportederror the specified options.outputchannelcount is 0 or larger than the current implementation support...
AudioWorkletNodeOptions - Web APIs
channelcount optional an array defining the number of channels for each output. for example, outputchannelcount: [n, m] specifies the number of channels in the first output to be n and the second output to be m. the array length must match numberofoutputs. parameterdata optional an object containing the initial values of custom audioparam objects on this node (in its parameters property), with
key being the name of a custom parameter and value being its initial value. processoroptions optional any additional data that can be used for custom initialization of the underlying audioworkletprocessor. usage notes when creating an audioworkletnode, these options can have various effects. if the number of inputs and number of outputs are both set to 0, a notsupportederror will be thrown and t...
AudioWorkletProcessor.process - Web APIs
depending on channelcount and channelcountmode properties. outputs an array of outputs that is similar to the inputs parameter in structure. it is intended to be filled during the execution of the process() method. each of the output channels is filled with zeros by default — the processor will output silence unless the output arrays are modified. parameters an object containing string
keys and float32array values. for each custom audioparam defined using the parameterdescriptors getter, the
key in the object is a name of that audioparam, and the value is a float32array. the values of the array are calculated by taking scheduled automation events into consideration. if the automation rate of the parameter is "a-rate", the array will contain 128 values — one for each frame in th...
Blob.text() - Web APIs
ext => /* do something with the text */); var text = await blob.text(); parameters none. returns a promise that resolves with a usvstring which contains the blob's data as a text string. the data is always presumed to be in utf-8 format. usage notes the filereader method readastext() is an older method that performs a similar function. it works on both blob and file objects. there are two
key differences: blob.text() returns a promise, whereas filereader.readastext() is an event based api. blob.text() always uses utf-8 as encoding, while filereader.readastext() can use a different encoding depending on the blob's type and a specified encoding name. specifications specification status comment file apithe definition of 'blob.text()' in that specification. ...
Body.bodyUsed - Web APIs
nse.bodyused to the console once before the response.blob() call and once after. this returns false before and true afterwards, as at that point the body has been read. html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content var myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_
key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'bodyused' in that specification. li...
Body.formData() - Web APIs
the formdata() method of the body mixin takes a response stream and reads it to completion. it returns a promise that resolves with a formdata object. note: this is mainly relevant to service workers. if a user submits a form and a service worker intercepts the request, you could for example call formdata() on it to obtain a
key-value map, modify some fields, then send the form onwards to the server (or use it locally). syntax response.formdata() .then(function(formdata) { // do something with your formdata }); parameters none. return value a promise that resolves with a formdata object. example tbd. specifications specification status comment fetchthe definition of 'formdata()' in that specification. living standard ...
Body - Web APIs
n an <img> tag. you'll notice that since we are requesting an image, we need to run body.blob() (response implements body) to give the response its correct mime type. html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content const myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_
key1.jpg') .then(res => res.blob()) .then(res => { const objecturl = url.createobjecturl(res); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'body' in that specification. living standard ...
CSSNumericValue - Web APIs
snumericvalue interface of the css typed object model api represents operations that all numeric values can perform. interfaces based on cssnumericvalue below is a list of interfaces based on the cssnumericvalue interface. cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssnumericarray cssperspective csspositionvalue cssrotate cssskew csss
keyx csss
keyw csstranslate cssunitvalue properties none. event handlers no methods cssnumericvalue.add adds a supplied number to the cssnumericvalue. cssnumericvalue.sub subtracts a supplied number from the cssnumericvalue. cssnumericvalue.mul multiplies the cssnumericvalue by the supplied value. cssnumericvalue.div divides the cssnumericvalue by the supplied value. cssnumericval...
CSSRuleList - Web APIs
unless combining lists, after any existing list therein is deleted, rule by rule. example // get the first style sheet’s first rule var first_rule = document.stylesheets[0].cssrules[0]; see also cssrule cssrulelist implementations there are multiple properties in the cssom that will return a cssrulelist. they are: cssstylesheet property cssrules cssmediarule property cssrules css
keyframesrule property cssrules cssmozdocumentrule property cssrules specifications specification status comment css object model (cssom)the definition of 'cssrulelist' in that specification. working draft ...
CSSStyleDeclaration.setProperty() - Web APIs
s a domstring containing the new property value. if not specified, treated as the empty string. note: value must not contain "!important" -- that should be set using the priority parameter. priority optional is a domstring allowing the "important" css priority to be set. if not specified, treated as the empty string. the following values are accepted: string value "important"
keyword undefined string empty value "" return value undefined exceptions domexception (nomodificationallowederror): if the property or declaration block is read only. if priority can be omitted, javascript has a special simpler syntax for setting a css property on a style declaration object: style.csspropertyname = 'value'; examples in this example we have three buttons, which...
CSSStyleValue - Web APIs
the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api. an instance of this class may be used anywhere a string is expected. interfaces based on cssstylevalue below is a list of interfaces based on the cssstylevalue interface. cssimagevalue css
keywordvalue cssnumericvalue csspositionvalue csstransformvalue cssunparsedvalue methods cssstylevalue.parse() sets a specific css property to the specified values and returns the first value as a cssstylevalue object. cssstylevalue.parseall() sets all occurences of a specific css property to the specified valueand returns an array of cssstylevalue objects, each containing one of the supplied values. specifications specification statu...
CSSUnparsedValue.entries() - Web APIs
the cssunparsedvalue.entries() method returns an array of a given object's own enumerable property [
key, value] pairs in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). syntax cssunparsedvalue.entries(obj) parameters obj the cssunparsedvalue whose enumerable own property [
key, value] pairs are to be returned. return value an array of the given cssunparsedvalue object's own enumerable property [
key, value] pairs. specifications specification status comment css typed om level 1the definition of 'entries()' in that specification. working draft initial definition. ...
Using the CSS Painting API - Web APIs
ally for a <length> unit. static get inputarguments() { return ['*', '<length>']; } in this case, we specifically requested the <length> attribute. the first element in the returned array will be a cssunparsedvalue. the second will be a cssstylevalue. if the custom argument is a css value, for instance a unit, we can invoke typed om cssstylevalue class (and sub classes) by using the value type
keyword when we retrieve it in the registerpaint() function. let's say we add a second argument with how many pixels wide we want the stroke to be: li { background-image: paint(hollowhighlights, stroke, 10px); } when we get our list of argument values, we can ask specifically for a <length> unit. static get inputarguments() { return ['*', '<length>']; } now we can access the type and value pr...
Cache.add() - Web APIs
kes a url, retrieves it, and adds the resulting response object to the given cache. the add() method is functionally equivalent to the following: fetch(url).then(function(response) { if (!response.ok) { throw new typeerror('bad response status'); } return cache.put(url, response); }) for more complex operations, you'll need to use cache.put() directly. note: add() will overwrite any
key/value pair previously stored in the cache that matches the request. syntax cache.add(request).then(function() { // request has been added to the cache }); parameters request the request you want to add to the cache. this can be a request object or a url. return value a promise that resolves with undefined. exceptions exception happens when typeerror ...
Cache.addAll() - Web APIs
the addall() method of the cache interface takes an array of urls, retrieves them, and adds the resulting response objects to the given cache. the request objects created during retrieval become
keys to the stored response operations. note: addall() will overwrite any
key/value pairs previously stored in the cache that match the request, but will fail if a resulting put() operation would overwrite a previous cache entry stored by the same addall() method. syntax cache.addall(requests[]).then(function() { // requests have been added to the cache }); parameters requests an array of string urls that you want to be fetched and added to the cache. you can specify the request object instead of the url. return value a promise that resolves with undefined. exceptions exce...
Cache.delete() - Web APIs
if no cache entry is found, it resolves to false. syntax cache.delete(request, {options}).then(function(found) { // your cache entry has been deleted if found }); parameters request the request you are looking to delete. this can be a request object or a url. options optional an object whose properties control how matching is done in the delete operation. the available options are: ignoresearch: a boolean that specifies whether the matching process should ignore the query string in the url. ...
Cache.put() - Web APIs
the put() method of the cache interface allows
key/value pairs to be added to the current cache object. often, you will just want to fetch() one or more requests, then add the result straight to your cache. in such cases you are better off using cache.add()/cache.addall(), as they are shorthand functions for one or more of these operations. fetch(url).then(function(response) { if (!response.ok) { throw new typeerror('bad response status'); } return cache.put(url, response); }) note: put() will overwrite any
key/value pair previously stored in the cache that matches the request. note: cache.add/cache.addall do not cache responses with response.status values that are not in the 200 range, whereas cache.put lets you store any request/response pair. as a result, cache.add/cach...
CanvasRenderingContext2D.filter - Web APIs
takes up to five arguments: <offset-x>: see <length> for possible units. specifies the horizontal distance of the shadow. <offset-y>: see <length> for possible units. specifies the vertical distance of the shadow. <blur-radius>: the larger this value, the bigger the blur, so the shadow becomes bigger and lighter. negative values are not allowed. <color>: see <color> values for possible
keywords and notations. grayscale() a css <percentage>. converts the drawing to grayscale. a value of 100% is completely grayscale. a value of 0% leaves the drawing unchanged. hue-rotate() a css <angle>. applies a hue rotation on the drawing. a value of 0deg leaves the input unchanged. invert() a css <percentage>. inverts the drawing. a value of 100% means complete inversion. a value of 0% ...
A basic ray-caster - Web APIs
asic idea is to use setinterval() at some arbitrary delay that corresponds to a desired frame rate. after every interval an update function will repaint the canvas showing the current view. i know i could have started with a simpler example, but i'm sure the canvas tutorial will get to that, and i wanted to see if i could do this. so every update, the raycaster looks to see if you've pressed any
keys lately, to conserve calculations by not casting if you're idle. if you have, then the canvas is cleared, the ground and sky are drawn, the camera position and/or orientation are updated, and the rays are cast out. as the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to ...
Hit regions and accessibility - Web APIs
emove', function(event) { if (event.region) { alert('hit region: ' + event.region); } }); </script> the addhitregion() method also takes a control option to route events to an element (that is a descendant of the canvas): ctx.addhitregion({control: element}); this can be useful for routing to <input> elements, for example. see also this codepen demo. focus rings when working with the
keyboard, focus rings are a handy indicator to help navigating on a page. to draw focus rings on a canvas drawing, the drawfocusifneeded property can be used. canvasrenderingcontext2d.drawfocusifneeded() if a given element is focused, this method draws a focus ring around the current path. additionally, the scrollpathintoview() method can be used to make an element visible on the screen if fo...
Canvas API - Web APIs
ers, educators, and beginners. paper.js is an open-source vector graphics scripting framework that runs on top of the html5 canvas. phaser is a fast, free and fun open source framework for canvas and webgl powered browser games. processing.js is a port of the processing visualization language. pts.js is a library for creative coding and visualization in canvas and svg. rekapi is an animation
key-framing api for canvas. scrawl-canvas is an open-source javascript library for creating and manipulating 2d canvas elements. the zim framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials. note: see the webgl api for 2d and 3d libaries that use webgl. specifications specification ...
Clipboard.write() - Web APIs
places the current contents of the clipboard with a specified string. function setclipboard(text) { let data = [new clipboarditem({ "text/plain": text })]; navigator.clipboard.write(data).then(function() { /* success */ }, function() { /* failure */ }); } the code begins by creating a new clipboarditem object into which the text will be placed for sending to the clipboard. the
key of the object passed to the clipboarditem constructor indicates the content type, the value indicates the content. the content could be a text or even a blob (e.g. for copying images to the clipboard). then write() is called, specifying both a fulfilment function and an error function. example of copying canvas contents to the clipboard function copycanvascontentstoclipboard(canvas, ondone, one...
Clipboard - Web APIs
s used for short-term, data storage and/or data transfers, this can be between documents or applications it is usually implemented as an anonymous, temporary data buffer, sometimes called the paste buffer, that can be accessed from most or all programs within the environment via defined programming interfaces. a typical application accesses clipboard functionality by mapping user input such as
keybindings, menu selections, etc. to these interfaces. methods clipboard is based on the eventtarget interface, and includes its methods. read() requests arbitrary data (such as images) from the clipboard, returning a promise. when the data has been retrieved, the promise is resolved with a datatransfer object that provides the data. readtext() requests text from the system clipboard; retur...
ClipboardItem() - Web APIs
boarditem object which represents data to be stored or retrieved via the clipboard api, that is clipboard.write() and clipboard.read() respectively. note: image format support varies by browser. see the browser compatibility table for the clipboard interface. syntax var clipboarditem = new clipboarditem(clipboarditemdata); parameters clipboarditemdata an object with the mime type as the
key and blob as the value. note: to work with text see the clipboard.readtext() and clipboard.writetext() methods of the clipboard interface. examples the below example requests a png image using the fetch api, and in turn, the responses' blob() method, to create a new clipboarditem and write it to the clipboard, using the clipboard api. note: you can only pass in one clipboard item at a time...
ClipboardItem - Web APIs
ab. the clipboard-read permission must be requested, which you can do by trying to read data from the clipboard. note: to work with text see the clipboard.readtext() and clipboard.writetext() methods of the clipboard interface. note: you can only pass in one clipboard item at a time. constructor clipboarditem.clipboarditem() creates a new clipboarditem object, with the mime type as the
key and blob as the value properties this interface provides the following properties. types read only returns an array of mime types available within the clipboarditem. methods this interface defines the following methods. gettype() returns a promise that resolves with a blob of the requested mime type, or an error if the mime type is not found. examples writing to clipboard here ...
CompositionEvent - Web APIs
perties this interface also inherits properties of its parent, uievent, and its ancestor — event. compositionevent.data read only returns the characters generated by the input method that raised the event; its varies depending on the type of event that generated the compositionevent object. compositionevent.locale read only returns the locale of current input method (for example, the
keyboard layout locale if the composition is associated with ime). methods this interface also inherits methods of its parent, uievent, and its ancestor — event. compositionevent.initcompositionevent() initializes the attributes of a compositionevent object. specifications specification status comment ui eventsthe definition of 'compositionevent' in that specific...
Console.group() - Web APIs
sole log. this indents following console messages by an additional level, until console.groupend() is called. note: this feature is available in web workers. syntax console.group([label]); parameters label label for the group. optional. (chrome 59 tested) does not work with console.groupend(). using groups in the console requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamon
key 2.6) you can use nested groups to help organize your output by visually associating related messages. to create a new nested block, call console.group(). the console.groupcollapsed() method is similar, but the new block is collapsed and requires clicking a disclosure button to read it. note: from gecko 9 until gecko 51, the groupcollapsed() method was the same as group(). collapsed groups are ...
Credential - Web APIs
the credential management api provides information about an entity as a prerequisite to a trust decision. properties credential.id read only returns a domstring containing the credential's identifier. this might be any one of a guid, username, or email address. credential.type read only returns a domstring containing the credential's type. valid values are password, federated and public-
key. (for passwordcredential, federatedcredential and public
keycredential) event handlers none. methods none. examples // tbd specifications specification status comment credential management level 1 working draft initial definition. ...
CredentialsContainer - Web APIs
for support details. credentialscontainer.store()secure context stores a set of credentials for a user, inside a provided credential instance and returns that instance in a promise. examples // tbd specifications specification status comment credential management level 1 working draft initial definition. web authentication: an api for accessing public
key credentials level 1 recommendation initial definition. ...
Crypto.getRandomValues() - Web APIs
e the same array passed as typedarray but with its contents replaced with the newly generated random numbers. note that typedarray is modified in-place, and no copy is made. exceptions this method can throw an exception under error conditions. domexception (name: quotaexceedederror) the requested length exceeds 65,536 bytes. usage notes don't use getrandomvalues() to generate encryption
keys. instead, use the generate
key() method. there are a few reasons for this; for example, getrandomvalues() is not guaranteed to be running in a secure context. there is no minimum degree of entropy mandated by the web cryptography specification. user agents are instead urged to provide the best entropy they can when generating random numbers, using a well-defined, efficient pseudorandom number ge...
DOMParser - Web APIs
r xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> (error description) <sourcetext>(a snippet of the source xml)</sourcetext> </parsererror> the parsing errors are also reported to the error console, with the document uri (see below) as the source of the error. parsing svg or html the domparser can also be used to parse an svg document (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7) or an html document (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9). there are three different results possible, selected by the mime type given. if the mime type is text/xml, the result will be an xmldocument if the mime type is image/svg+xml, the result will be an svgdocument if the mime type is text/html, the result will be an htmldocument let parser = new domparser() let doc = p...
DOMTokenList.entries() - Web APIs
the domtokenlist.entries() method returns an iterator allowing you to go through all
key/value pairs contained in this object. the values are domstring objects, each representing a single token. syntax tokenlist.entries(); return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the
key/value pairs using entries(), then iterate through each one using a for...of loop, writing them to the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.entries(); for (let value of iterator) { span.textcontent += ...
DataTransfer.dropEffect - Web APIs
ting, it returns its current value. on setting, if the new value is one of the values listed below, then the property's current value will be set to the new value and other values will be ignored. for the dragenter and dragover events, dropeffect will be initialized based on what action the user is requesting. how this is determined is platform specific, but typically the user can press modifier
keys such as the alt
key to adjust the desired action. within event handlers for dragenter and dragover events, dropeffect should be modified if a different action is desired than the action that the user is requesting. for the drop and dragend events, dropeffect will be set to the action that was desired, which will be the value dropeffect had after the last dragenter or dragover event. in a drage...
DedicatedWorkerGlobalScope - Web APIs
some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the javascript reference. see also: functions available to workers. properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers. dedicatedworkerglobalscope.name read only the name that the worker was (optionally) given when it was created using the worker() constructor. ...
Document.createEntityReference() - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. prior to gecko 7.0 this method showed up as present, due to bug bug 9850, it always only returned null. the only workaround is to create a text node, cdata section, attribute node value, etc. ...
Document.createEvent() - Web APIs
isted in the dom standard — see the table in step 2. bear in mind that most event objects now have constructors, which are the modern recommended way to create event object instances. gecko supports some non-standard event object aliases, which are listed below. event module standard event object gecko also supports text event module textevent textevents
keyboard event module
keyboardevent
keyevents basic events module event events specifications specification status comment domthe definition of 'document.createevent' in that specification. living standard ...
Document.createNodeIterator() - Web APIs
subtree based at root which is accepted as included by the whattoshow flag to determine whether or not to include it in the list of iterable nodes (a simple callback function may also be used instead). the method should return one of nodefilter.filter_accept, nodefilter.filter_reject, or nodefilter.filter_skip. see the example. note: prior to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamon
key 2.9), this method accepted an optional fourth parameter (entityreferenceexpansion) that is not part of the dom4 specification, and has therefore been removed. this parameter indicated whether or not the children of entity reference nodes were visible to the iterator. since such nodes were never created in browsers, this paramater had no effect. example const nodeiterator = document.createnodeit...
Document: dragend event - Web APIs
bubbles yes cancelable no default action varies interface dragevent event handler property ondragend examples see the drag event for example code or this jsfiddle demo. ...
Document.importNode() - Web APIs
node has no children. note: in the dom4 specification, deep was an optional argument with a default value of true. this default has changed in the latest spec! the new default value is false. best practice: though it's still an optional argument, you should always provide the deep argument for backward and forward compatibility. with gecko 28.0 (firefox 28 / thunderbird 28 / seamon
key 2.25 / firefox os 1.3), the console warns developers not to omit the argument. starting with gecko 29.0 (firefox 29 / thunderbird 29 / seamon
key 2.26)), a shallow clone is defaulted instead of a deep clone. return value the copied importednode in the scope of the importing document. note: importednode's node.parentnode is null, since it has not yet been inserted into the document tre...
Document.popupNode - Web APIs
note: starting with gecko 2.0, authors are encouraged to use the menupopup property triggernode instead. when a popup attached via the popup or context attributes is opened, the xul document's popupnode property is set to the node that was clicked on. this will be the target of the mouse event that activated the popup. if the popup was opened via the
keyboard, the popup node may be set to null. typically, this property will be checked during a popupshowing event handler for a context menu to initialize the menu based on the context. this property is only set for popups attached via the popup or context attributes. for other types of popups, the value is not changed. in these other cases, for example when calling the popup's showpopup method, you may wish to set the popupnode property dir...
Document.xmlVersion - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the version number as specified in the xml declaration (e.g., <?xml version="1.0"?>) or "1.0" if the declaration is absent. this attribute was never really useful, since it always returned 1.0, and has been removed in dom level 4. as such, firefox 10 no longer implements it. its primary use in the past was to detect whether or not the document was being rendered as xml rather than html. ...
DocumentFragment - Web APIs
changes made to the fragment don't affect the document (even on reflow) or incur any performance impact when changes are made. ...
DocumentOrShadowRoot.activeElement - Web APIs
has focus. often activeelement will return a htmlinputelement or htmltextareaelement object if it has the text selection at the time. if so, you can get more detail by using the object's selectionstart and selectionend properties. other times the focused element might be a <select> element (menu) or an <input> element, of type "button", "checkbox", or "radio". typically a user can press the tab
key to move the focus around the page among focusable elements, and use the space bar to activate one (that is, to press a button or toggle a radio button). which elements are focusable varies depending on the platform and the browser's current configuration. for example, on macos systems, elements that aren't text input elements are not typically focusable by default. note: focus (which element is...
DocumentTimeline.DocumentTimeline() - Web APIs
e animations, thus allowing us to manipulate just that group of animations via their shared timeline. this bit of code would start all the cats animating 500 milliseconds into their animations: var cats = document.queryselectorall('.sharedtimelinecat'); cats = array.prototype.slice.call(cats); var sharedtimeline = new documenttimeline({ origintime: 500 }); cats.foreach(function(cat) { var cat
keyframes = new
keyframeeffect(cat,
keyframes, timing); var catanimation = new animation(cat
keyframes, sharedtimeline); catanimation.play(); }); specifications specification status comment web animationsthe definition of 'documenttimeline()' in that specification. working draft editor's draft. ...
DocumentTimeline - Web APIs
a single documenttimeline among multiple animations, thus allowing us to manipulate just that group of animations via their shared timeline. this bit of code would start all the cats animating 500 milliseconds into their animations: const cats = document.queryselectorall('.sharedtimelinecat'); const sharedtimeline = new documenttimeline({ origintime: 500 }); for (const cat of cats) { const cat
keyframes = new
keyframeeffect(cat,
keyframes, timing); const catanimation = new animation(cat
keyframes, sharedtimeline); catanimation.play(); } specifications specification status comment web animationsthe definition of 'documenttimeline' in that specification. working draft editor's draft. ...
DragEvent - Web APIs
pt, since datatransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops. dragevent() creates a synthetic and untrusted dragevent. event types drag this event is fired when an element or text selection is being dragged. dragend this event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape
key). dragenter this event is fired when a dragged element or text selection enters a valid drop target. dragexit this event is fired when an element is no longer the drag operation's immediate selection target. dragleave this event is fired when a dragged element or text selection leaves a valid drop target. dragover this event is fired continuously when an element or text selection is being...
EffectTiming.delay - Web APIs
the effecttiming dictionary's delay property in the web animations api represents the number of milliseconds to delay the start of the animation. element.animate(),
keyframeeffectreadonly(), and
keyframeeffect() all accept an object of timing properties including delay. the value of delay corresponds directly to effecttiming.delay in timing objects returned by animationeffectreadonly,
keyframeeffectreadonly, and
keyframeeffect. syntax var timingproperties = { delay: delayinmilliseconds }; timingproperties.delay = delayinmilliseconds; value a number specifying the delay, in milliseconds, from the start of the animation's play cycle to the beginning of its active interval (the time index at which actual animation begins). defaults to 0. examples in the pool of tears exam...
EffectTiming.duration - Web APIs
the duration property of the dictionary effecttiming in the web animations api specifies the duration in milliseconds that a single iteration (from beginning to end) the animation should take to complete. element.animate(),
keyframeeffectreadonly(), and
keyframeeffect() all accept an object of timing properties including duration. the value of duration corresponds directly to animationeffecttimingreadonly.duration in timing objects returned by animationeffectreadonly,
keyframeeffectreadonly, and
keyframeeffect. syntax var timingproperties = { duration: durationinmilliseconds | "auto" }; timingproperties.duration = durationinmilliseconds | "auto"; value the number of milliseconds long a single beginning-to-end iteration of the animation should take. the default is "auto".
EffectTiming.endDelay - Web APIs
ffecttimingreadonly.delay, plus its duration,duration, plus its end delay. this is useful for sequencing animations based on the end time of another animation; note, however, that many of the sequence effectst that will benefit most from this property have not been defined in the specification yet. for now, its main purpose is to represent the value of the svg min attribute. element.animate(),
keyframeeffectreadonly(), and
keyframeeffect() all accept an object of timing properties including enddelay. the value of enddelay corresponds directly to animationeffecttimingreadonly.enddelay in timing objects returned by animationeffectreadonly,
keyframeeffectreadonly, and
keyframeeffect. syntax var timingproperties = { enddelay: delayinmilliseconds } timingproperties.enddelay = delayinmilli...
EffectTiming.iterationStart - Web APIs
web animations api's effecttiming dictionary's iterationstart property specifies the repetition number which repetition the animation begins at and its progress through it. element.animate(),
keyframeeffectreadonly.
keyframeeffectreadonly(), and
keyframeeffect.
keyframeeffect() all accept an object of timing properties including iterationstart. the value of iterationstart corresponds directly to animationeffecttimingreadonly.iterationstart in timing objects returned by animationeffectreadonly,
keyframeeffectreadonly, and
keyframeeffect. syntax var timingproperties = { iterationstart = iterationnumber }; timingproperties.iterationstart = iterationnumber; value a floating-point value whose value is at least 0 and is not +infinity, indicating the offset into the number of it...
Element: DOMActivate event - Web APIs
the domactivate event is fired at an element when it becomes active, such as when it is clicked on using the mouse or a
keypress is used to navigate to it. bubbles yes cancelable yes interface mouseevent examples <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseprofile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var currentradius = circle.getfloattrait("r"); if (currentradius == 100) circle.setfloattrait("r", currentradius *...
Element.attributes - Web APIs
the element.attributes property returns a live collection of all attribute nodes registered to the specified node. it is a namednodemap, not an array, so it has no array methods and the attr nodes' indexes may differ among browsers. to be more specific, attributes is a
key/value pair of strings that represents any information regarding that attribute. syntax var attr = element.attributes; example basic examples // get the first <p> element in the document var para = document.getelementsbytagname("p")[0]; var atts = para.attributes; enumerating elements attributes numerical indexing is useful for going through all of an element's attributes. the following example runs through the attribute nodes for the element in the document with id "paragraph", and prints each attribute's value. ...
Element.className - Web APIs
ntnodereference.classname = cname; cname is a string variable representing the class or space-separated classes of the current element. example let el = document.getelementbyid('item'); if (el.classname === 'active'){ el.classname = 'inactive'; } else { el.classname = 'active'; } notes the name classname is used for this property instead of class because of conflicts with the "class"
keyword in many languages which are used to manipulate the dom. classname can also be an instance of svganimatedstring if the element is an svgelement. it is better to get/set the classname of an element using element.getattribute and element.setattribute if you are dealing with svg elements. however, take into account that element.getattribute returns null instead of "" if the element has an empty ...
Element: contextmenu event - Web APIs
in the latter case, the context menu is displayed at the bottom left of the focused element, unless the element is a tree, in which case the context menu is displayed at the bottom left of the current row. any right-click event that is not disabled (by calling the event's preventdefault() method) will result in a contextmenu event being fired at the targeted element. ...
Element.namespaceURI - Web APIs
defined within the node interface. syntax namespace = element.namespaceuri example in this snippet, an element is being examined for its localname and its namespaceuri. if the namespaceuri returns the xul namespace and the localname returns "browser", then the node is understood to be a xul <browser/>. if (element.localname == "browser" && element.namespaceuri == "http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope. the namespace uri of a node is frozen at the node creation time. in firefox 3.5 and earlier, the namespace uri for html elements in html documents is null. in later versions, in compliance...
Element.onfullscreenerror - Web APIs
r the fullscreenerror event which is sent to the element when an error occurs while attempting to transition into or out of full-screen mode. syntax targetelement.onfullscreenerror = fullscreenerrorhandler; value an error handler for the fullscreenerror event. example this example attempts to switch into full-screen mode from outside a handler for a user-initiated event (such as a click or
keypress event). since full-screen mode changes are only permitted in response to a user input, this causes an error to occur, which triggers the delivery of the fullscreenerror event to the error handler, let elem = document.queryselector("video")}} elem.onfullscreenerror = function ( event ) { displaywarning("unable to switch into full-screen mode."); }; //.... elem.requestfullscreen(); spec...
Element.tabStop - Web APIs
if the specified element is a shadow host tab navigation is delegated to its children. this property was proposed to add tab functionality for custom elements. while with the existing tabindex property, it is required to specify an order for the element to become tabbable. the tabstop property would decouple the tabbable property from the tab index. ...
Event.currentTarget - Web APIs
rint the clicked <p> element ps[i].addeventlistener('click', hide, false); } // console: print <body> document.body.addeventlistener('click', hide, false); // click around and make paragraphs disappear note: the value of event.currenttarget is only available while the event is being handled. if you console.log() the event object, storing it in a variable, and then look for the currenttarget
key in the console, its value will be null. instead, you can either directly console.log(event.currenttarget) to be able to view it in the console or use the debugger statement, which will pause the execution of your code thus showing you the value of event.currenttarget. specifications specification status comment domthe definition of 'event.currenttarget' in that specific...
EventSource - Web APIs
state attribute to closed. if the connection is already closed, the method does nothing. events error fired when a connection to an event source failed to open. message fired when data is received from an event source. open fired when a connection to an event source has opened. additionally, the event source itself may send messages with an event field, which will create ad-hoc events
keyed to that value. examples in this basic example, an eventsource is created to receive unnamed events from the server; a page with the name sse.php is responsible for generating the events. var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "me...
FetchEvent.respondWith() - Web APIs
e. const cachedresponse = await caches.match(event.request); // return it if we found one. if (cachedresponse) return cachedresponse; // if we didn't find a match in the cache, use the network. return fetch(event.request); }()); }); note: caches.match() is a convenience method. equivalent functionality is to call cache.match() on each cache (in the order returned by caches.
keys()) until a response is returned. specifications specification status comment service workersthe definition of 'respondwith()' in that specification. working draft initial definition. ...
Using files from web applications - Web APIs
} }, false); you can style the new button for opening the file picker as you wish. using a label element to trigger a hidden file input element to allow opening the file picker without using javascript (the click() method), a <label> element can be used. note that in this case the input element must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be
keyboard-accessible. use the visually-hidden technique instead. consider this html: <input type="file" id="fileelem" multiple accept="image/*" class="visually-hidden"> <label for="fileelem">select some files</label> and this css: .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibil...
File.fileName - Web APIs
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. obsolete since gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the name of the file. for security reasons the path is excluded from this property. this property is deprecated. use file.name instead. syntax var name = instanceoffile.filename; value a string specification not part of any specification. ...
File.getAsBinary() - Web APIs
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. obsolete since gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary the getasbinary method allows to access the file's data in raw binary format. note: this method is obsolete; you should use the filereader method readasbinarystring() or readasarraybuffer() instead. syntax var binary = instanceoffile.getasbinary(); returns a string...
File.getAsText() - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary the getastext method provides the file's data interpreted as text using a given encoding. note: this method is obsolete; you should use the filereader method readastext() instead. syntax var str = instanceoffile.getastext(encoding); parameters encoding a string indicating the encoding to use for the returned data. if this string is empty, utf-8 is assumed. returns a string containing the file's data interpreted as text in the specified encoding. ...
FileHandle API - Web APIs
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 ...
Introduction to the File and Directory Entries API - Web APIs
built on the file writer api, which, in turn, was built on file api. each of the apis adds different functionality. these apis are a giant evolutionary leap for web apps, which can now cache and process large amounts of data. about this document this introduction discusses essential concepts and terminology in the file and directory entries api. it gives you the big picture and orients you to
key concepts. it also describes restrictions that raise security errors if you ignore them. to learn more about terminology used in this api, see the definitions section. for the reference documentation on the file and directory entries api, see the reference landing page and its subpages. the specification is still being defined and is subject to change. overview the file and directory entries ...
FontFace.FontFace() - Web APIs
new fontface(family, source, descriptors); parameters family specifies a name that will be used as the font face value for font properties. takes the same type of values as the font-family descriptor of @font-face . source the font source. this can be either: a url binary font data descriptors optional a set of optional descriptors passed as an object. ...
FormData.delete() - Web APIs
the delete() method of the formdata interface deletes a
key and its value(s) from a formdata object. note: this method is available in web workers. syntax formdata.delete(name); parameters name the name of the
key you want to delete. returns void. example the following line creates an empty formdata object and prepopulates it with
key/value pairs from a form: var formdata = new formdata(myform); you can delete
keys and their values using delete(): formdata.delete('username'); specifications specification status comment xmlhttprequestthe definition of 'delete()' in that specification. living standard ...
FormData.entries() - Web APIs
the formdata.entries() method returns an iterator allowing to go through all
key/value pairs contained in this object. the
key of each pair is a usvstring object; the value either a usvstring, or a blob. note: this method is available in web workers. syntax formdata.entries(); return value returns an iterator. example // create a test formdata object var formdata = new formdata(); formdata.append('
key1', 'value1'); formdata.append('
key2', 'value2'); // display the
key/value pairs for(var pair of formdata.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is:
key1, value1
key2, value2 specifications specification status comment xmlhttprequestthe definition of 'entries() (as iterator<>)' in that specification. living standard initial ...
FormData.get() - Web APIs
the get() method of the formdata interface returns the first value associated with a given
key from within a formdata object. if you expect multiple values and want all of them, use the getall() method instead. note: this method is available in web workers. syntax formdata.get(name); parameters name a usvstring representing the name of the
key you want to retrieve. return value a formdataentryvalue containing the value. if the
key doesn't exist, the method returns null. example the following line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following get() function will only return the first username value appended: formdat...
FormData.getAll() - Web APIs
the getall() method of the formdata interface returns all the values associated with a given
key from within a formdata object. note: this method is available in web workers. syntax formdata.getall(name); parameters name a usvstring representing the name of the
key you want to retrieve. returns an array of formdataentryvalues whose
key matches the value passed in the name parameter. if the
key doesn't exist, the method returns an empty list. example the following line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following getall() function will return both username values in an array: formdata.getall('username'); // returns...
FormData.values() - Web APIs
the formdata.values() method returns an iterator allowing to go through all values contained in this object. the values are usvstring or blob objects. note: this method is available in web workers. syntax formdata.values(); return value returns an iterator. example // create a test formdata object var formdata = new formdata(); formdata.append('
key1', 'value1'); formdata.append('
key2', 'value2'); // display the values for (var value of formdata.values()) { console.log(value); } the result is: value1 value2 specifications specification status comment xmlhttprequestthe definition of 'values() (as iterator<>)' in that specification. living standard initial definition ...
FormDataEntryValue - Web APIs
this type is returned by the formdata.get() and formdata.getall() methods. the formdata.get() method returns a single value while formdata.getall() returns an array of formdataentryvalues. ...
GlobalEventHandlers.onchange - Web APIs
note: unlike oninput, the onchange event handler is not necessarily called for each alteration to an element's value. syntax target.onchange = functionref; functionref is a function name or a function expression. ...
GlobalEventHandlers.onclick - Web APIs
the onclick property of the globaleventhandlers mixin is the eventhandler for processing click events on a given element. the click event is raised when the user clicks on an element. it fires after the mousedown and mouseup events, in that order. note: when using the click event to trigger an action, also consider adding this same action to the
keydown event, to allow the use of that same action by people who don't use a mouse or a touch screen. syntax target.onclick = functionref; value functionref is a function name or a function expression. the function receives a mouseevent object as its sole argument. within the function, this will be the element upon which the event was triggered. only one onclick handler can be assigned to an object at a time. you may prefer to use the eventt...
GlobalEventHandlers.oncontextmenu - Web APIs
g in the window. the context menu typically appears upon a right click. html <p>try opening the context menu. is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu. ...
GlobalEventHandlers.onselectionchange - Web APIs
when the text selected on a webpage changes. syntax object.onselectionchange = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. example let selection; document.onselectionchange = function() { console.log('new selection made'); selection = document.getselection(); }; for a full example, see our
key quote generator demo. specifications specification status comment selection apithe definition of 'globaleventhandlers.onselectionchange' in that specification. working draft initial definition. ...
GlobalEventHandlers.onselectstart - Web APIs
start events. the selectstart event fires when the user starts to make a new text selection on a webpage. syntax object.onselectstart = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. example document.onselectstart = function() { console.log('selection started!'); }; for a full example, see our
key quote generator demo. specifications specification status comment selection apithe definition of 'globaleventhandlers.onselectstart' in that specification. working draft initial definition. ...
HTMLFormElement - Web APIs
ements you can access the list of the form's data-containing elements by examining the form's elements property. this returns an htmlformcontrolscollection listing all of the form's user data entry elements, both those which are descendants of the <form> and those which are made members of the form using their form attributes. you can also get the form's element by using its name attribute as a
key of the form, but using elements is a better approach—it contains only the form's elements, and it cannot be mixed with other attributes of the form. issues with naming elements some names will interfere with javascript access to the form’s properties and elements. for example: <input name="id"> will take precedence over <form id="…">. this means that form.id will not refer to the form...
HTMLInputElement: search event - Web APIs
arch is initiated usinng an <input> element of type="search". bubbles yes cancelable no interface event event handler property onsearch there are several ways a search can be initiated, such as by pressing enter while the <input> is focused, or, if the incremental attribute is present, after a ua-defined timeout elapses since the most recent
keystroke (with new
keystrokes resetting the timeout so the firing of the event is debounced). current ua implementations of <input type="search"> have an additional control to clear the field. using this control also fires the search event. in that case the value of the <input> element will be the empty string. examples // addeventlistener version const input = document.queryselector('input[type=...
HTMLLabelElement - Web APIs
this reflects the for attribute. methods no specific methods; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmllabelelement' in that specification. living standard html5the definition of 'htmllabelelement' in that specification. recommendation the property access
key is now defined on htmlelement. the following property has been added: control. document object model (dom) level 2 html specificationthe definition of 'htmllabelelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmllabelelement' in that specifica...
HTMLElement.blur() - Web APIs
syntax element.blur(); examples remove focus from a text input html <input type="text" id="mytext" value="sample text"> <br><br> <button type="button" onclick="focusinput()">click me to gain focus</button> <button type="button" onclick="blurinput()">click me to lose focus</button> javascript function focusinput() { document.getelementbyid('mytext').focus(); } function blurinput() { document.getelementbyid('mytext').blur(); } result specification specification status comment html living standardthe definition of 'blur' in that specification. living standard html 5.1the definition of 'blur' in that specification. ...
HTMLElement.focus() - Web APIs
syntax element.focus(options); // object parameter parameters options optional an optional object providing options to control aspects of the focusing process. this object may contain the following property: preventscroll optional a boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. ...
HTMLParamElement - Web APIs
the htmlparamelement interface provides special properties (beyond those of the regular htmlelement object interface it inherits) for manipulating <param> elements, representing a pair of a
key and a value that acts as a parameter for an <object> element. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
Using microtasks in JavaScript with queueMicrotask() - Web APIs
ollowing iteration. microtasks at first the difference between microtasks and tasks seems minor. and they are similar; both are made up of javascript code which gets placed on a queue and run at an appropriate time. however, whereas the event loop runs only the tasks present on the queue when the iteration began, one after another, it handles the microtask queue very differently. there are two
key differences. first, each time a task exits, the event loop checks to see if the task is returning control to other javascript code. if not, it runs all of the microtasks in the microtask queue. the microtask queue is, then, processed multiple times per iteration of the event loop, including after handling events and other callbacks. second, if a microtask adds more microtasks to the queue by ca...
Headers.getAll() - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the getall() method of the headers interface used to return an array of all the values of a header within a headers object with a given name; in newer versions of the fetch spec, it has been deleted, and headers.get() has been updated to fetch all header values instead of only the first one. if the requested header doesn't exist in the headers object, it returns an empty array. for security reasons, some headers can only be controller by the user agent. ...
IDBCursor.source - Web APIs
rating over. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. within each iteration we log the source of the cursor, which will log our idbobjectstore object to the console, something like this: idbobjectstore {autoincrement: false, transaction: idbtransaction, indexnames: domstringlist,
keypath: "albumtitle", name: "rushalbumlist"…} the cursor does not require us to select the data based on a
key; we can just grab all of it. also note that in each iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction ...
IDBCursorWithValue.value - Web APIs
ailable in web workers. syntax var value = myidbcursorwithvalue.value; value the value of the current cursor. example in this example we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. within each iteration we log the value of the cursor with cursor.value. the cursor does not require us to select the data based on a
key; we can just grab all of it. also note that in each iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); ...
IDBDatabase - Web APIs
ersion number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database using // idbdatabase.createobjectstore var objectstore = db.createobjectstore("todolist", {
keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); ...
IDBIndex.isAutoLocale - Web APIs
e a boolean. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary
key. the isautolocale value is logged to the console. function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = function(event) { var cursor = event.
IDBIndex.locale - Web APIs
a domstring. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary
key. the locale value is logged to the console. function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.resul...
IDBIndex.name - Web APIs
the specified name. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor() — this works the same as opening a cursor directly on an idbobjectstore using opencursor() except that the returned records are sorted based on the index, not the primary
key. the name of the index is logged to the console: it should be returned as lname. finally, we iterate through each record, inserting the data into an html table. for a complete working example, see our idbindex-example demo repo (view the example live). function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstor...
IDBIndex.objectStore - Web APIs
idbobjectstore. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor. this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary
key. the current object store is logged to the console: it should be returned something like this: idbobjectstore { name: "contactslist",
keypath: "id", indexnames: domstringlist[7], transaction: idbtransaction, autoincrement: false } finally, we iterate through each record, and insert the data into an html table. for a complete working example, see our idbindex-example demo repo (view the example...
IDBObjectStore.clear() - Web APIs
es and immediately returns an idbrequest object, and clears this object store in a separate thread. this is for deleting all the current data out of an object store. clearing an object store consists of removing all records from the object store and removing all records in indexes that reference the object store. to remove only some of the records in a store, use idbobjectstore.delete passing a
key or idb
keyrange. note: this feature is available in web workers. syntax var request = objectstore.clear(); returns an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description readonlyerror the transaction associated with this operation is...
IDBObjectStore.deleteIndex() - Web APIs
a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", {
keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }...
IDBObjectStore.index() - Web APIs
. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary
key. finally, we iterate through each record, and insert the data into an html table. for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index(...
IDBOpenDBRequest.onblocked - Web APIs
}; request.onblocked = function() { console.log("your database version can't be upgraded because the app is open somewhere else."); } specifications specification status comment indexed database api 2.0the definition of 'onblocked' in that specification. recommendation indexed database api draftthe definition of 'onblocked'...
IDBOpenDBRequest.onupgradeneeded - Web APIs
/ before, or a new version number has been submitted via the // window.indexeddb.open line above. request.onupgradeneeded = function(event) { db = request.result; db.onerror = function(errorevent) { note.innerhtml += '<li>error loading database.</li>'; }; if (event.oldversion < 1) { // version 1 is the first version of the database. var store = db.createobjectstore("books", {
keypath: "isbn"}); var titleindex = store.createindex("by_title", "title", {unique: true}); var authorindex = store.createindex("by_author", "author"); } if (event.oldversion < 2) { // version 2 introduces a new index of books by year. var bookstore = request.transaction.objectstore("books"); var yearindex = bookstore.createindex("by_year", "year"); } if (event.oldversion ...
IDBOpenDBRequest - Web APIs
new version number has been // submitted via the window.indexeddb.open line above // it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", {
keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }...
IDBRequest.error - Web APIs
lowing error codes are returned under certain conditions: error explanation aborterror if you abort the transaction, then all requests still in progress receive this error. constrainterror if you insert data that doesn't conform to a constraint. it's an exception type for creating stores and indexes. you get this error, for example, if you try to add a new
key that already exists in the record. quotaexceedederror if you run out of disk quota and the user declined to grant you more space. unknownerror if the operation failed for reasons unrelated to the database itself. a failure due to disk io errors is such an example. noerror if the request succeeds. versionerror if you try to open a database with a ver...
IDBTransaction - Web APIs
v> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = trans1.objectstore("foo") objectstore2.put("2", "
key"); objectstore1.put("1", "
key"); after the code is executed the object store should contain the value "2", since trans2 should run after trans1. transaction failures transactions can fail for a fixed number of reasons, all of which (except the user agent crash) will trigger an abort callback: abort due to bad requests, e.g. trying to add() the same
key twice, or put() with the same index k...
Checking when a deadline is due - Web APIs
n mobile devices, and to cut down on ambiguities, i decided to create an html form with: a text input for entering a title for your to-do list. this is the least avoidable bit of user typing. number inputs for the hour and minute parts of the deadline. on browsers that support type="number", you get a nice little up and down arrow number picker. on mobile platforms you tend to get a numeric
keypad for entering data, which is helpful. on others you just get a standard text input, which is okay. <select> elements for inputting the day, month and year of the deadline. because these values are the most ambiguous for users to enter (7, sunday, sun? 04, 4, april, apr? 2013, '13, 13?), i decided the best solution was to give them a choice to pick from, which also saves on annoying typing for ...
InputDeviceCapabilities - Web APIs
events. events caused by the same physical input device get the same instance of this object, but the converse isn't true. for example, two mice with the same capabilities in a system may appear as a single inputdevicecapabilities instance. in some instances, inputdevicecapabilities represents the capabilities of logical devices rather than physical devices. this allows, for example, touchscreen
keyboards and physical
keyboards to be represented the same way when they produce the same input. constructors inputdevicecapabilities.inputdevicecapabilities() creates an inputdevicecapabilities object. properties inputdevicecapabilities.firestoucheventsread only a boolean that indicates whether the device dispatches touch events. methods none. specifications specification ...
LocalFileSystem - Web APIs
creating new storage you request access to a sandboxed file system by calling window.requestfilesystem(). the argument of a successful callback is the filesystem object, which has two properties: the name and root of the file system. ...
Media Session action types - Web APIs
aying advertisement or commercial. this action may or may not be available, depending on the platform and user agent, or may be disabled due to subscription level or other circumstances. stop halts playback entirely. description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control
keys on the user's
keyboard to buttons on the user's headset or earbuds. examples adding action handlers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers. let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media not...
MediaSessionActionDetails - Web APIs
aying advertisement or commercial. this action may or may not be available, depending on the platform and user agent, or may be disabled due to subscription level or other circumstances. stop halts playback entirely. description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control
keys on the user's
keyboard to buttons on the user's headset or earbuds. examples adding action handlers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers. let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media not...
Recording a media element - Web APIs
rded. in this article, we'll look at an example that does just that. html content <p>click the "start" button to begin video recording for a few seconds. you can stop the video by clicking the creatively-named "stop" button. the "download" button will download the received data (although it's in a raw, unwrapped form that isn't very useful). </p> <br> let's start by looking at the
key bits of the html. there's a little more than this, but it's just informational rather than being part of the core operation of the app. <div class="left"> <div id="startbutton" class="button"> start </div> <h2>preview</h2> <video id="preview" width="160" height="120" autoplay muted></video> </div> we present our main interface in two columns. on the left is a start button and a <vi...
Using the Media Capabilities API - Web APIs
these features include: the ability to query the browser to determine its ability to encode or decode media given a specified set of encoding parameters. these parameters may include the codecs, resolutions, bit rates, frame rates, and other such details. with the media capabilities api, you can determine not just if the browser can support a given format, but whether or not it can do so efficiently and smoothly. in short, this api replaces—and improves upon—the mediasource method istypesupported() or the htmlmediaelement method canplaytype(). ...
Microsoft API extensions - Web APIs
referredsourceuri msplaytoprimary msplaytosource msrealtime mssetmediaprotectionmanager mssetvideorectangle msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-accelerator
key x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...
MouseEvent.button - Web APIs
(if present) 2: secondary button pressed, usually the right button 3: fourth button, typically the browser back button 4: fifth button, typically the browser forward button as noted above, buttons may be configured differently to the standard "left to right" layout. a mouse configured for left-handed use may have the button actions reversed. some pointing devices only have one button and use
keyboard or other input mechanisms to indicate main, secondary, auxilary, etc. others may have many buttons mapped to different functions and button values. example html <button id="button" oncontextmenu="event.preventdefault();">click here with your mouse...</button> <p id="log"></p> javascript let button = document.queryselector('#button'); let log = document.queryselector('#log'); button.adde...
MouseEvent.clientX - Web APIs
dule. originally, this property was defined as a long integer. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove event. html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', log
key); function log
key(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clientx' in that specification. working draft redefines mouseevent from long to double. document object model...
MouseEvent.clientY - Web APIs
dule. originally, this property was defined as a long integer. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove event. html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', log
key); function log
key(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clienty' in that specification. working draft redefines mouseevent from long to double. document object model...
MouseEvent.mozInputSource - Web APIs
1 the event was generated by a mouse (or mouse-like device). moz_source_pen 2 the event was generated by a pen on a tablet. moz_source_eraser 3 the event was generated by an eraser on a tablet. moz_source_cursor 4 the event was generated by a cursor. moz_source_touch 5 the event was generated on a touch interface. moz_source_
keyboard 6 the event was generated by a
keyboard. specifications not part of any specification. ...
MouseEvent.relatedTarget - Web APIs
nition of 'mouseevent.relatedtarget' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'mouseevent.relatedtarget' in that specification. obsolete no change from document object model (dom) level 2 events specification. document object model (dom) level 2 events specificationthe definition of 'mouseevent.alt
key' in that specification. obsolete initial definition. ...
MouseEvent.screenY - Web APIs
defined this as an integer referring to the number of pixels. see the "browser compatibility" section for details. example this example displays your mouse's coordinates whenever you trigger the mousemove event. html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', log
key); function log
key(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'screeny' in that specification. working draft redefines mouseevent from long to double. document object model...
MouseScrollEvent - Web APIs
, this interface is non-standard and deprecated. it was used in gecko-based browsers only. instead use the standard wheelevent. method overview void initmousescrollevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrl
keyarg, in boolean alt
keyarg, in boolean shift
keyarg, in boolean meta
keyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in long axis); attributes attribute type description axis read only long indicates scroll direction. constants delta modes constant value description horizontal_axis 0x01 the event...
MutationObserverInit.attributeFilter - Web APIs
ttribute monitoring is enabled regardless of whether or not the attributes property is true. example in this example, a mutation observer is set up to watch for changes to the status and username attributes in any elements contained within a subtree that displays the names of users in a chat room. this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from
keyboard (afk) or offline. function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": switch(mutation.attributename) { case "status": userstatuschanged(mutation.target.username, mutation.target.status); break; case "username": usernamechanged(mutation.oldvalue, muta...
MutationObserverInit.attributeOldValue - Web APIs
it is not. when using attributeoldvalue, setting the attributes option to true is optional. example in this example, a mutation observer is set up to watch for changes to the status and username attributes in any elements contained within a subtree that displays the names of users in a chat room. this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from
keyboard (afk) or offline. function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.target[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.quer...
MutationObserverInit.attributes - Web APIs
attributes is automatically assumed to be true, even if you don't expressly set it as such. example in this example, a mutation observer is set up to watch for changes to the status and username attributes in any elements contained within a subtree that displays the names of users in a chat room. this lets the code, for example, reflect changes to users' nicknames, or to mark them as away from
keyboard (afk) or offline. function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.target[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.quer...
NameList - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. note: although this interface was previously implemented in gecko, there was no way to actually create one. namelist has been removed, effective with gecko 10.0 the namelist interface provides an abstraction for an ordered collection of name and namespace value pairs. items can be accessed by a 0-based index. the dom spec does not specify how the collection is to be implemented. properties namelist.length read only methods namelist.contains() returns a boolean. ...
Navigator.mediaSession - Web APIs
ontrol user experience to describe and control the playback of the media. in addition, the mediasession interface provides the setactionhandler() method, which lets you receive events when the user engages device controls such as either onscreen or physical play, pause, seek, and other similar controls. an internet radio app, for example, can use setactionhandler() to let fhe media controls on a
keyboard or elsehwere on the user's device be used to control the app's media playback. syntax let mediasession = navigator.mediasession; value a mediasession object the current document can use to share information about media it's playing and its current playback status. this information can include typical metadata such as the title, artist, and album name of the song being played as well as p...
Node.getUserData() - Web APIs
the node.getuserdata() method returns any user domuserdata set previously on the given node by node.setuserdata(). the node.setuserdata and node.getuserdata methods are no longer available from web content. element.dataset or weakmap can be used instead. syntax userdata = somenode.getuserdata(user
key); parameters user
key is the
key to choose the specific data sought for the given node. more than one
key may have been assigned on a given node, containing its own value. example var d = document.setuserdata('
key', 15, null); console.log(document.getuserdata('
key')); // 15 specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'node.getuserdata()' in that specification. obsolete initial...
Node.isDefaultNamespace() - Web APIs
ns a boolean with a value of true if the namespace is the default namespace on the given node or false if not. syntax result = node.isdefaultnamespace(namespaceuri); parameters namespaceuri is a string representing the namespace against which the element will be checked. return value result is a boolean that holds the return value true or false. example var xulns = "http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul"; var el = document.getelementsbytagnamens(xulns, 'textbox')[0]; alert(el.isdefaultnamespace(xulns)); // true specifications specification status comment domthe definition of 'node: isdefaultnamespace' in that specification. living standard ...
Node.namespaceURI - Web APIs
m node to the element and attr interfaces. syntax namespace = node.namespaceuri example in this snippet, a node is being examined for its node.localname and its namespaceuri. if the namespaceuri returns the xul namespace and the localname returns "browser", then the node is understood to be a xul <browser/>. if (node.localname == "browser" && node.namespaceuri == "http://www.mozilla.org/
keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope. the namespace uri of a node is frozen at the node creation time. in firefox 3.5 and earlier, the namespace uri for html elements in html documents is null. in later versions, in compliance...
Node.nodePrincipal - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the node.nodeprincipal read-only property returns the nsiprincipal object representing current security context of the node. note: this property exists on all nodes (html, svg, mathml, xul, etc.), but only if the script trying to use it has chrome privileges. syntax principalobj = node.nodeprincipal value an nsiprincipal object representing the node's security context. notes this property is read-only; attempting to write to it will throw an exception. ...
PaymentRequestEvent() - Web APIs
the paymentrequestevent constructor creates a new paymentrequestevent object which is a constructor for a paymentrequestevent which is the object passed to a payment handler when a paymentrequest is made.. syntax var paymentrequestevent = new paymentrequesteventy(type, options) parameters type must always be 'paymentrequest'. options optional options are as follows: instrument
key: a paymentinstrument object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument. methoddata: an array of paymentmethoddata objects containing payment method identifers for the payment methods that the web site accepts and any associated payment method specific data. modifiers: an array of objects containing change...
PaymentRequestEvent - Web APIs
the paymentrequestevent interface of the the payment request api is the object passed to a payment handler when a paymentrequest is made. constructor paymentrequestevent() creates a new paymentrequestevent object. properties instrument
keyread only returns a paymentinstrument object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument. methoddataread only returns an array of paymentmethoddata objects containing payment method identifers for the payment methods that the web site accepts and any associated payment method specific data. modifiersread only returns an array of objects containing changes to payment details. paymentrequestidread only returns the id of the paymentrequest obj...
Payment Request API - Web APIs
ave to fill out the same details repeatedly across different sites. consistent experience on every site (that supports the api): as the payment sheet is controlled by the browser, it can tailor the experience to the user. this can include localizing the ui into the user's preferred language. accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent
keyboard and screen reader accessibility on every website without developers needing to do anything. a browser could also adjust the font size or color contrast of the payment sheet, making it more comfortable for the user to make a payment. credentials management: users can manage their credit cards and shipping addresses directly in the browser. a browser can also sync these "credentials" across d...
performance.clearMarks() - Web APIs
void example the following example shows both uses of the clearmarks() method. // create a small helper to show how many performancemark entries there are. function logmarkcount() { console.log( "found this many entries: " + performance.getentriesbytype("mark").length ); } // create a bunch of marks. performance.mark("squirrel"); performance.mark("squirrel"); performance.mark("mon
key"); performance.mark("mon
key"); performance.mark("dog"); performance.mark("dog"); logmarkcount() // "found this many entries: 6" // delete just the "squirrel" performancemark entries. performance.clearmarks('squirrel'); logmarkcount() // "found this many entries: 4" // delete all of the performancemark entries. performance.clearmarks(); logmarkcount() // "found this many entries: 0" specifica...
PerformanceEventTiming - Web APIs
the performanceeventtiming interface of the event timing api provides timing information for the event types listed below. auxclick beforeinput click compositionend compositionstart compositionupdate contextmenu dblclick dragend dragenter dragleave dragover dragstart drop input
keydown
keypress
keyup mousedown mouseenter mouseleave mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. performanceeventtiming.cancelable returns...
Performance Timeline - Web APIs
invoked, the callback's parameters include a performance observer entry list that contains only observed performance entries. that is, the list contains entries only for the event types that were specified when the observer's observe() method was invoked. the performance observer entry list interface has the same three getentries*() methods as the performance interface. however, note there is one
key difference with these methods; the performance observer entry list versions are used to retrieve observed performance entries within the observer callback. besides the performanceobserver's interface's observe() method (which is used to register the entry types to observe), the performanceobserver interface also has a disconnect() method that stops an observer from receiving further events. per...
Pointer Lock API - Web APIs
erlockchange and pointerlockerror events, which you'll see more about below. document.exitpointerlock = document.exitpointerlock || document.mozexitpointerlock; // attempt to unlock document.exitpointerlock(); pointerlockchange event when the pointer lock state changes—for example, when calling requestpointerlock(), exitpointerlock(), the user pressing the esc
key, etc.—the pointerlockchange event is dispatched to the document. this is a simple event and contains no extra data. if ("onpointerlockchange" in document) { document.addeventlistener('pointerlockchange', lockchangealert, false); } else if ("onmozpointerlockchange" in document) { document.addeventlistener('mozpointerlockchange', lockchangealert, false); } function lockchangealert() { if(...
PushManager.permissionState() - Web APIs
e enabled. syntax pushmanager.permissionstate(options).then(function(pushmessagingstate) { ... }); parameters options optional an object containing optional configuration parameters. it can have the following properties: uservisibleonly: a boolean indicating that the returned push subscription will only be used for messages whose effect is made visible to the user. applicationserver
key: a public
key your push server will use to send messages to client apps via a push server. this value is part of a signing
key pair generated by your application server and usable with elliptic curve digital signature (ecdsa) over the p-256 curve. returns a promise that resolves to a domstring with a value of 'prompt', 'denied', or 'granted'. specifications specification sta...
PushSubscription.options - Web APIs
of the pushsubscription interface is an object containing containing the options used to create the subscription. syntax var options = pushsubscription.options value an read-only options object containing the following values: uservisibleonly: a boolean, indicating that the returned push subscription will only be used for messages whose effect is made visible to the user. applicationserver
key: a public
key your push server will use to send messages to client apps via a push server. this value is part of a signing
key pair generated by your application server, and usable with elliptic curve digital signature (ecdsa), over the p-256 curve. specifications specification status comment push apithe definition of 'options' in that specification. working draft ...
PushSubscription - Web APIs
omhighrestimestamp of the subscription expiration time associated with the push subscription, if there is one, or null otherwise. pushsubscription.options read only an object containing the options used to create the subscription. pushsubscription.subscriptionid read only a domstring containing the subscription id associated with the push subscription. methods pushsubscription.get
key() returns an arraybuffer which contains the client's public
key, which can then be sent to a server and used in encrypting push message data. pushsubscription.tojson() standard serializer — returns a json representation of the subscription properties. pushsubscription.unsubscribe() starts the asynchronous process of unsubscribing from the push service, returning a promise that resolves to ...
RTCConfiguration - Web APIs
y one certificate, providing multiple certificates allows support for multiple encryption algorithms. the implementation of rtcpeerconnection will choose which certificate to use based on the algorithms it and the remote peer support, as determined during dtls handshake. if you don't provide certificates, new ones are generated automatically. one obvious benefit to providing your own is identity
key continuity—if you use the same certificate for subsequent calls, the remote peer can tell you're the same caller. this also avoids the cost of generating new
keys. <<<--- add link to information about identity --->>> example the configuration below establishes two ice servers. the first one, stun:stun.services.mozilla.com, requires authentication, so the username and password are provided. t...
RTCIceCandidateStats.deleted - Web APIs
ts.type === "local-candidate" || stats.type === "remote.candidate") && !stats.deleted) { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially drop the ones we // sorted to the top above object.
keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); }, 1000); specifications specification status comment ...
RTCIceCandidateStats.networkType - Web APIs
-candidate" || stats.type === "remote.candidate") && stats.networktype === "cellular") { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially drop the ones we // sorted to the top above object.
keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); }, 1000); ...
RTCIceServer.credential - Web APIs
this value is used when the rtciceserver describes a turn server. syntax var iceserver = { ... credential = credential, ... }; var credential = iceserver.credential; iceserver.credential = newcredential; example this example creates a new rtcpeerconnection which uses a turn server at turnserver.example.org to negotiate connections. ...
RTCIceTransport: gatheringstatechange event - Web APIs
e candidate gathering state changes. the gathering state, whose actual status can be found in the transport object's gatheringstate property, indicates whether or not the ice agent has begun gathering candidates, and if so, if it has finished doing so. bubbles no cancelable no interface event event handler property ongatheringstatechange the
key difference between gatheringstatechange and icegatheringstatechange is that the latter represents the overall state of the connection including every rtcicetransport used by every rtcrtpsender and every rtcrtpreceiver on the entire connection. in contrast, gatheringstatechange represents changes to the candidate gathering state for a single transport. examples this example creates a handler for...
RTCInboundRtpStreamStats.perDscpPacketsReceived - Web APIs
the perdscppacketsreceived property of the rtcinboundrtpstreamstats dictionary is a record comprised of
key/value pairs in which each
key is a string representation of a differentiated services code point and the value is the number of packets received for that dcsp. note: not all operating systems make data available on a per-dscp basis, so this property shouldn't be relied upon on those systems. syntax var perdscppacketsreceived = rtcinboundrtpstreamstats.perdscppacketsreceived; value a record comprised of string/value pairs. each
key is the string representation of a single differentiated services code point (dscp)'s id number. note: due to network bleaching and remapping, the numbers seen on this record are not necessarily going to match the values as they were when the data was...
RTCInboundRtpStreamStats - Web APIs
kets this receiver has sent. packetsduplicated an integer value indicating the total number of packets that have been discarded because they were duplicates. these packets are not counted by packetsdiscarded. packetsfaileddecryption an integer totaling the number of rtp packets that could not be decrypted. these packets are not counted by packetsdiscarded. perdscppacketsreceived a record of
key-value pairs with strings as the
keys mapped to 32-bit integer values, each indicating the total number of packets this receiver has received on this rtp stream from this source for each differentiated services code point (dscp). plicount an integer specifying the number of times the receiver has notified the sender that some amount of encoded video data for one or more frames has been lost, usi...
RTCOutboundRtpStreamStats.perDscpPacketsSent - Web APIs
the perdscppacketssent property of the rtcoutboundrtpstreamstats dictionary is a record comprised of
key/value pairs in which each
key is a string representation of a differentiated services code point and the value is the number of packets sent for that dcsp. note: not all operating systems make data available on a per-dscp basis, so this property shouldn't be relied upon on those systems. syntax var perdscppacketssent = rtcoutboundrtpstreamstats.perdscppacketssent; value a record comprised of string/value pairs. each
key is the string representation of a single differentiated services code point (dscp)'s id number. note: due to network bleaching and remapping, the numbers seen on this record are not necessarily going to match the values as they were when the data was sent. speci...
RTCOutboundRtpStreamStats.qualityLimitationReason - Web APIs
erformed. this quality reduction may include changes such as reduced frame rate or resolution, or an increase in compression factor. the amount of time the encoded media has had its quality reduced in each of the potential ways that can be done can be found in qualitylimitationdurations. syntax var qualitylimitationreason = rtcoutboundrtpstreamstats.qualitylimitationreason; value a map whose
keys are domstrings whose values come from the rtcqualitylimitationreason enumerated type, and whose values are the duration of the media, in seconds, whose quality was reduced for that reason. examples specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcoutboundrtpstreamstats.qualitylimitationreason' in that specifi...
RTCOutboundRtpStreamStats - Web APIs
estimestamp indicating the time at which the last packet was sent for this ssrc. the timestamp property, on the other hand, indicates the time at which the rtcoutboundrtpstreamstats object was generated. nackcount an integer value indicating the total number of negative acknolwedgement (nack) packets this rtcrtpsender has received from the remote rtcrtpreceiver. perdscppacketssent a record of
key-value pairs with strings as the
keys mapped to 32-bit integer values, each indicating the total number of packets this rtcrtpsender has transmitted for this source for each differentiated services code point (dscp). plicount an integer specifying the number of times the remote receiver has notified this rtcrtpsender that some amount of encoded video data for one or more frames has been lost, us...
RTCPeerConnection.getStats() - Web APIs
connection.getstats(null).then(stats => { let statsoutput = ""; stats.foreach(report => { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially drop the ones we // sorted to the top above object.
keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); }); document.queryselector(".stats-box").innerhtml = statsoutput; }); }, 1000); this works by calling getstats(), then, when the promise is resolved, iterates over the ...
Response() - Web APIs
ontaining any custom settings that you want to apply to the response, or an empty object (which is the default value). the possible options are: status: the status code for the reponse, e.g., 200. statustext: the status message associated with the status code, e.g., ok. headers: any headers you want to add to your response, contained within a headers object or object literal of bytestring
key/value pairs (see http headers for a reference). examples in our fetch response example (see fetch response live) we create a new response object using the constructor, passing it a new blob as a body, and an init object containing a custom status and statustext: var myblob = new blob(); var init = { "status" : 200 , "statustext" : "supersmashinggreat!" }; var myresponse = new response(myb...
RsaHashedImportParams - Web APIs
the rsahashedimportparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.import
key() or subtlecrypto.unwrap
key(), when importing any rsa-based
key pair: that is, when the algorithm is identified as any of rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep. properties name a domstring. this should be set to rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep, depending on the algorithm you want to use. hash a domstring representing the name of the digest function to use. this can be one of sha-256, sha-384, or sha-512. warning: although you can technically pass sha-1 here, this is strongly discouraged as it is considered vulnerable. examples see the examples for subtlecrypto.import
key(). specifications specific...
RsaOaepParams - Web APIs
properties name a domstring. this should be set to rsa-oaep. label optional a buffersource — an array of bytes that does not itself need to be encrypted but which should be bound to the ciphertext. a digest of the label is part of the input to the encryption operation. ...
RsaPssParams - Web APIs
e algorithm parameter into subtlecrypto.sign() or subtlecrypto.verify(), when using the rsa-pss algorithm. properties name a domstring. this should be set to rsa-pss. saltlength a long integer representing the length of the random salt to use, in bytes. rfc 3447 says that "typical salt lengths" are either 0 or the length of the output of the digest algorithm that was selected when this
key was generated. for example, if you use sha-256 as the digest algorithm, this could be 32. the maximum size of saltlength is given by: math.ceil((
keysizeinbits - 1)/8) - digestsizeinbytes - 2 so for a
key length of 2048 bits and a digest output size of 32 bytes, the maximum size would be 222. examples see the examples for subtlecrypto.sign() and subtlecrypto.verify(). specifications ...
SVGTextContentElement - Web APIs
font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants constant value description lengthadjust_unknown 0 some other value. lengthadjust_spacing 1 the spacing
keyword. lengthadjust_spacingandglyphs 2 the spacingandglyphs
keyword. properties this interface also inherits properties from its parent, svggraphicselement. svgtextcontentelement.textlength read only an svganimatedlength reflecting the textlength attribute of the given element. svgtextcontentelement.lengthadjust read only an svganimatedenumeration reflecting the lengt...
Using the Screen Capture API - Web APIs
ml starts with a simple introductory paragraph, then gets into the meat of things. <p>this example shows you the contents of the selected part of your display. click the start capture button to begin.</p> <p><button id="start">start capture</button> <button id="stop">stop capture</button></p> <video id="video" autoplay></video> <br> <strong>log:</strong> <br> <pre id="log"></pre> the
key parts of the html are: a <button> labeled "start capture" which, when clicked, calls the startcapture() function to request access to, and begin capturing, screen contents. a second button, "stop capture", which upon being clicked calls stopcapture() to terminate capture of screen contents. a <video> into which the captured screen contents are streamed. a <pre> block into which logged text ...
Selection.anchorNode - Web APIs
the selection.anchornode read-only property returns the node in which the selection begins. a user may make a selection from left to right (in document order) or right to left (reverse of document order). the anchor is where the user began the selection. this can be visualized by holding the shift
key and pressing the arrow
keys on your
keyboard. the selection's anchor does not move, but the selection's focus, the other end of the selection, does move. syntax node = sel.anchornode specifications specification status comment selection apithe definition of 'selection.anchornode' in that specification. working draft current ...
Selection.focusNode - Web APIs
the selection.focusnode read-only property returns the node in which the selection ends. a user may make a selection from left to right (in document order) or right to left (reverse of document order). the focus is where the user ended the selection. this can be visualized by holding the shift
key and pressing the arrow
keys on your
keyboard to modify the current selection. the selection's focus moves, but the selection's anchor, the other end of the selection, does not move. syntax node = sel.focusnode specifications specification status comment selection apithe definition of 'selection.focusnode' in that specification. working draft current ...
Selection.selectionLanguageChange() - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. selection.selectionlanguagechange() method is a gecko/firefox internal method that was exposed to web pages until firefox 29. ...
Selection.setBaseAndExtent() - Web APIs
the focus node that should be included in the selection. so for example, if the value is 0 the whole node is excluded. if the value is 1, the first child node is included. and so on. note: if the focus position appears before the anchor position in the document, the direction of the selection is reversed — the caret is placed at the beginning of the text rather the end, which matters for any
keyboard command that might follow. for example, shift + ➡︎ would cause the selection to narrow from the beginning rather than grow at the end. return value void. exceptions if anchoroffset is larger than the number of child nodes inside anchornode, or if focusoffset is larger than the number of child nodes inside focusnode, an indexsizeerror exception is thrown. examples in this example, ...
Selection API - Web APIs
no support compatibility unknown compatibility unknownexperimental. expect behavior to change in the future.experimental. expect behavior to change in the future.non-standard. expect poor cross-browser support.non-standard. expect poor cross-browser support.see implementation notes.see implementation notes. see also
key quote generator: a simple demo showing typical usage of the selection api to capture the current selection at any point and copy selections into a list (see it live also). the range object. ...
SharedWorker() - Web APIs
the sharedworker() constructor creates a sharedworker object that executes the script at the specified url. this script must obey the same-origin policy. note: there is disagreement among browser manufacturers about whether a data uri is of the same origin or not. although gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7) and later accept data uris, that's not the case in all other browsers. syntax var myworker = new sharedworker(aurl, name); var myworker = new sharedworker(aurl, options); parameters aurl a domstring representing the url of the script the worker will execute. it must obey the same-origin policy. name optional a domstring specifying an identifying name for the sharedworkerglobalscope representing the scope of the worker, which is mainly useful for debug...
SharedWorkerGlobalScope - Web APIs
some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the javascript reference. see the complete list of functions available to workers. properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers. ...
Storage.clear() - Web APIs
syntax storage.clear(); return value undefined. examples the following function creates three data entries in local storage, and then deletes them by using clear(). function populatestorage() { localstorage.setitem('bgcolor', 'red'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'migato.png'); localstorage.clear(); } note: for a real world example, see our web storage demo. ...
StylePropertyMapReadOnly.entries() - Web APIs
the stylepropertymapreadonly.entries() method returns an array of a given object's own enumerable property [
key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). syntax stylepropertymapreadonly.entries() parameters none. return value an array of the given stylepropertymapreadonly object's own enumerable property [
key, value] pairs. example // tbd specifications specification status comment css typed om level 1the definition of 'entries()' in that specification. working draft initial definition. ...
SubtleCrypto.digest() - Web APIs
d for cryptographic applications. sha-256 this algorithm is specified in fips 180-4, section 6.2, and produces an output 256 bits long. sha-384 this algorithm is specified in fips 180-4, section 6.5, and produces an output 384 bits long. sha-512 this algorithm is specified in fips 180-4, section 6.4, and produces an output 512 bits long. hint: if you are looking here for how to create an
keyed-hash message authentication code (hmac), you need to use the subtlecrypto.sign() instead. examples basic example this example encodes a message, then calculates its sha-256 digest and logs the digest length: const text = 'an obscure body in the s-k system, your majesty. the inhabitants refer to it as the planet earth.'; async function digestmessage(message) { const encoder = new textenc...
TypeInfo - Web APIs
properties typeinfo.typename read only returns a domstring indicating the type's name. typeinfo.typenamespace read only returns a domstring indicating the type's namespace within the schema. methods typeinfo.isderivedfrom() returns a boolean. ...
sourceCapabilities - Web APIs
f a touchscreen, several uievents may be generated including touchend, mousedown, click, and focus. all of these events must have the same sourcecapabilities representing the touchscreen. a device is considered "responsible" for an event only when that interaction is part of the abstraction provided by the web platform. for example, many user agents allow a window to be resized with a mouse or a
keyboard, but this detail is not exposed to the web platform in any way, and so the sourcecapabilities of a resize event will typically be null. syntax var idc = event.sourcecapabilities value an instance of inputdevicecapabilities. specifications specification status comment inputdevicecapabilitiesthe definition of 'sourcecapabilities' in that specification. draft ...
URLSearchParams() - Web APIs
ctor creates and returns a new urlsearchparams object. note: this feature is available in web workers. syntax var urlsearchparams = new urlsearchparams(init); parameters init optional one of: a usvstring, which will be parsed from application/x-www-form-urlencoded format. a leading '?' character is ignored. a sequence of usvstring pairs, representing names/values. a record of usvstring
keys and usvstring values. return value a urlsearchparams object instance. examples the following example shows how to create a urlsearchparams object from a url string. // retrieve params via url.search, passed into ctor var url = new url('https://example.com?foo=1&bar=2'); var params = new urlsearchparams(url.search); // pass in a string literal var params2 = new urlsearchparams("foo=1&bar=2...
URLSearchParams.append() - Web APIs
note: this feature is available in web workers. syntax urlsearchparams.append(name, value) parameters name the name of the parameter to append. value the value of the parameter to append. return value void. examples let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsearchparams(url.search.slice(1)); //add a second foo parameter. ...
URLSearchParams.entries() - Web APIs
the entries() method of the urlsearchparams interface returns an iterator allowing iteration through all
key/value pairs contained in this object. the
key and value of each pair are usvstring objects. note: this feature is available in web workers. syntax searchparams.entries(); parameters none. return value returns an iterator. examples // create a test urlsearchparams object var searchparams = new urlsearchparams("
key1=value1&
key2=value2"); // display the
key/value pairs for(var pair of searchparams.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is:
key1, value1
key2, value2 specifications specification status comment urlthe definition of 'entries() (see "iterable")' in that specification. living standard initial definitio...
URLSearchParams.forEach() - Web APIs
h all values contained in this object via a callback function. note: this feature is available in web workers. syntax searchparams.foreach(callback); parameters callback a callback function that is executed against each parameter, with the param value provided as its parameter. return value void. examples // create a test urlsearchparams object var searchparams = new urlsearchparams("
key1=value1&
key2=value2"); // log the values searchparams.foreach(function(value,
key) { console.log(value,
key); }); the result is: value1
key1 value2
key2 specifications specification status comment urlthe definition of 'foreach() (see "iterable")' in that specification. living standard initial definition. ...
URLSearchParams.values() - Web APIs
the values() method of the urlsearchparams interface returns an iterator allowing iteration through all values contained in this object. the values are usvstring objects. note: this feature is available in web workers. syntax searchparams.values(); parameters none. return value returns an iterator. examples // create a test urlsearchparams object var searchparams = new urlsearchparams("
key1=value1&
key2=value2"); // display the values for(var value of searchparams.values()) { console.log(value); } the result is: value1 value2 specifications specification status comment urlthe definition of 'values() (see "iterable")' in that specification. living standard initial definition. ...
VideoPlaybackQuality.totalFrameDelay - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the videoplaybackquality.totalframedelay read-only property returns a double containing the sum of the frame delay since the creation of the associated htmlvideoelement. the frame delay is the difference between a frame's theoretical presentation time and its effective display time. ...
Raining rectangles - Web APIs
var rect = this; // we get three random numbers and use them for new rectangle // size and position. for each we use a different number, // because we want horizontal size, vertical size and // position to be determined independently. var randnums = getrandomvector(); rect.size = [ 5 + 120 * randnums[0], 5 + 120 * randnums[1] ]; rect.position = [ randnums[2]*(gl...
Matrix math for the web - Web APIs
this article explores how to create matrices and how to use them with css transforms and the matrix3d transform type. while this article uses css to simplify explanations, matrices are a core concept used by many different technologies including webgl, the webxr (vr and ar) api, and glsl shaders. this article is also available as an mdn content kit. the live examples use a collection of utility functions available under a global object named mdn. ...
Using shaders to apply color in WebGL - Web APIs
coloring the fragments as a refresher, here's what our fragment shader looked like previously: const fssource = ` void main() { gl_fragcolor = vec4(1.0, 1.0, 1.0, 1.0); } `; in order to pick up the interpolated color for each pixel, we need to change this to fetch the value fr...
Using textures in WebGL - Web APIs
nstead fetches the texture coordinate data. const vssource = ` attribute vec4 avertexposition; attribute vec2 atexturecoord; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; varying highp vec2 vtexturecoord; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vtexturecoord = atexturecoord; } `; the
key change here is that instead of fetching the vertex color, we're fetching the texture coordinates and passing them to the vertex shader; this will indicate the location within the texture corresponding to the vertex. the fragment shader the fragment shader likewise needs to be updated: const fssource = ` varying highp vec2 vtexturecoord; uniform sampler2d usampler; void main(voi...
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
that the exchanged data is secure and authenticated as appropriate. keeping latency to a minimum is especially important for webrtc, since face-to-face communication needs to be performed with as little latency as possible. the more time lag there is between one user saying something and another hearing it, the more likely there is to be episodes of cross-talking and other forms of confusion.
key features of rtp before examining rtp's use in webrtc contexts, it's useful to have a general idea of what rtp does and does not offer. rtp is a data transport protocol, whose mission is to move data between two endpoints as efficiently as possible under current conditions. those conditions may be affected by everything from the underlying layers of the network stack to the physical network conne...
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
false; } }; we set makingoffer immediately before calling setlocaldescription() in order to lock against interfering with sending this offer, and we don't clear it back to false until the offer has been sent to the signaling server (or an error has occurred, preventing the offer from being made). this way, we avoid the risk of offers colliding. automatic rollback in setremotedescription() a
key component to perfect negotiation is the concept of the polite peer, which always rolls itself back if it receives an offer while itself waiting for an answer to an offer. previously, triggering rollback involved manually checking for rollback conditions and triggering the rollback manually, by setting the local description to one with the type rollback, like this: await pc.setlocaldescription({ ...
Signaling and video calling - Web APIs
ure that your signaling does not change order! for example addicecandidate() with the server's ice candidates must be called after setting the answer with setremotedescription(). signaling transaction flow the signaling process involves this exchange of messages between two peers using an intermediary, the signaling server. ...
WebSocket.close() - Web APIs
able string explaining why the connection is closing. this string must be no longer than 123 bytes of utf-8 text (not characters). exceptions thrown invalid_access_err an invalid code was specified. syntax_err the reason string is too long or contains unpaired surrogates. note: in gecko, this method didn't support any parameters prior to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5). specifications specification status comment html living standard the definition of 'websocket.close()' in that specification. living standard initial definition ...
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
the adjusted domxref("xrreferencespace")}} returned by this function is then passed into the xrframe method getviewerpose() to get the xrviewerpose representing the viewer's position and viewing angle. next, we go ahead and queue up the request to render the next frame of video, so we don't have to worry about doing it later, by simply calling requestanimationframe() again. now ...
Fundamentals of WebXR - Web APIs
r that in order to finish an api for virtual environments on the web, it would make more sense to start a new specification than to try to "fix" webvr. thus, webxr was created. the most obvious difference, at the highest level, is that webxr supports not just virtual reality applications, but also augmented reality, which blends virtual objects with the user's true physical environment. another
key difference is that webxr has integrated support for the advanced input controllers that are used with most mixed reality headsets, while webvr relied on the gamepad api to support the controllers. in webxr, the primary select and squeeze actions are directly supported using events, while other controls are available through a special webxr-specific implementation of the gamepad object. basic con...
Geometry and reference spaces in WebXR - Web APIs
eir ability to be created relative to one another. create an xrrigidtransform object representing the new position and orientation of the player's avatar, then create a new reference space to represent the avatar's point of view at the new position using the xrreferencespace method getoffsetreferencespace(). this comes in especially handy when implementing support for using non-xr devices such as
keyboards or mice to move the player's avatar through the world. with the newly-created reference space, the avatar can remain at the same coordinates yet appear in the world to be located at (and be see the world from the perspective of) its new location. for a more detailed look at how to use reference spaces to manage the player's viewpoint, see the article in the case of our game avatar examp...
Rendering and the WebXR frame animation callback - Web APIs
urces may include devices such as hand controllers, optical tracking systems, acclerometers and magnetometers, and other devices of that nature. the second type of input is a gamepad that's connected through the xr system. this uses interfaces inherited from the gamepad api but you interact with them through webxr. the third and final type of input is the traditional non-xr input device such as
keyboards, mice, trackpads, touch screens, and non-xr gamepads and joysticks. orientation and position information that can be collected from the xr hardware directly is applied automatically. thus it's the other kinds of input that you need to handle yourself: pointing device target and button presses gamepad inputs non-xr input device inputs to learn more about how to handle user inputs whi...
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
two scenarios in which you may need to describe a position and/or orientation relative to a space. the first is described above: applying a reference space to an offset (or vice-versa, since the result is the same) to determine the transform matrix that represents the resulting location in the space's coordinate system. poses once your reference space or spaces are established for the various
key objects in the scene, you will have times when you need to describe another position relative to the origin of a particular reference space. this is done using poses. a pose, simply put, describes a position and orientation relative to the origin of the reference space from which it was created. in webxr, a pose is represented by an xrpose object, whose transform property is an xrrigidtransform ...
Starting up and shutting down a WebXR session - Web APIs
your reference space, you can try for a local space, and if that fails, fall back to a viewer reference space, which all devices are required to support. preparing the new session for use once the requestsession() method's returned promise successfully resolves, you know you have a usable webxr session in hand. you can then proceed to prepare the session for use and begin your animations. the
key things you need (or may need) to do in order to finish the configuration of your session include: add handlers for the events you need to watch. this most likely includes the end at a minimum, so you can detect when the session is over. if you use xr input controllers, watch the inputsourceschange event to detect the addition or removal of xr input controllers, and the various select and sque...
Migrating from webkitAudioContext - Web APIs
in the web audio specification may not immediately work out of the box in a compliant web audio implementation. this article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based audiocontext, which will work across different browser engines. note: there is a library called webkitaudiocontext mon
keypatch, which automatically fixes some of these changes to make most code targetting webkitaudiocontext to work on the standards based audiocontext out of the box, but it currently doesn't handle all of the cases below. please consult the readme file for that library to see a list of apis that are automatically handled by it. changes to the creator methods three of the creator methods on webkit...
Web Crypto API - Web APIs
the web crypto api is an interface allowing a script to use cryptographic primitives in order to build systems using cryptography. warning: the web crypto api provides a number of low-level cryptographic primitives. it's very easy to misuse them, and the pitfalls involved can be very subtle. even assuming you use the basic cryptographic functions correctly, secure
key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts. errors in security system design and implementation can make the security of the system completely ineffective. if you're not sure you know what you are doing, you probably shouldn't be using this api. interfaces some browsers implemented an interface called crypto without having i...
Web Storage API - Web APIs
web storage concepts and usage the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores) stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. data is never transferred to the server. storage limit is larger than a cookie (at most 5mb). localstorage does the same thing, but persists even when the browser is closed and reopened. ...
Functions and classes available to Web Workers - Web APIs
10.1 filereader this api allows asynchronous read of blob and file objects. 46 (46) no support (yes) no support filereadersync this api allows synchronous read of blob and file objects. this is an api that works only in workers. 8 (8) no support no support no support formdata formdata objects provide a way to easily construct a set of
key/value pairs representing form fields and their values, which can then be easily sent using the xmlhttprequest send() method. ? (should be in 39 (39)) ? (yes) ? imagedata the underlying pixel data of an area of a canvas element. manipulating such data can be a complex task better suited to be delegated to a web worker. 25 (25) no support no support no support ...
Window.defaultStatus - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary gets/sets the status bar text for the given window. syntax var smsg = window.defaultstatus; window.defaultstatus = smsg; parameters smsg is a string containing the text to be displayed by default in the statusbar. ...
Window.directories - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary returned the window personalbar toolbar object. use the window.personalbar instead. syntax var dirbar = window.directories; parameters dirbar is an object of the type barprop. ...
Window.home() - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the window.home() method returns the window to the home page. ...
Window.localStorage - Web APIs
object created in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.) data stored in either localstorage is specific to the protocol of the page. in particular, data stored by a script on a site accessed with http (e.g., http://example.com) is put in a different localstorage object from the same site accessed with https (e.g., https://example.com). the
keys and the values are always in the utf-16 domstring format, which uses two bytes per character. as with objects, integer
keys are automatically converted to strings. syntax mystorage = window.localstorage; value a storage object which can be used to access the current origin's local storage space. exceptions securityerror the request violates a policy decision, or the origin is not a vali...
Window.mozAnimationStartTime - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the time, in milliseconds since the epoch, at which animations started now should be considered to have started. this value should be used instead of, for example, date.now(), because this value will be the same for all animations started in this window during this refresh interval, allowing them to remain in sync with one another. this also allows javascript-based animations to remain synchronized with css transitions and smil animations triggered during the same refresh interval. ...
Window.mozPaintCount - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the number of times the current document has been painted to the screen in this window. syntax var paintcount = window.mozpaintcount; paintcount stores the window.mozpaintcount property value. the window.mozpaintcount value is a long long, and starts at zero when the document is first created, incrementing by one each time the document is painted. ...
Window.onmozbeforepaint - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary an event handler for the mozbeforepaint event. this is used in concert with the window.mozrequestanimationframe() method to perform smooth, synchronized animations from javascript code. syntax window.onmozbeforepaint = funcref; funcref is the handler function. example see window.mozrequestanimationframe() for an example. ...
Privileged features - Web APIs
plemented on macos x, this option will be ignored. the dependent feature is currently under revision to be removed (bug 214867) in msie 6, the nearest equivalent to this feature is the showmodelessdialog() method. chrome if on, the page is loaded as window's only content, without any of the browser's interface elements. there will be no context menu defined by default and none of the standard
keyboard shortcuts will work. the page is supposed to provide a user interface of its own, usually this feature is used to open xul documents (standard dialogs like the javascript console are opened this way). dialog the dialog feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. mozilla 1.2+ and netscape 7.1 will render the other menu...
Window.open() - Web APIs
he other hand will do it only from the same parent (as if the window was created dependent, which is the "opener"). this is a wide limitation and generates unbelievable complexity of development. firefox (51.) gets the handle but cannot run any element.focus() while chrome can run focus() from opener to child but not between siblings nor, reverse, from child to opener. this function is the lonely
key to get back the handle on a window if the developer has access only to its name (the name can be saved with cookies or local storage but not the window object handle). for now 10/01/2017 the differencies of behavior found recently have not still been tested for others browsers. window features windowfeatures is an optional string containing a comma-separated list of requested features of the n...
Window.releaseEvents() - Web APIs
summary releases the window from trapping events of a specific type. syntax window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.
keydown, event.
keypress, event.
keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example window.releaseevents(event.
keypress) notes note that you can pass a list of events to this method using the following syntax: window.releaseevents(event.
keypress | event.
keydown | event.
keyup). see also window.captureevents ( ). specification this is not part of any specification. bro...
Window.routeEvent() - Web APIs
although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the window method routeevent(), which is obsolete and no longer available, used to be called to forward an event to the next object that has asked to capture events. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Window.sessionStorage - Web APIs
s sessionstorage for each tab/window. closing a tab/window ends the session and clears objects in sessionstorage. data stored in sessionstorage is specific to the protocol of the page. in particular, data stored by a script on a site accessed with http (e.g., http://example.com) is put in a different sessionstorage object from the same site accessed with https (e.g., https://example.com). the
keys and the values are always in the utf-16 domstring format, which uses two bytes per character. as with objects, integer
keys are automatically converted to strings. syntax mystorage = window.sessionstorage; value a storage object which can be used to access the current origin's session storage space. exceptions securityerror the request violates a policy decision, or the origin is not a...
Window - Web APIs
s at runtime. see error event. globaleventhandlers.onfocus called after the window receives or regains focus. see focus events. windoweventhandlers.onhashchange an event handler property for hashchange events on the window; called when the part of the url after the hash mark ("#") changes. globaleventhandlers.oninput called when the value of an <input> element changes globaleventhandlers.on
keydown called when you begin pressing any
key. see
keydown event. globaleventhandlers.on
keypress called when a
key (except shift, fn, and capslock) is in pressed position. see
keypress event. globaleventhandlers.on
keyup called when you finish releasing any
key. see
keyup event. windoweventhandlers.onlanguagechange an event handler property for languagechange events on the window. globalevent...
WindowEventHandlers.onstorage - Web APIs
of the windoweventhandlers mixin is an eventhandler for processing storage events. the storage event fires when a storage area has been changed in the context of another document. syntax window.onstorage = functionref; value functionref is a function name or a function expression. this function receives a storageevent as its sole argument. example this example logs the value for a storage
key whenever it changes in another document. window.onstorage = function(e) { console.log('the ' + e.
key + '
key has been changed from ' + e.oldvalue + ' to ' + e.newvalue + '.'); }; specifications specification status comment html living standardthe definition of 'onstorage' in that specification. living standard ...
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
it creates a microtask by using a promise that resolves immediately. if (typeof window.queuemicrotask !== "function") { window.queuemicrotask = function (callback) { promise.resolve() .then(callback) .catch(e => settimeout(() => { throw e; })); // report exceptions }; } specifications specification status commen...
Worker() - Web APIs
the worker() constructor creates a worker object that executes the script at the specified url. this script must obey the same-origin policy. note: that there is a disagreement among browser manufacturers about whether a data uri is of the same origin or not. though gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamon
key 2.7) and later accept data uris, that's not the case in all other browsers. syntax var myworker = new worker(aurl, options); parameters aurl a usvstring representing the url of the script the worker will execute. it must obey the same-origin policy. options optional an object containing option properties that can be set when creating the object instance. available properties are as follows: type: a domstring specifying the type of worker to create. the value ...
Synchronous and asynchronous requests - Web APIs
e "timeout" event by setting the ontimeout handler. usage: function showmessage (message) { console.log(message + this.responsetext); } loadfile("message.txt", 2000, showmessage, "new message!\n"); here, we're specifying a timeout of 2000 ms. note: support for timeout was added in gecko 12.0. synchronous request note: starting with gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamon
key 2.27), blink 39.0, and edge 13, synchronous requests on the main thread have been deprecated due to their negative impact on the user experience. synchronous xhr requests often cause hangs on the web. but developers typically don't notice the problem because the hang only manifests with poor network conditions or when the remote server is slow to respond. synchronous xhr is now in deprecation st...
XRInputSourceArray.forEach() - Web APIs
input() method. specifications specification status comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in information contained in a webidl file for information on how an iterable declaration in an interface definition causes entries(), foreach(),
keys(), and values() methods to be exposed from objects that implement the interface. ...
XRInputSourceArray.values() - Web APIs
o checkinput(). specifications specification status comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in information contained in a webidl file for information on how an iterable declaration in an interface definition causes entries(), foreach(),
keys(), and values() methods to be exposed from objects that implement the interface. ...
XRInputSourceArray - Web APIs
erators and the foreach() method is also available. properties the following properties are available on xrinputsourcearray objects. length read only the number of xrinputsource objects in the list. methods the following methods are available on xrinputsourcearray objects. you may also use the features of the symbol type. entries() returns an iterator you can use to walk the list of
key/value pairs in the list. each item returned is an array whose first value is the index and whose second value is the xrinputsource at that index. foreach() iterates over each item in the list, in order from first to last.
keys() a list of the
keys corresponding to the entries in the input source list. values() returns an iterator you can use to go through all the values in the list. each it...
XRPose.emulatedPosition - Web APIs
ata. if the position is precisely gbased on direct sensor inputs, the value is false. usage notes there are two basic categories of xr tracking systems. a basic xr headset provides three degrees of freedom (3dof), tracking the pitch, yaw, and roll of the user's head. no information is available about movement forward, backward, or to the sides. any such data is taken from other sources, such as
keyboard or mouse inputs or game controllers. as such, the position is considered to be emulated, so the emulatedposition property is true. contrariwise, xr devices which can also track movement forward and backward as well as laterally—six degree of freedom (6dof) devices—don't require any information from other sources to determine the user's position, so the value of emulatedposition is false...
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
cespace() to create a new space whose origin is adjusted to a position given by startposition and whose orientation is looking directly along the z azis. then the first animation frame is requested using xrsession's requestanimationframe(). implementing rotation based on non-xr inputs the input controls supported directly by webxr are all dedicated vr or ar input devices. in order to use mouse,
keyboard, or other input devices to move or otherwise transform objects in the 3d space—or to allow the user to move through the space—you'll need to write some code to read the inputs and move perform the movements. this is another good use case for getoffsetreferencespace(). in this example, we'll show code that lets the user look around by right-clicking and moving the mouse to change the vie...
XRReferenceSpace - Web APIs
e type you wish to obtain. xrsession.requestreferencespace("local").then((refspace) => { xrreferencespace = refspace; /* ... */ }); the other situation in which you may need to acquire a new reference space is if you need to move the origin to a new position; this is commonly done, for example, when your project allows the user to move through the environment using input devices such as the
keyboard, mouse, touchpad, or game controls that are not connected through the xr device. since the origin will typically be the user's location in the space, you need to change the origin to reflect their movement and any orientation changes they make. to move or rotate the user's view of the world, you need to change the xrreferencespace used to represent that viewpoint. however, xrreferencespace ...
XRSession.inputSources - Web APIs
the read-only inputsources property of the xrsession interface returns an xrinputsourcearray object which lists all controllers and input devices which are expressly associated with the xr device and are currently available. these controllers may include handheld controllers, xr-equipped gloves, optically tracked hands, and gaze-based input methods.
keyboards, gamepads, and mice are not considered webxr input sources. note: traditional gamepad controllers are supported using the gamepad api. syntax inputsources = xrsession.inputsources; value an xrinputsourcearray object listing all of the currently-connected input controllers which are linked specifically to the xr device currently in use. the returned object is live; as devices are connected to and removed from the user's system, ...
XRView - Web APIs
teleporting) an object, you need to create a new reference space for that object which applies a transform that encapsulates the desired changes. the createteleporttransform() function returns the transform needed to move and rotate an object whose current situation is described by the reference space refspace to a new position and orientation which is computed using previously recorded mouse and
keyboard input data which has generated offsets for yaw, pitch, and position along all three axes. function applymousemovement(refspace) { if (!mouseyaw && !mousepitch && !axialdistance && !transversedistance && !verticaldistance) { return refspace; } // compute the quaternion used to rotate the image based // on the pitch and yaw. quat.identity(inverseorientation); quat.rota...
XRViewerPose - Web APIs
interface xrviewerpose represents the pose (the position and orientation) of a viewer's point of view on the scene. each xrviewerpose can have multiple views to represent, for example, the slight separation between the left and right eye. this view can represent anything from the point-of-view of a user's xr headset to the viewpoint represented by a player's movement of an avatar using mouse and
keyboard, presented on the screen, to a virtual camera capturing the scene for a spectator. properties in addition to the properties inherited from xrpose, xrviewerpose includes the following: views read only an array of xrview objects, one for each viewpoint on the scene which is needed to represent the scene to the user. a typical headset provides a viewer pose with two views whose eye prope...
Using the alert role - Accessibility
role example using an aria alert box alert example using a modal aria dialog box notes using the alert role on an element implies that element has aria-live="assertive". the alert role should only be used for static text content. the element that the alert role is used on does not have to be able to receive focus, as screen readers will automatically announce the alert regardless of where
keyboard focus is currently located. if an alert also provides interactive controls (such as form controls that allow the user to rectify a problem, or an "ok" button that discards the alert) the alertdialog role should be used instead. aria attributes used alert related aria techniques using the alertdialog role using the aria-invalid property compatibility tbd: add support informat...
Using the article role - Accessibility
or the web log entry. the aria article role is similar to the html5 article element; however the article element should still be given the aria role of article, since not all assistive technologies support html5 yet. possible effects on user agents and assistive technology when the user navigates an element assigned the role of article, assistive technologies that typically intercept standard
keyboard events should switch to document browsing mode, as opposed to passing
keyboard events through to the web application. assistive technologies may provide a feature allowing the user to navigate the hierarchy of any nested article elements. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore...
Using the status role - Accessibility
uch an element becomes visible, the user agent should do the following: expose the element as having a status role in the operating system's accessibility api. fire an accessible status event using the operating system's accessibility api if it supports it. assistive technology products should listen for such an event and notify the user accordingly: screen readers may provide a special
key to announce the current status, and this should present the contents of any status live region. these should be announced when the user is idle, unless aria-live=”assertive” has been set and in which case the user may be interrupted. screen magnifiers may enlarge the status. note: opinons may differ on how assistive technology should handle this technique. the information provided above i...
ARIA: tabpanel role - Accessibility
the first rule of aria use is you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and adding an aria role, state or property to make it accessible, then do so. then post full details in best practices section below. ...
ARIA: article role - Accessibility
um or blog post, a comment to a comment to a forum or blog post, any an item in a social media feed. associated wai-aria roles, states, and properties aria-posinset in the context of a feed, indicates the position of this particular article within that feed, based on a count starting at 1. aria-setsize in the context of a feed, indicates how many article items there are within that feed.
keyboard interactions this role does not support any specific
keyboard interaction. required javascript features event handlers this role does not require any event handlers to be present. changing attribute values when constructing a feed, set the aria-posinset and aria-setsize attributes on each article role to the appropriate values, bearing in mind that aria-posinset is 1-based. always...
ARIA: cell role - Accessibility
a cell in the first row of the first header would likely have aria-rowindex="1" set, and cells in row 47 would have aria-rowindex="47", if aria-rowindex were needed due to not all rows 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="ta...
ARIA: form role - Accessibility
landmark when the form is used for search functionality. use the role="form" to identify a region of the page; do not use it to identify every form field. even if you are using the form landmark instead of <form>, you are encouraged to use native html form controls like button, input, select, and textarea associated wai-aria roles, states, and properties no role specific states or properties.
keyboard interactions no role specific
keyboard interactions required javascript features onsubmit the onsubmit event handler handles the event raised when the form is submitted. anything that is not a <form> cannot be submitted, therefore you would have to use javascript to build an alternative data submission mechanism, for example with xmlhttprequest. examples <div role="form" id="send-co...
ARIA: gridcell role - Accessibility
e cells both td elements and elements with a role of gridcell applied to them can be made editable, mimicking functionality similar to editing a spreadsheet. this is done by applying the html contenteditable attribute. <td contenteditable="true">notes</td> <div role="gridcell" contenteditable="true">item cost</div> contenteditable will make the element it is applied to focusable via the tab
key. if a gridcell is conditionally toggled into a state where editing is prohibited, toggle aria-readonly on the gridcell element. expandable cells in a treegrid, gridcells may be made expandable by toggling the aria-expanded attribute. note that if this attribute is provided, it applies only to the individual gridcell. associated wai-aria roles, states, and properties grid communicates ...
ARIA: List role - Accessibility
best practices for a full example. associated wai-aria roles, states, and properties listitem a single item in a list or directory. elements with role listitem can only be found in an element with the role list or group. group a collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.
keyboard interactions none. required javascript features none. examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript. unlike the html <ol> and <ul>, the aria list ro...
ARIA: Listitem role - Accessibility
list a list of items. elements with role list must have one or more elements with the role listitem as children, a one or more elements with the role of group that have one or more elements with the listitem role as children. group a collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.
keyboard interactions none. required javascript features none. examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript. if at all possible, you should use the appropri...
ARIA: Main role - Accessibility
cription the main role is a navigational landmark role identifying the main content of a document. landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. by classifying and labeling sections of a page, structural information conveyed visually through layout can be represented programmatically. screen readers use landmark roles to provide
keyboard navigation to important sections of a page. for those navigating via landmark roles, the main role is an alternative for "skip to main content" links.there should only be one main landmark role per document. the <main> element has a role of main. developers should always prefer using the correct semantic html element over using aria. documents and applications can be nested in the dom, whi...
ARIA: img role - Accessibility
label out twice. use with caution and test thoroughly. another example where this might be suitable is when using ascii emoji combinations, like the legendary "table flip": <div role="img" aria-label="table flip"> <p> (╯°□°)╯︵ ┻━┻ </p> </div> associated wai-aria roles, states, and properties aria-label an accessible name is required. an aria-label attribute
keyboard interactions required javascript features examples star rating role="img" example specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'img' in that specification. recommendation screen reader support tbd ...
ARIA: row role - Accessibility
the table, grid or treegrid, indicating the position, or index, of each row. for example, if a table has 1,500 rows, but only the header and rows 47 and 52 are in the dom, aria-rowindex="1" would be set on the header row, and aria-rowindex="47" and aria-rowindex="52" would be set on the 47th and 52nd row, respectively. if all the rows are present in the dom, this attribute is not necessary.
keyboard interactions none required javascript features none. for sortable columns, see the columnheader aria role. the first rule of aria use is you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and adding an aria role, state or property to make it accessible, then do so. employ the html <table> element instead of th...
ARIA: rowgroup role - Accessibility
ve table structure containing data arranged in rows and columns, similar to the native <table> html element. role="treegrid" similar to a grid, but with rows that can be expanded and collapsed in the same manner as for a tree. descendant roles role="row" a row of cells within a tabular structure. a row contains one or more cells, gridcell, or column headers, and sometimes a row header.
keyboard interactions none required javascript features none. 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 re-purposing an element and adding an aria role, state or property to make it accessible, then do so. employ the html <table> element instead of the aria role of table whenever possible. examples <d...
ARIA: switch role - Accessibility
here 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 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-check...
ARIA: table role - Accessibility
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, see the columnheader aria role. 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 re-purposing an element and adding an aria role, state or property to make it accessible, then do so. employ the html <table> element instead of...
ARIA: heading role - Accessibility
t of the page structure this heading represents. a level 1 heading usually indicates the main heading of a page, a level 2 heading the first subsection, a level 3 is a subsection of that, and so on. associated wai-aria roles, states, and properties aria-level the aria-level attribute specifies the heading level in the document structure. if no level is present, a value of 2 is the default.
keyboard interactions this role does not require any special
keyboard navigation. as with any heading, giving it an id ensures it can be referenced from anchor links, making it accessible via the
keyboard. required javascript features required event handlers none. changing attribute values usually not required, unless dynamically inserting content. in that case, the newly-added headings need ...
ARIA: textbox role - Accessibility
ibute 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
key inserts a line break. javascript features all features associated with any and all properties and states must be maintained, and forms submission on enter or return on a single line textbox needs to b...
WAI-ARIA Roles - Accessibility
snippets, or other content that puts across information in a different way to a regular flow of text.aria: form rolethe form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form.aria: grid rolethe grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be focused using
keyboard input.aria: gridcell rolethe gridcell role is used to make a cell in a grid or treegrid. it is intended to mimic the functionality of the html td element for table-style grouping of information.aria: heading rolethe heading role defines this element as a heading to a page or section. to give the page more structure, a level should also be provided to indicate relationships between sections.a...
Alerts - Accessibility
that this is a required field. q. why don’t you set focus back to the invalid field automatically? a. because this is not allowed by the windows api specs, and possibly others. also, letting the focus jump around without real user interaction too often is not a nice thing to do in general. tbd: let's rethink this -- personally, i think setting focus might be good if done without causing a
keyboard trap. ...
overview - Accessibility
warning: needs updating introduction here's a look at working examples and best practices in building accessible javascript widgets. ...
Architecture - Accessibility
as fast as visiting all nodes in the tree, according to tests run by the developers of nvda. (f) to get the line of text at the caret: many editors, including the mozilla editor, have a strange issue with caret offsets. the caret can sometimes visually appear at the end of a line, but logically it is on the first character on the next line. you can test this in a given editor by pressing the end
key on a line, to see whether the caret is shown past the end of the line. to doublecheck, hit the delete
key and see if it removes the first char of the next line. therefore, as the user arrows up and down, if you use the accessibletext::caretoffset and retrieve the line with that offset, you may not get the line with the visual caret returned. you are getting the line starting with the logical care...
Web Accessibility: Understanding Colors and Luminance - Accessibility
s the "purity" or "intensity" of a color, and although these are good definitions for "pigments" in an artist's paint set, they are not quite accurate as definitions for color from a computer screen. when it comes to color on a monitor, saturated colors are of a particular wavelength. while the definition of saturation for each of the color spaces may differ, saturation is readily measured. the
key is to know which color space you are working in, and be ready to convert it, if necessary. the color spaces that come up most frequently when discussing photosensitivity are the rgb, the hsl, and hsv color spaces. it's important to know what color space you're working with. for example, saturated colors have lightness 0.5 in hsl, while in hsv they have value 1. saturation in the rgb color spac...
Robust - Accessibility
uld be programmatically determinable. when using semantic elements correctly for their intended purpose, this criterion should be passed automatically. when scripting custom components, you will need to use wai-aria roles and other features to make sure your controls will be interpreted and are able to be used as intended, e.g. not only by sighted mouse users, but also by screenreader users,
keyboard-only users, etc. see html: a good basis for accessibility and wai-aria basics. 4.1.3 status messages (aa) added in 2.1 assistive technology users are made aware of new status messages added to the page. understanding status messages note: also see the wcag description for guideline 4.1: compatible: maximize compatibility with current and future user ag...
Text labels and names - Accessibility
e. be sure that the description conveys what is shown in the image. example <img src="milkweed.jgp" alt="black and white close-up photo of milkweed flowers"> interactive elements must be labeled if an element is intended for users to interact with it, it should have a label. interactive elements include links (<a>), form elements, buttons, and any element that has a handler for mouse or
keyboard events. the way to label an element depends on its type: for form elements, use a <label>; for links, buttons and clickable elements, the text content of the element typically provides the label. if no other option exists for labeling an element, use the aria-label attribute. use label attribute on optgroup elements in an <optgroup> element, use the label attribute to describe the group so...
Understanding the Web Content Accessibility Guidelines - Accessibility
giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the wcag 2.0 and 2.1 guidelines that further sub-divides each principle. perceivable: users must be able to perceive it in some way, using one or more of their senses. operable: users must be able to control ui elements (e.g. buttons must be clickable in some way — mouse,
keyboard, voice command, etc.). understandable: the content must be understandable to its users. robust: the content must be developed using well-adopted web standards that will work across different browsers, now and in the future. should i use wcag 2.0 or 2.1? wcag 2.1 is the most recent and relevant accessibility standard. use wcag 2.1 to help more people with disabilities and reduce the futu...
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
in other declarations using the var() function. custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm. initial valuesee proseapplies toall elementsinheritedyescomputed valueas specified with variables substitutedanimation typediscrete syntax --some
keyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); <declaration-value> this value matches any sequence of one or more tokens, so long as the sequence does not contain an unallowed token. it represents the entirety of what a valid declaration can have as its value. note: custom property names are case sensitive — --my-color will be treated as a separate custom ...
-moz-float-edge - CSS: Cascading Style Sheets
the non-standard -moz-float-edge css property specifies whether the height and width properties of the element include the margin, border, or padding thickness. /*
keyword values */ -moz-float-edge: border-box; -moz-float-edge: content-box; -moz-float-edge: margin-box; -moz-float-edge: padding-box; /* global values */ -moz-float-edge: inherit; -moz-float-edge: initial; -moz-float-edge: unset; syntax values border-box the height and width properties include the content, padding and border but not the margin. content-box the height and width properties include the content, but not the padding, border or margin. margin-box the height and width properties include the content, padding, border and margin. padding-box the height and width properties include the content and ...
-moz-image-region - CSS: Cascading Style Sheets
for certain xul elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image. this allows elements to use different pieces of the same image to improve performance. /*
keyword value */ -moz-image-region: auto; /* <shape> value */ -moz-image-region: rect(0, 8px, 4px, 4px); /* global values */ -moz-image-region: inherit; -moz-image-region: initial; -moz-image-region: unset; the syntax is similar to the clip property. all four values are relative to the upper left corner of the image. note: for a system that works on any background, see -moz-image-rect(). syntax values auto automatically defines the region of the image to use. <shape> a shape defining the part of...
-moz-orient - CSS: Cascading Style Sheets
values inline the element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes. block the element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes. horizontal the element is rendered horizontally. vertical the element is rendered vertically. ...
-moz-user-input - CSS: Cascading Style Sheets
note: -moz-user-input was one of the proposals leading to the proposed css 3 user-input property, which has not yet reached candidate recommendation (call for implementations). ...
-webkit-border-before - CSS: Cascading Style Sheets
olute length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedcolor: if the value is translucent, the computed value will be the rgba() corresponding one. if it isn't, it will be the rgb() corresponding one. ...
-webkit-box-reflect - CSS: Cascading Style Sheets
10px; /* mask value */ -webkit-box-reflect: below 0 linear-gradient(transparent, white); /* global values */ -webkit-box-reflect: inherit; -webkit-box-reflect: initial; -webkit-box-reflect: unset; note: this feature is not intended to be used by web sites. to achieve reflection on the web, the standard way is to use the css element() function. syntax values above, below, right, left are
keywords indicating in which direction the reflection is to happen. <length> indicates the size of the reflection. <image> describes the mask to be applied to the reflection. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ above | below | right | left ]? <length>? <image>?where <image> = <url> | <image()> | ...
-webkit-line-clamp - CSS: Cascading Style Sheets
lines. when applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end. note: this property was originally implemented in webkit and has some issues. it got standardized for legacy support. the css overflow module level 3 specification also defines a line-clamp property, which is meant to replace this property and avoid its issues. syntax /*
keyword value */ -webkit-line-clamp: none; /* <integer> values */ -webkit-line-clamp: 3; -webkit-line-clamp: 10; /* global values */ -webkit-line-clamp: inherit; -webkit-line-clamp: initial; -webkit-line-clamp: unset; none this value specifies that the content wonʼt be clamped. <integer> this value specifies the number of lines after which the content will be clamped. it must be greater tha...
-webkit-mask-attachment - CSS: Cascading Style Sheets
if a -webkit-mask-image is specified, -webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block. /*
keyword values */ -webkit-mask-attachment: scroll; -webkit-mask-attachment: fixed; -webkit-mask-attachment: local; /* multiple values */ -webkit-mask-attachment: scroll, local; -webkit-mask-attachment: fixed, local, scroll; /* global values */ -webkit-mask-attachment: inherit; -webkit-mask-attachment: initial; -webkit-mask-attachment: unset; syntax values scroll if scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image. fixed if fixed is specified, the mask image does not scroll with its containing element, instead remaining statio...
-webkit-text-stroke-width - CSS: Cascading Style Sheets
the -webkit-text-stroke-width css property specifies the width of the stroke for text. syntax /*
keyword values */ -webkit-text-stroke-width: thin; -webkit-text-stroke-width: medium; -webkit-text-stroke-width: thick; /* <length> values */ -webkit-text-stroke-width: 2px; -webkit-text-stroke-width: 0.1em; -webkit-text-stroke-width: 1mm; -webkit-text-stroke-width: 5pt; /* global values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke. formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-strok...
-webkit-touch-callout - CSS: Cascading Style Sheets
the -webkit-touch-callout css property controls the display of the default callout shown when you touch and hold a touch target. when a target is touched and held on ios, safari displays a callout information about the link. this property allows disabling that behavior. /*
keyword values */ -webkit-touch-callout: default; -webkit-touch-callout: none; /* global values */ -webkit-touch-callout: initial; -webkit-touch-callout: inherit; -webkit-touch-callout: unset; syntax values default the default callout is displayed. none the callout is disabled. formal definition initial valuedefaultapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax default | none examples turn off touch callout .example { -webkit-touch-callout: no...
:-moz-focusring - CSS: Cascading Style Sheets
gs and other factors, so the precise behavior of this pseudo-class will vary from platform to platform. this feature is not defined in any specification yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. note: developers tend to use :-moz-focusring to differentiate between the focus state when the user focuses an element via a mouse click versus
keyboard tabbing. it is also potentially useful if you are creating a custom element and you want to change its style based on its behavior. syntax :-moz-focusring examples html <input /> css input { margin: 5px; } :-moz-focusring { color: red; outline: 2px dotted green; } result specifications not part of any standard. ...
:-moz-ui-invalid - CSS: Cascading Style Sheets
s, in certain circumstances. this 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 imme...
:-moz-ui-valid - CSS: Cascading Style Sheets
ased on its validation constraints. 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 imme...
::after (:after) - CSS: Cascading Style Sheets
ext. </span> css .ribbon { background-color: #5bc8f7; } .ribbon::after { content: "this is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips. no javascript is required! we can also support
keyboard users with this technique, by adding a tabindex of 0 to make each span
keyboard focusable, and using a css :focus selector. this shows how flexible ::before and ::after can be, though for the most accessible experience a semantic disclosure widget created in some other way (such as with details and summary elements) is likely to be more appropriate. html <p>here we have some <span tabind...
:focus - CSS: Cascading Style Sheets
/* selects any <input> when focused */ input:focus { color: red; } note: this pseudo-class applies only to the focused element itself. use :focus-within if you want to select an element that contains a focused element. ...
:fullscreen - CSS: Cascading Style Sheets
</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode. css the magic happens in the css. there are two rules here. the first establishes the background color of the "toggle full-screen mode" button when the element is not in a full-screen state. the
key is the use of the :not(:fullscreen), which looks for the element to not have the :fullscreen pseudo-class applied to it. #fs-toggle:not(:fullscreen) { background-color: #afa; } when the document is in full-screen mode, the following css applies instead, setting the background color to a pale shade of red. #fs-toggle:fullscreen { background-color: #faa; } specifications specific...
:nth-child() - CSS: Cascading Style Sheets
r position in a group of siblings. /* selects the second <li> element in a list */ li:nth-child(2) { color: lime; } /* selects every fourth element among any group of siblings */ :nth-child(4n) { color: lime; } syntax the nth-child pseudo-class is specified with a single argument that describes a pattern for matching element indices in a list of siblings. element indices are 1-based.
keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc. even represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc. functional notation <an+b> represents elements in a list whose indices match those found in a custom pattern of numbers, defined by an+b, where: a is an integer step size, b is an intege...
:nth-last-child() - CSS: Cascading Style Sheets
roup of siblings, counting backwards from the last one */ :nth-last-child(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-child, except it counts items backwards from the end, not forwards from the beginning. syntax the nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.
keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end. even represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end. functional notation <an+b> represents elements whose numeric position in a series of siblings matches the pattern an+b, for every positive i...
range - CSS: Cascading Style Sheets
when defining custom counter styles, the range descriptor lets the author specify a range of counter values over which the style is applied. if a counter value is outside the specified range, then the fallback style will be used to construct the representation of that marker. syntax /*
keyword value */ range: auto; /* range values */ range: 2 5; range: infinite 10; range: 6 infinite; range: infinite infinite; /* multiple range values */ range: 2 5, 8 10; range: infinite 6, 10 infinite; values auto the range depends on the counter system: for cyclic, numeric, and fixed systems, the range is negative infinity to positive infinity. for alphabetic and symbolic systems, the range is 1 to positive infinity. for additive systems, the range is 0 to positive infinity. for extends ...
user-zoom - CSS: Cascading Style Sheets
fixed the user cannot zoom in or out. accessibility concerns disabling zooming capabilities prevents people experiencing low vision conditions from being able to read and understand page content. ...
viewport-fit - CSS: Cascading Style Sheets
contain the viewport is scaled to fit the largest rectangle inscribed within the display. cover the viewport is scaled to fill the device display. it is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display. ...
CSS Animations - CSS: Cascading Style Sheets
css animations is a module of css that lets you animate the values of css properties over time, using
keyframes. the behavior of these
keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes. reference css properties animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function css at-rules @
keyframes guides detecting css animation support describes a technique for detecting if a browser supports css animations. using css animations step-by-step tutorial about how to create animations using css. this article describes each relevant css property and at-rule and explains how th...
Basic Concepts of Multicol - CSS: Cascading Style Sheets
multiple-column layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper. this guide explains how the specification works with some common use case examples.
key concepts and terminology multicol is unlike any of the other layout methods we have in css in that it fragments the content, including all descendent elements, into columns. this happens in the same way that content is fragmented into pages when we work with css paged media, for example by creating a print stylesheet. the properties defined by the specification are: column-width column-count columns column-rule-color column-rule-style column-rule-width column-rule column-span column-fill column-gap by adding column-count or column-...
Styling Columns - CSS: Cascading Style Sheets
erty. this property was originally defined in the multi-column layout specification. however, it is now defined in box alignment in order to unify gaps between boxes in other specifications such as css grid layout. the initial value of column-gap in multicol is 1em. this means your columns will not run into each other. in other layout methods the initial value for column-gap is 0. if you use the
keyword value “normal” the gap will be set to 1em. you can change the gap by using any length unit as the value of column-gap. in the example below, the column-gap is set to 40px. the allowed value for column-gap is a <length-percentage>, this means percentages are allowed. percentage values for column-gap are calculated as a percentage of the width of the multicol container. column rules t...
CSS Containment - CSS: Cascading Style Sheets
y overflow. this information is something that is usually known, and in fact quite obvious, to the web developer creating the page. however browsers cannot guess at your intent and cannot assume that an article will be entirely self-contained. therefore this property gives you a nice way to explain to the browser this fact, and allow it to make performance optimizations based on that knowledge.
key concepts and terminology this specification defines only one property, the contain property. the values for this property indicate the type of containment that you want to apply to that element. layout containment article { contain: layout; } layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could ...
CSS Display - CSS: Cascading Style Sheets
layout grids, logical values and writing modes css grid layout and accessibility css grid layout and progressive enhancement realizing common layouts using grids specifications specification status comment css display module level 3the definition of 'display' in that specification. candidate recommendation added run-in, flow, flow-root, contents and multi-
keyword values. css level 2 (revision 1)the definition of 'display' in that specification. recommendation added the table model values and inline-block. css level 1the definition of 'display' in that specification. recommendation initial definition. basic values: none, block, inline and list-item. in addition to the css display specification level 3, further speci...
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
on. using auto margins for main axis alignment we don’t have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. however it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox. a common pattern is a navigation bar where some
key items are aligned to the right, with the main group on the left. you might think that this should be a use case for a justify-self property, however consider the image below. i have three items on one side and two on the other. if i were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention. instead we can target ite...
Basic concepts of flexbox - CSS: Cascading Style Sheets
0 0 auto. the items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto. the shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. this is as if you used flex: 1 1 0. the items can grow and shrink from a flex-basis of 0. try these shorthand values in the live example below. alignment, justification and distribution of free space between items a
key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items. align-items the align-items property will align the items on the cross axis. the initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. they are in fact stretching to fill the flex container —...
Introduction to formatting contexts - CSS: Cascading Style Sheets
ay: flow-root using display: flow-root (or display: flow-root list-item) on the containing block will create a new bfc without any other potentially problematic side-effects. with display: flow-root on the <div>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element. the name of the flow-root
keyword refers to the fact that you're creating something that serves, in essence, like a new root element (like <html> does), given how the new context is created and its flow layout functions. inline formatting contexts inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. the paragraph creates an inline formatting context inside wh...
OpenType font features guide - CSS: Cascading Style Sheets
replace specific combinations of letters when they appear together. while more common in script typefaces, in the below example they are used to create arrows: position (font-variant-position) position variants are used to enable typographic superscript and subscript glyphs. these are designed to work with the surrounding text without altering the baseline or line spacing. this is one of the
key benefits over using the <sub> or sup elements. capitals (font-variant-caps) one of the more common use cases for opentype features is proper small caps. these are capital letters sized to fit better amongst lower case letters and are generally used for acronyms and abbreviations. numerals (font-variant-numeric) there are several different styles of numerals commonly included in fonts: ...
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
ain it is the width on the item we need to address, and then any other properties we want to enhance. in this example i have again used grid-gap, rather than margins and negative margins to create my gutters. how does the specification define these overrides? the css grid layout specification details why we can overwrite the behavior of certain properties when something becomes a grid item. the
key sections of the specification are: establishing grid containers grid items grid item display as this behavior is detailed in the specification, you are safe to rely on using these overrides in your support for older browsers. nothing that i am describing here should be seen as a "hack", we are taking advantage of the fact that the grid specification details the interaction between differen...
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid. auto-filling grid tracks we can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the auto-fill and auto-fit properties. in this next example, i have used the auto-fill
keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. this means that grid will create as many 200 pixels column tracks as will fit in the container. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color:...
Subgrid - CSS: Cascading Style Sheets
se names rather than the line number. the line names on the parent grid are passed into the subgrid, and you can place items using them. in the below example i have named lines on the parent col-start and col-end and then used those to place the subitem. you can also specify line names on the subgrid. this is achieved by adding a list of line names enclosed in square brackets after the subgrid
keyword. if you have four lines in your subgrid, to name them all you could use the syntax grid-template-columns: subgrid [line1] [line2] [line3] [line4] lines specified on the subgrid are added to any lines specified on the parent so you can use either or both. to demonstrate this, i have positioned one item in the example below using the parent lines, and one using the subgrid lines. using subg...
Consistent list indentation - CSS: Cascading Style Sheets
s the edges of the <ul> element's content area. since we have no padding for the <ul> element, its content wraps snugly around the three list items. now we add the list item markers. since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in figure 4. visually, the markers are outside the content area of the <ul>, but that's not the important part here. what's
key is that the markers are placed outside the "principal box" of the <li> elements, not the <ul>. they're sort of like appendages to the list items, hanging outside the content-area of the <li> but still attached to the <li>. this is why, in every browser except internet explorer for windows, markers are placed outside any border set for an <li> element, assuming the value of list-style-position is...
Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
try this out in the live example below. change writing-mode from vertical-rl to horizontal-tb on .grid to see how the different properties change the layout. when working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense. block and inline dimensions a
key concept of working with flow relative properties and values is the two dimensions of block and inline. as we saw above, newer css layout methods such as flexbox and grid layout use the concepts of block and inline rather than right and left/top and bottom when aligning items. the inline dimension is the dimension along which a line of text runs in the writing mode in use. therefore, in an englis...
CSS Motion Path - CSS: Cascading Style Sheets
efine a specific path of any shape you want. you then animate it along that path by animating offset-distance, and can choose to rotate it at any point using offset-rotate. basic example <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @
keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } reference properties offset offset-anchor offset-distance offset-path offset-position offset-rotate specifications specification status comment motion path module level 1 working draft initial definition. ...
Stacking context example 2 - CSS: Cascading Style Sheets
there are the same four divs of the previous example, but now z-index properties are assigned on both levels of the hierarchy. you can see that div #2 (z-index: 2) is above div #3 (z-index: 1), because they both belong to the same stacking context (the root one), so z-index values rule how elements are stacked. what can be considered strange is that div #2 (z-index: 2) is above div #4 (z-index: 10), despite their z-index values. the reason is that they do not belong to the same stacking context. ...
CSS data types - CSS: Cascading Style Sheets
css data types define typical values (including
keywords and units) accepted by css properties and functions. they are a special kind of component value type. in formal syntax, data types are denoted by a
keyword placed between the inequality signs "<" and ">". index the data types defined by the set of css specifications include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <pos...
Media queries - CSS: Cascading Style Sheets
for example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens. in css, use the @media at-rule to conditionally apply part of a style sheet based on the result of a media query. use @import to conditionally apply an entire style sheet. ...
Privacy and the :visited selector - CSS: Cascading Style Sheets
here is an example of how to use styles with the aforementioned restrictions: :link { outline: 1px dotted blue; background-color: white; /* the default value of background-color is `transparent`. you need to specify a different value, otherwise changes on :visited won't apply. */ } :visited { outline-color: orange; /* visited links have an orange outline */ background-co...
Pseudo-classes - CSS: Cascading Style Sheets
for example, :hover can be used to change a button's color when the user's pointer hovers over it. /* any button over which the user's pointer is hovering */ button:hover { color: blue; } pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not). ...
Pseudo-elements - CSS: Cascading Style Sheets
for example, ::first-line can be used to change the font of the first line of a paragraph. /* the first line of every <p> element. */ p::first-line { color: blue; text-transform: uppercase; } note: in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state. syntax selector::pseudo-element { property: value; } you can use only one pseudo-element in a selector. it must appear after the simple selectors in the statement. note: as a rule, double colons (::) should be used instead of a single colon (:). this distinguishes pseudo-classes from pseudo-elements. ...
CSS Tutorials - CSS: Cascading Style Sheets
2 (level 1), new features have been added to css. some of them are fancy and are pretty self contained. they are easy to use for anybody with a fair knowledge of basic concepts. css counters counting items and pages is an easy task in css. learn to use counter-reset, counter-increment, counters(), and counter(). css animations css3 animations allow you to define configurations of style, as
keyframes, and to transition between them defining an animation. css transitions css3 transitions allow you to define an animation between several styles and to control the way this transition happens. css transforms transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2d or 3d spaces. css grad...
align-content - CSS: Cascading Style Sheets
e combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis. safe used alongside an alignment
keyword. if the chosen
keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. unsafe used alongside an alignment
keyword. regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. formal definition in...
all - CSS: Cascading Style Sheets
ce for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* global values */ all: initial; all: inherit; all: unset; /* css cascading and inheritance level 4 */ all: revert; the all property is specified as one of the css global
keyword values. note that none of these values affect the unicode-bidi and direction properties. values initial specifies that all the element's properties should be changed to their initial values. inherit specifies that all the element's properties should be changed to their inherited values. unset specifies that all the element's properties should be changed to their inherited values if t...
animation-iteration-count - CSS: Cascading Style Sheets
ing back to the first value after the last one is used. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /*
keyword value */ animation-iteration-count: infinite; /* <number> values */ animation-iteration-count: 3; animation-iteration-count: 2.4; /* multiple values */ animation-iteration-count: 2, 0, infinite; the animation-iteration-count property is specified as one or more comma-separated values. values infinite the animation will repeat forever. <number> the number of times the animation will ...
backdrop-filter - CSS: Cascading Style Sheets
the backdrop-filter css property lets you apply graphical effects such as blurring or color shifting to the area behind an element. because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent. ...
backface-visibility - CSS: Cascading Style Sheets
bute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. an element's back face is a mirror image of its front face. though invisible in 2d, the back face can become visible when a transformation causes the element to be rotated in 3d space. (this property has no effect on 2d transforms, which have no perspective.) syntax /*
keyword values */ backface-visibility: visible; backface-visibility: hidden; /* global values */ backface-visibility: inherit; backface-visibility: initial; backface-visibility: unset; the backface-visibility property is specified as one of the
keywords listed below. values visible the back face is visible when turned towards the user. hidden the back face is hidden, effectively making the e...
background-clip - CSS: Cascading Style Sheets
e background properties from that element’s first html <body> child element. the used values of that <body> element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. it is recommended that authors of html documents specify the canvas background for the <body> element rather than the html element. syntax /*
keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* global values */ background-clip: inherit; background-clip: initial; background-clip: unset; values border-box the background extends to the outside edge of the border (but underneath the border in z-ordering). padding-box the background extends to the outside ...
background-image - CSS: Cascading Style Sheets
cannot be loaded), browsers handle it as they would a none value. note: even if the images are opaque and the color won't be displayed in normal circumstances, web developers should always specify a background-color. if the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback. syntax each background image is specified either as the
keyword none or as an <image> value. to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/7693/catfront.png'); values none is a
keyword denoting the absence of images. <image> is an <image> denoting the image to display. there can b...
background-origin - CSS: Cascading Style Sheets
ckground's origin: from the border start, inside the border, or inside the padding. 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. note that background-origin is ignored when background-attachment is fixed. syntax /*
keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* global values */ background-origin: inherit; background-origin: initial; background-origin: unset; the background-origin property is specified as one of the
keyword values listed below. values border-box the background is positioned relative to the border box. padding-box the ...
block-size - CSS: Cascading Style Sheets
eight property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /*
keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element. a related property is inline-size, which defi...
border-collapse - CSS: Cascading Style Sheets
tored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. syntax /*
keyword values */ border-collapse: collapse; border-collapse: separate; /* global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset; the border-collapse property is specified as a single
keyword, which may be chosen from the list below. values collapse adjacent cells have shared borders (the collapsed-border table rendering model). separate adjacent cells ...
border-image-repeat - CSS: Cascading Style Sheets
the border-image-repeat css property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
border-image-source - CSS: Cascading Style Sheets
's border image. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image. syntax /*
keyword value */ border-image-source: none; /* <image> values */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used. the appearance defined by border-style is displayed instead. <image> image reference to...
border-image-width - CSS: Cascading Style Sheets
ent's border image. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge. ...
border - CSS: Cascading Style Sheets
specification. candidate recommendation removes specific support for transparent, as it is now a valid <color>; this has no practical impact. though it cannot be set to a custom value using the shorthand, border now resets border-image to its initial value (none). css level 2 (revision 1)the definition of 'border' in that specification. recommendation accepts the inherit
keyword. also accepts transparent as a valid color. css level 1the definition of 'border' in that specification. recommendation initial definition. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopm...
box-align - CSS: Cascading Style Sheets
warning: this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard. the box-align css property specifies how an element aligns its contents across its layout in a perpendicular direction. the effect of the property is only visible if there is extra space in the box. see flexbox for information about the current standard. /*
keyword values */ box-align: start; box-align: center; box-align: end; box-align: baseline; box-align: stretch; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; the direction of layout depends on the element's orientation: horizontal or vertical. syntax the box-align property is specified as one of the
keyword values listed below. values start the box aligns con...
box-decoration-break - CSS: Cascading Style Sheets
pages. 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 specified value will impact the appearance of the following properties: background border border-image box-shadow clip-path margin padding syntax /*
keyword values */ box-decoration-break: slice; box-decoration-break: clone; /* global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset; the box-decoration-break property is specified as one of the
keyword values listed below. values slice the element is initially rendered as if its box were not fragmented, after which the rendering for this h...
box-direction - CSS: Cascading Style Sheets
aft, and has been replaced by a newer standard. the -moz-box-direction will only be used for xul while the previous standard box-direction has been replaced by flex-direction. see flexbox for information about the current standard. the box-direction css property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge). /*
keyword values */ box-direction: normal; box-direction: reverse; /* global values */ box-direction: inherit; box-direction: initial; box-direction: unset; syntax the box-direction property is specified as one of the
keyword values listed below. values normal the box lays out its contents from the start (the left or top edge). reverse the box lays out its contents from the end (the right or...
box-pack - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard. see flexbox for information about the current standard. the -moz-box-pack and -webkit-box-pack css properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout. the effect of this is only visible if there is extra space in the box. /*
keyword values */ box-pack: start; box-pack: center; box-pack: end; box-pack: justify; /* global values */ box-pack: inherit; box-pack: initial; box-pack: unset; the direction of layout depends on the element's orientation: horizontal or vertical. syntax the box-pack property is specified as one of the
keyword values listed below. values start the box packs contents at the start, leaving an...
box-sizing - CSS: Cascading Style Sheets
nerally eliminates a number of pitfalls you can stumble on while laying out your content. on the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable. syntax the box-sizing property is specified as a single
keyword chosen from the list of values below. values content-box this is the initial and default value as specified by the css standard. the width and height properties include the content, but does not include the padding, border, or margin. for example, .box {width: 350px; border: 10px solid black;} renders a box that is 370px wide. here, the dimensions of the element are calculated as: width...
caption-side - CSS: Cascading Style Sheets
nteractive-examples and send us a pull request. syntax /* directional values */ caption-side: top; caption-side: bottom; /* warning: non-standard values */ caption-side: left; caption-side: right; caption-side: top-outside; caption-side: bottom-outside; /* global values */ caption-side: inherit; caption-side: initial; caption-side: unset; the caption-side property is specified as one of the
keyword values listed below. values top the caption box should be positioned above the table. bottom the caption box should be positioned below the table. left the caption box should be positioned on the left side of the table. this value was proposed for css 2, but removed from the final css 2.1 specification. it is non-standard. right the caption box should be positioned on the ...
caret-color - CSS: Cascading Style Sheets
s have a “navigation caret,” which acts similarly to an insertion caret but can be moved around in non-editable text. on the other hand, the mouse cursor image shown when hovering over text where the cursor property is auto, or when hovering over an element where the cursor property is text or vertical-text, though it sometimes looks like a caret, is not a caret (it’s a cursor). syntax /*
keyword values */ caret-color: auto; caret-color: transparent; caret-color: currentcolor; /* <color> values */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0, 200, 0); caret-color: hsla(228, 4%, 24%, 0.8); values auto the user agent selects an appropriate color for the caret. this is generally currentcolor, but the user agent may choose a different color to ensure good visibility a...
clip-path - CSS: Cascading Style Sheets
roperty creates a clipping region that sets what part of an element should be shown. parts that are inside the region are shown, while those outside are hidden. 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. ...
color-adjust - CSS: Cascading Style Sheets
if anything, the user agent may do to optimize the appearance of the element on the output device. by default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device. syntax color-adjust: economy; color-adjust: exact; the color-adjust property's value must be one of the following
keywords. values economy the user agent is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the output for the device it's being rendered for. for example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper. this is the default. exact t...
column-count - CSS: Cascading Style Sheets
the column-count css property breaks an element's content into the specified number of columns. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword value */ column-count: auto; /* <integer> value */ column-count: 3; /* global values */ column-count: inherit; column-count: initial; column-count: unset; values auto the number of columns is determined by other css properties, such as column-width. <integer> is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. if the column-width is also set to a non-auto value, it merely i...
column-fill - CSS: Cascading Style Sheets
the column-fill css property controls how an element's contents are balanced when broken into columns. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ column-fill: auto; column-fill: balance; column-fill: balance-all; /* global values */ column-fill: inherit; column-fill: initial; column-fill: unset; the column-fill property is specified as one of the
keyword values listed below. the initial value is balance so the content will be balanced across the columns. values auto columns are filled sequentially. content takes up only the room it needs, this may result in some columns rem...
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
multiple layout methods. now specified in box alignment, it may be used in multi-column, flexible box, and grid layouts. css grid layout initially defined the grid-column-gap property. this prefixed property is being replaced by column-gap. however, in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property. syntax /*
keyword value */ column-gap: normal; /* <length> values */ column-gap: 3px; column-gap: 2.5em; /* <percentage> value */ column-gap: 3%; /* global values */ column-gap: inherit; column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below. values normal the browser's default spacing is used between columns. for multi-column layout this is spe...
column-rule-style - CSS: Cascading Style Sheets
n-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset; the column-rule-style property is specified as a single <'border-style'> value. values <'border-style'> is a
keyword defined by border-style describing the style of the rule. the styling must be interpreted as in the collapsing border model. formal definition initial valuenoneapplies tomulticol elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-style'> examples setting a dashed column rule html <p>this is a bunch of text split into three columns. the `colum...
column-rule - CSS: Cascading Style Sheets
sing non-shorthand properties). syntax column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue; /* global values */ column-rule: inherit; column-rule: initial; column-rule: unset; the column-rule property is specified as one, two, or three of the values listed below, in any order. values <'column-rule-width'> is a <length> or one of the three
keywords, thin, medium, or thick. see border-width for details. <'column-rule-style'> see border-style for possible values and details. <'column-rule-color'> is a <color> value. formal definition initial valueas each of the properties of the shorthand:column-rule-width: mediumcolumn-rule-style: nonecolumn-rule-color: currentcolorapplies tomulticol elementsinheritednocomputed valueas each of th...
columns - CSS: Cascading Style Sheets
mns: 18em; /* column count */ columns: auto; columns: 2; /* both column width and count */ columns: 2 auto; columns: auto 12em; columns: auto auto; /* global values */ columns: inherit; columns: initial; columns: unset; the columns property may be specified as one or two of the values listed below, in any order. values <'column-width'> the ideal column width, defined as a <length> or the
keyword auto. the actual width may be wider or narrower to fit the available space. see column-width. <'column-count'> the ideal number of columns into which the element's content should be flowed, defined as an <integer> or the
keyword auto. if neither this value nor the column's width are auto, it merely indicates the maximum allowable number of columns. see column-count. formal definition ini...
counter-increment - CSS: Cascading Style Sheets
ter-increment: none; /* global values */ counter-increment: inherit; counter-increment: initial; counter-increment: unset; the counter-increment property is specified as either one of the following: a <custom-ident> naming the counter, followed optionally by an <integer>. you may specify as many counters to increment as you want, with each name or name-number pair separated by a space. the
keyword value none. values <custom-ident> the name of the counter to increment. <integer> the value to add to the counter. defaults to 1 if not specified. none no counter must be incremented. this is used as the default value, or to cancel an increment in more specific rules. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscr...
counter-reset - CSS: Cascading Style Sheets
s specific rules */ counter-reset: none; /* global values */ counter-reset: inherit; counter-reset: initial; counter-reset: unset; the counter-reset property is specified as either one of the following: a <custom-ident> naming the counter, followed optionally by an <integer>. you may specify as many counters to reset as you want, with each name or name-number pair separated by a space. the
keyword value none. values <custom-ident> the name of the counter to reset. <integer> the value to reset the counter to on each occurrence of the element. defaults to 0 if not specified. none no counter reset is to be performed. this can be used to override a counter-reset defined in a less specific rule. formal definition initial valuenoneapplies toall elementsinheritednocomputed valuea...
counter-set - CSS: Cascading Style Sheets
set in less specific rules */ counter-set: none; /* global values */ counter-set: inherit; counter-set: initial; counter-set: unset; the counter-set property is specified as either one of the following: a <custom-ident> naming the counter, followed optionally by an <integer>. you may specify as many counters to reset as you want, with each name or name-number pair separated by a space. the
keyword value none. values <custom-ident> the name of the counter to set. <integer> the value to set the counter to on each occurrence of the element. defaults to 0 if not specified. if there isn't currently a counter of the given name on the element, the element will create a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value ...
<custom-ident> - CSS: Cascading Style Sheets
's draft css will change module level 1the definition of '<custom-ident> for will-change' in that specification. candidate recommendation defines which values are excluded for will-change. css counter styles level 3the definition of '<custom-ident> for list-style-type' in that specification. candidate recommendation uses <custom-ident> instead of a finite list of
keywords. defines which values are excluded for list-style-type and @counter-style. css lists module level 3the definition of '<custom-ident> for counter-*' in that specification. working draft renames <identifier> to <custom-ident>. adds its usage to the new counter-set property. css animationsthe definition of '<custom-ident> for animation-name' in that specification. wor...
direction - CSS: Cascading Style Sheets
ion that cells flow within a table row. unlike the dir attribute in html, the direction property is not inherited from table columns into table cells, since css inheritance follows the document tree, and table cells are inside of rows but not inside of columns. the direction and unicode-bidi properties are the two only properties which are not affected by the all shorthand property. syntax /*
keyword values */ direction: ltr; direction: rtl; /* global values */ direction: inherit; direction: initial; direction: unset; values ltr text and other elements go from left to right. this is the default value. rtl text and other elements go from right to left. for the direction property to have any effect on inline-level elements, the unicode-bidi property's value must be embed or overr...
<display-box> - CSS: Cascading Style Sheets
syntax valid <display-box> values: contents these elements don't produce a specific box by themselves. they are replaced by their pseudo-box and their child boxes. please note that the css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by css box concepts such as replaced elements. see appendix b: effects of display: contents on unusual elements for more details. due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. see the accessibility concerns section below for more details. ...
<display-outside> - CSS: Cascading Style Sheets
syntax valid <display-outside> values: block the element generates a block element box, generating line breaks both before and after the element when in the normal flow. inline the element generates one or more inline element boxes that do not generate line breaks before or after themselves. in normal flow, the next element will be on the same line if there is space run-in the element generates a run-in box. ...
empty-cells - CSS: Cascading Style Sheets
rders and backgrounds appear around <table> cells that have no visible content. 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. this property has an effect only when the border-collapse property is separate. syntax /*
keyword values */ empty-cells: show; empty-cells: hide; /* global values */ empty-cells: inherit; empty-cells: initial; empty-cells: unset; the empty-cells property is specified as one of the
keyword values listed below. values show borders and backgrounds are drawn like in normal cells. hide no borders or backgrounds are drawn. formal definition initial valueshowapplies totable-cell ele...
drop-shadow() - CSS: Cascading Style Sheets
e box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself. syntax drop-shadow(offset-x offset-y blur-radius color) the drop-shadow() function accepts a parameter of type <shadow> (defined in the box-shadow property), with the exception that the inset
keyword and spread parameters are not allowed. parameters offset-x offset-y (required) two <length> values that determine the shadow offset. offset-x specifies the horizontal distance, where negative values place the shadow to the left of the element. offset-y specifies the vertical distance, where negative values place the shadow above the element. if both values are 0, the shadow is placed dir...
flex-direction - CSS: Cascading Style Sheets
property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and dom order. this will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. if the visual (css) order is important, then screen reader users will not have access to the correct reading order. ...
flex-wrap - CSS: Cascading Style Sheets
nteractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. see using css flexible boxes for more properties and information. syntax flex-wrap: nowrap; /* default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset; the flex-wrap property is specified as a single
keyword chosen from the list of values below. values the following values are accepted: nowrap the flex items are laid out in a single line which may cause the flex container to overflow. the cross-start is either equivalent to start or before depending on the flex-direction value. this is the default value. wrap the flex items break into multiple lines. the cross-start is either equivalent t...
float - CSS: Cascading Style Sheets
er browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using stylefloat. this was an exception to the rule, that the name of the dom member is the camel-case name of the dash-separated css name (due to the fact that "float" is a reserved word in javascript, as seen in the need to escape "class" as "classname" and escape <label>'s "for" as "htmlfor"). syntax /*
keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* global values */ float: inherit; float: initial; float: unset; the float property is specified as a single
keyword, chosen from the list of values below. values left the element must float on the left side of its containing block. right the element must float on the right side of its contain...
font-family - CSS: Cascading Style Sheets
ll sans extrabold, sans-serif; values <family-name> the name of a font family. for example, "times" and "helvetica" are font families. font family names containing whitespace should be quoted. <generic-name> generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. generic family names are
keywords and must not be quoted. a generic font family should be the last item in the list of font family names. the following
keywords are defined: serif glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings. e.g. lucida bright, lucida fax, palatino, "palatino linotype", palladio, "urw palladio", serif. sans-serif glyphs have stroke endings that are plai...
font-feature-settings - CSS: Cascading Style Sheets
ult settings. <feature-tag-value> when rendering text, the list of opentype feature tag value is passed to the text layout engine to enable or disable font features. the tag is always a <string> of 4 ascii characters. if it has more or less characters, or if it contains characters outside the u+20 – u+7e codepoint range, the whole property is invalid. the value is a positive integer. the two
keywords on and off are synonyms for 1 and 0 respectively. if no value is set, the default is 1. for non-boolean opentype features (e.g. stylistic alternates), the value implies a particular glyph to be selected; for boolean values, it is a switch. formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifieda...
font-optical-sizing - CSS: Cascading Style Sheets
the font-optical-sizing css property sets whether text rendering is optimized for viewing at different sizes. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the shape of glyphs for optimal viewing. auto the browser will modify the shape of glyphs for optimal viewing. description optical sizing is enabled by default for fonts that have an optical size variation a...
font-smooth - CSS: Cascading Style Sheets
it only works on mac os x/macos. auto - let the browser decide (uses subpixel anti-aliasing when available; this is the default) none - turn font smoothing off; display text with jagged sharp edges. antialiased - smooth the font on the level of the pixel, as opposed to the subpixel. ...
font-synthesis - CSS: Cascading Style Sheets
sis css property controls which missing typefaces, bold or italic, may be synthesized by the browser. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax this property can take any one of the following forms: the
keyword value none. either of the
keyword values weight and style. both the
keyword values weight and style. values none indicates that neither bold nor italic typeface may be synthesized. weight indicates that a bold typeface may be synthesized if needed. style indicates that an italic typeface may be synthesized if needed. description most standard western fonts include italic and bo...
font-variant-numeric - CSS: Cascading Style Sheets
umeric-spacing-values> */ font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */ font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */ font-variant-numeric: oldstyle-nums stacked-fractions; /* global values */ font-variant-numeric: inherit; font-variant-numeric: initial; font-variant-numeric: unset; this property can take one of two forms: either the
keyword value normal or one or more of the other values listed below, space-separated, in any order. values normal this
keyword leads to the deactivation of the use of such alternate glyphs. ordinal this
keyword forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd, 4th in english or a 1a in italian. it corresponds to the opentype values ordn. slashed-zero this
keywo...
<gradient> - CSS: Cascading Style Sheets
progressively around a circle. they are generated with the conic-gradient() function. interpolation as with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. this prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (be aware that older browsers may not use this behavior when using the transparent
keyword.) examples linear gradient example a simple linear gradient. <div class="linear-gradient">linear gradient</div> div { width: 240px; height: 80px; } .linear-gradient { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } radial gradient example a simple radial gradient. <div class="radial-gradient">radial gradient</div> div { ...
grid-auto-flow - CSS: Cascading Style Sheets
the grid-auto-flow css property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /* global values */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; this property may take one of two forms: a single
keyword: one of row, column, or dense. two
keywords: row dense or column dense. values row items are placed b...
grid-column - CSS: Cascading Style Sheets
llowing css properties: grid-column-end grid-column-start syntax this property is specified as one or two <grid-line> values. if two <grid-line> values are given they are separated by "/". the grid-column-start longhand is set to the value before the slash, and the grid-column-end longhand is set to the value after the slash. each <grid-line> value can be specified as: either the auto
keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the
keyword span together with either a <custom-ident> or an <integer> or both. values auto is a
keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1. <custom-ident> if...
grid-template-areas - CSS: Cascading Style Sheets
d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties grid-row-start, grid-row-end, grid-column-start, grid-column-end, and their shorthands grid-row, grid-column, and grid-area. syntax /*
keyword value */ grid-template-areas: none; /* <string> values */ grid-template-areas: "a b"; grid-template-areas: "a b b" "a c d"; /* global values */ grid-template-areas: inherit; grid-template-areas: initial; grid-template-areas: unset; values none the grid container doesn’t define any named grid areas. <string>+ a row is created for every separate string listed, a...
hyphens - CSS: Cascading Style Sheets
in html, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. in xml, the xml:lang attribute must be used. note: the rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser. syntax /*
keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* global values */ hyphens: inherit; hyphens: initial; hyphens: unset; the hyphens property is specified as a single
keyword value chosen from the list below. values none words are not broken at line breaks, even if characters inside the words suggest line break points. lines will only wrap at whitespace. manual words are bro...
image-rendering - CSS: Cascading Style Sheets
the page author specifies dimensions other than its natural size. scaling may also occur due to user interaction (zooming). for example, if the natural size of an image is 100×100px, but its actual dimensions are 200×200px (or 50×50px), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering. this property has no effect on non-scaled images. syntax /*
keyword values */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* global values */ image-rendering: inherit; image-rendering: initial; image-rendering: unset; values auto the scaling algorithm is ua dependent. since version 1.9 (firefox 3.0), gecko uses bilinear resampling (high quality). smooth the image should be scaled with an algorithm that maximizes ...
image() - CSS: Cascading Style Sheets
or declared. bi-directional awareness the first, optional parameter of the image() notation is the directionality of the image. if included, and the image is used on an element with opposite directionality, the image will be flipped horizontally in horizontal writing modes. if the directionality is omitted, the image won't be flipped if the language direction is changed. image fragments one
key difference between url() and image() is the ability to add a media fragment identifier — a starting point along the x and y axis, along with a width and height — onto the image source to display only a section of the source image. the section of the image defined in the parameter becomes a standalone image. the syntax looks like so: background-image: image('myimage.webp#xywh=0,20,40,60'); t...
inherit - CSS: Cascading Style Sheets
it can be applied to any css property, including the css shorthand all. for inherited properties, this reinforces the default behavior, and is only needed to override another rule. for non-inherited properties, this specifies a behavior that typically makes relatively little sense and you may consider using initial instead, or unset on the all property. inheritance is always from the parent element in the document tree, even when the parent element is not the containing block. ...
initial - CSS: Cascading Style Sheets
the initial css
keyword applies the initial (or default) value of a property to an element. it can be applied to any css property. this includes the css shorthand all, with which initial can be used to restore all css properties to their initial state. on inherited properties, the initial value may be unexpected. you should consider using the inherit, unset, or revert
keywords instead. examples using initial to reset color for an element html <p> <span>this text is red.</span> <em>this text is in the initial color (typically black).</em> <span>this is red again.</span> </p> css p { color: red; } em { color: initial; } result specifications specification status comment css cascading and inheritance level 4the definition of 'initial' in that...
Initial value - CSS: Cascading Style Sheets
ication. the usage of the initial value depends on whether a property is inherited or not: for inherited properties, the initial value is used on the root element only, as long as no specified value is supplied. for non-inherited properties, the initial value is used on all elements, as long as no specified value is supplied. you can explicitly specify the initial value by using the initial
keyword. note: the initial value should not be confused with the value specified by the browser's style sheet. specifications specification status comment css cascade 4 formal definition. css level 2 (revision 1)the definition of 'initial value' in that specification. recommendation implicit definition. ...
inline-size - CSS: Cascading Style Sheets
ght property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /*
keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element. a related property is block-size, whi...
inset-block-end - CSS: Cascading Style Sheets
physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block-end: 3px; inset-block-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-end: 10%; /*
keyword value */ inset-block-end: auto; /* global values */ inset-block-end: inherit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property. formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, botto...
inset-block-start - CSS: Cascading Style Sheets
cal inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /*
keyword value */ inset-block-start: auto; /* global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property. formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, ri...
inset-block - CSS: Cascading Style Sheets
onality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block: 3px 10px; inset-block: 2.4em 3em; inset-block: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-block: 10% 5%; /*
keyword value */ inset-block: auto; /* global values */ inset-block: inherit; inset-block: initial; inset-block: unset; constituent properties this property is a shorthand for the following css properties: inset-block-end inset-block-start syntax values the inset-block property takes the same values as the left property. formal definition initial valueautoapplies topositioned elementsin...
inset-inline-end - CSS: Cascading Style Sheets
ysical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline-end: 3px; inset-inline-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-end: 10%; /*
keyword value */ inset-inline-end: auto; /* global values */ inset-inline-end: inherit; inset-inline-end: initial; inset-inline-end: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-end property takes the same values as the left property. formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogic...
inset-inline-start - CSS: Cascading Style Sheets
offset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /*
keyword value */ inset-inline-start: auto; /* global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-start property takes the same values as the left property. formal definition initial valueautoapplies topositioned elementsinheritednopercen...
inset-inline - CSS: Cascading Style Sheets
ity, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10% 5%; /*
keyword value */ inset-inline: auto; /* global values */ inset-inline: inherit; inset-inline: initial; inset-inline: unset; constituent properties this property is a shorthand for the following css properties: inset-inline-end inset-inline-start syntax values the inset-inline property takes the same values as the left property. formal definition initial valueautoapplies topositioned ele...
inset - CSS: Cascading Style Sheets
corresponds to the top, right, bottom, and/or left properties. /* <length> values */ inset: 10px; /* value applied to all edges */ inset: 4px 8px; /* top/bottom left/right */ inset: 5px 15px 10px; /* top left/right bottom */ inset: 2.4em 3em 3em 3em; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset: 10% 5% 5% 5%; /*
keyword value */ inset: auto; /* global values */ inset: inherit; inset: initial; inset: unset; syntax values the inset property takes the same values as the left property. formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logi...
isolation - CSS: Cascading Style Sheets
ss property determines whether an element must create a new stacking context. 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. this property is especially helpful when used in conjunction with mix-blend-mode. syntax /*
keyword values */ isolation: auto; isolation: isolate; /* global values */ isolation: inherit; isolation: initial; isolation: unset; the isolation property is specified as one of the
keyword values listed below. values auto a new stacking context is created only if one of the properties applied to the element requires it. isolate a new stacking context must be created. formal definition ...
justify-content - CSS: Cascading Style Sheets
size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis. note: stretch is not supported by flexible boxes (flexbox). safe used alongside an alignment
keyword. if the chosen
keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. unsafe used alongside an alignment
keyword. regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored. formal...
line-break - CSS: Cascading Style Sheets
loose break text using the least restrictive line break rule. typically used for short lines, such as in newspapers. normal break text using the most common line break rule. strict break text using the most stringent line break rule. ...
linear-gradient() - CSS: Cascading Style Sheets
t(.25turn, red, 10%, blue); /* multi-position color stop: a gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue */ linear-gradient(45deg, red 0 50%, blue 50% 100%); values <side-or-corner> the position of the gradient line's starting point. if specified, it consists of the word to and up to two
keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). the order of the side
keywords does not matter. if unspecified, it defaults to to bottom. the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively. the other values are translated into an angle. <angle> the gradient line...
list-style-image - CSS: Cascading Style Sheets
ribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: this property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. syntax /*
keyword values */ list-style-image: none; /* <url> values */ list-style-image: url('starsolid.gif'); /* global values */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; values <url> location of image to use as the marker. none specifies that no image is used as the marker. if this value is set, the marker defined in list-style-type will be used instead. form...
list-style-position - CSS: Cascading Style Sheets
it apply to all list items. note that there is variance among browsers regarding behavior when a block element is placed first within a list element declared as list-style-position: inside. chrome and safari both place this element on the same line as the marker box, whereas firefox, internet explorer, and opera place it on the next line. for more information on this, see bug 36854. syntax /*
keyword values */ list-style-position: inside; list-style-position: outside; /* global values */ list-style-position: inherit; list-style-position: initial; list-style-position: unset; the list-style-position property is specified as one of the
keyword values listed below. values inside the ::marker is the first element among the list item's contents. outside the ::marker is outside the pri...
margin-block-end - CSS: Cascading Style Sheets
ored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ margin-block-end: 10px; /* an absolute length */ margin-block-end: 1em; /* relative to the text size */ margin-block-end: 5%; /* relative to the nearest block container's width */ /*
keyword values */ margin-block-end: auto; /* global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to margin-block-start, margin-inline-start, and margin-inline-end, which defi...
margin-block-start - CSS: Cascading Style Sheets
n a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ margin-block-start: 10px; /* an absolute length */ margin-block-start: 1em; /* relative to the text size */ margin-block-start: 5%; /* relative to the nearest block container's width */ /*
keyword values */ margin-block-start: auto; /* global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to margin-block-end, margin-inline-start, and margin-inline-end, whic...
margin-block - CSS: Cascading Style Sheets
gins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. /* <length> values */ margin-block: 10px 20px; /* an absolute length */ margin-block: 1em 2em; /* relative to the text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /*
keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and text-orientation. constituent properties this property is a shorthand for the following css properties: ...
margin-bottom - CSS: Cascading Style Sheets
les project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on non-replaced inline elements, such as <span> or <code>. syntax /* <length> values */ margin-bottom: 10px; /* an absolute length */ margin-bottom: 1em; /* relative to the text size */ margin-bottom: 5%; /* relative to the nearest block container's width */ /*
keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the
keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to t...
margin-inline-end - CSS: Cascading Style Sheets
n a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ margin-inline-end: 10px; /* an absolute length */ margin-inline-end: 1em; /* relative to the text size */ margin-inline-end: 5%; /* relative to the nearest block container's width */ /*
keyword values */ margin-inline-end: auto; /* global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset; it relates to margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element. values the margin-inline-end property takes the same values as the margin-left property. formal definition initial value0appli...
margin-inline-start - CSS: Cascading Style Sheets
github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ margin-inline-start: 10px; /* an absolute length */ margin-inline-start: 1em; /* relative to the text size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ /*
keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element. values the margin-inline-start property takes the same values as the margin-left property. formal definition initial value0applies tosame as margininheritednopercentagesdepends on ...
margin-inline - CSS: Cascading Style Sheets
ement, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. /* <length> values */ margin-inline: 10px 20px; /* an absolute length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /*
keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined for writing-mode, direction, and text-orientation. constituent properties this property is a shorthand for the following css prop...
margin-left - CSS: Cascading Style Sheets
all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified. syntax /* <length> values */ margin-left: 10px; /* an absolute length */ margin-left: 1em; /* relative to the text size */ margin-left: 5%; /* relative to the nearest block container's width */ /*
keyword values */ margin-left: auto; /* global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the
keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width o...
margin-right - CSS: Cascading Style Sheets
examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. syntax /* <length> values */ margin-right: 20px; /* an absolute length */ margin-right: 1em; /* relative to the text size */ margin-right: 5%; /* relative to the nearest block container's width */ /*
keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the
keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the wi...
margin-top - CSS: Cascading Style Sheets
ctive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on non-replaced inline elements, such as <span> or <code>. syntax /* <length> values */ margin-top: 10px; /* an absolute length */ margin-top: 1em; /* relative to the text size */ margin-top: 5%; /* relative to the nearest block container's width */ /*
keyword values */ margin-top: auto; /* global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the
keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the...
margin - CSS: Cascading Style Sheets
l four sides */ margin: 1em; margin: -3px; /* vertical | horizontal */ margin: 5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* global values */ margin: inherit; margin: initial; margin: unset; the margin property may be specified using one, two, three, or four values. each value is a <length>, a <percentage>, or the
keyword auto. negative values draw the element closer to its neighbors than it would be by default. when one value is specified, it applies the same margin to all four sides. when two values are specified, the first margin applies to the top and bottom, the second to the left and right. when three values are specified, the first margin applies to the top, the second to the right and left, the th...
mask-border-source - CSS: Cascading Style Sheets
the mask-border-source css property sets the source image used to create an element's mask border. the mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border. syntax /*
keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /* global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used. <image> image reference to use for the mask border. formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas speci...
mask-border-width - CSS: Cascading Style Sheets
the mask-border-width css property sets the width of an element's mask border. syntax /*
keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset; the mask-border-width property may be specified using one, two, three, or four values chosen from the list of values below. when one value is specified, it applies the same width to all four sides. when two values are specified...
mask-mode - CSS: Cascading Style Sheets
the mask-mode css property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask. /*
keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* multiple values */ mask-mode: alpha, match-source; /* global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset; syntax the mask-mode property is specified as one or more of the
keyword values listed below, separated by commas. values alpha this
keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values. luminance this
keyword indicates that the luminance values of the mask layer image should be used as the mask values. match-source if the mask-image property is of type <mask-source>, the l...
mask-repeat - CSS: Cascading Style Sheets
mage is not repeated (and hence the mask painting area will not necessarily be entirely covered). the position of the non-repeated mask image is defined by the mask-position css property. ...
max-block-size - CSS: Cascading Style Sheets
shows the different writing modes in action. 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. ...
max-inline-size - CSS: Cascading Style Sheets
fines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ max-inline-size: 300px; max-inline-size: 25em; /* <percentage> values */ max-inline-size: 75%; /*
keyword values */ max-inline-size: auto; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content(20em); /* global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset; values the max-inline-size property takes the same values as the max-width and max-height properties. formal definition initial value0applies tosame as width and he...
min-block-size - CSS: Cascading Style Sheets
erty, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ min-block-size: 100px; min-block-size: 5em; /* <percentage> values */ min-block-size: 10%; /*
keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /* global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if the writing mode is vertically oriented, the value of min-block-size relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. a related property ...
min-inline-size - CSS: Cascading Style Sheets
y, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ min-inline-size: 100px; min-inline-size: 5em; /* <percentage> values */ min-inline-size: 10%; /*
keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing mode is vertically oriented, the value of min-inline-size relates to the minimum height of the element; otherwise, it relates to the minimum width of the element. a related pr...
minmax() - CSS: Cascading Style Sheets
ax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* <inflexible-breadth>, <fixed-breadth> values */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto, 300px) a function taking two parameters, min and max. each parameter can be a <length>, a <percentage>, a <flex> value, or one of the
keyword values max-content, min-content, or auto. if max < min, then max is ignored and minmax(min,max) is treated as min. as a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum. values <length> a non-negative length. <percentage> a non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the ...
mix-blend-mode - CSS: Cascading Style Sheets
the mix-blend-mode css property sets how an element's content should blend with the content of the element's parent and the element's background. 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. ...
object-fit - CSS: Cascading Style Sheets
he alignment of the replaced element's content object within the element's box using the object-position property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the object-fit property is specified as a single
keyword chosen from the list of values below. values contain the replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. the entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box. cover the replaced content is sized to maintain...
offset-distance - CSS: Cascading Style Sheets
e property. if you want to animate an element along its full path, you would define its offset-path and then set up an animation that takes the offset-distance from 0% to 100%. html <div id="motion-demo"></div> css #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @
keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification status comment motion path module level 1the definition of 'offset-distance' in that specification. working draft initial definition ...
offset - CSS: Cascading Style Sheets
asic-shape> or <path()>offset-distance: a length, percentage or calc();offset-anchor: a positionoffset-rotate: as <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> | <'offset-rotate'> ]? ]? ]! ...
order - CSS: Cascading Style Sheets
m. accessibility concerns using the order property will create a disconnect between the visual presentation of content and dom order. this will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. if the visual (css) order is important, then screen reader users will not have access to the correct reading order. ...
outline-style - CSS: Cascading Style Sheets
t is drawn around an element, outside the border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often more convenient to use the shorthand property outline when defining the appearance of an outline. ...
outline - CSS: Cascading Style Sheets
usable focus indicators wcag 2.1: understanding success criterion 2.4.7: focus visible formal definition initial valueas each of the properties of the shorthand:outline-color: invert, for browsers supporting it, currentcolor for the otheroutline-style: noneoutline-width: mediumapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:outline-color: for the
keyword invert, the computed value is invert. for the color value, if the value is translucent, the computed value will be the rgba() corresponding one. if it isn't, it will be the rgb() corresponding one. the transparent
keyword maps to rgba(0,0,0,0).outline-width: an absolute length; if the
keyword none is specified, the computed value is 0outline-style: as specifiedanimation typeas each of the pro...
overflow-anchor - CSS: Cascading Style Sheets
out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts. scroll anchoring behavior is enabled by default in any browser that supports it. therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a document or part of a document and need to turn the behavior off. syntax /*
keyword values */ overflow-anchor: auto; overflow-anchor: none; /* global values */ overflow-anchor: inherit; overflow-anchor: initial; overflow-anchor: unset; values auto the element becomes a potential anchor when adjusting scroll position. none the element won't be selected as a potential anchor. formal definition initial valueautoapplies toall elementsinheritednocomputed valueas speci...
overflow-block - CSS: Cascading Style Sheets
the overflow-block css property sets what shows when content overflows the block start and block end edges of a box. this may be nothing, a scroll bar, or the overflow content. the overflow-block property maps to overflow-y or overflow-x depending on the writing mode of the document. syntax /*
keyword values */ overflow-block: visible; overflow-block: hidden; overflow-block: scroll; overflow-block: auto; /* global values */ overflow-block: inherit; overflow-block: initial; overflow-block: unset; the overflow-block property is specified as a single
keyword chosen from the list of values below. values visible content is not clipped and may be rendered outside the padding box's block start and block end edges. hidden content is clipped if necessary to fit the block dimension in t...
overflow-inline - CSS: Cascading Style Sheets
the overflow-inline css property sets what shows when content overflows the inline start and end edges of a box. this may be nothing, a scroll bar, or the overflow content. the overflow-inline property maps to overflow-y or overflow-x depending on the writing mode of the document. syntax /*
keyword values */ overflow-inline: visible; overflow-inline: hidden; overflow-inline: scroll; overflow-inline: auto; /* global values */ overflow-inline: inherit; overflow-inline: initial; overflow-inline: unset; the overflow-inline property is specified as a single
keyword chosen from the list of values below. values visible content is not clipped and may be rendered outside the padding box's inline start and end edges. hidden content is clipped if necessary to fit the inline dimension in ...
overflow-wrap - CSS: Cascading Style Sheets
ull request. note: in contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing. the property was originally a nonstandard and unprefixed microsoft extension called word-wrap, and was implemented by most browsers with the same name. it has since been renamed to overflow-wrap, with word-wrap being an alias. syntax /*
keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; /* global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset; the overflow-wrap property is specified as a single
keyword chosen from the list of values below. values normal lines may only break at normal word break points (such as a space between two words). anywhere to ...
overscroll-behavior-block - CSS: Cascading Style Sheets
the overscroll-behavior-block css property sets the browser's behavior when the block direction boundary of a scrolling area is reached. see overscroll-behavior for a full explanation. /*
keyword values */ overscroll-behavior-block: auto; /* default */ overscroll-behavior-block: contain; overscroll-behavior-block: none; /* global values */ overscroll-behavior-block: inherit; overscroll-behavior-block: initial; overscroll-behavior-block: unset; syntax the overscroll-behavior-block property is specified as a
keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to ...
overscroll-behavior-inline - CSS: Cascading Style Sheets
the overscroll-behavior-inline css property sets the browser's behavior when the inline direction boundary of a scrolling area is reached. see overscroll-behavior for a full explanation. /*
keyword values */ overscroll-behavior-inline: auto; /* default */ overscroll-behavior-inline: contain; overscroll-behavior-inline: none; /* global values */ overscroll-behavior-inline: inherit; overscroll-behavior-inline: initial; overscroll-behavior-inline: unset; syntax the overscroll-behavior-inline property is specified as a
keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining o...
overscroll-behavior-y - CSS: Cascading Style Sheets
the overscroll-behavior-y css property sets the browser's behavior when the vertical boundary of a scrolling area is reached. see overscroll-behavior for a full explanation. /*
keyword values */ overscroll-behavior-y: auto; /* default */ overscroll-behavior-y: contain; overscroll-behavior-y: none; /* global values */ overscroll-behavior-y: inherit; overscroll-behavior-y: initial; overscroll-behavior-y: unset; initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax the overscroll-behavior-y property is specified as a
keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is...
page-break-before - CSS: Cascading Style Sheets
this property has been replaced by the break-before property. the page-break-before css property adjusts page breaks before the current element. this property applies to block elements that generate a box. it won't apply on an empty <div> that won't generate a box. /*
keyword values */ page-break-before: auto; page-break-before: always; page-break-before: avoid; page-break-before: left; page-break-before: right; page-break-before: recto; page-break-before: verso; /* global values */ page-break-before: inherit; page-break-before: initial; page-break-before: unset; syntax values auto initial value. automatic page breaks (neither forced nor forbidden). always always force page breaks before the element. avoid avoid page breaks before the element. left force page breaks before ...
page-break-inside - CSS: Cascading Style Sheets
automatic page breaks (neither forced nor forbidden). avoid avoid page breaks inside the element. page break aliases the page-break-inside property is now a legacy property, replaced by break-inside. ...
perspective - CSS: Cascading Style Sheets
the perspective css property determines the distance between the z=0 plane and the user in order to give a 3d-positioned element some perspective. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword value */ perspective: none; /* <length> values */ perspective: 20px; perspective: 3.5em; /* global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective transform is to be applied. <length> a <length> giving the distance from the user to the z=0 plane. it is used to apply a perspective transform to the element and its content. if the ...
position - CSS: Cascading Style Sheets
d in a document. the top, right, bottom, and left properties determine the final location of positioned elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the position property is specified as a single
keyword chosen from the list of values below. values static the element is positioned according to the normal flow of the document. the top, right, bottom, left, and z-index properties have no effect. this is the default value. relative the element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
repeating-conic-gradient() - CSS: Cascading Style Sheets
est. syntax /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */ background: repeating-conic-gradient( from 3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%, 60%) 10deg 30deg); ); values <angle> preceded by the from
keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction. <position> using the same length, order and
keyterm values as the background-position property, the position defines center of the gradient. if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two option...
repeating-linear-gradient() - CSS: Cascading Style Sheets
stop defaults to 100% */ repeating-linear-gradient(0deg, blue, green 40%, red); /* a gradient repeating five times, going from the left to right, starting red, turning green, and back to red */ repeating-linear-gradient(to right, red 0%, green 10%, red 20%); values <side-or-corner> the position of the gradient line's starting point. if specified, it consists of the word to and up to two
keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). the order of the side
keywords does not matter. if unspecified, it defaults to to bottom. the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. the other values are translated into an angle. <angle> the gradient line'...
resize - CSS: Cascading Style Sheets
the resize css property sets whether an element is resizable, and if so, in which directions. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* global values */ resize: inherit; resize: initial; resize: unset; the resize property is specified as a single
keyword value from the list below. values none the element offers no user-controllable method for resizing it. both the element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and v...
rotate - CSS: Cascading Style Sheets
the rotate css property allows you to specify rotation transforms individually and independently of the transform property. this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property. syntax /*
keyword values */ rotate: none; /* angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* vector plus angle value */ rotate: 1 1 1 90deg; values angle value an <angle> specifying the angle to rotate the affected element through, around the z axis. equivalent to a rotate() (2d rotation) function. x, y, or z axis name plus angle value the name of the axis you want to rotate the affected eleme...
ruby-align - CSS: Cascading Style Sheets
the ruby-align css property defines the distribution of the different ruby elements over the base. /*
keyword values */ ruby-align: start; ruby-align: center; ruby-align: space-between; ruby-align: space-around; /* global values */ ruby-align: inherit; ruby-align: initial; ruby-align: unset; syntax values start is a
keyword indicating that the ruby will be aligned with the start of the base text. center is a
keyword indicating that the ruby will be aligned at the middle of the base text. space-between is a
keyword indicating that the extra space will be distributed between the elements of the ruby. space-around is a
keyword indicating that the extra space will be distributed between the elements of the ruby, and around it. formal definition initial valuespace-arou...
scale - CSS: Cascading Style Sheets
the scale css property allows you to specify scale transforms individually and independently of the transform property. this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value. syntax /*
keyword values */ scale: none; /* single values */ /* values of more than 1 make the element grow */ scale: 2; /* values of less than 1 make the element shrink */ scale: 0.5; /* two values */ scale: 2 0.5; /* three values */ scale: 2 0.5 2; values single number value a <number> specifying a scale factor to make the affected element scale by the same factor along both the x and y axes. equivalent to a scale() (2d scaling) function with a single value specified. two length/percentage values two <number>s...
scroll-behavior - CSS: Cascading Style Sheets
://github.com/mdn/interactive-examples and send us a pull request. note that any other scrolls, such as those performed by the user, are not affected by this property. when this property is specified on the root element, it applies to the viewport instead. this property specified on the body element will not propagate to the viewport. user agents are allowed to ignore this property. syntax /*
keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset; the scroll-behavior property is specified as one of the
keyword values listed below. values auto the scrolling box scrolls instantly. smooth the scrolling box scrolls in a smooth fashion using a user-agent-defined timing function o...
scroll-padding-block-end - CSS: Cascading Style Sheets
other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. 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. ...
scroll-padding-block-start - CSS: Cascading Style Sheets
other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. 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. ...
scroll-padding-block - CSS: Cascading Style Sheets
r. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport. constituent properties this property is a shorthand for the following css properties: scroll-padding-block-end scroll-padding-block-start syntax /*
keyword values */ scroll-padding-block: auto; /* <length> values */ scroll-padding-block: 10px; scroll-padding-block: 1em .5em; scroll-padding-block: 10%; /* global values */ scroll-padding-block: inherit; scroll-padding-block: initial; scroll-padding-block: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage. a...
scroll-padding-bottom - CSS: Cascading Style Sheets
other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ scroll-padding-bottom: auto; /* <length> values */ scroll-padding-bottom: 10px; scroll-padding-bottom: 1em; scroll-padding-bottom: 10%; /* global values */ scroll-padding-bottom: inherit; scroll-padding-bottom: initial; scroll-padding-bottom: unset; values <length-percentage> an inwards offset from the bottom edge of the scrollport, as a valid length or a percentage. auto ...
scroll-padding-inline-end - CSS: Cascading Style Sheets
other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. 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. ...
scroll-padding-inline-start - CSS: Cascading Style Sheets
other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. 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. ...
scroll-padding-inline - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. ...
scroll-padding-left - CSS: Cascading Style Sheets
other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ scroll-padding-left: auto; /* <length> values */ scroll-padding-left: 10px; scroll-padding-left: 1em; scroll-padding-left: 10%; /* global values */ scroll-padding-left: inherit; scroll-padding-left: initial; scroll-padding-left: unset; values <length-percentage> an inwards offset from the left edge of the scrollport, as a valid length or a percentage. auto the offset is de...
scroll-padding-right - CSS: Cascading Style Sheets
other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ scroll-padding-right: auto; /* <length> values */ scroll-padding-right: 10px; scroll-padding-right: 1em; scroll-padding-right: 10%; /* global values */ scroll-padding-right: inherit; scroll-padding-right: initial; scroll-padding-right: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage. auto the offset...
scroll-padding-top - CSS: Cascading Style Sheets
other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ scroll-padding-top: auto; /* <length> values */ scroll-padding-top: 10px; scroll-padding-top: 1em; scroll-padding-top: 10%; /* global values */ scroll-padding-top: inherit; scroll-padding-top: initial; scroll-padding-top: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage. auto the offset is determind ...
scroll-padding - CSS: Cascading Style Sheets
ude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars), or simply to put more breathing room between a targeted element and the edges of the scrollport. constituent properties this property is a shorthand for the following css properties: scroll-padding-bottom scroll-padding-left scroll-padding-right scroll-padding-top syntax /*
keyword values */ scroll-padding: auto; /* <length> values */ scroll-padding: 10px; scroll-padding: 1em .5em 1em 1em; scroll-padding: 10%; /* global values */ scroll-padding: inherit; scroll-padding: initial; scroll-padding: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid <length> or a <percentage>. auto the offset is determind b...
scroll-snap-align - CSS: Cascading Style Sheets
the scroll-snap-align property specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container). the two values specify the snapping alignment in the block axis and inline axis, respectively. if only one value is specified, the second value defaults to the same value. syntax /*
keyword values */ scroll-snap-align: none; scroll-snap-align: start end; /* when two values set first is block, second inline */ scroll-snap-align: center; /* global values */ scroll-snap-align: inherit; scroll-snap-align: initial; scroll-snap-align: unset; values none the box does not define a snap position in that axis. start the start alignment of this box's scroll snap area, within the scroll container's s...
scroll-snap-coordinate - CSS: Cascading Style Sheets
the scroll-snap-coordinate css property defines the x and y coordinate positions within an element that will align with its nearest ancestor scroll container's scroll-snap-destination for each respective axis. /*
keyword value */ scroll-snap-coordinate: none; /* <position> values */ scroll-snap-coordinate: 50px 50px; /* single coordinate */ scroll-snap-coordinate: 100px 100px, 100px bottom; /* multiple coordinates */ /* global values */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed. syntax values none specifies that the element does not contribute to a snap point...
scroll-snap-type-x - CSS: Cascading Style Sheets
the scroll-snap-type-x css property defines how strictly snap points are enforced on the horizontal axis of the scroll container in case there is one. specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent. /*
keyword values */ scroll-snap-type-x: none; scroll-snap-type-x: mandatory; scroll-snap-type-x: proximity; /* global values */ scroll-snap-type-x: inherit; scroll-snap-type-x: initial; scroll-snap-type-x: unset; syntax values none when the visual viewport of this scroll container is scrolled horizontally, it must ignore snap points. mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled horizontally. that means it snaps on t...
scroll-snap-type-y - CSS: Cascading Style Sheets
the scroll-snap-type-y css property defines how strictly snap points are enforced on the vertical axis of the scroll container in case there is one. specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent. /*
keyword values */ scroll-snap-type-y: none; scroll-snap-type-y: mandatory; scroll-snap-type-y: proximity; /* global values */ scroll-snap-type-y: inherit; scroll-snap-type-y: initial; scroll-snap-type-y: unset; syntax values none when the visual viewport of this scroll container is scrolled vertically, it must ignore snap points. mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled vertically. that means it snaps on that po...
scroll-snap-type - CSS: Cascading Style Sheets
ase there is one. 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. specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent. ...
table-layout - CSS: Cascading Style Sheets
the table-layout css property sets the algorithm used to lay out <table> cells, rows, and columns. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ table-layout: auto; table-layout: fixed; /* global values */ table-layout: inherit; table-layout: initial; table-layout: unset; values auto by default, most browsers use an automatic table layout algorithm. the widths of the table and its cells are adjusted to fit the content. fixed table and column widths are set by the widths of table and col elements or by the width of the first row of cells. cells in subsequent rows do not affect...
text-align-last - CSS: Cascading Style Sheets
the text-align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned. 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. ...
text-decoration-skip-ink - CSS: Cascading Style Sheets
ines and underlines are drawn when they pass over glyph ascenders and descenders. 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. text-decoration-skip-ink is not part of the text-decoration shorthand. syntax /* single
keyword */ text-decoration-skip-ink: none; text-decoration-skip-ink: auto; text-decoration-skip-ink: all; /* global
keywords */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset; values none underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders. auto the default —...
text-decoration-style - CSS: Cascading Style Sheets
line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an html tag, like <del> or <s>. as browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. syntax /*
keyword values */ text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; /* global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: unset; values solid draws a single line. double draws a double line. dotted draws a dotted line. dashed draws a d...
text-decoration-thickness - CSS: Cascading Style Sheets
the text-decoration-thickness css property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline. syntax /* single
keyword */ text-decoration-thickness: auto; text-decoration-thickness: from-font; /* length */ text-decoration-thickness: 0.1em; text-decoration-thickness: 3px; /* percentage */ text-decoration-thickness: 10%; /* global values */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: unset; values auto the browser chooses an appropriate width for the text decoration line. from-font if the font file includes information about a preferred thickness, use that value. if the font file doesn't include this information, behave as if auto was set, with t...
text-emphasis-position - CSS: Cascading Style Sheets
the text-emphasis-position css property sets where emphasis marks are drawn. like ruby text, if there isn't enough room for emphasis marks, the line height is increased. /* initial value */ text-emphasis-position: over right; /*
keywords value */ text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under; /* global values */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset; syntax values over draw marks over the text in horizontal writing mode. under draw marks under the text in horizontal writing mode. right draws marks to the right of the text in vertical writing mode. lef...
text-emphasis-style - CSS: Cascading Style Sheets
rance of emphasis marks. it can also be set, and reset, using the text-emphasis shorthand. /* initial value */ text-emphasis-style: none; /* no emphasis marks */ /* <string> values */ text-emphasis-style: 'x'; text-emphasis-style: '点'; text-emphasis-style: '\25b2'; text-emphasis-style: '*'; text-emphasis-style: 'foo'; /* should not be used. ...
text-emphasis - CSS: Cascading Style Sheets
roperties this property is a shorthand for the following css properties: text-emphasis-color text-emphasis-style syntax /* initial value */ text-emphasis: none; /* no emphasis marks */ /* <string> value */ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25b2'; text-emphasis: '*' #555; text-emphasis: 'foo'; /* should not use. it may be computed to or rendered as 'f' only */ /*
keywords value */ text-emphasis: filled; text-emphasis: open; text-emphasis: filled sesame; text-emphasis: open sesame; /*
keywords value combined with a color */ text-emphasis: filled sesame #555; /* global values */ text-emphasis: inherit; text-emphasis: initial; text-emphasis: unset; values none no emphasis marks. filled the shape is filled with solid color. if neither filled nor open is...
text-rendering - CSS: Cascading Style Sheets
the text-rendering css property provides information to the rendering engine about what to optimize for when rendering text. the browser makes trade-offs among speed, legibility, and geometric precision. /*
keyword values */ text-rendering: auto; text-rendering: optimizespeed; text-rendering: optimizelegibility; text-rendering: geometricprecision; /* global values */ text-rendering: inherit; text-rendering: initial; text-rendering: unset; note: the text-rendering property is an svg property that is not defined in any css standard. however, gecko and webkit browsers let you apply this property to html and xml content on windows, macos, and linux. one very visible effect is optimizelegibility, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for exam...
text-size-adjust - CSS: Cascading Style Sheets
the text-size-adjust css property controls the text inflation algorithm used on some smartphones and tablets. other browsers will ignore this property. /*
keyword values */ text-size-adjust: none; text-size-adjust: auto; /* <percentage> value */ text-size-adjust: 80%; /* global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. to map the extra-wide layout back to the original device size, they either show only part of the whole render or scale t...
text-underline-offset - CSS: Cascading Style Sheets
ty sets the offset distance of an underline text decoration line (applied using text-decoration) from its original position. text-underline-offset is not part of the text-decoration shorthand. while an element can have multiple text-decoration lines, text-underline-offset only impacts underlining, and not other possible line decoration options such as overline or line-through. syntax /* single
keyword */ text-underline-offset: auto; /* length */ text-underline-offset: 0.1em; text-underline-offset: 3px; /* percentage */ text-underline-offset: 20%; /* global values */ text-underline-offset: inherit; text-underline-offset: initial; text-underline-offset: unset; the text-underline-offset property is specified as a single value from the list below. values auto the browser chooses the ...
matrix3d() - CSS: Cascading Style Sheets
the matrix below describes the following transformations: translates every x point by -50px translates every y point by -100px translates every z point by 0 scales down by 10% */ transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, -50,-100,0,1.1 ...
transform-style - CSS: Cascading Style Sheets
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. if flattened, the element's children will not exist on their own in the 3d-space. as this property is not inherited, it must be set for all non-leaf descendants of the element. syntax /*
keyword values */ transform-style: flat; transform-style: preserve-3d; /* global values */ transform-style: inherit; transform-style: initial; transform-style: unset; values flat indicates that the children of the element are lying in the plane of the element itself. preserve-3d indicates that the children of the element should be positioned in the 3d-space. formal definition initial valu...
transition-property - CSS: Cascading Style Sheets
/interactive-examples and send us a pull request. note: the set of properties that can be animated is subject to change. as such, you should avoid including any properties in the list that don't currently animate, as someday they might, causing unexpected results. if you specify a shorthand property (e.g., background), all of its longhand sub-properties that can be animated will be. ...
transition - CSS: Cascading Style Sheets
ial; transition: unset; the transition property is specified as one or more single-property transitions, separated by commas. each single-property transition describes the transition that should be applied to a single property (or the special values all and none). it includes: zero or one value representing the property to which the transition should apply. this may be any one of: the
keyword none the
keyword all a <custom-ident> naming a css property. zero or one <single-transition-timing-function> value representing the timing function to use zero, one, or two <time> values. the first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to transition-delay. see how things are handl...
translate - CSS: Cascading Style Sheets
the translate css property allows you to specify translation transforms individually and independently of the transform property. this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value. syntax /*
keyword values */ translate: none; /* single values */ translate: 100px; translate: 50%; /* two values */ translate: 100px 200px; translate: 50% 105px; /* three values */ translate: 50% 105px 5rem; values single <length-percentage> value a <length> or <percentage> that specifies a 2d translation, with the same translation along both the x and y axes. equivalent to a translate() (2d translation) function with a single value specified. two <length-percentage> values two <length> or <percentage...
visibility - CSS: Cascading Style Sheets
ide rows or columns in a <table>. 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. to both hide an element and remove it from the document layout, set the display property to none instead of using visibility. syntax /*
keyword values */ visibility: visible; visibility: hidden; visibility: collapse; /* global values */ visibility: inherit; visibility: initial; visibility: unset; the visibility property is specified as one of the
keyword values listed below. values visible the element box is visible. hidden the element box is invisible (not drawn), but still affects layout as normal. descendants of the elem...
white-space - CSS: Cascading Style Sheets
s property sets how white space inside an element is handled. 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. note: to make words break within themselves, use overflow-wrap, word-break, or hyphens instead. syntax /*
keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* global values */ white-space: inherit; white-space: initial; white-space: unset; the white-space property is specified as a single
keyword chosen from the list of values below. values normal sequences of white space are collapsed. newline ch...
word-break - CSS: Cascading Style Sheets
the word-break css property sets whether line breaks appear wherever the text would otherwise overflow its content box. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /*
keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* deprecated */ /* global values */ word-break: inherit; word-break: initial; word-break: unset; the word-break property is specified as a single
keyword chosen from the list of values below. values normal use the default line break rule. break-all to prevent overflow, word breaks should be inserted between any two characte...
writing-mode - CSS: Cascading Style Sheets
bute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. thus, it also determines the ordering of block-level content. syntax /*
keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset; the writing-mode property is specified as one of the values listed below. the flow direction in horizontal scripts is also affected by the directionality of that script, either left-to-right (ltr, like english and...
z-index - CSS: Cascading Style Sheets
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. for a positioned box (that is, one with any position other than static), the z-index property specifies: the stack level of the box in the current stacking context. whether the box establishes a local stacking context. syntax /*
keyword value */ z-index: auto; /* <integer> values */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* negative values to lower the priority */ /* global values */ z-index: inherit; z-index: initial; z-index: unset; the z-index property is specified as either the
keyword auto or an <integer>. values auto the box does not establish a new local stacking context. the stack level of the ge...
zoom - CSS: Cascading Style Sheets
the non-standard zoom css property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. however, unlike css transforms, zoom affects the layout size of the element. /*
keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /* global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal size. reset do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing ctrl-- or ctrl++
keyboard shortcuts) to the document. only supported by webkit (and possibly blink). <percentage> zoom factor. 100% is equivalent to normal. values...
CSS: Cascading Style Sheets
box, css grid, and positioning, and some of the legacy techniques you might still want to know about. use css to solve common problems this module provides links to sections of content explaining how to use css to solve common problems when creating a web page. reference css reference: this exhaustive reference for seasoned web developers describes every property and concept of css. ...
Adding captions and subtitles to HTML5 video - Developer guides
r; } .subtitles-menu li button { border:none; background:#000; color:#fff; cursor:pointer; width:90%; padding:2px 5px; border-radius:2px; } styling the displayed subtitles one of the less well known about and supported features of webvtt is the ability to style the individual subtitles (something called text cues) via css extensions. the ::cue pseudo-element is the
key to targetting individual text track cues for styling, as it matches any defined cue. there are only a handful of css properties that can be applied to a text cue: color opacity visibility text-decoration text-shadow background shorthand properties outline shorthand properties font shorthand properties, including line-height white-space for example, to change the text colour of the te...
Creating a cross-browser video player - Developer guides
use of data-states). var setfullscreendata = function(state) { videocontainer.setattribute('data-fullscreen', !!state); } this is used simply to set some basic css to improve the styling of the custom controls when they are in fullscreen (see the sample code for further details). ...
Block formatting context - Developer guides
specifications specification status comment css display module level 3the definition of 'block formatting context' in that specification. candidate recommendation define bfc(abbr) etc. css level 2 (revision 1)the definition of 'block formatting context' in that specification. recommendation initial definition. see also float, clear css
key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. definitions of value syntax, shorthand properties and replaced elements. ...
Orientation and motion data explained - Developer guides
frame fixed on the center of the device. we use lower-case letters ("x", "y", and "z") to describe the axes of the device coordinate frame. the x axis is in the plane of the screen and is positive toward the right and negative toward the left. the y axis is in the plane of the screen and is positive toward the top and negative toward the bottom. the z axis is perpendicular to the screen or
keyboard, and is positive extending outward from the screen. note: on a phone or tablet, the orientation of the device is always considered in relation to the standard orientation of the screen; this is the "portrait" orientation on most devices. on a laptop computer, the orientation is considered in relation to the
keyboard. if you want to detect changes in device orientation in order to compensat...
Overview of events and handlers - Developer guides
is available from several sources, including this one.) currently, all execution environments for javascript code use events and event handling. the event design pattern the event system, at its core, is simply a programming design pattern. the pattern starts with an agreement over a kind of event and: the name string used for the event, the type of the data structure used to represent the
key properties of that event, and the javascript object which will 'emit' that event. the pattern is implemented by defining a javascript function which takes as an argument the data structure which was agreed upon, and registering the function using the name string with the object which will emit the event. the function is said to be a 'listener' or a 'handler' with both names used intercha...
Event developer guide - Developer guides
you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12.using device orientation with 3d transformsthis article provides tips on how to use device orientation information in tandem with css 3d transforms. ...
Rich-Text Editing in Mozilla - Developer guides
he latter for when preventing change to fixed elements in an editable environment). setting up rich-text editing rich-text editing is initialized by setting the designmode property of a document to "on", such as the document inside an iframe. once designmode has been set to "on", the document becomes a rich-text editing area and the user can type into it as if it were a textarea. the most basic
keyboard commands such as copy and paste are available, all others need to be implemented by the website. similarly, setting contenteditable to "true" allows you to make individual elements of a document editable. executing commands when an html document has been switched to designmode, the document object exposes the document.execcommand method which allows one to run commands to manipulate the c...
Constraint validation - Developer guides
r. not only do most countries allow an optional prefix with the country code (like d- in germany, f- in france or switzerland), but some countries have postal codes with only a fixed number of digits; others, like the uk, have more complex structures, allowing letters at some specific positions. note: this is not a comprehensive postal code validation library, but rather a demonstration of the
key concepts. as an example, we will add a script checking the constraint validation for this simple form: <form> <label for="zip">zip : </label> <input type="text" id="zip"> <label for="country">country : </label> <select id="country"> <option value="ch">switzerland</option> <option value="fr">france</option> <option value="de">germany</option> <option valu...
HTML5 Parser - Developer guides
so that after the script, the elements left open are the same ones that were open before the script. the open and closing tags do not need to be written by the same document.write() call, as long as they are within the same <script> tag. please note that you shouldn't use end tags for void elements that don't have end tags: <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <input>, <
keygen>, <link>, <meta>, <param>, <source> and <wbr>. (there are also some element whose end tags can be omitted in some cases, such as <p> in the example below, but it's simpler to always use end tags for those elements than to make sure that the end tags are only omitted when they aren't necessary.) for example, the following code writes a balanced sub-tree: <script> document.write("<div>"); ...
disabled - HTML: Hypertext Markup Language
focus on the control, nor it's form control descendants. if the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones. the disabled attribute is supported by <button>, <command>, <fieldset>, <
keygen>, <optgroup>, <option>, <select>, <textarea> and <input>. this boolean disabled attribute indicates that the user cannot interact with the control or it's descendant controls. if this attribute is not specified, the control inherits its setting from the containing element, for example fieldset; if there is no containing element with the disabled attribute set, and the control itself does not ...
HTML attribute: multiple - HTML: Hypertext Markup Language
ols. /* uncomment this css to make the multiple the same height as the single */ /* select[multiple] { height: 1.5em; vertical-align: top; } select[multiple]:focus, select[multiple]:active { height: auto; } */ there are a few ways to select multiple options in a <select> element with a multiple attribute. depending on the operating system, mouse users can hold the ctrl, command, or shift
keys and then click multiple options to select/deselect them.
keyboard users can select multiple contiguous items by focusing on the <select> element, selecting an item at the top or bottom of the range they want to select using the up and down cursor
keys to go up and down the options. the selection of non-contiguous is not as well supported: items should be able to be selected and deselected by pre...
HTML attribute: pattern - HTML: Hypertext Markup Language
renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must describe the pattern. relying on the title attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. some browsers show a tooltip when an element with a title is hovered, but that leaves out
keyboard-only and touch-only users. this is one of the several reasons you must include information informing users how to fill out the the control to match the requirements. while titles are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error ha...
HTML attribute: step - HTML: Hypertext Markup Language
the step sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. if not explicitly included, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time input types. ...
Block-level elements - HTML: Hypertext Markup Language
as it can). the following example demonstrates the block-level element's influence: block-level elements html <p>this paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> css p { background-color: #8abb55; } usage block-level elements may appear only within a <body> element. block-level vs. inline there are a couple of
key differences between block-level elements and inline elements: content model generally, block-level elements may contain inline elements and (sometimes) other block-level elements. inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. default formatting by default, block-level elements begin on new lines, but inline elements ...
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") to be accessed cross-origin from anywhere on the internet. implementing the save feature now that the server has been configured to allow retrieval of the images cross-origin, we can write the code that allows the user to save them to local local storage, just as if they were being served from the same domain the code is running on. the
key is to use the crossorigin attribute by setting crossorigin on the htmlimageelement into which the image will be loaded. this tells the browser to request cross-origin access when trying to download the image data. starting the download the code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let imageurl = "https://cdn.gli...
<area> - HTML: Hypertext Markup Language
he specifications for html defines the values rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes. many browsers, notably internet explorer 4 and higher, support circ, polygon, and rectangle as valid values for shape, but these values are non-standard. target a
keyword or author-defined name of the browsing context to display the linked resource. the following
keywords have special meanings: _self (default): show the resource in the current browsing context. _blank: show the resource in a new, unnamed browsing context. _parent: show the resource in the parent browsing context of the current one, if the current page is inside a frame. if there is no...
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
uthentication. if the server does not give credentials to the origin site (through access-control-allow-credentials: http header), the image will be tainted and its usage restricted. when not present, the resource is fetched without a cors request (i.e. without sending the origin: http header), preventing its non-tainted used in <canvas> elements. if invalid, it is handled as if the enumerated
keyword anonymous was used. see cors settings attributes for additional information. currenttime reading currenttime returns a double-precision floating-point value indicating the current playback position, in seconds, of the audio. if the audio's metadata isn't available yet—thereby preventing you from knowing the media's start time or duration—currenttime instead indicates, and can be used ...
<base>: The Document Base URL element - HTML: Hypertext Markup Language
interface htmlbaseelement attributes this element's attributes include the global attributes. if either of the following attributes are specified, this element must come before other elements with attribute values of urls, such as <link>’s href attribute. href the base url to be used throughout the document for relative urls. absolute and relative urls are allowed. target a
keyword or author-defined name of the default browsing context to show the results of navigation from <a>, <area>, or <form> elements without explicit target attributes. the following
keywords have special meanings: _self (default): show the result in the current browsing context. _blank: show the result in a new, unnamed browsing context. _parent: show the result in the parent browsing cont...
<bgsound>: The Background Sound element (obsolete) - HTML: Hypertext Markup Language
ge is used; use <audio> instead. do not use this! in order to embed audio in a web page, you should be using the <audio> element. attributes balance this attribute defines a number between -10,000 and +10,000 that determines how the volume will be divided between the speakers. loop this attribute indicates the number of times a sound is to be played and either has a numeric value or the
keyword infinite. src this attribute specifies the url of the sound file to be played, which must be one of the following types: .wav, .au, or .mid. volume this attribute defines a number between -10,000 and 0 that determines the loudness of a page's background sound. example <bgsound src="sound1.mid"> <bgsound src="sound2.au" loop="infinite"> usage notes historically, the <embed> element ...
<button>: The Button element - HTML: Hypertext Markup Language
ttribute specifies that the form is not to be validated when it is submitted. if this attribute is specified, it overrides the novalidate attribute of the button's form owner. this attribute is also available on <input type="image"> and <input type="submit"> elements. formtarget html5 if the button is a submit button, this attribute is a author-defined name or standardized, underscore-prefixed
keyword indicating where to display the response from submitting the form. this is the name of, or
keyword for, a browsing context (a tab, window, or <iframe>). if this attribute is specified, it overrides the target attribute of the button's form owner. the following
keywords have special meanings: _self: load the response into the same browsing context as the current one. this is the default if...
<form> - HTML: Hypertext Markup Language
is boolean attribute indicates that the form shouldn't be validated when submitted. if this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form. target indicates where to display the response after submitting the form. in html 4, this is the name/
keyword for a frame. in html5, it is a name/
keyword for a browsing context (for example, tab, window, or iframe). the following
keywords have special meanings: _self (default): load into the same browsing context as the current one. _blank: load into a new unnamed browsing context. _parent: load into the parent browsing context of the current one. if no parent, behaves the same as _self. _t...
<hgroup> - HTML: Hypertext Markup Language
responding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. usage notes the <hgroup> element has been removed from the html5 (w3c) specification, but it still is in the whatwg version of html. it is partially implemented in most browsers, though, so is unlikely to go away. however, given that a
key purpose of the <hgroup> element is to affect how headings are displayed by the outline algorithm defined in the html specification—but the html outline algorithm is not implemented in any browsers—then the <hgroup> semantics are in practice only theoretical. so the html5 (w3c) specification provides advice on how to mark up subheadings, subtitles, alternative titles and taglines without usin...
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
t in the frame. the value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions: allow-downloads-without-user-activation : allows for downloads to occur without a gesture from the user. allow-downloads : allows for downloads to occur with a gesture from the user. allow-forms: allows the resource to submit forms. if this
keyword is not used, form submission is blocked. allow-modals: lets the resource open modal windows. allow-orientation-lock: lets the resource lock the screen orientation. allow-pointer-lock: lets the resource use the pointer lock api. allow-popups: allows popups (such as window.open(), target="_blank", or showmodaldialog()). if this
keyword is not used, the popup will silently fail to open. ...
<input type="date"> - HTML: Hypertext Markup Language
support will become ubiquitous, and this problem will fade away. basic uses of date the simplest use of <input type="date"> involves one <input> combined with its <label>, as seen below: <form action="https://example.com"> <label> enter your birthday: <input type="date" name="bday"> </label> <p><button>submit</button></p> </form> this html submits the entered date under the
key bday to https://example.com — resulting in a url like https://example.com/?bday=1955-06-08. setting maximum and minimum dates you can use the min and max attributes to restrict the dates that can be chosen by the user. in the following example, we set a minimum date of 2017-04-01 and a maximum date of 2017-04-30: <form> <label for="party">choose your preferred party date: <input type="...
<input type="hidden"> - HTML: Hypertext Markup Language
a fake form, pretending to be a bank, and emailing the form to unsuspecting users to trick them into transferring money to the wrong place. this kind of attack is called a cross site request forgery (csrf); pretty much any reputable server-side framework uses hidden secrets to prevent such attacks. as stated previously, placing the secret in a hidden input doesn't inherently make it secure. the
key's composition and encoding would do that. the value of the hidden input is that it keeps the secret associated with the data and automatically includes it when the form is sent to the server. you need to use well-designed secrets to actually secure your website. validation hidden inputs don't participate in constraint validation; they have no real value to be constrained. examples let's look...
<input type="number"> - HTML: Hypertext Markup Language
ers; see bug 1398528. note: it's crucial to remember that a user can tinker with your html behind the scenes, so your site must not use simple client-side validation for any security purposes. you must verify on the server side any transaction in which the provided value may have any security implications of any kind. mobile browsers further help with the user experience by showing a special
keyboard more suited for entering numbers when the user tries to enter a value. the following screenshot is taken from firefox for android: a simple number input in its most basic form, a number input can be implemented like this: <label for="ticketnum">number of tickets you would like to buy:</label> <input id="ticketnum" type="number" name="ticketnum" value="0"> a number input is considered...
<input type="radio"> - HTML: Hypertext Markup Language
dius and a transition to create a nice animating radio selection. notice also how the :checked pseudo-class is used to specify the styles for the radio button's appearance when selected. compatibility note: if you wish to use the appearance property, you should test it very carefully. although it is supported in most modern browsers, its implementation varies widely. in older browsers, even the
keyword none does not have the same effect across different browsers, and some do not support it at all. the differences are smaller in the newest browsers. notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. in addition, the style and coloring of the legend and submit button are customized to have strong contrast. this might not...
<map> - HTML: Hypertext Markup Language
alue. examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html"> <area shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result expected live example output the live example above should appear similar to the following images (when using your
keyboard tab
key): for the left.html link: for the right.html link specifications specification status comment html living standardthe definition of '<map>' in that specification. living standard html5the definition of '<map>' in that specification. recommendation html 4.01 specificationthe definition of '<map>' in that specification...
<menu> - HTML: Hypertext Markup Language
state, which represents a toolbar consisting of a series of commands for user interaction. this might be in the form of an unordered list of <li> elements, or, if the element has no <li> element children, flow content describing available commands. this value is the default if the attribute is missing. usage notes the <menu> and <ul> elements both represent an unordered list of items. the
key difference is that <ul> primarily contains items for display, whilst <menu> is intended for interactive items, to act on. an html menu can be used to create context menus (typically activated by right-clicking another element) or toolbars. context menus consist of a <menu> element which contains <menuitem> elements for each selectable option in the menu, <menu> elements for submenus within the ...
Standard metadata names - HTML: Hypertext Markup Language
in information like the document name or a status. simple web pages shouldn't define an application-name. author: the name of the document's author. description: a short and accurate summary of the content of the page. several browsers, like firefox and opera, use this as the default description of bookmarked pages. generator: the identifier of the software that generated the page.
keywords: words relevant to the page's content separated by commas. referrer: controls the http referer header for to requests sent from the document: values for the content attribute of <meta name="referrer"> no-referrer do not send a http referer header. origin send the origin of the document. no-referrer-when-downgrade send the full...
<samp>: The Sample Output element - HTML: Hypertext Markup Language
s of the sample text such as the shell prompts and the cursor. note also the use of <kbd> to represent the command the user entered at the prompt in the sample text. css the css that achieves the appearance we want is: .prompt { color: #b00; } samp > kbd { font-weight: bold; } .cursor { color: #00b; } this simply gives the prompt and cursor fairly subtle colorization and emboldens the
keyboard input within the sample text. result the resulting output is this: specifications specification status comment html living standardthe definition of '<samp>' in that specification. living standard html5the definition of '<samp>' in that specification. recommendation html 4.01 specificationthe definition of '<samp>' in that spe...
<title>: The Document Title element - HTML: Hypertext Markup Language
or a term-definition pairing for glossary or reference-style pages. search engines typically display about the first 55–60 characters of a page title. text beyond that may be lost, so try not to have titles longer than that. if you must use a longer title, make sure the important parts come earlier and that nothing critical is in the part of the title that is likely to be dropped. don't use "
keyword blobs." if your title is just a list of words, algorithms often reduce your page's position in the search results. try to make sure your titles are as unique as possible within your own site. duplicate—or near-duplicate—titles can contribute to inaccurate search results. example <title>awesome interesting stuff</title> this example establishes a page whose title (as displayed at the...
<tr>: The Table Row element - HTML: Hypertext Markup Language
lign property to establish left, center, right, or justify alignment for the row's cells. to apply character-based alignment, set the css text-align property to the alignment character (such as "." or ","). bgcolorobsolete since html5 a domstring specifying a color to apply to the backgrounds of each of the row's cells. this can be either an hexadecimal #rrggbb or #rgb value or a color
keyword. omitting the attribute or setting it to null in javascript causes the row's cells to inherit the row's parent element's background color. the <tr> element should be styled using css. to give a similar effect as the bgcolor attribute, use the css property background-color. charobsolete since html5 a domstring which sets the character to align the cells in each of the row's colu...
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
ling errors, applying a proper name mark to denote proper names in chinese text, and other forms of annotation. you should not use <u> to simply underline text for presentation purposes, or to denote titles of books. other elements to consider using in most cases, you should use an element other than <u>, such as: <em> to denote stress emphasis <b> to draw attention to text <mark> to mark
key words or phrases <strong> to indicate that text has strong importance <cite> to mark the titles of books or other publications <i> to denote technical terms, transliterations, thoughts, or names of vessels in western texts to provide textual annotations (as opposed to the non-textual annotations created with <u>), use the <ruby> element. to apply an underlined appearance without any semanti...
<var>: The Variable element - HTML: Hypertext Markup Language
element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. usage notes related elements other elements that are used in contexts in which <var> is commonly used include: <code>: the html code element <kbd>: the html
keyboard input element <samp>: the html sample output element if you encounter code that is mistakenly using <var> for style purposes rather than semantic purposes, you should either use a <span> with appropriate css or, an appropriate semantic element among the following: <em> <i> <q> default style most browsers apply font-style to "italic" when rendering <var>. this can be overridden in ...
<video>: The Video Embed element - HTML: Hypertext Markup Language
uthentication. if the server does not give credentials to the origin site (through access-control-allow-credentials: http header), the image will be tainted and its usage restricted. when not present, the resource is fetched without a cors request (i.e. without sending the origin: http header), preventing its non-tainted used in <canvas> elements. if invalid, it is handled as if the enumerated
keyword anonymous was used. see cors settings attributes for additional information. currenttime reading currenttime returns a double-precision floating-point value indicating the current playback position of the media specified in seconds. if the media has not started playing yet, the time offset at which it will begin is returned. setting currenttime sets the current playback position to the gi...
dir - HTML: Hypertext Markup Language
the auto value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database. browsers might allow users to change the directionality of <input> and <textarea>s in order to assist with authoring content. chrome and safari provide a directionality option in the contextual menu of input fields while internet explorer and edge use the
key combinations ctrl + left shift and ctrl + right shift. firefox uses ctrl/cmd + shift + x but does not update the dir attribute value. specifications specification status comment html living standardthe definition of 'dir' in that specification. living standard no change from latest snapshot, html 5.1 html 5.1the definition of 'dir' in that specification. ...
itemtype - HTML: Hypertext Markup Language
temscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active. google and other major search engines support the schema.org vocabulary for structured data. this vocabulary defines a standard set of type names and property names. for example, musicevent indicates a concert performance, with startdate and location properties specifying the concert's
key details. in this case, musicevent would be the url used by itemtype, with startdate and location as itemprop's which musicevent defines. note: more about itemtype attributes can be found at http://schema.org/thing the itemtype attribute must have a value that is an unordered set of unique tokens which are case-sensitive, each is a valid and absolute url, and all defined to use the same voca...
title - HTML: Hypertext Markup Language
e empty string, it means its ancestors' titles are irrelevant and shouldn't be used in the tooltip for this element. html <div title="cooltip"> <p>hovering here will show “cooltip”.</p> <p title="">hovering here will show nothing.</p> </div> result accessibility concerns use of the title attribute is highly problematic for: people using touch-only devices people navigating with
keyboards people navigating with assistive technology such as screen readers or magnifiers people experiencing fine motor control impairment people with cognitive concerns this is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page. if a tooltip effect is desired, it is better to use a more accessible technique that can be a...
Link types: noopener - HTML: Hypertext Markup Language
this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property (see about rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well). note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab. ...
Microdata - HTML: Hypertext Markup Language
roperty to an item, the itemprop attribute is used on one of the item's descendants. vocabularies google and other major search engines support the schema.org vocabulary for structured data. this vocabulary defines a standard set of type names and property names, for example, schema.org music event indicates a concert performance, with startdate and location properties to specify the concert's
key details. in this case, schema.org music event would be the url used by itemtype and startdate and location would be itemprop's that schema.org music event defines. note: more about itemtype attributes can be found at http://schema.org/thing microdata vocabularies provide the semantics or meaning of an item. web developers can design a custom vocabulary or use vocabularies available on the web...
Choosing between www and non-www URLs - HTTP
irst substring that follows the initial http:// or https:// is called the domain name. this domain name is hosted on a server where the document resides. a server isn't necessarily a physical machine: several servers can reside on the same physical machine. or, one server can be handled by several machines, cooperating to produce the answer or balancing the load of the requests between them. the
key point is that semantically one domain name represents one single server. so, do i have to choose one or the other for my web site? yes, you need to choose one and stick with it. the choice of which one to have as your canonical location is yours, but if you choose one, stick with it. it will make your website appear more consistent to your users and to search engines. this includes always lin...
HTTP conditional requests - HTTP
l requests can be used: by adding if-none-match with the special value of '*', representing any etag. the request will succeed, only if the resource didn't exist before: if-none-match will only work with http/1.1 (and later) compliant servers. if unsure if the server will be compliant, you need first to issue a head request to the resource to check this. conclusion conditional requests are a
key feature of http, and allow the building of efficient and complex applications. for caching or resuming downloads, the only work required for webmasters is to configure the server correctly; setting correct etags in some environments can be tricky. once achieved, the browser will serve the expected conditional requests. for locking mechanisms, it is the opposite: web developers need to issue a re...
Connection management in HTTP/1.x - HTTP
in http/1.x, there are several models: short-lived connections, persistent connections, and http pipelining. http mostly relies on tcp for its transport protocol, providing a connection between the client and the server. in its infancy, http used a single model to handle such connections. these connections were short-lived: a new one created each time a request needed sending, and closed once the answer had been received. this simple model held an innate limitation on performance: opening each tcp connection is a resource-consuming operation. several messages must be exchanged between the client and the server. ...
Using HTTP cookies - HTTP
against cross-site request forgery attacks (csrf). it takes three possible values: strict, lax, and none. with strict, the cookie is sent only to the same site as the one that originated it; lax is similar, with an exception for when the user navigates to a url from an external site, such as by following a link; none has no restrictions on cross-site requests. here is an example: set-cookie: my
key=myvalue; samesite=strict the values of samesite attribute are case-insensitive. browsers are migrating to have cookies default to samesite=lax. if a cookie is needed to be sent cross-origin, opt out of the samesite restriction by using the none directive. the none directive requires that the secure attribute also be used. cookie prefixes the design of the cookie mechanism is such that a ser...
CSP: base-uri - HTTP
ocument directive default-src fallback no. not setting this allows any url. syntax one or more sources can be allowed for the base-uri policy: content-security-policy: base-uri <source>; content-security-policy: base-uri <source> <source>; sources while this directive uses the same arguments as other csp directives, some of them don’t make sense for `<base>`, such as the
keywords 'unsafe-inline' and 'strict-dynamic' <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source...
Feature-Policy: encrypted-media - HTTP
the http feature-policy header encrypted-media directive controls whether the current document is allowed to use the encrypted media extensions api (eme). when this policy is enabled, the promise returned by navigator.requestmedia
keysystemaccess() will reject with a domexception. syntax feature-policy: encrypted-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as th...
Sec-WebSocket-Accept - HTTP
the sec-websocket-accept header is used in the websocket opening handshake. it would appear in the response headers. that is, this is header is sent from server to client to inform that server is willing to initiate a websocket connection. header type response header forbidden header name no syntax sec-websocket-accept: <hashed
key> directives <hashed
key> the server takes the value of the sec-websocket-
key sent in the handshake request, appends 258eafa5-e914-47da-95ca-c5ab0dc85b11, takes sha-1 of the new value, and is then base64 encoded. examples sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo= specification specification title rfc 6455, section 11.3.3: sec-websocket-accept the websocket protocol ...
HTTP Messages - HTTP
more efficient underlying tcp connections. http frames are now transparent to web developers. this is an additional step in http/2, between http/1.1 messages and the underlying transport protocol. no changes are needed in the apis used by web developers to utilize http frames; when available in both the browser and the server, http/2 is switched on and used. conclusion http messages are the
key in using http; their structure is simple, and they are highly extensible. the http/2 framing mechanism adds a new intermediate layer between the http/1.x syntax and the underlying transport protocol, without fundamentally modifying it: building upon proven mechanisms. ...
Redirections in HTTP - HTTP
edirected to https://www.example.com/some-page) redirectmatch does the same, but takes a regular expression to define a collection of affected urls: redirectmatch ^/images/(.*)$ https://images.example.com/$1 all documents in the images/ directory will redirect to a different domain. if you don't want a temporary redirect, an extra parameter (either the http status code to use or the permanent
keyword) can be used to set up a different redirect: redirect permanent / https://www.example.com # …acts the same as: redirect 301 / https://www.example.com the mod_rewrite module can also create redirects. it is more flexible, but a bit more complex. nginx in nginx, you create a specific server block for the content you want to redirect: server { listen 80; server_name example.com; retur...
Control flow and error handling - JavaScript
dmonthno" and the statements in the catch block set the monthname variable to 'unknown'. function getmonthname(mo) { mo = mo - 1; // adjust month number for array index (1 = jan, 12 = dec) let months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; if (months[mo]) { return months[mo]; } else { throw 'invalidmonthno'; // throw
keyword is used here } } try { // statements to try monthname = getmonthname(mymonth); // function could throw exception } catch (e) { monthname = 'unknown'; logmyerrors(e); // pass exception object to error handler (i.e. your own function) } the catch block you can use a catch block to handle all exceptions that may be generated in the try block. catch (catchid) { statements } the c...
Functions - JavaScript
me obvious relationship between the input and the output. to use a function, you must define it somewhere in the scope from which you wish to call it. see also the exhaustive reference chapter about javascript functions to get to know the details. defining functions function declarations a function definition (also called a function declaration, or function statement) consists of the function
keyword, followed by: the name of the function. a list of parameters to the function, enclosed in parentheses and separated by commas. the javascript statements that define the function, enclosed in curly brackets, {...}. for example, the following code defines a simple function named square: function square(number) { return number * number; } the function square takes one parameter, call...
Indexed collections - JavaScript
ay so that myarray = ["fire", "rain", "wind"] sort() can also take a callback function to determine how array elements are compared. the sort method (and others below) that take a callback are known as iterative methods, because they iterate over the entire array in some fashion. each one takes an optional second argument called thisobject. if provided, thisobject becomes the value of the this
keyword inside the body of the callback function. if not provided, as with other cases where a function is invoked outside of an explicit object context, this will refer to the global object (window) when using arrow function as callback, or undefined when using normal function as callback. the callback function is called with two arguments, that are array's elements. the function below compares tw...
Introduction - JavaScript
technologies that are used when programming with javascript, consult the article javascript technologies overview. javascript documentation versus the ecmascript specification the ecmascript specification is a set of requirements for implementing ecmascript. it is useful if you want to implement standards-compliant language features in your ecmascript implementation or engine (such as spidermon
key in firefox, or v8 in chrome). the ecmascript document is not intended to help script programmers. use the javascript documentation for information when writing scripts. the ecmascript specification uses terminology and syntax that may be unfamiliar to a javascript programmer. although the description of the language may differ in ecmascript, the language itself remains the same. javascript supp...
Numbers and dates - JavaScript
timestamp being the number of seconds since january 1, 1970, 00:00:00. the date object range is -100,000,000 days to 100,000,000 days relative to 01 january, 1970 utc. to create a date object: var dateobjectname = new date([parameters]); where dateobjectname is the name of the date object being created; it can be a new object or a property of an existing object. calling date without the new
keyword returns a string representing the current date and time. the parameters in the preceding syntax can be any of the following: nothing: creates today's date and time. for example, today = new date();. a string representing a date in the following form: "month day, year hours:minutes:seconds." for example, var xmas95 = new date("december 25, 1995 13:30:00"). if you omit hours, minutes, or s...
Using Promises - JavaScript
ult); }) .then(newresult => dothirdthing(newresult)) .then(() => dofourththing()) .catch(error => console.error(error)); note that () => x is short for () => { return x; }. now we have a single deterministic chain with proper error handling. using async/await addresses most, if not all of these problems—the tradeoff being that the most common mistake with that syntax is forgetting the await
keyword. when promises and tasks collide if you run into situations in which you have promises and tasks (such as events or callbacks) which are firing in unpredictable orders, it's possible you may benefit from using a microtask to check status or balance out your promises when promises are created conditionally. if you think microtasks may help solve this problem, see the microtask guide to lear...
JavaScript Guide - JavaScript
pressions and operators assignment & comparisons arithmetic operators bitwise & logical operators conditional (ternary) operator numbers and dates number literals number object math object date object text formatting string literals string object template literals internationalization regular expressions indexed collections arrays typed arrays
keyed collections map weakmap set weakset working with objects objects and properties creating objects defining methods getter and setter details of the object model prototype-based oop creating object hierarchies inheritance promises guarantees chaining error propagation composition timing iterators and generators iterators iterables ...
JavaScript technologies overview - JavaScript
s, including the dom (document object model). javascript, the core language (ecmascript) the core language of javascript is standardized by the ecma tc39 committee as a language named ecmascript. this core language is also used in non-browser environments, for example in node.js. what falls under the ecmascript scope? among other things, ecmascript defines: language syntax (parsing rules,
keywords, control flow, object literal initialization, ...) error handling mechanisms (throw, try...catch, ability to create user-defined error types) types (boolean, number, string, function, object, ...) the global object. in a browser, this global object is the window object, but ecmascript only defines the apis not specific to browsers, e.g. parseint, parsefloat, decodeuri, encodeuri... a pro...
JavaScript language resources - JavaScript
has not been finalized yet. see wikipedia ecmascript entry for more information on ecmascript history. you can participate in or just track the work on the next revisions of the ecmascript language specification, code-named "harmony", and the ecmascript internationalization api specification via public wiki and the es-discuss mailing list linked from ecmascript.org. implementations spidermon
key - the javascript engine used in various mozilla products, including firefox; rhino - the javascript engine is written in java; tamarin - the actionscript virtual machine (used in the adobe® flash® player); other implementations (wikipedia). ...
About the JavaScript reference - JavaScript
ers: standard built-in objects this chapter documents all the javascript standard built-in objects, along with their methods and properties. statements and declarations javascript applications consist of statements with an appropriate syntax. a single statement may span multiple lines. multiple statements may occur on a single line if each statement is separated by a semicolon. this isn't a
keyword, but a group of
keywords. expressions and operators this chapter documents all the javascript language operators, expressions and
keywords. functions chapter about javascript functions. classes chapter about javascript classes introduced in ecmascript 2015. errors chapter about specific errors, exceptions and warnings thrown by javascript. new in javascript chapter about javascript ...
The legacy Iterator protocol - JavaScript
for future-facing usages, consider using for..of loops and the iterator protocol. the deprecated firefox-only iterator protocol firefox, prior to version 26 implemented another iterator protocol that is similar to the standard es2015 iterator protocol. an object is an legacy iterator when it implements a next() method with the following semantics, and throws stopiteration at the end of iteration. property value next a zero arguments function that returns an value. ...
Deprecated and obsolete features - JavaScript
you should use toisostring instead of the deprecated togmtstring method in new code. tolocaleformat is deprecated. functions expression closures are deprecated. use regular functions or arrow functions instead. proxy proxy.create and proxy.createfunction are deprecated. use proxy instead. the following traps are obsolete: hasown (bug 980565, firefox 33). getenumerableproperty
keys (bug 783829, firefox 37) getownpropertynames (bug 1007334, firefox 33)
keys (bug 1007334, firefox 33) escape sequences octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals. the escape and unescape functions are deprecated. use encodeuri, encodeuricomponent, decodeuri or decodeuricomponent to encode and de...
TypeError: cyclic object value - JavaScript
hat supports them (e.g. cycle.js) or implement a solution by yourself, which will require finding and replacing (or removing) the cyclic references by serializable values. ...
TypeError: invalid assignment to const "x" - JavaScript
t "x" (firefox) typeerror: assignment to constant variable. (chrome) typeerror: assignment to const (edge) typeerror: redeclaration of const 'x' (ie) error type typeerror what went wrong? a constant is a value that cannot be altered by the program during normal execution. it cannot change through re-assignment, and it can't be redeclared. in javascript, constants are declared using the const
keyword. examples invalid redeclaration assigning a value to the same constant name in the same block-scope will throw. const columns = 80; // ... columns = 120; // typeerror: invalid assignment to const `columns' fixing the error there are multiple options to fix this error. check what was intended to be achieved with the constant in question. rename if you meant to declare another constan...
SyntaxError: JSON.parse: bad parsing - JavaScript
ected non-digit syntaxerror: json.parse: missing digits after decimal point syntaxerror: json.parse: unterminated fractional number syntaxerror: json.parse: missing digits after exponent indicator syntaxerror: json.parse: missing digits after exponent sign syntaxerror: json.parse: exponent part is missing a number syntaxerror: json.parse: unexpected end of data syntaxerror: json.parse: unexpected
keyword syntaxerror: json.parse: unexpected character syntaxerror: json.parse: end of data while reading object contents syntaxerror: json.parse: expected property name or '}' syntaxerror: json.parse: end of data when ',' or ']' was expected syntaxerror: json.parse: expected ',' or ']' after array element syntaxerror: json.parse: end of data when property name was expected syntaxerror: json.parse: ex...
SyntaxError: Malformed formal parameter - JavaScript
xpected {x} (edge) syntaxerror: malformed formal parameter (firefox) error type syntaxerror what went wrong? there is a function() constructor with at least two arguments passed in the code. the last argument is the source code for the new function you're creating. all the rest make up your new function's argument list. the argument list is invalid somehow. perhaps you accidentally picked a
keyword like if or var as an argument name, or perhaps there's some stray punctuation in your argument list. or maybe you accidentally passed an invalid value, like a number or object. ok, that fixed my problem. but why didn't you say that in the first place? admittedly the wording in the error message is slightly strange. "formal parameter" is a fancy way of saying "function argument". and we use ...
SyntaxError: missing = in const declaration - JavaScript
onst must be initalized (edge) syntaxerror: missing = in const declaration (firefox) syntaxerror: missing initializer in const declaration (chrome) error type syntaxerror what went wrong? a constant is a value that cannot be altered by the program during normal execution. it cannot change through re-assignment, and it can't be redeclared. in javascript, constants are declared using the const
keyword. an initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared (which makes sense, given that it can't be changed later). examples missing const initializer unlike var or let, you must specify a value for a const declaration. this throws: const columns; // syntaxerror: missing = in const declaration fixing the error there are...
TypeError: "x" is not a non-null object - JavaScript
null is not an object and won't work. you must provide a proper object in the given situation. examples property descriptor expected when methods like object.create() or object.defineproperty() and object.defineproperties() are used, the optional descriptor parameter expects a property descriptor object. providing no object (like just a number), will throw an error: object.defineproperty({}, '
key', 1); // typeerror: 1 is not a non-null object object.defineproperty({}, '
key', null); // typeerror: null is not a non-null object a valid property descriptor object might look like this: object.defineproperty({}, '
key', { value: 'foo', writable: false }); weakmap and weakset objects require object
keys weakmap and weakset objects store object
keys. you can't use other types as
keys. var ...
SyntaxError: missing variable name - JavaScript
our code. probably a comma is wrong somewhere or you struggled with coming up with a name. totally understandable! naming things is so hard. check to ensure the previous lines / declaration does not end with a comma instead of a semi-colon. examples missing a variable name var = "foo"; it's tough coming up with good variable names. we all have been there. var ohgodwhy = "foo"; reserved
keywords can't be variable names there are a few variable names that are reserved
keywords. you can't use these. sorry :( var debugger = "whoop"; // syntaxerror: missing variable name declaring multiple variables pay special attention to commas when declaring multiple variables. is there an excess comma? did you accidentally add commas instead of semicolons? var x, y = "foo", var x, = "foo" va...
RangeError: precision is out of range - JavaScript
(chrome) error type rangeerror what went wrong? there was an out of range precision argument in one of these methods: number.prototype.toexponential() number.prototype.tofixed() number.prototype.toprecision() the allowed range for these methods is usually between 0 and 20 (or 21). however, the ecmascript specification allows to extend this range. ...
SyntaxError: redeclaration of formal parameter "x" - JavaScript
using let is not allowed in javascript. examples redeclared argument in this case, the variable "arg" redeclares the argument. function f(arg) { let arg = 'foo'; } // syntaxerror: redeclaration of formal parameter "arg" if you want to change the value of "arg" in the function body, you can do so, but you do not need to declare the same variable again. in other words: you can omit the let
keyword. if you want to create a new variable, you need to rename it as conflicts with the function parameter already. function f(arg) { arg = 'foo'; } function f(arg) { let bar = 'foo'; } ...
SyntaxError: "x" is a reserved identifier - JavaScript
the javascript exception "variable is a reserved identifier" occurs when reserved
keywords are used as identifiers. message syntaxerror: the use of a future reserved word for an identifier is invalid (edge) syntaxerror: "x" is a reserved identifier (firefox) syntaxerror: unexpected reserved word (chrome) error type syntaxerror what went wrong? reserved
keywords will throw in if they are used as identifiers. these are reserved in strict mode and sloppy mode: enum the following are only reserved when they are found in strict mode code: implements interface let package private protected public static examples strict and non-strict reserved
keywords the enum identifier is generally reserved. var enum = { red: 0, green: 1, blue: 2 }; // syntaxerror: enum is a reserved id...
RangeError: repeat count must be less than infinity - JavaScript
e.repeat() method has been used. it has a count parameter indicating the number of times to repeat the string. it must be between 0 and less than positive infinity and cannot be a negative number. the range of allowed values can be described like this: [0, +∞). the resulting string can also not be larger than the maximum string size, which can differ in javascript engines. in firefox (spidermon
key) the maximum string size is 228 -1 (0xfffffff). examples invalid cases 'abc'.repeat(infinity); // rangeerror 'a'.repeat(2**28); // rangeerror valid cases 'abc'.repeat(0); // '' 'abc'.repeat(1); // 'abc' 'abc'.repeat(2); // 'abcabc' 'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) ...
getter - JavaScript
s removed from the object and re-added, but implicitly as a data property this time. finally, the value gets returned. get notifier() { delete this.notifier; return this.notifier = document.getelementbyid('bookmarked-notification-anchor'); }, for firefox code, see also the xpcomutils.jsm code module, which defines the definelazygetter() function. get vs. defineproperty while using the get
keyword and object.defineproperty() have similar results, there is a subtle difference between the two when used on classes. when using get the property will be defined on the instance's prototype, while using object.defineproperty() the property will be defined on the instance it is applied to. class example { get hello() { return 'world'; } } const obj = new example(); console.log(obj.he...
Array.prototype.reduce() - JavaScript
) { allnames[name]++ } else { allnames[name] = 1 } return allnames }, {}) // countednames is: // { 'alice': 2, 'bob': 1, 'tiff': 1, 'bruce': 1 } grouping objects by a property let people = [ { name: 'alice', age: 21 }, { name: 'max', age: 20 }, { name: 'jane', age: 20 } ]; function groupby(objectarray, property) { return objectarray.reduce(function (acc, obj) { let
key = obj[property] if (!acc[
key]) { acc[
key] = [] } acc[
key].push(obj) return acc }, {}) } let groupedpeople = groupby(people, 'age') // groupedpeople is: // { // 20: [ // { name: 'max', age: 20 }, // { name: 'jane', age: 20 } // ], // 21: [{ name: 'alice', age: 21 }] // } bonding arrays contained in an array of objects using the spread operator and initialva...
Array.prototype.entries() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax array.entries() return value a new array iterator object. ...
Array.from() - JavaScript
array from a string array.from('foo'); // [ "f", "o", "o" ] array from a set const set = new set(['foo', 'bar', 'baz', 'foo']); array.from(set); // [ "foo", "bar", "baz" ] array from a map const map = new map([[1, 2], [2, 4], [4, 8]]); array.from(map); // [[1, 2], [2, 4], [4, 8]] const mapper = new map([['1', 'a'], ['2', 'b']]); array.from(mapper.values()); // ['a', 'b']; array.from(mapper.
keys()); // ['1', '2']; array from an array-like object (arguments) function f() { return array.from(arguments); } f(1, 2, 3); // [ 1, 2, 3 ] using arrow functions and array.from() // using an arrow function as the map function to // manipulate the elements array.from([1, 2, 3], x => x + x); // [2, 4, 6] // generate a sequence of numbers // since the array is initialized with `undefined` o...
Array.prototype.lastIndexOf() - JavaScript
if you intend to use this in real-world applications, you may be able to calculate from with less complicated code if you ignore those cases. examples using lastindexof the following example uses lastindexof to locate values in an array. var numbers = [2, 5, 9, 2]; numbers.lastindexof(2); // 3 numbers.lastindexof...
BigInt.prototype.toLocaleString() - JavaScript
chinese decimal console.log(bigint.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六,七八九,一二三,四五六,七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(bigint.tolocalestring(['ban', 'id'])); // → 123.456.789.123.456.789 usi...
BigInt - JavaScript
be careful coercing values back and forth, however, as the precision of a bigint may be lost when it is coerced to a number. type information when tested against typeof, a bigint will give "bigint": typeof 1n === 'bigint' ...
Date.parse() - JavaScript
eated as a local date of 25 november, 2015 in firefox 30 and an invalid date in safari 7. however, if the string is recognized as an iso format string and it contains invalid values, it will return nan in all browsers compliant with es5 and later: // iso string with invalid values new date('2014-25-23').toisostring(); // throws "rangeerror: invalid date" in all es5-compliant browsers spidermon
key's implementation-specific heuristic can be found in jsdate.cpp. the string "10 06 2014" is an example of a non-conforming iso format and thus falls back to a custom routine. see also this rough outline on how the parsing works. new date('10 06 2014'); will be treated as a local date of 6 october, 2014, and not 10 june, 2014. other examples: new date('foo-bar 2014').tostring(); // returns: "i...
Date.prototype.toDateString() - JavaScript
ject, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax dateobj.todatestring() return value a string representing the date portion of the given date object in human readable form in english. description date instances refer to a specific point in time. calling tostring() will return the date formatted in a human readable form in english. in spidermon
key, this consists of the date portion (day, month, and year) followed by the time portion (hours, minutes, seconds, and time zone). sometimes it is desirable to obtain a string of the time portion; such a thing can be accomplished with the totimestring() method. the todatestring() method is especially useful because compliant engines implementing ecma-262 may differ in the string obtained from tost...
Date.prototype.toTimeString() - JavaScript
e clone https://github.com/mdn/interactive-examples and send us a pull request. syntax dateobj.totimestring() return value a string representing the time portion of the given date in human readable form in american english. description date instances refer to a specific point in time. calling tostring() will return the date formatted in a human readable form in american english. in spidermon
key, this consists of the date portion (day, month, and year) followed by the time portion (hours, minutes, seconds, and time zone). sometimes it is desirable to obtain a string of the time portion; such a thing can be accomplished with the totimestring() method. the totimestring() method is especially useful because compliant engines implementing ecma-262 may differ in the string obtained from tost...
Error() constructor - JavaScript
inenumber optional the value for the linenumber property on the created error object. defaults to the line number containing the error() constructor invocation. examples function call or new construction when error is used like a function -- without new, it will return an error object. therefore, a mere call to error will produce the same output that constructing an error object via the new
keyword would. // this... const x = error('i was created using a function call!') // ...has the same functionality as this. const y = new error('i was constructed via the "new"
keyword!') specifications specification ecmascript (ecma-262)the definition of 'error constructor' in that specification. ...
Error.prototype.message - JavaScript
the message property combined with the name property is used by the error.prototype.tostring() method to create a string representation of the error. by default, the message property is an empty string, but this behavior can be overridden for an instance by specifying a message as the first argument to the error constructor. ...
EvalError - JavaScript
r object indicates an error regarding the global eval() function. this exception is not thrown by javascript anymore, however the evalerror object remains for compatibility. constructor evalerror() creates a new evalerror object. instance properties evalerror.prototype.message error message. although ecma-262 specifies that evalerror should provide its own message property, in spidermon
key, it inherits error.prototype.message. evalerror.prototype.name error name. inherited from error. evalerror.prototype.filename path to file that raised this error. inherited from error. evalerror.prototype.linenumber line number in file that raised this error. inherited from error. evalerror.prototype.columnnumber column number in line that raised this error. inherited from error. evalerr...
Intl.DateTimeFormat() constructor - JavaScript
l.datetimeformat([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings. to use the browser's default locale, omit this argument or pass undefined. unicode extension are supported (for example "en-us-u-ca-buddhist"). for the general form and interpretation of the locales argument, see the intl page. the following unicode extension
keys are allowed: nu numbering system. possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt". ca calendar. possible values include: "buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "i...
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
a new object with properties reflecting the locale and date and time formatting options computed during the initialization of the given datetimeformat object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 language tag that led to this locale, the
key-value pairs that were requested and are supported for this locale are included in locale. calendar e.g. "gregory" numberingsystem the values requested using the unicode extension
keys "ca" and "nu" or filled in as default values. timezone the value provided for this property in the options argument; undefined (representing the runtime's default time zone) if none was provided. warning: appl...
Intl.DisplayNames() constructor - JavaScript
ribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax new intl.displaynames([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. the following unicode extension
key is allowed: nu the numbering system to be used. possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt". options optional an object with some or all of the following properties: localematcher the locale matching algorith...
Intl.DisplayNames.prototype.resolvedOptions() - JavaScript
e an object with properties reflecting the locale and formatting options computed during the construction of the given displaynames object. description the object returned by resolvedoptions() has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 language tag that led to this locale, the
key-value pairs that were requested and are supported for this locale are included in locale. style the value provided for this property in the options argument of the constructor or the default value ("long"). its value is either "long", "short", or "narrow". type the value provided for this property in the options argument of the constructor or the default value ("language"). its value is eithe...
Intl.ListFormat.prototype.resolvedOptions() - JavaScript
lue an object with properties reflecting the locale and formatting options computed during the construction of the given listformat object. description the object returned by resolvedoptions() has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 language tag that led to this locale, the
key-value pairs that were requested and are supported for this locale are included in locale. style the value provided for this property in the options argument of the constructor or the default value ("long"). its value is either "long", "short", or "narrow". type the value provided for this property in the options argument of the constructor or the default value ("conjunction"). its value is ei...
Intl.Locale() constructor - JavaScript
the intl.locale constructor is a standard built-in property of the intl object that represents a unicode locale identifier. syntax new intl.locale(tag [, options]) parameters tag the unicode locale identifier string. options an object that contains configuration for the locale.
keys are unicode locale tags, values are valid unicode tag values. examples basic usage at its very simplest, the intl.locale constructor takes a locale identifier string as its argument: let us = new intl.locale('en-us'); using the locale constructor with an options object the constructor also takes an optional configuration object argument, which can contain any of several extension types. for example, set the hourcycle property of the configuration object to your desired hour cycle type, and then ...
Intl.Locale.prototype.collation - JavaScript
zhuyin pinyin ordering for latin, zhuyin order for bopomofo and cjk characters (used in chinese) examples like other locale subtags, the collation type can be added to the intl.locale object via the locale string, or a configuration object argument to the constructor. adding a collation type via the locale string in the unicode locale string spec, collation types are locale
key "extension subtags". these subtags add additional data about the locale, and are added to locale identifiers by using the -u extension. thus, the collation type can be added to the inital locale identifier string that is passed into the locale constructor. to add the collation type, first add the -u extension to the string. next, add the -co extension to indicate that you are adding a collation t...
Intl.Locale.prototype.hourCycle - JavaScript
rn. the 24 hour clock, with midnight starting at 24:00. examples these examples will show you how to add hour cycle data to your locale object. adding an hour cycle via the locale string in the unicode locale string spec, the hour cycle is a locale string "extension subtag". these subtags add additional data about the locale, and are added to locale identifiers by using the -u extension
key. thus, the hour cycle type can be added to the inital locale identifier string that is passed into the locale constructor. to add the hour cycle type, first add the -u extension
key to the string. next, add the -hc extension
key to indicate that you are adding an hour cycle. finally, add the hour cycle type to the string. let fr24hour = new intl.locale("fr-fr-u-hc-h23"); console.log(fr24hour.hou...
Intl.NumberFormat() constructor - JavaScript
ribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax new intl.numberformat([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. the following unicode extension
key is allowed: nu the numbering system to be used. possible values include: "adlm", "ahom", "arab", "arabext", "bali", "beng", "bhks", "brah", "cakm", "cham", "deva", "diak", "fullwide", "gong", "gonm", "gujr", "guru", "hanidec", "hmng", "hmnp", "java", "kali", "khmr", "knda", "lana", "lanatham", "laoo", "latn", "lepc", "limb", "mathbold", "mathdbl", "mathmono", "mathsanb", "mathsans", "mlym"...
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
urn value a new object with properties reflecting the locale and number formatting options computed during the initialization of the given numberformat object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 language tag that led to this locale, the
key-value pairs that were requested and are supported for this locale are included in locale. numberingsystem the value provided for this properties in the options argument, if present, or the value requested using the unicode extension
key "nu" or filled in as a default. notation the value provided for this property in the options argument, if present, or "standard filled in as a default. compa...
Intl.NumberFormat - JavaScript
chinese decimal console.log(new intl.numberformat('zh-hans-cn-u-nu-hanidec').format(number)); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(new intl.numberformat(['ban', 'id']).format(number)); // → 123.456,789 using options ...
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
turn value a new object with properties reflecting the locale and plural formatting options computed during the initialization of the given pluralrules object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 language tag that led to this locale, the
key-value pairs that were requested and are supported for this locale are included in locale. pluralcategories an array of plural categories used by the given locale, seleced from the list "zero", "one", "two", "few", "many" and "other". type the type used (cardinal or ordinal). only one of the following two groups of properties is included: minimumintegerdigits minimumfractiondigits maxim...
Intl - JavaScript
untime doesn't have a locale that matches the request, then the runtime's default locale is used. the matcher can be selected using a property of the options argument (see below). if the selected language tag had a unicode extension substring, that extension is now used to customize the constructed object or the behavior of the function. each constructor or function supports only a subset of the
keys defined for the unicode extension, and the supported values often depend on the language tag. for example, the "co"
key (collation) is only supported by collator, and its "phonebk" value is only supported for german. options argument the options argument must be an object with properties that vary between constructors and functions. if the options argument is not provided or is undefined, defa...
JSON - JavaScript
ed. a decimal point must be followed by at least one digit. nan and infinity are unsupported. any json text is a valid javascript expression... ...but only in javascript engines that have implemented the proposal to make all json text valid ecma-262. in engines that haven't implemented the proposal, u+2028 line separator and u+2029 paragraph separator are allowed in string literals and property
keys in json; but their use in these features in javascript string literals is a syntaxerror. consider this example where json.parse() parses the string as json and eval executes the string as javascript: let code = '"\u2028\u2029"' json.parse(code) // evaluates to "\u2028\u2029" in all engines eval(code) // throws a syntaxerror in old engines other differences include allowing only doub...
Map() constructor - JavaScript
the map() constructor creates map objects. syntax new map([iterable]) parameters iterable an array or other iterable object whose elements are
key-value pairs. (for example, arrays with two elements, such as [[ 1, 'one' ],[ 2, 'two' ]].) each
key-value pair is added to the new map. examples creating a new map let mymap = new map([ [1, 'one'], [2, 'two'], [3, 'three'], ]) specifications specification ecmascript (ecma-262)the definition of 'map constructor' in that specification. ...
Map.prototype.entries() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax mymap.entries() return value a new map iterator object. ...
Map.prototype.get() - JavaScript
the get() method returns a specified element from a map object. if the value that is associated to the provided
key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the map object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax mymap.get(
key) parameters
key the
key of the element to return from the map object. return value the element associated with the specified
key, or undefined if the
key can't be found in the map object. examples using get() let mymap = new map(); mymap.set('bar', 'foo'); mymap.get('bar'); //...
Map.prototype.has() - JavaScript
the has() method returns a boolean indicating whether an element with the specified
key exists or not. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax mymap.has(
key) parameters
key the
key of the element to test for presence in the map object. return value true if an element with the specified
key exists in the map object; otherwise false. examples using has() let mymap = new map() mymap.set('bar', "foo") mymap.has('bar') // returns true mymap.has('baz') // returns false specifications specification ecmascript (ecma-262)the definition of 'map.prototype.has' in that speci...
Number.prototype.toLocaleString() - JavaScript
chinese decimal console.log(number.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(number.tolocalestring(['ban', 'id'])); // → 123.456,789 using options the results provided by toloca...
Object.create() - JavaScript
upport for older browsers is necessary, jquery.extend() or _.assign() can be used. using propertiesobject argument with object.create() var o; // create an object with null as prototype o = object.create(null); o = {}; // is equivalent to: o = object.create(object.prototype); // example where we create an object with a couple of // sample properties. ...
Object.setPrototypeOf() - JavaScript
dy: if (!object.setprototypeof) { // only works in chrome and firefox, does not work in ie: object.prototype.setprototypeof = function(obj, proto) { if(obj.__proto__) { obj.__proto__ = proto; return obj; } else { // if you want to return prototype of object.create(null): var fn = function() { for (var
key in obj) { object.defineproperty(this,
key, { value: obj[
key], }); } }; fn.prototype = proto; return new fn(); } } } examples using object.setprototypeof var dict = object.setprototypeof({}, null); specifications specification ecmasc...
Promise() constructor - JavaScript
returns a promise object. the promise object will become "resolved" when either of the functions resolutionfunc or rejectionfunc are invoked. note that if you call resolutionfunc or rejectionfunc and pass another promise object as an argument, you can say that it is "resolved", but still cannot be said to be "settled". examples creating a new promise a promise object is created using the new
keyword and its constructor. this constructor takes a function, called the "executor function", as its parameter. this function should take two functions as parameters. the first of these functions (resolve) is called when the asynchronous task completes successfully and returns the results of the task as a value. the second (reject) is called when the task fails, and returns the reason for failure, ...
Proxy() constructor - JavaScript
a trap for object.defineproperty. handler.deleteproperty() a trap for the delete operator. handler.get() a trap for getting property values. handler.getownpropertydescriptor() a trap for object.getownpropertydescriptor. handler.getprototypeof() a trap for object.getprototypeof. handler.has() a trap for the in operator. handler.isextensible() a trap for object.isextensible. handler.own
keys() a trap for object.getownpropertynames and object.getownpropertysymbols. handler.preventextensions() a trap for object.preventextensions. handler.set() a trap for setting property values. handler.setprototypeof() a trap for object.setprototypeof. examples selectively proxy property accessors in this example the target has two properties, notproxied and proxied. we define a handler th...
RangeError - JavaScript
he array constructor, or when passing bad values to the numeric methods number.prototype.toexponential(), number.prototype.tofixed() or number.prototype.toprecision(). constructor rangeerror() creates a new rangeerror object. instance properties rangeerror.prototype.message error message. although ecma-262 specifies that rangeerror should provide its own message property, in spidermon
key, it inherits error.prototype.message. rangeerror.prototype.name error name. inherited from error. rangeerror.prototype.filename path to file that raised this error. inherited from error. rangeerror.prototype.linenumber line number in file that raised this error. inherited from error. rangeerror.prototype.columnnumber column number in line that raised this error. inherited from error. ran...
Comparing Reflect and Object methods - JavaScript
that is being made non-extensible. throws a typeerrorin es5 if the argument is not an object (a primitive). in es2015, treats the argument as a non-extensible, ordinary object and returns the object itself. reflect.preventextensions() returns true if the object has been made non-extensible, and false if it has not. throws a typeerror if the argument is not an object (a primitive).
keys() object.
keys() returns an array of strings that map to the target object's own (enumerable) property
keys. throws a typeerror in es5 if the target is not an object, but coerces non-object targets into objects in es2015. n/a own
keys() n/a reflect.own
keys() returns an array of property names that map to the target object's own property
keys. throws a typeerror if the target i...
Reflect.construct() - JavaScript
]); } function func2(d, e, f, g) { consol.log(arguments[3]); } let obj1 = reflect.construct(func1, ['i', 'love', 'my', 'india']) obj1 however, while the end result is the same, there is one important difference in the process. when using object.create() and function.prototype.apply(), the new.target operator will point to undefined within the function used as the constructor, since the new
keyword is not being used to create the object. when invoking reflect.construct(), on the other hand, the new.target operator will point to the newtarget parameter if supplied, or target if not. function oneclass() { console.log('oneclass') console.log(new.target) } function otherclass() { console.log('otherclass') console.log(new.target) } let obj1 = reflect.construct(oneclass, ar...
Reflect.deleteProperty() - JavaScript
the static reflect.deleteproperty() method allows to delete properties. it is like the delete operator as a function. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.deleteproperty(target, property
key) parameters target the target object on which to delete the property. property
key the name of the property to be deleted. return value a boolean indicating whether or not the property was successfully deleted. exceptions a typeerror, if target is not an object. description the reflect.deleteproperty method allows you to delete a property on an object. it returns a boolean indicating whet...
Reflect.getOwnPropertyDescriptor() - JavaScript
criptor(). it returns a property descriptor of the given property if it exists on the object, undefined otherwise. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.getownpropertydescriptor(target, property
key) parameters target the target object in which to look for the property. property
key the name of the property to get an own property descriptor for. return value a property descriptor object if the property exists in target object; otherwise, undefined. exceptions a typeerror, if target is not an object. description the reflect.getownpropertydescriptor method returns a property desc...
Reflect.has() - JavaScript
the static reflect.has() method works like the in operator as a function. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.has(target, property
key) parameters target the target object in which to look for the property. property
key the name of the property to check. return value a boolean indicating whether or not the target has the property. exceptions a typeerror, if target is not an object. description the reflect.has method allows you to check if a property is in an object. it works like the in operator as a function. examples using reflect.has() reflect.has({x: 0}, 'x') // true...
RegExp.prototype.sticky - JavaScript
this property directly. it is read-only. examples using a regular expression with the sticky flag var str = '#foo#'; var regex = /foo/y; regex.lastindex = 1; regex.test(str); // true regex.lastindex = 5; regex.test(str); // false (lastindex is taken into account with sticky flag) regex.lastindex; // 0 (reset after match failure) anchored sticky flag for several versions, firefox's spidermon
key engine had a bug with regard to the ^ assertion and the sticky flag which allowed expressions starting with the ^ assertion and using the sticky flag to match when they shouldn't. the bug was introduced some time after firefox 3.6 (which had the sticky flag but not the bug) and fixed in 2015. perhaps because of the bug, the es2015 specification specifically calls out the fact that: when the y f...
Set.prototype.has() - JavaScript
ue returns true if an element with the specified value exists in the set object; otherwise false. note: technically speaking, has() uses the samevaluezero algorithm to determine whether the given element is found. examples using the has method var myset = new set(); myset.add('foo'); myset.has('foo'); // returns true myset.has('bar'); // returns false var set1 = new set(); var obj1 = {'
key1': 1}; set1.add(obj1); set1.has(obj1); // returns true set1.has({'
key1': 1}); // returns false because they are different object references set1.add({'
key1': 1}); // now set1 contains 2 entries specifications specification ecmascript (ecma-262)the definition of 'set.prototype.has' in that specification. ...
Set.prototype.values() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax myset.values(); return value a new iterator object containing the values for each element in the given set, in insertion order. ...
String.prototype.match() - JavaScript
will be returned, but capturing groups will not. if the g flag is not used, only the first complete match and its related capturing groups are returned. in this case, the returned item will have additional properties as described below. additional properties as explained above, some results contain additional properties as described below. groups an object of named capturing groups whose
keys are the names and values are the capturing groups or undefined if no named capturing groups were defined. see groups and ranges for more information. index the index of the search at which the result was found. input a copy of the search string. description if the regular expression does not include the g flag, str.match() will return the same result as regexp.exec(). other methods if...
String.prototype.replace() - JavaScript
p1 is the match for \a+, and p2 for \b+. offset the offset of the matched substring within the whole string being examined. (for example, if the whole string was 'abcd', and the matched substring was 'bc', then this argument will be 1.) string the whole string being examined. groups in browser versions supporting named capturing groups, will be an object whose
keys are the used group names, and whose values are the matched portions (undefined if not matched). (the exact number of arguments depends on whether the first argument is a regexp object—and, if so, how many parenthesized submatches it specifies.) the following example will set newstring to 'abc - 12345 - #$*%': function replacer(match, p1, p2, p3, offset, string) { // p1 is nondigits,...
String - JavaScript
s function, due to problems with certain utf-8 character conversions. string primitives and string objects note that javascript distinguishes between string objects and primitive string values. (the same is true of boolean and numbers.) string literals (denoted by double or single quotes) and strings returned from string calls in a non-constructor context (that is, called without using the new
keyword) are primitive strings. javascript automatically converts primitives to string objects, so that it's possible to use string object methods for primitive strings. in contexts where a method is to be invoked on a primitive string or a property lookup occurs, javascript will automatically wrap the string primitive and call the method or perform the property lookup. let s_prim = 'foo' let s_obj ...
SyntaxError - JavaScript
tically invalid code. it is thrown when the javascript engine encounters tokens or token order that does not conform to the syntax of the language when parsing code. constructor syntaxerror() creates a new syntaxerror object. instance properties syntaxerror.prototype.message error message. although ecma-262 specifies that syntaxerror should provide its own message property, in spidermon
key, it inherits error.prototype.message. syntaxerror.prototype.name error name. inherited from error. syntaxerror.prototype.filename path to file that raised this error. inherited from error. syntaxerror.prototype.linenumber line number in file that raised this error. inherited from error. syntaxerror.prototype.columnnumber column number in line that raised this error. inherited from error. ...
TypeError - JavaScript
h the type expected by that operator or function; or when attempting to modify a value that cannot be changed; or when attempting to use a value in an inappropriate way. constructor typeerror() creates a new typeerror object. instance properties typeerror.prototype.message error message. although ecma-262 specifies that typeerror should provide its own message property, in spidermon
key, it inherits error.prototype.message. typeerror.prototype.name error name. inherited from error. typeerror.prototype.filename path to file that raised this error. inherited from error. typeerror.prototype.linenumber line number in file that raised this error. inherited from error. typeerror.prototype.columnnumber column number in line that raised this error. inherited from error. typeerr...
TypedArray.prototype.entries() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax arr.entries() return value a new array iterator object. ...
WeakMap.prototype.delete() - JavaScript
the delete() method removes the specified element from a weakmap object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax wm.delete(
key); parameters
key the
key of the element to remove from the weakmap object. return value true if an element in the weakmap object has been removed successfully. false if the
key is not found in the weakmap or if the
key is not an object. examples using the delete method var wm = new weakmap(); wm.set(window, 'foo'); wm.delete(window); // returns true. successfully removed. wm.has(window); // returns false. the window object is no longer in the weakmap. speci...
WeakMap.prototype.get() - JavaScript
the get() method returns a specified element from a weakmap object. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax wm.get(
key); parameters
key required. the
key of the element to return from the weakmap object. return value the element associated with the specified
key in the weakmap object. if the
key can't be found, undefined is returned. examples using the get method var wm = new weakmap(); wm.set(window, 'foo'); wm.get(window); // returns "foo". wm.get('baz'); // returns undefined. specifications specification ecmascript (ecma-262)the definition of 'weakmap.prototype.g...
WeakMap.prototype.has() - JavaScript
the has() method returns a boolean indicating whether an element with the specified
key exists in the weakmap object or not. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax wm.has(
key); parameters
key required. the
key of the element to test for presence in the weakmap object. return value boolean returns true if an element with the specified
key exists in the weakmap object; otherwise false. examples using the has method var wm = new weakmap(); wm.set(window, 'foo'); wm.has(window); // returns true wm.has('baz'); // returns false specifications specification ecmascript...
WeakSet.prototype.delete() - JavaScript
tive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax ws.delete(value); parameters value required. the object remove from the weakset object. return value true if an element in the weakmap object has been removed successfully. false if the
key is not found in the weakmap or if the
key is not an object. examples using the delete method var ws = new weakset(); var obj = {}; ws.add(window); ws.delete(obj); // returns false. no obj found to be deleted. ws.delete(window); // returns true. successfully removed. ws.has(window); // returns false. the window is no longer present in the weakset. specifications specificat...
WeakSet - JavaScript
tructures by tracking which objects have already been processed. weaksets are ideal for this purpose: // execute a callback on everything stored inside an object function execrecursively(fn, subject, _refs = null){ if(!_refs) _refs = new weakset(); // avoid infinite recursion if(_refs.has(subject)) return; fn(subject); if("object" === typeof subject){ _refs.add(subject); for(let
key in subject) execrecursively(fn, subject[
key], _refs); } } const foo = { foo: "foo", bar: { bar: "bar" } }; foo.bar.baz = foo; // circular reference! execrecursively(obj => console.log(obj), foo); here, a weakset is created on the first run, and passed along with every subsequent function call (using the internal _refs parameter). the number of objects or their traversal order is imm...
WebAssembly.CompileError - JavaScript
the webassembly.compileerror object indicates an error during webassembly decoding or validation. constructor webassembly.compileerror() creates a new webassembly.compileerror object. instance properties webassembly.compileerror.prototype.message error message. although ecma-262 specifies that urierror should provide its own message property, in spidermon
key, it inherits error.prototype.message. webassembly.compileerror.prototype.name error name. inherited from error. webassembly.compileerror.prototype.filename path to file that raised this error. inherited from error. webassembly.compileerror.prototype.linenumber line number in file that raised this error. inherited from error. webassembly.compileerror.prototype.columnnumber column number in line that raised this error. i...
WebAssembly.LinkError - JavaScript
the webassembly.linkerror object indicates an error during module instantiation (besides traps from the start function). constructor webassembly.linkerror() creates a new webassembly.linkerror object. instance properties webassembly.linkerror.prototype.message error message. although ecma-262 specifies that urierror should provide its own message property, in spidermon
key, it inherits error.prototype.message. webassembly.linkerror.prototype.name error name. inherited from error. webassembly.linkerror.prototype.filename path to file that raised this error. inherited from error. webassembly.linkerror.prototype.linenumber line number in file that raised this error. inherited from error. webassembly.linkerror.prototype.columnnumber column number in line that raised this error.
WebAssembly.RuntimeError - JavaScript
the webassembly.runtimeerror object is the error type that is thrown whenever webassembly specifies a trap. constructor webassembly.runtimeerror() creates a new webassembly.runtimeerror object. instance properties webassembly.runtimeerror.prototype.message error message. although ecma-262 specifies that urierror should provide its own message property, in spidermon
key, it inherits error.prototype.message. webassembly.runtimeerror.prototype.name error name. inherited from error. webassembly.runtimeerror.prototype.filename path to file that raised this error. inherited from error. webassembly.runtimeerror.prototype.linenumber line number in file that raised this error. inherited from error. webassembly.runtimeerror.prototype.columnnumber column number in line that raised thi...
eval() - JavaScript
]"), as opposed to code, you should consider switching to json, which allows the string to use a subset of javascript syntax to represent data. see also downloading json and javascript in extensions. note that since json syntax is limited compared to javascript syntax, many valid javascript literals will not parse as json. for example, trailing commas are not allowed in json, and property names (
keys) in object literals must be enclosed in quotes. be sure to use a json serializer to generate strings that will be later parsed as json. pass data instead of code for example, an extension designed to scrape contents of web-pages could have the scraping rules defined in xpath instead of javascript code. run code with limited privileges if you must run the code, consider running it with reduce...
globalThis - JavaScript
writable yes enumerable no configurable yes description historically, accessing the global object has required different syntax in different javascript environments. on the web you can use window, self, or frames - but in web workers only self will work. in node.js none of these work, and you must instead use global. the this
keyword could be used inside functions running in non–strict mode, but this will be undefined in modules and inside functions running in strict mode. you can also use function('return this')(), but environments that disable eval(), like csp in browsers, prevent use of function in this way. the globalthis property provides a standard way of accessing the global this value (and hence the global obje...
Standard built-in objects - JavaScript
jects represent strings and support manipulating them. string regexp indexed collections these objects represent collections of data which are ordered by an index value. this includes (typed) arrays and array-like constructs. array int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array
keyed collections these objects represent collections which use
keys. the iterable collections (map and set) contain elements which are easily iterated in the order of insertion. map set weakmap weakset structured data these objects represent and interact with structured data buffers and data coded using javascript object notation (json). arraybuffer sharedarraybuffer atomics datavi...
Destructuring assignment - JavaScript
rd jones', brother: 'howard jones' }, age: 25 } ]; for (const {name: n, family: {father: f}} of people) { console.log('name: ' + n + ', father: ' + f); } // "name: mike smith, father: harry smith" // "name: tom jones, father: richard jones" computed object property names and destructuring computed property names, like on object literals, can be used with destructuring. let
key = 'z'; let {[
key]: foo} = {z: 'bar'}; console.log(foo); // "bar" rest in object destructuring the rest/spread properties for ecmascript proposal (stage 4) adds the rest syntax to destructuring. rest properties collect the remaining own enumerable property
keys that are not already picked off by the destructuring pattern. let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} a; // 10 b; // 20 re...
async function expression - JavaScript
you can also define async functions using an async function statement. syntax async function [name]([param1[, param2[, ..., paramn]]]) { statements } as of es2015, you can also use arrow functions. parameters name the function name. can be omitted, in which case the function is anonymous. the name is only local to the function body. paramn the name of an argument to be passed to the function. statements the statements which comprise the body of the function. description an async function expression is very similar to, and has almost the same syntax as, an async function statement. ...
function* expression - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax function* [name]([param1[, param2[, ..., paramn]]]) { statements } parameters name optional the function name. can be omitted, in which case the function is anonymous. the name is only local to the function body. paramn optional the name of an argument to be passed to the function. a function can have up to 255 arguments. statements the statements which comprise the body of the function. ...
Function expression - JavaScript
you can also define functions using the function constructor and a function declaration. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the expression is not allowed at the start of a statement. function [name]([param1[, param2[, ..., paramn]]]) { statements } as of es2015, you can also use arrow functions. parameters name optional the function name. can be omitted, in which case the function is anonymous. the name is only local to the function body. ...
new operator - JavaScript
the new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function. syntax new constructor[([arguments])] parameters constructor a class or function that specifies the type of the object instance. arguments a list of values that the constructor will be called with. description the new
keyword does the following things: creates a blank, plain javascript object; links (sets the constructor of) this object to another object; passes the newly created object from step 1 as the this context; returns this if the function doesn't return an object. creating a user-defined object requires two steps: define the object type by writing a function. create an instance of the object with new. ...
new.target - JavaScript
turns a reference to the constructor or function. in normal function calls, new.target is undefined. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax new.target description the new.target syntax consists of the
keyword new, a dot, and the identifier target. normally, the left-hand side of the dot is the object on which property access is performed, but here, new is not an object. the new.target pseudo-property is available in all functions. in class constructors, it refers to the constructed class. in ordinary functions, it refers to the function itself, assuming it was invoked via the new operator; othe...
class - JavaScript
on is executed in strict mode. the constructor method is optional. class declarations are not hoisted (unlike function declarations). examples a simple class declaration in the following example, we first define a class named polygon, then extend it to create a class named square. note that super(), used in the constructor, can only be used in constructors, and must be called before the this
keyword can be used. class polygon { constructor(height, width) { this.name = 'polygon'; this.height = height; this.width = width; } } class square extends polygon { constructor(length) { super(length, length); this.name = 'square'; } } attempting to declare a class twice re-declaring a class using the class declaration throws a syntaxerror. class foo {}; class foo {}...
for - JavaScript
https://github.com/mdn/interactive-examples and send us a pull request. syntax for ([initialization]; [condition]; [final-expression]) statement initialization an expression (including assignment expressions) or variable declaration evaluated once before the loop begins. typically used to initialize a counter variable. this expression may optionally declare new variables with var or let
keywords. variables declared with var are not local to the loop, i.e. they are in the same scope the for loop is in. variables declared with let are local to the statement. the result of this expression is discarded. condition an expression to be evaluated before each loop iteration. if this expression evaluates to true, statement is executed. this conditional test is optional. if omitted, the con...
function* - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. you can also define generator functions using the generatorfunction constructor, or the function expression syntax. syntax function* name([param[, param[, ... param]]]) { statements } name the function name. param optional the name of a formal parameter for the function. statements the statements comprising the body of the function. ...
if...else - JavaScript
tatement ({ ... }) to group those statements. to execute no statements, use an empty statement. statement2 statement that is executed if condition is falsy and the else clause exists. can be any statement, including block statements and further nested if statements. description multiple if...else statements can be nested to create an else if clause. note that there is no elseif (in one word)
keyword in javascript. if (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 ... else statementn to see how this works, this is how it would look if the nesting were properly indented: if (condition1) statement1 else if (condition2) statement2 else if (condition3) ... to execute multiple statements within a clause, use a block statement...
import.meta - JavaScript
normally the left-hand side of the dot is the object on which property access is performed, but here import is not really an object. the import.meta object is created by the ecmascript implementation, with a null prototype. the object is extensible, and its properties are writable, configurable, and enumerable. ...
let - JavaScript
rn the names of the variable or variables to declare. each must be a legal javascript identifier. value1, value2, …, valuen optional for each variable declared, you may optionally specify its initial value to any legal javascript expression. description let allows you to declare variables that are limited to the scope of a block statement, or expression on which it is used, unlike the var
keyword, which defines a variable globally, or locally to an entire function regardless of block scope. the other difference between var and let is that the latter is initialized to a value only when a parser evaluates it (see below). just like const the let does not create properties of the window object when declared globally (in the top-most scope). an explanation of why the name "let" was chose...
return - JavaScript
urn x * x; } var demo = square(3); // demo will equal 9 if the value is omitted, undefined is returned instead. the following return statements all break the function execution: return; return true; return false; return x; return x + y / 3; automatic semicolon insertion the return statement is affected by automatic semicolon insertion (asi). no line terminator is allowed between the return
keyword and the expression. return a + b; is transformed by asi into: return; a + b; the console will warn "unreachable code after return statement". starting with firefox 40, a warning is shown in the console if unreachable code is found after a return statement. to avoid this problem (to prevent asi), you could use parentheses: return ( a + b ); examples interrupt a function a functi...
throw - JavaScript
examples throw an object you can specify an object when you throw an exception. you can then reference the object's properties in the catch block. the following example creates an object of type userexception and uses it in a throw statement. function userexception(message) { this.message = message; this.name = 'userexception'; } function getmonthname(...
Transitioning to strict mode - JavaScript
o strict mode down to the function granularity. differences from non-strict to strict syntax errors when adding 'use strict';, the following cases will throw a syntaxerror before the script is executing: octal syntax var n = 023; with statement using delete on a variable name delete myvariable; using eval or arguments as variable or function argument name using one of the newly reserved
keywords (in prevision for ecmascript 2015): implements, interface, let, package, private, protected, public, static, and yield declaring function in blocks if (a < b) { function f() {} } obvious errors declaring twice the same name for a property name in an object literal {a: 1, b: 3, a: 7} this is no longer the case in ecmascript 2015 (bug 1041128). declaring two function parameters with...
JavaScript reference - JavaScript
gateerror evalerror internalerror rangeerror referenceerror syntaxerror typeerror urierror numbers & dates number bigint math date text processing string regexp indexed collections array int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array
keyed collections map set weakmap weakset structured data arraybuffer sharedarraybuffer atomics dataview json control abstraction promise generator generatorfunction asyncfunction reflection reflect proxy internationalization intl intl.collator intl.datetimeformat intl.displaynames intl.listformat intl.locale intl.numberform...
categories - Web app manifests
type array of strings mandatory no the categories member is an array of strings defining the names of categories that the application supposedly belongs to. there is no standard list of possible values, but the w3c maintains a list of known categories. note: categories are used only as hints for catalogs or stores listing web applications. like search engines and meta
keywords, catalogs and stores are free to ignore them. note: categories values are lower-cased by the stores and catalogs before processing, so "news" and "news" are treated as the same value. developers are encouraged to use lower case in the first place. example "categories": ["books", "education", "medical"] specification specification status comment feedback ...
shortcuts - Web app manifests
a user agent can use these values to assemble a context menu to be displayed by the operating system when a user engages with the web app's icon. when user invokes a shortcut, the user agent will navigate to the address given by shortcut's url member. ...
Web app manifests
mescreen of a device, providing users with quicker access and a richer experience). pwa manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things). can pwa manifest contain comments? it is a json-formatted file, with one exception: it is allowed to contain "//"-style comments. members web manifests can contain the following
keys. click each one for more information about it: background_colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff",...
<mpadded> - MathML
names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. voffset sets or increments the vertical position. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . width sets or increments the width. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . pseudo-units it is possible to use the
keywords "depth", "height", and "width" as a pseudo-unit for the attributes depth, height, lspace, voffset, and width. they represent each length of the same-named dimension. prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamon
key 2.4) the mathml2 pseudo-unit lspace was allowed, which is no longer present in the mathml3 recommendation and has been removed now. examples <math> <mpadded hei...
<mtable> - MathML
center: see baseline. top: the top of the table aligns on the environments baseline. in addition, values of the align attribute can end with a rownumber (e.g. align="center 3"). this allows you to align the specified row of the table rather than the whole table. a negative integer value counts rows from the bottom of the table. starting with gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamon
key 2.5) the interpretation of negative values has been corrected (bug 601436). in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamon
key 2.14) the parsing has been updated to treat whitespace correctly. alignmentscope unimplemented class, id, style provided for use with stylesheets. columnalign specifies the horizontal alignment of the cells. multiple values separated by space are allowed and...
<semantics> - MathML
"application/mathml-presentation+xml" "mathml-presentation" "svg1.1" "text/html" "image/svg+xml" "application/xml". note that "application/mathml+xml" is not mentioned here as it does not distinguish between content or presentation mathml. attributes the following attributes can be set on <annotation> and <annotation-xml>: definitionurl the location of the annotation
key symbol. encoding the encoding of the semantic information in the annotation (e.g. "mathml-content", "mathml-presentation", "application/openmath+xml", "image/png") cd the content dictionary that contains the annotation
key symbol. name the name of the annotation
key symbol. src the location of an external source for semantic information. example <math> <semantics> <!-- presentat...
MathML
related topics css html svg ...
Autoplay guide for media and Web Audio APIs - Web media technologies
nconvenient, or off-putting. because of that, browsers generally only allow autoplay to occur successfully under specific circumstances. autoplay availability as a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true: the audio is muted or its volume is set to 0 the user has interacted with the site (by clicking, tapping, pressing
keys, etc.) if the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features if the autoplay feature policy is used to grant autoplay support to an <iframe> and its document. otherwise, the playback will likely be blocked. the exact situations that result i...
Web audio codec guide - Web media technologies
sampled sound will match the source material. the effect of source audio format on encoded audio output because encoded audio inherently uses fewer bits to represent each sample, the source audio format may actually have less impact on the encoded audio size than one might expect. however, a number of factors do still affect the encoded audio quality and size. the table below lists a number of
key source audio file format factors and their impact on the encoded audio. the effect of source audio format and contents on the encoded audio quality and size feature effect on quality effect on size channel count the number of channels affects only the perception of directionality, not the quality. each channel may substantially increase the encoded audio size, ...
Media type and format guide: image, audio, and video content - Web media technologies
while others may be used for either audio or combined audiovisual content such as movies. includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features. web audio codec guide a guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. includes benefits, limitations,
key specifications and capabilities, and use cases. it also covers each browser's support for using the codec in given containers. web video codec guide this article provides basic information about the video codecs supported by the major browsers, as well as some that are not commonly supported but that you might still run into. it also covers codec capabilities, benefits, limitations, and browser...
Using audio and video in HTML - Web media technologies
the html <audio> and <video> elements let you embed audio and video content into a web page. more than that, their underlying interfaces are the
key to manipulating and playing back media in general, even offscreen. in this guide, we'll review the media elements and how to use them in html content. note: this guide is a planned update to integrate content from various scattered places on mdn into one cohesive document or document set. the work is not yet scheduled but hopefully will come soon. for now, some of the
key information you may be looking for can be found in our learning area article on the topic. we don't have a particularly good guide to using these objects offscreen at this time, although audio and video manipulation may be a good start. ...
Animation performance and frame rate - Web Performance
t the frame rate. we'll also discuss some tips to create and maintain a fast and steady frame rate. the developer tool's frame rate and waterfall charts provide insight into the work the browser is performing to animate code. using these tools you can measure an application's animation frame rate, and diagnose performance bottlenecks if any are found. with css animations you specify a number of
keyframes, each of which uses css to define the appearance of the element at a particular stage of the animation. the browser creates the animation as a transition from each
keyframe to the next. compared with animating elements using javascript, css animations can be easier to create. they can also give better performance, as they give the browser more control over when to render frames, and to dro...
Populating the page: how browsers work - Web Performance
per fast. network latency is the time it takes to transmit bytes over-the-air to computers. web performance is what we have to do to make the page load happen as quickly as possible. for the most part, browsers are considered single threaded. for smooth interactions, the developer's goal is to ensure performant site interactions, from smooth scrolling to being responsive to touch. render time is
key, with ensuring the main thread can complete all the work we throw at it and still always be available to handle user interactions. web performance can be improved by understanding the single-threaded nature of the browser and minimizing the main thread's responsibilities, where possible and appropriate, to ensure rendering is smooth and responses to interactions are immediate. navigation naviga...
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
in life experiences from those creating it. by leveraging rum, a business can better understand its users and identify the areas on its site that require the most attention. moreover, rum can help to understand the geographic or channel distribution trends of your users. knowing your user trends helps you better define your business plan and, from a monitoring perspective, allows you to identify
key areas to target for optimization and performance improvements. rum v synthetic synthetic is well suited for catching regressions during development life cycles, especially with network throttling. it is fairly easy, inexpensive, and great for spot-checking performance during development as an effective way to measure the effect of code changes, but it doesn’t reflect what real users are exper...
Web Performance
e site. it is important to minimize the loading and response times and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience. there are tools, apis, and best practices that help us measure and improve web performance. we cover them in this section:
key performance guides animation performance and frame rateanimation on the web can be done via svg, javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types. the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles...
How to make PWAs installable - Progressive web apps (PWAs)
device a service worker registered, to allow the app to work offline (this is required only by chrome for android currently) currently, only the chromium-based browsers such as chrome, edge, and samsung internet require the service worker. if developing your app using firefox, be aware that you will need a service worker to be compatible with chromium-based browsers. the manifest file the
key element is a web manifest file, which lists all the information about the website in a json format. it usually resides in the root folder of a web app. it contains useful information, such as the app’s title, paths to different-sized icons that can be used to represent the app on an os (such as an icon on the home screen, an entry in the start menu, or an icon on the desktop), and a background...
Mobile first - Progressive web apps (PWAs)
ehaviour, hides the links to jump to and from the navigation, as they are not needed anymore in the wider layout, and changes the vertical menu to a horizontal menu that makes better use of the horizontal space available. the second one sets the width of the content at 600px and centers it in the space available, then adds in a gradient and a nice background image for the wider layout. this is a
key point - the background image is 126kb, and not ideal for narrow layouts. having it included in the "600 pixels or wider" media query means that narrow screen devices won't read that media query, so they will not waste their time and bandwidth downloading that image. note: firefox's responsive design view is a great way to get a quick idea of how your media queries are behaving themselves. try i...
The building blocks of responsive design - Progressive web apps (PWAs)
d solution is to use vector graphics. because vector images are calculated based on mathematical algorithms rather than containing separate data on every pixel in the image, they tend to be smaller in file size, and are infinitely scalable when zoomed or viewed on high resolution devices (at least, in theory). some ideas follow, which also help to keep the number of http requests down — another
key factor in mobile app performance: you should try to use css3 features to programmatically generate graphical effects where possible, rather than relying on image files. these include rounded corners, gradients, and drop shadows. these scale as the resolution changes or the browser zooms. although they are not supported very well on older browsers such as internet explorer 6-8, this is not too ...
Web technology reference
if you're new to web development, consider starting with our learning area, which is filled with step-by-step tutorials that will guide you from total webdev newbie to at least semi-pro! html — structuring the web hypertext markup language is used to define and describe semantically the content (markup) of a web page in a well-structured format. ...
SVG Event Attributes - SVG: Scalable Vector Graphics
ibutes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, on
keydown, on
keypress, on
keyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical e...
SVG Presentation Attributes - SVG: Scalable Vector Graphics
<image> element should use. value: auto|srgb|linearrgb|<name>|<iri>|inherit; animatable: yes color-rendering it provides a hint to the browser about how to optimize its color interpolation and compositing operations. value: auto|optimizespeed|optimizequality|inherit; animatable: yes cursor it specifies the mouse cursor displayed when the mouse pointer is over an element. value: <funciri>|<
keywords>|inherit; animatable: yes direction it specifies the base writing direction of text. value: ltr|rtl|inherit; animatable: yes display it allows to control the rendering of graphical or container elements. value: see css display; animatable: yes dominant-baseline it defines the baseline used to align the box’s text and inline-level contents. value: auto|text-bottom|alphabetic|ideogr...
baseline-shift - SVG: Scalable Vector Graphics
a percentage value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified percentage of the line-height. specifications specification status comment css inline layoutthe definition of 'alignment-baseline' in that specification. working draft removed the baseline value, as it is a redundant
keyword within the vertical-align property. scalable vector graphics (svg) 2the definition of 'alignment-baseline' in that specification. candidate recommendation refers to the definition in css inline layout and notes that vertical-align should be preferred. scalable vector graphics (svg) 1.1 (second edition)the definition of 'alignment-baseline' in that specification. rec...
calcMode - SVG: Scalable Vector Graphics
alues is used to calculate the animation function. except for <animatemotion>, this is the default value. paced defines interpolation to produce an even pace of change across the animation. this is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). if paced is specified, any
keytimes or
keysplines will be ignored. for <animatemotion>, this is the default value. spline interpolates from one value in the values list to the next according to a time function defined by a cubic bézier spline. the points of the spline are defined in the
keytimes attribute, and the control points for each interval are defined in the
keysplines attribute. specifications specificat...
font-variant - SVG: Scalable Vector Graphics
for a description of the values, please refer to the css font-variant property. specifications specification status comment css fonts module level 4the definition of 'font-variant' in that specification. working draft no change css fonts module level 3the definition of 'font-variant' in that specification. candidate recommendation added many more
keywords for different types of variations. scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-variant' in that specification. recommendation initial definition ...
paint-order - SVG: Scalable Vector Graphics
le>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, and <tspan> usage notes value normal | [ fill || stroke || markers ] default value normal animatable yes normal this value indicates that the fill will be painted first, then the stroke, and finally the markers. [ fill || stroke || markers ] the order of these three
keywords indicates the order in which the painting happens, from left to right. if any of the three painting components is omitted, they will be painted in their default order after the specified components. for example, using stroke is equivalent to stroke fill markers. example <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> ...
panose-1 - SVG: Scalable Vector Graphics
the panose-1 attribute indicates the panose-1 number of a font face. panose-1 is an industry standard truetype font classification and matching technology. the panose system consists of a set of ten numbers that categorize the
key attributes of a latin typeface, a classification procedure for creating those numbers, and mapper software that determines the closest possible font match given a set of typefaces. only one element is using this attribute: <font-face> usage notes value <integer>{10} default value 0 0 0 0 0 0 0 0 0 0 animatable no <integer>{10} this value specifies a panose-1 number and consists of ten decimal integers, separated by whitespace. the initial value zero for each panose digit means "any", i.e. all fonts will match the p...
refX - SVG: Scalable Vector Graphics
at the left edge of the shape. center the reference point of the marker is placed at the horizontal center of the shape. right the reference point of the marker is placed at the right edge of the shape. specifications specification status comment scalable vector graphics (svg) 2the definition of 'refx' in that specification. candidate recommendation added
keywords left, center, and right. scalable vector graphics (svg) 2the definition of 'refx' in that specification. candidate recommendation initial definition for <symbol> scalable vector graphics (svg) 1.1 (second edition)the definition of 'refx' in that specification. recommendation initial definition for <marker> ...
refY - SVG: Scalable Vector Graphics
d at the top edge of the shape. center the reference point of the marker is placed at the vertical center of the shape. bottom the reference point of the marker is placed at the bottom edge of the shape. specifications specification status comment scalable vector graphics (svg) 2the definition of 'refy' in that specification. candidate recommendation added
keywords left, center, and right. scalable vector graphics (svg) 2the definition of 'refy' in that specification. candidate recommendation initial definition for <symbol> scalable vector graphics (svg) 1.1 (second edition)the definition of 'refy' in that specification. recommendation initial definition for <marker> ...
type - SVG: Scalable Vector Graphics
the type attribute is a generic attribute and it has different meaning based on the context in which it's used. for the <animatetransform> element, it defines the type of transformation, whose values change over time. for the <fecolormatrix> element, it indicates the type of matrix operation. the
keyword matrix indicates that a full 5x4 matrix of values will be provided. the other
keywords represent convenience shortcuts to allow commonly used color operations to be performed without specifying a complete matrix. for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements, it indicates the type of component transfer function. for the <feturbulence> element, it indicates whether the filter primitive should perform a noise or turbulence function. for the <style> and <script> element...
unicode-bidi - SVG: Scalable Vector Graphics
animatable no for a description of the values, please refer to the css unicode-bidi property. specifications specification status comment css writing modes module level 3the definition of 'unicode-bidi' in that specification. proposed recommendation svg 2 only refers to css writing modes. introduced isolate, isolate-override, and plaintext
keywords. scalable vector graphics (svg) 1.1 (second edition)the definition of 'unicode-bidi' in that specification. recommendation initial definition ...
<a> - SVG: Scalable Vector Graphics
visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<animate> - SVG: Scalable Vector Graphics
argin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values,
keytimes,
keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes this element implements the svganimat...
<circle> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<clipPath> - SVG: Scalable Vector Graphics
!-- the original black heart, for reference --> <path id="heart" d="m10,30 a20,20,0,0,1,50,30 a20,20,0,0,1,90,30 q90,60,50,90 q10,60,10,30 z" /> <!-- only the portion of the red heart inside the clip circle is visible. --> <use clip-path="url(#myclip)" xlink:href="#heart" fill="red" /> </svg> /* with a touch of css for browsers who * * implemented the r geometry property. */ @
keyframes openyourheart {from {r: 0} to {r: 60px}} #myclip circle { animation: openyourheart 15s infinite; } a clipping path is conceptually equivalent to a custom viewport for the referencing element. thus, it affects the rendering of an element, but not the element's inherent geometry. the bounding box of a clipped element (meaning, an element which references a <clippath> element via a clip...
<ellipse> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<foreignObject> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<g> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<line> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<marker> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<path> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<polygon> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<polyline> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<rect> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<svg> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<symbol> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<text> - SVG: Scalable Vector Graphics
width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<textPath> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<tspan> - SVG: Scalable Vector Graphics
width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
<use> - SVG: Scalable Vector Graphics
city, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, 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,...
SVG as an Image - SVG: Scalable Vector Graphics
svg images can be used as an image format, in a number of contexts. many browsers support svg images in: html <img> or <svg> elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamon
key 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled. external resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through data: uris. :visited-link styles aren't rendered. platform-native widget styling (based on os theme) is disabled. note th...
Scripting - SVG: Scalable Vector Graphics
eventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", ""). note the existence of all three arguments setting properties. preventing default behavior in event code when writing drag and drop code, sometimes you'll find that text on the page gets accidently selected while dragging. or if you want to use the backspace
key in your code, you want to override the browser's default behavior when the backspace
key is pressed, which is to go back to the previous page. the evt.preventdefault() method lets you do this. using eventlisteners with objects the methods addeventlistener() and removeeventlistener() are very useful when writing interactive svg. you can pass an object that implements the handleevent interface as...
SVG Filters Tutorial - SVG: Scalable Vector Graphics
is possible to add these effects and later on attach them to an object. filters act like layers. when creating them, try applying and testing the effect step by step. this element has different attributes that help us create the clipping region. between the filter tags, we can define the primitives that allow us to implement the desired effect. one of these primitives is the fegaussianblur. the
keyword sourcealpha identifies the input for this primitive, is in this case input 'in'. the amount of blur to be applied is done using the stddeviation attribute. svg filter example <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3"/> </filter> </defs> <g id="ghost" style="filter: url(#drop-shadow);"/> <!--ghost drawing in here--> </g> this above example w...
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
up the os to associate the .svg filename extension with the incorrect media type "image/svg-xml" instead of "image/svg+xml". microsoft windows one way to fix this in microsoft windows is to start regedit (start > run > regedit) and search for "svg". change every occurance of "image/svg-xml" (or whatever the invalid media type is) to "image/svg+xml". normally, this matters just for the entry "h
key_classes_root\.svg\content type". after correcting the os file associations you will probably need to re-clean your mimetypes.rdf as described in the section above. fixing the bug need to look at the exthandler code. related bugs: bug 332690 and bug 303581. ...
Web security
cors cors-safelisted request header cors-safelisted response header cross-site scripting cryptanalysis cryptographic hash function cryptography csp csrf decryption digital certificate dtls encryption forbidden header name forbidden response header name hash hmac hpkp hsts https
key mitm owasp preflight request public-
key cryptography reporting directive robots.txt same-origin policy session hijacking sql injection symmetric-
key cryptography tofu tls ...
Tutorials
l5 doctor articles about using html5 right now. javascript tutorials introductory level javascript first steps in our first javascript module, we first answer some fundamental questions such as "what is javascript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript. after that, we discuss some
key javascript features in detail, such as variables, strings, numbers and arrays. javascript building blocks in this module, we continue our coverage of all javascript's
key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. you've seen this stuff already in the course, but only in passing — here w...
Using shadow DOM - Web Components
this article covers the basics of using the shadow dom. note: shadow dom is supported by default in firefox (63 and onwards), chrome, opera, and safari. ...
Using templates and slots - Web Components
ntent of its shadow dom. we'll call it <my-paragraph>: customelements.define('my-paragraph', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } } ); the
key point to note here is that we append a clone of the template content to the shadow root, created using the node.clonenode() method. and because we are appending its contents to a shadow dom, we can include some styling information inside the template in a <style> element, which is then encapsulated inside the custom element. this wouldn't work if we just appended it to the standard dom. so for ...
Functions - XPath
and degree of present gecko support. for further information on using xpath/xslt functions, please see the for further reading page. ...
Index - XPath
ailable and returns boolean true or false. 31 generate-id xslt, xslt_reference the generate-id function generates a unique id for the first node in a given node-set and returns a string containing that id. 32 id xslt, xslt_reference the id function finds nodes matching the given ids and returns a node-set containing the identified nodes. 33
key xslt, xslt_reference the
key function returns a node-set of nodes that have the given value for the given
key. 34 lang xslt, xslt_reference the lang function determines whether the context node matches the given language and returns boolean true or false. 35 last xslt, xslt_reference the last function returns a number equal to the context ...
Introduction to using XPath in JavaScript - XPath
l the standard dom interfaces on that node. after iterating through all the h2 elements returned from our expression, any further calls to iteratenext() will return null. evaluating against an xml document within an extension the following uses an xml document located at chrome://yourextension/content/peopledb.xml as an example. ...