Search completed in 1.21 seconds.
TypeError: X.prototype.y called on incompatible type - JavaScript
the javascript exception "called on incompatible target (or object)" occurs when a function (on a given object), is called with a this not corresponding to the
type expected by the function. ...
... the javascript exception "called on incompatible target (or object)" occurs when a function (on a given object), is called with a this not corresponding to the
type expected by the function. ...
... the javascript exception "called on incompatible target (or object)" occurs when a function (on a given object), is called with a this not corresponding to the
type expected by the function. ...
...And 11 more matches
MIME types (IANA media types) - HTTP
a media
type (also known as a multipurpose internet mail extensions or mime
type) is a standard that indicates the nature and format of a document, file, or assortment of bytes. it is defined and standardized in ietf's rfc 6838. the internet assigned numbers authority (iana) is responsible for all official mime
types, and you can find the most up-to-date and complete list at their media
types page. important: browsers use the mime
type, not the file extension, to determine how to process a url, so it's important that web servers send the correct mime
type in the response's content-
type header. if this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled. ...
... page. important: browsers use the mime
type, not the file extension, to determine how to process a url, so it's important that web servers send the correct mime
type in the response's content-
type header. if this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled. structure of a mime
type the simplest mime
type consists of a
type and a sub
type; these are each strings which, when concatenated with a slash (/) between them, comprise a mime
type. no whitespace is allowed in a mime
type:
type/sub
type the
type represents the general category into which the data
type falls, such as video or text. ...
...ork correctly, and downloaded files may be mishandled. structure of a mime
type the simplest mime
type consists of a
type and a sub
type; these are each strings which, when concatenated with a slash (/) between them, comprise a mime
type. no whitespace is allowed in a mime
type:
type/sub
type the
type represents the general category into which the data
type falls, such as video or text. the sub
type identifies the exact kind of data of the specified
type the mime
type represents. for example, for the mime
type text, the sub
type might be plain (plain text), html (html source code), or calendar (for icalendar/.ics) files. each
type has its own set of possible sub
types, and a mime
type always has both a
type and a sub
type, never just one or the other. an optional parameter can be added to pro...
...And 39 more matches
TypedArray.prototype.findIndex() - JavaScript
the findindex() method returns an index in the
typed array, if an element in the
typed array satisfies the provided testing function. otherwise -1 is returned. see also the find() method, which returns the value of a found element in the
typed array instead of its index. 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
typedarray.findindex(callback[, thisarg]) parameters callback function to execute on each value in the
typed array, taking three arguments: element the current element being processed in the
typed array. index the index of the current element being processed in the
typed array. ...
...ease clone https://github.com/mdn/interactive-examples and send us a pull request. syntax
typedarray.findindex(callback[, thisarg]) parameters callback function to execute on each value in the
typed array, taking three arguments: element the current element being processed in the
typed array. index the index of the current element being processed in the
typed array. array the
typed array findindex was called upon. thisarg optional. object to use as this when executing callback. return value an index in the array if an element passes the test; otherwise, -1. description the findindex method executes the callback function once for each element present in the
typed array until it finds one where callback returns a true value. if such an element is found, findindex ...
... index in the array if an element passes the test; otherwise, -1. description the findindex method executes the callback function once for each element present in the
typed array until it finds one where callback returns a true value. if such an element is found, findindex immediately returns the index of that element. otherwise, findindex returns -1. callback is invoked only for indexes of the
typed array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values. callback is invoked with three arguments: the value of the element, the index of the element, and the
typed array object being traversed. if a thisarg parameter is provided to findindex, it will be used as the this for each invocation of the callback. if it is not p...
...And 16 more matches
Object.prototype.isPrototypeOf() - JavaScript
the isproto
typeof() method checks if an object exists in another object's proto
type chain. 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. isproto
typeof() differs from the instanceof operator. in the expression "object instanceof afunction", the object proto
type chain is checked against afunction.proto
type, not against afunction itself. syntax proto
typeobj.isproto
typeof(object) parameters object the object whose proto
type chain will be searched. return value a boolean indicating whether the calling object lies in the proto
type chain of the specified object. ...
...in the expression "object instanceof afunction", the object proto
type chain is checked against afunction.proto
type, not against afunction itself. syntax proto
typeobj.isproto
typeof(object) parameters object the object whose proto
type chain will be searched. return value a boolean indicating whether the calling object lies in the proto
type chain of the specified object. errors thrown
typeerror a
typeerror is thrown if proto
typeobj is undefined or null. description the isproto
typeof() method allows you to check whether or not an object exists within another object's proto
type chain. ...
... proto
type chain will be searched. return value a boolean indicating whether the calling object lies in the proto
type chain of the specified object. errors thrown
typeerror a
typeerror is thrown if proto
typeobj is undefined or null. description the isproto
typeof() method allows you to check whether or not an object exists within another object's proto
type chain. ...
...And 13 more matches
TypedArray.prototype.fill() - JavaScript
start optional. start index. defaults to 0. end optional. end index (not included). defaults to this.length. return value the modified array. ...
... start optional. start index. defaults to 0. end optional. end index (not included). defaults to this.length. return value the modified array. ...
... start optional. start index. defaults to 0. end optional. end index (not included). defaults to this.length. return value the modified array. ...
...And 13 more matches
TypedArray.prototype.slice() - JavaScript
a negative index can be used, indicating an offset from the end of the sequence. slice(-2) extracts the last two elements in the sequence. ...
... a negative index can be used, indicating an offset from the end of the sequence. slice(-2) extracts the last two elements in the sequence. ...
... a negative index can be used, indicating an offset from the end of the sequence. slice(-2) extracts the last two elements in the sequence. ...
...And 9 more matches
TypedArray.prototype.some() - JavaScript
the some() method tests whether some element in the
typed array passes the test implemented by the provided function. this method has the same algorithm as array.proto
type.some().
typedarray is one of the
typed array
types here. 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
typedarray.some(callback[, thisarg]) parameters callback function to test for each element, taking three arguments: currentvalue the current element being processed in the
typed array. index the index of the current element being processed in the
typed array. array the
typed array some was called upon. thisarg o...
...if such an element is found, some immediately returns true. otherwise, some returns false. callback is invoked with three arguments: the value of the element, the index of the element, and the array object being traversed. ...
...element, and the array object being traversed. if a thisarg parameter is provided to some, it will be passed to callback when invoked, for use as its this value. otherwise, the value undefined will be passed for use as its this value. the this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function. ...
...And 6 more matches
TypedArray.prototype.includes() - JavaScript
fromindex optional. the position in this array at which to begin searching for searchelement; defaults to 0. return value a boolean. ...
... fromindex optional. the position in this array at which to begin searching for searchelement; defaults to 0. return value a boolean. ...
... fromindex optional. the position in this array at which to begin searching for searchelement; defaults to 0. return value a boolean. ...
...And 5 more matches
TypedArray.prototype.filter() - JavaScript
the filter() method creates a new
typed array with all elements that pass the test implemented by the provided function. this method has the same algorithm as array.proto
type.filter().
typedarray is one of the
typed array
types here. 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
typedarray.filter(callback[, thisarg]) parameters callback function to test each element of the
typed array. invoked with arguments (element, index,
typedarray). return true to keep the element, false otherwise. thisarg optional value to use as this when executing callback. ...
..., please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax
typedarray.filter(callback[, thisarg]) parameters callback function to test each element of the
typed array. invoked with arguments (element, index,
typedarray). return true to keep the element, false otherwise. thisarg optional value to use as this when executing callback. return value a new
typed array with the elements that pass the test. description the filter() method calls a provided callback function once for each element in a
typed array, and constructs a new
typed array of all the values for which callback returns a true value. ...
... false otherwise. thisarg optional value to use as this when executing callback. return value a new
typed array with the elements that pass the test. description the filter() method calls a provided callback function once for each element in a
typed array, and constructs a new
typed array of all the values for which callback returns a true value. callback is invoked only for indexes of the
typed array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.
typed array elements which do not pass the callback test are simply skipped, and are not included in the new
typed array. ...
...And 4 more matches
TypedArray.prototype.find() - JavaScript
the find() method returns a value in the
typed array, if an element satisfies the provided testing function. otherwise undefined is returned.
typedarray is one of the
typed array
types here. see also the findindex() method, which returns the index of a found element in the
typed array instead of its 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. syntax
typedarray.find(callback[, thisarg]) parameters callback function to execute on each value in the
typed array, taking three arguments: element the current element being processed in the
typed array. index the index of the current element being...
...interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax
typedarray.find(callback[, thisarg]) parameters callback function to execute on each value in the
typed array, taking three arguments: element the current element being processed in the
typed array. index the index of the current element being processed in the
typed array. array the array find was called upon. thisarg optional. object to use as this when executing callback. return value a value in the array if an element passes the test; otherwise, undefined. description the find method executes the callback function once for each element present in the
typed array until it finds one where callback returns a true value. if such an element is ...
...a value in the array if an element passes the test; otherwise, undefined. description the find method executes the callback function once for each element present in the
typed array until it finds one where callback returns a true value. if such an element is found, find immediately returns the value of that element. otherwise, find returns undefined. callback is invoked only for indexes of the
typed array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values. callback is invoked with three arguments: the value of the element, the index of the element, and the
typed array object being traversed. if a thisarg parameter is provided to find, it will be used as the this for each invocation of the callback. if it is not provid...
...And 4 more matches
TypedArray.prototype.forEach() - JavaScript
the foreach() method executes a provided function once per array element. this method has the same algorithm as array.proto
type.foreach().
typedarray is one of the
typed array
types here. syntax
typedarray.foreach(callback[, thisarg]) parameters callback function that produces an element of the new
typed array, taking three arguments: currentvalue the current element being processed in the
typed array. index the index of the current element being processed in the array. array the array foreach() was called upon. thisarg optional. value to use as this when executing callback. return value undefined. description the foreach() method executes the provided callback once for each element present in the
typed array in ascending order. it is not invoked for indexes th...
... otherwise, the value undefined will be passed for use as its this value. ...
... passed to callback when invoked, for use as its this value. otherwise, the value undefined will be passed for use as its this value. the this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function. the range of elements processed by foreach() is set before the first invocation of callback. ...
...And 4 more matches
TypedArray.prototype.map() - JavaScript
the map() method creates a new
typed array with the results of calling a provided function on every element in this
typed array. this method has the same algorithm as array.proto
type.map().
typedarray is one of the
typed array
types here. 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
typedarray.map(mapfn[, thisarg]) parameters mapfn a callback function that produces an element of the new
typed array, taking three arguments: currentvalue the current element being processed in the
typed array. index optional the index of the current element being processed in the
typed array. array option...
.../mdn/interactive-examples and send us a pull request. syntax
typedarray.map(mapfn[, thisarg]) parameters mapfn a callback function that produces an element of the new
typed array, taking three arguments: currentvalue the current element being processed in the
typed array. index optional the index of the current element being processed in the
typed array. array optional the
typed array map() was called upon. thisarg optional value to use as this when executing mapfn. return value a new
typed array. description the map() method calls a provided callback function (mapfn) once for each element in a
typed array, in order, and constructs a new
typed array from the results. ...
...sed in the
typed array. array optional the
typed array map() was called upon. thisarg optional value to use as this when executing mapfn. return value a new
typed array. description the map() method calls a provided callback function (mapfn) once for each element in a
typed array, in order, and constructs a new
typed array from the results. mapfn is invoked only for indexes of the
typed array which have assigned values; it is not invoked for indexes that are undefined, those which have been deleted, or which have never been assigned values. mapfn is invoked with three arguments: the value of the element, the index of the element, and the
typed array object being traversed. if a thisarg parameter is provided to map(), it will be passed to mapfn when invoked, for use as its thi...
...And 4 more matches
TypedArray.prototype.reduce() - JavaScript
the reduce() method applies a function against an accumulator and each value of the
typed array (from left-to-right) has to reduce it to a single value. this method has the same algorithm as array.proto
type.reduce().
typedarray is one of the
typed array
types here. 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
typedarray.reduce(callback[, initialvalue]) parameters callback function to execute on each value in the
typed array, taking four arguments: previousvalue the value previously returned in the last invocation of the callback, or initialvalue, if supplied (see below). currentvalue the cu...
... initialvalue optional. object to use as the first argument to the first call of the callback. return value the value that results from the reduction. ...
...(callback[, initialvalue]) parameters callback function to execute on each value in the
typed array, taking four arguments: previousvalue the value previously returned in the last invocation of the callback, or initialvalue, if supplied (see below). currentvalue the current element being processed in the
typed array. index the index of the current element being processed in the
typed array. array the
typed array reduce was called upon. initialvalue optional. object to use as the first argument to the first call of the callback. return value the value that results from the reduction. ...
...And 4 more matches
TypedArray.prototype.subarray() - JavaScript
the offset is inclusive. the whole array will be included in the new view if this value is not specified. end optional element to end at. the offset is exclusive. ...
...the offset is inclusive. the whole array will be included in the new view if this value is not specified. end optional element to end at. the offset is exclusive. ...
...the offset is inclusive. the whole array will be included in the new view if this value is not specified. end optional element to end at. the offset is exclusive. ...
...And 4 more matches
TypedArray.prototype.every() - JavaScript
the every() method tests whether all elements in the
typed array pass the test implemented by the provided function. this method has the same algorithm as array.proto
type.every().
typedarray is one of the
typed array
types here. 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
typedarray.every(callback[, thisarg]) parameters callback function to test for each element, taking three arguments: currentvalue the current element being processed in the
typed array. index the index of the current element being processed in the
typed array. array the
typed array every was called upon. thisarg ...
...if such an element is found, the every method immediately returns false. otherwise, if callback returned a true value for all elements, every will return true. ...
...ement, and the array object being traversed. if a thisarg parameter is provided to every, it will be passed to callback when invoked, for use as its this value. otherwise, the value undefined will be passed for use as its this value. the this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function. ...
...And 3 more matches
TypedArray.prototype.reduceRight() - JavaScript
the reduceright() method applies a function against an accumulator and each value of the
typed array (from right-to-left) has to reduce it to a single value. this method has the same algorithm as array.proto
type.reduceright().
typedarray is one of the
typed array
types here. syntax
typedarray.reduceright(callback[, initialvalue]) parameters callback function to execute on each value in the
typed array, taking four arguments: previousvalue the value previously returned in the last invocation of the callback, or initialvalue, if supplied (see below). currentvalue the current element being processed in the
typed array. index the index of the current element being processed in the
typed array. array the
typed array reduce was called upon. initialvalue optional. obje...
...array. index the index of the current element being processed in the
typed array. array the
typed array reduce was called upon. initialvalue optional. object to use as the first argument to the first call of the callback. return value the value that results from the reduction. description the reduceright method executes the callback function once for each element present in the
typed array, excluding holes in the
typed array, receiving four arguments: the initial value (or value from the previous callback call), the value of the current element, the current index, and the
typed array over which iteration is occurring. ...
...uceright method executes the callback function once for each element present in the
typed array, excluding holes in the
typed array, receiving four arguments: the initial value (or value from the previous callback call), the value of the current element, the current index, and the
typed array over which iteration is occurring. the call to the reduceright callback would look something like this:
typedarray.reduceright(function(previousvalue, currentvalue, index,
typedarray) { // ... }); the first time the function is called, the previousvalue and currentvalue can be one of two values. if an initialvalue was provided in the call to reduceright, then previousvalue will be equal to initialvalue and currentvalue will be equal to the last value in the
typed array. if no initialvalue was provid...
...And 2 more matches
TypeError: invalid Array.prototype.sort argument - JavaScript
the javascript exception "invalid array.proto
type.sort argument" occurs when the argument of array.proto
type.sort() isn't either undefined or a function which compares its operands. message
typeerror: argument is not a function object (edge)
typeerror: invalid array.proto
type.sort argument (firefox) error
type typeerror what went wrong? ...
... the javascript exception "invalid array.proto
type.sort argument" occurs when the argument of array.proto
type.sort() isn't either undefined or a function which compares its operands. message
typeerror: argument is not a function object (edge)
typeerror: invalid array.proto
type.sort argument (firefox) error
type typeerror what went wrong? ...
...t() isn't either undefined or a function which compares its operands. message
typeerror: argument is not a function object (edge)
typeerror: invalid array.proto
type.sort argument (firefox) error
type typeerror what went wrong? ...
...on object (edge)
typeerror: invalid array.proto
type.sort argument (firefox) error
type typeerror what went wrong? ...
TypedArray.prototype.indexOf() - JavaScript
the indexof() method returns the first index at which a given element can be found in the
typed array, or -1 if it is not present. this method has the same algorithm as array.proto
type.indexof().
typedarray is one of the
typed array
types here. 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
typedarray.indexof(searchelement[, fromindex = 0]) parameters searchelement element to locate in the
typed array. fromindex the index to start the search at. if the index is greater than or equal to the
typed array's length, -1 is returned, which means the
typed array will not be searched. if the provided index va...
...ntax
typedarray.indexof(searchelement[, fromindex = 0]) parameters searchelement element to locate in the
typed array. fromindex the index to start the search at. if the index is greater than or equal to the
typed array's length, -1 is returned, which means the
typed array will not be searched. if the provided index value is a negative number, it is taken as the offset from the end of the
typed array. note: if the provided index is negative, the
typed array is still searched from front to back. if the calculated index is less than 0, then the whole
typed array will be searched. default: 0 (entire
typed array is searched). return value the first index of the element in the array; -1 if not found. ...
...from the end of the
typed array. note: if the provided index is negative, the
typed array is still searched from front to back. if the calculated index is less than 0, then the whole
typed array will be searched. default: 0 (entire
typed array is searched). return value the first index of the element in the array; -1 if not found. description indexof compares searchelement to elements of the
typed array using strict equality (the same method used by the ===, or triple-equals, operator). ...
...of the
typed array using strict equality (the same method used by the ===, or triple-equals, operator). examples using indexof var uint8 = new uint8array([2, 5, 9]); uint8.indexof(2); // 0 uint8.indexof(7); // -1 uint8.indexof(9, 2); // 2 uint8.indexof(2, -1); // -1 uint8.indexof(2, -3); // 0 specifications specification ecmascript (ecma-262)the definition of '
typedarray.proto
type.indexof' in that specification. ...
TypedArray.prototype.join() - JavaScript
the join() method joins all elements of an array into a string. this method has the same algorithm as array.proto
type.join().
typedarray is one of the
typed array
types here. 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
typedarray.join([separator = ',']); parameters separator optional. specifies a string to separate each element. the separator is converted to a string if necessary. if omitted, the
typed array elements are separated with a comma (","). ...
...amples and send us a pull request. syntax
typedarray.join([separator = ',']); parameters separator optional. specifies a string to separate each element. the separator is converted to a string if necessary. if omitted, the
typed array elements are separated with a comma (","). return value a string with all array elements joined. polyfill since there is no global object with the name
typedarray, polyfilling must be done on an "as needed" basis. ...
...r optional. specifies a string to separate each element. the separator is converted to a string if necessary. if omitted, the
typed array elements are separated with a comma (","). return value a string with all array elements joined. polyfill since there is no global object with the name
typedarray, polyfilling must be done on an "as needed" basis. // https://tc39.github.io/ecma262/#sec-%
typedarray%.proto
type.join if (!uint8array.proto
type.join) { object.defineproperty(uint8array.proto
type, 'join', { value: array.proto
type.join }); } if you need to support truly obsolete javascript engines that don't support object.defineproperty, it's best not to polyfill array.proto
type methods at all, as you can't make them non-enumerable. examples using join var uint8 = new uint8arra...
...avascript engines that don't support object.defineproperty, it's best not to polyfill array.proto
type methods at all, as you can't make them non-enumerable. examples using join var uint8 = new uint8array([1,2,3]); uint8.join(); // '1,2,3' uint8.join(' / '); // '1 / 2 / 3' uint8.join(''); // '123' specifications specification ecmascript (ecma-262)the definition of '
typedarray.proto
type.join' in that specification. ...
TypedArray.prototype.lastIndexOf() - JavaScript
the lastindexof() method returns the last index at which a given element can be found in the
typed array, or -1 if it is not present. the
typed array is searched backwards, starting at fromindex. this method has the same algorithm as array.proto
type.lastindexof().
typedarray is one of the
typed array
types here. 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
typedarray.lastindexof(searchelement[, fromindex =
typedarray.length]) parameters searchelement element to locate in the
typed array. fromindex optional. the index at which to start searching backwards. defaults to the
typed array's length, i.e. ...
...ibute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax
typedarray.lastindexof(searchelement[, fromindex =
typedarray.length]) parameters searchelement element to locate in the
typed array. fromindex optional. the index at which to start searching backwards. defaults to the
typed array's length, i.e. the whole
typed array will be searched. if the index is greater than or equal to the length of the
typed array, the whole
typed array will be searched. if negative, it is taken as the offset from the end of the
typed array. ...
...e
typed array. fromindex optional. the index at which to start searching backwards. defaults to the
typed array's length, i.e. the whole
typed array will be searched. if the index is greater than or equal to the length of the
typed array, the whole
typed array will be searched. if negative, it is taken as the offset from the end of the
typed array. note that even when the index is negative, the
typed array is still searched from back to front. if the calculated index is less than 0, -1 is returned, i.e. the
typed array will not be searched. return value the last index of the element in the array; -1 if not found. description lastindexof compares searchelement to elements of the
typed array using strict equality (the same method used by the ===, or triple-equals, operator). examples us...
... used by the ===, or triple-equals, operator). examples using lastindexof var uint8 = new uint8array([2, 5, 9, 2]); uint8.lastindexof(2); // 3 uint8.lastindexof(7); // -1 uint8.lastindexof(2, 3); // 3 uint8.lastindexof(2, 2); // 0 uint8.lastindexof(2, -2); // 0 uint8.lastindexof(2, -1); // 3 specifications specification ecmascript (ecma-262)the definition of '
typedarray.proto
type.lastindexof' in that specification. ...
TypedArray.prototype.set() - JavaScript
the set() method stores multiple values in the
typed array, reading input values from a specified 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
typedarray.set(array[, offset])
typedarray.set(
typedarray[, offset]) parameters array the array from which to copy values. all values from the source array are copied into the target array, unless the length of the source array plus the offset exceeds the length of the target array, in which case an exception is thrown. ...
... offset optional the offset into the target array at which to begin writing values from the source array. ...
... offset optional the offset into the target array at which to begin writing values from the source array. ...
...gently copy the source range of the buffer to the destination range. offset optional the offset into the target array at which to begin writing values from the source array. if this value is omitted, 0 is assumed (that is, the source array will overwrite values in the target array starting at index 0). exceptions a rangeerror, if the offset is set such as it would store beyond the end of the
typed array. examples using set() var buffer = new arraybuffer(8); var uint8 = new uint8array(buffer); uint8.set([1, 2, 3], 3); console.log(uint8); // uint8array [ 0, 0, 0, 1, 2, 3, 0, 0 ] specifications specification ecmascript (ecma-262)the definition of '
typedarray.proto
type.set' in that specification. ...
TypedArray.prototype.toLocaleString() - JavaScript
the tolocalestring() method returns a string representing the elements of the
typed array. the elements are converted to strings and are separated by a locale-specific string (such as a comma “,”). this method has the same algorithm as array.proto
type.tolocalestring() and, as the
typed array elements are numbers, the same algorithm as number.proto
type.tolocalestring() applies for each element.
typedarray is one of the
typed array
types here. syntax
typedarray.tolocalestring([locales [, options]]); parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. in implementations, which ignore the locales and options arguments, the locale used and the form of the string returned ...
...n and let applications specify the language whose formatting conventions should be used. in implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation dependent. see the intl.numberformat() constructor for details on these parameters and how to use them. return value a string representing the elements of the
typed array. examples using tolocalestring var uint = new uint32array([2000, 500, 8123, 12, 4212]); uint.tolocalestring(); // if run in a de-de locale // "2.000,500,8.123,12,4.212" uint.tolocalestring('en-us'); // "2,000,500,8,123,12,4,212" uint.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' }); // "ᅣ2,000,ᅣ500,ᅣ8,123,ᅣ12,ᅣ4,212" specifications specification ...
... ...
... ...
TypedArray.prototype.toString() - JavaScript
the tostring() method returns a string representing the specified array and its elements. this method has the same algorithm as array.proto
type.tostring().
typedarray is one of the
typed array
types here. 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
typedarray.tostring() return value a string representing the elements of the
typed array. examples the
typedarray objects override the tostring method of object. ...
... 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
typedarray.tostring() return value a string representing the elements of the
typed array. examples the
typedarray objects override the tostring method of object. for
typedarray objects, the tostring method joins the array and returns one string containing each
typed array element separated by commas. ...
...ctive-examples and send us a pull request. syntax
typedarray.tostring() return value a string representing the elements of the
typed array. examples the
typedarray objects override the tostring method of object. for
typedarray objects, the tostring method joins the array and returns one string containing each
typed array element separated by commas. for example, the following code creates a
typed array and uses tostring to convert the array to a string. var numbers = new uint8array([2, 5, 8, 1, 4]) numbers.tostring(); // "2,5,8,1,4" javascript calls the tostring method automatically when a
typed array is to be represented as a text value or when an array is referred to in a string concatenation. ...
...xample, the following code creates a
typed array and uses tostring to convert the array to a string. var numbers = new uint8array([2, 5, 8, 1, 4]) numbers.tostring(); // "2,5,8,1,4" javascript calls the tostring method automatically when a
typed array is to be represented as a text value or when an array is referred to in a string concatenation. compatibility if a browser doesn't support the
typedarray.proto
type.tostring() method yet, javascript will call the tostring method of object: var numbers = new uint8array([2, 5, 8, 1, 4]) numbers.tostring(); // "[object uint8array]" specifications specification ecmascript (ecma-262)the definition of 'array.proto
type.tostring' in that specification. ...
TypedArray.prototype.byteLength - JavaScript
the bytelength accessor property represents the length (in bytes) of a
typed 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. description the bytelength property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when a
typedarray is constructed and cannot be changed. if the
typedarray is not specifying an byteoffset or a length, the length of the referenced arraybuffer will be returned.
typedarray is one of the
typedarray objects. examples using the bytelength property var buffer = new arraybuffer(8); var uint8 = new ui...
... ...
... ...
TypedArray.prototype.copyWithin() - JavaScript
the copywithin() method copies the sequence of array elements within the array to the position starting at target. the copy is taken from the index positions of the second and third arguments start and end. the end argument is optional and defaults to the length of the array. this method has the same algorithm as array.proto
type.copywithin.
typedarray is one of the
typed array
types here. 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
typedarray.copywithin(target, start[, end = this.length]) parameters target target start index position where to copy the elements to. start source start index position...
... send us a pull request. syntax
typedarray.copywithin(target, start[, end = this.length]) parameters target target start index position where to copy the elements to. start source start index position where to start copying elements from. end optional optional. source end index position where to end copying elements from. return value the modified array. description see array.proto
type.copywithin for more details. ...
...y.proto
type.copywithin for more details. examples using copywithin var buffer = new arraybuffer(8); var uint8 = new uint8array(buffer); uint8.set([1,2,3]); console.log(uint8); // uint8array [ 1, 2, 3, 0, 0, 0, 0, 0 ] uint8.copywithin(3,0,3); console.log(uint8); // uint8array [ 1, 2, 3, 1, 2, 3, 0, 0 ] specifications specification ecmascript (ecma-262)the definition of '
typedarray.proto
type.copywithin' in that specification. ...
TypedArray.prototype.length - JavaScript
the length accessor property represents the length (in elements) of a
typed 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. description the length property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when a
typedarray is constructed and cannot be changed. if the
typedarray is not specifying an byteoffset or a length, the length of the referenced arraybuffer will be returned.
typedarray is one of the
typedarray objects. examples using the length property var buffer = new arraybuffer(8); var uint8 = new uint8array(...
... ...
... ...
TypedArray.prototype.sort() - JavaScript
the sort() method sorts the elements of a
typed array numerically in place and returns the
typed array. this method has the same algorithm as array.proto
type.sort(), except that sorts the values numerically instead of as strings.
typedarray is one of the
typed array
types here. 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
typedarray.sort([comparefunction]) parameters comparefunction optional specifies a function that defines the sort order. return value the sorted
typed array. examples using sort for more examples, see also the array.proto
type.sort() method. let numbers = new uint8array([40, 1...
... ...
... ...
TypedArray.prototype.buffer - JavaScript
the buffer accessor property represents the arraybuffer referenced by a
typedarray at construction time. 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. description the buffer property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when the
typedarray is constructed and cannot be changed.
typedarray is one of the
typedarray objects. examples using the buffer property var buffer = new arraybuffer(8); var uint16 = new uint16array(buffer); uint16.buffer; // arraybuffer { bytelength: 8 } specifications specification...
...only read this property. the value is established when the
typedarray is constructed and cannot be changed.
typedarray is one of the
typedarray objects. examples using the buffer property var buffer = new arraybuffer(8); var uint16 = new uint16array(buffer); uint16.buffer; // arraybuffer { bytelength: 8 } specifications specification ecmascript (ecma-262)the definition of '
typedarray.proto
type.buffer' in that specification. ...
TypedArray.prototype.byteOffset - JavaScript
the byteoffset accessor property represents the offset (in bytes) of a
typed array from the start of its arraybuffer. description the byteoffset property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when a
typedarray is constructed and cannot be changed.
typedarray is one of the
typedarray objects. ...
...
typedarray is one of the
typedarray objects. examples using the byteoffset property var buffer = new arraybuffer(8); var uint8 = new uint8array(buffer); uint8.byteoffset; // 0 (no offset specified) var uint8 = new uint8array(buffer, 3); uint8.byteoffset; // 3 (as specified when constructing uint8array) specifications specification ecmascript (ecma-262)the definition of '
typedarray.proto
type.byteoffset' in that specification. ...
TypedArray.prototype.reverse() - JavaScript
the reverse() method reverses a
typed array in place. the first
typed array element becomes the last and the last becomes the first. this method has the same algorithm as array.proto
type.reverse().
typedarray is one of the
typed array
types here. 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
typedarray.reverse(); return value the reversed array. ...
...teractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax
typedarray.reverse(); return value the reversed array. examples using reverse var uint8 = new uint8array([1, 2, 3]); uint8.reverse(); console.log(uint8); // uint8array [3, 2, 1] specifications specification ecmascript (ecma-262)the definition of '
typedarray.proto
type.reverse' in that specification. ...
TypeScript support in Svelte - Learn web development
previous overview: client-side javascript frameworks next in the last article we learned about svelte stores and even implemented our own custom store to persist the app's information to web storage. we also had a look at using the transition directive to implement animations on dom elements in svelte. we will now learn how to use
typescript in svelte applications. first we'll learn what
typescript is and what benefits it can bring us. then we'll see how to configure our project to work with
typescript files. finally we will go over our app and see what modifications we have to make to fully take advantage of
typescript features. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have kn...
...cations we have to make to fully take advantage of
typescript features. 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 how to configure and use
typescript when developing svelte applications. note that our application is fully functional and porting it to
typescript is completely optional. there are different opinions about it, and in this chapter we will talk briefly about the pros and cons of using
typescript. even if you are not planning to adopt it, this article will be useful for allowing you to learn what it has to offer and help...
...application is fully functional and porting it to
typescript is completely optional. there are different opinions about it, and in this chapter we will talk briefly about the pros and cons of using
typescript. even if you are not planning to adopt it, this article will be useful for allowing you to learn what it has to offer and help you make your own decision. if you are not interested at all in
typescript, you can skip to the next chapter, where we will look at different options for deploying our svelte applications, further resources, and more. ...
...And 108 more matches
Inheritance and the prototype chain - JavaScript
javascript is a bit confusing for developers experienced in class-based languages (like java or c++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in es2015, but is syntactical sugar, javascript remains proto
type-based). 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 proto
type. that proto
type object has a proto
type of its own, and so on until an object is reached with null as its proto
type. by definition, null has no proto
type, and acts as the final link in this proto
type chain. nearly all objects in javascript are instances of object which sits on the top of a proto
type chain. while this confusion is often considered to be on...
...pe chain. nearly all objects in javascript are instances of object which sits on the top of a proto
type chain. while this confusion is often considered to be one of javascript's weaknesses, the prototypal inheritance model itself is, in fact, more powerful than the classic model. it is, for example, fairly trivial to build a classic model on top of a prototypal model. inheritance with the proto
type chain inheriting properties javascript objects are dynamic "bags" of properties (referred to as own properties). javascript objects have a link to a proto
type object. ...
..., for example, fairly trivial to build a classic model on top of a prototypal model. inheritance with the proto
type chain inheriting properties javascript objects are dynamic "bags" of properties (referred to as own properties). javascript objects have a link to a proto
type object. when trying to access a property of an object, the property will not only be sought on the object but on the proto
type of the object, the proto
type of the proto
type, and so on until either a property with a matching name is found or the end of the proto
type chain is reached. following the ecmascript standard, the notation someobject.[[proto
type]] is used to designate the proto
type of someobject. ...
...And 64 more matches
Type conversion
implicit convert in js-c
types, data could be converted implicitly when passing to or returning from a function
type call, or setting pointer content, an array element or a struct field. ...
... implicit convert in js-c
types, data could be converted implicitly when passing to or returning from a function
type call, or setting pointer content, an array element or a struct field. ...
... implicit convert in js-c
types, data could be converted implicitly when passing to or returning from a function
type call, or setting pointer content, an array element or a struct field. ...
...And 55 more matches
ctypes
similar to errno in libc, available on all platforms. cannot be set. winlasterror number|undefined the value of the latest windows error. ...
...similar to errno in libc, available on all platforms. cannot be set. winlasterror number|undefined the value of the latest windows error. ...
...similar to errno in libc, available on all platforms. cannot be set. winlasterror number|undefined the value of the latest windows error. ...
...And 46 more matches
Using Objective-C from js-ctypes
speech synthesis example let's start with the following objective-c code, which invokes the speech synthesis api to say "hello, firefox!". it uses the default system voice and waits until the speaking is done. ...
... speech synthesis example let's start with the following objective-c code, which invokes the speech synthesis api to say "hello, firefox!". it uses the default system voice and waits until the speaking is done. ...
... speech synthesis example let's start with the following objective-c code, which invokes the speech synthesis api to say "hello, firefox!". it uses the default system voice and waits until the speaking is done. ...
...And 41 more matches
Using js-ctypes
before you can use js-c
types, you need to import the c
types.jsm code module. this is as simple as including the following line of code in the desired javascript scope: components.utils.import("resource://gre/modules/c
types.jsm") loading a native library once you've imported the code module, you can call the c
types.open() method to load each native library you wish to use. ...
...e module. this is as simple as including the following line of code in the desired javascript scope: components.utils.import("resource://gre/modules/c
types.jsm") loading a native library once you've imported the code module, you can call the c
types.open() method to load each native library you wish to use. ...
...instead, you'll need to create a shim library that uses c functions that then call into the c++ library for you. ...
...And 38 more matches
Object prototypes - Learn web development
previous overview: objects next proto
types are the mechanism by which javascript objects inherit features from one another. in this article, we explain how proto
type chains work and look at how the proto
type property can be used to add methods to existing constructors. note: this article covers traditional javascript constructors and classes. in the next article, we talk about the modern way of doing things, which provides easier syntax to achieve the same things — see ecmascript 2015 classes. prerequisites: understanding javascript functions, familiarity with javascript basics (see first steps and building blocks), and oojs basics (see introduction to objects). ...
... the next article, we talk about the modern way of doing things, which provides easier syntax to achieve the same things — see ecmascript 2015 classes. prerequisites: understanding javascript functions, familiarity with javascript basics (see first steps and building blocks), and oojs basics (see introduction to objects). ...
...e, we talk about the modern way of doing things, which provides easier syntax to achieve the same things — see ecmascript 2015 classes. prerequisites: understanding javascript functions, familiarity with javascript basics (see first steps and building blocks), and oojs basics (see introduction to objects). ...
...And 33 more matches
<input type="file"> - HTML: Hypertext Markup Language
once chosen, the files can be uploaded to a server using form submission, or manipulated using javascript code and the file api. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value a domstring representing the path to the selected file. ...
...equest. value a domstring representing the path to the selected file. events change and input supported common attributes required additional attributes accept, capture, files, multiple idl attributes files and value dom interface htmlinputelement properties properties that apply only to elements of
type file methods select() value a file input's value attribute contains a domstring that represents the path to the selected file(s). if the user selected multiple files, the value represents the first file in the list of files they selected. the other files can be identified using the input's htmlinputelement.files property. note: if multiple files are selected, the strin...
...ted, the string represents the first selected file. javascript can access the other files through the input's files property. if no file is yet selected, the string is "" (empty). the string is prefixed with c:\fakepath\, to prevent malicious software from guessing the user's file structure. ...
...And 33 more matches
TypedArray - JavaScript
a
typedarray object describes an array-like view of an underlying binary data buffer. there is no global property named
typedarray, nor is there a directly visible
typedarray constructor. instead, there are a number of different global properties, whose values are
typed array constructors for specific element
types, listed below. on the following pages you will find common properties and methods that can be used with any
typed array containing elements of any
type. 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. ...
...ollowing pages you will find common properties and methods that can be used with any
typed array containing elements of any
type. 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. description ecmascript 2015 defines a
typedarray constructor that serves as the [[proto
type]] of all
typedarray constructors. this constructor is not directly exposed: there is no global %
typedarray% or
typedarray property. it is only directly accessible through object.getproto
typeof(int8array) and similar. ...
... clone https://github.com/mdn/interactive-examples and send us a pull request. description ecmascript 2015 defines a
typedarray constructor that serves as the [[proto
type]] of all
typedarray constructors. this constructor is not directly exposed: there is no global %
typedarray% or
typedarray property. it is only directly accessible through object.getproto
typeof(int8array) and similar. all
typedarrays constructors inherit common properties from the %
typedarray% constructor function. additionally, all
typed array proto
types (
typedarray.proto
type) have %
typedarray%.proto
type as their [[proto
type]]. the %
typedarray% constructor on its own is not particularly useful. ...
...And 32 more matches
Declaring types
the c
types object offers a number of constructor methods that let you declare
types. every
type is represented by a c
type object, which, in turn, provides a constructor method you can call to define values of those
types. each
type you declare using js-c
types corresponds to a compatible c declaration.
types are declared in terms of other, already defined
types. at the core of all this is a set of predefined
types provided by js-c
types. these are all primitive
types, upon which all other
types are eventually based. primitive
types primitive
types are those
types that represent a single value in memory, as opposed to arrays, structures, or functions. you can define values of these
types without declaring new
types. for example, to define a new 32-bit integer variable with the value 5: var...
...ined
types provided by js-c
types. these are all primitive
types, upon which all other
types are eventually based. primitive
types primitive
types are those
types that represent a single value in memory, as opposed to arrays, structures, or functions. you can define values of these
types without declaring new
types. for example, to define a new 32-bit integer variable with the value 5: var i = c
types.int32_t(5); you can then pass a pointer to this value to a c function that requires a pointer to a 32-bit integer, like this: some_c_function(i.address()); declaring new primitive
types there are times when you want to create new
types that are simply new names for existing primitive
types. ...
...5: var i = c
types.int32_t(5); you can then pass a pointer to this value to a c function that requires a pointer to a 32-bit integer, like this: some_c_function(i.address()); declaring new primitive
types there are times when you want to create new
types that are simply new names for existing primitive
types. for example, on windows, you may wish to be able to use the windows-standard dword
type name for unsigned 32-bit integers. to declare this
type, you can simply do: const dword = c
types.uint32_t; after doing this, dword is a c
type that can then be used to represent 32-bit unsigned integers. structures structures are declared using the c
types.struct
type() constructor. this method accepts as input the name of the structure and an array of field descriptors, each describing one fie...
...And 31 more matches
Using COM from js-ctypes
erent windows applications among themselves, microsoft has developed a series of technologies alongside the main windows api. this started out with dynamic data exchange (dde), which was superseded by object linking and embedding (ole) and later by the component object model (com), automation objects, activex controls, and the .net framework. ...
...es of technologies alongside the main windows api. this started out with dynamic data exchange (dde), which was superseded by object linking and embedding (ole) and later by the component object model (com), automation objects, activex controls, and the .net framework. com is c++ and it cannot be written directly with js-c
types. this documentaion explains how to convert the com c++ code into js-c
types code. basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 505907 - support c++ calling from jsc
types converting com code to c code to convert com code to js-c
types, we need to write c++ vtable pointers in c. after that, we can pass a pointer . speech synthesis example let...
...se(); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.cpp, and run following command in the directory (needs visual studio). $ cl ole32.lib test.cpp vtable needs vtable description here. the order of the vtable is very critical. when used from c or js-c
types, the order of the vtable methods should match the order of the c++ vtable. __stdcall and __cdecl needs __stdcall and __cdecl (callback_abi) description here. call by reference needs c++ reference (&) and c pointer (*) description here. converted c code now we can translate whole code into c syntax. #include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { ...
...And 29 more matches
Function.prototype.bind() - JavaScript
onstructed. the provided this value is ignored, while prepended arguments are provided to the emulated function. polyfill because older browsers are generally also slower browsers, it is far more critical than most people recognize to create performance polyfills to make the browsing experience in outdated browsers slightly less horrible. thus, presented below are two options for function.proto
type.bind() polyfills: the first one is much smaller and more performant, but does not work when using the new operator. the second one is bigger and less performant, but it permits some usage of the new operator on bound functions. generally, in most code it's very rare to see new used on a bound function, so it is generally best to go with the first option. // does not work with `new (funca.
...ch smaller and more performant, but does not work when using the new operator. the second one is bigger and less performant, but it permits some usage of the new operator on bound functions. generally, in most code it's very rare to see new used on a bound function, so it is generally best to go with the first option. ...
... when using the new operator. the second one is bigger and less performant, but it permits some usage of the new operator on bound functions. generally, in most code it's very rare to see new used on a bound function, so it is generally best to go with the first option. ...
...And 27 more matches
The HTML5 input types - Learn web development
previous overview: forms next in the previous article we looked at the <input> element, covering the original values of the
type attribute available since the early days of html. now we'll look at the functionality of newer form controls in detail, including some new input
types, which were added in html5 to allow collection of specific
types of data. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand the newer input
type values available to create native form controls, and how to implement them using html. note: most of the features discussed in this article have wide support across browsers. we'll note any exceptions. if you want more detail on browser support, you should consult our html forms elemen...
... objective: to understand the newer input
type values available to create native form controls, and how to implement them using html. note: most of the features discussed in this article have wide support across browsers. we'll note any exceptions. if you want more detail on browser support, you should consult our html forms element reference, and in particular our extensive <input>
types reference. because html form control appearance may be quite different from a designer's specifications, web developers sometimes build their own custom form controls. we cover this in an advanced tutorial: how to build custom form widgets. ...
...re detail on browser support, you should consult our html forms element reference, and in particular our extensive <input>
types reference. because html form control appearance may be quite different from a designer's specifications, web developers sometimes build their own custom form controls. we cover this in an advanced tutorial: how to build custom form widgets. e-mail address field this
type of field is set using the value email for the
type attribute: <input
type="email" id="email" name="email"> when this
type is used, the user is required to
type a valid email address into the field. any other content causes the browser to display an error when the form is submitted. you can see this in action in the below screenshot. you can also use the multiple attribute in combination with...
...And 26 more matches
JavaScript-DOM Prototypes in Mozilla
proto
type setup on an xpconnect wrapped dom node in mozilla when a dom node is accessed from javascript in mozilla, the native c++ dom node is wrapped using xpconnect and the wrapper is exposed to javascript as the javascript representation of the dom node. when xpconnect wraps a c++ object it will create a jsobject that is unique to this c++ object. in the case where the c++ object has class info (nsiclassinfo), the jsobject is a more or less empty jsobject which is not really that special. ...
... the dom node. when xpconnect wraps a c++ object it will create a jsobject that is unique to this c++ object. in the case where the c++ object has class info (nsiclassinfo), the jsobject is a more or less empty jsobject which is not really that special. all the methods that are supposed to show up on this jsobject are actually not properties of the object itself, but rather properties of the proto
type of the jsobject for the wrapper (unless the c++ object's class info has the flag nsixpcscriptable::dont_share_proto
type set, but lets assume that's not the case here). as an example of this let's look at an html image element in a document. var obj = document.images[0]; here, obj will not really have any properties (except for the standard jsobject properties such as constructor, and the non-...
...able::dont_share_proto
type set, but lets assume that's not the case here). as an example of this let's look at an html image element in a document. var obj = document.images[0]; here, obj will not really have any properties (except for the standard jsobject properties such as constructor, and the non-standard __parent__, __proto__, etc.), all the dom functionality of obj comes from obj's proto
type (obj.__proto__) that xpconnect sets up when exposing the first image in document to javascript. here are a few of the properties of obj's proto
type: obj.__proto__ parentnode (getter function) src (getter and setter functions) getelementsbytagname (function) text_node (number property, constant) ... all those properties come from the interfaces that the c++ image object (nshtmlimageel...
...And 26 more matches
typeof - JavaScript
the
typeof operator returns a string indicating the
type of the unevaluated operand. 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
typeof operator is followed by its operand:
typeof operand
typeof(operand) parameters operand an expression representing the object or primitive whose
type is to be returned. description the following table summarizes the possible return values of
typeof. for more information about
types and primitives, see also the javascript data structure page. ...
... a pull request. syntax the
typeof operator is followed by its operand:
typeof operand
typeof(operand) parameters operand an expression representing the object or primitive whose
type is to be returned. description the following table summarizes the possible return values of
typeof. for more information about
types and primitives, see also the javascript data structure page. ...
...ect" (see below) boolean "boolean" number "number" bigint (new in ecmascript 2020) "bigint" string "string" symbol (new in ecmascript 2015) "symbol" function object (implements [[call]] in ecma-262 terms) "function" any other object "object" note: ecmascript 2019 and older permitted implementations to have
typeof return any implementation-defined string value for non-callable non-standard exotic objects. the only known browser to have actually taken advantage of this is old internet explorer (see below). examples basic usage // numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof(42) === 'number';
typeof math.ln2 === 'number';
typeof infinity === 'number';
typeof nan === 'number'; // de...
...And 26 more matches
The "codecs" parameter in common media types - Web media technologies
at a fundamental level, you can specify the
type of a media file using a simple mime
type, such as video/mp4 or audio/mpeg. however, many media
types—especially those that support video tracks—can benefit from the ability to more precisely describe the format of the data within them. for instance, just describing a video in an mpeg-4 file with the mime
type video/mp4 doesn't say anything about what format the actual media within takes. for that reason, the codecs parameter can be added to the mime
type describing media content. with it, container-specific information can be provided. this information may include things like the profile of the video codec, the
type used for the audio tracks, and so forth. ...
...4 doesn't say anything about what format the actual media within takes. for that reason, the codecs parameter can be added to the mime
type describing media content. with it, container-specific information can be provided. this information may include things like the profile of the video codec, the
type used for the audio tracks, and so forth. this guide briefly examines the syntax of the media
type codecs parameter and how it's used with the mime
type string to provide details about the contents of audio or video media beyond simply indicating the container
type. ...
...n be provided. this information may include things like the profile of the video codec, the
type used for the audio tracks, and so forth. this guide briefly examines the syntax of the media
type codecs parameter and how it's used with the mime
type string to provide details about the contents of audio or video media beyond simply indicating the container
type. general syntax a basic mime media
type is expressed by stating the
type of media (audio, video, etc), then a slash character (/), then the container format used to contain the media: audio/mpeg an audio file using the mpeg file
type, such as an mp3. video/ogg a video file using the ogg file
type. video/mp4 a video file using the mpeg-4 file
type. video/quicktime a video file in apple's quicktime format. as noted elsewhere, t...
...And 26 more matches
<input type="tel"> - HTML: Hypertext Markup Language
<input> elements of
type tel are used to let the user enter and edit a telephone number. unlike <input
type="email"> and <input
type="url"> , the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world. 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. ...
...lly validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world. 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. 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: bro...
...ntical 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 attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(...
...And 25 more matches
<input type="time"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the 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, valueasdate, valueasnumber, and list. methods select(), stepdown(), and stepup(). value a domstring containing the value of the time entered into the input. ...
...And 25 more matches
<input type="number"> - HTML: Hypertext Markup Language
value any floating-point number, or empty. ...
...to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip. 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. on browsers that don't support inputs of
type number, a number input falls back to
type text. value any floating-point number, or empty. events change and input supported common attributes autocomplete, list, placeholder, readonly idl attributes list, value, valueasnumber methods select(), stepup(), stepdown() value any floating-point number, or empty. you can set a default...
...pty. events change and input supported common attributes autocomplete, list, placeholder, readonly idl attributes list, value, valueasnumber methods select(), stepup(), stepdown() value any floating-point number, or empty. ...
...And 24 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
<input> elements of
type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes. 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 control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations. in other browsers, these degrade gracefully to simple <input
type="text"> controls. the control is intended to simply represent a local date and time, not necessarily th...
... (in the local time zone), or empty. events change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasnumber. methods select(), stepdown(), stepup() value a domstring representing the value of the date entered into the input. ...
...senting the value of the date entered into the input. the format of the date and time value used by this input
type is described in local date and time strings in date and time formats used in html. you can set a default value for the input by including a date and time inside the value attribute, like so: <label for="party">enter a date and time for your party booking:</label> <input id="party"
type="datetime-local" name="partydate" value="2017-06-01t08:30"> one thing to note is that the displayed date and time formats differ from the actual value; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time value is always formatted yyyy-mm-ddthh:mm. when the above value submitted to the server, for example, it will...
...And 23 more matches
<input type="email"> - HTML: Hypertext Markup Language
<input> elements of
type email are used to let the user enter and edit an e-mail address, or, if the multiple attribute is specified, a list of e-mail addresses. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not. ...
...request. the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not. ...
... a valid e-mail address or not. on browsers that don't support inputs of
type email, a email input falls back to being a standard text input. value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and
type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax. more specifically, there are three possible value formats that will pass validation: an empty string ("") indicating that the user did not enter a value or that the value was removed. a ...
...And 23 more matches
JavaScript data types and data structures - JavaScript
programming languages all have built-in data structures, but these often differ from one language to another. this article attempts to list the built-in data structures available in javascript and what properties they have. these can be used to build other data structures. wherever possible, comparisons with other languages are drawn. dynamic typing javascript is a loosely
typed and dynamic language. ...
... one language to another. this article attempts to list the built-in data structures available in javascript and what properties they have. these can be used to build other data structures. wherever possible, comparisons with other languages are drawn. dynamic typing javascript is a loosely
typed and dynamic language. ...
...ta structures available in javascript and what properties they have. these can be used to build other data structures. wherever possible, comparisons with other languages are drawn. dynamic typing javascript is a loosely
typed and dynamic language. ...
...And 23 more matches
<input type="month"> - HTML: Hypertext Markup Language
the value is a string whose value is in the format "yyyy-mm", where yyyy is the four-digit year and mm is the month number. 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 control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile browser versions — having usable implementations. ...
...t, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile browser versions — having usable implementations. in browsers that don't support month inputs, the control degrades gracefully to a simple <input
type="text">, although there may be automatic validation of the entered text to ensure it's formatted as expected. for those of you using a browser that doesn't support month, the screenshot below shows what it looks like in chrome and opera. clicking the down arrow on the right hand side brings up a date picker that lets you select the month and year. the microsoft edge month control looks like t...
...pported common attributes autocomplete, list, readonly, and step. idl attributes value methods select(), stepdown(), stepup(). value a domstring representing the value of the month and year entered into the input, in the form yyyy-mm (four or more digit year, then a hyphen ("-"), followed by the two-digit month). ...
...And 22 more matches
Object.setPrototypeOf() - JavaScript
because this feature is a part of the language, it is still the burden on engine developers to implement that feature performantly (ideally). ...
... because this feature is a part of the language, it is still the burden on engine developers to implement that feature performantly (ideally). ...
...perty) of a specified object to another object or null. warning: changing the [[proto
type]] of an object is, by the nature of how modern javascript engines optimize property accesses, currently a very slow operation in every browser and javascript engine. in addition, the effects of altering inheritance are subtle and far-flung, and are not limited to simply the time spent in the object.setproto
typeof(...) statement, but may extend to any code that has access to any object whose [[proto
type]] has been altered. because this feature is a part of the language, it is still the burden on engine developers to implement that feature performantly (ideally). until engine developers address this issue, if you are concerned about performance, you should avoid setting the [[proto
type]] of an object. in...
...And 22 more matches
Image file type and format guide - Web media technologies
in this guide, we'll cover the image file
types generally supported by web browsers, and provide insights that will help you select the most appropriate formats to use for your site's imagery. common image file
types there are many image file formats in the world. however, the ones listed below are generally recognized as usable on the web, though bmp is generally not recommended as browser support is potentially constrained; it should usually be avoided for web content. ...
...select the most appropriate formats to use for your site's imagery. common image file
types there are many image file formats in the world. however, the ones listed below are generally recognized as usable on the web, though bmp is generally not recommended as browser support is potentially constrained; it should usually be avoided for web content. ...
... none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later. image file
type details the following sections provide a brief overview of each of the image file
types supported by web browsers. in the tables below, the term bits per component refers to the number of bits used to represent each color component. for example, an rgb color depth of 8 indicates that each of the red, green, and blue components are represented by an 8-bit value. bit depth, on the other hand, is ...
...And 21 more matches
Media container formats (file types) - Web media technologies
in this guide, we'll look at the container formats used most commonly on the web, covering basics about their specifications as well as their benefits, limitations, and ideal use cases. webrtc does not use a container at all. instead, it streams the encoded audio and video tracks directly from one peer to another using mediastreamtrack objects to represent each track. ...
...ee codecs used by webrtc for information about codecs commonly used for making webrtc calls, as well as browser compatibility information around codec support in webrtc. common container formats while there are a vast number of media container formats, the ones listed below are the ones you are most likely to encounter. some support only audio while others support both audio and video. the mime
types and extensions for each are listed.the most commonly used containers for media on the web are probably mpeg-4 (mp4), quicktime movie (mov), and the wavefile audio file format (wav). however, you may also encounter mp3, ogg, webm, avi, and other formats. not all of these are broadly supported by browsers, however; some combinations of container and codec are sometimes given their own file extensi...
...ons for each are listed.the most commonly used containers for media on the web are probably mpeg-4 (mp4), quicktime movie (mov), and the wavefile audio file format (wav). however, you may also encounter mp3, ogg, webm, avi, and other formats. not all of these are broadly supported by browsers, however; some combinations of container and codec are sometimes given their own file extensions and mime
types as a matter of convenience, or because of their ubiquity. for example, an ogg file with only an opus audio track is sometimes referred to as an opus file, and might even have the extension .opus. but it's still actually just an ogg file. in other cases, a particular codec, stored in a certain container
type, is so ubiquitous that the pairing is treated in a unique fashion. a good example of thi...
...And 20 more matches
Recommended Drag Types - Web APIs
the html drag and drop api supports dragging various
types of data, including plain text, urls, html code, files, etc. the document describes best practices for common draggable data
types. caution: all methods and properties in this document with a moz prefix, such as mozsetdataat(), will only work with gecko-based browsers. dragging text for dragging text, use the text/plain
type. the second data parameter should be the dragged string. for example: event.datatransfer.setdata("text/plain", "this is text to drag"); dragging text in textboxes and selections on web pages is done automatically by the browser, so you do not need to handle it yourself. ...
...browsers. dragging text for dragging text, use the text/plain
type. the second data parameter should be the dragged string. for example: event.datatransfer.setdata("text/plain", "this is text to drag"); dragging text in textboxes and selections on web pages is done automatically by the browser, so you do not need to handle it yourself. it is recommended to always add data of the text/plain
type as a fallback for applications or drop targets that do not support other
types, unless there is no logical text alternative. always add this text/plain
type last, as it is the least specific and shouldn’t be preferred. note: in older code, you may find text/unicode or the text
types. these are equivalent to text/plain, and will store and retrieve plain text data. dragging links dragged hyper...
...r drop targets that do not support other
types, unless there is no logical text alternative. always add this text/plain
type last, as it is the least specific and shouldn’t be preferred. note: in older code, you may find text/unicode or the text
types. these are equivalent to text/plain, and will store and retrieve plain text data. dragging links dragged hyperlinks should include data of two
types: text/uri-list, and text/plain. both
types should use the link’s url for their data. for example: var dt = event.datatransfer; dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); as usual, set the text/plain
type last, as a fallback for the text/uri-list
type. note: the url
type is uri-list with an i, not an l. to drag multiple link...
...And 19 more matches
<input type="range"> - HTML: Hypertext Markup Language
<input> elements of
type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. the precise value, however, is not considered important. this is typically represented using a slider or dial control rather than a text entry box like the number input
type. because this kind of widget is imprecise, it shouldn't typically be used unless the control's exact value isn't important. 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 the user's browser doesn't support
type range, it will fall back and treat it as a text input. value a domstring ...
...value min the minimum permitted value step the stepping interval, used both for user interface and validation purposes list the values of the list attribute is the id of a <datalist> element located in the same document. the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the
type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. see the range control with hash marks below for an example of how the options on a range are denoted in supported browsers max the greatest value in the range of permitted values. if the value entered into the element exceeds...
...e -moz-orient non-standard css property impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range slider. values include horizontal, meaing the range is rendered horizontally, and vertical, where the range is rendered vertically. ...
...And 19 more matches
<input type="url"> - HTML: Hypertext Markup Language
<input> elements of
type url are used to let the user enter and edit a url. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the input value is automatically validated to ensure that it's either empty or a properly-formatted url before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid url or not. on browsers that don't support inputs of
type url, a url input falls back to being a standard text input. value a domstring representing a url, or empty events change and...
...oved. a single properly-formed absolute url. this doesn't necessarily mean the url address exists, but it is at least formatted correctly. in simple terms, this means urlscheme://restofurl. see validation for details on how urls are validated to ensure that they're formatted properly. ...
...llcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same document. the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the
type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. maxlength the maximum number of characters (as utf-16 code units) the user can enter into the url input. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the url input ...
...And 19 more matches
<input type="image"> - HTML: Hypertext Markup Language
<input> elements of
type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than 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. value none — the value attribute should not be specified. events none. supported common attributes alt, src, width, height, formaction, formenc
type, formmethod, formnovalidate, formtarget idl attributes none. methods none. value <input
type="image"> elements do not accept value attributes. the path to the image to be displayed is specified in the src attribu...
...he path to the image to be displayed is specified in the src attribute. ...
... be a non-empty string appropriate as a label for the button. for example, if you have a graphical button that shows an image with an icon and/or image text "login now", you should also set the alt attribute to something like login now. important: while the alt attribute is technically optional, you should always include one to maximize the usability of your content. ...
...And 18 more matches
<input type="search"> - HTML: Hypertext Markup Language
these are functionally identical to text inputs, but may be styled differently by the user agent. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value a domstring representing the value contained in the search field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size. idl attributes value methods select(), setrangetext(), setselectionrange(). ...
...tained in the search field. you can retrieve this using the htmlinputelement.value property in javascript. searchterms = mysearch.value; if no validation constraints are in place for the input (see validation for more details), the value can be any text string or an empty string (""). ...
...llcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same document. the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the
type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. maxlength the maximum number of characters (as utf-16 code units) the user can enter into the search field. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the search ...
...And 18 more matches
Object.prototype.constructor - JavaScript
's name. the value is only read-only for primitive values such as 1, true, and "test". description all objects (with the exception of objects created with object.create(null)) will have a constructor property. ...
...the example then displays the constructor property for the object thetree. ...
... output: thetree.constructor is function tree(name) { this.name = name } changing the constructor of an object the following example shows how to modify the constructor value of generic objects. only true, 1, and "test" will not be affected (as they have read-only native constructors). this example shows that it is not always safe to rely on the constructor property of an object. ...
...And 18 more matches
<input type="week"> - HTML: Hypertext Markup Language
<input> elements of
type week create input fields allowing easy entry of a year plus the iso 8601 week number during that year (i.e., week 1 to 52 or 53). 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 control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time. in non-supporting browsers, the control degrades gracefully to function identically to <input
type="text">. in chrome/opera the week control provides slots to fill in week and year values, a pop-up calendar interface to select them more v...
..., or empty events change and input supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list. methods select(), stepdown(), and stepup() value a domstring representing the value of the week/year entered into the input. ...
...omstring representing the value of the week/year entered into the input. the format of the date and time value used by this input
type is described in format of a valid week string in date and time formats used in html. you can set a default value for the input by including a value inside the value attribute, like so: <label for="week">what week would you like to start?</label> <input id="week"
type="week" name="week" value="2017-w01"> one thing to note is that the displayed format may differ from the actual value, which is always formatted yyyy-www. when the above value is submitted to the server, for example, browsers may display it as week 01, 2017, but the submitted value will always look like week=2017-w01. you can also get and set the value in javascript using the input element's v...
...And 17 more matches
Grammar and types - JavaScript
basics javascript borrows most of its syntax from java, c, and c++, but it has also been influenced by awk, perl, and python. javascript is case-sensitive and uses the unicode character set. for example, the word früh (which means "early" in german) could be used as a variable name. let früh = "foobar" but, the variable früh is not the same as früh because javascript is case sensitive. in javascript, instructions are called statements and are separated by semicolons (;). ...
...pace. (spaces, tabs, and newline characters are considered whitespace.) comments the syntax of comments is the same as in c++ and in many other languages: // a one line comment /* this is a longer, * multi-line comment */ /* you can't, however, /* nest comments */ syntaxerror */ comments behave like whitespace, and are discarded during script execution. note: you might also see a third
type of comment syntax at the start of some javascript files, which looks something like this: #!/usr/bin/env node. this is called hashbang comment syntax, and is a special comment used to specify the path to a particular javascript engine that should execute the script. see hashbang comments for more details. declarations javascript has three kinds of variable declarations. var declares a var...
... the variable is in a "temporal dead zone" from the start of the block until the declaration is processed. console.log(x); // referenceerror let x = 3; function hoisting in the case of functions, only function declarations are hoisted—but not the function expressions. /* function declaration */ foo(); // "bar" function foo() { console.log('bar'); } /* function expression */ baz(); //
typeerror: baz is not a function var baz = function() { console.log('bar2'); }; global variables global variables are in fact properties of the global object. in web pages, the global object is window, so you can set and access global variables using the window.variable syntax. consequently, you can access global variables declared in one window or frame from another window or frame by specify...
...And 17 more matches
TypeError: "x" is not a function - JavaScript
some code expects you to provide a function, but that didn't happen. ...
...some code expects you to provide a function, but that didn't happen. ...
...some code expects you to provide a function, but that didn't happen. ...
...And 17 more matches
Properly configuring server MIME types - Learn web development
this article may contain out of date information, as it has not been significantly updated in many years. background by default, many web servers are configured to report a mime
type of text/plain or application/octet-stream for unknown content
types. as new content
types are invented or added to web servers, web administrators may fail to add the new mime
types to their web server's configuration. this is a major source of problems for users of gecko-based browsers, which respect the mime
types as reported by web servers and web applications. what are mime
types? mime
types describe the media
type of content either in email or served by web servers or web applications and are intended to help guide a web browser in how the content is to be processed and displayed. examples of mi...
...ation. this is a major source of problems for users of gecko-based browsers, which respect the mime
types as reported by web servers and web applications. what are mime
types? mime
types describe the media
type of content either in email or served by web servers or web applications and are intended to help guide a web browser in how the content is to be processed and displayed. examples of mime
types are: text/html for normal web pages text/plain for plain text text/css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents technical background registered values for mime
types are available in iana | mime media
types. the http specification defines a ...
...for plain text text/css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents technical background registered values for mime
types are available in iana | mime media
types. the http specification defines a superset of mime which is used to describe the media
types used on the web. why are correct mime
types important? if the web server or application reports an incorrect mime
type for content, a web browser has no way, according to the http specification, of knowing that the author actually intended the content to be processed and displayed in a way different from that implied by the reported mime
type. some other web browsers, such as microsoft® int...
...And 16 more matches
list-style-type - CSS: Cascading Style Sheets
moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items. ...
...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. the color of the marker will be the same as the computed color of the element it applies to. only a few elements (<li> and <summary>) have a default value of display: list-item. ...
... color of the element it applies to. only a few elements (<li> and <summary>) have a default value of display: list-item. however, the list-style-
type property may be applied to any element whose display value is set to list-item. moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items. ...
...And 16 more matches
<input type="date"> - HTML: Hypertext Markup Language
<input> elements of
type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. the resulting value includes the year, month, and day, but not the time. the time and datetime-local input
types support time and date+time input. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the input ui generally varies from browser to browser; see browser compatibility for further details. in unsupported browsers, the control degrades gracefully to <input
type="text">. among browsers with custom interfaces for selecting dates are chrome and ope...
...tributes list, value, valueasdate, valueasnumber. methods select(), stepdown(), stepup() value a domstring representing the date entered in the input. the date is formatted according to iso8601, described in format of a valid date string in date and time formats used in html. you can set a default value for the input with a date inside the value attribute, like so: <input
type="date" value="2017-06-01"> the displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd. you can get and set the date value in javascript with the input element's value and valueasnumber properties. for example: var datecontrol = document.queryselector('input[ty...
...it then reads that value back in string and number formats. ...
...And 16 more matches
<input type="text"> - 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. value a domstring representing the text contained in the text field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange(). value the value attribute is a domstring that contains the current value of the text entered into the text field. ...
...s the current value of the text entered into the text field. you can retrieve this using the value property in javascript. let thetext = mytextinput.value; if no validation constraints are in place for the input (see validation for more details), the value may be an empty string (""). ...
...llcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same document. the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the
type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. maxlength the maximum number of characters (as utf-16 code units) the user can enter into the text input. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the text inpu...
...And 16 more matches
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
the intl.datetimeformat.proto
type.formattoparts() method allows locale-aware formatting of strings produced by datetimeformat formatters. syntax datetimeformat.formattoparts(date) parameters date optional the date to format. return value an array of objects containing the formatted date in parts. description the formattoparts() method is useful for custom formatting of date strings. it returns an array of objects containing the locale-specific tokens from which it possible to build custom strings while preserving the locale-specific parts. the structure the formattoparts() method returns, looks like this: [ {
type: 'day', value: '17' }, {
type: 'weekday', value: 'monday' } ] possible
types are the following: day the string used for the day, for example "17". dayperiod ...
... hour12: true, timezone: 'utc' }); formatter.format(date); // "monday, 12/17/2012, 3:00:42.000 am" however, in many user interfaces there is a desire to customize the formatting of this string. ...
...matter.format(date); // "monday, 12/17/2012, 3:00:42.000 am" however, in many user interfaces there is a desire to customize the formatting of this string. ...
...And 16 more matches
nsMsgFolderFlagType
defined in comm-central/ mailnews/ base/ public/ nsmsgfolderflags.idl
typedef unsigned long nsmsgfolderflag
type; /// flags about a folder or a newsgroup. [scriptable,uuid(fbe7cba8-3141-4c44-9660-99af6b53f27e)] interface nsmsgfolderflags { /** * @name folder
type flags * these flags define the
type of folder. exactly one will be set. * @{ */ /// this folder is a newsgroup folder. const nsmsgfolderflag
type newsgroup = 0x00000001; /// this folder is a news server. const nsmsgfolderflag
type newshost = 0x00000002; /// this folder is a mail folder. ...
... interface nsmsgfolderflags { /** * @name folder
type flags * these flags define the
type of folder. exactly one will be set. * @{ */ /// this folder is a newsgroup folder. const nsmsgfolderflag
type newsgroup = 0x00000001; /// this folder is a news server. const nsmsgfolderflag
type newshost = 0x00000002; /// this folder is a mail folder. const nsmsgfolderflag
type mail = 0x00000004; /** @} */ /** whether this is a directory: newshosts are always directories; * newsgroups can be directories if we are in ``show all groups'' mode; * mail folders will have this bit if they are really directories, not files. ...
...er is a mail folder. const nsmsgfolderflag
type mail = 0x00000004; /** @} */ /** whether this is a directory: newshosts are always directories; * newsgroups can be directories if we are in ``show all groups'' mode; * mail folders will have this bit if they are really directories, not files. * (note that directories may have zero children.) */ const nsmsgfolderflag
type directory = 0x00000008; /** whether the children of this folder are currently hidden in the listing. * this will only be present if the nsmsgfolderflags::directory bit is on. ...
...And 15 more matches
ArrayType
array
type represents c arrays syntax returns a new c
type representing an array data
type. c
type array
type()
type[ length] ); parameters
type: it represents the
type of the elements or variable which is going to be present in an array length optional it denotes the number of entries present in an array or the number of elements that an array should contain. if you don't specify this parameter, the array's length is unspecified. return value a c
type represents the newly declared array
type. exceptions thrown
typeerror
type is not a c
type, or
type.size is undefined.if the length is specifed but if it is not a valid one,then it is also thrown rangeerror the size of the resulting array can't be represented as both a size_t and as a javascript number. propertie...
...rray's length is unspecified. return value a c
type represents the newly declared array
type. exceptions thrown
typeerror
type is not a c
type, or
type.size is undefined.if the length is specifed but if it is not a valid one,then it is also thrown rangeerror the size of the resulting array can't be represented as both a size_t and as a javascript number. properties property
type description element
type c
type the data
type of the elements in an array
type. read only. length number the number of elements in the array, or undefined if the array
type doesn't have a specified length. read only. properties inherited from c
type these properties are available on all c
type objects. ...
...operties property
type description element
type c
type the data
type of the elements in an array
type. read only. length number the number of elements in the array, or undefined if the array
type doesn't have a specified length. read only. properties inherited from c
type these properties are available on all c
type objects. property
type description name string the
type's name. read only. for primitive
types, this is just the name of the corresponding c
type. for structure and opaque pointer
types, this is simply the string that was passed to the constructor. for other function, pointer, and array
types, this should be a valid c
type expression. ...
...And 15 more matches
js-ctypes reference
see library.declare() for instructions on how to declare these functions. ...
...see library.declare() for instructions on how to declare these functions. ...
...see library.declare() for instructions on how to declare these functions. ...
...And 15 more matches
<input type="button"> - HTML: Hypertext Markup Language
given that a <button>’s label text is inserted between the opening and closing tags, you can include html in the label, even images. ...
...to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event). 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. ...
...: while <input> elements of
type button are still perfectly valid html, the newer <button> element is now the favored way to create buttons. given that a <button>’s label text is inserted between the opening and closing tags, you can include html in the label, even images. value a domstring used as the button's label events click supported common attributes
type, and value idl attributes value methods none value an <input
type="button"> elements' value attribute contains a domstring that is used as the button's label. ...
...And 15 more matches
lang/type - Archive of obsolete content
functions for working with
type detection. globals functions isundefined(value) returns true if value is undefined, false otherwise. let { isundefined } = require('sdk/lang/
type'); var foo; isundefined(foo); // true isundefined(0); // false parameters value : mixed the variable to check. returns boolean : boolean indicating if value is undefined. isnull(value) returns true if value is null, false otherwise. let { isnull } = require('sdk/lang/
type'); isnull(null); // true isnull(false); // false parameters value : mixed the variable to check. returns boolean : boolean indicating if value is null. isstring(value) returns true if value is a string, false otherwise. ...
...returns boolean : boolean indicating if value is undefined. isnull(value) returns true if value is null, false otherwise. let { isnull } = require('sdk/lang/
type'); isnull(null); // true isnull(false); // false parameters value : mixed the variable to check. returns boolean : boolean indicating if value is null. isstring(value) returns true if value is a string, false otherwise. uses
typeof operator to check
type, and will only properly detect string primitives: for example, a string created with new string() will always return false. let { isstring } = require('sdk/lang/
type'); isstring('my string'); // true isstring(100); // false isstring('100'); // true parameters value : mixed the variable to check. returns boolean : boolean indicating if value is a string. isnumber(v...
...primitives: for example, a string created with new string() will always return false. let { isstring } = require('sdk/lang/
type'); isstring('my string'); // true isstring(100); // false isstring('100'); // true parameters value : mixed the variable to check. returns boolean : boolean indicating if value is a string. isnumber(value) returns true if value is a number, false otherwise. uses
typeof operator to check
type, and will only properly detect number primitives: for example, a number created with new number() will always return false. let { isnumber } = require('sdk/lang/
type'); isnumber(3.1415); // true isnumber(100); // true isnumber('100'); // false parameters value : mixed the variable to check. returns boolean : boolean indicating if value is a number. isregexp(value)...
...And 14 more matches
How Mozilla determines MIME Types
introduction all data handling in mozilla is based on the mime
type of the content. this means that every time an uri is loaded, mozilla must find out its mime
type. the several ways how this happens are described in this document. content-
type "hints" mozilla has a concept of "content-
type hints". this means that, for example, if mozilla encounters a <link
type="text/css" rel="stylesheet" href="..."> element, a
type of text/css will be assumed. this is, however, overridden by the actual mime
type the server sends (if any). (for this specific example, the server override only happens in standards-compliant mode. see mozilla's quirks mode or web author faq). similar handling happens for <a href="..."
type="foo/bar">, starting in mozilla 1.6alpha. http for http uris mozilla usually...
...lement, a
type of text/css will be assumed. this is, however, overridden by the actual mime
type the server sends (if any). (for this specific example, the server override only happens in standards-compliant mode. see mozilla's quirks mode or web author faq). similar handling happens for <a href="..."
type="foo/bar">, starting in mozilla 1.6alpha. http for http uris mozilla usually gets a mime
type sent from the server, and uses it. contrary to internet explorer's mime
type guessing, mozilla will generally not sniff the
type of the document. ...
... faq). similar handling happens for <a href="..."
type="foo/bar">, starting in mozilla 1.6alpha. http for http uris mozilla usually gets a mime
type sent from the server, and uses it. contrary to internet explorer's mime
type guessing, mozilla will generally not sniff the
type of the document. however, starting in mozilla 1.7alpha, mozilla does do content sniffing, like this: when the content-
type sent by the server is one of (case-sensitively) text/plain text/plain; charset=iso-8859-1 text/plain; charset=iso-8859-1 and the server did not send a content-encoding header, mozilla will sniff the first block of data it gets and check for non-text bytes. text bytes are 9-13, 27, and 31-255. ...
...And 14 more matches
ValidityState.typeMismatch - Web APIs
a valid email address includes an email prefix and a domain, with or without a top level domain. ...
...a valid email address includes an email prefix and a domain, with or without a top level domain. ...
...a valid email address includes an email prefix and a domain, with or without a top level domain. ...
...And 14 more matches
Link types - HTML: Hypertext Markup Language
in html, link
types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element. list of the defined link
types and their significance in html link
type description allowed in these elements not allowed in these elements alternate if the element is <link> and the rel attribute also contains the stylesheet
type, the link defines an alternative style sheet; in that case the title attribute must be present and not be the empty string. if the
type is set to application/rss+xml or application/atom+xml, the link defines a syndication feed. the first one defined on the page is the default. ...
...el attribute also contains the stylesheet
type, the link defines an alternative style sheet; in that case the title attribute must be present and not be the empty string. if the
type is set to application/rss+xml or application/atom+xml, the link defines a syndication feed. the first one defined on the page is the default. ...
...on/rss+xml or application/atom+xml, the link defines a syndication feed. the first one defined on the page is the default. otherwise, the link defines an alternative page, of one of these
types: for another medium, like a handheld device (if the media attribute is set) in another language (if the hreflang attribute is set), in another format, such as a pdf (if the
type attribute is set) a combination of these <a>, <area>, <link> <form> archives defines a hyperlink to a document that contains an archive link to this one. for example, a blog entry could link to a monthly index page this way. note: although recognized, the singular archive is incorrect and must be avoided. <a>, <area>, <link> <form> ...
...And 14 more matches
<input type="radio"> - HTML: Hypertext Markup Language
only one radio button in a given group can be selected at the same time. radio buttons are typically rendered as small circles, which are filled or highlighted when selected. 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. they are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below. ...
... preferred contact method, you might create three radio buttons, each with the name property set to contact but one with the value email, one with the value phone, and one with the value mail. the user never sees the value or the name (unless you expressly add code to display it). ...
...alue email, one with the value phone, and one with the value mail. the user never sees the value or the name (unless you expressly add code to display it). ...
...And 13 more matches
JavaScript typed arrays - JavaScript
javascript
typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. as you may already know, array objects grow and shrink dynamically and can have any javascript value. javascript engines perform optimizations so that these arrays are fast. however, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data. this is where
typed arrays come in. ...
... these arrays are fast. however, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data. this is where
typed arrays come in. ...
...access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data. this is where
typed arrays come in. each entry in a javascript
typed array is a raw binary value in one of a number of supported formats, from 8-bit integers to 64-bit floating-point numbers. however,
typed arrays are not to be confused with normal arrays, as calling array.isarray() on a
typed array returns false. moreover, not all methods available for normal arrays are supported by
typed arrays (e.g. push and pop). buffers and views:
typed array architecture to achieve maximum flexibility and efficiency, javascript
typed arrays split the implementation into buffers and views. a buffer (implemen...
...And 13 more matches
Object.prototype.__proto__ - JavaScript
warning: changing the [[proto
type]] of an object is, by the nature of how modern javascript engines optimize property accesses, a very slow operation, in every browser and javascript engine. the effects on the performance of altering inheritance are subtle and far-flung, and are not limited to simply the time spent in obj.__proto__ = ... statements, but may extend to any code that has access to any object whose [[proto
type]] has been altered. if you care about performance you should avoid setting the [[proto
type]] of an object. instead, create a new object with the desired [[proto
type]] using object.create(). ...
...re subtle and far-flung, and are not limited to simply the time spent in obj.__proto__ = ... statements, but may extend to any code that has access to any object whose [[proto
type]] has been altered. if you care about performance you should avoid setting the [[proto
type]] of an object. instead, create a new object with the desired [[proto
type]] using object.create(). warning: while object.proto
type.__proto__ is supported today in most browsers, its existence and exact behavior has only been standardized in the ecmascript 2015 specification as a legacy feature to ensure compatibility for web browsers. ...
... the use of __proto__ is controversial and discouraged. ...
...And 12 more matches
Reflect.getPrototypeOf() - JavaScript
the static reflect.getproto
typeof() method is almost the same method as object.getproto
typeof(). it returns the proto
type (i.e. the value of the internal [[proto
type]] property) of the specified 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.getproto
typeof(target) parameters target the target object of which to get the proto
type. return value the proto
type of the given object. if there are no inherited properties, null is returned. exceptions a
typeerror, if target is not an object. description the reflect.getproto
typeof method returns the proto
type (i.e. the value of the intern...
... a pull request. syntax reflect.getproto
typeof(target) parameters target the target object of which to get the proto
type. return value the proto
type of the given object. if there are no inherited properties, null is returned. exceptions a
typeerror, if target is not an object. description the reflect.getproto
typeof method returns the proto
type (i.e. the value of the internal [[proto
type]] property) of the specified object. ...
...rget the target object of which to get the proto
type. return value the proto
type of the given object. if there are no inherited properties, null is returned. exceptions a
typeerror, if target is not an object. description the reflect.getproto
typeof method returns the proto
type (i.e. the value of the internal [[proto
type]] property) of the specified object. ...
...And 12 more matches
RTCIceCandidateStats.networkType - Web APIs
the permitted values are: bluetooth a bluetooth connection is used by the described connection. ...
... the permitted values are: bluetooth a bluetooth connection is used by the described connection. ...
... the permitted values are: bluetooth a bluetooth connection is used by the described connection. ...
...And 11 more matches
OpenType font features guide - CSS: Cascading Style Sheets
font features or variants refer to different glyphs or character styles contained within an open
type font. these include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. these are all referred to as open
type features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings. this article provides you with all you need to know about using open
type font features in css. some fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the designer or developer to choose to enable in specifi...
...uch as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for east asian languages. in the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other open
type features. caution: there are many css attributes defined to leverage font features, but unfortunately many are not fully implemented. they are all defined and shown here, but many will only work using the lower-level font-feature-settings property. it's possible to write css to work both ways but this can become cumbersome. the issue with simply using font-feature-settings for everything is tha...
...ith simply using font-feature-settings for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable fonts with font-variation-settings). discovering availability of features in fonts this is sometimes the trickiest thing to work out if you don't have any documentation that came with the fonts (many
type designers and foundries will provide sample pages and css just for this very reason). but there are some sites that make it easier to figure out. you can visit wakamaifondue.com, drop your font file on the circle where instructed and in a few moments you'll have a full report on all the capabilities and features of your font. axis-praxis.org also offers a similar capability, with the ability to c...
...And 11 more matches
<input type="checkbox"> - HTML: Hypertext Markup Language
the exact appearance depends upon the operating system configuration under which the browser is running. generally this is a square but it may have rounded corners. a checkbox allows you to select single values for submission in a form (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. ...
...ge and input supported common attributes checked idl attributes checked, indeterminate and value methods select() value a domstring representing the value of the checkbox. this is never seen on the client-side, but on the server this is the value given to the data submitted with the checkbox's name. take the following example: <form> <div> <input
type="checkbox" id="subscribenews" name="subscribe" value="newsletter"> <label for="subscribenews">subscribe to newsletter?</label> </div> <div> <button
type="submit">subscribe</button> </div> </form> in this example, we've got a name of subscribe, and a value of newsletter. when the form is submitted, the data name/value pair will be subscribe=newsletter. if the value attribute was ...
...for the checkbox is on, so the submitted data in that case would be subscribe=on. note: if a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. value=unchecked); the value is not submitted to the server at all. if you wanted to submit a default value for the checkbox when it is unchecked, you could include an <input
type="hidden"> inside the form with the same name and value, generated by javascript perhaps. additional attributes in addition to the common attributes shared by all <input> elements, "checkbox" inputs support the following attributes: attribute description checked boolean; if present, the checkbox is toggled on by default indeterminate a boolean which, if ...
...And 11 more matches
<input type="password"> - HTML: Hypertext Markup Language
<input> elements of
type password provide a way for the user to securely enter a password. the element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•"). this character will vary depending on the user agent and os. 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. ...
...ter will vary depending on the user agent and os. 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. 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...
...lue passes validation; see validation for more information. note: the line feed (u+000a) and carriage return (u+000d) characters are not permitted in a password value. when setting the value of a password control, line feed and carriage return characters are stripped out of the value. ...
...And 11 more matches
itemtype - HTML: Hypertext Markup Language
the global attribute item
type specifies the url of the vocabulary that will be used to define itemprop's (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by item
type 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 item
type, with startdate and location as itemprop's which musicevent defines. ...
...chema.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 item
type, with startdate and location as itemprop's which musicevent defines. note: more about item
type attributes can be found at http://schema.org/thing the item
type 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 vocabulary. the attribute's value must have at least one token. ...
...with startdate and location as itemprop's which musicevent defines. note: more about item
type attributes can be found at http://schema.org/thing the item
type 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 vocabulary. the attribute's value must have at least one token. the item
types must all be
types defined in applicable specifications (such as schema.org), and must all be defined to use the same vocabulary. the item
type attribute can only be specified on elements which have an itemscope attribute specified. the itemid attribute can only be specified on elements which have both an itemscope attribute and an item
type attribute specified. they must only be specified on ele...
...And 11 more matches
TypedArray.from() - JavaScript
the
typedarray.from() method creates a new
typed array from an array-like or iterable object. this method is nearly the same as array.from(). 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
typedarray.from(source[, mapfn[, thisarg]]) where
typedarray is one of: int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array parameters source an array-like or iterable object to convert to a
typed array. mapfn optional map function to call on every element of the
typed array. thisarg optional value to use a...
... int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array parameters source an array-like or iterable object to convert to a
typed array. mapfn optional map function to call on every element of the
typed array. thisarg optional value to use as this when executing mapfn. return value a new
typedarray instance. ...
...mpedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array parameters source an array-like or iterable object to convert to a
typed array. mapfn optional map function to call on every element of the
typed array. thisarg optional value to use as this when executing mapfn. return value a new
typedarray instance. description
typedarray.from() lets you create
typed arrays from: array-like objects (objects with a length property and indexed elements); or iterable objects (objects where you can get its elements, such as map and set).
typedarray.from() has the optional parameter mapfn, which allows you to execute a map() function on each element of the
typed array (or subclass object) that is being created. this means t...
...And 11 more matches
JS_GetTypeName
obsolete since jsapi 34this 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 a pointer to the string literal description of a specified js data
type. syntax const char * js_get
typename(jscontext *cx, js
type type); name
type description cx jscontext * pointer to a js context from which to derive runtime information. ...
...l work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns a pointer to the string literal description of a specified js data
type. syntax const char * js_get
typename(jscontext *cx, js
type type); name
type description cx jscontext * pointer to a js context from which to derive runtime information.
type js
type one of js
type_void, js
type_object, js
type_function, js
type_string, js
type_number, or js
type_boolean. ...
...literal description of a specified js data
type. syntax const char * js_get
typename(jscontext *cx, js
type type); name
type description cx jscontext * pointer to a js context from which to derive runtime information.
type js
type one of js
type_void, js
type_object, js
type_function, js
type_string, js
type_number, or js
type_boolean. description js_get
typename returns a pointer to a string literal description of a specified js data
type,
type. ...
...And 10 more matches
PerformanceEntry.entryType - Web APIs
resource performanceresourcetiming url the resolved url of the requested resource. ...
... resource performanceresourcetiming url the resolved url of the requested resource. ...
... resource performanceresourcetiming url the resolved url of the requested resource. ...
...And 10 more matches
StructType
struct
type represents c structures. syntax returns a c
type object describing a new structure data
type. this data
type provides the ability to define and manipulate values of the c struct
type. note: at this time, there isn't a way to denote a packed structure (that is, one created in c using #pragma pack). c
type struct
type( name[, fields] ); parameters name the name of the structure. must be a string. fields optional an array of field descriptors, describing all the entries in the structure. if this isn't specified, the structure is considered opaque and you can't access its contents directly. you can call the resulting
type's define() method to assign it a non-opaque
type later. see opaque structures for further explanation and an example. ...
...the structure. must be a string. fields optional an array of field descriptors, describing all the entries in the structure. if this isn't specified, the structure is considered opaque and you can't access its contents directly. you can call the resulting
type's define() method to assign it a non-opaque
type later. see opaque structures for further explanation and an example. return value a c
type object describing the newly created struct data
type. exceptions thrown
typeerror the name is not a string, or one or more of the fields does not have a defined size. rangeerror the size of the structure, in bytes, cannot be represented both as a size_t and as a javascript number. describing fields the fields array is comprised of field descriptors, one for each field in the structure. ...
...exceptions thrown
typeerror the name is not a string, or one or more of the fields does not have a defined size. rangeerror the size of the structure, in bytes, cannot be represented both as a size_t and as a javascript number. describing fields the fields array is comprised of field descriptors, one for each field in the structure. each field descriptor contains the field's name and its
type, such as {'serialnumber': c
types.int}. a complete field descriptor list might look like this: [ {'serialnumber': c
types.int}, {'username': c
types.char.ptr} ] properties property
type description fields c
type[] a sealed array of field descriptors. read only. properties inherited from c
type these properties are available on all c
type objects. prop...
...And 9 more matches
PerformanceObserverEntryList.getEntriesByType() - Web APIs
the items will be in chronological order based on the entries' starttime. ...
...the items will be in chronological order based on the entries' starttime. ...
...the items will be in chronological order based on the entries' starttime. ...
...And 9 more matches
RTCIceServer.credentialType - Web APIs
this process is detailed in rfc 7635. this property was formerly called token. ...
...this process is detailed in rfc 7635. this property was formerly called token. ...
...this process is detailed in rfc 7635. this property was formerly called token. ...
...And 9 more matches
TextEncoder.prototype.encodeInto() - Web APIs
this is potentially more performant than the older encode() method especially when the target buffer is a view into a wasm heap. syntax b1 = encoder.encodeinto(string, uint8array); parameters string is a usvstring containing the text to encode. uint8array is a uint8array object instance to place the resulting utf-8 encoded text into. return value a textencoderencodeintoresult dictionary, which contains two members: read the number of utf-16 units of code from the source that has been converted over to utf-8. ...
...an string.length if uint8array did not have enough space. written the number of bytes modified in the destination uint8array. the bytes written are guaranteed to form complete utf-8 byte sequences. encode into a specific position encoder.encodeinto always puts its output at the start of the array. however, it is sometimes useful to make the output start at a particular index. the solution is
typedarray.proto
type.subarray(). observe. var encoder = new textencoder; function encodeintoatposition(string, u8array, position) { return encoder.encodeinto(string, position ? u8array.subarray(position|0) : u8array); } var u8array = new uint8array(8); encodeintoatposition("hello", u8array, 2); console.log( "" + u8array.join() ); // 0,0,104,101,108,108,111,0 buffer sizing to convert a javascr...
...t8array(string.length); let encodedresults = textencoder.encodeinto(string, utf8); resultpara.textcontent += 'bytes read: ' + encodedresults.read + ' | bytes written: ' + encodedresults.written + ' | encoded result: ' + utf8; polyfill the polyfill below may be a bit long because of the switch cases and utilization of native textencoder.proto
type.encode in safari when available, but it is well worth the length because of the gains in performance. (function(window){ "use strict"; var log = math.log; var ln2 = math.ln2; var clz32 = math.clz32 || function(x) {return 31 - log(x >>> 0) / ln2 | 0}; var fromcharcode = string.fromcharcode; var patchedu8array = window.uint8array || array; var textencoderproto
type = tex...
...And 9 more matches
<input type="submit"> - HTML: Hypertext Markup Language
<input> elements of
type submit are rendered as buttons. when the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server. <input
type="submit" value="send request"> value a domstring used as the button's label events click supported common attributes
type and value idl attributes value methods none value an <input
type="submit"> element's value attribute contains a domstring which is displayed as the button's label. buttons do not have a true value otherwise. <input
type="submit" value="send request"> if you don't specify a value, the button will have a default label, chosen by the user agent. this label is likely to be something along the lines...
...ng which is displayed as the button's label. buttons do not have a true value otherwise. <input
type="submit" value="send request"> if you don't specify a value, the button will have a default label, chosen by the user agent. ...
...xample of a submit button with a default label in your browser: <input
type="submit"> additional attributes in addition to the attributes shared by all <input> elements, submit button inputs support the following attributes: attribute description formaction the url to which to submit the form's data; overrides the form's action attribute, if any formenc
type a string specifying the encoding
type to use for the form data formmethod the http method (get or post) to use when submitting the form. formnovalidate a boolean which, if present, means the form's fields will not be subjected to constraint validation before submitting the data to the server formtarget the browsing context into which to load the response ret...
...And 9 more matches
Content-Type - HTTP
the content-
type entity header is used to indicate the media
type of the resource. in responses, a content-
type header tells the client what the content
type of the returned content actually is. browsers will do mime sniffing in some cases and will not necessarily follow the value of this header; to prevent this behavior, the header x-content-
type-options can be set to nosniff. in requests, (such as post or put), the client tells the server what
type of data is actually sent. ...
...content-
type header tells the client what the content
type of the returned content actually is. browsers will do mime sniffing in some cases and will not necessarily follow the value of this header; to prevent this behavior, the header x-content-
type-options can be set to nosniff. in requests, (such as post or put), the client tells the server what
type of data is actually sent. header
type entity header forbidden header name no cors-safelisted response header yes cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x08 (tab)), "():<>?@[\]{}, and 0x7f (delete). ...
... charset the character encoding standard. ...
...And 9 more matches
Warning: String.x is deprecated; use String.prototype.x instead - JavaScript
the javascript warning about string generics occurs in firefox versions prior to 68. string generics have been removed starting with firefox 68. ...
... the javascript warning about string generics occurs in firefox versions prior to 68. string generics have been removed starting with firefox 68. ...
...pt warning about string generics occurs in firefox versions prior to 68. string generics have been removed starting with firefox 68. ...
...And 9 more matches
TypeError: invalid 'instanceof' operand 'x' - JavaScript
the instanceof operator expects the right hand side operands to be a constructor object, i.e. ...
... the instanceof operator expects the right hand side operands to be a constructor object, i.e. ...
... the instanceof operator expects the right hand side operands to be a constructor object, i.e. ...
...And 9 more matches
Object.prototype.toString() - JavaScript
epresenting the object. description every object has a tostring() method that is automatically called when the object is to be represented as a text value or when an object is referred to in a manner in which a string is expected. by default, the tostring() method is inherited by every object descended from object. if this method is not overridden in a custom object, tostring() returns "[object
type]", where
type is the object
type. the following code illustrates this: const o = new object(); o.tostring(); // returns [object object] note: starting in javascript 1.8.5, tostring() called on null returns [object null], and undefined returns [object undefined], as defined in the 5th edition of ecmascript and subsequent errata. see using tostring() to detect object class. parameters for ...
...r hexadecimal numbers. examples overriding the default tostring method you can create a function to be called in place of the default tostring() method. the tostring() method takes no arguments and should return a string. the tostring() method you create can be any value you want, but it will be most useful if it carries information about the object. ...
...rriding the default tostring method you can create a function to be called in place of the default tostring() method. the tostring() method takes no arguments and should return a string. the tostring() method you create can be any value you want, but it will be most useful if it carries information about the object. ...
...And 9 more matches
CType
all data
types declared using the js-c
types api are represented by c
type objects. these objects have assorted methods and properties that let you create objects of these
types, find out information about them, and so forth. the specific properties and methods on each object vary depending on the data
type represented. there are several kinds of
types: primitive
types these are typical unstructured data, such as the predefined
types listed in predefined data
types. big integer
types the int64 and uint64
types provide access to 64-bit integer values, which javascript doesn't currently support. pointer
type these represent pointers to data in memory. function
type these represent callable c functions. struct
type these represent c structures. array
type these represent c arrays. met...
...sted in predefined data
types. big integer
types the int64 and uint64
types provide access to 64-bit integer values, which javascript doesn't currently support. pointer
type these represent pointers to data in memory. function
type these represent callable c functions. struct
type these represent c structures. array
type these represent c arrays. method overview methods available on all c
type objects c
type array([n]) string tosource() string tostring() properties properties of all c
type objects these properties are available on all c
type objects. property
type description name string the
type's name. read only. for primitive
types, this is just the name of the corresponding c
type. for structure and opaque p...
...s c
type array([n]) string tosource() string tostring() properties properties of all c
type objects these properties are available on all c
type objects. property
type description name string the
type's name. read only. for primitive
types, this is just the name of the corresponding c
type. for structure and opaque pointer
types, this is simply the string that was passed to the constructor. for other function, pointer, and array
types, this should be a valid c
type expression. ptr c
type returns a c
type representing the data
type "pointer to this
type". this is the result of calling c
types.pointer
type(the_
type). read only. size number the size of the
type, in bytes. this is the same...
...And 8 more matches
Using the CSS Typed Object Model - Web APIs
the css
typed object model api exposes css values as
typed javascript objects to allow their performant manipulation. converting css object model value strings into meaningfully-
typed javascript representations and back (via htmlelement.style) can incur a significant performance overhead. the css
typed om makes css manipulation more logical and performant by providing object features (rather than cssom string manipulation), providing access to
types, methods, and an object model for css values. this article provides an introduction to all of its main features. computedstylemap() with the css
typed om api, we can access all the css properties and values — including custom properties — that are impacting an element. let's see how this works by creating our first example, which ...
...r: 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. cssunitvalue and csskeywordvalue 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 csskeywordvalue. if the value is numeric, a cssunitvalue is returned. csskeywordvalue is a class that defines keywords like inherit, initial, unset, and other strings you don't quo...
...style map has a value. if the value is a keyword, the object returned is a csskeywordvalue. if the value is numeric, a cssunitvalue is returned. csskeywordvalue 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 csskeywordvalue.value. cssunitvalue is returned if the value is a unit
type. it is a class that defines numbers with units of measurement like 20px, 40%, 200ms, or 7. it is returned with two properties: a value and a unit. with this
type we can access the numeric value — cssunitvalue.value — and its unit — cssunitvalue.unit. let's write a plain paragraph, apply no styles, and inspect a few of its css properties by returning a table with the unit and value: <p> ...
...And 8 more matches
Node.nodeType - Web APIs
node.text_node 3 the actual text inside an element or attr. node.cdata_section_node 4 a cdatasection, such as <!cdata[[ … ]]>. node.processing_instruction_node 7 a processinginstruction of an xml document, such as <?xml-stylesheet … ?>. ...
... node.text_node 3 the actual text inside an element or attr. node.cdata_section_node 4 a cdatasection, such as <!cdata[[ … ]]>. node.processing_instruction_node 7 a processinginstruction of an xml document, such as <?xml-stylesheet … ?>. ...
... node.text_node 3 the actual text inside an element or attr. node.cdata_section_node 4 a cdatasection, such as <!cdata[[ … ]]>. node.processing_instruction_node 7 a processinginstruction of an xml document, such as <?xml-stylesheet … ?>. ...
...And 8 more matches
mask-type - CSS: Cascading Style Sheets
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. ...
... 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. ...
... 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. ...
...And 8 more matches
Array.prototype.reduceRight() - JavaScript
the reduceright() method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single 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. see also array.proto
type.reduce() for left-to-right. syntax arr.reduceright(callback(accumulator, currentvalue[, index[, array]])[, initialvalue]) parameters callback function to execute on each value in the array, taking four arguments: accumulator the value previously returned in the last invocation of the callback, or initialvalue, if supplied. (see below.) currentvalue the current element being processe...
...indexoptional the index of the current element being processed in the array. arrayoptional the array reduceright() was called upon. initialvalueoptional value to use as accumulator to the first call of the callback. if no initial value is supplied, the last element in the array will be used and skipped. calling reduce or reduceright on an empty array without an initial value creates a
typeerror. return value the value that results from the reduction. description reduceright executes the callback function once for each element present in the array, excluding holes in the array, receiving four arguments: the initial value (or value from the previous callback call), the value of the current element, the current index, and the array over which iteration is occurring. the call to ...
...ne of two values. if an initialvalue was provided in the call to reduceright, then accumulator will be equal to initialvalue and currentvalue will be equal to the last value in the array. if no initialvalue was provided, then accumulator will be equal to the last value in the array and currentvalue will be equal to the second-to-last value. if the array is empty and no initialvalue was provided,
typeerror would be thrown. if the array has only one element (regardless of position) and no initialvalue was provided, or if initialvalue is provided but the array is empty, the solo value would be returned without calling callback. some example run-throughs of the function would look like this: [0, 1, 2, 3, 4].reduceright(function(accumulator, currentvalue, index, array) { return accumulator + c...
...And 8 more matches
PR_GetDescType
pr_desc_socket_tcp the prfiledesc object represents a tcp socket. ...
... pr_desc_socket_tcp the prfiledesc object represents a tcp socket. ...
... pr_desc_socket_tcp the prfiledesc object represents a tcp socket. ...
...And 7 more matches
libmime content type handlers
warning: the content of this article may be out of date. it was imported from mozilla.org and last updated in 2001. by richard h. pizzarro <rhp@netscape.com> 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 seamonkey. 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 homegrow...
...tream. the primary use of libmime is to parse and render rfc822 messages for use by the messenger component of seamonkey. 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 understood. api's content
type handler plugins are dynamically loaded and need to access internal pointers, functions that are part of the c based object system. the following xp-com interface is implemented by libmime and is necessary for content
type handler plugin development. /* ...
..., a description of the libmime object system should be reviewed and understood. api's content
type handler plugins are dynamically loaded and need to access internal pointers, functions that are part of the c based object system. the following xp-com interface is implemented by libmime and is necessary for content
type handler plugin development. /* * this interface is implemented by content
type handlers that will be * called upon by libmime to process various attachments
types. ...
...And 7 more matches
PointerType
pointer
type represents c pointer. syntax returns a new c
type object describing a new pointer data
type. c
type pointer
type(
type ); parameters
type specifies the
type to which the pointer
type points. this can be any c
type object to declare the new
type as a pointer to that
type. return value a c
type object describing the newly created data
type. exceptions thrown
typeerror thrown if the parameter isn't a c
type. examples creating a
type "pointer to 32-bit integer" looks like this: var intptr
type = new c
types.pointer
type(c
types.int32_t); properties property
type description target
type c
type the
type of object the pointer points to. read only. properties inherited from c
type these properties are available on all c
type objects. ...
...sn't a c
type. examples creating a
type "pointer to 32-bit integer" looks like this: var intptr
type = new c
types.pointer
type(c
types.int32_t); properties property
type description target
type c
type the
type of object the pointer points to. read only. properties inherited from c
type these properties are available on all c
type objects. property
type description name string the
type's name. read only. for primitive
types, this is just the name of the corresponding c
type. for structure and opaque pointer
types, this is simply the string that was passed to the constructor. for other function, pointer, and array
types, this should be a valid c
type expression. ...
... objects. property
type description name string the
type's name. read only. for primitive
types, this is just the name of the corresponding c
type. for structure and opaque pointer
types, this is simply the string that was passed to the constructor. for other function, pointer, and array
types, this should be a valid c
type expression. ptr c
type returns a c
type representing the data
type "pointer to this
type". this is the result of calling c
types.pointer
type(the_
type). read only. size number the size of the
type, in bytes. this is the same value as the c sizeof. read only. note: c
types.void_t.size is undefined. ...
...And 7 more matches
TypeError: More arguments needed - JavaScript
there is an error with how a function is called. more arguments need to be provided. ...
... there is an error with how a function is called. more arguments need to be provided. ...
... there is an error with how a function is called. more arguments need to be provided. ...
...And 7 more matches
TypeError: invalid arguments - JavaScript
the javascript exception "invalid arguments" occurs when
typed array constructors are provided with a wrong argument. message
typeerror: invalid arguments (firefox) error
type typeerror what went wrong? ...
... the javascript exception "invalid arguments" occurs when
typed array constructors are provided with a wrong argument. message
typeerror: invalid arguments (firefox) error
type typeerror what went wrong? ...
... the javascript exception "invalid arguments" occurs when
typed array constructors are provided with a wrong argument. message
typeerror: invalid arguments (firefox) error
type typeerror what went wrong? ...
...And 7 more matches
Array.prototype.reduce() - JavaScript
otherwise, it starts from index 1. array optional the array reduce() was called upon. initialvalue optional a value to use as the first argument to the first call of the callback. if no initialvalue is supplied, the first element in the array will be used as the initial accumulator value and skipped as currentvalue. calling reduce() on an empty array without an initialvalue will throw a
typeerror. return value the single value that results from the reduction. description the reduce() method executes the callback once for each assigned value present in the array, taking four arguments: accumulator currentvalue currentindex array the first time the callback is called, accumulator and currentvalue can be one of two values. if initialvalue is provided in the call to reduce()...
...in the array. if no initialvalue is provided, then accumulator will be equal to the first value in the array, and currentvalue will be equal to the second. note: if initialvalue is not provided, reduce() will execute the callback function starting at index 1, skipping the first index. if initialvalue is provided, it will start at index 0. ...
...ndex 0. if the array is empty and no initialvalue is provided,
typeerror will be thrown. if the array only has one element (regardless of position) and no initialvalue is provided, or if initialvalue is provided but the array is empty, the solo value will be returned without calling callback. ...
...And 7 more matches
Object.prototype.valueOf() - JavaScript
cted. by default, the valueof method is inherited by every object descended from object. every built-in core object overrides this method to return an appropriate value. if an object has no primitive value, valueof returns the object itself. you can use valueof within your own code to convert a built-in object into a primitive value. when you create a custom object, you can override object.proto
type.valueof() to call a custom method instead of the default object method. overriding valueof for custom objects you can create a function to be called in place of the default valueof method. your function must take no arguments. suppose you have an object
type mynumber
type and you want to create a valueof method for it. the following code assigns a user-defined function to the object's valueof m...
...ll a custom method instead of the default object method. overriding valueof for custom objects you can create a function to be called in place of the default valueof method. your function must take no arguments. suppose you have an object
type mynumber
type and you want to create a valueof method for it. the following code assigns a user-defined function to the object's valueof method: mynumber
type.proto
type.valueof = function() { return customprimitivevalue; }; with the preceding code in place, any time an object of
type mynumber
type is used in a context where it is to be represented as a primitive value, javascript automatically calls the function defined in the preceding code. an object's valueof method is usually invoked by javascript, but you can invoke it yourself as follows: mynum...
...oto
type.valueof = function() { return customprimitivevalue; }; with the preceding code in place, any time an object of
type mynumber
type is used in a context where it is to be represented as a primitive value, javascript automatically calls the function defined in the preceding code. an object's valueof method is usually invoked by javascript, but you can invoke it yourself as follows: mynumber
type.valueof() note: objects in string contexts convert via the tostring() method, which is different from string objects converting to string primitives using valueof. all objects have a string conversion, if only "[object
type]". but many objects do not convert to number, boolean, or function. ...
...And 7 more matches
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
symptoms previously you were able to open and display svg content with mozilla, but for no apparent reason its behaviour changes and now it always pops up the "open or save file" dialog when you try to open local svg files, and displays the "additional plugins are required to display all the media on this page" bar when you try to view html with embedded svg. ...
...for legitimate reasons when the svg or its embedding html is broken or served incorrectly over the network (see the svg faq). if the blue square with the white cross displays when you load this scripting across embed demo, then you are not experiencing this problem. if it doesn't, then you almost certainly are. background mozilla decides if and how it can open files by using their media (mime)
type. it obtains the media
type for files in various ways. for files loaded over the network via http, it requires and uses the value assigned to the content-
type http header. for files loaded locally, it first looks in a cache of filename extension to media
type mappings (stored in a mozilla profile file called mime
types.rdf), and if it doesn't find a media
type there, it asks the operating system. a...
...rious ways. for files loaded over the network via http, it requires and uses the value assigned to the content-
type http header. for files loaded locally, it first looks in a cache of filename extension to media
type mappings (stored in a mozilla profile file called mime
types.rdf), and if it doesn't find a media
type there, it asks the operating system. actually, in mozilla firefox 1.5, the media
type for files embedded into html using the html <embed> and <object> tags is (unfortunately) obtained in the same way as it's obtained for local files instead of using the http headers as it should. this bug has been fixed in trunk builds. ...
...And 7 more matches
I/O Types
this chapter describes the most common nspr
types, enumerations, and structures used with the functions described in i/o functions and network addresses. these include the
types used for system access, normal file i/o, and socket (network) i/o.
types unique to a particular function are described with the function itself. for sample code that illustrates basic i/o operations, see introduction to nspr. directory
type file descriptor
types file info
types network address
types
types used with socket options functions
type used with memory-mapped i/o offset interpretation for seek functions directory
type prdir file descriptor
types nspr represents i/o objects, such as open files and sockets, by file descriptors of
type prfiledesc. this section introduces prfiledesc and related...
... prfiledesc priomethods prfileprivate prdescidentity note that the nspr documentation follows the unix convention of using the termfiles to refer to many kinds of i/o objects. to refer specifically to the files in a file system (that is, disk files), this documentation uses the termnormal files. prfiledesc has an object-oriented flavor. ...
...entation follows the unix convention of using the termfiles to refer to many kinds of i/o objects. to refer specifically to the files in a file system (that is, disk files), this documentation uses the termnormal files. prfiledesc has an object-oriented flavor. an i/o function on a prfiledesc structure is carried out by invoking the corresponding "method" in the i/o methods table (a structure of
type priomethods) of the prfiledesc structure (the "object"). different kinds of i/o objects (such as files and sockets) have different i/o methods tables, thus implementing different behavior in response to the same i/o function call. nspr supports the implementation of layered i/o. each layer is represented by a prfiledesc structure, and the prfiledesc structures for the layers are chained together...
...And 6 more matches
NSPR Types
this chapter describes the most common nspr
types. other chapters describe more specialized
types when describing the functions that use them. calling convention
types are used for externally visible functions and globals. algebraic
types of various lengths are used for integer algebra. miscellaneous
types are used for representing size, pointer difference, boolean values, and return values. for information on naming conventions for nspr
types, functions, and macros, see nspr naming conventions. calling convention
types these
types are used to support cross-platform declarations of proto
types and implementations: pr_extern is used for declarations of external functions or variables. pr_implement is used for definitions of external functions or variables. pr_callback is used for ...
... pr_extern is used for declarations of external functions or variables. pr_implement is used for definitions of external functions or variables. pr_callback is used for definitions and declarations of functions that are called via function pointers. a typical example is a function implemented in an application but called from a shared library. ...
...cal example is a function implemented in an application but called from a shared library. ...
...And 6 more matches
FunctionType
function
type represents c function. syntax returns a new c
type object describing a c function. c
type function
type( abi, return
type[, arg
type1, ...] ); parameters abi the abi
type for the function; this is one of the abi constants. return
type a c
type indicating the
type of the value returned by the function. arg
type1... arg
typen zero or more c
type objects indicating the
types of each of the parameters passed into the c function. return value a c
type describing the function
type. the equivalent c function
type declaration would be: return
type (*) ([arg
type1, ..., arg
typen]); exceptions thrown
typeerror abi is not a valid abi constants, or return
type or any of the argument
types are not valid c
type objects. ...
...dicating the
types of each of the parameters passed into the c function. return value a c
type describing the function
type. the equivalent c function
type declaration would be: return
type (*) ([arg
type1, ..., arg
typen]); exceptions thrown
typeerror abi is not a valid abi constants, or return
type or any of the argument
types are not valid c
type objects. properties property
type description abi one of the abi constants the abi of the function. read only. arg
types c
type[] a sealed array of the argument
types. read only. return
type c
type the return
type of the function. read only. properties inherited from c
type these properties are available on all c
type objects. ...
...rties property
type description abi one of the abi constants the abi of the function. read only. arg
types c
type[] a sealed array of the argument
types. read only. return
type c
type the return
type of the function. read only. properties inherited from c
type these properties are available on all c
type objects. property
type description name string the
type's name. read only. for primitive
types, this is just the name of the corresponding c
type. for structure and opaque pointer
types, this is simply the string that was passed to the constructor. for other function, pointer, and array
types, this should be a valid c
type expression. ...
...And 6 more matches
CSS Typed Object Model API - Web APIs
this is easier for authors (for example, numeric values are reflected with actual js numbers, and have unit-aware mathematical operations defined for them). ...
...this is easier for authors (for example, numeric values are reflected with actual js numbers, and have unit-aware mathematical operations defined for them). ...
...ly and more reliably than string parsing and concatenation. this is easier for authors (for example, numeric values are reflected with actual js numbers, and have unit-aware mathematical operations defined for them). it is also generally faster, as values can be directly manipulated and then cheaply translated back into underlying values without having to both build and parse strings of css. css
typed om both allows for the performant manipulation of values assigned to css properties while enabling maintainable code that is both more understand and easier to write. interfaces cssstylevalue 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 expec...
...And 6 more matches
DataTransfer.types - Web APIs
the datatransfer.
types read-only property returns an array of the drag data formats (as strings) that were set in the dragstart event. the order of the formats is the same order as the data included in the drag operation. the formats are unicode strings giving the
type or format of the data, generally given by a mime
type. some values that are not mime
types are special-cased for legacy reasons (for example "text"). syntax datatransfer.
types; return value an array of the data formats used in the drag operation. each format is string. if the drag operation included no data, this list will be empty. if any files are included in the drag operation, then one of the
types will be the string files. example this example shows the use of the
types and items properties. ...
...cy reasons (for example "text"). syntax datatransfer.
types; return value an array of the data formats used in the drag operation. each format is string. if the drag operation included no data, this list will be empty. if any files are included in the drag operation, then one of the
types will be the string files. example this example shows the use of the
types and items properties. ...
...es; return value an array of the data formats used in the drag operation. each format is string. if the drag operation included no data, this list will be empty. if any files are included in the drag operation, then one of the
types will be the string files. example this example shows the use of the
types and items properties. ...
...And 6 more matches
Event.type - Web APIs
the
type read-only property of the event interface 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 event
type = 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. ...
... 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 event
type = 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. ...
...uch as click, load, or error. for a list of available event
types, see the event reference. syntax let event
type = 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 6 more matches
MediaRecorder.mimeType - Web APIs
the mime
type read-only property returns the mime media
type that was specified when creating the mediarecorder object, or, if none was specified, which was chosen by the browser. this is the file format of the file that would result from writing all of the recorded data to disk. keep in mind that not all codecs are supported by a given container; if you write media using a codec that is not supported by a given media container, the resulting file may not work reliably if at all when you try to play it back. see our media
type and format guide for information about container and codec support across browsers. note: the term "mime
type" is officially considered to be historical; these strings are now officially known as media
types. mdn web docs content uses the terms interchangeably. synt...
... media container, the resulting file may not work reliably if at all when you try to play it back. see our media
type and format guide for information about container and codec support across browsers. note: the term "mime
type" is officially considered to be historical; these strings are now officially known as media
types. mdn web docs content uses the terms interchangeably. syntax var mime
type = mediarecorder.mime
type value the mime media
type which describes the format of the recorded media, as a domstring. this string may include the codecs parameter, giving details about the codecs and the codec configurations used by the media recorder. ...
... example ... ...
...And 6 more matches
scroll-snap-type - CSS: Cascading Style Sheets
the scroll-snap-
type css property sets how strictly snap points are enforced on the scroll container in case 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. ...
...e 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. ...
...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. 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. ...
...And 6 more matches
<input type="reset"> - HTML: Hypertext Markup Language
<input> elements of
type "reset" are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values. 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 should usually avoid including reset buttons in your forms. they're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). ...
.../github.com/mdn/interactive-examples and send us a pull request. you should usually avoid including reset buttons in your forms. they're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). ...
...ding reset buttons in your forms. they're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). value a domstring used as the button's label events click supported common attributes
type and value idl attributes value methods none value an <input
type="reset"> element's value attribute contains a domstring that is used as the button's label. ...
...And 6 more matches
X-Content-Type-Options - HTTP
the x-content-
type-options response http header is a marker used by the server to indicate that the mime
types advertised in the content-
type headers should not be changed and be followed. this is a way to opt out of mime
type sniffing, or, in other words, to say that the mime
types are deliberately configured. this header was introduced by microsoft in ie 8 as a way for webmasters to block content sniffing that was happening and could transform non-executable mime
types into executable mime
types. since then, other browsers have introduced it, even if their mime sniffing algorithms were less aggressive. starting with firefox 72, the opting out of mime sniffing is also applied to top-level documents if a content-
type is provided. this can cause html web pages to be downloaded instead of bei...
...rm non-executable mime
types into executable mime
types. since then, other browsers have introduced it, even if their mime sniffing algorithms were less aggressive. starting with firefox 72, the opting out of mime sniffing is also applied to top-level documents if a content-
type is provided. this can cause html web pages to be downloaded instead of being rendered when they are served with a mime
type other than text/html. make sure to set both headers correctly. site security testers usually expect this header to be set. note: x-content-
type-options only apply request-blocking due to nosniff for request destinations of "script" and "style". however, it also enables cross-origin read blocking (corb) protection for html, txt, json and xml files (excluding svg image/svg+xml). header ...
... other than text/html. make sure to set both headers correctly. site security testers usually expect this header to be set. note: x-content-
type-options only apply request-blocking due to nosniff for request destinations of "script" and "style". however, it also enables cross-origin read blocking (corb) protection for html, txt, json and xml files (excluding svg image/svg+xml). ...
...And 6 more matches
TypeError: property "x" is non-configurable and can't be deleted - JavaScript
what went wrong? it was attempted to delete a property, but that property is non-configurable. ...
... what went wrong? it was attempted to delete a property, but that property is non-configurable. ...
... what went wrong? it was attempted to delete a property, but that property is non-configurable. ...
...And 6 more matches
Function.prototype.apply() - JavaScript
ndefined or null a similar outcome can be achieved using the array spread syntax. you can assign a different this object when calling an existing function. this refers to the current object (the calling object). with apply, you can write a method once, and then inherit it in another object, without having to rewrite the method for the new object. apply is very similar to call(), except for the
type of arguments it supports. you use an arguments array instead of a list of arguments (parameters). with apply, you can also use an array literal, for example, func.apply(this, ['eat', 'bananas']), or an array object, for example, func.apply(this, new array('eat', 'bananas')). you can also use arguments for the argsarray parameter. arguments is a local variable of a function. it can be used for al...
... min = math.min(submin, min); } return min; } let min = minofarray([5, 6, 2, 3, 7]); using apply to chain constructors you can use apply to chain constructors for an object (similar to java). in the following example we will create a global function method called construct, which will enable you to use an array-like object with a constructor instead of an arguments list. ...
...y([5, 6, 2, 3, 7]); using apply to chain constructors you can use apply to chain constructors for an object (similar to java). in the following example we will create a global function method called construct, which will enable you to use an array-like object with a constructor instead of an arguments list. ...
...And 6 more matches
Object.prototype.__noSuchMethod__ - Archive of obsolete content
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) { . . . ...
...exist on an object results in a
typeerror being thrown. this behavior can be circumvented by defining a function at that object's __nosuchmethod__ member. the function takes two arguments, the first is the name of the method attempted and the second is an array of the arguments that were passed in the method call. the second argument is an actual array (that is, it inherits through the array.proto
type chain) and not the array-like arguments object. if this method cannot be called, either as if undefined by default, if deleted, or if manually set to a non-function, the javascript engine will revert to throwing
typeerrors. examples simple test of __nosuchmethod__ var o = { __nosuchmethod__: function(id, args) { console.log(id, '(' + args.join(', ') + ')'); ...
...hmethod__ to simulate multiple inheritance an example of code that implements a primitive form of multiple inheritance is shown below. ...
...And 5 more matches
CSSPseudoElement.type - Web APIs
the
type read-only property of the csspseudoelement interface returns the
type of the pseudo-element as a string, represented in the form of a css selector. ...
... the
type read-only property of the csspseudoelement interface returns the
type of the pseudo-element as a string, represented in the form of a css selector. ...
... the
type read-only property of the csspseudoelement interface returns the
type of the pseudo-element as a string, represented in the form of a css selector. ...
...And 5 more matches
DocumentType - Web APIs
the document
type interface represents a node containing a doc
type. <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/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="#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...
...0" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document
type" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document
type</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties fr...
...8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document
type</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode interface. document
type.entities read only a namednodemap of entities declared in the dtd. every node in this map implements the entity interface. ...
...And 5 more matches
PerformanceNavigationTiming.type - Web APIs
example the following example illustrates this property's usage. ...
... example the following example illustrates this property's usage. ...
...r's address bar, form submission, or initializing through a script operation other than reload and back_forward as listed below. reload navigation is through the browser's reload operation or location.reload(). back_forward navigation is through the browser's history traversal operation. prerender navigation is initiated by a prerender hint. this property is read only . ...
...And 5 more matches
<input type="hidden"> - HTML: Hypertext Markup Language
events none. ...
...is submitted. for example, the id of the content that is currently being ordered or edited, or a unique security token. hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content. note: there is a live example below the following line of code — if it is working correctly, you should see nothing! <input id="prodid" name="prodid"
type="hidden" value="xm234jq"> value a domstring representing the value of the hidden data you want to pass back to the server. events none. supported common attributes autocomplete idl attributes value methods none. note: the input and change events do not apply to this input
type. hidden inputs cannot be focused even using javas...
...ayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "view source" functionality. do not rely on hidden inputs as a form of security. additional attributes in addition to the attributes common to all <input> elements, hidden inputs offer the following attributes: attribute description name like all input
types, the name of the input to report when submitting the form; the special value _charset_ causes the hidden input's value to be reported as the character encoding used to submit the form name this is actually one of the common attributes, but it has a special meaning available for hidden inputs. normally, the name attribute functions on hidden inputs just like on any other input. however, w...
...And 5 more matches
TypeError: setting getter-only property "x" - JavaScript
there is an attempt to set a new value to a property for which only a getter is specified. ...
... there is an attempt to set a new value to a property for which only a getter is specified. ...
... there is an attempt to set a new value to a property for which only a getter is specified. ...
...And 5 more matches
TypeError: invalid assignment to const "x" - JavaScript
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. ...
... 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. ...
... 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. ...
...And 5 more matches
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. ...
...null is not an object and won't work. you must provide a proper object in the given situation. ...
...null is not an object and won't work. you must provide a proper object in the given situation. ...
...And 5 more matches
Array.prototype.filter() - JavaScript
re, it may not be present in all implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of filter() in ecma-262 implementations which do not natively support it. ...
...implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of filter() in ecma-262 implementations which do not natively support it. this algorithm is exactly equivalent to the one specified in ecma-262, 5th edition, assuming that fn.call evaluates to the original value of function.proto
type.bind(), and that array.proto
type.push() has its original value. ...
... this by inserting the following code at the beginning of your scripts, allowing use of filter() in ecma-262 implementations which do not natively support it. this algorithm is exactly equivalent to the one specified in ecma-262, 5th edition, assuming that fn.call evaluates to the original value of function.proto
type.bind(), and that array.proto
type.push() has its original value. ...
...And 5 more matches
Array.prototype.find() - JavaScript
isfies the provided testing 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. if you need the index of the found element in the array, use findindex(). if you need to find the index of a value, use array.proto
type.indexof(). (it’s similar to findindex(), but checks each element for equality with the value instead of using a testing function.) if you need to find if a value exists in an array, use array.proto
type.includes(). again, it checks each element for equality with the value instead of using a testing function. if you need to find if any element satisfies the provided testing function, use array.
...xof(). (it’s similar to findindex(), but checks each element for equality with the value instead of using a testing function.) if you need to find if a value exists in an array, use array.proto
type.includes(). again, it checks each element for equality with the value instead of using a testing function. if you need to find if any element satisfies the provided testing function, use array.proto
type.some(). syntax arr.find(callback(element[, index[, array]])[, thisarg]) parameters callback function to execute on each value in the array, taking 3 arguments: element the current element in the array. index optional the index (position) of the current element in the array. array optional the array that find was called on. thisarg optional object to use as this inside ...
...ns. if an existing, yet-unvisited element of the array is changed by callback, its value passed to the callback will be the value at the time find visits that element's index. elements that are deleted are still visited. polyfill this method has been added to the ecmascript 2015 specification and may not be available in all javascript implementations yet. however, you can polyfill array.proto
type.find with the following snippet: // https://tc39.github.io/ecma262/#sec-array.proto
type.find if (!array.proto
type.find) { object.defineproperty(array.proto
type, 'find', { value: function(predicate) { // 1. let o be ? toobject(this value). if (this == null) { throw
typeerror('"this" is null or not defined'); } var o = object(this); // 2. let len be ? ...
...And 5 more matches
Array.prototype.indexOf() - JavaScript
ront to back. if the provided index is 0, then the whole array will be searched. default: 0 (entire array is searched). return value the first index of the element in the array; -1 if not found. description indexof() compares searchelement to elements of the array using strict equality (the same method used by the === or triple-equals operator). ...
...see string.proto
type.indexof(). polyfill indexof() was added to the ecma-262 standard in the 5th edition; as such it may not be present in all browsers. you can work around this by utilizing the following code at the beginning of your scripts. this will allow you to use indexof() when there is still no native support. this algorithm matches the one specified in ecma-262, 5th edition, assuming
typeerror and math.abs() have their original values. // this version tries to optimize by only checking for "in" when looking for undefined and // skipping the definitely fruitless nan search. other parts are merely cosmetic conciseness. // whether it is actually faster remains to be seen. ...
...native support. this algorithm matches the one specified in ecma-262, 5th edition, assuming
typeerror and math.abs() have their original values. // this version tries to optimize by only checking for "in" when looking for undefined and // skipping the definitely fruitless nan search. other parts are merely cosmetic conciseness. // whether it is actually faster remains to be seen. ...
...And 5 more matches
Array.prototype.some() - JavaScript
! polyfill some() was added to the ecma-262 standard in the 5th edition, and it may not be present in all implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of some() in implementations which do not natively support it. ...
... all implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of some() in implementations which do not natively support it. this algorithm is exactly the one specified in ecma-262, 5th edition, assuming object and
typeerror have their original values and that fun.call evaluates to the original value of function.proto
type.call(). ...
...lowing use of some() in implementations which do not natively support it. this algorithm is exactly the one specified in ecma-262, 5th edition, assuming object and
typeerror have their original values and that fun.call evaluates to the original value of function.proto
type.call(). ...
...And 5 more matches
Function.prototype.toString() - JavaScript
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.tostring() return value a string representing the source code of the function. ...
...from object; it does not inherit object.proto
type.tostring. for user-defined function objects, the tostring method returns a string containing the source text segment which was used to define the function. javascript calls the tostring method automatically when a function is to be represented as a text value, e.g. when a function is concatenated with a string. the tostring() method will throw a
typeerror exception ("function.proto
type.tostring called on incompatible object"), if its this value object is not a function object. ...
...urce text segment which was used to define the function. javascript calls the tostring method automatically when a function is to be represented as a text value, e.g. when a function is concatenated with a string. the tostring() method will throw a
typeerror exception ("function.proto
type.tostring called on incompatible object"), if its this value object is not a function object. ...
...And 5 more matches
Object.prototype.toLocaleString() - JavaScript
com/mdn/interactive-examples and send us a pull request. syntax obj.tolocalestring() return value a string representing the object. description object's tolocalestring returns the result of calling tostring(). this function is provided to give objects a generic tolocalestring method, even though not all may use it. see the list below. ...
...pull request. syntax obj.tolocalestring() return value a string representing the object. description object's tolocalestring returns the result of calling tostring(). this function is provided to give objects a generic tolocalestring method, even though not all may use it. see the list below. ...
...ng() return value a string representing the object. description object's tolocalestring returns the result of calling tostring(). this function is provided to give objects a generic tolocalestring method, even though not all may use it. see the list below. ...
...And 5 more matches
Promise.prototype.catch() - JavaScript
this means that you have to provide an onrejected function even if you want to fall back to an undefined result value - for example obj.catch(() => {}). 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. ...
...nrejected); p.catch(function(reason) { // rejection }); parameters onrejected a function called when the promise is rejected. this function has one argument: reason the rejection reason. the promise returned by catch() is rejected if onrejected throws an error or returns a promise which is itself rejected; otherwise, it is resolved. return value internally calls promise.proto
type.then on the object upon which it was called, passing the parameters undefined and the received onrejected handler. returns the value of that call, which is a promise. note the examples below are throwing instances of error. this is considered good practice in contrast to throwing strings; otherwise, the part doing the catching would have to perform checks to see if the argument was a string or ...
...ll, which is a promise. note the examples below are throwing instances of error. this is considered good practice in contrast to throwing strings; otherwise, the part doing the catching would have to perform checks to see if the argument was a string or an error, and you might lose valuable information like stack traces. ...
...And 5 more matches
handler.getPrototypeOf() - JavaScript
the handler.getproto
typeof() method is a trap for the [[getproto
typeof]] internal method. 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(obj, { getproto
typeof(target) { ... } }); parameters the following parameter is passed to the getproto
typeof() method. this is bound to the handler. target the target object. return value the getproto
typeof() method must return an object or null. ...
...us a pull request. syntax const p = new proxy(obj, { getproto
typeof(target) { ... } }); parameters the following parameter is passed to the getproto
typeof() method. this is bound to the handler. target the target object. return value the getproto
typeof() method must return an object or null. description interceptions this trap can intercept these operations: object.getproto
typeof() reflect.getproto
typeof() __proto__ object.proto
type.isproto
typeof() instanceof invariants if the following invariants are violated, the proxy will throw a
typeerror: getproto
typeof() method must return an object or null. if target is not extensible, object.getproto
typeof(proxy) method must return the same value as object.getproto
typeof(target). examples basic usage const obj = ...
...oto
type.isproto
typeof() instanceof invariants if the following invariants are violated, the proxy will throw a
typeerror: getproto
typeof() method must return an object or null. if target is not extensible, object.getproto
typeof(proxy) method must return the same value as object.getproto
typeof(target). ...
...And 5 more matches
TypeError - JavaScript
the
typeerror object represents an error when an operation could not be performed, typically (but not exclusively) when a value is not of the expected
type. a
typeerror may be thrown when: an operand or argument passed to a function is incompatible with 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.proto
type.message error message. although ecma-262 specifies that
typeerror should provide its own message property, in spidermonkey, it inherits error.proto
type.message.
typeerror.proto
type.name error name. inherited from error. ...
...changed; or when attempting to use a value in an inappropriate way. constructor
typeerror() creates a new
typeerror object. instance properties
typeerror.proto
type.message error message. although ecma-262 specifies that
typeerror should provide its own message property, in spidermonkey, it inherits error.proto
type.message.
typeerror.proto
type.name error name. inherited from error.
typeerror.proto
type.filename path to file that raised this error. inherited from error.
typeerror.proto
type.linenumber line number in file that raised this error. inherited from error.
typeerror.proto
type.columnnumber column number in line that raised this error. inherited from error. ...
...rmonkey, it inherits error.proto
type.message.
typeerror.proto
type.name error name. inherited from error.
typeerror.proto
type.filename path to file that raised this error. inherited from error.
typeerror.proto
type.linenumber line number in file that raised this error. inherited from error.
typeerror.proto
type.columnnumber column number in line that raised this error. inherited from error.
typeerror.proto
type.stack stack trace. inherited from error. ...
...And 5 more matches
Content type - SVG: Scalable Vector Graphics
angle <angle> angles are specified in one of two ways. when used in the value of a property in a stylesheet, an <angle> is defined as follows: angle ::= number (~"deg" | ~"grad" | ~"rad")? where deg indicates degrees, grad indicates grads and rad indicates radians. for properties defined in css2, an angle unit identifier must be provided. for angle values in svg-specific properties and their corresponding presentation attributes, the angle unit identifier is optional. if not provided, the angle value is assumed to be in degrees. ...
...r in css2, the angle identifier, if specified, must be in lower case. when angles are used in an svg attribute, <angle> is instead defined as follows: angle ::= number ("deg" | "grad" | "rad")? the unit identifiers in such <angle> values must be in lower case. in the svg dom, <angle> values are represented using svgangle or svganimatedangle objects. anything <anything> the basic
type <anything> is a sequence of zero or more characters. specifically: anything ::= char* where char is the production for a character, as defined in xml 1.0 , section 2.2. clock-value <clock-value> clock values have the same syntax as in smil animation specification. the grammar for clock values is repeated here: clock-val ::= full-clock-val | partial-clock-val ...
... = 10.5 seconds = 10 seconds and 500 milliseconds timecount values: 3.2h = 3.2 hours = 3 hours and 12 minutes 45min = 45 minutes 30s = 30 seconds 5ms = 5 milliseconds 12.467 = 12 seconds and 467 milliseconds fractional values are just (base 10) floating point definitions of seconds. thus: 00.5s = 500 milliseconds 00:00.005 = 5 milliseconds color <color> the basic
type <color> is a css2 compatible specification for a color in the srgb color space. <color> applies to svg'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 ty...
...And 5 more matches
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/seamonkey]) (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. ...
...derbird/seamonkey]) (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 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 i...
.... 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). ...
...And 4 more matches
Mozilla's DOCTYPE sniffing - Archive of obsolete content
irefox 4 / thunderbird 3.3 / seamonkey 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. 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 doc
type 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. see bug 153032 for the creation of the almost-standards mode around mozilla 1.0. the goals that led to choosing this behavior were the following: almost all existing text/...
...choosing this behavior were the following: almost all existing text/html pages on the web that need to be in quirks mode to be displayed correctly should be displayed using quirks mode. (almost all, rather than all, to allow for the following points as well.) authors writing web pages to current standards should be able to trigger strict mode. ...
...itten using any public identifiers in doc
type declarations that appear in the future should be displayed using strict mode. in other words, the algorithm is the best approximation we can find for determining which pages were written after mozilla became a known important user-agent on the web. full standards mode the following trigger full standards mode: any document sent with an xml mime
type such as text/xml, application/xml, or application/xhtml+xml (since sniffing only occurs for documents sent as text/html). any "doc
type html system" as opposed to "doc
type html public", except for the ibm doc
type noted below a doc
type declaration without a dtd, i.e., <!doc
type html>. a doc
type declaration with an internal subset. ...
...And 4 more matches
js-ctypes
js-c
types allows application and extension code to call back and forth to native code written in c. c++ support is possible through vtable pointers see using com from js-c
types. for a discussion on extended c++ support see bug 505907. other work made possible by js-c
types is jni, this is elaborated on in the jni.jsm section and not the js-c
types section due to the jsm abstracting away all of the js-c
types. unlike binary xpcom components, it allows developers to ship a single binary for use with multiple versions of firefox. note: js-c
types is only available from chrome code; that is, c
types is not available to websites, only application and extension code. ...
...d not the js-c
types section due to the jsm abstracting away all of the js-c
types. unlike binary xpcom components, it allows developers to ship a single binary for use with multiple versions of firefox. note: js-c
types is only available from chrome code; that is, c
types is not available to websites, only application and extension code. documentation if you are brand new to js-c
types, and have no idea about it, the pages you should read first is - c
types.open followed by standard os libraries. ...
...hip a single binary for use with multiple versions of firefox. note: js-c
types is only available from chrome code; that is, c
types is not available to websites, only application and extension code. documentation if you are brand new to js-c
types, and have no idea about it, the pages you should read first is - c
types.open followed by standard os libraries. ...
...And 4 more matches
BiquadFilterNode.type - Web APIs
frequencies below the cutoff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value is, the greater is the peak. ...
...frequencies below the cutoff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value is, the greater is the peak. ...
...frequencies below the cutoff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value is, the greater is the peak. ...
...And 4 more matches
Client.type - Web APIs
the value can be one of "window" "worker" "sharedworker" example // service worker client (e.g. ...
...the value can be one of "window" "worker" "sharedworker" example // service worker client (e.g. ...
...the value can be one of "window" "worker" "sharedworker" example // service worker client (e.g. ...
...And 4 more matches
XMLHttpRequestResponseType - Web APIs
see html in xmlhttprequest to learn more about using xhr to fetch html content. ...
...see html in xmlhttprequest to learn more about using xhr to fetch html content. ...
...see html in xmlhttprequest to learn more about using xhr to fetch html content. ...
...And 4 more matches
<input type="color"> - HTML: Hypertext Markup Language
only simple colors (without alpha channel) are allowed though css colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel. the element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window. ...
...ease clone https://github.com/mdn/interactive-examples and send us a pull request. value a 7-character domstring specifying a <color> in lower-case hexadecimal notation events change and input supported common attributes autocomplete and list idl attributes list and value methods select() value the value of an <input> element of
type color is always a domstring which contains a 7-character string specifying an rgb color in hexadecimal format. while you can input the color in either upper- or lower-case, it will be stored in lower-case form. the value is never in any other form, and is never empty. note: setting the value to anything that isn't a valid, fully-opaque, rgb color in hexadecimal notation will result in the value...
...lor names, or any css function syntax, to set the value. this makes sense when you keep in mind that html and css are separate languages and specifications. in addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g. #009900aa) will also result in the color being set to #000000. note: any web browser that doesn't support an input of
type color will naturally fall back to the
type text. because users can write colors in many different ways (such as rgb(255, 255, 0)), one way to work around this is to set a pattern attribute equal to either #[0-9a-f]{6} or #[0-9a-fa-f]{6} (preferably the latter because some users may not expect a different result with just a letter-case change) and set a placeholder attribute equal to a color repre...
...And 4 more matches
TypeError: cyclic object value - JavaScript
the json format per se doesn't support object references (although an ietf draft exists), hence json.stringify() doesn't try to solve them and fails accordingly. ...
... the json format per se doesn't support object references (although an ietf draft exists), hence json.stringify() doesn't try to solve them and fails accordingly. ...
... the json format per se doesn't support object references (although an ietf draft exists), hence json.stringify() doesn't try to solve them and fails accordingly. ...
...And 4 more matches
Array.prototype.map() - JavaScript
ank. polyfill map was added to the ecma-262 standard in the 5th edition. therefore, it may not be present in all implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of map in implementations which do not natively support it. ...
...mentations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of map in implementations which do not natively support it. this algorithm is exactly the one specified in ecma-262, 5th edition, assuming object,
typeerror, and array have their original values and that callback.call evaluates to the original value of function.proto
type.call. // production steps of ecma-262, edition 5, 15.4.4.19 // reference: http://es5.github.io/#x15.4.4.19 if (!array.proto
type.map) { array.proto
type.map = function(callback/*, thisarg*/) { var t, a, k; if (this == null) { throw new
typeerror('this is null or not defined'); } // 1. let o be the result of calling toobject passing the |this| // value as the argu...
...s null or not defined'); } // 1. let o be the result of calling toobject passing the |this| // value as the argument. var o = object(this); // 2. let lenvalue be the result of calling the get internal // method of o with the argument "length". // 3. let len be touint32(lenvalue). var len = o.length >>> 0; // 4. if iscallable(callback) is false, throw a
typeerror exception. // see: http://es5.github.com/#x9.11 if (
typeof callback !== 'function') { throw new
typeerror(callback + ' is not a function'); } // 5. if thisarg was supplied, let t be thisarg; else let t be undefined. if (arguments.length > 1) { t = arguments[1]; } // 6. let a be a new array created as if by the expression new array(len) // wher...
...And 4 more matches
Array.prototype.toLocaleString() - JavaScript
rings are separated by a locale-specific string (such as a comma “,”). syntax arr.tolocalestring([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. options optional an object with configuration properties, for numbers see number.proto
type.tolocalestring(), and for dates see date.proto
type.tolocalestring(). return value a string representing the elements of the array. polyfill // https://tc39.github.io/ecma402/#sup-array.proto
type.tolocalestring if (!array.proto
type.tolocalestring) { object.defineproperty(array.proto
type, 'tolocalestring', { value: function(locales, options) { // 1. let o be ? toobject(this value)...
...let len be ? tolength(? get(a, "length")). var len = a.length >>> 0; // 3. let separator be the string value for the // list-separator string appropriate for the // host environment's current locale (this is // derived in an implementation-defined way). ...
... : nextelement.tolocalestring(locales, options); // e. let r be a string value produced by // concatenating s and r. r = s + r; // f. increase k by 1. k++; } // 10. return r. ...
...And 4 more matches
handler.setPrototypeOf() - JavaScript
the handler.setproto
typeof() method is a trap for object.setproto
typeof(). 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, { setproto
typeof: function(target, proto
type) { } }); parameters the following parameters are passed to the setproto
typeof() method. this is bound to the handler. target the target object. proto
type the object's new proto
type or null. return value the setproto
typeof() method returns true if the [[proto
type]] was successfully changed, otherwise false. description the handler.setproto
typeof() method is a trap for object.setproto
typeof(). inter...
...thod. this is bound to the handler. target the target object. proto
type the object's new proto
type or null. return value the setproto
typeof() method returns true if the [[proto
type]] was successfully changed, otherwise false. description the handler.setproto
typeof() method is a trap for object.setproto
typeof(). interceptions this trap can intercept these operations: object.setproto
typeof() reflect.setproto
typeof() invariants if the following invariants are violated, the proxy will throw a
typeerror: if target is not extensible, the proto
type parameter must be the same value as object.getproto
typeof(target). ...
...p for object.setproto
typeof(). interceptions this trap can intercept these operations: object.setproto
typeof() reflect.setproto
typeof() invariants if the following invariants are violated, the proxy will throw a
typeerror: if target is not extensible, the proto
type parameter must be the same value as object.getproto
typeof(target). examples if you want to disallow setting a new proto
type for your object, your handler's setproto
typeof() method can either return false, or it can throw an exception. approach 1: returning false this approach means that any mutating operation that throws an exception on failure to mutate, must create the exception itself. for example, object.setproto
typeof() will create and throw a
typeerror itself. if the mutation is performed by an operation tha...
...And 4 more matches
TypeListener
typelisteners can be registered with add
typelistener() and will then receive notification as addon
type are registered and unregistered. method overview void on
typeadded(in addon
type type) void on
typeremoved(in addon
type type) methods on
typeadded() called when an add-on
type has been added. void on
typeadded( in addon
type type ) parameters
type the addon
type that is being added needsrestart true if an application restart is necessary for the change to take effect on
typeremoved() called when an add-on
type has been removed. ...
...ed(in addon
type type) void on
typeremoved(in addon
type type) methods on
typeadded() called when an add-on
type has been added. void on
typeadded( in addon
type type ) parameters
type the addon
type that is being added needsrestart true if an application restart is necessary for the change to take effect on
typeremoved() called when an add-on
type has been removed. ...
... void on
typeremoved(in addon
type type) methods on
typeadded() called when an add-on
type has been added. void on
typeadded( in addon
type type ) parameters
type the addon
type that is being added needsrestart true if an application restart is necessary for the change to take effect on
typeremoved() called when an add-on
type has been removed. ...
...And 3 more matches
JS_LinkConstructorAndPrototype
this article covers features introduced in spidermonkey 17 set up ctor.proto
type = proto and proto.constructor = ctor with the right property flags. syntax bool js_linkconstructorandproto
type(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 proto
type object. ...
... 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 proto
type object. ...
...ext * 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 proto
type object. ...
...And 3 more matches
JS_SetPrototype
set a javascript object's proto
type. syntax bool js_setproto
type(jscontext *cx, js::handleobject obj, js::handleobject proto); name
type description cx jscontext * the context in which to set the object's proto
type. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object to modify. proto js::handleobject the object to set as the new proto
type of obj. description js_setproto
type sets the proto
type object for a specified object. a proto
type object provides properties that are shared by similar js object instances. ...
...e build, the caller must be in a request on this jscontext. obj js::handleobject the object to modify. proto js::handleobject the object to set as the new proto
type of obj. description js_setproto
type sets the proto
type object for a specified object. a proto
type object provides properties that are shared by similar js object instances. ordinarily you set a proto
type for an object when you create the object with js_newobject, but if you do not set a proto
type at that time, you can later call js_setproto
type to do so. obj is a pointer to an existing js object, and proto is a pointer to second existing object upon which the first object is to be based. on success, js_setproto
type returns true. otherwise it returns false. take care not to create a circularly-lin...
...en you create the object with js_newobject, but if you do not set a proto
type at that time, you can later call js_setproto
type to do so. obj is a pointer to an existing js object, and proto is a pointer to second existing object upon which the first object is to be based. on success, js_setproto
type returns true. otherwise it returns false. take care not to create a circularly-linked list of proto
types using this function, because such a set of proto
types cannot be resolved by the javascript engine and can easily lead to an infinite loop. ...
...And 3 more matches
CSSNumericValue.type - Web APIs
working draft initial definition. ...
... working draft initial definition. ...
... working draft initial definition. ...
...And 3 more matches
HTMLObjectElement.type - Web APIs
living standard initial definition. ...
... living standard initial definition. ...
... living standard initial definition. ...
...And 3 more matches
NonDocumentTypeChildNode.previousElementSibling - Web APIs
the nondocument
typechildnode.previouselementsibling read-only property returns the element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list. syntax prevnode = elementnodereference.previouselementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <li>this is a list item</li> <li>this is another list item</li> <div id="div-03">here is div-03</div> <script> let el = document.getelementbyid('div-03').previouselementsibling; document.write('<p>siblings of div-03</p><ol>'); while (el) { document.write('<li>' + el.nodename + '</li>'); el = el.previouselementsibling; } document.write('</ol>'); </script> this example outputs the following into the page ...
...iblings of div-03 1. li 2. li 3. div 4. ...
... unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("previouselementsibling" in document.documentelement)){ object.defineproperty(element.proto
type, "previouselementsibling", { get: function(){ var e = this.previoussibling; while(e && 1 !== e.node
type) e = e.previoussibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocument
typechildnode/previouselementsibling/previouselementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('previouselementsibling')) { return; } object.defineproperty(it...
...And 3 more matches
PointerEvent.pointerType - Web APIs
the pointer
type read-only property of the pointerevent interface indicates the device
type (mouse, pen, or touch) that caused a given pointer event. syntax var p
type = pointerevent.pointer
type; return value p
type the event's pointer
type. the supported values are the following strings: "mouse" the event was generated by a mouse device. "pen" the event was generated by a pen or stylus device. "touch" the event was generated by a touch, such as a finger. if the device
type cannot be detected by the browser, the value can be an empty string (""). if the browser supports pointer device
types other than those listed above, the value should be vendor-prefixed to avoid conflicting names for different
types of devices. example this example illustrates using the value of...
... "touch" the event was generated by a touch, such as a finger. if the device
type cannot be detected by the browser, the value can be an empty string (""). if the browser supports pointer device
types other than those listed above, the value should be vendor-prefixed to avoid conflicting names for different
types of devices. example this example illustrates using the value of the pointer
type property to call the appropriate pointer
type processing function. ...
...browser supports pointer device
types other than those listed above, the value should be vendor-prefixed to avoid conflicting names for different
types of devices. example this example illustrates using the value of the pointer
type property to call the appropriate pointer
type processing function. ...
...And 3 more matches
WebGL types - Web APIs
the following
types are used in webgl interfaces. webgl 1 these
types are used within a webglrenderingcontext.
type web idl
type description glenum unsigned long used for enums. see also the list of constants. glboolean boolean a boolean. glbitfield unsigned long a bit field that stores multiple, logical bits. used for example in webglrenderingcontext.clear(). glbyte byte 8-bit twos complement signed integer. glshort short 16-bit twos complement signed integer. glint long 32-bit twos complement signed integer. glsizei long used for sizes (e.g. width and height of the drawing buffer). glintptr long long special
type for pointer arithmetic. glsizeipt...
... glbyte byte 8-bit twos complement signed integer. glshort short 16-bit twos complement signed integer. glint long 32-bit twos complement signed integer. glsizei long used for sizes (e.g. width and height of the drawing buffer). glintptr long long special
type for pointer arithmetic. glsizeiptr long long special
type for pointer arithmetic. glubyte octet 8-bit twos complement unsigned integer. glushort unsigned short 16-bit twos complement unsigned integer. gluint unsigned long 32-bit twos complement unsigned integer. glfloat unrestricted float 32-bit ieee floating point number. glclampf unrestricted float clamped 32-bit ieee floating ...
...ubyte octet 8-bit twos complement unsigned integer. glushort unsigned short 16-bit twos complement unsigned integer. gluint unsigned long 32-bit twos complement unsigned integer. glfloat unrestricted float 32-bit ieee floating point number. glclampf unrestricted float clamped 32-bit ieee floating point number. webgl 2 these
types are used within a webgl2renderingcontext. all webgl 1
types are used as well.
type web idl
type description glint64 long long signed 64-bit integer number. webgl extensions these
types are used within webgl extensions.
type web idl
type description gluint64ext long long unsigned 64-bit integer number. specifications ...
...And 3 more matches
XPathResult.resultType - Web APIs
the read-only result
type property of the xpathresult interface represents the
type of the result, as defined by the
type constants. note: this feature is available in web workers. syntax var result
type = result.result
type; return value an integer value representing the
type of the result, as defined by the
type constants. constants result
type defined constant value description any_
type 0 a result set containing whatever
type naturally results from evaluation of the expression. note that if the result is a node-set then unordered_node_iterator_
type is always the resulting
type. number_
type 1 a result containing a single number. this is useful for example, in an xpath expression using the count() function. ...
... description any_
type 0 a result set containing whatever
type naturally results from evaluation of the expression. note that if the result is a node-set then unordered_node_iterator_
type is always the resulting
type. number_
type 1 a result containing a single number. this is useful for example, in an xpath expression using the count() function. string_
type 2 a result containing a single string. boolean_
type 3 a result containing a single boolean value. this is useful for example, in an xpath expression using the not() function. unordered_node_iterator_
type 4 a result node-set containing all the nodes matching the expression. the nodes may not necessarily be in the same order that they appear in the document. ...
...g a single string. boolean_
type 3 a result containing a single boolean value. this is useful for example, in an xpath expression using the not() function. unordered_node_iterator_
type 4 a result node-set containing all the nodes matching the expression. the nodes may not necessarily be in the same order that they appear in the document. ordered_node_iterator_
type 5 a result node-set containing all the nodes matching the expression. the nodes in the result set are in the same order that they appear in the document. unordered_node_snapshot_
type 6 a result node-set containing snapshots of all the nodes matching the expression. the nodes may not necessarily be in the same order that they appear in the document. ordered_node_snaps...
...And 3 more matches
:first-of-type - CSS: Cascading Style Sheets
note that the universal selector (*) is implied when no simple selector is written. ...
...note that the universal selector (*) is implied when no simple selector is written. ...
...note that the universal selector (*) is implied when no simple selector is written. ...
...And 3 more matches
:last-of-type - CSS: Cascading Style Sheets
note that the universal selector (*) is implied when no simple selector is written. ...
...note that the universal selector (*) is implied when no simple selector is written. ...
...note that the universal selector (*) is implied when no simple selector is written. ...
...And 3 more matches
:nth-of-type() - CSS: Cascading Style Sheets
the :nth-of-
type() css pseudo-class matches elements of a given
type (tag name), based on their position among a group of siblings. /* selects every fourth <p> element among any group of siblings */ p:nth-of-
type(4n) { color: lime; } syntax the nth-of-
type pseudo-class is specified with a single argument, which represents the pattern for matching elements. see :nth-child for a more detailed explanation of its syntax. ...
...f a given
type (tag name), based on their position among a group of siblings. /* selects every fourth <p> element among any group of siblings */ p:nth-of-
type(4n) { color: lime; } syntax the nth-of-
type pseudo-class is specified with a single argument, which represents the pattern for matching elements. see :nth-child for a more detailed explanation of its syntax. ...
...ld for a more detailed explanation of its syntax. ...
...And 3 more matches
scroll-snap-type-x - CSS: Cascading Style Sheets
mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled horizontally. ...
... mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled horizontally. ...
... mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled horizontally. ...
...And 3 more matches
scroll-snap-type-y - CSS: Cascading Style Sheets
mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled vertically. ...
... mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled vertically. ...
... mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled vertically. ...
...And 3 more matches
Common MIME types - HTTP
here is a list of mime
types, associated by
type of documents, ordered by their common extensions. two primary mime
types are important for the role of default
types: text/plain is the default value for textual files. a textual file should be human-readable and must not contain binary data. application/octet-stream is the default value for all other cases. an unknown file
type should use this
type. browsers pay a particular care when manipulating these files, attempting to safeguard the user to prevent dangerous behaviors. iana is the official registry of mime media
types and maintains a list of all the official mime
types. ...
...ontain binary data. application/octet-stream is the default value for all other cases. an unknown file
type should use this
type. browsers pay a particular care when manipulating these files, attempting to safeguard the user to prevent dangerous behaviors. iana is the official registry of mime media
types and maintains a list of all the official mime
types. ...
...for all other cases. an unknown file
type should use this
type. browsers pay a particular care when manipulating these files, attempting to safeguard the user to prevent dangerous behaviors. iana is the official registry of mime media
types and maintains a list of all the official mime
types. ...
...And 3 more matches
CSP: plugin-types - HTTP
the http content-security-policy (csp) plugin-
types directive restricts the set of plugins that can be embedded into a document by limiting the
types of resources which can be loaded. instantiation of an <embed>, <object> or <applet> element will fail if: the element to load does not declare a valid mime
type, the declared
type does not match one of specified
types in the plugin-
types directive, the fetched resource does not match the declared
type. csp version 2 directive
type document directive default-src fallback no. not setting this allows anything. ...
...ement will fail if: the element to load does not declare a valid mime
type, the declared
type does not match one of specified
types in the plugin-
types directive, the fetched resource does not match the declared
type. csp version 2 directive
type document directive default-src fallback no. not setting this allows anything. syntax one or more mime
types can be set for the plugin-
types policy: content-security-policy: plugin-
types <
type>/<sub
type>; content-security-policy: plugin-
types <
type>/<sub
type> <
type>/<sub
type>; <
type>/<sub
type> a valid mime
type. ...
...ng. syntax one or more mime
types can be set for the plugin-
types policy: content-security-policy: plugin-
types <
type>/<sub
type>; content-security-policy: plugin-
types <
type>/<sub
type> <
type>/<sub
type>; <
type>/<sub
type> a valid mime
type. examples disallowing plugins to disallow all plugins, the object-src directive should be set to 'none' which will disallow plugins. the plugin-
types directive is only used if you are allowing plugins with object-src at all. ...
...And 3 more matches
TypeError: can't redefine non-configurable property "x" - JavaScript
the configurable attribute controls whether the property can be deleted from the object and whether its attributes (other than writable) can be changed. ...
...the configurable attribute controls whether the property can be deleted from the object and whether its attributes (other than writable) can be changed. ...
...the configurable attribute controls whether the property can be deleted from the object and whether its attributes (other than writable) can be changed. ...
...And 3 more matches
TypeError: can't delete non-configurable array element - JavaScript
when shortening an array, the elements beyond the new array length will be deleted, which failed in this situation. ...
...when shortening an array, the elements beyond the new array length will be deleted, which failed in this situation. ...
...when shortening an array, the elements beyond the new array length will be deleted, which failed in this situation. ...
...And 3 more matches
TypeError: Reduce of empty array with no initial value - JavaScript
the javascript exception "reduce of empty array with no initial value" occurs when a reduce function is used. message
typeerror: reduce of empty array with no initial value error
type typeerror what went wrong? in javascript, there are several reduce functions: array.proto
type.reduce(), array.proto
type.reduceright() and
typedarray.proto
type.reduce(),
typedarray.proto
type.reduceright()). these functions optionally take an initialvalue (which will be used as the first argument to the first call of the callback). however, if no initial value is provided, it will use the first element of the array or
typedarray as the initial value. this error is raised when an empty array is provided because no initial value can be returned in that case. examples invalid cases this problem appea...
...thus leaving none to be used as the initial value. ...
...thus leaving none to be used as the initial value. ...
...And 3 more matches
Array.prototype.findIndex() - JavaScript
cation of callback. callback will not process the elements appended to the array after the call to findindex() begins. if an existing, unvisited element of the array is changed by callback, its value passed to the callback will be the value at the time findindex() visits the element's index. elements that are deleted are still visited. polyfill // https://tc39.github.io/ecma262/#sec-array.proto
type.findindex if (!array.proto
type.findindex) { object.defineproperty(array.proto
type, 'findindex', { value: function(predicate) { // 1. let o be ? toobject(this value). if (this == null) { throw new
typeerror('"this" is null or not defined'); } var o = object(this); // 2. let len be ? tolength(? get(o, "length")). var len = o.length >>> 0; //...
...if thisarg was supplied, let t be thisarg; else let t be undefined. var thisarg = arguments[1]; // 5. let k be 0. var k = 0; // 6. repeat, while k < len while (k < len) { // a. ...
...if thisarg was supplied, let t be thisarg; else let t be undefined. var thisarg = arguments[1]; // 5. let k be 0. var k = 0; // 6. repeat, while k < len while (k < len) { // a. let pk be ! tostring(k). // b. let kvalue be ? get(o, pk). ...
...And 3 more matches
Array.prototype.forEach() - JavaScript
to execute side effects at the end of a chain. foreach() does not mutate the array on which it is called. (however, callback may do so) there is no way to stop or break a foreach() loop other than by throwing an exception. if you need such behavior, the foreach() method is the wrong tool. early termination may be accomplished with: a simple for loop a for...of / for...in loops array.proto
type.every() array.proto
type.some() array.proto
type.find() array.proto
type.findindex() array methods: every(), some(), find(), and findindex() test the array elements with a predicate returning a truthy value to determine if further iteration is required. foreach expects a synchronous function foreach does not wait for promises. kindly make sure you are aware of the implications while using pr...
...e.log('a[' + index + '] = ' + element) } // notice that index 2 is skipped, since there is no item at // that position in the array... [2, 5, , 9].foreach(logarrayelements) // logs: // a[0] = 2 // a[1] = 5 // a[3] = 9 using thisarg the following (contrived) example updates an object's properties from each entry in the array: function counter() { this.sum = 0 this.count = 0 } counter.proto
type.add = function(array) { array.foreach((entry) => { this.sum += entry ++this.count }, this) // ^---- note } const obj = new counter() obj.add([2, 5, 9]) obj.count // 3 obj.sum // 16 since the thisarg parameter (this) is provided to foreach(), it is passed to callback each time it's invoked. the callback uses it as its this value. note: if passing the callback function uses an ar...
...as its this value. note: if passing the callback function uses an arrow function expression, the thisarg parameter can be omitted, since all arrow functions lexically bind the this value. an object copy function the following code creates a copy of a given object. there are different ways to create a copy of an object. ...
...And 3 more matches
Intl.Locale.prototype.collation - JavaScript
the intl.locale.proto
type.collation property is an accessor property that returns the collation
type for the locale, which is used to order strings according to the locale's rules. description collation is the process of ordering strings of characters. it is used whenever strings must be sorted and placed into a certain order, from search query results to ordering records in a database. while the idea of placing strings in order might seem trivial, the idea of order can vary from region to region and language to language. the collation property helps to make it easier for javascript programmers to access the collation
type used by a particular locale. below is a table with the available collation
types, taken from the unicode collation specification. ...
... database. while the idea of placing strings in order might seem trivial, the idea of order can vary from region to region and language to language. the collation property helps to make it easier for javascript programmers to access the collation
type used by a particular locale. below is a table with the available collation
types, taken from the unicode collation specification. valid collation
types collation
type description big5han pinyin ordering for latin, big5 charset ordering for cjk characters (used in chinese) compat a previous version of the ordering, for compatibility dict dictionary style ordering (such as in sinhala) the direct collation
type has been deprected. do not use. direct binary cod...
...ring for latin, gb2312han charset ordering for cjk characters (used in chinese) phonebk phonebook style ordering (such as in german) phonetic phonetic ordering (sorting based on pronunciation) pinyin pinyin ordering for latin and for cjk characters (used in chinese) reformed reformed ordering (such as in swedish) search special collation
type for string search searchjl special collation
type for korean initial consonant search standard default ordering for each language stroke pinyin ordering for latin, stroke order for cjk characters (used in chinese) trad traditional style ordering (such as in spanish) unihan pinyin ordering for latin, unihan radical-stroke ordering for cjk...
...And 3 more matches
Object.prototype.propertyIsEnumerable() - JavaScript
parameters prop the name of the property to test. return value a boolean indicating whether the specified property is enumerable and is the object's own property. description every object has a propertyisenumerable method. this method can determine whether the specified property in an object can be enumerated by a for...in loop, with the exception of properties inherited through the proto
type chain. if the object does not have the specified property, this method returns false. examples a basic use of propertyisenumerable the following example shows the use of propertyisenumerable on objects and arrays: var o = {}; var a = []; o.prop = 'is enumerable'; a[0] = 'is enumerable'; o.propertyisenumerable('prop'); // returns true a.propertyisenumerable(0); // returns true user...
...); // returns true a.propertyisenumerable('length'); // returns false math.propertyisenumerable('random'); // returns false this.propertyisenumerable('math'); // returns false direct vs. ...
...rtyisenumerable('math'); // returns false direct vs. ...
...And 3 more matches
Media type and format guide: image, audio, and video content - Web media technologies
ncluded support for some form of visual media presentation. originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. the modern web has powerful features to support the presentation and manipulation of media, with several media-related apis supporting various
types of content. generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer. this guide provides an overview of the media file
types, codecs, and algorithms that may comprise media used on the web. it also provides browser support information for various combinations of these, and suggestions for prioritization of f...
...d by a browser are entirely up to the browser's creators, which can complicate the work of a web developer. this guide provides an overview of the media file
types, codecs, and algorithms that may comprise media used on the web. it also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific
types of content. ...
...s, which can complicate the work of a web developer. this guide provides an overview of the media file
types, codecs, and algorithms that may comprise media used on the web. it also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific
types of content. references images image file
type and format guide covers support of image file
types and content formats across the major web browsers, as well as providing basic information about each
type: benefits, limitations, and use cases of interest to web designers and developers. ...
...And 3 more matches
toolbarbutton.type - Archive of obsolete content
« xul reference home
type type: string the
type of button. if this attribute is not present, a normal button is created. you can set this attribute to the value menu to create a button with a menu popup. this will typically cause the button to be displayed differently. menu: set the
type attribute to the value menu to create a button with a menu popup. place a menupopup element inside the button in this case. the user may click anywhere on the button to open and close the menu. menu-button: you can also use the value menu-button to create a button with a menu. unlike the menu
type, this
type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. ...
...e a menupopup element inside the button in this case. the user may click anywhere on the button to open and close the menu. menu-button: you can also use the value menu-button to create a button with a menu. unlike the menu
type, this
type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. checkbox: use this
type to create a toggle button which will switch the checked state each time the button is pressed. radio: use this
type to create a radio button. ...
...nu. unlike the menu
type, this
type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. checkbox: use this
type to create a toggle button which will switch the checked state each time the button is pressed. radio: use this
type to create a radio button. you can also create a group of toolbarbuttons using this
type and the attribute group. ...
...And 2 more matches
toolkit.singletonWindowType - Archive of obsolete content
if such a window is found, it will be re-used, otherwise a new window will be opened. more information on this can be found in bug 317811. ...
...if such a window is found, it will be re-used, otherwise a new window will be opened. more information on this can be found in bug 317811. ...
...if such a window is found, it will be re-used, otherwise a new window will be opened. more information on this can be found in bug 317811. ...
...And 2 more matches
Visual typescript game engine - Game development
text editor used and recommended: visual studio code. luanch debugger configuration comes with this project. physics engine based on matter.js. multiplatform video chat (for all browsers) implemented. socketio used for session staff. multirtc2 used for data transfer also for video chat. multirtc3 alias 'broadcaster' used for video chat. client part to make all dependency works in build process we need some plugins. npm install npm run build navigate in browser /build/app.html to see client app in action -the client part is a browser web application. ...
...m elements. */ private addson: addson = [ { name: "cache", enabled: true, scriptpath: "externals/cacheinit.ts", }, { name: "hackertimer", enabled: true, scriptpath: "externals/hack-timer.js", }, { name: "dragging", enabled: true, scriptpath: "externals/drag.ts", }, ]; /** * @description this is main coordinary
types of positions * can be "diametric-fullscreen" or "frame". * @property drawreference * @
type string */ private drawreference: string = "frame"; /** * aspectratio default value, can be changed in run time. */ private aspectratio: number = 1.333; /** * domain is simple url address, * recommendent to use for local propose lan ip * like : 192.168.0.xxx if you wann...
...| āāā examples/ | | āāā platformer/ | āāā html-components/ | | āāā register.html | | āāā login.html | | āāā games-list.html | | āāā user-profile.html | | āāā store.html | | ...
...And 2 more matches
IPDL Type Serialization
all
types used in ipdl must be serializable. this is accomplished through
type specialization of a c++ traits class.
types are serialized and deserialized from an ipc::message
type declared in ipc_message.h. each
type specializes ipc::paramtraits as follows: namespace ipc { template <> struct paramtraits<my
type> {
typedef my
type param
type; static void write(message* amsg, const param
type& aparam) { // implement serialization here } static bool read(const message* amsg, void** aiter, param
type* aresult) { // implement deserialization here. return false if deserialization failed } }; } // namespace ipc the standard ipdl
types (integers, floats, and xpcom strings) already have serializers. other
types need to have serializers written for them explicitly. in man...
...ipdl
types (integers, floats, and xpcom strings) already have serializers. other
types need to have serializers written for them explicitly. in many cases a serializer can be written by combining existing serializers. ...
...s, and xpcom strings) already have serializers. other
types need to have serializers written for them explicitly. in many cases a serializer can be written by combining existing serializers. ...
...And 2 more matches
Blob.type - Web APIs
the
type property of a blob object returns the mime
type of the file. syntax var mime
type = blob.
type value a domstring containing the file's mime
type, or an empty string if the
type could not be determined. example this example asks the user to select a number of files, then checks each file to make sure it's one of a given set of image file
types. ...
... the
type property of a blob object returns the mime
type of the file. syntax var mime
type = blob.
type value a domstring containing the file's mime
type, or an empty string if the
type could not be determined. example this example asks the user to select a number of files, then checks each file to make sure it's one of a given set of image file
types. ...
...mime
type of the file. syntax var mime
type = blob.
type value a domstring containing the file's mime
type, or an empty string if the
type could not be determined. example this example asks the user to select a number of files, then checks each file to make sure it's one of a given set of image file
types. var i, fileinput, files, allowedfile
types; // fileinput is a htmlinputelement: <input
type="file" multiple id="myfileinput"> fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) files = fileinput.files; // our application only allows gif, png, and jpeg images allowedfile
types = ["image/png", "image/jpeg", "image/gif"]; for (i = 0; i < files.length; i++) { // test if file.
type is an allowed file
type. ...
...And 2 more matches
HTMLStyleElement.type - Web APIs
the htmlstyleelement.
type read-only property returns the
type of the current style. ...
... the htmlstyleelement.
type read-only property returns the
type of the current style. ...
... the htmlstyleelement.
type read-only property returns the
type of the current style. ...
...And 2 more matches
MediaSource.isTypeSupported() - Web APIs
the mediasource.is
typesupported() static method returns a boolean value which is true if the given mime
type is likely to be supported by the current user agent. that is, if it can successfully create sourcebuffer objects for that mime
type. if the returned value is false, then the user agent is certain that it cannot access media of the specified format. syntax var isitsupported = mediasource.is
typesupported(mime
type); parameters mime
type the mime media
type that you want to test support for in the current browser. this may include the codecs parameter to provide added details about the codecs used within the file. return value a boolean which is true if the browser feels that it can probably play media of the specified
type. this is not a guarantee, however, and your code must be ...
...include the codecs parameter to provide added details about the codecs used within the file. return value a boolean which is true if the browser feels that it can probably play media of the specified
type. this is not a guarantee, however, and your code must be prepared for the possibility that the media will not play correctly if at all. a value of false is a guarantee that media of the given
type will not play, however. all web apis that work with media files use a "no/maybe/probably" approach (or, in this case, "no or probably") when determining if a media
type can be used. this is because media files are complex, intricate constructs with far too many subtle variations to be absolutely certain of anything until you actually use the contents of the media. example the following snippet...
...the media. ...
...And 2 more matches
NonDocumentTypeChildNode.nextElementSibling - Web APIs
the nondocument
typechildnode.nextelementsibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list. ...
... the nondocument
typechildnode.nextelementsibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list. ...
...lowing into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("nextelementsibling" in document.documentelement)){ object.defineproperty(element.proto
type, "nextelementsibling", { get: function(){ var e = this.nextsibling; while(e && 1 !== e.node
type) e = e.nextsibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocument
typechildnode/nextelementsibling/nextelementsibling.md (function (arr) { ...
...And 2 more matches
PerformanceResourceTiming.initiatorType - Web APIs
the initiator
type read-only property is a string that represents the
type of resource that initiated the performance event. the value of this string is as follows: if the initiator is a element, the property returns the element's localname. if the initiator is a css resource, the property returns "css". if the initiator is a xmlhttprequest object, the property returns "xmlhttprequest". if the initiator is a performancenavigationtiming object, the property returns an empty string (""). note: this feature is available in web workers. syntax resource.initiator
type; return value a string representing the
type of resource that initiated the performance event, as specified above. ...
...ty returns "xmlhttprequest". if the initiator is a performancenavigationtiming object, the property returns an empty string (""). note: this feature is available in web workers. syntax resource.initiator
type; return value a string representing the
type of resource that initiated the performance event, as specified above. ...
...ming object, the property returns an empty string (""). note: this feature is available in web workers. syntax resource.initiator
type; return value a string representing the
type of resource that initiated the performance event, as specified above. ...
...And 2 more matches
RTCIceCandidate.tcpType - Web APIs
"active" the transport will try to open an outbound connection but won't receive inoming connection requests. "passive" the transport will receive incoming connection requests but won't try to open an outbound connection. ...
... "active" the transport will try to open an outbound connection but won't receive inoming connection requests. "passive" the transport will receive incoming connection requests but won't try to open an outbound connection. ...
... "active" the transport will try to open an outbound connection but won't receive inoming connection requests. "passive" the transport will receive incoming connection requests but won't try to open an outbound connection. ...
...And 2 more matches
RTCIceCandidateStats.candidateType - Web APIs
srflx the candidate is a server reflexive candidate; the ip indicates an intermediary address assigned by the stun server to represent the candidate's peer anonymously. ...
... srflx the candidate is a server reflexive candidate; the ip indicates an intermediary address assigned by the stun server to represent the candidate's peer anonymously. ...
... srflx the candidate is a server reflexive candidate; the ip indicates an intermediary address assigned by the stun server to represent the candidate's peer anonymously. ...
...And 2 more matches
RTCStatsType - Web APIs
values candidate-pair an rtcicecandidatepairstats object providing statistics related to an rtcicetransport. candidate pairs other than the currently active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart. the active candidate pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise. ...
...n's rtcpeerconnection. receiver provides statistics about a specific rtcrtpreceiver. the statistics object is an rtcaudioreceiverstats object if kind is audio; if kind is video, the object is an rtcvideoreceiverstats object. remote-candidate the report is an rtcicecandidatestats object containing statistics about the remote candidate's rtcicetransport. this may include information such as the
type of network, the protocol, the url, the
type of relay being used, and so forth. remote-inbound-rtp the report is an rtcremoteinboundrtpstreamstats object providing statistics about your outbound rtp data stream, but from the perspective of the remote peer. that is, this information is about your outbound-rtp stream, but as seen by the remote device that's handling the stream. you can use this in...
...things like determine how well the remote peer is receiving data. remote-outbound-rtp the report is an rtcremoteoutboundrtpstreamstats object that contains statistics about your inbound rtp (inbound-rtp) stream, but from the perspective of the remote peer. sender an object containing statistics about the rtcrtpsender for a stream on the rtcpeerconnection. ...
...And 2 more matches
Response.type - Web APIs
opaque: response for “no-cors” request to cross-origin resource. severely restricted. opaqueredirect: the fetch request was made with redirect: "manual". the response's status is 0, headers are empty, body is null and trailer is empty. ...
... one of the following: basic: normal, same origin response, with all headers exposed except “set-cookie” and “set-cookie2″. cors: response was received from a valid cross-origin request. certain headers and the body may be accessed. error: network error. no useful information describing the error is available. the response’s status is 0, headers are empty and immutable. this is the
type for a response obtained from response.error(). opaque: response for “no-cors” request to cross-origin resource. severely restricted. opaqueredirect: the fetch request was made with redirect: "manual". the response's status is 0, headers are empty, body is null and trailer is empty. note: an "error" response never really gets exposed to script: such a response to a fetch() would reject th...
...om response.error(). opaque: response for “no-cors” request to cross-origin resource. severely restricted. opaqueredirect: the fetch request was made with redirect: "manual". the response's status is 0, headers are empty, body is null and trailer is empty. note: an "error" response never really gets exposed to script: such a response to a fetch() would reject the promise. syntax var my
type = response.
type; value a response
type string indicating the
type of the response. example in our fetch response example (see fetch response live) we create a new request object using the request() constructor, passing it a jpg path. we then fetch this request using fetch(), extract a blob from the response using body.blob, create an object url out of it using url.createobjecturl, and display ...
...And 2 more matches
SVGUnitTypes - Web APIs
the svgunit
types interface defines a commonly used set of constants used for reflecting gradientunits, patterncontentunits and other similar attributes. ...
...units, patterncontentunits and other similar attributes. ...
...absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgunit
types" target="_top"><rect x="1" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgunit
types</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_unit_
type_unknown 0 the
type is not one of predefined
types. ...
...And 2 more matches
XMLHttpRequest.responseType - Web APIs
the xmlhttprequest property response
type is an enumerated string value specifying the
type of data contained in the response. it also lets the author change the response
type. if an empty string is set as the value of response
type, the default value of text is used. syntax var
type = xmlhttprequest.response
type; xmlhttprequest.response
type =
type; value a string taken from the xmlhttprequestresponse
type enum which specifies what
type of data the response contains. when setting response
type to a particular value, the author should make sure that the server is actually sending a response compatible with that format. if the server returns data that is not compatible with the response
type that was set, the value of response will be null. ...
...xmlhttprequestresponse
type enum which specifies what
type of data the response contains. when setting response
type to a particular value, the author should make sure that the server is actually sending a response compatible with that format. if the server returns data that is not compatible with the response
type that was set, the value of response will be null. the values supported by response
type are the following: "" an empty response
type string is treated the same as "text", the default
type. arraybuffer the response is a javascript arraybuffer containing binary data. blob the response is a blob object containing the binary data. document the response is an html document or xml xmldocument, as appropriate based on the mime
type of the received data. see html in xmlhttprequest ...
...ml document or xml xmldocument, as appropriate based on the mime
type of the received data. see html in xmlhttprequest to learn more about using xhr to fetch html content. json the response is a javascript object created by parsing the contents of received data as json. text the response is a text in a domstring object. ms-stream the response is part of a streaming download; this response
type is only allowed for download requests, and is only supported by internet explorer. exceptions invalidaccesserror an attempt was made to change the value of response
type on anxmlhttprequest which is in synchronous mode but not in a worker. for additional details, see synchronous xhr restrictions below. ...
...And 2 more matches
Array.prototype.lastIndexOf() - JavaScript
lastindexof was added to the ecma-262 standard in the 5th edition; as such it may not be present in other implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of lastindexof in implementations which do not natively support it. ...
... the beginning of your scripts, allowing use of lastindexof in implementations which do not natively support it. this algorithm is exactly the one specified in ecma-262, 5th edition, assuming object,
typeerror, number, math.floor, math.abs, and math.min have their original values. ...
...llowing use of lastindexof in implementations which do not natively support it. this algorithm is exactly the one specified in ecma-262, 5th edition, assuming object,
typeerror, number, math.floor, math.abs, and math.min have their original values. ...
...And 2 more matches
Array.prototype.values() - JavaScript
the values() method returns a new array iterator object that contains the values for each index in the array. syntax arr.values() return value a new array iterator object. ...
...ew array iterator object that contains the values for each index in the array. syntax arr.values() return value a new array iterator object. examples iteration using for...of loop var arr = ['a', 'b', 'c', 'd', 'e']; var iterator = arr.values(); for (let letter of iterator) { console.log(letter); } //"a" "b" "c" "d" "e" array.proto
type.values is default implementation of array.proto
type[symbol.iterator]. ...
...ins the values for each index in the array. syntax arr.values() return value a new array iterator object. examples iteration using for...of loop var arr = ['a', 'b', 'c', 'd', 'e']; var iterator = arr.values(); for (let letter of iterator) { console.log(letter); } //"a" "b" "c" "d" "e" array.proto
type.values is default implementation of array.proto
type[symbol.iterator]. ...
...And 2 more matches
Intl.DisplayNames.prototype.of() - JavaScript
ing based on the locale and options provided when instantiating intl.displaynames. 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. ...
...locale and options provided when instantiating intl.displaynames. 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. ...
... 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 displaynames.of(code); parameters code the code to provide depends on the
type: if the
type is "region", code should be either an iso-3166 two letters region code, or a three digits un m49 geographic regions. if the
type is "script", code should be an iso-15924 four letters script code. if the
type is "language", code should be a languagecode ["-" scriptcode] ["-" regioncode ] *("-" variant ) subsequence of the unicode_language_id grammar in uts 35's unicode language and locale identifiers grammar. languagecode is either a two letters iso 639-1 language code or a three letters iso 639-2 language code. if the ...
...And 2 more matches
Intl.NumberFormat.prototype.formatToParts() - JavaScript
the intl.numberformat.proto
type.formattoparts() method allows locale-aware formatting of strings produced by numberformat formatters. syntax intl.numberformat.proto
type.formattoparts(number) parameters number optional a number or bigint to format. return value an array of objects containing the formatted number in parts. description the formattoparts() method is useful for custom formatting of number strings. it returns an array of objects containing the locale-specific tokens from which it possible to build custom strings while preserving the locale-specific parts. ...
...turn value an array of objects containing the formatted number in parts. description the formattoparts() method is useful for custom formatting of number strings. it returns an array of objects containing the locale-specific tokens from which it possible to build custom strings while preserving the locale-specific parts. the structure the formattoparts() method returns, looks like this: [ {
type: "integer", value: "3" }, {
type: "group", value: "." }, {
type: "integer", value: "500" } ] possible
types are the following: currency the currency string, such as the symbols "$" and "€" or the name "dollar", "euro" depending on how currencydisplay is specified. decimal the decimal separator string ("."). fraction the fraction number. group the group separator string (","). in...
...mat('de-de', { style: 'currency', currency: 'eur' }); formatter.format(number); // "3.500,00 €" however, in many user interfaces there is a desire to customize the formatting of this string. the formattoparts method enables locale-aware formatting of strings produced by numberformat formatters by providing you the string in parts: formatter.formattoparts(number); // return value: [ {
type: "integer", value: "3" }, {
type: "group", value: "." }, {
type: "integer", value: "500" }, {
type: "decimal", value: "," }, {
type: "fraction", value: "00" }, {
type: "literal", value: " " }, {
type: "currency", value: "€" } ] now the information is available separately and it can be formatted and concatenated again in a customized way. for example by using arra...
...And 2 more matches
Object.prototype.hasOwnProperty() - JavaScript
ty to test. return value a boolean indicating whether or not the object has the specified property as own property. description all descendents of object inherit the hasownproperty method. this method can be used to determine whether an object has the specified property as a direct property of that object; unlike the in operator, this method does not check for a property in the object's proto
type chain. if an object is an array, hasownproperty method can check whether an index exists. note hasownproperty returns true even if the value of the property is null or undefined. o = new object(); o.propone = null; o.hasownproperty('propone'); // returns true o.proptwo = undefined; o.hasownproperty('proptwo'); // returns true examples using hasownproperty to test for a property's existe...
...wnproperty to test for a property's existence the following example determines whether the o object contains a property named prop: o = new object(); o.hasownproperty('prop'); // returns false o.prop = 'exists'; o.hasownproperty('prop'); // returns true direct vs. inherited properties the following example differentiates between direct properties and properties inherited through the proto
type chain: o = new object(); o.prop = 'exists'; o.hasownproperty('prop'); // returns true o.hasownproperty('tostring'); // returns false o.hasownproperty('hasownproperty'); // returns false iterating over the properties of an object the following example shows how to iterate over the properties of an object without executing on inherited properties. note that the for...in lo...
... ...
...And 2 more matches
Object.prototype.toSource() - JavaScript
code is not available: function object() { [native code] } for instances of object, tosource() returns a string representing the source code. you can call tosource() while debugging to examine the contents of an object. overriding the tosource() method it is safe for objects to override the tosource() method. ...
...of an object. overriding the tosource() method it is safe for objects to override the tosource() method. for example: function person(name) { this.name = name; } person.proto
type.tosource = function person_tosource() { return 'new person(' + uneval(this.name) + ')'; }; console.log(new person('joe').tosource()); // ---> new person("joe") built-in tosource() methods each core javascript
type has its own tosource() method. these objects are: array.proto
type.tosource() — array object. boolean.proto
type.tosource() — boolean object. date.proto
type.tosource() — date object. function.proto
type.tosource() — function object. number.proto
type.tosource() — number object. regexp.proto
type.tosource() — regexp object. string.proto
type.tosource() — string object. sym...
... math.tosource() — returns the string "math". limitations on cyclical objects in the case of objects that contain references to themselves, e.g. a cyclically linked list or a tree that can be traversed both ways, tosource() will not recreate the self-reference, as of firefox 24. ...
...And 2 more matches
String.prototype.trimStart() - JavaScript
. syntax str.trimstart(); str.trimleft(); return value a new string representing the calling string stripped of whitespace from its beginning (left end). description the trimstart() / trimleft() methods return the string stripped of whitespace from its left end. trimleft() or trimstart() do not affect the value of the string itself. ...
...rimstart() / trimleft() methods return the string stripped of whitespace from its left end. trimleft() or trimstart() do not affect the value of the string itself. aliasing for consistency with functions like string.proto
type.padstart the standard method name is trimstart. however, for web compatibility reasons, trimleft remains as an alias to trimstart. ...
...sing for consistency with functions like string.proto
type.padstart the standard method name is trimstart. however, for web compatibility reasons, trimleft remains as an alias to trimstart. ...
...And 2 more matches
TypeError() constructor - JavaScript
the
typeerror() constructor creates a new error when an operation could not be performed, typically (but not exclusively) when a value is not of the expected
type. syntax new
typeerror([message[, filename[, linenumber]]]) parameters message optional optional. human-readable description of the error filename optional optional. the name of the file containing the code that caused the exception linenumber optional optional. ...
...usively) when a value is not of the expected
type. syntax new
typeerror([message[, filename[, linenumber]]]) parameters message optional optional. human-readable description of the error filename optional optional. the name of the file containing the code that caused the exception linenumber optional optional. ...
...rror([message[, filename[, linenumber]]]) parameters message optional optional. human-readable description of the error filename optional optional. the name of the file containing the code that caused the exception linenumber optional optional. ...
...And 2 more matches
TypedArray.of() - JavaScript
the
typedarray.of() method creates a new
typed array from a variable number of arguments. this method is nearly the same as array.of(). 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
typedarray.of(element0[, element1[, ...[, elementn]]]) where
typedarray is one of: int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array parameters elementn elements of which to create the
typed array. return value a new
typedarray instance. ...
...hence, when working with proxy objects, it calls handler.set to create new elements rather than handler.defineproperty. ...
...hence, when working with proxy objects, it calls handler.set to create new elements rather than handler.defineproperty. ...
...And 2 more matches
type - SVG: Scalable Vector Graphics
for the <feturbulence> element, it indicates whether the filter primitive should perform a noise or turbulence function. ...
... for the <feturbulence> element, it indicates whether the filter primitive should perform a noise or turbulence function. ...
... for the <feturbulence> element, it indicates whether the filter primitive should perform a noise or turbulence function. ...
...And 2 more matches
datepicker.type - Archive of obsolete content
« xul reference home
type type: one of the values below you can set the
type attribute to one of the values below to specify the
type of datepicker to use normal a datepicker with three fields for entering the year, month and date. this is the default value so do not specify the
type attribute if this kind is desired. grid a datepicker that displays a calendar grid where one month is shown at a time. popup a datepicker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar grid. ...
.... this is the default value so do not specify the
type attribute if this kind is desired. grid a datepicker that displays a calendar grid where one month is shown at a time. popup a datepicker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar grid. ...
... not specify the
type attribute if this kind is desired. grid a datepicker that displays a calendar grid where one month is shown at a time. popup a datepicker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar grid. ...
... this kind is desired. ...
windowtype - Archive of obsolete content
« xul reference home window
type type: string set to a string which can be used to identify the
type of window. this might be used, for example, to distinguish between a browser window and an editor window. some of mozilla's window handling functions use this attribute to group windows of the same
type together. ...
... « xul reference home window
type type: string set to a string which can be used to identify the
type of window. this might be used, for example, to distinguish between a browser window and an editor window. some of mozilla's window handling functions use this attribute to group windows of the same
type together. ...
...ndow
type type: string set to a string which can be used to identify the
type of window. this might be used, for example, to distinguish between a browser window and an editor window. some of mozilla's window handling functions use this attribute to group windows of the same
type together. ...
...
type of window. this might be used, for example, to distinguish between a browser window and an editor window. some of mozilla's window handling functions use this attribute to group windows of the same
type together. ...
calIFileType - Archive of obsolete content
extensionfilter the extension filter to use in the filepicker's filter list. separate multiple extensions with semicolon and space. ...
...extensionfilter the extension filter to use in the filepicker's filter list. separate multiple extensions with semicolon and space. ...
...extensionfilter the extension filter to use in the filepicker's filter list. separate multiple extensions with semicolon and space. ...
...extensionfilter the extension filter to use in the filepicker's filter list. separate multiple extensions with semicolon and space. ...
Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
in html, the doc
type is the required "<!doc
type html>" preamble found at the top of all documents. its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doc
type html>" doc
type ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications. ...
...s. its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doc
type html>" doc
type ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications. ...
...dering a document; that is, the "<!doc
type html>" doc
type ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications. ...
...l>" doc
type ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications. ...
MIME type - MDN Web Docs Glossary: Definitions of Web-related terms
a mime
type (now properly called "media
type", but also sometimes "content
type") is a string sent along with a file indicating the
type of the file (describing the content format, for example, a sound file might be labeled audio/ogg, or an image file image/png). it serves the same purpose as filename extensions traditionally do on windows. the name originates from the mime standard originally used in e-mail. learn more general knowledge internet media
type on wikipedia technical reference list of mime
types properly configuring server mime
types details information about the usage of mime
types in a web context. ...
...ng). it serves the same purpose as filename extensions traditionally do on windows. the name originates from the mime standard originally used in e-mail. ...
... filename extensions traditionally do on windows. the name originates from the mime standard originally used in e-mail. ...
...itionally do on windows. the name originates from the mime standard originally used in e-mail. ...
Type, class, and ID selectors - Learn web development
rs that are available, which you will probably use the most in your work. prerequisites: basic computer literacy, basic software installed, basic knowledge 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 different css selectors we can use to apply css to a document.
type selectors a
type selector is sometimes referred to as a tag name selector or element selector, because it selects an html tag/element in your document. in the example below we have used the span, em and strong selectors. all instances of <span>, <em> and <strong> elements are therefore styled accordingly. try adding a css rule to select the <h1> element and change its color to blue. the univ...
...ave applied it to several places in my document. all of the elements that have the class applied are highlighted. targeting classes on particular elements you can create a selector that will target specific elements with the class applied. in this next example we will highlight a <span> with a class of highlight differently to an <h1> heading with a class of highlight. we do this by using the
type selector for the element i want to target, with the class appended using a dot, with no white space in between. this approach reduces the scope of a rule as the rule will only apply to that particular element & class combination; so you would need to add another selector if you decided the rule should apply to other elements too. target an element if it has more than one class applied you c...
...er class; it needs notebox as well to get anything applied. id selectors an id selector begins with a # rather than a full stop character, but is basically used in the same way as a class selector. an id however can be used only once per document, and elements can only have a single id value applied to them. it can select an element that has the id set on it, and you can precede the id with a
type selector to only target the element if both the element and id match. you can see both of these uses in the following example: warning: using the same id multiple times in a document may appear to work for styling purposes, but don't do this. it results in invalid code, and will cause strange behavior in many places. note: as we learned in the lesson on specificity, an id has high specific...
...e element rather than use an id, however if using the id is the only way to target the element — perhaps because you do not have access to the markup and so cannot edit it — this will work. in the next article we'll continue exploring selectors by looking at attribute selectors. ...
JS_GetPrototype
retrieves an object's proto
type. syntax bool js_getproto
type(jscontext *cx, js::handleobject obj, js::mutablehandleobject protop); 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. obj js::handleobject object for which to retrieve the proto
type. protop js::mutablehandleobject out parameter. if successful, receives proto
type object of obj. description js_getproto
type retrieves the proto
type of a specified object, obj. a proto
type object provides properties inherited by similar js objects. this is the equivalent of object.getproto
typeof(obj) from javascript. if js_getprototyp...
...eives proto
type object of obj. description js_getproto
type retrieves the proto
type of a specified object, obj. a proto
type object provides properties inherited by similar js objects. this is the equivalent of object.getproto
typeof(obj) from javascript. if js_getproto
type returns false, that signals an exception, which should be handled as usual. otherwise, it stores a pointer to the proto
type or null to *protop and returns true. to set an object's proto
type, use js_setproto
type. ...
...t provides properties inherited by similar js objects. this is the equivalent of object.getproto
typeof(obj) from javascript. if js_getproto
type returns false, that signals an exception, which should be handled as usual. otherwise, it stores a pointer to the proto
type or null to *protop and returns true. ...
...ties inherited by similar js objects. this is the equivalent of object.getproto
typeof(obj) from javascript. if js_getproto
type returns false, that signals an exception, which should be handled as usual. otherwise, it stores a pointer to the proto
type or null to *protop and returns true. to set an object's proto
type, use js_setproto
type. ...
File.type - Web APIs
returns the media
type (mime) of the file represented by a file object. syntax var name = file.
type; value a string, containing the media
type(mime) indicating the
type of the file, for example "image/png" for png images example <input
type="file" multiple onchange="show
type(this)"> function show
type(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var
type = files[i].
type; alert("filename: " + name + " ,
type: " +
type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media
type. it is assumed based on the file extension; a png image file renamed to .txt would give "text/plain" and not "image/png". ...
...developers are advised not to rely on this property as a sole validation scheme. ...
...developers are advised not to rely on this property as a sole validation scheme. ...
...e. it is assumed based on the file extension; a png image file renamed to .txt would give "text/plain" and not "image/png". moreover, file.
type is generally reliable only for common file
types like images, html documents, audio and video. uncommon file extensions would return an empty string. client configuration (for instance, the windows registry) may result in unexpected values even for common
types. developers are advised not to rely on this property as a sole validation scheme. specifications specification status comment file apithe definition of '
type' in that specification. working draft initial definition. ...
HTMLSelectElement.type - Web APIs
living standard no change from html5, the latest snapshot. ...
... living standard no change from html5, the latest snapshot. ...
... living standard no change from html5, the latest snapshot. ...
... living standard no change from html5, the latest snapshot. ...
performance.getEntriesByType() - Web APIs
the getentriesby
type() method returns a list of performanceentry objects for a given
type. the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time. note: this feature is available in web workers. syntax entries = window.performance.getentriesby
type(
type); arguments
type the
type of entry to retrieve such as "mark". the valid entry
types are listed in performanceentry.entry
type. return value entries a list of performanceentry objects that have the specified
type. the items will be in chronological order based on the entries' starttime. if no objects have the specified
type, or no argument is provided, an empty list is returned. example function useperformanceentrymethods() { ...
...begin"); dowork(50000); performance.mark("end"); performance.mark("begin"); dowork(100000); performance.mark("end"); dowork(200000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); checkperformanceentry(p[i]); } // use getentries(name, entry
type) to get specific entries p = performance.getentries({name : "begin", entry
type: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); checkperformanceentry(p[i]); } // use getentriesby
type() to get all "mark" entries p = performance.getentriesby
type("mark"); for (var i=0; i < p.length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + ...
... recommendation initial definition. ...
... recommendation initial definition. ...
RTCIceCandidate.type - Web APIs
the rtcicecandidate interface's read-only
type specifies the
type of candidate the object represents. the
type field's value is set when the rtcicecandidate() constructor is used. you can't specify the value of
type in the options object, but the address is automatically extracted from the candidate a-line, if it's formatted properly, being taken from its cand-
type field. syntax var
type = rtcicecandidate.
type; value a domstring whose value is one of those defined by the rtcicecandidate
type enumerated
type. these candidate
types are listed in order of priority; the higher in the list they are, the more efficient they are. host the candidate is a host candidate, whose ip address as specified in the rtcicecandidate.ip property is in fact the true address of the remote peer. srflx t...
...to represent the candidate's peer anonymously. prflx the candidate is a peer reflexive candidate; the ip is an intermediary address assigned by the stun server to represent the candidate's peer anonymously. relay the candidate is a relay candidate, obtained from a turn server. the relay candidate's ip address is an address the turn server uses to forward the media between the two peers. ...
...y. relay the candidate is a relay candidate, obtained from a turn server. the relay candidate's ip address is an address the turn server uses to forward the media between the two peers. if
type is null, that information was missing from the candidate's a-line, which will cause rtcpeerconnection.addicecandidate() to throw an operationerror exception. example in this example, the candidate's
type is used to present a modified user interface for host candidates (those where the ip refers directly to the remote peer, rather than an intermediary). ...
...n the two peers. if
type is null, that information was missing from the candidate's a-line, which will cause rtcpeerconnection.addicecandidate() to throw an operationerror exception. example in this example, the candidate's
type is used to present a modified user interface for host candidates (those where the ip refers directly to the remote peer, rather than an intermediary). if (candidate.
type == "host") { showhostcontrols(); } else { hidehostcontrols(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.
type' in that specification. candidate recommendation initial definition. ...
RTCSessionDescription.type - Web APIs
"answer", the description is the definitive choice in an offer/answer exchange. "pranswer", the description is a provisional answer and may be changed when the definitive choice will be given. "rollback", the description rolls back to offer/answer state to the last stable state. ...
... "answer", the description is the definitive choice in an offer/answer exchange. "pranswer", the description is a provisional answer and may be changed when the definitive choice will be given. "rollback", the description rolls back to offer/answer state to the last stable state. ...
... "answer", the description is the definitive choice in an offer/answer exchange. "pranswer", the description is a provisional answer and may be changed when the definitive choice will be given. "rollback", the description rolls back to offer/answer state to the last stable state. ...
... "answer", the description is the definitive choice in an offer/answer exchange. "pranswer", the description is a provisional answer and may be changed when the definitive choice will be given. "rollback", the description rolls back to offer/answer state to the last stable state. example // the remote description has been set previously on pc, a rtcpeerconnection alert(pc.remotedescription.
type); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription.
type' in that specification. candidate recommendation initial specification. ...
XRReferenceSpaceType - Web APIs
the xrreferencespace
type enumerated
type defines the strings which identify the
types of reference spaces supported by webxr. this
type is used when calling the requestreferencespace() method to obtain a reference space for an xrsession. values the reference space returned by xrsession.requestreferencespace() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicates which of the two
types is returned for each reference space
type constant.. reference space descriptors the
types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them. ...
...space() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicates which of the two
types is returned for each reference space
type constant.. reference space descriptors the
types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them. xrreferencespace
type description interface bounded-floor similar to the local
type, except the user is not expected to move outside a predetermined boundary, given by the boundsgeometry in the returned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends...
...on depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment. xrreferencespace local-floor similar to the local
type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter). xrreferencespace unbo...
...osition and orientation. this is used for environments in which the user can physically move around, and is supported by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions. it's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. otherwise, typically, one of the other reference space
types will be used more often. xrreferencespace specifications specification status comment webxr device apithe definition of 'xrreferencespace
type' in that specification. working draft initial definition. ...
TypeError: "x" is read-only - JavaScript
the javascript strict mode-only exception "is read-only" occurs when a global variable or object property that was assigned to is a read-only property. message
typeerror: assignment to read-only properties is not allowed in strict mode (edge)
typeerror: "x" is read-only (firefox)
typeerror: 0 is read-only (firefox)
typeerror: cannot assign to read only property 'x' of #<object> (chrome)
typeerror: cannot assign to read only property '0' of [object array] (chrome) error
type typeerror what went wrong? the global variable or object property that was assigned to is a read-only property. (technically, it is a non-writable data property.) this error happens only in strict mode code. in non-strict code, the assignment is silently ignored. examples invalid cases read-only properties are n...
...d-only property. (technically, it is a non-writable data property.) this error happens only in strict mode code. in non-strict code, the assignment is silently ignored. examples invalid cases read-only properties are not super common, but they can be created using object.defineproperty() or object.freeze(). ...
...non-strict code, the assignment is silently ignored. examples invalid cases read-only properties are not super common, but they can be created using object.defineproperty() or object.freeze(). 'use strict'; var obj = object.freeze({name: 'elsa', score: 157}); obj.score = 0; //
typeerror 'use strict'; object.defineproperty(this, 'lung_count', {value: 2, writable: false}); lung_count = 3; //
typeerror 'use strict'; var frozenarray = object.freeze([0, 1, 2]); frozenarray[0]++; //
typeerror there are also a few read-only properties built into javascript. maybe you tried to redefine a mathematical constant. 'use strict'; math.pi = 4; //
typeerror sorry, you can't do that. the global variable undefined is also read-only, so you can't silence the infamous "undefined is not a function"...
...zenarray[0]++; //
typeerror there are also a few read-only properties built into javascript. maybe you tried to redefine a mathematical constant. 'use strict'; math.pi = 4; //
typeerror sorry, you can't do that. ...
TypeError: cannot use 'in' operator to search for 'x' in 'y' - JavaScript
the javascript exception "right-hand side of 'in' should be an object" occurs when the in operator was used to search in strings, or in numbers, or other primitive
types. it can only be used to check if a property is in an object. message
typeerror: invalid operand to 'in' (edge)
typeerror: right-hand side of 'in' should be an object, got 'x' (firefox)
typeerror: cannot use 'in' operator to search for 'x' in 'y' (firefox, chrome) error
type typeerror what went wrong? the in operator can only be used to check if a property is in an object. you can't search in strings, or in numbers, or other primitive
types. ...
...tor to search for 'x' in 'y' (firefox, chrome) error
type typeerror what went wrong? ...
... used to check if a property is in an object. you can't search in strings, or in numbers, or other primitive
types. examples searching in strings unlike in other programming languages (e.g. python), you can't search in strings using the in operator. "hello" in "hello world"; //
typeerror: cannot use 'in' operator to search for 'hello' in 'hello world' instead you will need to use string.proto
type.indexof(), for example. "hello world".indexof("hello") !== -1; // true the operand can't be null or undefined make sure the object you are inspecting isn't actually null or undefined. ...
...ngs using the in operator. "hello" in "hello world"; //
typeerror: cannot use 'in' operator to search for 'hello' in 'hello world' instead you will need to use string.proto
type.indexof(), for example. "hello world".indexof("hello") !== -1; // true the operand can't be null or undefined make sure the object you are inspecting isn't actually null or undefined. var foo = null; "bar" in foo; //
typeerror: cannot use 'in' operator to search for 'bar' in 'foo' (chrome) //
typeerror: right-hand side of 'in' should be an object, got null (firefox) the in operator always expects an object. var foo = { baz: "bar" }; "bar" in foo; // false "pi" in math; // true "pi" in math; // false searching in arrays be careful when using the in operator to search in array objects. the in operator checks ...
TypeError: 'x' is not iterable - JavaScript
the javascript exception "is not iterable" occurs when the value which is given as the right hand-side of for…of or as argument of a function such as promise.all or
typedarray.from, is not an iterable object. message
typeerror: 'x' is not iterable (firefox, chrome)
typeerror: 'x' is not a function or its return value is not iterable (chrome) error
type typeerror what went wrong? the value which is given as the right hand-side of for…of or as argument of a function such as promise.all or
typedarray.from, is not an iterable object. an iterable can be a built-in iterable
type such as array, string or map, a generator result, or an object implementing the iterable protocol. examples iterating over object properties in javascript, objects are not iterable unless they implement the i...
...erable
type such as array, string or map, a generator result, or an object implementing 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. 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. var obj = { 'france': 'paris', 'england': 'london' }; // iterate over the property names: for (let country of object.keys(obj)) { var capital = obj[country]; console.log(country, capital); } for (const [country, capital] of object.entrie...
....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) //
typeerror: generate is not iterable console.log(x); when they are not called, the function object corresponding to the generator is callable, but not iterable. calling a generator produces an iterable object which will iterate over the values yielded during the execution of the generator. function* generate(a, b) { yield a; yield b; } for (let x of generate(1,2)) console.log(x); ...
...iterable custom iterables can be created by implementing the symbol.iterator method. you must be certain that your iterator method returns an object which is an iterator, which is to say it must have a next method. ...
Array.prototype.copyWithin() - JavaScript
end copying elements from. copywithin copies up to but not including end. if negative, end will be counted from the end. if end is omitted, copywithin will copy until the last index (default to arr.length). return value the modified array. description the copywithin works like c and c++'s memmove, and is a high-performance method to shift the data of an array. this especially applies to the
typedarray method of the same name. the sequence is copied and pasted as one operation; pasted sequence will have the copied values even when the copy and paste region overlap. the copywithin function is intentionally generic, it does not require that its this value be an array object. the copywithin method is a mutable method. it does not alter the length of this, but it will change its content and...
... as one operation; pasted sequence will have the copied values even when the copy and paste region overlap. the copywithin function is intentionally generic, it does not require that its this value be an array object. the copywithin method is a mutable method. it does not alter the length of this, but it will change its content and create new properties, if necessary. polyfill if (!array.proto
type.copywithin) { object.defineproperty(array.proto
type, 'copywithin', { value: function(target, start/*, end*/) { // steps 1-2. if (this == null) { throw new
typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-8. var relativetarget = target >> 0; var to = relativetarget < 0 ? ma...
...19. ...
... ...
Date.prototype.toString() - JavaScript
ed date 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 dateobj.tostring() return value a string representing the given date. description date instances inherit their tostring() method from date.proto
type, not object.proto
type. date.proto
type.tostring() returns a string representation of the date in the format specified in ecma-262 which can be summarised as: week day: 3 letter english week day name, e.g. "sat" space month name: 3 letter english month name, e.g. "sep" space date: 2 digit day in month, e.g. "01" space year: 4 digit year, e.g. "2018" space hour: 2 digit hour of day, e.g. ...
...eft bracket, i.e. "(" an implementation dependent string representation of the timezone, which might be an abbreviation or full name (there is no standard for names or abbreviations of timezones), e.g. "line islands time" or "lint" right bracket, i.e. ")" e.g. "sat sep 01 2018 14:53:26 gmt+1400 (lint)" until ecmascript 2018 (edition 9), the format of the string returned by date.proto
type.tostring was implementation dependent. therefore it should not be relied upon to be in the specified format. the tostring() method is automatically called when a date is to be represented as a text value, e.g. console.log(new date()), or when a date is used in a string concatenation, such as var today = 'today is ' + new date(). tostring() is a generic method, it does not require that its this ...
...g(new date()), or when a date is used in a string concatenation, such as var today = 'today is ' + new date(). tostring() is a generic method, it does not require that its this is a date instance. however, it must have an internal [[timevalue]] property that can't be constructed using native javascript, so it's effectively limited to use with date instances. ...
...ce, a
typeerror is thrown. examples using tostring() the following assigns the tostring() value of a date object to myvar: var x = new date(); var myvar = x.tostring(); // assigns a string value to myvar in the same format as: // mon sep 08 1998 14:36:22 gmt-0700 (pdt) specifications specification ecmascript (ecma-262)the definition of 'date.proto
type.tostring' in that specification. ...
Error.prototype.toString() - JavaScript
the tostring() method returns a string representing the specified error object. syntax e.tostring() return value a string representing the specified error object. description the error object overrides the object.proto
type.tostring() method inherited by all objects. ...
... the tostring() method returns a string representing the specified error object. syntax e.tostring() return value a string representing the specified error object. description the error object overrides the object.proto
type.tostring() method inherited by all objects. ...
... syntax e.tostring() return value a string representing the specified error object. description the error object overrides the object.proto
type.tostring() method inherited by all objects. ...
... ...
Intl.DateTimeFormat.prototype.formatRangeToParts() - JavaScript
the intl.datetimeformat.proto
type.formatrangetoparts() method allows locale-specific tokens representing each part of the formatted date range produced by datetimeformat formatters. 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 intl.datetimeformat.proto
type.formatrangetoparts(startdate, enddate) examples basic formatrangetoparts usage this method receives two dates and returns an array of objects containing the locale-specific tokens representing each part of the formatted date range. let date1 = new date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); // > 'wed...
...ew date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); // > 'wed, 10 jan 2007 10:00:00 gmt' // > 'wed, 10 jan 2007 11:00:00 gmt' let fmt = new intl.datetimeformat("en", { hour: 'numeric', minute: 'numeric' }); console.log(fmt.formatrange(date1, date2)); // > '10:00 – 11:00 am' fmt.formatrangetoparts(date1, date2); // return value: // [ // {
type: 'hour', value: '10', source: "startrange" }, // {
type: 'literal', value: ':', source: "startrange" }, // {
type: 'minute', value: '00', source: "startrange" }, // {
type: 'literal', value: ' – ', source: "shared" }, // {
type: 'hour', value: '11', source: "endrange" }, // {
type: 'literal', value: ':', source: "endrange" }, // {
type: 'minute', ...
... ...
... ...
Intlā.ListāFormatā.prototypeā.formatToParts() - JavaScript
the intl.listformat.proto
type.formattoparts() method returns an array of objects representing the different components that can be used to format a list of values in a locale-aware fashion. syntax intl.listformat.proto
type.formattoparts(list) parameters list an array of values to be formatted according to a locale. return value an array of components which contains the formatted parts from the list. description whereas intl.listformat.proto
type.format() returns a string being the formated version of the list (according to the given locale and style options), formattoparts() returns an array of the different components of the formated string. each element of the resulting array has two properties:
type and value. ...
...the value property gives the content, as a string, of the token. ...
...to a value from the list, or "literal" which refers to a linguistic construct. the value property gives the content, as a string, of the token. the locale and style options used for formatting are given when constructing the intl.listformat instance. ...
... property gives the content, as a string, of the token. the locale and style options used for formatting are given when constructing the intl.listformat instance. examples using formattoparts const fruits = ['apple', 'orange', 'pineapple']; const mylistformat = new intl.listformat('en-gb', { style: 'long',
type: 'conjunction' }); console.table(mylistformat.formattoparts(fruits)); // [ // { "
type": "element", "value": "apple" }, // { "
type": "literal", "value": ", " }, // { "
type": "element", "value": "orange" }, // { "
type": "literal", "value": ", and " }, // { "
type": "element", "value": "pineapple" } // ] specifications specification intl.listformatthe definition of 'formattoparts()' in that specification. ...
Promise.prototype.then() - JavaScript
xecution of a function to the moment the stack is empty settimeout(() => { console.log(thenprom); }); // logs, in order: // promise {[[promisestatus]]: "pending", [[promisevalue]]: undefined} // "this gets called after the end of the main stack. the value received and returned is: 33" // promise {[[promisestatus]]: "resolved", [[promisevalue]]: 33} description as the then and promise.proto
type.catch() methods return promises, they can be chained — an operation called composition. examples using the then method var p1 = new promise((resolve, reject) => { resolve('success!'); // or // reject(new error("error!")); }); p1.then(value => { console.log(value); // success! }, reason => { console.error(reason); // error! }); chaining the then method returns a promise which al...
...e chaining to implement one function with a promise-based api on top of another such function. function fetch_current_data() { // the fetch() api returns a promise. this function // exposes a similar api, except the fulfillment // value of this function's promise has had more // work done on it. return fetch('current-data.json').then(response => { if (response.headers.get('content-
type') != 'application/json') { throw new
typeerror(); } var j = response.json(); // maybe do something with j return j; // fulfillment value given to user of // fetch_current_data().then() }); } if onfulfilled returns a promise, the return value of then will be resolved/rejected by the promise. function resolvelater(resolve, reject) { settimeout(function() {...
... const nexttick = (() => { const noop = () => {}; // literally const nexttickpromise = () => promise.resolve().then(noop); const rfab = reflect.apply.bind; // (thisarg, fn, thisarg, [...args]) const nexttick = (fn, ...args) => ( fn !== undefined ? promise.resolve(args).
... ...
Reflect.setPrototypeOf() - JavaScript
the static reflect.setproto
typeof() method is the same method as object.setproto
typeof(), except for its return
type. it sets the proto
type (i.e., the internal [[proto
type]] property) of a specified object to another object or to null, and returns true if the operation was successful, or false 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.setproto
typeof(target, proto
type) parameters target the target object of which to set the proto
type. proto
type the object's new proto
type (an object or null). ...
...ory. 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.setproto
typeof(target, proto
type) parameters target the target object of which to set the proto
type. proto
type the object's new proto
type (an object or null). return value a boolean indicating whether or not the proto
type was successfully set. exceptions a
typeerror, if target is not an object or if proto
type is neither an object nor null. description the reflect.setproto
typeof method changes the proto
type (i.e. ...
...rget object of which to set the proto
type. proto
type the object's new proto
type (an object or null). return value a boolean indicating whether or not the proto
type was successfully set. exceptions a
typeerror, if target is not an object or if proto
type is neither an object nor null. description the reflect.setproto
typeof method changes the proto
type (i.e. the value of the internal [[proto
type]] property) of the specified object. examples using reflect.setproto
typeof() reflect.setproto
typeof({}, object.proto
type) // true // it can change an object's [[proto
type]] to null. reflect.setproto
typeof({}, null) // true // returns false if target is not extensible. reflect.setproto
typeof(object.freeze({}), null) // false // returns false if it cause a proto
type chain cycle. let target...
...eflect.setproto
typeof() reflect.setproto
typeof({}, object.proto
type) // true // it can change an object's [[proto
type]] to null. reflect.setproto
typeof({}, null) // true // returns false if target is not extensible. reflect.setproto
typeof(object.freeze({}), null) // false // returns false if it cause a proto
type chain cycle. let target = {} let proto = object.create(target) reflect.setproto
typeof(target, proto) // false specifications specification ecmascript (ecma-262)the definition of 'reflect.setproto
typeof' in that specification. ...
RegExp.prototype[@@replace]() - JavaScript
ct, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax regexp[symbol.replace](str, newsubstr|function) parameters str a string that is a target of the replacement. newsubstr (replacement) the string that replaces the substring. ...
...r (replacement) the string that replaces the substring. a number of special replacement patterns are supported; see the specifying a string as a parameter section in string.proto
type.replace() page. function (replacement) a function to be invoked to create the new substring. the arguments supplied to this function are described in the specifying a function as a parameter section in string.proto
type.replace() page. return value a new string with some or all matches of a pattern replaced by a replacement. description this method is called internally in string.proto
type.replace() if the pattern argument is a regexp object. for example, following two examples return same result. 'abc'.replace(/a/, 'a'); /a/[symbol.replace]('abc', 'a'); this method exists for customizing replace behavio...
...tern replaced by a replacement. description this method is called internally in string.proto
type.replace() if the pattern argument is a regexp object. for example, following two examples return same result. 'abc'.replace(/a/, 'a'); /a/[symbol.replace]('abc', 'a'); this method exists for customizing replace behavior in regexp subclass. if pattern argument is not a regexp object, string.proto
type.replace() doesn't call this method, nor creates a regexp object. examples direct call this method can be used in almost the same way as string.proto
type.replace(), except the different this and the different arguments order. var re = /-/g; var str = '2016-01-01'; var newstr = re[symbol.replace](str, '.'); console.log(newstr); // 2016.01.01 using @@replace in subclasses subclasses of regex...
...ubclasses subclasses of regexp can override the [@@replace]() method to modify the default behavior. class myregexp extends regexp { constructor(pattern, flags, count) { super(pattern, flags); this.count = count; } [symbol.replace](str, replacement) { // perform @@replace |count| times. var result = str; for (var i = 0; i < this.count; i++) { result = regexp.proto
type[symbol.replace].call(this, result, replacement); } return result; } } var re = new myregexp('\\d', '', 3); var str = '01234567'; var newstr = str.replace(re, '#'); // string.proto
type.replace calls re[@@replace]. console.log(newstr); // ###34567 specifications specification ecmascript (ecma-262)the definition of 'regexp.proto
type[@@replace]' in that specification. ...
RegExp.prototype[@@split]() - JavaScript
onal integer specifying a limit on the number of splits to be found. the [@@split]() method still splits on every match of this regexp pattern (or, in the syntax above, regexp), until the number of split items match the limit or the string falls short of this pattern. return value an array containing substrings as its elements. ...
... let re = /-/g; let str = '2016-01-02'; let result = re[symbol.split](str); console.log(result); // ["2016", "01", "02"] using @@split in subclasses subclasses of regexp can override the [@@split]() method to modify the default behavior. ...
... except the different this and the different order of arguments. let re = /-/g; let str = '2016-01-02'; let result = re[symbol.split](str); console.log(result); // ["2016", "01", "02"] using @@split in subclasses subclasses of regexp can override the [@@split]() method to modify the default behavior. ...
... using @@split in subclasses subclasses of regexp can override the [@@split]() method to modify the default behavior. class myregexp extends regexp { [symbol.split](str, limit) { let result = regexp.proto
type[symbol.split].call(this, str, limit); return result.map(x => "(" + x + ")"); } } let re = new myregexp('-'); let str = '2016-01-02'; let result = str.split(re); // string.proto
type.split calls re[@@split]. console.log(result); // ["(2016)", "(01)", "(02)"] specifications specification ecmascript (ecma-262)the definition of 'regexp.proto
type[@@split]' in that specification. ...
String.prototype.codePointAt() - JavaScript
rns undefined. description if there is no element at the specified position, undefined is returned. if no utf-16 surrogate pair begins at pos, the code unit at pos is returned. polyfill the following extends strings to include the codepointat() function as specified in ecmascript 2015 for browsers without native support. ...
...number(position) : 0; if (index != index) { // better `isnan` index = 0; } // account for out-of-bounds indices: if (index < 0 || index >= size) { return undefined; } // get the first code unit var first = stri...
... next code unit ) { second = string.charcodeat(index + 1); if (second >= 0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x10000; } } return first; }; if (defineproperty) { defineproperty(string.proto
type, 'codepointat', { 'value': codepointat, 'configurable': true, 'writable': true }); } else { string.proto
type.codepointat = codepointat; } }()); } examples using codepointat() 'abc'.codepointat(1) // 66 '\ud800\udc00'.codepointat(0) // 65536 'xyz'.codepointat(42) // undefined looping with codepointat() for (let codepoint of ...
... ...
String.prototype.endsWith() - JavaScript
return value true if the given characters are found at the end of the string; otherwise, false. description this method lets you determine whether or not a string ends with another string. this method is case-sensitive. polyfill this method has been added to the ecmascript 6 specification and may not be available in all javascript implementations yet. ...
...end of the string; otherwise, false. description this method lets you determine whether or not a string ends with another string. this method is case-sensitive. polyfill this method has been added to the ecmascript 6 specification and may not be available in all javascript implementations yet. ...
...false. description this method lets you determine whether or not a string ends with another string. this method is case-sensitive. polyfill this method has been added to the ecmascript 6 specification and may not be available in all javascript implementations yet. ...
... ...
String.prototype.includes() - JavaScript
string includes another string. case-sensitivity the includes() method is case sensitive. for example, the following expression returns false: 'blue whale'.includes('blue') // returns false polyfill this method has been added to the ecmascript 2015 specification and may not be available in all javascript implementations yet. ...
.... case-sensitivity the includes() method is case sensitive. for example, the following expression returns false: 'blue whale'.includes('blue') // returns false polyfill this method has been added to the ecmascript 2015 specification and may not be available in all javascript implementations yet. ...
...alse: 'blue whale'.includes('blue') // returns false polyfill this method has been added to the ecmascript 2015 specification and may not be available in all javascript implementations yet. ...
... ...
String.prototype.match() - JavaScript
xpression does not include the g flag, str.match() will return the same result as regexp.exec(). other methods if you need to know if a string matches a regular expression regexp, use regexp.test(). if you only want the first match found, you might want to use regexp.exec() instead. if you want to obtain capture groups and the global flag is set, you need to use regexp.exec() or string.proto
type.matchall() instead. examples using match() in the following example, match() is used to find 'chapter' followed by 1 or more numeric characters followed by a decimal point and numeric character 0 or more times. the regular expression includes the i flag so that upper/lower case differences will be ignored. const str = 'for more information, see chapter 3.4.5.1'; const re = /see (chapter \d+...
...tes the use of the global and ignore case flags with match(). all letters a through e and a through e are returned, each its own element in the array. const str = 'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz'; const regexp = /[a-e]/gi; const matches_array = str.match(regexp); console.log(matches_array); // ['a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e'] note: see also string.proto
type.matchall() and advanced searching with flags. using named capturing groups in browsers which support named capturing groups, the following code captures "fox" or "cat" into a group named "animal": const paragraph = 'the quick brown fox jumps over the lazy dog. it barked.'; const capturingregex = /(?<animal>fox|cat) jumps over/; const found = paragraph.match(capturingregex); console.log(found...
...mber with a positive sign, regexp() will ignore the positive sign. const str1 = "nan means not a number. infinity contains -infinity and +infinity in javascript.", str2 = "my grandfather is 65 years old and my grandmother is 63 years old.", str3 = "the contract was declared null and void."; str1.match("number"); // "number" is a string. returns ["number"] str1.match(nan); // the
type of nan is the number. returns ["nan"] str1.match(infinity); // the
type of infinity is the number. returns ["infinity"] str1.match(+infinity); // returns ["infinity"] str1.match(-infinity); // returns ["-infinity"] str2.match(65); // returns ["65"] str2.match(+65); // a number with a positive sign. returns ["65"] str3.match(null); // returns ["null"] specifications ...
...ty is the number. returns ["infinity"] str1.match(+infinity); // returns ["infinity"] str1.match(-infinity); // returns ["-infinity"] str2.match(65); // returns ["65"] str2.match(+65); // a number with a positive sign. returns ["65"] str3.match(null); // returns ["null"] specifications specification ecmascript (ecma-262)the definition of 'string.proto
type.match' in that specification. ...
String.prototype.matchAll() - JavaScript
tory. 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 str.matchall(regexp) parameters regexp a regular expression object. if a non-regexp object obj is passed, it is implicitly converted to a regexp by using new regexp(obj). the regexp object must have the /g flag, otherwise a
typeerror will be thrown. return value an iterator (which is not a restartable iterable). examples regexp.exec() and matchall() prior to the addition of matchall to javascript, it was possible to use calls to regexp.exec (and regexes with the /g flag) in a loop to obtain all the matches: const regexp = regexp('foo[a-z]*','g'); const str = 'table football, foosball'; let match; while ((match ...
...art=6 end=14." // expected output: "found foosball start=16 end=24." // matches iterator is exhausted after the for..of iteration // call matchall again to create a new iterator array.from(str.matchall(regexp), m => m[0]); // array [ "football", "foosball" ] matchall will throw an exception if the g flag is missing. ...
... 'abc'; str.matchall(regexp); //
typeerror matchall internally makes a clone of the regexp—so, unlike regexp.exec(), lastindex does not change as the string is scanned. const regexp = regexp('[a-c]','g'); regexp.lastindex = 1; const str = 'abc'; array.from(str.matchall(regexp), m => `${regexp.lastindex} ${m[0]}`); // array [ "1 b", "1 c" ] better access to capturing groups (than string.proto
type.match()) another compelling reason for matchall is the improved access to capture groups. capture groups are ignored when using match() with the global /g flag: let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; str.match(regexp); // array ['test1', 'test2'] using matchall, you can access capture groups easily: let array = [...str.matchall(regexp)]; array[0]; // ['test1', 'e', 'st1', '...
... ...
WebAssembly.Table.prototype.set() - JavaScript
examples using table.set the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial size of 2 references. ...
...stored at a given index to a different value. syntax table.set(index, value); parameters index the index of the function reference you want to mutate. value the value you want to mutate the reference to. this must be an exported webassembly function, a javascript wrapper for an underlying wasm function. return value void. ...
...dex the index of the function reference you want to mutate. value the value you want to mutate the reference to. this must be an exported webassembly function, a javascript wrapper for an underlying wasm function. return value void. exceptions if index is greater than or equal to table.proto
type.length, a rangeerror is thrown. if value is not an exported webassembly function or null, a
typeerror is thrown. ...
...table.proto
type.length, a rangeerror is thrown. if value is not an exported webassembly function or null, a
typeerror is thrown. examples using table.set the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial size of 2 references. we then print out the table length and contents of the two indexes (retrieved via table.proto
type.get()) to show that the length is two, and the indexes currently contain no function references (they currently return null). var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); console.log(tbl.get(0)); console.log(tbl.get(1)); we then create an import object that contains a reference to the table: var importobj = { js: { tbl:tbl } }; finally, we ...
Types of attacks - Web security
click-jacking click-jacking is the practice of tricking a user into clicking on a link, button, etc. that is other than what the user thinks it is. this can be used, for example, to steal login credentials or to get the user's unwitting permission to install a piece of malware. (click-jacking is sometimes called "user interface redressing", though this is a misuse of the term "redress".) cross-site request forgery (csrf) cross-site scripting (xss) cross-site scripting (xss) is a security exploit which allows an attacker to inject into a website malicious client-side code. ...
...our bank account and your cookies are still valid (and there is no other validation), you will transfer money as soon as you load the html that contains this image. ...
...and there is no other validation), you will transfer money as soon as you load the html that contains this image. ...
...oney as soon as you load the html that contains this image. ...
browser.type - Archive of obsolete content
« xul reference home
type type: one of the values below. the
type of browser, which can be used to set access of the document loaded inside the browser. if this is not set, the loaded document has the same access as the window containing the browser. more precisely: the document loaded into a chrome window is always of chrome
type. subdocuments of chrome documents are of chrome
type, unless the container element (one of iframe, browser or editor) has one of the special
type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content
type. this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inherit...
... content a browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. ...
... content a browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. ...
dlgtype - Archive of obsolete content
cancel the cancel button which will cancel the operation. help a help button for displaying help about the dialog. ...
... cancel the cancel button which will cancel the operation. help a help button for displaying help about the dialog. ...
... cancel the cancel button which will cancel the operation. help a help button for displaying help about the dialog. ...
treecol.type - Archive of obsolete content
you need to apply css to make the checkbox toggle. here is an example css style using the current theme's checkboxes: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. ...
...you need to apply css to make the checkbox toggle. here is an example css style using the current theme's checkboxes: 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: url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells. cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x, so you should specify a url to an image in your extension or elsewhere. */ list-style-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif"); } see also
type ...
Typesetting a community school homepage - Learn web development
— a serif site-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice. use a suitable service to generate bulletproof @font-face code for these two fonts. apply your body font to the whole page, and your heading font to your headings. general text styling: give the page a site-wide font-size of 10px. give your headings and other element
types appropriate font-sizes defined using a suitable relative unit. give your body text a suitable line-height. center your top level heading on the page. give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit. give your body text some letter-spacing and word-spacing, as appropriate. give the first paragraph after each heading ...
...hed design could look like: assessment or further help if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for
typesetting a community school homepage". details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. a link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good practice to get into — it's very hard to help someone with a coding problem if you c...
...e editor (as mentioned in step 1 above). ...
JS::GetFirstArgumentAsTypeHint
convert first argument of @@toprimitive method to js
type. syntax bool js::getfirstargumentas
typehint(jscontext* cx, callargs args, js
type *result); 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. fs callargs the arguments of the function call. behavior js
type * receives the result of conversion. see below. description js::getfirstargumentas
typehint converts first argument of @@toprimitive method to js
type. if args.get(0) is one of the strings "string", "number", or "default", set *result to js
type_string, js
type_number, or js
type_void accordingly and return true. otherwise, return false with a...
...e function call. behavior js
type * receives the result of conversion. see below. description js::getfirstargumentas
typehint converts first argument of @@toprimitive method to js
type. if args.get(0) is one of the strings "string", "number", or "default", set *result to js
type_string, js
type_number, or js
type_void accordingly and return true. otherwise, return false with a
typeerror pending. ...
... conversion. see below. description js::getfirstargumentas
typehint converts first argument of @@toprimitive method to js
type. if args.get(0) is one of the strings "string", "number", or "default", set *result to js
type_string, js
type_number, or js
type_void accordingly and return true. otherwise, return false with a
typeerror pending. ...
JS_GetErrorPrototype
this article covers features introduced in spidermonkey 38 return the original value of error.proto
type. syntax jsobject * js_geterrorproto
type(jscontext *cx); name
type description cx jscontext * pointer to a js context whose errors should be reported via your function. other contexts in the same runtime can have their own error reporting functions. ...
...s introduced in spidermonkey 38 return the original value of error.proto
type. syntax jsobject * js_geterrorproto
type(jscontext *cx); name
type description cx jscontext * pointer to a js context whose errors should be reported via your function. other contexts in the same runtime can have their own error reporting functions. description js_geterrorproto
type returns the original value of error.proto
type from the global object of the current compartment of cx. ...
...
type description cx jscontext * pointer to a js context whose errors should be reported via your function. other contexts in the same runtime can have their own error reporting functions. description js_geterrorproto
type returns the original value of error.proto
type from the global object of the current compartment of cx. ...
JS_TypeOfValue
determines the js data
type of a js value. syntax js
type js_
typeofvalue(jscontext *cx, js::handle<js::value> v); name
type description cx jscontext * the context in which to perform the
type check. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v js::handle<js::value> the value to examine. description js_
typeofvalue examines a specified js value, v, and returns its js data
type. the return value is always one of js
type_void, js
type_object, js
type_function, js
type_string, js
type_number, or js
type_boolean. ...
...in a js_threadsafe build, the caller must be in a request on this jscontext. v js::handle<js::value> the value to examine. description js_
typeofvalue examines a specified js value, v, and returns its js data
type. the return value is always one of js
type_void, js
type_object, js
type_function, js
type_string, js
type_number, or js
type_boolean. ...
...er must be in a request on this jscontext. v js::handle<js::value> the value to examine. description js_
typeofvalue examines a specified js value, v, and returns its js data
type. the return value is always one of js
type_void, js
type_object, js
type_function, js
type_string, js
type_number, or js
type_boolean. ...
nsIAccessibleScrollType
accessible/public/nsiaccessible
types.idlscriptable these constants control the scrolling of an object or substring into a window. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) constants constant value description scroll_
type_top_left 0x00 scroll the top left of the object or substring to the top left of the window (or as close as possible). scroll_
type_bottom_right 0x01 scroll the bottom right of the object or substring to the bottom right of the window (or as close as possible). scroll_
type_top_edge 0x02 scroll the top edge of the object or substring to the top edge of the window (or as close as possible). ...
..._left 0x00 scroll the top left of the object or substring to the top left of the window (or as close as possible). scroll_
type_bottom_right 0x01 scroll the bottom right of the object or substring to the bottom right of the window (or as close as possible). scroll_
type_top_edge 0x02 scroll the top edge of the object or substring to the top edge of the window (or as close as possible). scroll_
type_bottom_edge 0x03 scroll the bottom edge of the object or substring to the bottom edge of the window (or as close as possible). scroll_
type_left_edge 0x04 scroll the left edge of the object or substring to the left edge of the window (or as close as possible). ...
..._edge 0x02 scroll the top edge of the object or substring to the top edge of the window (or as close as possible). scroll_
type_bottom_edge 0x03 scroll the bottom edge of the object or substring to the bottom edge of the window (or as close as possible). scroll_
type_left_edge 0x04 scroll the left edge of the object or substring to the left edge of the window (or as close as possible). scroll_
type_right_edge 0x05 scroll the right edge of the object or substring to the right edge of the window (or as close as possible). scroll_
type_anywhere 0x06 scroll an object the minimum amount necessary in order for the entire frame to be visible (if possible). ...
ctypes.open
at the heart of js-c
types is the c
types.open() function. this must be called before any work can commence. there are two options: custom native file (dll, so, dylib, etc.) standard os libraries custom native file for this method, a native file must be created. a native file for use on unix systems is an so file, which is created and a c function called add() is written. int add(int a, int b) { return a + b; } to make this a shared library, a native file which can be loaded and used from js-c
types, compile it with these commands: gcc -fpic -c mycfuntionsforunix.c gcc -shared -o mycfuntionsforunix.so mycfuntionsforunix.o a file named mycfuntionsforunix.so is successfully created. this native file can be placed in any folder of an addon and then loaded from js-c
types. they can als...
...ddon-data-folder it is important to note that custom native files cannot be loaded through chrome:// or resource:// uris. they must be accessed through a local file path (file://) or a jar path (jar:). if the addon is an unpacked addon, such as bootstrap or add-on sdk addons, the jar path must be used. therefore, the path has to be converted and then the converted path is used for loading with c
types.open. if the native file is located at chrome://youraddon/content/mysubfolder/mycfunctionsforunix.so then it is converted to a file uri like this: components.utils.import("resource://gre/modules/services.jsm"); var cr = components.classes['@mozilla.org/chrome/chrome-registry;1'].getservice(components.interfaces.nsichromeregistry); var chromeuri_mylib = services.io.newuri('chrome://youraddon/c...
...stall.rdf this will look like: "c:\users\vayeate\appdata\roaming\mozilla\firefox\profiles\aksozfjt.unnamed profile 10\extensions\asynczip@jetpack" var filepath_mylib = os.path.join(filepath_folder, 'mysubfolder', 'mycfunctionsforunix.so'); var jarpath_mylib = jarpath_folder + 'mysubfolder/mycfunctionsforunix.so'; } this can then be opened and the c functions within can be used from js-c
types. var lib = c
types.open(filepath_mylib); var add_with_c = lib.declare("add", c
types.default_abi, c
types.int, // return
type c
types.int, // a c
types.int // b ); var rez = add_with_c(2, 5); // rez is 7 lib.close(); references heather's paragraphs: playing around with js-c
types on linux - credits for basis of this article github :: diegocr - fx-sapi-test - creating a ...
BasicCardRequest.supportedTypes - Web APIs
the obsolete supported
types property of the basiccardrequest dictionary can optionally be provided to specify an array of domstrings representing the card
types that the retailer supports (e.g. credit, debit, prepaid). this property is obsolete and should no longer be used. instead of making the web app or site worry about this, the onus has been transferred to the payment processor. syntax basiccardrequest.supported
types = [card
type1...card
typen]; value an array containing one or more domstrings, which describe the card
types the retailer supports. ...
...it, debit, prepaid). this property is obsolete and should no longer be used. instead of making the web app or site worry about this, the onus has been transferred to the payment processor. syntax basiccardrequest.supported
types = [card
type1...card
typen]; value an array containing one or more domstrings, which describe the card
types the retailer supports. legal values are defined in basiccard
type enum, and are currently: credit debit prepaid example the following example shows a sample definition of the first parameter of the paymentrequest() constructor, the data property of which contains supportednetworks and supported
types properties. var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard', 'amex', 'jcb', ...
...owing example shows a sample definition of the first parameter of the paymentrequest() constructor, the data property of which contains supportednetworks and supported
types properties. var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'], supported
types: ['credit', 'debit'] } }]; var details = { ... }; var options = { ... }; var request = new paymentrequest(supportedinstruments, details, options); ...
Credential.type - Web APIs
example // tbd specifications specification status comment credential management level 1 working draft initial definition. ...
... example // tbd specifications specification status comment credential management level 1 working draft initial definition. ...
... example // tbd specifications specification status comment credential management level 1 working draft initial definition. ...
DOMImplementation.createDocumentType() - Web APIs
the domimplementation.createdocument
type() method returns a document
type object which can either be used with domimplementation.createdocument upon document creation or can be put into the document via methods like node.insertbefore() or node.replacechild(). syntax var doc
type = document.implementation.createdocument
type(qualifiednamestr, publicid, systemid); parameters qualifiednamestr is a domstring containing the qualified name, like svg:svg. publicid is a domstring containing the public identifier. systemid is a domstring containing the system identifiers. ...
....replacechild(). syntax var doc
type = document.implementation.createdocument
type(qualifiednamestr, publicid, systemid); parameters qualifiednamestr is a domstring containing the qualified name, like svg:svg. publicid is a domstring containing the public identifier. systemid is a domstring containing the system identifiers. example var dt = document.implementation.createdocument
type('svg:svg', '-//w3c//dtd svg 1.1//en', 'http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd'); var d = document.implementation.createdocument('http://www.w3.org/2000/svg', 'svg:svg', dt); alert(d.doc
type.publicid); // -//w3c//dtd svg 1.1//en specifications specification status comment domthe definition of 'domimplementation.createdocument
type' in that specification. livi...
...e.publicid); // -//w3c//dtd svg 1.1//en specifications specification status comment domthe definition of 'domimplementation.createdocument
type' in that specification. living standard no change from document object model (dom) level 3 core specification document object model (dom) level 3 core specificationthe definition of 'domimplementation.createdocument
type' in that specification. obsolete no change from document object model (dom) level 2 core specification document object model (dom) level 2 core specificationthe definition of 'domimplementation.createdocument
type' in that specification. obsolete initial definition. ...
DataTransferItem.type - Web APIs
the read-only datatransferitem.
type property returns the
type (format) of the datatransferitem object representing the drag data item. the
type is a unicode string generally given by a mime
type, although a mime
type is not required. some example
types are: text/plain and text/html. syntax dataitem.
type; return value a domstring representing the drag data item's
type. example this example shows the use of the
type property. ...
...xample
types are: text/plain and text/html. syntax dataitem.
type; return value a domstring representing the drag data item's
type. example this example shows the use of the
type property. function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].
type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html console.log("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].t...
... }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html console.log("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/uri-list'))) { // drag data item is uri console.log("... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].
type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("... drop: file "); } } } specifications specification status comment html living standardthe definition of '
type' in that specification. living standard initial version html 5.1the definition of '
type' in that specification. recommendati...
msAudioDeviceType - 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 msaudiodevice
type property of the html <audio> element, is a read/write proprietary attribute, specific to internet explorer and microsoft edge. msaudiodevice
type specifies the output device id that the audio will be sent to. syntax <audio src="sound.mp3" msaudiodevice
type="communications" /> by default, audio on your system will output to your default speakers and be considered a foreground element, meaning that the audio will play only when the element is active in the app. for real-time ...
... value description console specifies that the audio output will be sent to the console device. ...
... value description console specifies that the audio output will be sent to the console device. ...
HTMLMediaElement.canPlayType() - Web APIs
the htmlmediaelement method canplay
type() reports how likely it is that the current browser will be able to play media of a given mime
type. note: this feature is not available in web workers. syntax canplayresponse = audioorvideo.canplay
type(media
type); parameters media
type a domstring containing the mime
type of the media. return value a domstring indicating how likely it is that the media can be played. the string will be one of the following values: probably media of the
type indicated by the media
type parameter is probably playable on this device. maybe not enough information is available to determine for sure whether or not the media will play until playback is actually attempted. ...
... domstring indicating how likely it is that the media can be played. the string will be one of the following values: probably media of the
type indicated by the media
type parameter is probably playable on this device. maybe not enough information is available to determine for sure whether or not the media will play until playback is actually attempted. "" (empty string) media of the given
type definitely can't be played on the current device. ...
...dia of the
type indicated by the media
type parameter is probably playable on this device. maybe not enough information is available to determine for sure whether or not the media will play until playback is actually attempted. "" (empty string) media of the given
type definitely can't be played on the current device. example var obj = document.createelement('video'); console.log(obj.canplay
type('video/mp4')); // "maybe" specifications specification status comment html living standardthe definition of 'canplay
type' in that specification. living standard html5the definition of 'htmlmediaelement.canplay
type' in that specification. recommendation initial definition. ...
MediaRecorder.isTypeSupported - Web APIs
the mediarecorder.is
typesupported() static method returns a boolean which is true if the mime
type specified is one the user agent should be able to successfully record. syntax var canrecord = mediarecorder.is
typesupported(mime
type) parameters mime
type the mime media
type to check. return value true if the mediarecorder implementation is capable of recording blob objects for the specified mime
type. recording may still fail if there are insufficient resources to support the recording and encoding process. if the value is false, the user agent is incapable of recording the specified format. ...
...ted(mime
type) parameters mime
type the mime media
type to check. return value true if the mediarecorder implementation is capable of recording blob objects for the specified mime
type. recording may still fail if there are insufficient resources to support the recording and encoding process. if the value is false, the user agent is incapable of recording the specified format. ...
...to support the recording and encoding process. if the value is false, the user agent is incapable of recording the specified format. example var
types = ["video/webm", "audio/webm", "video/webm\;codecs=vp8", "video/webm\;codecs=daala", "video/webm\;codecs=h264", "audio/webm\;codecs=opus", "video/mpeg"]; for (var i in
types) { console.log( "is " +
types[i] + " supported? " + (mediarecorder.is
typesupported(
types[i]) ? "maybe!" : "nope :(")); } specifications specification status comment mediastream recordingthe definition of 'is
typesupported()' in that specification. working draft initial definition. ...
Media Session action types - Web APIs
to support an action on a media session, such as seeking, pausing, or changing tracks, you need to call the mediasession interface's setactionhandler() method to establish a handler for that action. the specific
type of media session action to be handled on a mediasession is identified using a string from the mediasessionaction enumerated
type. syntax a media session action's
type is specified using a string from the mediasessionaction enumerated
type. values each of the actions is a common media session control request. implement support for each of these in order to allow that
type of action to be performed. the following strings identify the currently available
types of media session action: nexttrack advances playback to the next track. pause pauses playback of the media...
...ath.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...
... draft initial definition. ...
NavigatorPlugins.mimeTypes - Web APIs
returns a mime
typearray object, which contains a list of mime
type objects representing the mime
types recognized by the browser. note: named properties of mime
typearray objects are no longer enumerable in the latest browser versions. syntax var mime
types[] = navigator.mime
types; mime
types is a mime
typearray object which has a length property as well as item(index) and nameditem(name) methods. ...
...e
types recognized by the browser. note: named properties of mime
typearray objects are no longer enumerable in the latest browser versions. syntax var mime
types[] = navigator.mime
types; mime
types is a mime
typearray object which has a length property as well as item(index) and nameditem(name) methods. ...
...s of mime
typearray objects are no longer enumerable in the latest browser versions. syntax var mime
types[] = navigator.mime
types; mime
types is a mime
typearray object which has a length property as well as item(index) and nameditem(name) methods. example function isjavapresent() { return 'application/x-java-applet' in navigator.mime
types; } function getjavaplugindescription() { var mime
type = navigator.mime
types['application/x-java-applet']; if (mime
type === undefined) { // no java plugin present return undefined; } return mime
type.enabledplugin.description; } specifications specification status comment html living standardthe definition of 'navigatorplugins.mime
types' in that specification. living standard initial definition. ...
NonDocumentTypeChildNode - Web APIs
the nondocument
typechildnode interface contains methods that are particular to node objects that can have a parent, but not suitable for document
type. nondocument
typechildnode is a raw interface and no object of this
type can be created; it is implemented by element, and characterdata objects. properties there are no inherited properties. nondocument
typechildnode.previouselementsibling read only returns the element immediately prior to this node in its parent's children list, or null if there is no element in the list prior to this node. nondocument
typechildnode.nextelementsibling read only returns the element immediately following this node in its parent's children list, or null if there is no element in the list following this node. methods there are neither inherited nor spec...
...the previouselementsibling and nextelementsibling are now defined on the latter. the characterdata and element implemented the new interfaces. ...
...the previouselementsibling and nextelementsibling are now defined on the latter. ...
OscillatorNode.type - Web APIs
the
type property of the oscillatornode interface specifies what shape of waveform the oscillator will output. there are several common waveforms available, as well as an option to specify a custom waveform shape. the shape of the waveform will affect the tone that is produced. syntax oscillatornode.
type =
type; value a domstring specifying the shape of oscillator wave. the different available values are: sine a sine wave. this is the default value. square a square wave with a duty cycle of 0.5; that is, the signal is "high" for half of each period. sawtooth a sawtooth wave. triangle a triangle wave. custom a custom waveform. you never set
type to custom manually; instead, use the setperiodicwave() method to provide the data representing the waveform. doing so automatically ...
...e: sine a sine wave. this is the default value. square a square wave with a duty cycle of 0.5; that is, the signal is "high" for half of each period. sawtooth a sawtooth wave. triangle a triangle wave. custom a custom waveform. you never set
type to custom manually; instead, use the setperiodicwave() method to provide the data representing the waveform. doing so automatically sets the
type to custom. exceptions invalidstateerror the value custom was specified. to set a custom waveform, just call setperiodicwave(). doing so automatically sets the
type for you. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api con...
...he
type for you. example the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.
type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web audio apithe definition of '
type' in that specification. working draft ...
PaymentRequest.shippingType - Web APIs
candidate 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. ...
... candidate 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. ...
...n. 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. ...
RTCDataChannel.binaryType - Web APIs
the property binary
type on the rtcdatachannel interface is a domstring which specifies the
type of javascript object which should be used to represent binary data received on the rtcdatachannel. values allowed by the websocket.binary
type property are also permitted here: "blob" if blob objects are being used or "arraybuffer" if arraybuffer objects are being used. the default is "blob". when a binary message is received on the data channel, the resulting message event's messageevent.data property is an object of the
type specified by the binary
type. syntax var
type = adatachannel.binary
type; adatachannel.binary
type =
type; value a domstring that can have one of these values: "blob" received binary messages' contents will be contained in blob objects. "arraybuffer" received bina...
...objects. "arraybuffer" received binary messages' contents will be contained in arraybuffer objects. example this code configures a data channel to receive binary data in arraybuffer objects, and establishes a listener for message events which constructs a string representing the received data as a list of hexadecimal byte values. ...
..."binary"); dc.binary
type = "arraybuffer"; dc.onmessage = function(event) { let bytearray = new uint8array(event.data); let hexstring = ""; bytearray.foreach(function(byte) { hexstring += byte.tostring(16) + " "; }); }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.binary
type' in that specification. candidate recommendation initial specification. ...
RTCNetworkType - Web APIs
the webrtc rtcnetwork
type enumerated
type defines a set of strings used to identify the
type of network used by a connection between two peers. this
type is used as the value or the following properties: rtcicecandidate's network
type rtcstunserverconnectionstats's network
type values bluetooth a bluetooth connection is used by the described connection. cellular the connection uses a cellular data service to connect. this includes all cellular data services including edge (2g), hspa (3g), lte (4g), and nr (5g). ethernet the described connection uses an ethernet network. wifi the described connection uses wifi. wimax the described connection uses a wimax network. vpn the connection uses a virtual private network (vpn). ...
...ion uses a cellular data service to connect. this includes all cellular data services including edge (2g), hspa (3g), lte (4g), and nr (5g). ethernet the described connection uses an ethernet network. wifi the described connection uses wifi. wimax the described connection uses a wimax network. vpn the connection uses a virtual private network (vpn). the vpn obscures the underlying network
type, which is not discernible. unknown the user's browser is unable or unwilling to identify the underlying connection technology used by the described connection. this may be because the browser isn't able to determine the network
type for some reason or it may be intentionally getting obscured for security reasons, such as to avoid device fingerprinting. note: keep in mind that the specified v...
...n. this may be because the browser isn't able to determine the network
type for some reason or it may be intentionally getting obscured for security reasons, such as to avoid device fingerprinting. note: keep in mind that the specified value only reflects the initial connection between the local peer and the next hop along the network toward reaching the remote peer. for example, if the network
type is wifi but the user is connected using a cellular hotspot, the connection will be bottlenecked by the underlying cellular network (and any other networks between the two peers). specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcnetwork
type' in that specification. candidate recommendation initial ...
ScreenOrientation.type - Web APIs
working draft 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. ...
... working draft 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. ...
TaskAttributionTiming.containerType - Web APIs
working draft 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. ...
... working draft 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. ...
.... 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. ...
XMLHttpRequest.overrideMimeType() - Web APIs
the xmlhttprequest method overridemime
type() specifies a mime
type other than the one provided by the server to be used instead when interpreting the data being transferred in a request. this may be used, for example, to force a stream to be treated and parsed as "text/xml", even if the server does not report it as such. this method must be called before calling send(). syntax xmlhttprequest.overridemime
type(mime
type) parameters mime
type a domstring specifying the mime
type to use instead of the one specified by the server. if the server doesn't specify a
type, xmlhttprequest assumes "text/xml". return value undefined. example this example specifies a mime
type of "text/plain", overriding the server's stated
type for the data being received. note: if the server doesn't...
...e(mime
type) parameters mime
type a domstring specifying the mime
type to use instead of the one specified by the server. if the server doesn't specify a
type, xmlhttprequest assumes "text/xml". return value undefined. example this example specifies a mime
type of "text/plain", overriding the server's stated
type for the data being received. note: if the server doesn't provide a content-
type header, xmlhttprequest assumes that the mime
type is "text/xml". if the content isn't valid xml, an "xml parsing error: not well-formed" error occurs. you can avoid this by calling overridemime
type() to specify a different
type. ...
... the data being received. note: if the server doesn't provide a content-
type header, xmlhttprequest assumes that the mime
type is "text/xml". if the content isn't valid xml, an "xml parsing error: not well-formed" error occurs. you can avoid this by calling overridemime
type() to specify a different
type. // interpret the received data as plain text req = new xmlhttprequest(); req.overridemime
type("text/plain"); req.addeventlistener("load", callback, false); req.open("get", url); req.send(); specifications specification status comment xmlhttprequestthe definition of 'overridemime
type()' in that specification. living standard whatwg living standard ...
:nth-last-of-type() - CSS: Cascading Style Sheets
the :nth-last-of-
type() css pseudo-class matches elements of a given
type, based on their position among a group of siblings, counting from the end. /* selects every fourth <p> element among any group of siblings, counting backwards from the last one */ p:nth-last-of-
type(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-of-
type, except it counts items backwards from the end, not forwards from the beginning. syntax the nth-last-of-
type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end. see :nth-last-child for a more detailed explanation of its syntax. ...
... note: this pseudo-class is essentially the same as :nth-of-
type, except it counts items backwards from the end, not forwards from the beginning. syntax the nth-last-of-
type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end. see :nth-last-child for a more detailed explanation of its syntax. ...
...more detailed explanation of its syntax. formal syntax :nth-last-of-
type( <nth> )where <nth> = <an-plus-b> | even | odd examples html <div> <span>this is a span.</span> <span>this is another span.</span> <em>this is emphasized.</em> <span>wow, this span gets limed!!!</span> <strike>this is struck through.</strike> <span>here is one last span.</span> </div> css span:nth-last-of-
type(2) { background-color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-last-of-
type' in that specification. working draft matching elements are not required to have a parent. selectors level 3the definition of ':nth-last-of-
type' in that specification. recommendation initial definition. ...
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 ">". ...
... 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 ">". ...
... see also css units and values introduction to css: values and units ...
exsl:object-type() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes exsl:object-
type() returns a string that indicates the
type of the specified object. note: most xslt object
types can be coerced into each other safely; however, certain coercsions to raise error conditions. in particular, treating something that's not a node-set as a node-set will do so. this function lets authors of named templates and extension functions easily provide flexibility in parameter values. syntax exsl:object-
type(object) parameters object the object whose
type is to be returned. ...
...to each other safely; however, certain coercsions to raise error conditions. in particular, treating something that's not a node-set as a node-set will do so. ...
... as a node-set will do so. this function lets authors of named templates and extension functions easily provide flexibility in parameter values. ...
CSP: trusted-types - HTTP
the http content-security-policy (csp) trusted-
types directive instructs user agents to restrict usage of known dom xss sinks to a predefined set of functions that only accept non-spoofable,
typed values in place of strings. this allows authors to define rules guarding writing values to the dom and thus reducing the dom xss attack surface to small, isolated parts of the web application codebase, facilitating their monitoring and code review. this directive declares a white-list of trusted
type policy names created with trusted
types.createpolicy from trusted
types api. ...
...trings. this allows authors to define rules guarding writing values to the dom and thus reducing the dom xss attack surface to small, isolated parts of the web application codebase, facilitating their monitoring and code review. this directive declares a white-list of trusted
type policy names created with trusted
types.createpolicy from trusted
types api. syntax content-security-policy: trusted-
types; content-security-policy: trusted-
types <policyname>; content-security-policy: trusted-
types <policyname> <policyname> 'allow-duplicates'; <domstring> any string can be a trusted
type policy name. 'allow-duplicates' allows for creating policies with a name that was already used examples todo polyfill a polyfill for trusted
types is available on github. specifications speci...
...me>; content-security-policy: trusted-
types <policyname> <policyname> 'allow-duplicates'; <domstring> any string can be a trusted
type policy name. 'allow-duplicates' allows for creating policies with a name that was already used examples todo polyfill a polyfill for trusted
types is available on github. specifications specification status comment trusted
types draft initial definition. ...
415 Unsupported Media Type - HTTP
the http 415 unsupported media
type client error response code indicates that the server refuses to accept the request because the payload format is in an unsupported format. the format problem might be due to the request's indicated content-
type or content-encoding, or as a result of inspecting the data directly. ...
... the http 415 unsupported media
type client error response code indicates that the server refuses to accept the request because the payload format is in an unsupported format. the format problem might be due to the request's indicated content-
type or content-encoding, or as a result of inspecting the data directly. ...
...ode indicates that the server refuses to accept the request because the payload format is in an unsupported format. the format problem might be due to the request's indicated content-
type or content-encoding, or as a result of inspecting the data directly. ...
TypeError: can't define property "x": "obj" is not extensible - JavaScript
the javascript exception "can't define property "x": "obj" is not extensible" occurs when object.preventextensions() marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. message
typeerror: cannot create property for a non-extensible object (edge)
typeerror: can't define property "x": "obj" is not extensible (firefox)
typeerror: cannot define property: "x", object is not extensible. (chrome) error
type typeerror what went wrong? usually, an object is extensible and new properties can be added to it. however, in this case object.preventextensions() marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. ...
...ct is extensible and new properties can be added to it. however, in this case object.preventextensions() marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. examples adding new properties to a non-extensible objects in strict mode, attempting to add new properties to a non-extensible object throws a
typeerror. in sloppy mode, the addition of the "x" property is silently ignored. 'use strict'; var obj = {}; object.preventextensions(obj); obj.x = 'foo'; //
typeerror: can't define property "x": "obj" is not extensible in both, strict mode and sloppy mode, a call to object.defineproperty() throws when adding a new property to a non-extensible object. var obj = { }; object.preventextensions(obj)...
...ilently ignored. 'use strict'; var obj = {}; object.preventextensions(obj); obj.x = 'foo'; //
typeerror: can't define property "x": "obj" is not extensible in both, strict mode and sloppy mode, a call to object.defineproperty() throws when adding a new property to a non-extensible object. var obj = { }; object.preventextensions(obj); object.defineproperty(obj, 'x', { value: "foo" } ); //
typeerror: can't define property "x": "obj" is not extensible to fix this error, you will either need to remove the call to object.preventextensions() entirely, or move it to a position so that the property is added earlier and only later the object is marked as non-extensible. of course you can also remove the property that was attempted to be added, if you don't need it. 'use strict'; var obj = ...
SyntaxError: test for equality (==) mistyped as assignment (=)? - JavaScript
what went wrong? there was an assignment (=) when you would normally expect a test for equality (==). to help debugging, javascript (with strict warnings enabled) warns about this pattern. ...
... what went wrong? there was an assignment (=) when you would normally expect a test for equality (==). to help debugging, javascript (with strict warnings enabled) warns about this pattern. ...
... what went wrong? there was an assignment (=) when you would normally expect a test for equality (==). to help debugging, javascript (with strict warnings enabled) warns about this pattern. ...
TypeError: "x" is not a constructor - JavaScript
the javascript exception "is not a constructor" occurs when there was an attempt to use an object or a variable as a constructor, but that object or variable is not a constructor. message
typeerror: object doesn't support this action (edge)
typeerror: "x" is not a constructor
typeerror: math is not a constructor
typeerror: json is not a constructor
typeerror: symbol is not a constructor
typeerror: reflect is not a constructor
typeerror: intl is not a constructor
typeerror: atomics is not a constructor error
type typeerror what went wrong? there was an attempt to use an object or a variable as a constructor, but that object or variable is not a constructor. see constructor or the new operator for more information on what a constructor is. there are many global objects, like string or ...
...here are many global objects, like string or array, which are constructable using new. however, some global objects are not and their properties and methods are static. the following javascript standard built-in objects are not a constructor: math, json, symbol, reflect, intl, atomics. generator functions cannot be used as constructors either. examples invalid cases var car = 1; new car(); //
typeerror: car is not a constructor new math(); //
typeerror: math is not a constructor new symbol(); //
typeerror: symbol is not a constructor function* f() {}; var obj = new f; //
typeerror: f is not a constructor a car constructor suppose you want to create an object
type for cars. you want this
type of object to be called car, and you want it to have properties for make, model, and year. to ...
...ake = make; this.model = model; this.year = year; } now you can create an object called mycar as follows: var mycar = new car('eagle', 'talon tsi', 1993); in promises when returning an immediately-resolved or immediately-rejected promise, you do not need to create a new promise(...) and act on it. ...
TypeError: "x" is (not) "y" - JavaScript
the javascript exception "x is (not) y" occurs when there was an unexpected
type. oftentimes, unexpected undefined or null values. message
typeerror: unable to get property {x} of undefined or null reference (edge)
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. also, certain methods, such as object.create() or symbol.keyfor(), require a specific
type, that must be provided. examples invalid cases // undefined and null cases on which the substring method won't work var foo = undefined; foo.substring(1...
...x" is not a symbol error
type typeerror. what went wrong? there was an unexpected
type. this occurs oftentimes with undefined or null values. also, certain methods, such as object.create() or symbol.keyfor(), require a specific
type, that must be provided. examples invalid cases // undefined and null cases on which the substring method won't work var foo = undefined; foo.substring(1); //
typeerror: foo is undefined var foo = null; foo.substring(1); //
typeerror: foo is null // certain methods might require a specific
type var foo = {} symbol.keyfor(foo); //
typeerror: foo is not a symbol var foo = 'bar' object.create(foo); //
typeerror: "foo" is not an object or null fixing the issue to fix null pointer to undefined values, you can use the
typeof operator, for example. if (foo...
...ll // certain methods might require a specific
type var foo = {} symbol.keyfor(foo); //
typeerror: foo is not a symbol var foo = 'bar' object.create(foo); //
typeerror: "foo" is not an object or null fixing the issue to fix null pointer to undefined values, you can use the
typeof operator, for example. if (foo !== undefined) { // now we know that foo is defined, we are good to go. } if (
typeof foo !== 'undefined') { // the same good idea, but don't use this implementation - it can bring problems // because of the confusion between truly undefined and undeclared variables. } ...
TypeError: variable "x" redeclares argument - JavaScript
what went wrong? the same variable name occurs as a function parameter and is then redeclared using a var assignment in a function body again. this might be a naming conflict and thus javascript warns about it. ...
... what went wrong? the same variable name occurs as a function parameter and is then redeclared using a var assignment in a function body again. this might be a naming conflict and thus javascript warns about it. ...
... what went wrong? the same variable name occurs as a function parameter and is then redeclared using a var assignment in a function body again. this might be a naming conflict and thus javascript warns about it. ...
Array.prototype[@@unscopables] - JavaScript
script 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. property attributes of array.proto
type[@@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.proto
type.keys() method was introduced. that means that inside with environments, "keys" would now be the method and not the v...
... 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.proto
type.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.proto
type[@@unscopables] symbol property comes into play and prevents that some of the array methods are being scoped into the with statement. ...
...ecmascript 2015 and later, the array.proto
type.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.proto
type[@@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.proto
type) { keys.push('something'); } object.keys(array.proto
type[symbol.unscopables]); // ["copywithin", "entries", "fill", "find", "findindex", // "includes", "keys", "values"] specifications specification ecmascript (ecma-262)the definition of 'array.proto
type[@@unscopables]' in that specification. ...
Array.prototype.every() - JavaScript
) polyfill every was added to the ecma-262 standard in the 5th edition, and it may not be present in other implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of every in implementations which do not natively support it. this algorithm is exactly the one specified in ecma-262, 5th edition, assuming object and
typeerror have their original values, and that callbackfn.call evaluates to the original value of function.proto
type.call. if (!array.proto
type.every) { array.proto
type.every = function(callbackfn, thisarg) { 'use strict'; var t, k; if (this == null) { throw new
typeerror('this is null or not defined'); } // 1. let o be the result of calling toobject passing the this ...
...s null or not defined'); } // 1. let o be the result of calling toobject passing the this // value as the argument. var o = object(this); // 2. let lenvalue be the result of calling the get internal method // of o with the argument "length". // 3. let len be touint32(lenvalue). var len = o.length >>> 0; // 4. if iscallable(callbackfn) is false, throw a
typeerror exception. if (
typeof callbackfn !== 'function' && object.proto
type.tostring.call(callbackfn) !== '[object function]') { throw new
typeerror(); } // 5. if thisarg was supplied, let t be thisarg; else let t be undefined. if (arguments.length > 1) { t = thisarg; } // 6. let k be 0. k = 0; // 7. repeat, while k < len while (k < len) { va...
... ...
Array.prototype.fill() - JavaScript
it is treated as array.length + start. if end is negative, it is treated as array.length + end. fill is intentionally generic: it does not require that its this value be an array object. fill is a mutator method: it will change the array itself and return it, not a copy of it. if the first parameter is an object, each slot in the array will reference that object. polyfill if (!array.proto
type.fill) { object.defineproperty(array.proto
type, 'fill', { value: function(value) { // steps 1-2. if (this == null) { throw new
typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-7. var start = arguments[1]; var relativestart = start >> 0; // step 8. ...
.... var finalvalue = relativeend < 0 ? math.max(len + relativeend, 0) : math.min(relativeend, len); // step 12. while (k < finalvalue) { o[k] = value; k++; } // step 13. return o; } }); } if you need to support truly obsolete javascript engines that don't support object.defineproperty, it's best not to polyfill array.proto
type methods at all, as you can't make them non-enumerable. examples using fill [1, 2, 3].fill(4) // [4, 4, 4] [1, 2, 3].fill(4, 1) // [1, 4, 4] [1, 2, 3].fill(4, 1, 2) // [1, 4, 3] [1, 2, 3].fill(4, 1, 1) // [1, 2, 3] [1, 2, 3].fill(4, 3, 3) // [1, 2, 3] [1, 2, 3].fill(4, -3, -2) // [4, 2, 3] [1, 2, 3].fill(4, nan, nan) // [1, 2, 3...
... ...
Array.prototype.push() - JavaScript
ay. do not use this method if the second array (morevegs in the example) is very large because the maximum number of parameters that one function can take is limited in practice. see apply() for more details. let vegetables = ['parsnip', 'potato'] let morevegs = ['celery', 'beetroot'] // merge the second array into the first one // equivalent to vegetables.push('celery', 'beetroot') array.proto
type.push.apply(vegetables, morevegs) console.log(vegetables) // ['parsnip', 'potato', 'celery', 'beetroot'] using an object in an array-like fashion as mentioned above, push is intentionally generic, and we can use that to our advantage. array.proto
type.push can work on an object just fine, as this example shows. note that we don't create an array to store a collection of objects. instead, we s...
...snip', 'potato', 'celery', 'beetroot'] using an object in an array-like fashion as mentioned above, push is intentionally generic, and we can use that to our advantage. array.proto
type.push can work on an object just fine, as this example shows. note that we don't create an array to store a collection of objects. instead, we store the collection on the object itself and use call on array.proto
type.push to trick the method into thinking we are dealing with an array—and it just works, thanks to the way javascript allows us to establish the execution context in any way we want. let obj = { length: 0, addelem: function addelem(elem) { // obj.length is automatically incremented // every time an element is added. [].push.call(this, elem) } } // let's add ...
... ...
Array.prototype.slice() - JavaScript
2}}, 2] mycar[0].color = red newcar[0].color = red the new color of my honda is purple mycar[0].color = purple newcar[0].color = purple array-like objects slice method can also be called to convert array-like objects/collections to a new array. you just bind the method to the object. the arguments inside a function is an example of an 'array-like object'. ...
...rple array-like objects slice method can also be called to convert array-like objects/collections to a new array. you just bind the method to the object. the arguments inside a function is an example of an 'array-like object'. function list() { return array.proto
type.slice.call(arguments) } let list1 = list(1, 2, 3) // [1, 2, 3] binding can be done with the call() method of function.proto
type and it can also be reduced using [].slice.call(arguments) instead of array.proto
type.slice.call. ...
...de a function is an example of an 'array-like object'. function list() { return array.proto
type.slice.call(arguments) } let list1 = list(1, 2, 3) // [1, 2, 3] binding can be done with the call() method of function.proto
type and it can also be reduced using [].slice.call(arguments) instead of array.proto
type.slice.call. anyway, it can be simplified using bind. let unboundslice = array.proto
type.slice let slice = function.proto
type.call.bind(unboundslice) function list() { return slice(arguments) } let list1 = list(1, 2, 3) // [1, 2, 3] specifications specification ecmascript (ecma-262)the definition of 'array.proto
type.slice' in that specification. ...
Date.prototype.toISOString() - JavaScript
m/mdn/interactive-examples and send us a pull request. syntax dateobj.toisostring() return value a string representing the given date in the iso 8601 format according to universal time. polyfill this method was standardized in ecma-262 5th edition. ...
...ng to universal time. polyfill this method was standardized in ecma-262 5th edition. ...
... ...
Intl.Collator.prototype.compare() - 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 collator.compare(string1, string2) parameters string1 string2 the strings to compare against each other. description the compare getter function returns a number indicating how string1 and string2 compare to each other according to the sort order of this collator object: a negative value if string1 comes before string2; a positive value if string1 comes after string2; 0 if they are considered equal. ...
...her according to the sort order of this collator object: a negative value if string1 comes before string2; a positive value if string1 comes after string2; 0 if they are considered equal. examples using compare for array sort use the compare getter function for sorting arrays. note that the function is bound to the collator from which it was obtained, so it can be passed directly to array.proto
type.sort(). var a = ['offenbach', 'Österreich', 'odenwald']; var collator = new intl.collator('de-u-co-phonebk'); a.sort(collator.compare); console.log(a.join(', ')); // → "odenwald, Österreich, offenbach" using compare for array search use the compare getter function for finding matching strings in arrays: var a = ['congrès', 'congres', 'assemblée', 'poisson']; var collator = new intl.col...
... ...
Intl.DisplayNames.prototype.resolvedOptions() - JavaScript
syntax displaynames.resolvedoptions() return value 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. ...
... 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 either "language", "region", "script", or "currency". fallback the value provided for this property in the options argument of the constructor or the default value ("code"). its value is either "code" or "none". examples using resolvedoptions const displaynames = ...
...erty in the options argument of the constructor or the default value ("language"). its value is either "language", "region", "script", or "currency". fallback the value provided for this property in the options argument of the constructor or the default value ("code"). its value is either "code" or "none". examples using resolvedoptions const displaynames = new intl.displaynames(['de-de'], {
type: 'region'}); const usedoptions = displaynames.resolvedoptions(); console.log(usedoptions.locale); // "de-de" console.log(usedoptions.style); // "long" console.log(usedoptions.
type); // "region" console.log(usedoptions.fallback); // "code" specifications specification intl.displaynamesthe definition of 'resolvedoptions()' in that specification. ...
Intlā.ListāFormatā.prototypeā.resolvedOptions() - JavaScript
syntax listformat.resolvedoptions() return value 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. ...
... 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 either "conjunction", "disjunction", or "unit". examples using resolvedoptions const delistformatter = new intl.listformat("de-de", { style: "short" }); const usedoptions = de.resolvedoptions(); console.log(usedoptions.locale); // "de-de" console.log(usedoptions...
... options argument of the constructor or the default value ("conjunction"). its value is either "conjunction", "disjunction", or "unit". examples using resolvedoptions const delistformatter = new intl.listformat("de-de", { style: "short" }); const usedoptions = de.resolvedoptions(); console.log(usedoptions.locale); // "de-de" console.log(usedoptions.style); // "short" console.log(usedoptions.
type); // "conjunction" (the default value) specifications specification intl.listformatthe definition of 'resolvedoptions()' in that specification. ...
Intl.Locale.prototype.calendar - JavaScript
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. ...
... 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
type. finally, add the calendar era to the string. let frbuddhist = new intl.locale("fr-fr-u-ca-buddhist"); console.log(frbuddhist.calendar); // prints "buddh...
...set the calendar property of the configuration object to your desired calendar era, and then pass it into the constructor. ...
Intl.Locale.prototype.hourCycle - JavaScript
the intl.locale.proto
type.hourcycle property is an accessor property that returns the time keeping format convention used by the locale. description there are 2 main
types of time keeping conventions (clocks) used around the world: the 12 hour clock and the 24 hour clock. the hourcycle property makes it easier for javascript programmers to access the clock
type used by a particular locale. like other additional locale data, hour cycle
type is an extension subtag, which extends the data contained in a locale string. the hour cycle
type can have several different values, which are listed in the table below. valid hour cycle
types hour cycle
type description h12 hour system using 1–12; corresponds to 'h' in patterns. the 12 hour clock, with midnight starting at ...
...h 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.hourcycle); // prints "h23" a...
...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.hourcycle); // prints "h23" adding an hour cycle via the configuration object argument the intl.locale constructor has an optional configuration object argument, which can contain any of several extension
types, including hour cycle
types. set the hourcycle property of the configuration object to your desired hour cycle
type, and then pass it into the constructor. let us12hour = new intl.locale("en-us", {hourcycle: "h12"}); console.log(us12hour.hourcycle); // prints "h12" specifications specification ecmascript internationalization api (ecma-402) ...
Intl.NumberFormat.prototype.format() - 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 numberformat.format(number) parameters number a number or bigint to format. description the format getter function formats a number into a string according to the locale and formatting options of this numberformat object. ...
...ions = { style: 'currency', currency: 'rub' }; var numberformat = new intl.numberformat('ru-ru', options); console.log(numberformat.format(654321.987)); // → "654 321,99 ŃŃŠ±." using format with map use the format getter function for formatting all numbers in an array. note that the function is bound to the numberformat from which it was obtained, so it can be passed directly to array.proto
type.map. this is considered a historical artefact, as part of a convention which is no longer followed for new features, but is preserved to maintain compatibility with existing programs. var a = [123456.789, 987654.321, 456789.123]; var numberformat = new intl.numberformat('es-es'); var formatted = a.map(n => numberformat.format(n)); console.log(formatted.join('; ')); // → "123.456,789; 987.654...
...ity with existing programs. var a = [123456.789, 987654.321, 456789.123]; var numberformat = new intl.numberformat('es-es'); var formatted = a.map(n => numberformat.format(n)); console.log(formatted.join('; ')); // → "123.456,789; 987.654,321; 456.789,123" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.proto
type.format' in that specification. ...
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
syntax pluralrule.resolvedoptions() return 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. ...
...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 maximumfractiondigits the values provided for these properties in the options argument or filled in as defaults. these properties are present only if neither minimumsignificantdigits nor maximumsignificantdigits was provided in the options argume...
...ovided in the options argument. examples using the resolvedoptions method var de = new intl.pluralrules('de-de'); var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.maximumfractiondigits; // 3 usedoptions.minimumfractiondigits; // 0 usedoptions.minimumintegerdigits; // 1 usedoptions.pluralcategories; // array [ "one", "other" ] usedoptions.
type; // "cardinal" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.pluralrules.proto
type.resolvedoptions' in that specification. ...
Intl.RelativeTimeFormat.prototype.formatToParts() - 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 relativetimeformat.formattoparts(value, unit) parameters value numeric value to use in the internationalized relative time message. unit unit to use in the relative time internationalized message. possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". plural forms are also permitted. ...
...ue numeric value to use in the internationalized relative time message. unit unit to use in the relative time internationalized message. possible values are: "year", "quarter", "month", "week", "day", "hour", "minute", "second". plural forms are also permitted. return value an array of objects containing the formatted relative time in parts. description the intl.relativetimeformat.proto
type.formattoparts method is a version of the format method which it returns an array of objects which represent "parts" of the object, separating the formatted number into its consituent parts and separating it from other surrounding text. these objects have two properties:
type a numberformat formattoparts
type, and value, which is the string which is the component of the output. if a "part" came fr...
...which is the component of the output. if a "part" came from numberformat, it will have a unit property which indicates the unit being formatted; literals which are part of the larger frame will not have this property. examples using formattoparts const rtf = new intl.relativetimeformat("en", { numeric: "auto" }); // format relative time using the day unit rtf.formattoparts(-1, "day"); // > [{
type: "literal", value: "yesterday"}] rtf.formattoparts(100, "day"); // > [{
type: "literal", value: "in " }, // > {
type: "integer", value: "100", unit: "day" }, // > {
type: "literal", value: " days" }] specifications specification status comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat.formattoparts()' in that specification. ...
Number.prototype.toFixed() - JavaScript
ementations may optionally support a larger range of values. if this argument is omitted, it is treated as 0. return value a string representing the given number using fixed-point notation. exceptions rangeerror if digits is too small or too large. values between 0 and 100, inclusive, will not cause a rangeerror. implementations are allowed to support larger and smaller values as chosen.
typeerror if this method is invoked on an object that is not a number. description tofixed() returns a string representation of numobj that does not use exponential notation and has exactly digits digits after the decimal place. the number is rounded if necessary, and the fractional part is padded with zeros if necessary so that it has the specified length. if the absolute value of numobj is great...
... number. description tofixed() returns a string representation of numobj that does not use exponential notation and has exactly digits digits after the decimal place. the number is rounded if necessary, and the fractional part is padded with zeros if necessary so that it has the specified length. if the absolute value of numobj is greater or equal to 1e+21, this method simply calls number.proto
type.tostring() and returns a string in exponential notation. warning: floating point numbers cannot represent all decimals precisely in binary. this can lead to unexpected results, such as 0.1 + 0.2 === 0.3 returning false . examples using tofixed let numobj = 12345.6789 numobj.tofixed() // returns '12346': note rounding, no fractional part numobj.tofixed(1) // returns '12345.7': no...
...35.tofixed(1) // returns '2.4'. note it rounds up 2.55.tofixed(1) // returns '2.5'. note it rounds down - see warning above -2.34.tofixed(1) // returns -2.3 (due to operator precedence, negative number literals don't return a string...) (-2.34).tofixed(1) // returns '-2.3' specifications specification ecmascript (ecma-262)the definition of 'number.proto
type.tofixed' in that specification. ...
Number.prototype.toLocaleString() - JavaScript
} catch (e) { return e.name === 'rangeerror'; } return false; } prior to es5.1, implementations were not required to throw a range error exception if tolocalestring is called with arguments. a check that works in all hosts, including those supporting ecma-262 prior to ed 5.1, is to test for the features specified in ecma-402 that are required to support regional options for number.proto
type.tolocalestring directly: function tolocalestringsupportsoptions() { return !!(
typeof intl == 'object' && intl &&
typeof intl.numberformat == 'function'); } this tests for a global intl object, checks that it's not null and that it has a numberformat property that is a function. using locales this example shows some of the variations in localized number formats. in order to get the format o...
... ...
... ...
Object.getPrototypeOf() - JavaScript
the object.getproto
typeof() method returns the proto
type (i.e. the value of the internal [[proto
type]] property) of the specified 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.getproto
typeof(obj) parameters obj the object whose proto
type is to be returned. return value the proto
type of the given object. if there are no inherited properties, null is returned. ...
...hub 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.getproto
typeof(obj) parameters obj the object whose proto
type is to be returned. return value the proto
type of the given object. if there are no inherited properties, null is returned. examples using getproto
typeof var proto = {}; var obj = object.create(proto); object.getproto
typeof(obj) === proto; // true non-object coercion in es5, it will throw a
typeerror exception if the obj parameter isn't an object. ...
...alue the proto
type of the given object. if there are no inherited properties, null is returned. examples using getproto
typeof var proto = {}; var obj = object.create(proto); object.getproto
typeof(obj) === proto; // true non-object coercion in es5, it will throw a
typeerror exception if the obj parameter isn't an object. in es2015, the parameter will be coerced to an object. object.getproto
typeof('foo'); //
typeerror: "foo" is not an object (es5 code) object.getproto
typeof('foo'); // string.proto
type (es2015 code) specifications specification ecmascript (ecma-262)the definition of 'object.getproto
typeof' in that specification. ...
RegExp.prototype[@@match]() - JavaScript
examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax regexp[symbol.match](str) parameters str a string that is a target of the match. return value an array containing the entire match result and any parentheses-captured matched results, or null if there were no matches. description this method is called internally in string.proto
type.match(). for example, the following two examples return same result. 'abc'.match(/a/); /a/[symbol.match]('abc'); this method exists for customizing match behavior within regexp subclasses. examples direct call this method can be used in almost the same way as string.proto
type.match(), except the different this and the different arguments order. let re = /[0-9]+/g; let str = '2016-01-02'; ...
...ch(), except the different this and the different arguments order. let re = /[0-9]+/g; let str = '2016-01-02'; let result = re[symbol.match](str); console.log(result); // ["2016", "01", "02"] using @@match in subclasses subclasses of regexp can override the [@@match]() method to modify the default behavior. class myregexp extends regexp { [symbol.match](str) { let result = regexp.proto
type[symbol.match].call(this, str); if (!result) return null; return { group(n) { return result[n]; } }; } } let re = new myregexp('([0-9]+)-([0-9]+)-([0-9]+)'); let str = '2016-01-02'; let result = str.match(re); // string.proto
type.match calls re[@@match]. console.log(result.group(1)); // 2016 console.log(result.group(2)); // 01 console.log(result.group(3)); // 02 ...
... result[n]; } }; } } let re = new myregexp('([0-9]+)-([0-9]+)-([0-9]+)'); let str = '2016-01-02'; let result = str.match(re); // string.proto
type.match calls re[@@match]. console.log(result.group(1)); // 2016 console.log(result.group(2)); // 01 console.log(result.group(3)); // 02 specifications specification ecmascript (ecma-262)the definition of 'regexp.proto
type[@@match]' in that specification. ...
RegExp.prototype[@@matchAll]() - JavaScript
r 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 regexp[symbol.matchall](str) parameters str a string that is a target of the match. return value an iterator. description this method is called internally in string.proto
type.matchall(). for example, the following two examples return same result. 'abc'.matchall(/a/); /a/[symbol.matchall]('abc'); this method exists for customizing the behavior of matchall() in regexp subclasses. examples direct call this method can be used in almost the same way as string.proto
type.matchall(), except for the different value of this and the different order of arguments. let re = ...
...r = '2016-01-02'; let result = re[symbol.matchall](str); console.log(array.from(result, x => x[0])); // ["2016", "01", "02"] using @@matchall in subclasses subclasses of regexp can override the [@@matchall]() method to modify the default behavior. ...
... ...
RegExp.prototype.flags - JavaScript
the flags property returns a string consisting of the flags of the current regular expression 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. ...
...se clone https://github.com/mdn/interactive-examples and send us a pull request. property attributes of regexp.proto
type.flags writable no enumerable no configurable yes description flags in the flags property are sorted alphabetically (from left to right, e.g. "gimsuy"). ...
... a pull request. property attributes of regexp.proto
type.flags writable no enumerable no configurable yes description flags in the flags property are sorted alphabetically (from left to right, e.g. "gimsuy"). polyfill if (regexp.proto
type.flags === undefined) { object.defineproperty(regexp.proto
type, 'flags', { configurable: true, get: function() { return this.tostring().match(/[gimsuy]*$/)[0]; } }); } examples using flags /foo/ig.flags; // "gi" /bar/myu.flags; // "muy" specifications specification ecmascript (ecma-262)the definition of 'regexp.proto
type.flags' in that specification. ...
String.prototype.repeat() - JavaScript
tring containing the specified number of copies of the given string. exceptions rangeerror: repeat count must be non-negative. rangeerror: repeat count must be less than infinity and not overflow maximum string size. polyfill this method has been added to the ecmascript 2015 specification and may not be available in all javascript implementations yet. however, you can polyfill string.proto
type.repeat() with the following snippet: if (!string.proto
type.repeat) { string.proto
type.repeat = function(count) { 'use strict'; if (this == null) throw new
typeerror('can\'t convert ' + this + ' to object'); var str = '' + this; // to convert string to integer. count = +count; // check nan if (count != count) count = 0; if (count < 0) throw ne...
... ...
... ...
String.prototype.startsWith() - JavaScript
alue true if the given characters are found at the beginning of the string; otherwise, false. description this method lets you determine whether or not a string begins with another string. this method is case-sensitive. polyfill this method has been added to the ecmascript 2015 specification and may not be available in all javascript implementations yet. ...
... the string; otherwise, false. description this method lets you determine whether or not a string begins with another string. this method is case-sensitive. polyfill this method has been added to the ecmascript 2015 specification and may not be available in all javascript implementations yet. however, you can polyfill string.proto
type.startswith() with the following snippet: if (!string.proto
type.startswith) { object.defineproperty(string.proto
type, 'startswith', { value: function(search, rawpos) { var pos = rawpos > 0 ? rawpos|0 : 0; return this.substring(pos, pos + search.length) === search; } }); } a more robust (fully es2015 specification compliant), but less performant and compact, polyfill is available on github by mathias bynens. ...
...on github by mathias bynens. examples using startswith() //startswith let str = 'to be, or not to be, that is the question.' console.log(str.startswith('to be')) // true console.log(str.startswith('not to be')) // false console.log(str.startswith('not to be', 10)) // true specifications specification ecmascript (ecma-262)the definition of 'string.proto
type.startswith' in that specification. ...
String.prototype.substr() - JavaScript
support negative values for the start index. ...
...ng} */ string.proto
type.substr = function(substr) { return function(start, length) { // call the original method return substr.call(this, // did we get a negative start, calculate how much it is from the beginning of the string // adjust the start parameter for negative value start < 0 ? ...
... ...
String.prototype.toLocaleLowerCase() - JavaScript
s. if multiple locales are given in an array, the best available locale is used. the default locale is the host environment’s current locale. return value a new string representing the calling string converted to lower case, according to any locale-specific case mappings. exceptions a rangeerror ("invalid language tag: xx_yy") is thrown if a locale argument isn't a valid language tag. a
typeerror ("invalid element in locales argument") is thrown if an array element isn't of
type string. description the tolocalelowercase() method returns the value of the string converted to lower case according to any locale-specific case mappings. tolocalelowercase() does not affect the value of the string itself. in most cases, this will produce the same result as tolowercase(), but for some loca...
... ...
... ...
String.prototype.toLocaleUpperCase() - JavaScript
s. if multiple locales are given in an array, the best available locale is used. the default locale is the host environment’s current locale. return value a new string representing the calling string converted to upper case, according to any locale-specific case mappings. exceptions a rangeerror ("invalid language tag: xx_yy") is thrown if a locale argument isn't a valid language tag. a
typeerror ("invalid element in locales argument") is thrown if an array element isn't of
type string. description the tolocaleuppercase() method returns the value of the string converted to upper case according to any locale-specific case mappings. tolocaleuppercase() does not affect the value of the string itself. in most cases, this will produce the same result as touppercase(), but for some loca...
... ...
... ...
String.prototype.trimEnd() - JavaScript
ull request. syntax str.trimend(); str.trimright(); return value a new string representing the calling string stripped of whitespace from its (right) end. description the trimend() / trimright() methods return the string stripped of whitespace from its right end. trimend() or trimright() do not affect the value of the string itself. ...
... the trimend() / trimright() methods return the string stripped of whitespace from its right end. trimend() or trimright() do not affect the value of the string itself. aliasing for consistency with functions like string.proto
type.padend the standard method name is trimend. however, for web compatibility reasons, trimright remains as an alias to trimend. ...
... ...
TypedArray.name - JavaScript
the
typedarray.name property represents a string value of the
typed array constructor 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. property attributes of
typedarray.name writable no enumerable no configurable no description
typedarray objects differ from each other in the number of bytes per element and in the way the bytes are interpreted. the name property describes of what data
type the array consists. the first part can be int for "integer" or uint for an "unsigned integer", also float for "floating point" ...
...please see uint8clampedarray for more details. ...
... ...
button.type - Archive of obsolete content
« xul reference home
type type: one of the values below the
type of button. if this attribute is not present, a normal button is created. leave the attribute out for a normal button. checkbox this
type of button can be in two states. the user can click the button to switch between the states. this is not the same as a checkbox because it looks like a button. menu set the
type attribute to the value menu to create a button with a menu popup. place a menupopup element inside the button in this case. the user may click anywhere on the button to open and close the menu. menu-button you can also use the value menu-button to create a button with a menu. ...
...n the states. this is not the same as a checkbox because it looks like a button. menu set the
type attribute to the value menu to create a button with a menu popup. place a menupopup element inside the button in this case. the user may click anywhere on the button to open and close the menu. menu-button you can also use the value menu-button to create a button with a menu. unlike the menu
type, this
type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. panel similar to the menu
type, this opens a popup. place a panel element inside the button. panel elements are popups that support any
type of content. radio the button acts like a radio button. only one button in the group can be on a once...
textbox.type - Archive of obsolete content
« xul reference
type type: string set to the value autocomplete to have an autocomplete textbox. ...
... « xul reference
type type: string set to the value autocomplete to have an autocomplete textbox. ...
type - Archive of obsolete content
« xul reference
type type: string gets and sets the value of the
type attribute. ...
... « xul reference
type type: string gets and sets the value of the
type attribute. ...
Date.prototype.toLocaleFormat() - Archive of obsolete content
the non-standard tolocaleformat() method converts a date to a string using the specified formatting. intl.datetimeformat is an alternative to format dates in a standards-compliant way. see also the newer version of date.proto
type.tolocaledatestring(). this feature has been removed and will no longer work in firefox 58+. see warning: date.proto
type.tolocaleformat is deprecated for more information and migration help. syntax dateobj.tolocaleformat(formatstring) parameters formatstring a format string in the same format expected by the strftime() function in c. return value a string representing the given date using the specified formatting. description the tolocaleformat() method provides greater software control over the formatting of the generated date and/or time. name...
...s method. examples using tolocaleformat() var today = new date(); var date = today.tolocaleformat('%a, %b %e, %y'); in this example, tolocaleformat() returns a string such as "wednesday, october 3, 2007". note that the format string in this example is not properly localized, which will result in the problems described above. polyfill when using the datejs library you can polyfill date.proto
type.tolocaledatestring() like this: if (!date.proto
type.tolocaleformat) { (function() { date.proto
type.tolocaleformat = function(formatstring) { return this.format(formatstring); }; }()); } specifications not part of any standard. ...
Prototype-based programming - MDN Web Docs Glossary: Definitions of Web-related terms
proto
type-based programming is a style of object-oriented programming in which classes are not explicitly defined, but rather derived by adding properties and methods to an instance of another class or, less frequently, adding them to an empty object. in simple words: this
type of style allows the creation of an object without first defining its class. ...
... proto
type-based programming is a style of object-oriented programming in which classes are not explicitly defined, but rather derived by adding properties and methods to an instance of another class or, less frequently, adding them to an empty object. in simple words: this
type of style allows the creation of an object without first defining its class. ...
Prototype - MDN Web Docs Glossary: Definitions of Web-related terms
a proto
type is a model that displays the appearance and behavior of an application or product early in the development lifecycle. ...
... a proto
type is a model that displays the appearance and behavior of an application or product early in the development lifecycle. ...
Type - MDN Web Docs Glossary: Definitions of Web-related terms
type is a characteristic of a value affecting what kind of data it can store, and the structure that the data will adhere to. for example, a boolean data
type can hold only a true or false value at any given time, whereas a string has the ability to hold a string or a sequence of characters, a number can hold numerical values of any kind, and so on. a value's data
type also affects the operations that are valid on that value. for example, a value of
type number can be multiplied by another number, but not by a string - even if that string contains only a number, such as the string "2".
types also provides us with useful knowledge about the comparison between different values. ...
...cal values of any kind, and so on. a value's data
type also affects the operations that are valid on that value. for example, a value of
type number can be multiplied by another number, but not by a string - even if that string contains only a number, such as the string "2".
types also provides us with useful knowledge about the comparison between different values. comparison between structured
types is not always an easy assumption, as even if the previous data structure is the same, there could be inherited structures inside of the proto
type chain. if you are unsure of the
type of a value, you can use the
typeof operator. ...
How can we design for all types of users? - Learn web development
o a square). rem-based sizes: rem this unit is proportional to the root element's font size and is expressed as portions of 1, like em. suppose we wanted a base font size of 16px and an h1 (main heading) at the equivalent of 32px, yet if within the h1 we find a span with the subheading class, it too must be rendered at the default font size (usually 16px). ...
...uble going from one line to the next if the lines were too long. the solution? columns. of course the problem doesn't go away when we switch to the web. the reader's eyes act like a shuttle going from line to line. to make it easier on people's eyes, limit line width to around 60 or 70 characters. to achieve this, you can specify a size for your text's container. let's consider this html: <!doc
type html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </head> <body> <div class="container"> <h1>this is our main heading <span class="subheading">this is our subheading</span> </h1> <p>[lengthly text that spans many lines]</p> </div> </body> </html> we have a div with class container. we can style the div either to set its width ...
AddonType
add-on
types hold useful information about each
type of add-on that may be installed. they are mostly used to help the ui know how to display the different
types of add-on. properties attribute
type description id string the unique id for the
type. name string the localized name for the
type. uipriority integer a number used to determine the order of
types displayed in the user interface. the lower the number the higher in the list the
type will appear. built-in values: value category 2000 locale 4000 extension 5000 theme 6000 plugin vie...
...ne the order of
types displayed in the user interface. the lower the number the higher in the list the
type will appear. built-in values: value category 2000 locale 4000 extension 5000 theme 6000 plugin view
type integer the
type of ui to use to display this
type of add-on in the ui. if undefined the
type will not appear in the ui. flags integer additional behavior flags for the
type. ...
PRFileType
pr_file_directory the information in the structure describes a directory. pr_file_other the information in the structure describes some other kind of file system object. ...
... pr_file_directory the information in the structure describes a directory. pr_file_other the information in the structure describes some other kind of file system object. ...
PRThreadType
description threads can be either user threads or system threads. nspr allows the client to synchronize the termination of all user threads and ignores those created as system threads. this arrangement implies that a system thread should not have volatile data that needs to be safely stored away. ...
... description threads can be either user threads or system threads. nspr allows the client to synchronize the termination of all user threads and ignores those created as system threads. this arrangement implies that a system thread should not have volatile data that needs to be safely stored away. ...
JSExnType
this article covers features introduced in spidermonkey 17 possible exception
types. value proto
type in javascript jsexn_none an unthrowable error. (lower bound) jsexn_err error jsexn_internalerr internalerror jsexn_evalerr evalerror jsexn_rangeerr rangeerror jsexn_referenceerr referenceerror jsexn_syntaxerr syntaxerror jsexn_
typeerr
typeerror jsexn_urierr urierror jsexn_limit (upper bound) description these
types are part of a jserrorformatstring structure. they define which error to throw in case of a runtime error. jsexn_none marks an unthrowable error. ...
... jsexn_referenceerr referenceerror jsexn_syntaxerr syntaxerror jsexn_
typeerr
typeerror jsexn_urierr urierror jsexn_limit (upper bound) description these
types are part of a jserrorformatstring structure. they define which error to throw in case of a runtime error. jsexn_none marks an unthrowable error. ...
JSType
the values of the js
type enumeration represent the
types of javascript values. value description js
type_void the undefined value. js
type_object javascript objects. js
type_function functions. js
type_string strings. js
type_number numbers. js
type_boolean boolean values, true and false. js
type_null the null value. js
type_symbol symbols. ...
... value description js
type_void the undefined value. js
type_object javascript objects. js
type_function functions. js
type_string strings. js
type_number numbers. js
type_boolean boolean values, true and false. js
type_null the null value. js
type_symbol symbols. ...
JS_GetArrayPrototype
this article covers features introduced in spidermonkey 24 retrieves the original, canonical array.proto
type for an object's global object. syntax jsobject * js_getarrayproto
type(jscontext *cx, js::handleobject forobj); 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. forobj js::handleobject an object from the global whose array.proto
type is being retrieved. description js_getarrayproto
type() retrieves the original array.proto
type of a specified object, obj. if an error occurs, it returns null. note: this expression might have different values over time if the global array pro...
...rom the global whose array.proto
type is being retrieved. description js_getarrayproto
type() retrieves the original array.proto
type of a specified object, obj. if an error occurs, it returns null. note: this expression might have different values over time if the global array property is modified, but this method returns only the original value. ...
JS_GetClassPrototype
get the builtin class proto
type object. syntax bool js_getclassproto
type(jscontext *cx, jsprotokey 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 jsprotokey the key of the proto
type. objp js::mutablehandle<jsobject*> out parameter. if successful, receive the class proto
type object. description js_getclassproto
type gets the builtin class costructor for the specified proto
type key. if successful, js_getclassproto
type stores the class proto
type object to *objp and returns true, otherwise returns false and the value of *objp is undefined. see also mxr id...
...lt;jsobject*> out parameter. if successful, receive the class proto
type object. description js_getclassproto
type gets the builtin class costructor for the specified proto
type key. if successful, js_getclassproto
type stores the class proto
type object to *objp and returns true, otherwise returns false and the value of *objp is undefined. ...
JS_GetFunctionPrototype
this article covers features introduced in spidermonkey 17 retrieves the original, canonical function.proto
type for an object's global object. syntax jsobject * js_getfunctionproto
type(jscontext *cx, js::handleobject forobj); 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. forobj js::handleobject an object from the global whose function.proto
type is being retrieved. description js_getfunctionproto
type() retrieves the original function.proto
type of a specified object, obj. if an error occurs, it returns null. note: this expression might have different values over ti...
...hose function.proto
type is being retrieved. description js_getfunctionproto
type() retrieves the original function.proto
type of a specified object, obj. if an error occurs, it returns null. note: this expression might have different values over time if the global function property is modified, but this method returns only the original value. ...
JS_GetObjectPrototype
this article covers features introduced in spidermonkey 17 retrieves the original, canonical object.proto
type for an object's global object. syntax jsobject * js_getobjectproto
type(jscontext *cx, js::handleobject forobj); 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. forobj js::handleobject an object from the global whose object.proto
type is being retrieved. description js_getobjectproto
type() retrieves the original object.proto
type of a specified object, obj. if an error occurs, it returns null. note: this expression might have different values over time if the global obje...
...he global whose object.proto
type is being retrieved. description js_getobjectproto
type() retrieves the original object.proto
type of a specified object, obj. if an error occurs, it returns null. note: this expression might have different values over time if the global object property is modified, but this method returns only the original value. ...
nsMsgNavigationType
the nsmsgnavigation
type interface contains constants used for message navigation in thunderbird. for example to move forward a message, you would call: // assuming gdbview is a global nsimsgdbview var resultid = new object(); var resultindex = new object(); var threadindex = new object(); gdbview.viewnavigate(components.interfaces.nsmsgnavigation
type.nextmessage, resultid, resultindex, threadindex, true); the nsmsgnavigation
type interface is defined as a global variable in thunderbird: var nsmsgviewcommand
type = components.interfaces.nsmsgviewcommand
type; mailnews/base/public/nsimsgdbview.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) constants name value description firstmessage 1 go to the first message in th...
...s name value description firstmessage 1 go to the first message in the view. nextmessage 2 go to the next message in the view. will wrap around if the wrap flag is set to true. previousmessage 3 go to the previous message in the view. will wrap around if the wrap flag is set to true. lastmessage 4 go to the last message in the view. togglethreadkilled 5 must match nsmsgviewcommand
type togglethreadkilled. firstunreadmessage 6 go to the first unread message in the view. nextunreadmessage 7 go to the next unread message in the view. will wrap around if the wrap flag is set to true. previousunreadmessage 8 go to the previous unread message in the view. will wrap around if the wrap flag is set to true. lastunreadmessage 9 go to the last unread message in the view. nex...
nsMsgViewFlagsType
the nsmsgviewflags
type interface contains constants used for view flags in thunderbird. this interface isn't ever implemented. it is only used to store constants. ...
... the nsmsgviewflags
type interface contains constants used for view flags in thunderbird. this interface isn't ever implemented. it is only used to store constants. ...
nsMsgViewType
the nsmsgview
type interface contains constants used for views in thunderbird. this interface isn't ever implemented. it is only used to store constants. ...
... the nsmsgview
type interface contains constants used for views in thunderbird. this interface isn't ever implemented. it is only used to store constants. ...
CSSPrimitiveValue.primitiveType - Web APIs
possible values are: constant description css_attr the value is an attr() function. the value can be obtained by using the getstringvalue() method. css_cm the value is a <length> in centimeters. the value can be obtained by using the getfloatvalue() method. css_counter the value is a counter or counters function. the value can be obtained by using the getcountervalue() method. css_deg the value is an <angle> in degrees. the value can be obtained by using the getfloatvalue() method. ...
...stringvalue() method. css_unknown the value is not a recognized css2 value. the value can only be obtained by using the csstext attribute. css_uri the value is a <uri>. the value can be obtained by using the getstringvalue() method. example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.primitive
type); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.primitive
type' in that specification. obsolete initial definition ...
CSSValue.cssValueType - Web APIs
possible values are: constant description css_custom the value is a custom value. css_inherit the value is inherited and the csstext contains "inherit". css_primitive_value the value is a primitive value and an instance of the cssprimitivevalue interface can be obtained by using binding-specific casting methods on this instance of the cssvalue interface. ...
...he cssvalue interface. css_value_list the value is a cssvalue list and an instance of the cssvaluelist interface can be obtained by using binding-specific casting methods on this instance of the cssvalue interface. example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.cssvalue
type); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.cssvalue
type' in that specification. obsolete initial definition ...
ClipboardItem.getType() - Web APIs
the get
type() method of the clipboarditem interface returns a promise that resolves with a blob of the requested mime
type or an error if the mime
type is not found. syntax var blob = clipboarditem.get
type(
type); parameters
type a valid mime
type. return value a promise that resolves with a blob object. exceptions domexception the
type does not match a known mime
type.
typeerror no parameter is specified or the
type is not that of the clipboarditem. examples in the following example, we're returning all items on the clipboard via the clipboard.read() method. then utilizing the clipboarditem.
types property to set the get
type() argument and return the corresponding blob object. async function getclipboardcontents() { try { const clipboarditems = await navig...
...n the following example, we're returning all items on the clipboard via the clipboard.read() method. then utilizing the clipboarditem.
types property to set the get
type() argument and return the corresponding blob object. async function getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const
type of clipboarditem.
types) { const blob = await clipboarditem.get
type(
type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification. working draft initial definition. ...
ClipboardItem.types - Web APIs
the read-only
types property of the clipboarditem interface returns an array of mime
types available within the clipboarditem syntax var
types = clipboarditem.
types; value an array of available mime
types. examples in the below example, we're returning all items on the clipboard via the clipboard.read() method. then checking the
types property for available
types before utilizing the clipboarditem.get
type() method to return the blob object. if no clipboards contents is found for the specified
type, an error is returned. ...
...method. then checking the
types property for available
types before utilizing the clipboarditem.get
type() method to return the blob object. if no clipboards contents is found for the specified
type, an error is returned. async function getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const
type of clipboarditem.
types) { const blob = await clipboarditem.get
type(
type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification. working draft initial definition. ...
DataTransfer.mozTypesAt() - Web APIs
the datatransfer.moz
typesat() method returns a list of the format
types that are stored for an item at the specified index. if the index is not in the range from 0 to the number of items minus one, an empty string list is returned. note: this method is gecko-specific. syntax nsivariant datatransfer.moz
typesat(index); arguments index a unsigned long that is the index of the data for which to retrieve the
types. return value nsivariant a list of data formats (which are strings). if the index is not in the range from 0 to the number of items minus one, an empty string list is returned. example this example shows the use of the moz
typesat() method in a drop event handler. function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; output("i...
...index is not in the range from 0 to the number of items minus one, an empty string list is returned. example this example shows the use of the moz
typesat() method in a drop event handler. function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; output("items: " + count + "\n"); for (var i = 0; i < count; i++) { output(" item " + i + ":\n"); var
types = dt.moz
typesat(i); for (var t = 0; t <
types.length; t++) { output(" " +
types[t] + ": "); try { var data = dt.mozgetdataat(
types[t], i); output("(" + (
typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex); } } } } specifications this method is not defined in any web standard. ...
Document.doctype - Web APIs
returns the document
type declaration (dtd) associated with current document. the returned object implements the document
type interface. use domimplementation.createdocument
type() to create a document
type. syntax doc
type = document.doc
type; doc
type is a read-only property. example var doc
typeobj = document.doc
type; console.log( "doc
typeobj.name: " + doc
typeobj.name + "\n" + "doc
typeobj.internalsubset: " + doc
typeobj.internalsubset + "\n" + "doc
typeobj.publicid: " + doc
typeobj.publicid + "\n" + "doc
typeobj.systemid: " + doc
typeobj.systemid ); notes the property returns null if there is no dtd associated with the current document. dom level 2 doesn't support editing the document
type declaration. specifications specificati...
...n" + "doc
typeobj.publicid: " + doc
typeobj.publicid + "\n" + "doc
typeobj.systemid: " + doc
typeobj.systemid ); notes the property returns null if there is no dtd associated with the current document. dom level 2 doesn't support editing the document
type declaration. specifications specification status comment domthe definition of 'document: doc
type' in that specification. living standard ...
InputEvent.inputType - Web APIs
the input
type read-only property of the inputevent interface returns the
type of change made to editible content. possible changes include for example inserting, deleting, and formatting text. syntax var astring = inputevent.input
type; value a domstring containing the
type of input that was made. there are many possible values, such as inserttext, deletecontentbackward, insertfrompaste, and formatbold. for a complete list of the available input
types, see the attributes section of the input events level 1 spec. examples this example logs the input
type for input events on an editable <div>. html <p id="log">input
type: </p> <div contenteditable="true" style="margin: 20px;padding: 20px;border:2px dashed red;"> <p>some sample text. try inserting line breaks, or deleting text in differe...
...e sample text. try inserting line breaks, or deleting text in different ways, or pasting different content in.</p> <hr> <ul> <li>a sample</li> <li>bulleted</li> <li>list.</li> </ul> <p>another paragraph.</p> </div> javascript const log = document.getelementbyid('log'); const editable = document.queryselector('div[contenteditable]'); editable.addeventlistener('input', loginput
type); function loginput
type(event) { log.textcontent = `input
type: ${event.input
type}`; } result try editing the text inside the <div> and see what happens. note: see also masayuki nakano's inputevent test suite for a more detailed example. specifications specification status comment ui eventsthe definition of 'input
type' in that specification. working draft ...
MimeType - Web APIs
the mime
type interface provides contains information about a mime
type associated with a particular plugin. navigatorplugins.mime
types returns an array of this object. properties mime
type.
type returns the mime
type of the associated plugin. mime
type.description returns a description of the associated plugin or an empty string if there is none. mime
type.suffixes a string containing valid file extensions for the data displayed by the plugin, or an empty string if an extension is not valid for the particular module. for example, a browser's content decryption module may appear in the plugin list but support more file extensions than can be anticipated. it might therefore return an empty string. ...
... or an empty string if there is none. mime
type.suffixes a string containing valid file extensions for the data displayed by the plugin, or an empty string if an extension is not valid for the particular module. for example, a browser's content decryption module may appear in the plugin list but support more file extensions than can be anticipated. it might therefore return an empty string. mime
type.enabledplugin returns an instance of plugin containing information about the plugin itself. specifications specification status comment html living standardthe definition of 'mime
type' in that specification. living standard initial definition. ...
MimeTypeArray - Web APIs
the mime
typearray interface returns an array of mime
type instances, each of which contains information about a supported browser plugins. this object is returned by navigatorplugins.mime
types. properties mime
typearray.length the number of items in the array. methods mime
typearray.item() returns the mime
type object with the specified index. mime
typearray.nameditem() returns the mime
type object with the specified name. example the following example tests whether a plugin is available for the application/pdf mime
type and if so, which plugin that is. var mime
types = navigator.mime
type; var flashplugin = mime
types['video/x-flv']; if (
typeof flashplugin === "undefined") { var vid = document.createelement('video'); // use vid.canplay
type() to test for a supported mime
type. }...
... living standard initial definition. ...
NDEFRecord.recordType - Web APIs
the record
type property ofthe ndefrecord interface is usvstring containing the ndef record
type. syntax ndefrecord.record
type value a usvstring which can be one of the following: "empty" represents a empty ndef record. "text" represents a text ndef record. "url" represents an uri ndef record. "smart-poster" represents a "smart poster" ndef record. "absolute-url" represents an absolute url ndef record. "mime" represents a mime
type ndef record. "unknown" represents an unknown ndef record. local
type name represents a local
type name, frequently used to specify ndef record embedded within another record. external
type name represents a custom record
type name that can be creted by organizations themselves for custom needs. specifications specification ...
... ndef record. "unknown" represents an unknown ndef record. local
type name represents a local
type name, frequently used to specify ndef record embedded within another record. external
type name represents a custom record
type name that can be creted by organizations themselves for custom needs. specifications specification status comment web nfc, ndefrecord.record
type draft initial definition. ...
NodeList.prototype.forEach() - Web APIs
on(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code results in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, mythisarg [object htmlspanelement], 2, mythisarg polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.nodelist && !nodelist.proto
type.foreach) { nodelist.proto
type.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } or if (window.nodelist && !nodelist.proto
type.foreach) { nodelist.proto
type.foreach = array.proto
type.foreach; } the above behavior is how many browsers actuall...
... specifications specification status comment web idlthe definition of 'foreach' in that specification. candidate recommendation defines foreach on iterable declarations browser compatibility the compatibility table on this page is generated from structured data. ...
PerformanceNavigation.type - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancenavigation.
type read-only property returns an unsigned short containing a constant describing how the navigation to this page was done. possible values are: value constant name meaning 0
type_navigate the page was accessed by following a link, a bookmark, a form submission, a script, or typing the url in the address bar. 1
type_reload the page was accessed by clicking the reload button or via the location.reload() method. 2
type_back_forward the page was accessed by navigating into the history. 255
type_reserved any other way. sy...
...gate the page was accessed by following a link, a bookmark, a form submission, a script, or typing the url in the address bar. 1
type_reload the page was accessed by clicking the reload button or via the location.reload() method. 2
type_back_forward the page was accessed by navigating into the history. 255
type_reserved any other way. syntax
type = performancenavigation.
type; specifications specification status comment navigation timingthe definition of 'performancenavigation.
type' in that specification. recommendation initial definition. ...
RTCIceCandidateType - Web APIs
host the candidate is a host candidate, whose ip address as specified in the rtcicecandidate.ip property is in fact the true address of the remote peer. srflx the candidate is a server reflexive candidate; the ip indicates an intermediary address assigned by the stun server to represent the candidate's peer anonymously. ...
...peer anonymously. prflx the candidate is a peer reflexive candidate; the ip is an intermediary address assigned by the stun server to represent the candidate's peer anonymously. relay the candidate is a relay candidate, obtained from a turn server. the relay candidate's ip address is an address the turn server uses to forward the media between the two peers. usage notes the rtcicecandidate
type enumeration is used by the
type property of rtcicecandidate objects, as well as when reporting statistics on candidates using rtcicecandidatestats.candidate
type. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate
type' in that specification. candidate recommendation initial definition. ...
RTCIceCredentialType - Web APIs
values oauth the rtciceserver requires the use of oauth 2.0 to authenticate in order to use the ice server described. this process is detailed in rfc 7635. this property was formerly called token. password the rtciceserver requires a username and password to authenticate prior to using the described ice server. obsolete values the following values are no longer part of the webrtc specification, but were in the past. token authenticating with the ice server requires the use of an oauth 2.0 token as defined in rfc 7635. this value has been renamed to oauth. ...
... the following values are no longer part of the webrtc specification, but were in the past. token authenticating with the ice server requires the use of an oauth 2.0 token as defined in rfc 7635. this value has been renamed to oauth. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecredential
type' in that specification. candidate recommendation initial specification. ...
Selection.type - Web APIs
the
type read-only property of the selection interface returns a domstring describing the
type of the current selection. syntax value = sel.
type value a domstring describing the
type of the current selection. possible values are: none: no selection has currently been made. caret: the selection is collapsed (i.e. the caret is placed on some text, but no range has been selected). range: a range has been selected. example in this example, the event handler will fire each time a new selection is made. console.log(selection.
type) will return caret or range depending on whether the caret is placed at a single point in the text, or a range has been selected. var selection; document.onselectionchange = function() { console.log('new selection made'); selection = document.g...
...le in this example, the event handler will fire each time a new selection is made. console.log(selection.
type) will return caret or range depending on whether the caret is placed at a single point in the text, or a range has been selected. var selection; document.onselectionchange = function() { console.log('new selection made'); selection = document.getselection(); console.log(selection.
type); }; specifications specification status comment selection apithe definition of 'selection.
type' in that specification. working draft current ...
SourceBuffer.changeType() - Web APIs
the change
type() method of the sourcebuffer interface sets the mime
type that future calls to appendbuffer() should expect the new media data to conform to. this makes it possible to change codecs or container
type mid-stream. one scenario in which this is helpful is to support adapting the media source to changing bandwidth availability, by transitioning from one codec to another as resource constraints change. syntax sourcebuffer.change
type(
type); parameters
type a domstring specifying the mime
type that future buffers will conform to. return value undefined. exceptions
typeerror the specified string is empty, rather than indicating a valid mime
type. invalidstateerror the sourcebuffer is not a member of the parent media source's sourcebuffers list, or the buffe...
...onform to. return value undefined. exceptions
typeerror the specified string is empty, rather than indicating a valid mime
type. invalidstateerror the sourcebuffer is not a member of the parent media source's sourcebuffers list, or the buffer's updating property indicates that a previously queued appendbuffer() or remove() is still being processed. notsupportederror the specified mime
type is not supported, or is not supported with the
types of sourcebuffer objects present in the mediasource.sourcebuffers list. usage notes if the parent mediasource is in its "ended" readystate, calling change
type() will transition the media source to the "open" readystate and fire a simple event named sourceopen at the parent media source. ...
TextEncoder.prototype.encode() - Web APIs
syntax b1 = encoder.encode(string); parameters string is a usvstring containing the text to encode. return value a uint8array object. ...
... living standard initial definition. ...
WakeLockSentinel.type - Web APIs
the read-only
type property of the wakelocksentinel interface returns a string representation of the currently acquired wakelocksentinel
type. syntax var
type = wakelocksentinel.
type; value a string representation of the currently acquired wake lock
type.
type read only return values are: 'screen': a screen wake lock. prevents devices from dimming or locking the screen. examples this example shows an asynchronous function that acquires a wakelocksentinel, then logs the
type to the console. ...
...red wake lock
type.
type read only return values are: 'screen': a screen wake lock. prevents devices from dimming or locking the screen. examples this example shows an asynchronous function that acquires a wakelocksentinel, then logs the
type to the console. const requestwakelock = async () => { wakelock = await navigator.wakelock.request('screen'); console.log(wakelock.
type); // logs 'screen' }; requestwakelock(); specifications specification status comment screen wake lock apithe definition of 'wakelock
type' in that specification. unknown initial definition. ...
:only-of-type - CSS: Cascading Style Sheets
the :only-of-
type css pseudo-class represents an element that has no siblings of the same
type. /* selects each <p>, but only if it is the */ /* only <p> element inside its parent */ p:only-of-
type { background-color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. syntax :only-of-
type examples styling elements with no siblings of the same
type html <main> <div>i am `div` #1.</div> <p>i am the only `p` among my siblings.</p> <div>i am `div` #2.</div> <div>i am `div` #3. ...
...selectors level 4, this is no longer required. syntax :only-of-
type examples styling elements with no siblings of the same
type html <main> <div>i am `div` #1.</div> <p>i am the only `p` among my siblings.</p> <div>i am `div` #2.</div> <div>i am `div` #3. <i>i am the only `i` child.</i> <em>i am `em` #1.</em> <em>i am `em` #2.</em> </div> </main> css main :only-of-
type { color: red; } result specifications specification status comment selectors level 4the definition of ':only-of-
type' in that specification. working draft matching elements are not required to have a parent. selectors level 3the definition of ':only-of-
type' in that specification. recommendation initial definition. ...
Type selectors - CSS: Cascading Style Sheets
the css
type selector matches elements by node name. in other words, it selects all elements of the given
type within a document. /* all <a> elements. */ a { color: red; } syntax element { style properties } examples css span { background-color: skyblue; } html <span>here's a span with some text.</span> <p>here's a p with some text.</p> <span>here's a span with more text.</span> result specifications specification status comment selectors level 4the definition of '
type (tag name) selector' in that specification. working draft no changes selectors level 3the definition of '
type selectors' in that specification. ...
... a span with more text.</span> result specifications specification status comment selectors level 4the definition of '
type (tag name) selector' in that specification. working draft no changes selectors level 3the definition of '
type selectors' in that specification. recommendation no changes css level 2 (revision 1)the definition of '
type selectors' in that specification. recommendation css level 1the definition of '
type selectors' in that specification. recommendation initial definition ...
TypeError: can't access property "x" of "y" - JavaScript
the javascript exception "can't access property" occurs when property access was operated on undefined or null values. message
typeerror: unable to get property {x} of undefined or null reference (edge)
typeerror: can't access property {x} of {y} (firefox)
typeerror: {y} is undefined, can't access property {x} of it (firefox)
typeerror: {y} is null, can't access property {x} of it (firefox) examples:
typeerror: x is undefined, can't access property "prop" of it
typeerror: x is null, can't access property "prop" of it
typeerror: can't access property "prop" of undefined
typeerror: can't access property "prop" of null error
type typeerror. what went wrong? the property access was operated on undefined or null value. examples invalid cases // undefined and null cases on which the subs...
...
typeerror: x is null, can't access property "prop" of it
typeerror: can't access property "prop" of undefined
typeerror: can't access property "prop" of null error
type typeerror. what went wrong? the property access was operated on undefined or null value. examples invalid cases // undefined and null cases on which the substring method won't work var foo = undefined; foo.substring(1); //
typeerror: x is undefined, can't access property "substring" of it var foo = null; foo.substring(1); //
typeerror: x is null, can't access property "substring" of it fixing the issue to fix null pointer to undefined or null values, you can use the
typeof operator, for example. if (
typeof foo !== 'undefined') { // now we know that foo is defined, we are good to go. } ...
TypeError: can't assign to property "x" on "y": not an object - JavaScript
the javascript strict mode exception "can't assign to property" occurs when attempting to create a property on primitive value such as a symbol, a string, a number or a boolean. primitive values cannot hold any property. message
typeerror: can't assign to property "x" on {y}: not an object (firefox)
typeerror: cannot create property 'x' on {y} (chrome) error
type typeerror. what went wrong? in strict_mode, a
typeerror is raised when attempting to create a property on primitive value such as a symbol, a string, a number or a boolean. primitive values cannot hold any property. the problem might be that an unexpected value is flowing at an unexpected place, or that an object variant of a string or a number is expected. examples invalid cases 'use strict'; var foo = "my string"; // th...
...ty on primitive value such as a symbol, a string, a number or a boolean. primitive values cannot hold any property. the problem might be that an unexpected value is flowing at an unexpected place, or that an object variant of a string or a number is expected. examples invalid cases 'use strict'; var foo = "my string"; // the following line does nothing if not in strict mode. foo.bar = {}; //
typeerror: can't assign to property "bar" on "my string": not an object fixing the issue either fix the code to prevent the primitive from being used in such places, or fix the issue is to create the object equivalent object. 'use strict'; var foo = new string("my string"); foo.bar = {}; ...
Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
the javascript warning "date.proto
type.tolocaleformat is deprecated; consider using intl.datetimeformat instead" occurs when the non-standard date.proto
type.tolocaleformat method is used. message warning: date.proto
type.tolocaleformat is deprecated; consider using intl.datetimeformat instead error
type warning. javascript execution won't be halted. what went wrong? the non-standard date.proto
type.tolocaleformat method is deprecated and shouldn't be used anymore. it uses a format string in the same format expected by the strftime() function in c. the function is no longer available in firefox 58+. examples deprecated syntax the date.proto
type.tolocaleformat method is deprecated and will be removed (no cross-browser support, available in firefox only). var today = new date(); var dat...
...ay.tolocaleformat('%a, %e. %b %y'); console.log(date); // in german locale // "freitag, 10. märz 2017" alternative standard syntax using the ecmascript intl api the ecma-402 (ecmascript intl api) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in chrome 24+, firefox 29+, ie11+, safari10+). you can now either use the date.proto
type.tolocaledatestring method if you just want to format one date. var today = new date(); var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; var date = today.tolocaledatestring('de-de', options); console.log(date); // "freitag, 10. märz 2017" or, you can make use of the intl.datetimeformat object, which allows you to cache an object with most of t...
TypeError: "x" has no properties - JavaScript
the javascript exception "null (or undefined) has no properties" occurs when you attempt to access properties of null and undefined. they don't have any. message
typeerror: unable to get property {x} of undefined or null reference (edge)
typeerror: null has no properties (firefox)
typeerror: undefined has no properties (firefox) error
type typeerror. ...
...erties of null and undefined. they don't have any. message
typeerror: unable to get property {x} of undefined or null reference (edge)
typeerror: null has no properties (firefox)
typeerror: undefined has no properties (firefox) error
type typeerror. what went wrong? both, null and undefined, have no properties you could access. examples null and undefined have no properties null.foo; //
typeerror: null has no properties undefined.bar; //
typeerror: undefined has no properties ...
Array.prototype[@@iterator]() - JavaScript
li>"; } result alternative iteration var arr = ['a', 'b', 'c', 'd', 'e']; var earr = arr[symbol.iterator](); console.log(earr.next().value); // a console.log(earr.next().value); // b console.log(earr.next().value); // c console.log(earr.next().value); // d console.log(earr.next().value); // e use case for brace notation the use case for this syntax over using the dot notation (array.proto
type.values()) is in a case where you don't know what object is going to be ahead of time. if you have a function that takes an iterator and then iterate over the value, but don't know if that object is going to have a [iterable].proto
type.values method. this could be a built-in object like string object or a custom object. function logiterable(it) { if (!(symbol.iterator in object.getproto
typeof(it...
... ...
Array.prototype.concat() - JavaScript
f the original arrays are copied into the new array as follows: object references (and not the actual object): concat copies object references into the new array. both the original and new array refer to the same object. that is, if a referenced object is modified, the changes are visible to both the new and original arrays. this includes elements of array arguments that are also arrays. data
types such as strings, numbers and booleans (not string, number, and boolean objects): concat copies the values of strings and numbers into the new array. note: concatenating array(s)/value(s) will leave the originals untouched. furthermore, any operation on the new array (except operations on elements which are object references) will have no effect on the original arrays, and vice versa. exampl...
... ...
Array.prototype.flatMap() - JavaScript
e the current element being processed in the array. indexoptional the index of the current element being processed in the array. arrayoptional the array map was called upon. thisargoptional value to use as this when executing callback. return value a new array with each element being the result of the callback function and flattened to a depth of 1. description see array.proto
type.map() for a detailed description of the callback function. the flatmap method is identical to a map followed by a call to flat of depth 1. alternative reduce() and concat() var arr = [1, 2, 3, 4]; arr.flatmap(x => [x, x * 2]); // is equivalent to arr.reduce((acc, x) => acc.concat([x, x * 2]), []); // [1, 2, 2, 4, 3, 6, 4, 8] note, however, that this is inefficient and should be avoided for ...
... ...
Array.prototype.includes() - JavaScript
udes('c', -100) // true arr.includes('a', -2) // false includes() used as a generic method includes() method is intentionally generic. it does not require this value to be an array object, so it can be applied to other kinds of objects (e.g. array-like objects). the example below illustrates includes() method called on the function's arguments object. (function() { console.log(array.proto
type.includes.call(arguments, 'a')) // true console.log(array.proto
type.includes.call(arguments, 'd')) // false })('a','b','c') please do not add polyfills on reference articles. for more details and discussion, see https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 specifications specification ecmascript (ecma-262)th...
...')) // true console.log(array.proto
type.includes.call(arguments, 'd')) // false })('a','b','c') please do not add polyfills on reference articles. for more details and discussion, see https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 specifications specification ecmascript (ecma-262)the definition of 'array.proto
type.includes' in that specification. ...
Array.prototype.length - JavaScript
the value is an unsigned, 32-bit integer that is always numerically greater than the highest 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. description the value of the length property is an integer with a positive sign and a value less than 2 to the 32nd power (232). ...
.../ [ 1, 2 ] arr.length = 5; // set array length to 5 while currently 2. console.log(arr); // [ 1, 2, <3 empty items> ] arr.foreach(element => console.log(element)); // 1 // 2 as you can see, the length property does not necessarily indicate the number of defined values in the array. see also relationship between length and numerical properties. property attributes of array.proto
type.length writable yes enumerable no configurable no writable: if this attribute set to false, the value of the property cannot be changed. configurable: if this attribute set to false, any attempts to delete the property or change its attributes (writable, configurable, or enumerable) will fail. enumerable: if th...
Array.prototype.pop() - JavaScript
t element from an array and returns that value to the caller. pop is intentionally generic; this method can be called or applied to objects resembling arrays. objects which do not contain a length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner. if you call pop() on an empty array, it returns undefined. array.proto
type.shift() has similar behavior to pop, but applied to the first element in an array. examples removing the last element of an array the following code creates the myfish array containing four elements, then removes its last element. var myfish = ['angel', 'clown', 'mandarin', 'sturgeon']; var popped = myfish.pop(); console.log(myfish); // ['angel', 'clown', 'mandarin' ] console.log(popped); ...
...h); // ['angel', 'clown', 'mandarin' ] console.log(popped); // 'sturgeon' using apply( ) or call ( ) on array-like objects the following code creates the myfish array-like object containing four elements and a length parameter, then removes its last element and decrements the length parameter. var myfish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon', length: 4}; var popped = array.proto
type.pop.call(myfish); //same syntax for using apply( ) console.log(myfish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3} console.log(popped); // 'sturgeon' specifications specification ecmascript (ecma-262)the definition of 'array.proto
type.pop' in that specification. ...
Array.prototype.shift() - JavaScript
values at consecutive indexes down, then returns the removed value. if the length property is 0, undefined is returned. shift is intentionally generic; this method can be called or applied to objects resembling arrays. objects which do not contain a length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner. array.proto
type.pop() has similar behavior to shift, but applied to the last element in an array. examples removing an element from an array the following code displays the myfish array before and after removing its first element. it also displays the removed element: var myfish = ['angel', 'clown', 'mandarin', 'surgeon']; console.log('myfish before:', json.stringify(myfish)); // myfish before: ['angel', 'c...
... condition inside while loop. in the following example every iteration will remove the next element from an array, until it is empty: var names = ["andrew", "edward", "paul", "chris" ,"john"]; while( (i = names.shift()) !== undefined ) { console.log(i); } // andrew, edward, paul, chris, john specifications specification ecmascript (ecma-262)the definition of 'array.proto
type.shift' in that specification. ...
BigInt.prototype.toString() - JavaScript
l. an integer in the range 2 through 36 specifying the base to use for representing numeric values. return value a string representing the specified bigint object. exceptions rangeerror if tostring() is given a radix less than 2 or greater than 36, a rangeerror is thrown. description the bigint object overrides the tostring() method of the object object; it does not inherit object.proto
type.tostring(). for bigint objects, the tostring() method returns a string representation of the object in the specified radix. the tostring() method parses its first argument, and attempts to return a string representation in the specified radix (base). for radixes above 10, the letters of the alphabet indicate numerals greater than 9. for example, for hexadecimal numbers (base 16) a through f are ...
...s complement of the bigintobj. examples using tostring 17n.tostring(); // '17' 66n.tostring(2); // '1000010' 254n.tostring(16); // 'fe' -10n.tostring(2); // -1010' -0xffn.tostring(2); // '-11111111' negative-zero bigint there is no negative-zero bigint as there are no negative zeros in integers. -0.0 is an ieee floating-point concept that only appears in the javascript number
type. (-0n).tostring(); // '0' bigint(-0).tostring(); // '0' specifications specification ecmascript (ecma-262)the definition of 'bigint.proto
type.tostring()' in that specification. ...
Boolean.prototype.toString() - JavaScript
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. syntax bool.tostring() return value a string representing the specified boolean object. description the boolean object overrides the tostring method of the object object; it does not inherit object.proto
type.tostring(). for boolean objects, the tostring method returns a string representation of the object. javascript calls the tostring() method automatically when a boolean is to be represented as a text value or when a boolean is referred to in a string concatenation. for boolean objects and values, the built-in tostring() method returns the string "true" or "false" depending on the value of the bo...
...tion. for boolean objects and values, the built-in tostring() method returns the string "true" or "false" depending on the value of the boolean object. examples using tostring() in the following code, flag.tostring() returns "true": var flag = new boolean(true); var myvar = flag.tostring(); specifications specification ecmascript (ecma-262)the definition of 'boolean.proto
type.tostring' in that specification. ...
String.prototype.concat() - JavaScript
oncat(str2 [, ...strn]) parameters str2 [, ...strn] strings to concatenate to str. return value a new string containing the combined text of the strings provided. description the concat() function concatenates the string arguments to the calling string and returns a new string. changes to the original string or the returned string don't affect the other. if the arguments are not of the
type string, they are converted to string values before concatenating. performance it is strongly recommended that the assignment operators (+, +=) are used instead of the concat() method. examples using concat() the following example combines strings into a new string. let hello = 'hello, ' console.log(hello.concat('kevin', '. have a nice day.')) // hello, kevin. have a nice day. let greetlist...
...vin', '. have a nice day.')) // hello, kevin. have a nice day. let greetlist = ['hello', ' ', 'venkat', '!'] "".concat(...greetlist) // "hello venkat!" "".concat({}) // [object object] "".concat([]) // "" "".concat(null) // "null" "".concat(true) // "true" "".concat(4, 5) // "45" specifications specification ecmascript (ecma-262)the definition of 'string.proto
type.concat' in that specification. ...
String.prototype.indexOf() - JavaScript
g object of the first occurrence of the specified value, starting the search at fromindex. returns -1 if the value is not found. 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: for the array method, see array.proto
type.indexof(). syntax str.indexof(searchvalue [, fromindex]) parameters searchvalue the string value to search for. if no string is explicitly provided, searchvalue will be coerced to "undefined", and this value will be searched for in str. so, for example: 'undefined'.indexof() will return 0, as undefined is found at position 0 in the string undefined. 'undefine'.indexof() however will...
... ...
String.prototype.replaceAll() - JavaScript
d. 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 newstr = str.replaceall(regexp|substr, newsubstr|function) when using a `regexp` you must have to set the global ("g") flag; otherwise, it will throw a
typeerror: "replaceall must be called with a global regexp". parameters regexp (pattern) a regexp object or literal with the global flag. the matches are replaced with newsubstr or the value returned by the specified function. a regexp without the global ("g") flag will throw a
typeerror: "replaceall must be called with a global regexp". substr a string that is to be replaced by newsubstr. it ...
... whole string being examined. (the exact number of arguments depends on whether the first argument is a regexp object—and, if so, how many parenthesized submatches it specifies.) examples using replaceall 'aabbcc'.replaceall('b', '.'); // 'aa..cc' non-global regex throws when using a regular expression search value, it must be global. this won't work: 'aabbcc'.replaceall(/b/, '.');
typeerror: replaceall must be called with a global regexp this will work: 'aabbcc'.replaceall(/b/g, '.'); "aa..cc" specifications specification ecmascript (ecma-262)the definition of 'string.proto
type.replaceall' in that specification. ...
String.prototype.search() - JavaScript
it is implicitly converted to a regexp with new regexp(regexp). return value the index of the first match between the regular expression and the given string, or -1 if no match was found. description when you want to know whether a pattern is found, and also know its index within a string, use search(). (if you only want to know if it exists, use the similar test() method on the regexp proto
type, which returns a boolean.) for more information (but slower execution) use match() (similar to the regular expression exec() method). examples using search() the following example searches a string with two different regex objects to show a successful search (positive value) vs. an unsuccessful search (-1) let str = "hey jude" let re = /[a-z]/g let redot = /[.]/g console.log(str.search(re))...
...successful search (positive value) vs. an unsuccessful search (-1) let str = "hey jude" let re = /[a-z]/g let redot = /[.]/g console.log(str.search(re)) // returns 4, which is the index of the first capital letter "j" console.log(str.search(redot)) // returns -1 cannot find '.' dot punctuation specifications specification ecmascript (ecma-262)the definition of 'string.proto
type.search' in that specification. ...
String.prototype.toUpperCase() - JavaScript
ll be converted to a string if it isn't 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. syntax str.touppercase() return value a new string representing the calling string converted to upper case. exceptions
typeerror when called on null or undefined, for example, string.proto
type.touppercase.call(undefined). description the touppercase() method returns the value of the string converted to uppercase. this method does not affect the value of the string itself since javascript strings are immutable. examples basic usage console.log('alphabet'.touppercase()); // 'alphabet' conversion of non-string t...
... the string converted to uppercase. this method does not affect the value of the string itself since javascript strings are immutable. examples basic usage console.log('alphabet'.touppercase()); // 'alphabet' conversion of non-string this values to strings this method will convert any non-string value to a string, when you set its this to a value that is not a string: const a = string.proto
type.touppercase.call({ tostring: function tostring() { return 'abcdef'; } }); const b = string.proto
type.touppercase.call(true); // prints out 'abcdef true'. console.log(a, b); specifications specification ecmascript (ecma-262)the definition of 'string.proto
type.touppercase' in that specification. ...
String.prototype.trim() - JavaScript
d us a pull request. syntax str.trim() return value a new string representing the str stripped of whitespace from both ends. description the trim() method returns the string stripped of whitespace from both ends. trim() does not affect the value of the str itself. polyfill running the following code before any other code will create trim() if it's not natively available. if (!string.proto
type.trim) { string.proto
type.trim = function () { return this.replace(/^[\s\ufeff\xa0]+|[\s\ufeff\xa0]+$/g, ''); }; } examples using trim() the following example displays the lowercase string 'foo': var orig = ' foo '; console.log(orig.trim()); // 'foo' // another example of .trim() removing whitespace from just one side. var orig = 'foo '; console.log(orig.trim()); // 'foo' s...
... ...
Symbol.prototype[@@toPrimitive] - JavaScript
the hint argument is not used. javascript calls the [@@toprimitive]() method to convert an object to a primitive value. ...
...ect to a primitive value. you rarely need to invoke the [@@toprimitive]() method yourself; javascript automatically invokes it when encountering an object where a primitive value is expected. examples using @@toprimitive const sym = symbol("example"); sym === sym[symbol.toprimitive](); // true specifications specification ecmascript (ecma-262)the definition of 'symbol.proto
type.@@toprimitive' in that specification. ...
Symbol.prototype.description - JavaScript
ymbol 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. description symbol objects can be created with an optional description which can be used for debugging but not to access the symbol itself. the symbol.proto
type.description property can be used to read that description. it is different to symbol.proto
type.tostring() as it does not contain the enclosing "symbol()" string. see the examples. examples using description symbol('desc').tostring(); // "symbol(desc)" symbol('desc').description; // "desc" symbol('').description; // "" symbol().description; // undefined // well-known symbols sym...
... ...
Symbol.prototype.toString() - JavaScript
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. syntax symbol().tostring() return value a string representing the specified symbol object. ...
...ng the specified symbol object. description the symbol object overrides the tostring method of the object object; it does not inherit object.proto
type.tostring(). for symbol objects, the tostring method returns a string representation of the object. no string concatenation while you can call tostring() on symbols, you cannot use string concatenation with them: symbol('foo') + 'bar' //
typeerror: can't convert symbol to string examples using tostring symbol('desc').tostring() // "symbol(desc)" // well-known symbols symbol.iterator.tostring() // "symbol(symbol.iterator) // global symbols symbol.for('foo').tostring() // "symbol(foo)" specifications specification ecmascript (ecma-262)the definition of 'symbol.proto
type.tostring' in that specification. ...
get TypedArray[@@species] - JavaScript
the
typedarray[@@species] accessor property returns the constructor of a
typed array. description the species accessor property returns the default constructor for
typed array objects. subclass constructors may over-ride it to change the constructor assignment. examples species in ordinary objects the species property returns the default constructor function, which is one of the
typed array constructors for a given
typed array object: int8array[symbol.species]; // function int8array() uint8array[symbol.species]; // function uint8array() float32array[symbol.species]; // function float32array() species in derived objects in a derived collection object (e.g. your custom
typed array my
typedarray), the my
typedarray species is the my
typedarray constructor. however, you might want to o...
...nt8array[symbol.species]; // function int8array() uint8array[symbol.species]; // function uint8array() float32array[symbol.species]; // function float32array() species in derived objects in a derived collection object (e.g. your custom
typed array my
typedarray), the my
typedarray species is the my
typedarray constructor. however, you might want to overwrite this, in order to return a parent
typed array object in your derived class methods: class my
typedarray extends uint8array { // overwrite my
typedarray species to the parent uint8array constructor static get [symbol.species]() { return uint8array; } } specifications specification ecmascript (ecma-262)the definition of 'get %
typedarray% [ @@species ]' in that specification. ...
TypedArray.BYTES_PER_ELEMENT - JavaScript
the
typedarray.bytes_per_element property represents the size in bytes of each element in an
typed 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. property attributes of
typedarray.bytes_per_element writable no enumerable no configurable no description
typedarray objects differ from each other in the number of bytes per element and in the way the bytes are interpreted. the bytes_per_element constant contains the number of bytes each element in the given
typedarray has. examples using bytes_per_element int8arra...
... ...
WebAssembly.Table.prototype.get() - JavaScript
examples using get the following example (see table.html on github, and view it live also) compiles and instantiates the loaded table.wasm byte code using the webassembly.instantiatestreaming() method. it then retrieves the references stored in the exported table. ...
...hod of the webassembly.table() object retrieves a function reference stored at a given index. syntax table.get(index); parameters index the index of the function reference you want to retrieve. return value a function reference — this is an exported webassembly function, a javascript wrapper for an underlying wasm function. exceptions if index is greater than or equal to table.proto
type.length, a rangeerror is thrown. examples using get the following example (see table.html on github, and view it live also) compiles and instantiates the loaded table.wasm byte code using the webassembly.instantiatestreaming() method. it then retrieves the references stored in the exported table. webassembly.instantiatestreaming(fetch('table.wasm')) .then(function(obj) { var tbl = obj.instan...
attributeType - SVG: Scalable Vector Graphics
the attribute
type attribute specifies the namespace in which the target attribute and its associated values are defined. four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attribute
type="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable. xml this value specifies that the value of attributename is the name o...
... recommendation initial definition ...
contentStyleType - SVG: Scalable Vector Graphics
the contentstyle
type attribute specifies the style sheet language for the given document fragment on the <svg> element. this language is used for all instances of style that do not specify their own styling language, such as the style attribute that is available on many elements. the value specifies a media
type, per mime part two: media
types [rfc2046]. usage notes value one of the content
types specified in the media
types default value text/css animatable no since css is the only widely deployed style sheet language for online styling and it's already defined as default value if contentstyle
type is ommitted, the attribute is not well supported in user agents. if other style sheet languages become more popular they might not use the style attr...
...imatable no since css is the only widely deployed style sheet language for online styling and it's already defined as default value if contentstyle
type is ommitted, the attribute is not well supported in user agents. if other style sheet languages become more popular they might not use the style attribute, instead it could be easily declared which style language is used in the <style>'s
type attribute. the use of contentstyle
type is therefore deprecated. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'contentscript
type' in that specification. recommendation initial definition ...
Index - Archive of obsolete content
42 base64 add-on sdk ...
...cess to the local filesystem with the nodejs path module api. 87 io/byte-streams provides streams for reading and writing bytes. 88 io/file provides access to the local filesystem. 89 io/text-streams provides streams for reading and writing text. 90 lang/functional functional helper methods. 91 lang/
type functions for working with
type detection. 92 loader/cuddlefish add-on sdk, cfx the sdk's module loader. 93 loader/sandbox create javascript sandboxes and execute scripts in them. 94 net/url no summary! 95 net/xhr provides access to xmlhttprequest functionality. 96 places/bookmarks ...
...file name/path. ...
...And 103 more matches
Index
rence, référence(2), spidermonkey 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. 26 js::autovectorrooter jsapi reference, reference, référence(2), spidermonkey js::autovectorrooter<t> holds a variable-size rooted array of
type t. 27 js::booleanvalue jsapi reference, reference, référence(2), spidermonkey js::booleanvalue converts a c boolean of
type bool to js::value, the
type of javascript values. 28 js::call jsapi reference, reference, spidermonkey js::call calls a specified function, fun, on an object, thisobj. in terms of function execution, the object is treated as this. ...
...8. the caller must either ensure dst has enough space to encode the entire string, or pass the length of the buffer as dstlenp. in which case, the function will encode characters from the string until the buffer is exhausted. does not write the null terminator. 39 js::doublenanvalue jsapi reference, reference, référence(2), spidermonkey js::doublenanvalue returns a value of
type js::value that represents an ieee floating-point quiet not-a-number (nan). 40 js::doublevalue jsapi reference, reference, référence(2), spidermonkey js::doublevalue converts a c floating-point number of
type double to js::value, the
type of javascript values. 41 js::evaluate jsapi reference, reference, référence(2), spidermonkey js::evaluate compiles ...
...mpiles and executes a script in the specified scope, obj or scopechain. 42 js::falsevalue jsapi reference, reference, référence(2), spidermonkey js::falsevalue creates a js::value that represents the javascript value false. ...
...And 85 more matches
WebIDL bindings
k up the class to the cycle collector so it will trace the wrapper cache properly. note that you may not need to do this if your objects can only be created, never gotten from other objects. if you also inherit from nsisupports, make sure the nsisupports comes before the nswrappercache in your list of parent classes. if your interface does inherit from another interface, just inherit from the c++
type that the other interface corresponds to. if you do need to hook up cycle collection, it will look like this in the common case of also inheriting from nsisupports: // add strong pointers your class holds here. if you do, change to using // ns_impl_cycle_collection_wrappercache. ns_impl_cycle_collection_wrappercache_0(myclass) ns_impl_cycle_collecting_addref(myclass) ns_impl_cycle_collecting...
...ass, returns the same object every time (unless you write explicit code that handles your parent object changing by reparenting js wrappers, as nodes do). the idea is that walking the getparentobject chain will eventually get you to a window, so that every webidl object is associated with a particular window. for example, nsinode::getparentobject returns the node's owner document. the return
type of getparentobject doesn't matter other than it must either singly-inherit from nsisupports or have a corresponding tosupports method that can produce an nsisupports from it. (this allows the return value to be implicitly converted to a parentobject instance by the compiler via one of that class's non-explicit constructors.) if many instances of myinterface are expected to be created quicky,...
...ue of getparentobject should itself inherit from nswrappercache for optimal performance. returning null from getparentobject is allowed in situations in which it's ok to associate the resulting object with a random global object for security purposes; this is not usually ok for things that are exposed to web content. again, if you do not need wrapper caching you don't need to do this. ...
...And 81 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of
types of input data and control widgets are available, depending on the device and user agent. the <input> element is one of the most powerful and complex in all of html due to the sheer number of combinations of input
types and attributes. 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. <input>
types how an <input> works varies considerably depending on the value of its
type attribute, hence the different
types are covered in their own separate reference pages. if this attrib...
... 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. <input>
types how an <input> works varies considerably depending on the value of its
type attribute, hence the different
types are covered in their own separate reference pages. if this attribute is not specified, the default
type adopted is text. the available
types are as follows:
type description basic examples spec button a push button with no default behavior displaying the value of the value attribute, empty by default. <input
type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected. <inpu...
...opted is text. the available
types are as follows:
type description basic examples spec button a push button with no default behavior displaying the value of the value attribute, empty by default. <input
type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected. <input
type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when active in supporting browsers. <input
type="color" name="color"/> html5 date a control for entering a date (year, month, and day, with no time). opens a date picker or numeric wheels for year, month, day when active in supporting browsers. <input...
...And 81 more matches
Details of the object model - JavaScript
« previousnext » javascript is an object-based language based on proto
types, rather than being class-based. because of this different basis, it can be less apparent how javascript allows you to create hierarchies of objects and to have inheritance of properties and their values. this chapter attempts to clarify the situation. this chapter assumes that you are already somewhat familiar with javascript and that you have used javascript functions to create simple objects. class-based vs. proto
type-based languages class-based object-oriented languages, such as java and c++, are founded on the concept of two distinct entities: classes and instances. a class defines all of the properties that characterize a certain set of objects (considering methods and fields in java, or m...
...mber in a set of objects it describes. for example, the employee class could represent the set of all employees. an instance, on the other hand, is the instantiation of a class; that is. for example, victoria could be an instance of the employee class, representing a particular individual as an employee. an instance has exactly the same properties of its parent class (no more, no less). ...
...mployees. an instance, on the other hand, is the instantiation of a class; that is. for example, victoria could be an instance of the employee class, representing a particular individual as an employee. an instance has exactly the same properties of its parent class (no more, no less). a proto
type-based language, such as javascript, does not make this distinction: it simply has objects. a proto
type-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object. any object can specify its own properties, either when you create it or at run time. in addition, any object can be associated as the proto
type for another object, allowing the second object to share the first object's properties. defining a class in cl...
...And 69 more matches
Standard OS Libraries
this article gives the names of standard libraries that can be accessed with js-c
types. these libraries are what enable js-c
types to work. the alternative to standard libraries is creating your own dll (for windows) or so (for linux) file with c functions that can be called from your add-on with js-c
types. the dll/so/etc file you make must be shipped with your add-on. standard libraries offer the advantage of not having to ship anything. they are already available on the operating system for you. you just need to supply the path to appropriate files and set up the proper
types of values/arguments in the js-c
types code. this article allows you to find out what
types to give to values/arguments by supplying links to the documentation of the os libraries. windows windows has many standard os l...
...this comes shipped by default with all installations of windows operating systems since win98. it's also known as winapi32 or just winapi. a list of all the functions available through this api can be found at the msdn winapi index. ...
...s to the documentation of the os libraries. windows windows has many standard os libraries. the most common, found on all windows os version, is "winapi". windows also has the "winapilists" and ".net framework" (i'm not sure if it can be accessed jsc
types but probably). a complete list of windows apis can be found at the msdn api index. winapi this is the one that is most commonly used by js-c
types. this comes shipped by default with all installations of windows operating systems since win98. it's also known as winapi32 or just winapi. ...
...And 68 more matches
Index
se64 or ascii presentations, especially when importing data from files. a recent development adds support for loading external pem files that contain private keys, in a software library called nss-pem, which is separately available, but should eventually become a core part of nss. looking at the code level, nss deals with blocks of raw data all the time. the common structure to store such an un
typed block is secitem, which contains a size and an un
typed c pointer variable. when dealing with memory, nss makes use of arenas, which are an attempt to simplify management with the limited offerings of c (because there are no destructors). the idea is to group multiple memory allocations in order to simplify cleanup. performing an operation often involves allocating many individual data items, ...
..., s/mime, and other internet security standards. for a general overview of nss and the standards it supports, see overview of nss. 18 jss guide, jss, nss, needsmigration network security services for java (jss) is a java interface to nss. jss supports most of the security standards and encryption technologies supported by nss. jss also provides a pure java interface for asn.1
types and ber/der encoding. 19 4.3 release notes jss, nss network security services for java (jss) 4.3 is a minor release with the following new features: 20 4.3.1 release notes jss, nspr, nss network security services for java (jss) 4.3.1 is a minor release with the following new features: 21 build instructions for jss 4.3.x jss newsgroup...
...ode sample6 no summary! 186 utilities for nss samples these utility functions are adapted from those found in the sectool library used by the nss security tools and other nss test applications. 187 sample1 example, nss 1. a program to compute the hash of a file and save it to another file. ...
...And 64 more matches
HTML documentation index - HTML: Hypertext Markup Language
. 15 draggable global attributes, html, reference the draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the html drag and drop api. 16 dropzone deprecated, global attributes, html, reference the dropzone global attribute is an enumerated attribute indicating what
types of content can be dropped on an element, using the html drag and drop api. it can have the following values: 17 hidden global attributes, html, reference the hidden global attribute is a boolean attribute indicating that the element is not yet, or is no longer, relevant. for example, it can be used to hide elements of the page that can't be used until the login process has b...
... 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). 19 inputmode attribute, editing, forms, global attributes, html, input, reference, text, web, contenteditable, global, inputmode, text input 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. 20 is global attributes, html, reference, is the is global attribute allows you to specify that a standard html element should behave like a defined custom built-in element (see using custom elements for more details). 21 itemid attribute, global attribute, html, html microdata...
...sing the global attribute itemref. 24 itemscope attribute, global attribute, html, html microdata, microdata, reference itemscope is a boolean global attribute that defines the scope of associated metadata. specifying the itemscope attribute for an element creates a new item, which results in a number of name-value pairs that are associated with the element. 25 item
type attribute, global attribute, html, html microdata, microdata, reference the global attribute item
type specifies the url of the vocabulary that will be used to define itemprop's (item properties) in the data structure. 26 lang global attributes, html, reference the lang global attribute helps define the language of an element: the language that non-editable elements...
...And 60 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
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. ...
...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. ...
...tches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout,
type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam...
...And 59 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
color.sethsv(h, s, v); return color; } function hsvacolor(h, s, v, a) { var color = new color(); color.sethsv(h, s, v); color.a = a; return color; } function hslcolor(h, s, l) { var color = new color(); color.sethsl(h, s, l); return color; } function hslacolor(h, s, l, a) { var color = new color(); color.sethsl(h, s, l); color.a = a; return color; } color.proto
type.copy = function copy(obj) { if(obj instanceof color !== true) { console.log('
typeof parameter not color'); return; } this.r = obj.r; this.g = obj.g; this.b = obj.b; this.a = obj.a; this.hue = obj.hue; this.saturation = obj.saturation; this.value = obj.value; this.format = '' + obj.format; this.lightness = obj.lightness; }; color.proto
type.setformat = function setfo...
...s.a = obj.a; this.hue = obj.hue; this.saturation = obj.saturation; this.value = obj.value; this.format = '' + obj.format; this.lightness = obj.lightness; }; color.proto
type.setformat = function setformat(format) { if (format === 'hsv') this.format = 'hsv'; if (format === 'hsl') this.format = 'hsl'; }; /*========== methods to set color properties ==========*/ color.proto
type.isvalidrgbvalue = function isvalidrgbvalue(value) { return (
typeof(value) === 'number' && isnan(value) === false && value >= 0 && value <= 255); }; color.proto
type.setrgba = function setrgba(red, green, blue, alpha) { if (this.isvalidrgbvalue(red) === false || this.isvalidrgbvalue(green) === false || this.isvalidrgbvalue(blue) === false) return; this.r = red | 0; this.g ...
... value >= 0 && value <= 255); }; color.proto
type.setrgba = function setrgba(red, green, blue, alpha) { if (this.isvalidrgbvalue(red) === false || this.isvalidrgbvalue(green) === false || this.isvalidrgbvalue(blue) === false) return; this.r = red | 0; this.g = green | 0; this.b = blue | 0; if (this.isvalidrgbvalue(alpha) === true) this.a = alpha | 0; }; color.proto
type.setbyname = function setbyname(name, value) { if (name === 'r' || name === 'g' || name === 'b') { if(this.isvalidrgbvalue(value) === false) return; this[name] = value; this.updatehsx(); } }; color.proto
type.sethsv = function sethsv(hue, saturation, value) { this.hue = hue; this.saturation = saturation; this.value = value; this.hsvtorgb(); }; color.proto
type.sethsl ...
...And 57 more matches
Add to iPhoto
this extension for mac os x serves as a demonstration of how to use js-c
types to call mac os x carbon, core foundation, and other system frameworks from an extension written entirely in javascript. note: this extension uses carbon routines, which can no longer be used in firefox add-ons now that firefox is a 64-bit application. you can download an installable version of this extension on amo. once installed, when you right-click on an image, you'll see among the options in the contextual menu an option to "add image to iphoto". choose it, and iphoto will start up (if it's not already running) and import the image. declaring the apis the first thing we have to do is declare the mac os x apis we'll be using. ...
...n of this extension on amo. once installed, when you right-click on an image, you'll see among the options in the contextual menu an option to "add image to iphoto". choose it, and iphoto will start up (if it's not already running) and import the image. declaring the apis the first thing we have to do is declare the mac os x apis we'll be using. this extension uses a number of methods and data
types, as well as constants, from three system frameworks. since a lot of this stuff is repetitive, we'll only look at selected parts of the code to get an idea how things work. you can download the extension and poke through the code inside it if you'd like to see all of it. for the sake of organization, i chose to implement each system framework (and, mind you, i only declare the apis i actually u...
... lot of this stuff is repetitive, we'll only look at selected parts of the code to get an idea how things work. you can download the extension and poke through the code inside it if you'd like to see all of it. ...
...And 56 more matches
JavaScript Daemons Management - Archive of obsolete content
icense, version 3 or later. ...
...e = math.floor(nrate); } if (nlen > 0) { this.length = math.floor(nlen); } if (fonstart) { this.onstart = fonstart; } if (finit) { this.onstop = finit; finit.call(oowner, this.index, this.length, this.backw); } } /* create the daemon.blank() constructor and the global daemon.context object */ daemon.blank = function () {}; daemon.context = daemon.blank.proto
type; /* make love with the gc :-) */ daemon.blank.proto
type = /* important! */ daemon.proto
type; daemon.context.constructor = object; /* these properties can be manually reconfigured after the creation of the daemon */ daemon.proto
type.owner = daemon.context; daemon.proto
type.task = null; daemon.proto
type.rate = 100; daemon.proto
type.length = infinity; daemon.proto
type.reversals =...
...h the gc :-) */ daemon.blank.proto
type = /* important! ...
...And 55 more matches
Index - Archive of obsolete content
found 1218 pages: # page tags and summary 1 xul landing, mozilla, xul xul (xml user interface language) is mozilla's xml-based language for building user interfaces of applications like firefox. 2 <statusbarpanel> deprecated, xul, xul elements, xul reference an individual element of a statusbar. this is a special
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 t...
...le, 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. 4 accessibility/xul accessibility reference accessibility, xul this table is designed to show how to expose text properly for various xul element
types. sections in bold are to draw attention to pieces that are often overlooked for visual layouts. underlined text may be read by the screen reader. 5 attribute (xul) xul attributes, xul reference no summary! 6 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first...
...summary! 25 autofill xul attributes, xul reference no summary! 26 autoscroll xul attributes, xul reference no summary! 27 backdrag xul, xul attribute no summary! 28 beforeselected xul attributes, xul reference no summary! 29 bottom xul attribute, xul reference no summary! 30 browser.
type xul attributes, xul reference
type: one of the values below.the
type of browser, which can be used to set access of the document loaded inside the browser. 31 browserid xul, xul reference no summary! 32 button.
type xul attributes, xul reference no summary! 33 buttonaccesskeyaccept xul attributes, xul reference no summary! ...
...And 55 more matches
Working with data
creating cdata objects data
types for use with js-c
types are represented by c
type objects. these are javascript constructors; as such, they're callable functions that you can use to create new cdata objects of that
type. there are several ways you can go about creating new cdata objects. creating uninitialized cdata objects there are three forms of the syntax for creating cdata objects without immediately assigning them a value: var mycdataobj = new
type; var mycdataobj = new
type(); var mycdataobj =
type(); these all do the same thing: they return a new cdata object of the specified
type, whose data buffer has been populated entirely with zeroes. note: if
type.size is undefined, creating a new object this way will throw a
typeerror exception. creating initialized cdata objects si...
...the resulting data is then copied into a new cdata object. ...
...the resulting data is then copied into a new cdata object. ...
...And 55 more matches
JXON - Archive of obsolete content
dicated paragraph (but please read the note about the const statement compatibility). note: if you are interested to address only some parts of an xml document (and are not starting in javascript/json for templating purposes), use xpath instead of converting the whole document into json. ...
...if you have already have a dom tree from using xmlhttprequest, skip to the next paragraph. note: if you are using an instance of xmlhttprequest in order t...
...a dom tree article. if you have already have a dom tree from using xmlhttprequest, skip to the next paragraph. note: if you are using an instance of xmlhttprequest in order to retrieve your xml file, please use the yourrequest.responsexml property to get a parsed xml document. don't use yourrequest.responsetext! the algorithms proposed here (see: #1, #2, #3, #4) will consider only the following
types of nodes and their attributes: document (only as function argument), documentfragment (only as function argument), element, text (never as function argument), cdatasection (never as function argument), attr (never as function argument). this is a good and standardized compromise for a javascript usage, since all of the information of an xml document is contained in these node
types. al...
...And 50 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
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. ...
...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. ...
... completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout,
type, value properties accessible
type, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, t...
...And 50 more matches
Using XMLHttpRequest - Web APIs
tprequest object, open a url, and send the request. after the transaction completes, the object will contain useful information such as the response body and the http status of the result. function reqlistener () { console.log(this.responsetext); } var oreq = new xmlhttprequest(); oreq.addeventlistener("load", reqlistener); oreq.open("get", "http://www.example.org/example.txt"); oreq.send();
types of requests a request made via xmlhttprequest can fetch the data in one of two ways, asynchronously or synchronously. the
type of request is dictated by the optional async argument (the third argument) that is set on the xmlhttprequest.open() method. if this argument is true or not specified, the xmlhttprequest is processed asynchronously, otherwise the process is handled synchronously. a detai...
...do not use synchronous requests outside web workers. ...
...underbird 30.0 / seamonkey 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 attributes defined by the living standard specification for the xmlhttprequest() constructor. these tell the client making the xmlhttprequest important information about the status of the response. some cases where dealing with non-text response
types may involve some manipulation and analysis are outlined in the following sections. analyzing and manipulating the responsexml propert...
...And 48 more matches
jspage - Archive of obsolete content
var mootools={version:"1.2.4",build:"0d9113241a90b9cd5643b926795852a2026710d4"};var native=function(k){k=k||{};var a=k.name;var i=k.legacy;var b=k.protect; var c=k.implement;var h=k.generics;var f=k.initialize;var g=k.afterimplement||function(){};var d=f||i;h=h!==false;d.constructor=native;d.$family={name:"native"}; if(i&&f){d.proto
type=i.proto
type;}d.proto
type.constructor=d;if(a){var e=a.tolowercase();d.proto
type.$family={name:e};native.typize(d,e);}var j=function(n,l,o,m){if(!b||m||!n.proto
type[l]){n.proto
type[l]=o; }if(h){native.genericize(n,l,b);}g.call(n,l,o);return n;};d.alias=function(n,l,p){if(
typeof n=="string"){var o=this.proto
type[n];if((n=o)){return j(this,l,n,p); }}for(var m in n){this.alias(m,n[m],l);}return this;};d.implement=function(m,l,o){if(
typeof m=="string"){return...
...cize(n,l,b);}g.call(n,l,o);return n;};d.alias=function(n,l,p){if(
typeof n=="string"){var o=this.proto
type[n];if((n=o)){return j(this,l,n,p); }}for(var m in n){this.alias(m,n[m],l);}return this;};d.implement=function(m,l,o){if(
typeof m=="string"){return j(this,m,l,o);}for(var n in m){j(this,n,m[n],l); }return this;};if(c){d.implement(c);}return d;};native.genericize=function(b,c,a){if((!a||!b[c])&&
typeof b.proto
type[c]=="function"){b[c]=function(){var d=array.proto
type.slice.call(arguments); return b.proto
type[c].apply(d.shift(),d);};}};native.implement=function(d,c){for(var b=0,a=d.length;b<a;b++){d[b].implement(c);}};native.typize=function(a,b){if(!a.
type){a.
type=function(c){return($
type(c)===b); };}};(function(){var a={array:array,date:date,function:function,number:number,regexp:regexp,strin...
...p","push","reverse","shift","slice","sort","splice","tostring","unshift","valueof"],string:["charat","charcodeat","concat","indexof","lastindexof","match","replace","search","slice","split","substr","substring","tolowercase","touppercase","valueof"]}; for(var e in f){for(var b=f[e].length;b--;){native.genericize(a[e],f[e][b],true);}}})();var hash=new native({name:"hash",initialize:function(a){if($
type(a)=="hash"){a=$unlink(a.getclean()); }for(var b in a){this[b]=a[b];}return this;}});hash.implement({foreach:function(b,c){for(var a in this){if(this.hasownproperty(a)){b.call(c,this[a],a,this); }}},getclean:function(){var b={};for(var a in this){if(this.hasownproperty(a)){b[a]=this[a];}}return b;},getlength:function(){var b=0;for(var a in this){if(this.hasownproperty(a)){b++; }}return b;}});hash.
...And 47 more matches
Parser API
ghters, static analyses, translators, compilers, obfuscators, etc. note: this page describes spidermonkey-specific behavior and might be incomplete. visit estree spec for a community ast standard that includes latest ecmascript features and is backward-compatible with spidermonkey format. ...
...behavior and might be incomplete. visit estree spec for a community ast standard that includes latest ecmascript features and is backward-compatible with spidermonkey format. ...
...urned ast nodes. line number default: 1 the initial line number to use for source location information. builder builder default: null a builder object, which can be used to produce ast nodes in custom data formats. the expected callback methods are described under builder objects. target string default: script a
type of the parsing target, can be either script or module. if parsing fails due to a syntax error, an instance of syntaxerror is thrown. the syntax error object thrown by reflect.parse() has the same message property as the syntax error that would be thrown by eval(src). the linenumber and filename properties of the syntax error object indicate the source location of the syntax error. nod...
...And 47 more matches
Box-shadow generator - CSS: Cascading Style Sheets
this tool lets you construct css box-shadow effects, to add box shadow effects to your css objects. ...
... this tool lets you construct css box-shadow effects, to add box shadow effects to your css objects. ...
...css box-shadow effects, to add box shadow effects to your css objects. ...
...And 47 more matches
Color picker tool - CSS: Cascading Style Sheets
nd-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); background-repeat:no-repeat; background-position: center left 30%; } #color-info .copy-container { position: absolute; top: -100%; } #color-info .property { min-width: 280px; height: 30px; margin: 10px 0; text-align: center; line-height: 30px; } #color-info .property > * { float: left; } #color-info .property .
type { width: 60px; height: 100%; padding: 0 16px 0 0; text-align: right; } #color-info .property .value { width: 200px; height: 100%; padding: 0 10px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 16px; color: #777; text-align: center; background-color: #fff; border: none; } #color-info .property .value:hover { color: #37994a; } #color-info .property .value:hover ...
... color.sethsv(h, s, v); return color; } function hsvacolor(h, s, v, a) { var color = new color(); color.sethsv(h, s, v); color.a = a; return color; } function hslcolor(h, s, l) { var color = new color(); color.sethsl(h, s, l); return color; } function hslacolor(h, s, l, a) { var color = new color(); color.sethsl(h, s, l); color.a = a; return color; } color.proto
type.copy = function copy(obj) { if(obj instanceof color !== true) { console.log('
typeof parameter not color'); return; } this.r = obj.r; this.g = obj.g; this.b = obj.b; this.a = obj.a; this.hue = obj.hue; this.saturation = obj.saturation; this.value = obj.value; this.format = '' + obj.format; this.lightness = obj.lightness; }; color.proto
type.setformat = function setfo...
...s.a = obj.a; this.hue = obj.hue; this.saturation = obj.saturation; this.value = obj.value; this.format = '' + obj.format; this.lightness = obj.lightness; }; color.proto
type.setformat = function setformat(format) { if (format === 'hsv') this.format = 'hsv'; if (format === 'hsl') this.format = 'hsl'; }; /*========== methods to set color properties ==========*/ color.proto
type.isvalidrgbvalue = function isvalidrgbvalue(value) { return (
typeof(value) === 'number' && isnan(value) === false && value >= 0 && value <= 255); }; color.proto
type.setrgba = function setrgba(red, green, blue, alpha) { if (this.isvalidrgbvalue(red) === false || this.isvalidrgbvalue(green) === false || this.isvalidrgbvalue(blue) === false) return; this.r = red | 0; this.g ...
...And 45 more matches
StringView - Archive of obsolete content
the aims of this library are: to create a c-like interface for strings (i.e., an array of character codes — an arraybufferview in javascript) based upon the javascript arraybuffer interface to create a highly extensible library that anyone can extend by adding methods to the object stringview.proto
type to create a collection of methods for such string-like objects (since now: stringviews) which work strictly on arrays of numbers rather than on creating new immutable javascript strings to work with unicode encodings other than javascript's default utf-16 domstrings introduction as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when...
...quickly and easily manipulate raw binary data. in the past, this had to be simulated by treating the raw data as a string and using the charcodeat() method to read the bytes from the data buffer. however, this is slow and error-prone, due to the need for multiple conversions (especially if the binary data is not actually byte-format data, but, for example, 32-bit integers or floats). ...
...the charcodeat() method to read the bytes from the data buffer. however, this is slow and error-prone, due to the need for multiple conversions (especially if the binary data is not actually byte-format data, but, for example, 32-bit integers or floats). javascript
typed arrays provide a mechanism for accessing raw binary data much more efficiently. the stringview constructor is one level above
typed arrays. ...
...And 43 more matches
AddonManager
bject is the global api used to access information about add-ons installed in the application and to manipulate them. the majority of the methods are asynchronous meaning that results are delivered through callbacks passed to the method. the callbacks will be called just once but that may be before or after the method returns. one of the forces of the addonmanager is that it deals with any kind (
type) of add-on in a generic manner. to do so many methods of the addonmanager take the add-on
types as parameters. the existing add-on
types are defined in xpiprovider.jsm and are, at this time, the following: extension, theme, locale, multipackage, dictionary and experiment. to import the addonmanager object in the add-on sdk, use: const { addonmanager } = require("resource://gre/modules/addonmana...
..., dictionary and experiment. ...
...apped extension or similar, use: cu.import("resource://gre/modules/addonmanager.jsm"); method overview promise? getinstallforurl(in string url, in installcallback? callback, in string mime
type, in string hash, in string name, in string iconurl, in string version, in nsiloadgroup loadgroup) promise? getinstallforfile(in nsifile file, in installcallback? callback, in string mime
type) promise? getallinstalls(in installlistcallback? callback) promise? getinstallsby
types(in string
types[], in installlistcallback? ...
...And 43 more matches
Index
nent (implementing the nsisimple interface). here is how to make the same component in python using pyxpcom. 7 fun with xbl and xpconnect xbl, xpcom, xpcom:language bindings, xpconnect no summary! 8 generating guids add-ons, developing mozilla, developing_mozilla:tools, extensions, tools, xpcom guids are used in mozilla programming for identifying several
types of entities, including xpcom interfaces (this
type of guids is callled iid), components (cid), and legacy add-ons—like extensions and themes—that were created prior to firefox 1.5. add-ons can (and should) be identified with ids of the form extensionname@organization.tld since firefox 1.5. 9 generic factory xpcom most xpcom factories can be very simple. rick potts wrote ...
...roperties are the names listed as the first parameters of the macros in js/xpconnect/src/xpc.msg (also at table of errors), with the value of each corresponding to that constant's value. 28 components.returncode xpcom:language bindings, xpconnect no summary! 29 components.stack xpcom:language bindings, xpconnect components.stack is a read only property of
type nsistackframe (idl definition) that represents a snapshot of the current javascript callstack. this can be used for various diagnostic purposes. 30 components.utils xpcom:language bindings, xpconnect components.utils is a collection of various useful xpconnect features. its interface is defined at js/xpconnect/idl/xpccomponents.idl. 31 components.utils.sandbox ...
...n nspr, and each method of these synchronization objects (e.g. mutex::lock()) has a matching function in nspr (pr_lock()). this is no accident, as mozilla:: primitives are merely bare-minimum wrappers around nspr's. 95 xpcom category image-sniffing-services add-ons, extensions, needscontent in versions of firefox prior to firefox 3, extensions could add decoders for new image
types. however, such decoders relied on servers sending correct mime
types; images sent with incorrect mime
types would not be correctly displayed. 96 xpcom glue guide, xpcom, xpcom glue the xpcom glue is a static library which component developers and embedders can link against. it allows developers to link only against the frozen xpcom method symbols and maintain compatibility w...
...And 42 more matches
Plug-in Basics - Plugins
g and compression/decompression services applications 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. ...
...ata 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 click help and then about plug-ins.
type "about:plugins" in the location bar. the installed plug-ins page lists each installed plug-in along with its mime
type or
types, description, file extensions, and the current state (enabled or disabled) of the plug-in for each mime
type assigned to it. notice in view-source that this information is simply gathered from the javascript. because plug-ins are platform-specific, you must port them to...
...rm-specific, you must port them to every operating system and processor platform upon which you want to deploy your plug-in. plug-ins and helper applications before plug-ins, there were helper applications. a helper application is a separate, free-standing application that can be started from the browser. like a plug-in, the browser starts a helper application when the browser encounters a mime
type that is mapped to it. unlike a plug-in, a helper application runs separately from the browser in its own application space and does not interact with the browser or the web. when the browser encounters a mime
type, it always searches for a registered plug-in first. if there are no matches for the mime
type, it looks for a helper application. plug-ins and helper applications fill different appli...
...And 42 more matches
Bytecode Descriptions
the string constant script->getatom(atomindex). format: jof_atom symbol operands: (uint8_t symbol (the js::symbolcode of the symbol to use)) stack: ⇒ symbol push a well-known symbol. symbol must be in range for js::symbolcode. expressions unary operators void stack: val ⇒ undefined pop the top value on the stack, discard it, and push undefined. implements: the void operator, step 3. ...
...ng constant script->getatom(atomindex). format: jof_atom symbol operands: (uint8_t symbol (the js::symbolcode of the symbol to use)) stack: ⇒ symbol push a well-known symbol. symbol must be in range for js::symbolcode. expressions unary operators void stack: val ⇒ undefined pop the top value on the stack, discard it, and push undefined. implements: the void operator, step 3. ...
...atomindex). format: jof_atom symbol operands: (uint8_t symbol (the js::symbolcode of the symbol to use)) stack: ⇒ symbol push a well-known symbol. symbol must be in range for js::symbolcode. expressions unary operators void stack: val ⇒ undefined pop the top value on the stack, discard it, and push undefined. implements: the void operator, step 3.
typeof,
typeofexpr stack: val ⇒ (
typeof val) the
typeof operator. ...
...And 39 more matches
XPIDL
ages (idl) are used to describe interfaces in a language- and machine-independent way. idls make it possible to define interfaces which can then be processed by tools to autogenerate language-dependent interface specifications. xpidl is expected to converge towards webidl in the future. note: starting in gecko 9.0, the older xpidl utility, which was previously used to generate c++ header files,
typelib information, and so forth has been replaced with pyxpidl in the gecko sdk. pyxpidl has been used for some time now, but now the older tool has been fully retired. writing xpidl interface files xpidl closely resembles omg idl, with extended syntax to handle iids and additional
types. some examples are in the xpcom/base and xpcom/ds directories of the mozilla tree. xpidl:syntax (now up to ...
...mples are in the xpcom/base and xpcom/ds directories of the mozilla tree. xpidl:syntax (now up to date again) xpidl syntax (out of date) xpidl author's guide (not as out of date) explanation of idl semantics a full guide to the syntax can be found at xpidl:syntax, which is written in an abnf form. an xpidl file is essentially just a series of declarations. at the top level, we can define
typedefs, native
types, or interfaces. interfaces may furthermore contain
typedefs, natives, methods, constants, or attributes. most declarations can have properties applied to them.
types there are three ways to make
types: a
typedef, a native, or an interface. in addition, there are a few built-in native
types. the built-in native
types are those listed under the
type_spec production above. the fo...
...contain
typedefs, natives, methods, constants, or attributes. most declarations can have properties applied to them.
types there are three ways to make
types: a
typedef, a native, or an interface. in addition, there are a few built-in native
types. the built-in native
types are those listed under the
type_spec production above. ...
...And 39 more matches
Places utilities for JavaScript
e, and as such it will never be frozen, but it provides some easy to use functions that can save you from reinventing the wheel and cluttering up your own classes/functions when you need it. global objects there are a few global objects and constants defined in utils.js. these are: qi_node qi_node(anode, aiid) runs a query interface on a bookmark node to expose the interface available to that
type. if the interface isn't available to that node, null is returned. anode - the bookmark aiid - the return interface wanted. there are several predefined versions of this for common calls. these just take in the node, as the interface is already defined: asvisit(anode) asfullvisit(anode) ascontainer(anode) asquery(anode) annotations a few annotation names are defined here. load_in...
...ode anode); boolean nodeislivemarkcontainer(nsinavhistoryresultnode anode); obsolete since gecko 21 boolean nodeislivemarkitem(nsinavhistoryresultnode anode); obsolete since gecko 21 boolean isreadonlyfolder(nsinavhistoryresultnode anode); int getindexofnode(nsinavhistoryresultnode anode); string wrapnode(nsinavhistoryresultnode anode, string a
type, nsiuri aoverrideuri); array unwrapnodes(string blob, string a
type); nsitransaction maketransaction(string data, string
type, nsinavhistoryresultnode container, int index, boolean copy); nsinavhistoryresult getfoldercontents(int afolderid, boolean aexcludeitems, boolean aexpandqueries); boolean showaddbookmarkui(nsiuri auri, string atitle, string adescription, ...
... boolean showaddfolderui(string atitle, int adefaultinsertionpoint, boolean ashowpicker); array object getannotationsforuri(nsiuri auri); array object getannotationsforitem(int aitemid); void setannotationsforuri(nsiuri auri, object aannos); void setannotationsforuri(int aitemid, object aannos); getviewfornode(nsidomnode anode); void markpageas
typed(string aurl); void markpageasfollowedbookmark(string aurl); boolean checkurlsecurity(nsinavhistoryresultnode aurinode); string getquerystringforfolder(int afolderid); string getdescriptionfromdocument(nsidomdocument doc); string setpostdataforbookmark(int aboomarkid, string apostdata); string getpostdataforbookmark(int aboomarkid); a...
...And 38 more matches
tabbrowser - Archive of obsolete content
if this attribute is set to true or omitted, autoscroll will be enabled or depending on the user preference general.autoscroll.
..., loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, reloadwithflags, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled
type: boolean set to true to enable autocomplete of fields. autocompletepopup
type: id the id of a popup element used to hold autocomplete results for the element. ...
...vecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled
type: boolean set to true to enable autocomplete of fields. autocompletepopup
type: id the id of a popup element used to hold autocomplete results for the element. autoscroll
type: boolean set to false to disable autoscroll for this browser. if this attribute is set to true or omitted, autoscroll will be enabled or depending on the user preference general.autoscroll. ...
...And 36 more matches
textbox - Archive of obsolete content
ault. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
...y a field with multiple rows. more information is available in the xul tutorial. ...
... preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout,
type, value, wrap, wraparound properties accessible
type, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout,
type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> <label control="your-name" value="enter your name:"/> <textbox id="your-name" value="john"/> </vbox> attributes cols
type: integer for multiline textboxes, the number of columns to display. decimalplaces
type: integer the number of ...
...And 36 more matches
Advanced form styling - Learn web development
previous overview: forms next in this article, we will see what can be done with css to style the
types of form control that are more difficult to style — the "bad" and "ugly" categories. as we saw in the previous article, text fields and buttons are perfectly easy to style; now we will dig into styling the bits that are more problematic. prerequisites: basic computer literacy, and a basic understanding of html and css. objective: to understand what parts of forms are hard to style, and why; to learn what can be done to customize them. ...
...ter literacy, and a basic understanding of html and css. objective: to understand what parts of forms are hard to style, and why; to learn what can be done to customize them. ...
... said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input
type="search"> the ugly: some elements can't be styled thoroughly using css. these include: elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>. <input
type="color"> date-related controls such as <input
type="datetime-local"> <input
type="range"> <input
type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable. appearance: controlling os-level styling in the previous article we said that historically, styling of web form controls was largely taken from ...
...And 36 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
anging its behavior or providing metadata. 26 bandwidth glossary, infrastructure bandwidth is the measure of how much information can pass through a data connection in a given amount of time. it is usually measured in multiples of bits-per-second (bps), for example megabits-per-second (mbps) or gigabits-per-second (gbps). 27 base64 advanced, base64, javascript,
typed arrays, uri, url, unicode problem, atob(), btoa() base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ascii string format by translating it into a radix-64 representation. the term base64 originates from a specific mime content transfer encoding. 28 baseline css, glossary, svg, alignment, typography the baseline is a term used ...
...i accessibility, glossary bidi (bidirectional) refers to a document containing both right-to-left and left-to-right text. even when both directionalities occur in the same paragraph, the text in each language must appear in its proper directionality. 30 bigint bigint, glossary, javascript, reference, arbitrary precision format in javascript, bigint is a numeric data
type that can represent integers in the arbitrary precision format. in other programming languages different numeric
types can exist, for examples: integers, floats, doubles, or bignums. 31 blink glossary, infrastructure, layout, rendering engine blink is an open-source browser layout engine developed by google as part of chromium (and therefore part of chrome as well). specifical...
... block cipher mode of operation block cipher mode of operation, cryptography, glossary, security a block cipher mode of operation, usually just called a "mode" in context, specifies how a block cipher should be used to encrypt or decrypt messages that are longer than the block size. 36 boolean boolean, codingscripting, glossary, javascript, programming languages, data
types in computer science, a boolean is a logical data
type that can have only the values true or false. 37 boot2gecko boot2gecko, firefox os, glossary, infrastructure, intro boot2gecko (b2g) is the engineering codename for firefox os and refers to builds that haven't yet received official firefox os branding. (firefox os was also often called boot2gecko before the project h...
...And 34 more matches
nsIDOMWindowUtils
oat ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void garbagecollect([optional] in nsicyclecollectorlistener alistener); short getcursor
type(); astring getdocumentmetadata(in astring aname); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); astring getpccountscriptsummary(in long ascript); astring getpccountscriptcontents(in long ascript); void getscrollxy(in boolean aflushlayout, out long ascrollx, out long ascrolly);...
...getpccountscriptcontents(in long ascript); void getscrollxy(in boolean aflushlayout, out long ascrollx, out long ascrolly); astring getvisiteddependentcomputedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long
type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocumen...
...n boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext athebescontext); native code only! ...
...And 34 more matches
nsIMsgDBView
the nsimsgdbview interface handles the display of mail in the threadpane and preview pane of thunderbird and other xpcom based mail cients. inherits from: nsisupports implemented by: @mozilla.org/messenger/msgdbview;1. to create an instance, use: var dbview = components.classes[@mozilla.org/messenger/msgdbview;1?
type=] .createinstance(components.interfaces.nsimsgdbview); where
type designates different
types of view's available. available in the mozilla codebase are
types "quicksearch", "threadswithunread", "watchedthreadswithunread", "xfvf" (virtual folders), "search", "group", and "threaded" each with their own implementation of nsimsgdbview that provides a different sorting/view of the data. method overview void open(in nsimsgfolder folder, in nsm...
...ype designates different
types of view's available. available in the mozilla codebase are
types "quicksearch", "threadswithunread", "watchedthreadswithunread", "xfvf" (virtual folders), "search", "group", and "threaded" each with their own implementation of nsimsgdbview that provides a different sorting/view of the data. ...
... different
types of view's available. available in the mozilla codebase are
types "quicksearch", "threadswithunread", "watchedthreadswithunread", "xfvf" (virtual folders), "search", "group", and "threaded" each with their own implementation of nsimsgdbview that provides a different sorting/view of the data. ...
...And 34 more matches
XUL element attributes - Archive of obsolete content
for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it specifies how its children will be aligned horizontally. start child elements are aligned starting from the left or top edge of the box. ...
...t edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. allowevents
type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. allownegativeassertions
type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion...
...rue, events are passed to children of the element. otherwise, events are passed to the element only. allownegativeassertions
type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion. class
type: string the style class of the element. multiple classes may be specified by separating them with spaces. coalesceduplicatearcs
type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to negate an earlier assertion. collap...
...And 33 more matches
nss tech note5
simplest init function, in case you don't need a nss database is nss_nodb_init(".") choose a cipher mechanism. note that some mechanisms (*_pad) imply the padding is handled for you by nss. if you choose something 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_. ...
...illustrating this hash / digest with secret key included include headers #include "nss.h" #include "pk11pub.h" make sure nss is initialized.the simplest init function, in case you don't need a nss database is nss_nodb_init(".") choose a digest mechanism. you can find a list of digest mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_digest. ...
...his hmac include headers #include "nss.h" #include "pk11pub.h" make sure nss is initialized.the simplest init function, in case you don't need a nss database is nss_nodb_init(".") choose a hmac mechanism. ...
...And 33 more matches
Web Console remoting - Firefox Developer Tools
is approach allows for lower resource usage on the server - this is a potential issue if the server runs on devices with fewer resources. the onattachconsole callback receives a new instance of the webconsoleclient object. this object provides methods that abstract away protocol packets, things like startlisteners(), stoplisteners(), etc. protocol packets look as follows: { "to": "root", "
type": "listtabs" } { "from": "root", "consoleactor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ... ] } notice that the consoleactor is also available as a global actor. when you attach to the global consoleactor you receive all of t...
...you attach to the global consoleactor you receive all of the network requests, page errors, and the other events from all of the tabs and windows, including chrome errors and network events. this actor is used for the browser console implementation and for debugging remote firefox/b2g instances. ...
...fication comes from tab actors. prior to firefox 20 the web console actor provided a locationchange listener, with an associated locationchanged notification. this is no longer the case: we have made changes to allow the web console client to reuse the tabnavigated notification (bug 792062). ...
...And 32 more matches
tree - Archive of obsolete content
in the tree. there are several ways in which trees are used, as listed below. the second column lists the interfaces available via the tree's view property. the third column indicates whether treeitem element are used. if you would like to allow the tree to be horizontally scrolled, simply set the width attributes for each column to make the tree wider than its containing object. ...
...however, the treeitems are not displayed directly; they are used only as data to the content view. however, the content view will automatically update the tree if treeitems are changed. ...
...sixultreebuilder no this tree is generated from an rdf datasource. it is used when a tree has a datasources attribute, and has dont-build-content in its flags attribute. for this tree, the data comes directly from the rdf datasource. dom treeitems are not created. even though the template uses treeitem elements to define the content, dom nodes for these elements are not created. this is the
type that should be used for rdf generated trees with lots of rows. rdf content tree nsitreeview, nsixultreebuilder, nsitreecontentview yes this tree is generated from an rdf datasource. it is similar to the previous
type but is used when the tree does not have dont-build-content in its flags attribute. dom treeitems are created, so you can access the data using rdf functions or dom ...
...And 30 more matches
nsIAnnotationService
string aname, in double avalue, in long aflags, in unsigned short aexpiration); void setitemannotationdouble(in long long aitemid, in autf8string aname, in double avalue, in long aflags, in unsigned short aexpiration); void setpageannotationbinary(in nsiuri auri, in autf8string aname,[const, array, size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amime
type, in long aflags, in unsigned short aexpiration); void setitemannotationbinary(in long long aitemid, in autf8string aname,[const, array, size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amime
type, in long aflags, in unsigned short aexpiration); nsivariant getpageannotation(in nsiuri auri, in autf8string aname); nsivariant getitemannotation(in ...
...getitemannotationint64(in long long aitemid, in autf8string aname); double getpageannotationdouble(in nsiuri auri, in autf8string aname); double getitemannotationdouble(in long long aitemid, in autf8string aname); void getpageannotationbinary(in nsiuri auri, in autf8string aname,[array, size_is(adatalen)] out octet adata, out unsigned long adatalen, out autf8string amime
type); void getitemannotationbinary(in long long aitemid, in autf8string aname,[array, size_is(adatalen)] out octet adata, out unsigned long adatalen, out autf8string amime
type); void getpageannotationinfo(in nsiuri auri, in autf8string aname, out print32 aflags, out unsigned short aexpiration, out autf8string amime
type, out unsigned short a
type); void getitemannotationinfo(...
... octet adata, out unsigned long adatalen, out autf8string amime
type); void getpageannotationinfo(in nsiuri auri, in autf8string aname, out print32 aflags, out unsigned short aexpiration, out autf8string amime
type, out unsigned short a
type); void getitemannotationinfo(in long long aitemid, in autf8string aname, out long aflags, out unsigned short aexpiration, out autf8string amime
type, out unsigned short a
type); pruint16 getpageannotation
type(in nsiuri auri, in autf8string aname); pruint16 getitemannotation
type(in long long aitemid, in autf8string aname); void getpageswithannotation(in autf8string name, [optional] out unsigned long resultcount, [retval, array, size_is(resultcount)] out nsiuri results); void getitemswithannotation(in autf8str...
...And 30 more matches
nsIContentPolicy - Archive of obsolete content
63 introduced gecko 1.0 inherits from: nsicontentpolicybase last changed in gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39) you can observe content that is being loaded into your browser by implementing nsicontentpolicy. ...
... 63 introduced gecko 1.0 inherits from: nsicontentpolicybase last changed in gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39) you can observe content that is being loaded into your browser by implementing nsicontentpolicy. ...
...ning: do not block the caller in your implementations of shouldload() or shouldprocess() (for example, by launching a dialog to prompt the user for something).") note: in reality, much of this interface is defined in the nsicontentpolicybase interface, but for now is documented here until someone has time to split things up. ...
...And 29 more matches
Basic native form controls - Learn web development
previous overview: forms next in the previous article, we marked up a functional web form example, introducing some form controls and common structural elements, and focusing on accessibility best practices. next we will look at the functionality of the different form controls, or widgets, in detail — studying all the different options available to collect different
types of data. in this particular article we will look at the original set of form controls, available in all browsers since the early days of the web. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand in detail the original set of native form widgets available in browsers for collecting data, and how to implement them using html. you've a...
... basic computer literacy, and a basic understanding of html. objective: to understand in detail the original set of native form widgets available in browsers for collecting data, and how to implement them using html. you've already met some form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>. this article covers: the common input
types button, checkbox, file, hidden, image, password, radio, reset, submit, and text. some of the attributes that are common to all form controls. note: the features discussed in this article are supported in all browsers, which is not the case for all form controls. we cover newer form controls added in html5 in the next two articles. if you want a more advanced reference, you should consult our...
..., and text. some of the attributes that are common to all form controls. note: the features discussed in this article are supported in all browsers, which is not the case for all form controls. we cover newer form controls added in html5 in the next two articles. if you want a more advanced reference, you should consult our html forms element reference, and in particular our extensive <input>
types reference. text input fields text <input> fields are the most basic form widgets. they are a very convenient way to let the user enter any kind of data, and we've already seen a few simple examples. note: html form text fields are simple plain text input controls. this means that you cannot use them to perform rich editing (bold, italic, etc.). all rich text editors you'll encounter are cus...
...And 29 more matches
Introduction to using XPath in JavaScript - XPath
based document (including html documents), and returns a xpathresult object, which can be a single node or a set of nodes. the existing documentation for this method is located at document.evaluate, but it is rather sparse for our needs at the moment; a more comprehensive examination will be given below. var xpathresult = document.evaluate( xpathexpression, contextnode, namespaceresolver, result
type, result ); parameters the evaluate function takes a total of five parameters: xpathexpression: a string containing the xpath expression to be evaluated. contextnode: a node in the document against which the xpathexpression should be evaluated, including any and all of its child nodes. the document node is the most commonly used. namespaceresolver: a function that will be passed any namesp...
...hould use this virtually all of the time. null, which can be used for html documents or when no namespace prefixes are used. note that, if the xpathexpression contains a namespace prefix, this will result in a domexception being thrown with the code namespace_err. a custom user-defined function. see the using a user defined namespace resolver section in the appendix for details. ...
...which can be used for html documents or when no namespace prefixes are used. note that, if the xpathexpression contains a namespace prefix, this will result in a domexception being thrown with the code namespace_err. a custom user-defined function. see the using a user defined namespace resolver section in the appendix for details. result
type: a constant that specifies the desired result
type to be returned as a result of the evaluation. ...
...And 29 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
if the current node has an attribute defined with the specified name. haschildnodes() returns a boolean stating whether the current node has any child nodes. lastchild returns the last child node of the element. nextsibling returns the node immediately following the current one. nodename returns the name of the current node as a string. node
type returns the
type of the current node. value description 1 element node 2 attribute node 3 text node 4 cdata section node 5 entity reference node 6 entity node 7 process...
...for nodes that contain text, such as text and comment nodes, it will return their string value. for attribute nodes, the attribute value is returned. for all other nodes, null is returned. ownerdocument ...
...e from the current node. setattribute( aname, avalue ) sets the value of the specified attribute with the specified value. internet explorer has a nonstandard quirk, where many of these apis will skip white space text nodes that are generated, for example, by new line characters. mozilla will not skip these, so sometimes you need to distinguish these nodes. ...
...And 28 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
example demonstrates setinterval()'s basic syntax. var intervalid = window.setinterval(mycallback, 500, 'parameter 1', 'parameter 2'); function mycallback(a, b) { // your code here // parameters are purely optional. console.log(a); console.log(b); } example 2: alternating two colors the following example calls the flashtext() function once a second until the stop button is pressed. ...
... = oelem.style.color == 'red' ? 'blue' : 'red'; // oelem.style.color == 'red' ? 'blue' : 'red' is a conditional or ternary operator. ...
.../ oelem.style.color == 'red' ? 'blue' : 'red' is a conditional or ternary operator. ...
...And 28 more matches
Client-side form validation - Learn web development
unt information. we want to protect ourselves. there are many ways that malicious users can misuse unprotected forms to damage the application (see website security). warning: never trust data passed to your server from the client. even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request. different
types of client-side validation there are two different
types of client-side validation that you'll encounter on the web: built-in form validation uses html5 form validation features, which we've discussed in many places throughout this module. this validation generally doesn't require much javascript. built-in form validation has better performance than javascript, but it is not as customizable a...
...ascript. this is done by using validation attributes on form elements. we've seen many of these earlier in the course, but to recap: required: specifies whether a form field needs to be filled in before the form can be submitted. minlength and maxlength: specifies the minimum and maximum length of textual data (strings) min and max: specifies the minimum and maximum values of numerical input
types
type: specifies whether the data needs to be a number, an email address, or some other specific preset
type. pattern: specifies a regular expression that defines a pattern the entered data needs to follow. if the data entered in a form field follows all of the rules specified by the above attributes, it is considered valid. if not, it is considered invalid. when an element is valid, the fo...
...asses (e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid elements. if the user tries to send the data, the browser will block the form and display an error message. note: there are several errors that will prevent the form from being submitted, including a badinput, patternmismatch, rangeoverflow or rangeunderflow, stepmismatch, toolong or tooshort,
typemismatch, valuemissing, or a customerror. built-in form validation examples in this section, we'll test out some of the attributes that we discussed above. simple start file let's start with a simple example: an input that allows you to choose whether you prefer a banana or a cherry. this example involves a simple text <input> with an associated <label> and a submit <button>. find the source ...
...And 27 more matches
Finding window handles - Archive of obsolete content
since mozilla tries to be as cross-platform as possible, it can be difficult to get the handle you need. note: starting in gecko 2.0, only the top level browser window has an hwnd. ...
...run the snippets below from the scratchpad in environment > browser. recall that nsibasewindow -> nativehandle returns the following in the different operating systems: windows - hwnd mac os x - nswindow* linux - gdkwindow* (it will be gdk...
... .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var hwndstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/c
types.jsm'); var user32 = c
types.open('user32.dll'); /* http://msdn.microsoft.com/en-us/library/ms633539%28v=vs.85%29.aspx * bool winapi setforegroundwindow( * __in_ hwnd hwnd * ); */ var setforegroundwindow = user32.declare('setforegroundwindow', c
types.winapi_abi, c
types.bool, // return bool c
types.voidptr_t // hwnd ); var hwnd = c
types.voidptr_t(c
types.uint64(hwndstring)); var rez_...
...And 26 more matches
Dehydra Object Reference - Archive of obsolete content
introduction dehydra represents c++
types and variables as javascript objects. the objects are designed to distill that
type system to the minimum such that it can be easy to match on. often, the best way to become familiar with the dehydra objects is to print out the objects: dehydra example code an online tool for pretty-printing dehydra data understanding properties dehydra only sets properties that are applicable. for example, class
types and
typedefs are declared and will have a .loc property. intrinsic
types such as "int" are not declared and will not have a .loc. dehydra only sets boolean flags when they are true. for example, a pointer
type will have .ispointer == true, but a class
type will not have an .ispointer property. ...
...each member of the array has the following properties: { name: string, value: string or number, if applicable } see an example on enforcing final classes. ...
...each member of the array has the following properties: { name: string, value: string or number, if applicable } see an example on enforcing final classes. code can be annotated with arbitrary user attributes: __attribute__((user("customstring"))). ...
...And 26 more matches
browser - Archive of obsolete content
f firefox? get firefox most of the properties and methods of the browser will rarely be used and can only be called from chrome urls. other urls will need to use the document and history objects to change the displayed document. ...
...of the properties and methods of the browser will rarely be used and can only be called from chrome urls. other urls will need to use the document and history objects to change the displayed document. ...
...if this attribut...
...And 26 more matches
toolbarbutton - Archive of obsolete content
ld 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. ...
...ssible, 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. ...
...ble, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. ...
...And 26 more matches
richlistbox - Archive of obsolete content
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. ...
...ichlistitems), 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. ...
...irefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. ...
...And 25 more matches
NSS API Guidelines
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 contain
types, and functions, that are publicly available to higer-level apis. library description layer directory public headers certdb provides all certificate handling functions and
types. the certdb library manipulates the certificate database (add, create, delete certificates and crls). it also provides general certificate-handling routines (create a certificate, verify,...
...ificate extensions). low cert lib/certdb cdbhdl.h, certdb.h, cert.h, certt.h certhi provides high-level certificate-related functions, that do not access the certificate database, nor individual certificate data directly. currently, ocsp checking settings are exported through certhi. high cert lib/certhigh ocsp.h, ocspt.h crmf provides functions, and data
types, to handle certificate management message format (cmmf) and certificate 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 cryptog...
... 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 software-only implementation of a pkcs #11 fortezza to...
...And 25 more matches
Using IndexedDB - Web APIs
dless of network availability, your applications can work both online and offline. about this document this tutorial walks you through using the asynchronous api of indexeddb. if you are not familiar with indexeddb, you should first read basic concepts about indexeddb. for the reference documentation on the indexeddb api, see the indexeddb article and its subpages. this article documents the
types of objects used by indexeddb, as well as the methods of the asynchronous api (the synchronous api was removed from spec). basic pattern the basic pattern that indexeddb encourages is the following: open a database. create an object store in the database. start a transaction and make a request to do some database operation, like adding or retrieving data. wait for the operation to c...
...this triggers the onerror() function with the error event as its argument. the indexeddb a...
...this triggers the onerror() function with the error event as its argument. ...
...And 25 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
uge list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others. overview javascript is a multi-paradigm, dynamic language with
types and operators, standard built-in objects, and methods. its syntax is based on the java and c languages — many structures from those languages apply to javascript as well. javascript supports object-oriented programming with object proto
types, instead of classes (see more about prototypical inheritance and es2015 classes). javascript also supports functional programming — because they are obj...
...oh, and undefined and null, which are ... slightly odd. and array, which is a special kind of object. ...
...proto
types, instead of classes (see more about prototypical inheritance and es2015 classes). javascript also supports functional programming — because they are objects, functions may be stored in variables and passed around like any other object. let's start off by looking at the building blocks of any language: the
types. javascript programs manipulate values, and those values all belong to a
type. javascript's
types are: number string boolean function object symbol (new in es2015) ... oh, and undefined and null, which are ... slightly odd. and array, which is a special kind of object. and date and regexp, which are objects that you get for free. and to be technically accurate, functions are just a special
type of object. ...
...And 25 more matches
Object - JavaScript
the object class represents one of javascript's data
types. it is used to store various keyed collections and more complex entities. 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.proto
type, 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.setproto
typeof). ...
...this provides a very powerful although potentially dangerous mechanism to override or extend object behavior. ...
...this provides a very powerful although potentially dangerous mechanism to override or extend object behavior. the object constructor creates an object wrapper for the given value. ...
...And 25 more matches
String - JavaScript
cript 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 = new string(s_prim) console.log(
typeof s_prim) // logs "string" console.log(
typeof s_obj) // logs "object" string primitives and string objects also give different results when using eval(). primitives passed to eval are treated as source code; string objects are treated as all other objects are, by returning the object. for example: let s1 = '2 + 2' // creates a string primitive let s2 = new string('2 + 2') // cre...
...r any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. that form looks like this: let longstring = "this is a very long string which needs \ to wrap across multiple lines because \ otherwise my code is unreadable." both of the above methods result in identical strings. constructor string() creates a new string object. it performs
type conversion when called as a function, rather than as a constructor, which is usually more useful. static methods string.fromcharcode(num1 [, ...[, numn]]) returns a string created by using the specified sequence of unicode values. string.fromcodepoint(num1 [, ...[, numn) returns a string created by using the specified sequence of code points. string.raw() returns a string created from a...
...structor, which is usually more useful. static methods string.fromcharcode(num1 [, ...[, numn]]) returns a string created by using the specified sequence of unicode values. string.fromcodepoint(num1 [, ...[, numn) returns a string created by using the specified sequence of code points. string.raw() returns a string created from a raw template string. ...
...And 25 more matches
Preferences - Archive of obsolete content
there are six methods in nsiprefbranch that read and write preferences: getboolpref(), setboolpref(), getcharpref(), setcharpref(), getintpref(), and setintpref(). using them is as easy as: // get the "accessibility." branch var prefs = components.classe...
...there are six methods in nsiprefbranch that read and write preferences: getboolpref(), setboolpref(), getcharpref(), setcharpref(), getintpref(), and setintpref(). using them is as easy as: // get the "accessibility." branch var prefs = components.classes["@mozilla.org/prefere...
...rfaces.nsiprefbranch); // get the "extensions.myext." branch var prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); prefs = prefs.getbranch("extensions.myext."); simple
types there are three
types of preferences: string, integer, and boolean. each entry in the preferences database (prefs.js) has one of those
types. there are six methods in nsiprefbranch that read and write preferences: getboolpref(), setboolpref(), getcharpref(), setcharpref(), getintpref(), and setintpref(). using them is as easy as: // get the "accessibility." branch var prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice).getbranch("accessibility."); //...
...And 24 more matches
listbox - Archive of obsolete content
l 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. ...
... 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. ...
... with non-text content, you should instead use the richlistbox element. see list controls for more information. ...
...And 24 more matches
UI pseudo-classes - Learn web development
abled or disabled form controls (e.g. with the disabled html attribute set), and read-write or read-only form controls (e.g. with the readonly html attribute set). :checked, :indeterminate, and :default: respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g. an <input
type="checkbox"> with the checked attribute set, or an <option> element with the selected attribute set). there are many others too, but the ones listed above are the most obviously useful. some of the others are aimed at solving very specific niche problems, or simply not very well supported in browsers yet. the ones listed above all have pretty good browser support, but of course, you should test ...
...lled in before the form can be submitted) or optional. <input>, <select>, and <textarea> elements have a required attribute available which, when set, means that you have to fill in that control before the form will successfully submit. ...
...available which, when set, means that you have to fill in that control before the form will successfully submit. for example: <form> <fieldset> <legend>feedback form</legend> <div> <label for="fname">first name: </label> <input id="fname" name="fname"
type="text" required> </div> <div> <label for="lname">last name: </label> <input id="lname" name="lname"
type="text" required> </div> <div> <label for="email">email address (include if you want a response): </label> <input id="email" name="email"
type="email"> </div> <div><button>submit</button></div> </fieldset> </form> here, the first name and last name are required, but the email address is optional. you can match these two states using the :required and :optional pseud...
...And 24 more matches
JSAPI reference
ecallback added in spidermonkey 17 js_newcompartmentandglobalobject added in spidermonkey 1.8.1 obsolete since jsapi 16 js_entercrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 js_leavecrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 locale callbacks: struct jslocalecallbacks js_getlocalecallbacks js_setlocalecallbacks locale callback
types: jslocaletouppercase jslocaletolowercase jslocalecompare jslocaletounicode scripts just running some javascript code is straightforward: class js::compileoptions added in spidermonkey 17 class js::owningcompileoptions added in spidermonkey 31 class js::readonlycompileoptions added in spidermonkey 31 class js::sourcebufferholder added in spidermonkey 31 js::evaluate added in spide...
...n js_decompilefunctionbody js_compilefunction obsolete since jsapi 36 js_compilefunctionforprincipals obsolete since jsapi 28 js_compileucfunction obsolete since jsapi 36 js_compileucfunctionforprincipals obsolete since jsapi 28 error handling struct jserrorformatstring added in spidermonkey 17 class jserrorreport class js::autosaveexceptionstate added in spidermonkey 31 enum jsexn
type added in spidermonkey 17 js_reporterror js_reportwarning js_reporterrornumber js_reporterrornumberuc js_reporterrorflagsandnumber js_reporterrorflagsandnumberuc js_reporterrornumberucarray added in spidermonkey 24 js_reportoutofmemory js_reportallocationoverflow added in spidermonkey 1.8 js_geterrorreporter js_seterrorreporterobsolete since jsapi 52 js_errorfromexception js_geterrorp...
...ed in spidermonkey 17 js_reporterror js_reportwarning js_reporterrornumber js_reporterrornumberuc js_reporterrorflagsandnumber js_reporterrorflagsandnumberuc js_reporterrornumberucarray added in spidermonkey 24 js_reportoutofmemory js_reportallocationoverflow added in spidermonkey 1.8 js_geterrorreporter js_seterrorreporterobsolete since jsapi 52 js_errorfromexception js_geterrorproto
type jsreport_is_exception jsreport_is_strict jsreport_is_warning jsreport_is_strict_mode_error the following functions allow c/c++ functions to throw and catch javascript exceptions: js::createerror added in spidermonkey 38 js_isexceptionpending js_getpendingexception js_setpendingexception js_clearpendingexception js_throwstopiteration added in spidermonkey 1.8 js_isstopiteration adde...
...And 24 more matches
Understanding WebAssembly text format - WebAssembly
as a tree of nodes that describe the module’s structure and its code. unlike the abstract syntax tree of a programming language, though, webassembly’s tree is pretty flat, mostly consisting of lists of instructions. first, let’s see what an s-expression looks like. each node in the tree goes inside a pair of parentheses — ( ... ). the first label inside the parenthesis tells you what
type of node it is, and after that there is a space-separated list of either attributes or child nodes. so that means the webassembly s-expression: (module (memory 1) (func)) represents a tree with the root node “module” and two child nodes, a "memory" node with the attribute "1" and a "func" node. we’ll see shortly what these nodes actually mean. the simplest module let's start with the s...
...y to your module ok, that’s not very interesting, let’s add some executable code to this module. all code in a webassembly module is grouped into functions, which have the following pseudo-code structure: ( func <signature> <locals> <body> ) the signature declares what the function takes (parameters) and returns (return values). the locals are like vars in javascript, but with explicit
types declared. the body is just a linear list of low-level instructions. so this is similar to functions in other languages, even if it looks different because it is an s-expression. signatures and parameters the signature is a sequence of parameter
type declarations followed by a list of return
type declarations. it is worth noting here that: the absence of a (result) means the function d...
...imilar to functions in other languages, even if it looks different because it is an s-expression. signatures and parameters the signature is a sequence of parameter
type declarations followed by a list of return
type declarations. it is worth noting here that: the absence of a (result) means the function doesn’t return anything. in the current iteration, there can be at most 1 return
type, but later this will be relaxed to any number. ...
...And 24 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
plicit specification. note: although there is a specification document, its markup is based on implementations and markup as of 2001, and current xul differs from it in many aspects. for the latest xul specifications, please see the xul reference on mdc and the xul page in the mozilla wiki. for each element that i explain in this chapter, i will illustrate it with a source code example. you can
type these examples up and open them in firefox to see how they behave and appear. you can download a file with all the source code examples from: fixme: attache the translated tarball - paul task !. xul display methods xul is used almost exclusively in mozilla applications like firefox and thunderbird, and extensions for them, but other web browsers based on firefox or the gecko engine, and even we...
...chrome://global/skin/"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here. --> </window> listing 2: general structure of a xul document even with the internationalization of firefox and extensions, this kind of xml function is being used. reading in style sheets xul uses css to specify the appearance of its elements. again, since xul is a
type of xml, stylesheets are read in using the xml-stylesheet processing instruction. on line 2 of listing 2, we’re reading in the theme’s standard style sheet. by referring to a special style sheet within chrome://global/skin/, we can make label and button sizes, window background color, etc, match the currently selected theme in firefox. we can also read in a stylesheet that we had set up ourse...
...mple states without any complex scripts. note: these values are stored in localstore.rdf, inside the user profile. in order for the persist attribute to record the states of other elements, each of those elements must have its id set. widgets that can be used in xul root elements xul documents use different root elements for different purposes. in this section, we’ll look at three typical
types of root element: the window, page, and dialog elements. root elements use the window
type attribute as an arbitrary identifier for the
type of window. for example, firefox uses the window
type 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 wind...
...And 23 more matches
menuitem - Archive of obsolete content
ul 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. ...
... 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. ...
...this should be one of th...
...And 23 more matches
Index - Learn web development
14 common questions codingscripting, infrastructure, learn, web, webmechanics this section of the learning area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the html or css learning articles.) these articles are designed to work on their own. 15 how can we design for all
types of users? accessibility, beginner, design, example, intro, mobile, needsactivelearning when you're building a website, one top issue to consider is universal design: accommodating all users regardless of disability, technical constraints, culture, location, and so on. 16 how do i start to design my website? beginner, composing, needsactivelearning, needsschema when...
..., oojs, object-oriented, objects, l10n:priority in this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it. 66 inheritance in javascript article, beginner, codingscripting, constructor, function, getter, inheritance, javascript, learn, oojs, oop, object, object member, proto
type, extends, l10n:priority, setter this article has covered the remainder of the core oojs theory and syntax that we think you should know now. at this point you should understand javascript object and oop basics, proto
types and prototypal inheritance, how to create classes (constructors) and object instances, add features to classes, and create subclasses that inherit from other classes. ...
...actice article, beginner, canvas, codingscripting, guide, javascript, learn, objects, tutorial, l10n:priority we hope you had fun writing your own real world random bouncing balls example, using various object and object-oriented techniques from throughout the module! this should have given you some useful practice in using objects, and good real world context. ...
...And 23 more matches
Property cache
spidermonkey's property cache is an internal data structure used to speed up property accesses in the interpreter and to communicate between the interpreter and jit. warning: the details below are obsolete. shape integers do not exist anymore. the property cache still exists, but it is simpler now. spidermonkey mainly uses
type inference to determine which properties are being accessed; in cases where
type inference does not find the exact shape of the object being accessed, spidermonkey uses a pic (polymorphic inline caches) to store the result of the lookup. the property cache is only used in the interpreter. the property cache was introduced in bug 365851. basics in general, accessing a property of a native object entails: a property lookup; examining the shape to see how the pro...
... execution of the same instruction. the jit reads the property cache too, as it needs the same information when recording such an instruction. if there is a cache miss, the jit performs parts 1 and 2 of the property access and fills the cache to avoid redoing that work in the interpreter. (in some cases this is necessary for correctness. when recording a getprop, the jit needs to know the result
type before the interpreter executes the instruction. 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 ...
...}prop or prop{inc,dec}. nor do operations such as add that only need to look up a property (.tostring) in unusual cases. throughout this article, phrases such as "own property" should be taken to refer to the low-level representation of properties in scopes and shape chains. in the case of shared permanent properties, this differs from the notion of "own property" seen by scripts via object.proto
type.hasownproperty. shape native objects have a shape, a 24-bit unsigned integer such that: basic layout guarantee — if at time t0 the object x has shape s and at time t1 the object y has shape s, and no shape-regenerating gc occurred, then y at t1 has the same jsclass, jsobjectops, proto
type, and property specs as x had at t0. to be more precise regarding property specs, y's properties hav...
...And 23 more matches
JIT Optimization Strategies
return true; } return false; } will have the loop compiled into the following when testarray gets hot. for (var i = 0; i < array.length; i++) { if (array[i] > 100) return true; } when this optimization is successful, property access is eliminated entirely and replaced with an inline constant. ...
...ill have the loop compiled into the following when testarray gets hot. for (var i = 0; i < array.length; i++) { if (array[i] > 100) return true; } when this optimization is successful, property access is eliminated entirely and replaced with an inline constant. getprop_constant attempts to optimize reading a property that contains a uniquely-
typed (or "singleton") object. ...
...ot. for (var i = 0; i < array.length; i++) { if (array[i] > 100) return true; } when this optimization is successful, property access is eliminated entirely and replaced with an inline constant. getprop_constant attempts to optimize reading a property that contains a uniquely-
typed (or "singleton") object. with uniquely-
typed objects, it is guaranteed that no other object has that same
type. ...
...And 23 more matches
Drag Operations - Web APIs
ansfer is a datatransfer object). when a drag occurs, data must be associated with the drag which identifies what is being dragged. for example, when dragging the selected text within a textbox, the data associated with the drag data item is the text itself. similarly, when dragging a link on a web page, the drag data item is the link's url. the drag data contains two pieces of information, the
type (or format) of the data, and the data's value. the format is a
type string (such as text/plain for text data), and the value is a string of text. when the drag begins, you add data by providing a
type and the data. during the drag, in an event listener for the dragenter and dragover events, you use the data
types of the data being dragged to check whether a drop is allowed. for instance, a drop t...
...e. the format is a
type string (such as text/plain for text data), and the value is a string of text. when the drag begins, you add data by providing a
type and the data. during the drag, in an event listener for the dragenter and dragover events, you use the data
types of the data being dragged to check whether a drop is allowed. for instance, a drop target that accepts links would check for the
type text/uri-list. during a drop event, a listener would retrieve the data being dragged and insert it at the drop location. the drag data's
types property returns a list of mime-
type like domstrings, such as text/plain or image/jpeg. you can also create your own
types. the most commonly used
types are listed in the article recommended drag
types. a drag may include data items of several different ...
... text/uri-list. during a drop event, a listener would retrieve the data being dragged and insert it at the drop location. the drag data's
types property returns a list of mime-
type like domstrings, such as text/plain or image/jpeg. you can also create your own
types. the most commonly used
types are listed in the article recommended drag
types. a drag may include data items of several different
types. this allows data to be provided in more specific
types, often custom
types, yet still provide fallback data for drop targets that do not support more specific
types. it is usually the case that the least specific
type will be normal text data using the
type text/plain. this data will be a simple textual representation. to set a drag data item within the datatransfer, use the setdata() method. ...
...And 23 more matches
Gecko info for Windows accessibility vendors
y of the screen reader. if it is a role_application, role_dialog or role_alert then stay in focus tracking mode -- there is no need to parse the document. in addition, if it is a role_alert, a screen reader should treat it as a message box -- that is, to read the entire contents. these roles can occur on content because of the new accessible dhtml technology which allows the author to specify the
type of document or container. once you know that you have a document, go up the ancestor chain of windows until you see a mozillacontentwindowclass or a mozillauiwindowclass. if it is a content window, you may use accessibleobjectfromwindow() to get the root iaccessible for the content, and begin traversing the tree from there. gecko also helps determine when to load a new window by firing two ev...
... enum { navrelation_flows_from = 0x1007 }; these two relations allow the reading flow to break out of the normal dom flow. both flows_to and flows_from are set in markup from the single dynamic content accessibility aaa:flowsto relation -- the inverse flow_from relation is automatically calculated. these relations can affect the calculation for the next next or previous item of a certain
type. ...
...eak out of the normal dom flow. both flows_to and flows_from are set in markup from the single dynamic content accessibility aaa:flowsto relation -- the inverse flow_from relation is automatically calculated. these relations can affect the calculation for the next next or previous item of a certain
type. ...
...And 22 more matches
CustomizableUI.jsm
essly not really aware about the specific ui used by users to make customizations. this is handled by customizemode.jsm, which interacts with customizableui through a listener mechanism. areas areas are parts of the user interface in which customizable widgets can be placed. customizableui assumes that each area it is told about is present in every browser window. customizableui is aware of two
types of areas: toolbars and the menu panel. areas are registered using the registerarea method and unregistered using the unregisterarea method. when a customizable toolbar's xbl binding is constructed (generally, that is when a <toolbar customizable="true"/> node is appended to the document and isn't invisible), the binding will call into customizableui and register the toolbar's node as being one ...
...t the 'overflowable' property to true, and provide the id of the anchor in the 'anchor' property. widgets widget is the term that customizableui uses for each of the items in a customizable area. note that these are also abstract cross-window objects; customizableui will manage the actual dom manipulation involved with adding/moving/removing widgets in all windows for you. ...
... will manage the actual dom manipulation involved with adding/moving/removing widgets in all windows for you. there are three main
types of widgets: 'legacy' xul widgets, which are the way customizableui represents widgets whose dom representation is present (or overlaid) into a window; api-style widgets, which are the new widgets customizableui can create and manage for you. these come in 3
types themselves: button which are simple toolbar buttons which do something when clicked view which are toolbar buttons with a 'view' of further options. the view can be shown as its own panel when such a widget is in the toolbar, or as a sliding 'subview' of the menu panel when such a widget is in the menu panel. custom which are widgets that are custom-created by some js suppli...
...And 22 more matches
button - Archive of obsolete content
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. ...
... 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. attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlg
type, group, icon, image, label, open, orient, tabindex,
type properties accesskey, accessible
type, autocheck, checkstate, checked, command, crop, dir, disabled, dlg
type, group, image, label, open, orient, tabindex,
type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey
type: character this should be set to a character that is used as a shortcut key. this should be one of the charac...
..., crop, dir, disabled, dlg
type, group, image, label, open, orient, tabindex,
type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey
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. autocheck
type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button
type should be "checkbox" or "radio". ...
...And 21 more matches
IAccessibleText
other-licenses/ia2/accessibletext.idlnot scriptable a structure containing a substring and the start and end offsets in the enclosing string. 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this enum defines values which specify a text() boundary
type. ia2_text_boundary_sentence is optional. when a method doesn't implement this method it must return s_false. ...
...this enum is used in textbeforeoffset(), textatoffset(), and textafteroffset(). ...
...this enum is used in textbeforeoffset(), textatoffset(), and textafteroffset(). ...
...And 21 more matches
New in JavaScript 1.3 - Archive of obsolete content
note that communicator and navigator 4.0-4.05 and earlier ignored scripts with the language attribute set to "javascript1.3" and higher. <script language="javascript1.2"> <!-- javascript for navigator 4.0. --> <script language="javascript1.3"> <!-- javascript for navigator 4.5. ...
...navigator 4.0-4.05 and earlier ignored scripts with the language attribute set to "javascript1.3" and higher. <script language="javascript1.2"> <!-- javascript for navigator 4.0. --> <script language="javascript1.3"> <!-- javascript for navigator 4.5. ...
...ed scripts with the language attribute set to "javascript1.3" and higher. <script language="javascript1.2"> <!-- javascript for navigator 4.0. --> <script language="javascript1.3"> <!-- javascript for navigator 4.5. ...
...And 20 more matches
LiveConnect Overview - Archive of obsolete content
this chapter describes using liveconnect technology to let java and javascript code communicate with each other. the chapter assumes you are familiar with java programming. working with wrappers in javascript, a wrapper is an object of the target language data
type that encloses an object of the source language. when programming in javascript, you can use a wrapper object to access methods and fields of the java object; calling a method or accessing a property on the wrapper results in a call on the java object. ...
...in javascript, you can use a wrapper object to access methods and fields of the java object; calling a method or accessing a property on the wrapper results in a call on the java object. on the java side, javascript objects are wrapped in an instance of the class netscape.javascript.jsobject and passed to java. when a javascript object is sent to java, the runtime engine creates a java wrapper of
type jsobject; when a jsobject is sent from java to javascript, the runtime engine unwraps it to its original javascript object
type. the jsobject class provides an interface for invoking javascript methods and examining javascript properties. javascript to java communication when you refer to a java package or class, or work with a java object or array, you use one of the special liveconnect objects.
...able 9.1 the liveconnect objects object description javaarray a wrapped java array, accessed from within javascript code. javaclass a javascript reference to a java class. javaobject a wrapped java object, accessed from within javascript code. javapackage a javascript reference to a java package. note: because java is a strongly
typed language and javascript is weakly
typed, the javascript runtime engine converts argument values into the appropriate data
types for the other language when you use liveconnect. see data
type conversion for complete information. in some ways, the existence of the liveconnect objects is transparent, because you interact with java in a fairly intuitive way. for example, you can create a java string...
...And 20 more matches
sample2
/* 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/. ...
...on earlier versions of nss that * don't support error tables, pr_errortostring will return "unknown code". */ #ifndef port_errortostring #define port_errortostring(err) pr_errortostring((err), pr_language_i...
...+ 0, sec_error_token_not_logged_in = (sec_error_base + 155), sec_error_end_of_list } secerrorcodes; #endif /* port_errortostring introduced in nss 3.13. on earlier versions of nss that * don't support error tables, pr_errortostring will return "unknown code". ...
...And 20 more matches
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 / seamonkey 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, i...
... .getservice(components.interfaces.nsiwindowmediator); method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only! ...
... method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only! ...
...And 20 more matches
Migrating from webkitAudioContext - Web APIs
d execute in the mean time. because of these problems, this version of the createbuffer() method has been removed, and you should use the asynchronous decodeaudiodata() method instead. ...
...odedbuffer = context.createbuffer(xhr.response, false); if (decodedbuffer) { // decoding was successful, do something useful with the audio buffer } else { alert("decoding the audio buffer failed"); } }; converting this code to use decodeaudiodata() is relatively simple, as can be seen below: var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.response
type = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buffer failed"); }); }; note that the decodeaudiodata() method is asynchronous, which means that it will return immediately, and then...
...so: var gainnode = context.creategain(); gainnode.gain.settargetattime(0.0, 10.0, 1.0); enumerated values that changed the original webkitaudiocontext api used c-style number based enumerated values in the api. those values have since been changed to use the web idl based enumerated values, which should be familiar because they are similar to things like the the htmlinputelement property
type. ...
...And 20 more matches
Using Web Workers - Web APIs
tructured cloning. ...
...let's create for didactical purpose a function named emulatemessage(), which will simulate the behavior of a value that is cloned and not shared during the passage from a worker to the main page or vice versa: function emulatemessage(vval) { return eval('(' + json.stringify(vval) + ')'); } // tests // test #1 var example1 = new number(3); console.log(
typeof example1); // object console.log(
typeof emulatemessage(example1)); // number // test #2 var example2 = true; console.log(
typeof example2); // boolean console.log(
typeof emulatemessage(example2)); // boolean // test #3 var example3 = new string('hello world'); console.log(
typeof example3); // object console.log(
typeof emulatemessage(example3)); // string // test #4 var example4 = { 'name': 'john smith', "age": 43 }; console...
...as you will probably know by now, messages...
...And 20 more matches
HTTP Index - HTTP
resources on the web domain, http, path, scheme, syntax, uri, url, url syntax, web, fragment, port, query, resources the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else. each resource is identified by a uniform resource identifier (uri) used throughout http for identifying resources. ...
...web domain, http, path, scheme, syntax, uri, url, url syntax, web, fragment, port, query, resources the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else. each resource is identified by a uniform resource identifier (uri) used throughout http for identifying resources. ...
...p, path, scheme, syntax, uri, url, url syntax, web, fragment, port, query, resources the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else. each resource is identified by a uniform resource identifier (uri) used throughout http for identifying resources. ...
...And 20 more matches
Object.create() - JavaScript
the object.create() method creates a new object, using an existing object as the proto
type of the newly created 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.create(proto, [propertiesobject]) parameters proto the object which should be the proto
type of the newly-created object. ...
...github.com/mdn/interactive-examples and send us a pull request. syntax object.create(proto, [propertiesobject]) parameters proto the object which should be the proto
type of the newly-created object. propertiesobject optional if specified and not undefined, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its proto
type chain) specify property descriptors to be added to the newly-created object, with the corresponding property names. these properties correspond to the second argument of object.defineproperties(). return value a new object with the specified proto
type object and properties. exceptions the proto parameter has to be either null or an object excluding primitive wrapper objects. if proto i...
...rty descriptors to be added to the newly-created object, with the corresponding property names. these properties correspond to the second argument of object.defineproperties(). return value a new object with the specified proto
type object and properties. exceptions the proto parameter has to be either null or an object excluding primitive wrapper objects. if proto is neither of these a
typeerror is thrown. custom and null objects a new object created from a completely custom object (especially one created from the null object, which is basically a custom object with no members) can behave in unexpected ways. this is especially true when debugging, since common object-property converting/detecting utility functions may generate errors, or simply lose information (especially if usin...
...And 20 more matches
Rosetta - Archive of obsolete content
gnize it. also, regarding some languages (like c), it is even not well defined the meaning of part of their semantics in respect to a scope that is more restricted than the full access to the resources they usually deal with – imagine, for example, the meaning of a c pointer within a html page! nevertheless, the increasing computational power of modern 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). beyond ecmascript this is not the place for showing a full compiler written in ecmascript. we can show, however, a possible way to start from. the following ...
...r a smaller task: parsing exotic programming languages (i.e., creating compilers). beyond ecmascript this is not the place for showing a full compiler written in ecmascript. we can show, however, a possible way to start from. the following code is nothing but the base for an extensible collection of compilers. but by default, no compilers are loaded. it relies on the fact that unrecognized mime
types will be simply ignored: this allows us to manually parse them. for a fast overview on the code proposed here you can git clone https://github.com/madmurphy/rosetta.js, or, at your choice, directly download this .zip file. rosetta.js: library "use strict"; /*\ |*| |*| :: rosetta.js :: |*| |*| a possible, extensible collection of compilers to native ecmascript. |*| |*| november 12, 2014 |...
...ts/rosetta |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later. ...
...And 19 more matches
menulist - Archive of obsolete content
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. ...
...an ellipsis will be used in ...
...ue="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes accesskey
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 reversed. start the text will be cropped on its left side in left-to-right text locales,...
...And 19 more matches
panel - Archive of obsolete content
a panel may also be opened via a script using the openpopup method. ...
...a panel may also be opened via a script using the openpopup method. ...
...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, ignorekeys, label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top,
type properties accessible
type, 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"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read...
...And 19 more matches
source-editor.jsm
. ...
...); void init(element aelement, object aconfig, function acallback); search operations number find(string astring, [optional] object options); number findnext(boolean awrap); number findprevious(boolean awrap); event management void addeventlistener(string aevent
type, function acallback); void removeeventlistener(string aevent
type, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations void focus(); number gettopindex(); boolean hasfocus(); void settop...
...you can then use this value to detect when the contents of the text are different from your most recent save. in addition, when this value changes, the "dirtychanged" event is sent. editorelement element the element containi...
...And 19 more matches
SVGLength - Web APIs
svg length interface the svglength interface correspond to the <length> basic data
type. an svglength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
... svg length interface the svglength interface correspond to the <length> basic data
type. an svglength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...the <length> basic data
type. an svglength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...And 19 more matches
Working with objects - JavaScript
is chapter describes how to use objects, properties, functions, and methods, and how to create your own objects. objects overview objects in javascript, just as in many other programming languages, can be compared to objects in real life. the concept of objects in javascript can be understood with real life, tangible objects. in javascript, an object is a standalone entity, with properties and
type. compare it with a cup, for example. a cup is an object, with properties. a cup has a color, a design, weight, a material it is made of, etc. the same way, javascript objects can have properties, which define their characteristics. objects and properties a javascript object has properties associated with it. a property of an object can be explained as a variable that is attached to the object. ...
...cessed using the square bracket notation. this notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime). ...
... for...in to iterate over all the enumerable properties of an object. ...
...And 19 more matches
Classes and Inheritance - Archive of obsolete content
have native support for classical inheritance. instead, it uses something called prototypal inheritance. as it turns out, it is possible to emulate classical inheritance using prototypal inheritance, but not without writing a significant amount of boilerplate code. classes in javascript are defined using constructor functions. ...
...le to emulate classical inheritance using prototypal inheritance, but not without writing a significant amount of boilerplate code. classes in javascript are defined using constructor functions. each constructor function has an associated object, known as its proto
type, which is shared between all instances of that class. we will show how to define classes using constructors, and how to use proto
types to efficiently define member functions on each instance. classical inheritance can be implemented in javascript using constructors and proto
types. we will show how to make inheritance work correctly with respect to constructors, proto
types, and the instanceof operator, and how to override methods in subclasses. the sdk uses a special constructor internally, known as class, to create constructors...
...gal to perform ordinary function calls on them. in fact, some people (including the add-on sdk team) prefer to use constructors this way. however, since the value of this is undefined for ordinary function calls, we need to add some boilerplate code to convert them to constructor calls: function shape(x, y) { if (!this) return new shape(x, y); this.x = x; this.y = y; } proto
types every object has an implicit property, known as its proto
type. when javascript looks for a property, it first looks for it in the object itself. if it cannot find the property there, it looks for it in the object's proto
type. if the property is found on the proto
type, the lookup succeeds, and javascript pretends that it found the property on the original object. every function has an explicit p...
...And 18 more matches
core/heritage - Archive of obsolete content
machinery being exposed: // defining a simple class function dog(name) { // classes are for creating instances, calling them without `new` changes // behavior, which in majority cases you need to handle, so you end up // with additional boilerplate. ...
...or creating instances, calling them without `new` changes // behavior, which in majority cases you need to handle, so you end up // with additional boilerplate. if (!(this instanceof dog)) return new dog(name); this.name = name; }; // to define methods you need to make a dance with a special 'proto
type' // property of the constructor function. this is too much machinery exposed. ...
...eating instances, calling them without `new` changes // behavior, which in majority cases you need to handle, so you end up // with additional boilerplate. if (!(this instanceof dog)) return new dog(name); this.name = name; }; // to define methods you need to make a dance with a special 'proto
type' // property of the constructor function. this is too much machinery exposed. ...
...And 18 more matches
prefwindow - Archive of obsolete content
havior of the window and in particular the list of prefpanes. prefer the classical window.opendialog() with the following window features: "chrome,titlebar,toolbar,centerscreen,dialog=yes". ...
....opendialog() with the following window features: "chrome,titlebar,toolbar,centerscreen,dialog=yes". ...
...onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, 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=...
...And 18 more matches
XForms Custom Controls - Archive of obsolete content
ually (hopefully?) there will be an "official" and common way to customize your form's user interface across all xforms processors. why do you need this you will probably find that your need for customization will fall into one of the following categories: custom presentation - xforms controls as rendered by the mozilla xforms processor do not provide the right look and feel for you. ...
...r form's user interface across all xforms processors. why do you need this you will probably find that your need for customization will fall into one of the following categories: custom presentation - xforms controls as rendered by the mozilla xforms processor do not provide the right look and feel for you. ...
... the solution you are looking for. for example, you might want to render images that are held inside an instance document or you would like to show a disabled trigger when its bound node becomes irrelevant rather than having it not display (the current default behavior). every xforms control's presentation has its own xbl binding. in many cases different values provided for the appearance or media
type attributes will determine which xbl binding will be used for a particular xforms control on the form. as mentioned in the spec, the appearance attribute can be used to influence the look and feel of a control even when all other conditions remain constant. for example, in the mozilla xforms extension we will render a combobox widget when appearance='minimal' on a select1 control. should the form ...
...And 18 more matches
How to structure a web form - Learn web development
ed inside. many assistive technologies will use the <legend> element as if it is a part of the label of each control inside the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda will speak the legend's content before speaking the label of each control. ...
...de the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda will speak the legend's content before speaking the label of each control. here is a little example: <form> <fieldset> <legend>fruit juice size</legend> <p> <input
type="radio" name="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <input
type="radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <input
type="radio" name="size" id="size_3" value="large"> <label for="size_3">large</label> </p> </fieldset> </form> note: you can find this example in fieldset-legend.html (see it live also). when reading the above form, a screen reader will speak "fruit juice size sma...
...lement is the formal way to define a label for an html form widget. this is the most important element if you want to build accessible forms — when implemented properly, screenreaders will speak a form element's label along with any related instructions, as well as it being useful for sighted users. take this example, which we saw in the previous article: <label for="name">name:</label> <input
type="text" id="name" name="user_name"> with the <label> associated correctly with the <input> via its for attribute (which contains the <input> element's id attribute), a screenreader will read out something like "name, edit text". there is another way to associate a form control with a label — nest the form control within the <label>, implicitly associating it. <label for="name"> name: <input...
...And 18 more matches
Declaring and Using Callbacks
c functions occasionally take function pointers as arguments, which are generally used as callbacks. in these cases, js-c
types allows you to pass a regular javascript function as the callback. this is very powerful, since it allows native code to transparently call into javascript. warning: callbacks must be invoked on the same thread with which they were registered. there is no concurrency logic in js-c
types, so invoking callbacks on other threads will cause things to crash. prerequiste understanding abi function
type declaring callbacks a callback is declared by using c
types.function
type. ...
...rning: callbacks must be invoked on the same thread with which they were registered. there is no concurrency logic in js-c
types, so invoking callbacks on other threads will cause things to crash. prerequiste understanding abi function
type declaring callbacks a callback is declared by using c
types.function
type. the first argument is the calling convention, the second argument is the return
type, and the third is an array of arguments the callback expects. the return
type of the javascript callback must match the return
type declared, otherwise js-c
types will throw an error saying "unexpected return
type". ...
...ction
type. the first argument is the calling convention, the second argument is the return
type, and the third is an array of arguments the callback expects. the return
type of the javascript callback must match the return
type declared, otherwise js-c
types will throw an error saying "unexpected return
type". examples example 1 this callback that returns bool and has two arguments. ...
...And 18 more matches
Working with ArrayBuffers
introductory reading the pointer
types section of the
type conversion page explains the fundamentals of this operation. the second code example provides a specific illustration of the operation. an arraybuffer is a simply byte array. the js-c
types equivalent is a c
types.uint8_t.array(###) (c
types.unsigned_char are also c
types.uint8_t). bug 732936 includes a discussion of working with an arraybuffer. this feature is based on the following work: //github.com/realityripple/uxp/blob/master/js/src/c
types/c
types.cpp#3080 //github.com/realityripple/uxp/blob/master/js/src/vm/arraybufferobject.cpp#1301 example 1 - image data the following example illustrates how to transfer a byte array pointed by c
types.uint8_t.ptr to imagedata of canvas. this example is based on the fact that the imagedata r...
...view for an arraybuffer. ...
...is a arraybuffer // incomingbuffer is a
typedarray var imagedata2 = context.createimagedata(w, h); imagedata2.data.set(incomingbuffer); further, if you have a byte array pixelbuffer, and you need to create imagedata from it. the data property holds an array of bytes. we start with the following: // pixelbuffer is a pointer to a rgba pixel buffer of 400x400 image. pixelbuffer.tostring(); // "c
types.uint8_t.ptr(c
types.uint64("0x352e0000"))" var imgwidth = 400; var imgheight = 400; var myimgdat = new imagedata(imgwidth, imgheight); method 1: passing array
type cdata to uint8clampedarray.proto
type.set one method is to get into a js-c
types array, and then set it into the imagedata, as illustrated by the following code example. // cast pointer to array, to pass to uint8clampedarray.prototyp...
...And 18 more matches
Using Fetch - Web APIs
he path to the resource you want to fetch — and returns a promise containing the response (a response object). this is just an http response, not the actual json. to extract the json body content from the response, we use the json() method (defined on the body mixin, which is implemented by both the request and response objects.) note: the body mixin also has similar methods to extract other
types of body content; see the body section for more. fetch requests are controlled by the connect-src directive of content security policy rather than the directive of the resources it's retrieving. supplying request options the fetch() method can optionally accept a second parameter, an init object that allows you to control a number of different settings: see fetch() for the full options avail...
...sync function postdata(url = '', data = {}) { // default options are marked with * const response = await fetch(url, { method: 'post', // *get, post, put, delete, etc. ...
...{ // default options are marked with * const response = await fetch(url, { method: 'post', // *get, post, put, delete, etc. ...
...And 18 more matches
tab - Archive of obsolete content
ced 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. ...
...orial. attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessible
type, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes accesskey
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. afterselected
type: boolean this is set to true if the tab is immediately after the currently selected tab. this is automatically set when needed and you shouldn't adjust it manually. this is primarily useful for th...
... characters that appears in the label attribute for the element. afterselected
type: boolean this is set to true if the tab is immediately after the currently selected tab. this is automatically set when needed and you shouldn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. beforeselected
type: boolean this is set to true if the tab is immediately before the currently selected tab. this is set automatically set when needed and you shouldn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. ...
...And 17 more matches
Examples - Archive of obsolete content
load the file to a web server and you're done. please note that the examples 4, 5 and 6 require a file named style.css to exist in the same directory as the example. you can get the contents of style.css at the bottom of this page. examples for "problems with inline style and script" problem 1 <!-- this file should have a .xhtml extension and will generate an error when parsed. --> <!doc
type html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 1 - < in xhtml</title> <meta http-equiv="content-
type" content="application/xhtml+xml; charset=utf-8" /> <script
type="text/javascript"> var i = 0; while (++i > 10) { // ... ...
...ent-
type" content="application/xhtml+xml; charset=utf-8" /> <script
type="text/javascript"> var i = 0; while (++i > 10) { // ... } </script> </head> <body> <h1>problem 1 - < in xhtml</h1> <p> this document is not well formed due to the use of a raw <. ...
...he use of a raw <. ...
...And 17 more matches
Plug-in Development Overview - Gecko Plugin API Reference
usnext » writing plug-ins once you decide what you want your plug-in to do, creating it is a simple process. a basic overview of the plug-in development process is given in the following steps. plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the browser and the special media for which the plug-in is created. decide the mime
type for the plug-in (see registering plug-ins). set up your development environment properly. you can use a variety of environments to create a plug-in, but make sure that you have the necessary files from the plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. you'll find an overview of the plug-in api method...
...lug-in directory for your operating system. see installing plug-ins. test your plug-in and debug as necessary. create an html page and embed the plug-in object. for information about the html elements to use, see using html to display plug-ins. to see your plug-in in action, simply display the html page that calls it in the browser. registering plug-ins gecko identifies a plug-in by the mime
type it supports. when it needs to display data of a particular mime
type, the browser finds and invokes the plug-in object that supports that
type. the data can come from either an object element in an html file (where the object or embed element either specifies the mime
type directly or references a file of that
type), from a separate non-html file of that mime
type, or from the server. the server...
...t needs to display data of a particular mime
type, the browser finds and invokes the plug-in object that supports that
type. the data can come from either an object element in an html file (where the object or embed element either specifies the mime
type directly or references a file of that
type), from a separate non-html file of that mime
type, or from the server. the server looks for the mime
type registered by a plug-in, based on the file extension, and starts sending the file to the browser. the browser looks up the media
type, and if it finds a plug-in registered to that
type, loads the plug-in software. when it starts up, the browser checks for plug-in modules for the platform and registers them. ...
...And 17 more matches
Inheritance in JavaScript - Learn web development
erequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects). objective: to understand how it is possible to implement inheritance in javascript. prototypal inheritance so far we have seen some inheritance in action — we have seen how proto
type chains work, and how members are inherited going up a chain. but mostly this has involved built-in browser functions. how do we create an object in javascript that inherits from another object? let's explore how to do this with a concrete example. getting started first of all, make yourself a local copy of our oojs-class-inheritance-start.html file (see it running live also). inside here you'l...
...me person() constructor example that we've been using all the way through the module, with a slight difference — we've defined only the properties inside the constructor: function person(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; }; the methods are all defined on the constructor's proto
type. for example: person.proto
type.greeting = function() { alert('hi! i\'m ' + this.name.first + '.'); }; note: in the source code, you'll also see bio() and farewell() methods defined. later you'll see how these can be inherited by other constructors. say we wanted to create a teacher class, like the one we described in our initial object-oriented definition, which inherits all the members fr...
... the width and height properties by doing this (as well as the other steps described below, of course): function blueglassbrick() { brick.call(this); this.opacity = 0.5; this.color = 'blue'; } note that we've only specified this inside call() — no other parameters are required as we are not inheriting any properties from the parent that are set via parameters. ...
...And 17 more matches
WebRequest.jsm
beforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callback) adding listeners use addlistener to add a listener to a particular event. it takes one mandatory argument and two optional arguments, as detailed below. name
type description callback function the callback argument is a function to be called when the event is triggered. it's passed an object whose structure will vary depending on the event you're listening to: see the event-specific documentation for details. filter object the optional filter argument is used to restrict the requests for which the listener...
...er callback will be invoked. see filtering. opt_extrainfospec array of string the optional opt_extrainfospec argument lets you pass extra instructions for the handling of events. the instructions you can pass here vary depending on the event you're listening to: see the event-specific documentation for details. in particular, "blocking" may be passed to several event
types, and will make the event dispatch synchronous, so the browser will wait for the event listener to return before continuing with the request. this then enables the event listener to modify or cancel the request. see modifying & canceling requests. some examples of using addlistener(). to remove a listener for an event, call removelistener on the event in question, passing it the liste...
...tener(). to remove a listener for an event, call removelistener on the event in question, passing it the listener to remove. filtering the filter argument is the second argument to addlistener(). if you don't pass filter, then the listener is invoked for every web request the browser makes that triggers that particular event. filter is an object that may contain up to two properties: urls and
types. name
type description urls matchpattern only invoke the listener for urls that match one of the patterns.
types array of strings. an array of resource
types. only invoke the listener for resource
types that match one of the
types given. to specify match patterns, first import the "matchpattern.jsm" module, then construct a matchpattern. t...
...And 17 more matches
NSS Tools ssltap
window from which it was called. it can do this for plain http connections or any tcp protocol, as well as for ssl streams, as described here. the tool cannot and does not decrypt any encrypted message data. you use the tool to look at the plain text and binary data that are part of the handshake procedure, before the secure connection is established. syntax to run the ssl debugging tool,
type this command in a command shell: ssltap [-vhfsxl] [-p port] hostname:port options the command does not require any options other than hostname:port, but you normally use them to control the connection interception and output. the options for the command are the following: -v print a version string for the tool. -h turn on hex/ascii printing. instead of outputting raw data, the comman...
... (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x000006) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d30x2592 }}]<-- [sslrecord { 0: 16 03 00 03 e5 |..... ...
... (0x000006) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d30x2592 }}]<-- [sslrecord { 0: 16 03 00 03 e5 |.....
type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f
type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 |wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f |\.uc§l.Ç.d<paho. session id = { length = 32 contents = {..} 0: 14 11 07 ...
...And 17 more matches
nsINavBookmarkObserver
toolkit/components/places/nsinavbookmarksservice.idlscriptable this interface is an observer for bookmark changes. ...
...e since gecko 1.9 void onfoldermoved(in print64 folder, in print64 oldparent, in print32 oldindex, in print64 newparent, in print32 newindex); obsolete since gecko 1.9 void onfolderremoved(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 void onitemadded(in long long aitemid, in long long aparentid, in long aindex, in unsigned short aitem
type, in nsiuri auri, in autf8string atitle, in prtime adateadded, in acstring aguid, in acstring aparentguid); void onitemchanged(in long long aitemid, in acstring aproperty, in boolean aisannotationproperty, in autf8string anewvalue, in prtime alastmodified, in unsigned short aitem
type, in long long aparentid, in acstring aguid, in acstring aparentguid); void onitemmoved(in long lo...
...mchanged(in long long aitemid, in acstring aproperty, in boolean aisannotationproperty, in autf8string anewvalue, in prtime alastmodified, in unsigned short aitem
type, in long long aparentid, in acstring aguid, in acstring aparentguid); void onitemmoved(in long long aitemid, in long long aoldparentid, in long aoldindex, in long long anewparentid, in long anewindex, in unsigned short aitem
type, in acstring aguid, in acstring aoldparentguid, in acstring anewparentguid); void onitemremoved(in long long aitemid, in long long aparentid, in long aindex, in unsigned short aitem
type, in nsiuri auri, in acstring aguid, in acstring aparentguid); void onitemreplaced(in print64 folder, in nsiuri item, in nsiuri newitem); obsolete since gecko 1.9 void onitemvisited(in l...
...And 17 more matches
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. ...
...onmanager 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. ...
...ns 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. ...
...And 17 more matches
Plug-in Development Overview - Plugins
usnext » writing plug-ins once you decide what you want your plug-in to do, creating it is a simple process. a basic overview of the plug-in development process is given in the following steps. plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the browser and the special media for which the plug-in is created. decide the mime
type for the plug-in (see registering plug-ins). set up your development environment properly. you can use a variety of environments to create a plug-in, but make sure that you have the necessary files from the plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. you'll find an overview of the plug-in api method...
...lug-in directory for your operating system. see installing plug-ins. test your plug-in and debug as necessary. create an html page and embed the plug-in object. for information about the html elements to use, see using html to display plug-ins. to see your plug-in in action, simply display the html page that calls it in the browser. registering plug-ins gecko identifies a plug-in by the mime
type it supports. when it needs to display data of a particular mime
type, the browser finds and invokes the plug-in object that supports that
type. the data can come from either an object element in an html file (where the object or embed element either specifies the mime
type directly or references a file of that
type), from a separate non-html file of that mime
type, or from the server. the server...
...t needs to display data of a particular mime
type, the browser finds and invokes the plug-in object that supports that
type. the data can come from either an object element in an html file (where the object or embed element either specifies the mime
type directly or references a file of that
type), from a separate non-html file of that mime
type, or from the server. the server looks for the mime
type registered by a plug-in, based on the file extension, and starts sending the file to the browser. the browser looks up the media
type, and if it finds a plug-in registered to that
type, loads the plug-in software. when it starts up, the browser checks for plug-in modules for the platform and registers them. ...
...And 17 more matches
Expressions and operators - JavaScript
this section describes the operators and contains information about operator precedence. ...
...2]; // with destructuring var [one, two, three] = foo; comparison operators a comparison operator compares its operands and returns a logical value based on whether the comparison is true. the operands can be numerical, string, logical, or object values. strings are compared based on standard lexicographical ordering, using unicode values. ...
...parison operators a comparison operator compares its operands and returns a logical value based on whether the comparison is true. the operands can be numerical, string, logical, or object values. strings are compared based on standard lexicographical ordering, using unicode values. in most cases, if the two operands are not of the same
type, javascript attempts to convert them to an appropriate
type for the comparison. this behavior generally results in comparing the operands numerically. the sole exceptions to
type conversion within comparisons involve the === and !== operators, which perform strict equality and inequality comparisons. these operators do not attempt to convert the operands to compatible
types before checking equality. the following table describes the comparison operators i...
...And 17 more matches
Date - JavaScript
ry, 1970, 00:00:00 utc, with leap seconds ignored. note: parsing of strings with date.parse is strongly discouraged due to browser differences and inconsistencies. date.utc() accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since january 1, 1970, 00:00:00 utc, with leap seconds ignored. ...
...raged due to browser differences and inconsistencies. date.utc() accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since january 1, 1970, 00:00:00 utc, with leap seconds ignored. instance methods date.proto
type.getdate() returns the day of the month (1–31) for the specified date according to local time. date.proto
type.getday() returns the day of the week (0–6) for the specified date according to local time. ...
...est form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since january 1, 1970, 00:00:00 utc, with leap seconds ignored. instance methods date.proto
type.getdate() returns the day of the month (1–31) for the specified date according to local time. date.proto
type.getday() returns the day of the week (0–6) for the specified date according to local time. date.proto
type.getfullyear() returns the year (4 digits for 4-digit years) of the specified date according to local time. date.proto
type.gethours() returns the hour (0–23) in the specified date according to local time. ...
...And 17 more matches
simple-prefs - Archive of obsolete content
zing preferences to define preferences and give them initial values, add a new json array called preferences to your package.json file, and give it one entry for each preference: { "fullname": "example add-on", ... "preferences": [{ "name": "somepreference", "title": "some preference title", "description": "some short description for the preference", "
type": "string", "value": "this is the default string value" }, { "description": "how many of them we have.", "name": "myinteger", "
type": "integer", "value": 8, "title": "how many?" }] } each preference is defined by a group of attributes. there are: mandatory attributes that all preferences must have optional attributes attributes tha...
... name an identifier for the preference. ...
...: "integer", "value": 8, "title": "how many?" }] } each preference is defined by a group of attributes. there are: mandatory attributes that all preferences must have optional attributes attributes that are specific to the preference's data
type mandatory common attributes these are attributes that all preferences must have. attribute description
type the
type of preference, as defined in the "preference
types" section below. name an identifier for the preference. this is used to access the preference from your add-on: console.log(require("sdk/simple-prefs").prefs.mysettingname); this means that it must be a valid javascript identifier. title this is used as a label for the preference in the add-on...
...And 16 more matches
Gecko Compatibility Handbook - Archive of obsolete content
eatures of css. use consistent case when writing html id and class name attributes and css styles for those ids and classes. do not specify heights or widths on inline elements such as spans. use only cross-browser box specifications for margins, padding and borders. (more about css) content differs in gecko browsers and internet explorer incorrect layout mode specified by doc
type. if pages should be displayed by legacy browsers such as netscape navigator 4 or internet explorer 4 and 5, be sure to specify quirks mode layout via the doc
type. images are laid out without intervening blank areas in interent explorer but display blank areas between the images in gecko browsers. incorrect layout mode specified by doc
type. standard...
...more info clicking a link results in a 404-page not found but works in internet explorer the link may use an invalid form of a relative url. ...
...more info clicking a link results in a 404-page not found but works in internet explorer the link may use an invalid form of a relative url. change relative urls from http://directory/... to directory/.... ...
...And 16 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
removed. put the following content into your moreactions.svelte file: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let completed = true const checkall = () => { dispatch('checkall', completed) completed = !completed } const removecompleted = () => dispatch('removecompleted') </script> <div class="btn-group"> <button
type="button" class="btn btn__primary" on:click={checkall}>{completed ? 'check' : 'uncheck'} all</button> <button
type="button" class="btn btn__primary" on:click={removecompleted}>remove completed</button> </div> we've also included a completed variable to toggle between checking and unchecking all tasks. back over in todos.svelte, we are going to import our moreactions component and create...
... don't...
... don't forget to pass the prop into moreactions from inside todos.svelte, where the component is called: <moreactions {todos} on:checkall={e => check...
...And 16 more matches
Enc Dec MAC Output Public Key as CSR
* though pr_errortostring was available, support for it in nss wasn't. * fixme: samples should determi...
... * though pr_errortostring was available, support for it in nss wasn't. * fixme: samples should determine the version of nss that's available and refuse * to run if not 3.13 or ...
... * though pr_errortostring was available, support for it in nss wasn't. * fixme: samples should determine the version of nss that's available and refuse * to run if not 3.13 or higher.
...And 16 more matches
JIT Optimization Outcomes
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. no
typeinfo optimization failed because there was no
type information associated with an object containing the property. this failure mode is unlikely and occurs if the target object is obtained in some roundabout way. noanalysisinfo todo noshapeinfo the baseline compiler recorded no usable shape information for this operation. unknownobject the
type of the object is not known. this can happen if ...
...there was no
type information associated with an object containing the property. this failure mode is unlikely and occurs if the target object is obtained in some roundabout way. noanalysisinfo todo noshapeinfo the baseline compiler recorded no usable shape information for this operation. unknownobject the
type of the object is not known. this can happen if the operation sees many different
types of objects, and so the
type of the input to the operation cannot be resolved to a single
type. unknownproperties optimization failed because the object containing the property was marked as having unknown properties. this can happen if too many properties are defined on the object, or if delete is used to remove one of the object's properties. ...
...on sees many different
types of objects, and so the
type of the input to the operation cannot be resolved to a single
type. unknownproperties optimization failed because the object containing the property was marked as having unknown properties. this can happen if too many properties are defined on the object, or if delete is used to remove one of the object's properties. singleton one of the
types present in the
typeset was a singleton
type, preventing the optimization from being enabled. notsingleton optimization failed because the object containing the property did not have a 'singleton'
type. singleton
types are assigned to objects that are "one of a kind", such as global objects, literal objects declared in the global scope, and top-level function objects. notfixedslot the propert...
...And 16 more matches
nsIAccessibleText
d 3.0 / seamonkey 2.0) method overview void addselection(in long startoffset, in long endoffset); nsiaccessible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); void getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coord
type); long getoffsetatpoint(in long x, in long y, in unsigned long coord
type); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coord
type); void getselectionbounds(in long selectionnum, out long startoffset, out long endoffset); astring gettext(in long startoffset, in long endoffset); astring gettextafter...
...d long coord
type); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coord
type); void getselectionbounds(in long selectionnum, out long startoffset, out long endoffset); astring gettext(in long startoffset, in long endoffset); astring gettextafteroffset(in long offset, in nsaccessibletextboundary boundary
type, out long startoffset, out long endoffset); astring gettextatoffset(in long offset, in nsaccessibletextboundary boundary
type, out long startoffset, out long endoffset); nsipersistentproperties gettextattributes(in boolean includedefattrs, in long offset, out long rangestartoffset, out long rangeendoffset); astring gettextbeforeoffset(in long offset, in nsaccessibletextboundary boundary
type...
...if set < 0 then caret will be placed at the end of the text. charactercount long re...
...And 16 more matches
Debugger.Object - Firefox Developer Tools
debugger.object a debugger.object instance represents an object in the debuggee, providing reflection-oriented 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.proto
type.getownpropertydescriptor and debugger.object.proto
type.defineproperty, ensuring that the debugger will not inadvertently invoke the referent’s getters and setters. spidermonkey 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), spidermonkey presents the same debugger.object in...
...ect 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 spidermonkey in the process of exposing debuggee’s behavior and state to the debugger, the debugger can use debugger.object.proto
type.makedebuggeevalue to create debugger.object instances for given debuggee objects, or use debugger.object.proto
type.copy and debugger.object.proto
type.create to create new objects in debuggee compartments, allocated as if by particular debuggee globals. debugger.object instances protect their referents from the garbage collector; as long as the debugger.object instance is live, the referent remai...
...this accessor may throw if the referent is a scripted proxy or some other sort of exotic object (an opaque wrapper, for example). class a string naming the ecmascript [[class]] of the referent. ...
...And 16 more matches
EventTarget.addEventListener() - Web APIs
et method addeventlistener() sets up a function that will be called whenever the specified event is delivered to the target. common targets are element, document, and window, but the target may be any object that supports events (such as xmlhttprequest). addeventlistener() works by adding a function or an object that implements eventlistener to the list of event listeners for the specified event
type on the eventtarget on which it's called. syntax target.addeventlistener(
type, listener [, options]); target.addeventlistener(
type, listener [, usecapture]); target.addeventlistener(
type, listener [, usecapture, wantsuntrusted ]); // gecko/mozilla only parameters
type a case-sensitive string representing the event
type to listen for. listener the object that receives a notification (an o...
...(
type, listener [, options]); target.addeventlistener(
type, listener [, usecapture]); target.addeventlistener(
type, listener [, usecapture, wantsuntrusted ]); // gecko/mozilla only parameters
type a case-sensitive string representing the event
type to listen for. listener the object that receives a notification (an object that implements the event interface) when an event of the specified
type occurs. this must be an object implementing the eventlistener interface, or a javascript function. see the event listener callback for details on the callback itself. options optional an options object specifies characteristics about the event listener. ...
... once a boolean indicating that the listener should be invoked at most once after being added. if true, the listener would be automatically removed when invoked. ...
...And 16 more matches
Using files from web applications - Web APIs
using the file api, which was added to the dom in html5, it's now possible for web content to ask the user to select local files and then read the contents of those files. this selection can be done by either using an html <input
type="file"> element or by drag and drop. if you want to use the dom file api from extensions or other browser chrome code, you can; however, note there are some additional features to be aware of. see using the dom file api in chrome code for details. accessing selected file(s) consider this html: <input
type="file" id="input" multiple> the file api makes it possible to access a filelist containing file objects representing the files selected by the user. the multiple attribute on the input element allows the user to select multiple files. accessing the first...
...es; i++) { const file = filelist[i]; // ... } this loop iterates over all the files in the file list. there are three attributes provided by the file object that contain useful information about the file. name the file's name as a read-only string. this is just the file name, and does not include any path information. size the size of the file in bytes as a read-only 64-bit integer. ...
...nst file = filelist[i]; // ... } this loop iterates over all the files in the file list. there are three attributes provided by the file object that contain useful information about the file. name the file's name as a read-only string. this is just the file name, and does not include any path information. size the size of the file in bytes as a read-only 64-bit integer. ...
...And 16 more matches
Audio and Video Delivery - Developer guides
dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. currently, to support all browsers we need to specify two formats, although with the adoption of mp3 and mp4 formats in firefox and opera, this is changing fast. you can find compatibility information in the guide to media
types and formats on the web. to deliver video and audio, the general workflow is usually something like this: check what format the browser supports via feature detection (usually a choice of two, as stated above). if the browser doesn't support playback of any of the provided formats natively, either present a still image or use a fallback technology to present the video. identify how you want...
... if the browser doesn't support playback of any of the provided formats natively, either present a still image or use a fallback technology to present the video. identify how you want to play/instantiate the media (e.g. a <video> element, or document.createelement('video') perhaps?) deliver the media file to the player. html audio <audio controls preload="auto"> <source src="audiofile.mp3"
type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg"
type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback. note: the preload attribute may be ignored by...
...</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback. note: the preload attribute may be ignored by some mobile browsers. ...
...And 16 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
g methods” sidebar. true javascript.options.showinconsole (present in firefox 3.5+) outputs javascript errors to the error console. true javascript.options.strict (present in firefox 3.5+) enforces strict error output from javascript true table 1: preferences to set for developing extensions to make these changes, start your development profile,
type about:config into firefox’s location bar and open the preferences window; find the preferences listed in table 1 and double-click on them to set them accordingly. some of these preferences do not exist—to create them, right-click, select “new>boolean”, and
type in the name and set the value accordingly. install the dom inspector the dom inspector is an extension that lets you examine ht...
...n package, but you can include multiple skin packages to allow the gui to change with different themes. chrome url use a file called a “chrome manifest” to register chrome packages with firefox and start using them. to register a package, you use a special uri scheme called a “chrome url” to represent the path to the file. chrome urls are structured as: chrome://%package name%/%package
type%/%relative path to source file% for example, the chrome url for the firefox browser window is as follows: chrome://browser/content/browser.xul here, the package name is “browser”, the file “browser.xul”, and the
type of the package is “content”. source files represented through chrome urls run with universalxpconnect privileges; even if they haven’t been granted “use xpconnect ...
...g 1: content for 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"> <!-- unique id for extension. can be in e-mail address format or guid format --> <em:id>helloworld@xuldev.org</em:id> <!-- indicates that this add-on is an extension --> <em:
type>2</em:
type> <!-- extension name displayed in add-on manager --> <em:name>hello, world!</em:name> <!-- extension version number. there is a version numbering scheme you must follow --> <em:version>0.1</em:version> <!-- brief description displayed in add-on manager --> <em:description>my first extension.</em:description> <!-- name of extension's primary developer. change...
...And 15 more matches
tooltip - Archive of obsolete content
ods | related ] this element is used for the tooltip popups. for text-only tooltips, this element doesn't need to be used; instead you may just add a tooltiptext attribute to an element. more information is available in the xul tutorial. ...
...an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales,...
...r cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. ...
...And 15 more matches
treecol - Archive of obsolete content
also place splitter elements between the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. ...
...the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. ...
...rial. attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src,
type, width properties accessible
type style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. ...
...And 15 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
ublic 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/. ...
...-begin certificate for signature verification-----" #define ns_cert_vfy_trailer "-----end certificate for signature verification-----" #define ns_sig_header "-----begin signature-----" #define ns_sig_trailer "-----end signature-----" #define ns_cert_header "-----begin certificate-----" #define ns_cert_trailer "-----end certificate-----" /* sample 6 commands */
typedef enum { generate_csr, add_cert_to_db, save_cert_to_header, encrypt, decrypt, sign, verify, unknown } command
type;
typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey = 5, lab = 6, certenc= 7, certvfy= 8, sig = 9 } header
type; /* * print usage message and exit */ static ...
...y); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while vfy_end\n"); goto cleanup; } cleanup: if (infile) { pr_close(infile); } if (vfy) { vfy_destroycontext(vfy, pr_true); } return rv; } /* * write cryptographic parameters to header file */ secstatus writetoheaderfile(const char *buf, unsigned int len, header
type type, prfiledesc *outfile) { secstatus rv; const char *header; const char *trailer; switch (
type) { case symkey: header = enckey_header; trailer = enckey_trailer; break; case mackey: header = mackey_header; trailer = mackey_trailer; break; case iv: header = iv_header; ...
...And 15 more matches
nsIPluginHost
void createtmpfiletopost(in string apostdataurl, out string atmpfilename); native code only! obsolete since gecko 2.0 void deletepluginnativewindow(in nspluginnativewindowptr apluginnativewindow); native code only! void destroy(); native code only! void findproxyforurl(in string aurl, out string aresult); native code only! nsiplugin getplugin(in string amime
type); native code only! void getplugincount(out unsigned long aplugincount); obsolete since gecko 1.8 nsiplugin getpluginfactory(in string amime
type); native code only! obsolete since gecko 1.9.2 void getpluginname(in nsiplugininstance ainstance, [shared] out string apluginname); native code only! nsiplugintag getplugintagforinstance(in nsiplugininstance ainstanc...
...al] out unsigned long aplugincount, [retval, array, size_is(aplugincount)] out nsiplugintag aresults); void handlebadplugin(in prlibraryptr alibrary, in nsiplugininstance instance); native code only! void init(); native code only! void instantiatedummyjavaplugin(in nsiplugininstanceowner aowner); native code only! void instantiateembeddedplugin(in string amime
type, in nsiuri aurl, in nsiplugininstanceowner aowner); native code only! void instantiateembededplugin(in string amime
type, in nsiuri aurl, in nsiplugininstanceowner aowner); obsolete since gecko 1.8 void instantiatefullpageplugin(in string amime
type, in nsiuri auri, in nsiplugininstanceowner aowner, out nsistreamlistener astreamlistener); native code only! nsistreamliste...
... void loadplugins(); native code only! void newpluginnativewindow(out nspluginnativewindowptr apluginnativewindow); native code only! ...
...And 15 more matches
filter - CSS: Cascading Style Sheets
completely black. a value of 100% leaves the input unchanged. other values are linear multipliers on the effect. values of an amount over 100% are allowed, providing brighter results. the lacuna value for interpolation is 1. ...
...ut unchanged. other values are linear multipliers on the effect. values of an amount over 100% are allowed, providing brighter results. the lacuna value for interpolation is 1. ...
...s on the effect. values of an amount over 100% are allowed, providing brighter results. the lacuna value for interpolation is 1. ...
...And 15 more matches
Indexed collections - JavaScript
« previousnext » this chapter introduces collections of data which are ordered by an index value. this includes arrays and array-like constructs such as array objects and
typedarray objects. array object an array is an ordered list of values that you refer to with a name and an index. for example, consider an array called emp, which contains employees' names indexed by their numerical employee number. so emp[0] would be employee number zero, emp[1] employee number one, and so on. javascript does not have an explicit array data
type. however, you can use the predefined array object and its methods to work with arrays in your applications. the array object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them. it has a property f...
.... // // this is equivalent to: let arr = [] arr.length = 42 calling array(n) results in a rangeerror, if n is a non-whole number whose fractional portion is non-zero. the following example illustrates this behavior. let arr = array(9.3) // rangeerror: invalid array length if your code needs to create arrays with single elements of an arbitrary data
type, it is safer to use array literals. alternatively, create an empty array first before adding the single element to it. in es2015, you can use the array.of static method to create arrays with single element. let wisenarray = array.of(9.3) // wisenarray contains only one element 9.3 referring to array elements because elements are also properties, you can access the using property accessors. ...
...turns a new array of the return value from executing callback on every array item. let a1 = ['a', 'b', 'c'] let a2 = a1.map(function(item) { return item.touppercase() }) console.log(a2) // logs ['a', 'b', 'c'] filter(callback[, thisobject]) returns a new array containing the items for which callback returned true. ...
...And 15 more matches
Inline options - Archive of obsolete content
the user interface for the preferences defined with this new syntax appears in the extension's detail 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"?> <!doc
type 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 sup...
..."> <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. ...
...ww.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. ...
...And 14 more matches
Promises - Archive of obsolete content
approach. moreover, many third-party wrappers for the xmlhttprequest api now support promises out of the box. example direct usage task.spawn(function* () { // make the initial request. let resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("get", dataurl); xhr.response
type = "json"; xhr.send(); }); let data = resp.target.response; // use the response to construct form data object for the // second request. let form = new formdata; form.append("id", data.id); form.append("content", data.content); // make the second request. resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr...
... xhr.onerror = reject; xhr.open("post", updateurl); xhr.send(form); }); // use the response of the second request. notifyuser(resp.target.responsetext); }); example using promise-based helper the following example relies on the helper function defined below. task.spawn(function* () { // make the initial request. let xhr = yield request(dataurl, { response
type: "json" }); let data = xhr.response; // use the response to construct form data object for the // second request. let form = new formdata; form.append("id", data.id); form.append("content", data.content); // make the second request. xhr = yield request(updateurl, { data: form }); // use the response of the second request. notifyuser(xhr.responsetext); }...
...rn new promise((accept, reject) => { return addon.getdatadirectory((directory, error) => { if (error) reject(error); else accept(directory); }); }); }, }; }, getinstallforurl: function getinstallforurl(url, mime
type, hash, name, iconurl, version, loadgroup) { return new promise(accept => this.addonmanager.getinstallforurl(url, accept, mime
type, hash, iconurl, version, loadgroup)); }, getinstallforfile: function getinstallforfile(url, mime
type) { return new promise(accept => ...
...And 14 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
bal_pref", true); lockpref("mail.identity.id1.reply_to", ""); //imap lockpref("mail.server.server2.hostname", "imap-int.int-evry.fr"); lockpref("mail.server.server2.issecure", true); lockpref("mail.server.server2.login_at_startup", true); lockpref("mail.server.server2.max_cached_connections", 5); //lockpref("mail.server.server2.name", "jehan.procaccia@int-evry.fr"); lockpref("mail.server.server2.
type", "imap"); lockpref("mail.server.server2.username", env_user); //smtp lockpref("mail.identity.id1.smtpserver", "smtp1"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templates"); lockpref("mail.identity.id1.tmpl_folder_picker_mode", "0"); lockpref("mail.identity.id1.valid", true); //smtp general lockpref("mail.smtp.defaultserver", "smtp1"); lockp...
...pref("mail.identity.id1.fullname", userinfo.cn ); defaultpref("mail.identity.id1.smtpserver", "smtp1" ); defaultpref("mail.identity.id1.useremail", userinfo.mail ); // imap server settings defaultpref("mail.server.server1.hostname", "myimap.server.com" ); defaultpref("mail.server.server1.name", userinfo.mail ); defaultpref("mail.server.server1.port", 993 ); defaultpref("mail.server.server1.socket
type", 3 ); defaultpref("mail.server.server1.
type", "imap" ); defaultpref("mail.server.server1.username", userinfo.mail ); // smtp server settings defaultpref("mail.smtpserver.smtp1.authmethod", 3 ); defaultpref("mail.smtpserver.smtp1.description", "my company name" ); defaultpref("mail.smtpserver.smtp1.hostname", "mysmtp.server.com" ); defaultpref("mail.smtpserver.smtp1.port", 465 ); defaultpref("ma...
...i stzip zipfile? j.h.holm zipsplit 1.1 zipfile?). compensating... ...
...And 14 more matches
menupopup - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container used to display the contents of a popup menu. when a menupopup is open, it floats above the window and may extend outside the window border. there are several ways in which a menupopup may be used: it may be placed inside a menu, menulist, toolbarbutton, or a button with the
type attribute set to "menu" to create a popup that will open 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. a context menu may be opened by rig...
...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 ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessible
type, 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> <menuitem label="mozilla" value="http://mozilla.org"/> <menuitem label="slashdot" value="http://slashdot.org"/> <...
...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 ignorekeys
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 popup ar...
...And 14 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. ...
..., selected, tabindex, value properties accessible
type, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item3"/> </menupopup> </menu> attributes acceltext
type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey
type: character this should be set to a character that is used as a shortcut key. this should be one of t...
...or key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey
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. allowevents
type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. ...
...And 14 more matches
NPVariant - Archive of obsolete content
« gecko plugin api reference « scripting plugins summary npvariant is a struct that holds a value and the
type of that value. the value is held in a union, and the
type is one of
types defined in the npvariant
type enumeration. syntax
typedef struct _npvariant { npvariant
type type; union { bool boolvalue; int32_t intvalue; double_t doublevalue; npstring stringvalue; npobject *objectvalue; } value; } npvariant; fields the data structure has the following fields:
type a member of the npvariant
type enumeration specifying the data
type contained in the npvariant. value the value contained in the npvariant structure. ...
... double_t doublevalue; npstring stringvalue; npobject *objectvalue; } value; } npvariant; fields the data structure has the following fields:
type a member of the npvariant
type enumeration specifying the data
type contained in the npvariant. value the value contained in the npvariant structure. it may be a boolean, integer, double, string, or object, depending on the variant
type. ...
...e; npstring stringvalue; npobject *objectvalue; } value; } npvariant; fields the data structure has the following fields:
type a member of the npvariant
type enumeration specifying the data
type contained in the npvariant. value the value contained in the npvariant structure. it may be a boolean, integer, double, string, or object, depending on the variant
type. ...
...And 14 more matches
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 accesskey - 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'. ...
...ppearance - the value of this attribute gives a hint to the xforms processor as to which
type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special 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 data
type derived from these. ...
...lla 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 data
type derived from these. representations the xforms input element can be represented by the following widgets for the spcified data
types (or
types derived from these data
types): text field - the default widget when no
type is specified or the data is of
type xsd:string (xhtml/xul) checkbox - used for xsd:boolean instance data. ...
...And 14 more matches
Handling common HTML and CSS problems - Learn web development
and design your code around them. it is also worth "namespacing" css, e.g. if you have a widget, make sure it has a distinct class, and then start the selectors that select elements inside the widget with this class, so conflicts are less likely. for example .audio-player ul a. validation for html, validation involves making sure all your tags are properly closed and nested, you are using a doc
type, and you are using tags for their correct purpose. a good strategy is to validate your code regularly. one service that can do this is the w3c markup validation service, which allows you to point to your code, and returns a list of errors: css has a similar story — you need to check that your property names are spelled correctly, property values are spelled correctly and are valid for the pr...
...o show you an example of how such plugins generally work: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on windows/linux) and choose the install option in the left hand menu. in the search packages text field,
type "lint" and press enter/return to search for linting-related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters rely on it to work. after that, install the linter-csslint plugin for linting css, and the linter-tidy plugin for linting html. after the packages have finished installing, try loading up an html file a...
...nisms for fallbacks to be added, which work on the same principle as described above. you can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content. ...
...And 14 more matches
Accessibility API cross-reference
they also define a list of possible object states, such as focused, read-only, checked, etc. an interesting problem is that mozilla, safari/khtml, opera, staroffice and other apps are cross-platform, but there is currently no cross-platform accessibility api. ...
...tform accessibility api. the ipc mechanisms used by current generation api's are also not cross-platform, although communication for some cross-platform accessibility api of the future could be done through sockets. these tables describe how various accessibility apis define possible roles of an object, and states. all accessibility apis to date define a list of possible object roles, or general
types, such as button, menu item, text, etc. they also define a list of possible object states, such as focused, read-only, checked, etc. this table is the start of a cross-reference, so we can spot the differences and similarities in the apis. aria is a standard developed as part of the web accessibility initiative, which uses markup syntax quite familiar to users of html, xml, sgml and others. the ...
.... fill out tagged pdf column (relevant documents from pdf association) add missing aria properties fill out events cross reference table use this info to expand mozilla's accessibility api coverage to include mac, so that we can start to freeze them talk about the fact that msaa uses one interface (iaccessible), wherease gnome accessibility uses a lot of different interfaces depending on the
type of object go through the atk info and make sure it's up-to-date accessible roles description & notes msaa role (role_system_*) java accessibility role gnome accessibility role (atk_role_*) mac os x accessibility role aria (role=*) html tagged pdf relevant xul for alerts, in java/gnome for any alert, in msaa if no other role applies. aria live regi...
...And 14 more matches
IPDL Tutorial
otocol messages are represented as c++ methods, it's easy to forget that they are in fact asynchronous messages: by default the c++ method will return immediately, 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 message...
... you can use the child, parent, and both labels multiple times in a protocol specification. they behave like public, protected, and private labels in c++. parameters message declarations allow any number of parameters. parameters specify data that are sent with the message. their values are serialized by the sender and deserialized by the receiver. ipdl supports built-in and custom primitive
types, as well as unions and arrays. the built-in simple
types include the c++ integer
types (bool, char, int, double) and xpcom string
types (nsstring, nscstring). ipdl imports these automatically because they are common, and because the base ipc library knows how to serialize and deserialize these
types. see ipc/ipdl/ipdl/builtin.py for the most up-to-date list of automatically imported
types. ...
...scstring). ipdl imports these automatically because they are common, and because the base ipc library knows how to serialize and deserialize these
types. see ipc/ipdl/ipdl/builtin.py for the most up-to-date list of automatically imported
types. actors may be passed as parameters. the c++ signature will accept a pprotocolparent* on one side and convert it to a pprotocolchild* on the other. maybe
types if you want to pass a potentially undefined argument, you can add ? postfix after the
type name. then you can pass a mozilla::maybe object instead of a concrete value. protocol pmaybe { child: async maybe(nscstring? maybe); }; custom primitive
types when you need to send data of a
type other than one built into ipdl, you can add a using declaration in an ipdl specification. a custom seri...
...And 14 more matches
Mozilla DOM Hacking Guide
implement the dom level 0. the w3c dom is mainly implemented in idl. the goals of class info are twofold: interface flattening, and implementing behaviors that are not possible with idl alone. a brief introduction to javascript and xpconnect. before we begin the explanation of class info, i'd like to introduce quickly the javascript engine and xpconnect. in javascript, there is no knowledge of
types, like there is in c++. a function for example can be represented by a jsfunction, a jsobject, a jsval, ... this means that when we use the dom from javascript, we pass arguments that have no
type. however, since the dom is coded in c++, we expect to receive an argument of the correct
type for our function. this is one of the jobs of xpconnect. xpconnect will "wrap" the argument in a wrapper that...
... in c++. a function for example can be represented by a jsfunction, a jsobject, a jsval, ... this means that when we use the dom from javascript, we pass arguments that have no
type. however, since the dom is coded in c++, we expect to receive an argument of the correct
type for our function. this is one of the jobs of xpconnect. xpconnect will "wrap" the argument in a wrapper that will be of the
type expected by our c++ function. similarly, then return
type of the c++ function will be wrapped by xpconnect so that javascript can use it safely. when, in javascript, a client tries to access a dom object or a dom method on a dom object, the js engine asks xpconnect to search for the relevant c++ method to call. for example, when we ask for |document.getelementbyid("myid");|, xpconnect will find ...
...e endless. "what do you want to code today?" ;-) all the dom classes are listed in an enum defined in nsidomclassinfo.h, nsdomclassinfoid. there are classes for the dom0, core dom, html, xml, xul, xbl, range, css, events, etc... the array sclassinfodata, defined in nsdomclassinfo.cpp, maps each dom class to its helper class and to the interfaces that are exposed to javascript. it is an array of
type nsdomclassinfodata, which is a structure defined in nsidomclassinfo.h. the array uses two macros to define its items: ns_define_classinfo_data and ns_define_classinfo_data_with_name. the first one calls the second one. the first argument passed to ns_define_classinfo_data_with_name, _class, is used for debug purposes. the second argument, _name, is the name that should appear in javascript. the t...
...And 14 more matches
Encrypt Decrypt_MAC_Using Token
*/ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify ...
... */ 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 "); fprin...
... */ 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(stde...
...And 14 more matches
NSS tools : certutil
, 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 module database management, see the modutil manpage. options and arguments running certutil always requires one and only one command option to specify the
type of certificate operation. each option may take arguments, anywhere from none to multiple arguments. the command option -h will list all the command options available and their relevant arguments. command options -a add an existing certificate to a certificate database. the certificate database should already exist; if one is not present, this c...
... certificate will derive its authenticity. use the exact nickname or alias of the ca certificate, or use the ca's email address. bracket the issuer string with quotation marks if it contains spaces. -d [prefix]directory specify the database directory containing the certificate and key database files. ...
... --dump-ext-val oid for single cert, print binary der encoding of extension oid. -e check a certificate's signature during the process of validating a certificate. ...
...And 14 more matches
Querying Places
re/modules/placesutils.jsm"); // no query options set will get all history, sorted in database order, // which is nsinavhistoryqueryoptions.sort_by_none. let options = placesutils.history.getnewqueryoptions(); // no query parameters will return everything let query = placesutils.history.getnewquery(); // execute the query let result = placesutils.history.executequery(query, options); result
types nsinavhistoryqueryoptions has a result
type property that allows configuration of the grouping and level of detail to be returned in the results. the different values for this property are listed below. these values are also properties of nsinavhistoryqueryoptions, and are accessed like this: components.interfaces.nsinavhistoryqueryoptions.results_as_visit. results_as_uri: this is the default...
...a result
type property that allows configuration of the grouping and level of detail to be returned in the results. the different values for this property are listed below. these values are also properties of nsinavhistoryqueryoptions, and are accessed like this: components.interfaces.nsinavhistoryqueryoptions.results_as_visit. results_as_uri: this is the default, and returns one result node of
type result_
type_uri for each uri that matches the query. the visit date for each node will be the last visit date for that url. results_as_visit: this option returns one entry for each time a page was visited matching the given query. the result may contain duplicate entries for urls, each with a different date. the nodes are of
type result_
type_visit, and provide a session id for each visit. this s...
...te for that url. results_as_visit: this option returns one entry for each time a page was visited matching the given query. the result may contain duplicate entries for urls, each with a different date. the nodes are of
type result_
type_visit, and provide a session id for each visit. this session id is the same for all pages that were reached by clicking links. a new session starts when the user
types a new url or follows a bookmark (xxx link to more details about what constitutes a session). results_as_full_visit: this is an extended version of result_
type_visit. the results are of
type result_
type_full_visit and have additional information about the visit, such as the referring visit, and how the transition happened (
typed, redirect, link, etc). not yet implemented -- see bug 320831. bas...
...And 14 more matches
Accessing the Windows Registry Using XPCOM
ry. also notice that the path to the key has backslashes escaped, a necessity in javascript and c++ string constants. the desired access rights are specified using a named constant from the interface, in this example access_read. this can be very important when dealing with non-administrator accounts with restricted privileges. the value is read using readstringvalue(). you have to specify what
type of data you expect to read, which we will expand on later. finally, note that you should close the key when you are done to avoid wasting system resources. opening registry keys before doing anything with a registry key you must first open the key you are interested in. the example above demonstates this using the open() method. if you want to create a new key, you can use the create() method, ...
...rk.access_read); var id = subkey.readstringvalue("productid"); subkey.close(); wrk.close(); once you've opened a registry key, you can begin to make use of it. reading registry values probably the most common action associated with the windows registry is reading values. the simple example above shows how to read an existing string value. ...
...ctid"); subkey.close(); wrk.close(); once you've opened a registry key, you can begin to make use of it. reading registry values probably the most common action associated with the windows registry is reading values. the simple example above shows how to read an existing string value. however, windows registry values can have several data
types, so you need to ensure that you read the correct
type. ...
...And 14 more matches
XPCOM array guide
introduction array
types mozilla has many array classes because each array is optimized for a particular usage pattern. this guide describes the available arrays as well as the enumerator classes that can be used to get to them. in this document the term array refers to a container for multiple objects with a numeric, zero-based index. the standard array classes are: nsiarray - a scriptable container for scriptable xpcom objects. this array is read-only, and the interface does not provide any methods that will allow adding and removing members. nsimutablearray - a scriptable container for scriptable xpcom objects, which allows addition and removal of member objects. this interface actually derives from nsiarray. ...
... nsiarray - a scriptable container for scriptable xpcom objects. this array is read-only, and the interface does not provide any methods that will allow adding and removing members. nsimutablearray - a scriptable container for scriptable xpcom objects, which allows addition and removal of member objects. this interface actually derives from nsiarray. nstarray<t> - a c++ class which provides a
typesafe container for objects or primitive
types (pointers, integers, and so on). the objects must define a default constructor and a copy constructor. to use indexof without providing a comparator, they must also define an operator==. for sorting without providing a comparator they must define an operator<. note that this class differs from the other array
types by using unsigned indices. nscomarra...
... nsautotarray<t, n> - a version of nstarray which includes n entries of internal storage for the array data. nstptrarray<t> and nsautotptrarray<t> - similar to using t* with the above arrays, but also provides a safeelementat() accessor. ...
...And 14 more matches
nsIMessenger
s. ...
...set(in acstring acharset); void setwindow(in nsidomwindow ptr, in nsimsgwindow msgwindow); void openurl(in acstring aurl); void loadurl(in nsidomwindow ptr, in acstring aurl); void launchexternalurl(in acstring aurl); boolean canundo(); boolean canredo(); unsigned long getundotransaction
type(); unsigned long getredotransaction
type(); void undo(in nsimsgwindow msgwindow); void redo(in nsimsgwindow msgwindow); void sendunsentmessages(in nsimsgidentity aidentity, in nsimsgwindow amsgwindow); void setdocumentcharset(in acstring characterset); void saveas(in acstring auri, in boolean aasfile, in nsimsgidentity aidentity, in astring amsgfilename); void openattachment(in acstr...
... void openattachment(in acstring contenttpe, in acstring url, in acstring displayname, in acstring messageuri, in boolean isexternalattachment); void saveattachment(in acstring contenttpe, in acstring url, in acstring displayname, in acstring messageuri, in boolean isexternalattachment); void saveallattachments(in unsigned long count, [array, size_is(count)] in string content
typearray, [array, size_is(count)] in string urlarray, [array, size_is(count)] in string displaynamearray, [array, size_is(count)] in string messageuriarray); void saveattachmenttofile(in nsifile afile, in acstring aurl, in acstring amessageuri, in acstring acontent
type, in nsiurllistener alistener); void detachattachment(in string contenttpe, in string url, in string displayname, in...
...And 14 more matches
nsITimer
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. ...
...terfaces.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(); void init(in nsiobserver aobserver, in unsigned long adelay, in unsigned long a
type); void initwithcallback(in nsitimercallback acallback, in unsigned long adelay, in unsigned long a
type); void initwithfunccallback(in nstimercallbackfunc acallback, in voidptr aclosure, in unsigned long adelay, in unsigned long a
type); native code only! attributes attribute
type description callback nsitimercallback the nsitimercallback object passed to initwithcallback(). read only. closure voidptr the opaque pointer pass to initwithf...
...ay unsigned long the timeout delay in millisecond. note: re-setting the delay on a one-shot timer that has already fired doesn't restart the timer. call one of the init() methods to restart a one-shot timer. target nsieventtarget the nsieventtarget to which the callback is dispatched. this target must be set before calling any of the initialization methods. ...
...And 14 more matches
XPIDL Syntax
same sense that the c preprocessor includes a file. note that includes within comments or raw code fragments are not processed by xpidl. unlike the c preprocessor, when a file is included multiple times, it acts as if the subsequent includes did not happen; this prevents the need for include guards. xpidl syntax (abnf) the root production here is idl_file. ...
...ded multiple times, it acts as if the subsequent includes did not happen; this prevents the need for include guards. xpidl syntax (abnf) the root production here is idl_file. ...
...ot happen; this prevents the need for include guards. xpidl syntax (abnf) the root production here is idl_file. ...
...And 14 more matches
Debugging Tips
printing cdata and c
type currently console.log doesn't show
type information of cdata. running the following code shows only partial value information. let { c
types } = components.utils.import("resource://gre/modules/c
types.jsm", {}); let i = c
types.int32_t(10); console.log(i); let point = c
types.struct
type("point", [{ x: c
types.int32_t }, { y: c
types.int32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive information, you can use .tosource(). ...
...ypes.jsm", {}); let i = c
types.int32_t(10); console.log(i); let point = c
types.struct
type("point", [{ x: c
types.int32_t }, { y: c
types.int32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive information, you can use .tosource(). ...
... let point = c
types.struct
type("point", [{ x: c
types.int32_t }, { y: c
types.int32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive information, you can use .tosource(). ...
...And 14 more matches
Drawing and Event Handling - Plugins
ge determines its display mode: whether the plug-in is embedded, or displayed in its own separate page. you determine whether a plug-in is windowed or windowless by the way you define the plug-in itself. a windowed plug-in is drawn into its own native window (or portion of a native window) on a web page. a windowed plug-in is opaque, hiding the part of the page beneath its display window. this
type of plug-in determines when it draws itself. a windowless plug-in does not require a native window. it is drawn in a target called a drawable, which corresponds to either the browser window or an off-screen bitmap. a drawable can be defined in several ways, depending on the platform. windowless plug-ins can be opaque or transparent. a windowless plug-in draws itself only in response to a paint me...
...rawn to a window, the plug-in is responsible for preserving state information and ensuring that the original state is restored. for windowless plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a drawable. for windowed plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a window. ...
...ug-in is responsible for preserving state information and ensuring that the original state is restored. for windowless plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a drawable. for windowed plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a window. ...
...And 14 more matches
Debugger.Object - Firefox Developer Tools
debugger.object a debugger.object instance represents an object in the debuggee, providing reflection-oriented 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.proto
type.getownpropertydescriptor and debugger.object.proto
type.defineproperty, ensuring that the debugger will not inadvertently invoke the referent's getters and setters. spidermonkey 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), spidermonkey presents the same debugger.object instan...
...bject 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 spidermonkey in the process of exposing debuggee's behavior and state to the debugger, the debugger can use debugger.object.proto
type.makedebuggeevalue to create debugger.object instances for given debuggee objects, or use debugger.object.proto
type.copy and debugger.object.proto
type.create to create new objects in debuggee compartments, allocated as if by particular debuggee globals. debugger.object instances protect their referents from the garbage collector; as long as the debugger.object instance is live, the referent remai...
... 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. ...
...And 14 more matches
HTMLInputElement - Web APIs
properties properties related to the parent form form read only htmlformelement object: returns a reference to the parent <form> element. formaction string: returns / sets the element's formaction attribute, containing the uri of a program that processes information submitted by the element. this overrides the action attribute of the parent form. formenc
type string: returns / sets the element's formenc
type attribute, containing the
type of content that is used to submit the form to the server. this overrides the enc
type attribute of the parent form. formmethod string: returns / sets the element's formmethod attribute, containing the http method that the browser uses to submit the form. this overrides the method attribute of the parent ...
...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 / sets the element's
type attribute, indicating the
type of control to display. see
type attribute of <input> for possible values. disabled boolean: returns / sets the element's...
...t values will not be submitted with the form. see also readonly autofocus boolean: returns / sets the element's autofocus attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. only one form element in a document can have the autofocus attribute. it cannot be applied if the
type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control). required boolean: returns / sets the element's required attribute, indicating that the user must fill in a value before submitting a form. value string: returns / sets the current value of the control. note: if the user enters a value different from the value expected, this may...
...And 14 more matches
WebGL constants - Web APIs
standard webgl constants are installed on the webglrenderingcontext and webgl2renderingcontext objects, so that you use them as gl.constant_name: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); gl.getparameter(gl.line_width); some constants are also provided by webgl extensions. a list is provided below. ...
... constant name value description static_draw 0x88e4 p...
... and not change often. stream_draw 0x88e0 passed to bufferdata as a hint about whether the contents of the buffer are likely to not be used often. dynamic_draw 0x88e8 passed to bufferdata as a hint about whether the contents of the buffer are likely to be used often and change often. array_buffer 0x8892 passed to bindbuffer or bufferdata to specify the
type of buffer being used. element_array_buffer 0x8893 passed to bindbuffer or bufferdata to specify the
type of buffer being used. buffer_size 0x8764 passed to getbufferparameter to get a buffer's size. buffer_usage 0x8765 passed to getbufferparameter to get the hint for the buffer passed in when it was created. vertex attributes constants passed t...
...And 14 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
> 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. ...
...tylesheet 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. ...
...alue denotes how the item being linked to is related to the containing document. as you'll see from our link
types reference, there are many different kinds of relationship. there are a number of other common
types you'll come across. for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon
types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png"
type="image/png"> the sizes attribute indicates the icon size, while the
type contains the mime
type of the resource being linked. ...
...And 14 more matches
Uint16Array - JavaScript
static methods uint16array.from() creates a new uint16array from an array-like or iterable object. ...
...ray using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor uint16array() creates a new uint16array object. static properties uint16array.bytes_per_element returns a number value of the element size. 2 in the case of an uint16array. uint16array.name returns the string value of the constructor name. ...
...rray. uint16array.name returns the string value of the constructor name. in the case of the uint16array
type: "uint16array". static methods uint16array.from() creates a new uint16array from an array-like or iterable object. see also array.from(). uint16array.of() creates a new uint16array with a variable number of arguments. see also array.of(). instance properties uint16array.proto
type.buffer returns the arraybuffer referenced by the uint16array fixed at construction time and thus read only. uint16array.proto
type.bytelength returns the length (in bytes) of the uint16array from the start of its arraybuffer. fixed at construction time and thus read only. uint16array.proto
type.byteoffset returns the offset (in bytes) of the uint16array from the start of its arraybuffer. fixed...
...And 14 more matches
Uint32Array - JavaScript
static methods uint32array.from() creates a new uint32array from an array-like or iterable object. ...
...ray using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor uint32array() creates a new uint32array object. static properties uint32array.bytes_per_element returns a number value of the element size. 4 in the case of an uint32array. uint32array.name returns the string value of the constructor name. ...
...rray. uint32array.name returns the string value of the constructor name. in the case of the uint32array
type: "uint32array". static methods uint32array.from() creates a new uint32array from an array-like or iterable object. see also array.from(). uint32array.of() creates a new uint32array with a variable number of arguments. see also array.of(). instance properties uint32array.proto
type.buffer returns the arraybuffer referenced by the uint32array fixed at construction time and thus read only. uint32array.proto
type.bytelength returns the length (in bytes) of the uint32array from the start of its arraybuffer. fixed at construction time and thus read only. uint32array.proto
type.byteoffset returns the offset (in bytes) of the uint32array from the start of its arraybuffer. fixed...
...And 14 more matches
Uint8ClampedArray - JavaScript
the uint8clampedarray
typed array represents an array of 8-bit unsigned integers clamped to 0-255; if you specified a value that is out of the range of [0,255], 0 or 255 will be set instead; if you specify a non-integer, the nearest integer will be set. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor uint8clampedarray() creates a new uint8clampedarray object. static properties uint8clampedarray.bytes_per_element returns a number value of the element size. 1 in the case of an uint8clampedarray. uint8clampedarray.name returns the string value of the constructor name. ...
...sing standard array index syntax (that is, using bracket notation). constructor uint8clampedarray() creates a new uint8clampedarray object. static properties uint8clampedarray.bytes_per_element returns a number value of the element size. 1 in the case of an uint8clampedarray. uint8clampedarray.name returns the string value of the constructor name. ...
...g value of the constructor name. in the case of the uint8clampedarray
type: "uint8clampedarray". static methods uint8clampedarray.from() creates a new uint8clampedarray from an array-like or iterable object. see also array.from(). uint8clampedarray.of() creates a new uint8clampedarray from a variable number of arguments. see also array.of(). instance properties uint8clampedarray.proto
type.buffer returns the arraybuffer referenced by the uint8clampedarray fixed at construction time and thus read only. uint8clampedarray.proto
type.bytelength returns the length (in bytes) of the uint8clampedarray from the start of its arraybuffer. fixed at construction time and thus read only. ...
...And 14 more matches
editor - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a frame which is expected to contain an editable document. set the value of the editor
type attribute to html to create an editor document. mozilla provides two
types of editors, the html editor and the plaintext editor. the editor does not provide any editing user interface; you would supply that yourself. however, text editing, image resizing, and table row and cell editing capabilities are provided. if you do not set the editor
type attribute on an editor, you must enable editing using the makeeditable method. to specify the document to load in the editor use the src attribute. however, an issue is that if you specify the src attribute initially on the editor tag in the xul file, the document...
... the src attribute initially on the editor tag in the xul file, the document does not become editable by default. to enable editing on an editor, do either of the following: set the src attribute on the editor after the outer window has loaded, for example, in the onload handler. you might also set the src attribute based on what the user selects from a file dialog. in this case, set the editor
type attribute on the editor. call the makeeditable method to make the document loaded in the editor editable. enable the design mode of the document loaded in the editor. to edit a new document, set the src attribute to about:blank. to access most of the functionality of the editor, your application must be part of an extension or part of the chrome. xul applications loaded via a url from a web ...
...set the src attribute to about:blank. to access most of the functionality of the editor, your application must be part of an extension or part of the chrome. xul applications loaded via a url from a web server will not be able to access most of the features of the editor. see the rich text editing and midas pages for more information about gecko's built-in rich text editor. ...
...And 13 more matches
window - Archive of obsolete content
a window is activated or deactivated by watching for the "activate" and "deactivate" events. see window activation events. more information is available in the xul tutorial. ...
...events. see window activation events. more information is available in the xul tutorial. ...
... <hbox> <label control="your-lname" value="enter last name:"/> <textbox id="your-lname" value="hernandez"/> </hbox> <hbox> <button oncommand="alert('save!')"> <description>save</description> </button> </hbox> </vbox> </radiogroup> </groupbox> </vbox> </window> attributes accelerated
type: booleanset this attribute to true to allow hardware layer managers to accelerate the window. activetitlebarcolor
type: color string specify background color of the window's titlebar when it is active (foreground). moreover this hides separator between titlebar and window contents. this only affects mac os x. chromemargin
type: margin string controls the amount of chrome that should ...
...And 13 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 spidermonkey proxy implementation is a proto
type and the proxy api and semantics specifications are unstable. the spidermonkey 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 wr...
...roxies can be either be trapping or fixed. proxy api catch-alls can be defined only on distinct proxy objects, controlled by a handler object. there are two kinds of proxies: object proxies var proxy = proxy.create(handler, proto); and function proxies : var proxy = proxy.createfunction(handler, calltrap, constructtrap); where: proto is an optional object representing the proxy’s proto
type (defaults to null if none is provided). calltrap is a variable-argument function(args) { return any; } that reifies “proxy(args)”. note: the this-binding of the calltrap function is the this-binding of the call-site. constructtrap is an optional variable-argument function(args) { return any-object; } that reifies “new proxy(args)”. the this-binding of the constructtrap is either undefin...
...ite. constructtrap is an optional variable-argument function(args) { return any-object; } that reifies “new proxy(args)”. the this-binding of the constructtrap is either undefined (in strict mode) or the global object (in non-strict mode). if no constructtrap is provided, performing new proxy(...args) calls the proxy’s calltrap with this bound to a new object delegating to the proxy's proto
type. handler is an object that implements the handler api. handler api there are two kinds of traps: fundamental and derived traps. if one of the fundamental traps isn't implemented and the proxy is used in a way that expects the fundamental trap to be defined, then an error is thrown. if a derived trap is implemented, then that trap's code is called whenever the corresponding behavior happens on...
...And 13 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
such as netscape 7 will not render the flash plugin if the above kind of markup is used, because netscape 7 does not support activex or activex-based component invocations, with the exception of windows media player in netscape 7.1. ...
...ecause netscape 7 does not support activex or activex-based component invocations, with the exception of windows media player in netscape 7.1. mozilla-based browsers support the netscape plugin architecture, which is not com based like activex (and thus, not invoked via a unique identifier) but rather, mime
type based. mozilla-based browsers support the use of the object element along with a mime
type. ...
...xception of windows media player in netscape 7.1. mozilla-based browsers support the netscape plugin architecture, which is not com based like activex (and thus, not invoked via a unique identifier) but rather, mime
type based. mozilla-based browsers support the use of the object element along with a mime
type. ...
...And 13 more matches
IME handling guide
...
...he 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 nsiselectioncontroller. ...
...led "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 nsiselectioncontroller. in native code, you can access it with either nsiselectioncontroller or mozilla::selection
type (the latter is recommended because of
type safer). ...
...And 13 more matches
nss tech note3
or other intermediate ssl ca certs. certusageemailsigner ......... used to verify s/mime email signatures certusageemailrecipient ...... used to encrypt s/mime emails. certusageobjectsigner ........ used to verify signatures on files of executable code, e.g. jar files. certusagestatusresponder ..... used by an ocsp responder certusageverifyca ............ a ca of any kind. ...
...rypt s/mime emails. certusageobjectsigner ........ used to verify signatures on files of executable code, e.g. jar files. certusagestatusresponder ..... used by an ocsp responder certusageverifyca ............ a ca of any kind. each cert has a "
type" and a "key usage", each of which may contain one or more valid values. each of the above seccertusages translates into a required set of cert
type and key usage for the certificate itself, and into another set of required cert
type and key usage for all the ca certs in the cert chain. to determine if a cert is valid for a given cert usage, it must have the the cert
type and key usage required for that cert usage, and all the ca certs in the cert chain must have the cert
type and key usage required for ca certs for that cert usage. there a...
...ert 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 13 more matches
nsIDocShell
void createloadinfo(out nsidocshellloadinfo loadinfo); void detacheditorfromwindow(); violates the xpcom interface guidelines void finishrestore(); void firepagehidenotification(in boolean isunload); native code only! void fireunloadnotification(); native code only! ...
...idomstorage getsessionstorageforprincipal(in nsiprincipal principal, in domstring documenturi, in boolean create); nsidomstorage getsessionstorageforuri(in nsiuri uri, in domstring documenturi); void historypurged(in long numentries); void internalload(in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint32 aflags, in wstring awindowtarget, in string a
typehint, in nsiinputstream apostdatastream, in nsiinputstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest); native code only! boolean isbeingdestroyed(); void loadstream(in nsiinputstream astream, in nsiuri auri, in acstring acontent
type, in acstring acontentcharset, in nsidocshellload...
... allowdnsprefetch boolean attribute that determines whether dns prefetch is allowed for this subtree of the docshell tree. defaults to true. setting this will make it take effect starting with the next document loaded in...
...And 13 more matches
Element.classList - Web APIs
ls); div.classlist.remove(...cls); // replace class "foo" with class "bar" div.classlist.replace("foo", "bar"); versions of firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods. ...
...ee https://bugzilla.mozilla.org/show_bug.cgi?id=814014 polyfill the legacy onpropertychange event can be used to create a living classlist mockup thanks to a element.proto
type.classname property that fires the specified event once it is changed. the following polyfill for both classlist and domtokenlist ensures full compliance (coverage) for all standard methods and properties of element.proto
type.classlist for ie10-ie11 browsers plus nearly compliant behavior for ie 6-9. check it out: // 1. ...
...o create a living classlist mockup thanks to a element.proto
type.classname property that fires the specified event once it is changed. the following polyfill for both classlist and domtokenlist ensures full compliance (coverage) for all standard methods and properties of element.proto
type.classlist for ie10-ie11 browsers plus nearly compliant behavior for ie 6-9. check it out: // 1. ...
...And 13 more matches
Variable fonts guide - CSS: Cascading Style Sheets
variable fonts are an evolution of the open
type font specification that enables many different variations of a
typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. they let you access all the variations contained in a given font file via css and a single @font-face reference. this article will give you all you need to know to get you started using variable fonts. warning: in order to use variable fonts on your operating system, you need to make sure that it is up to date. for example linux oses need the latest linux free
type version, and macos prior to 10.13 does not support variable fonts. if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools. ...
... does not support variable fonts. if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools. variable fonts: what they are, and how they differ to better understand what's different about variable fonts, it is worth reviewing what non-variable ones are like and how they compare. ...
...s are like and how they compare. standard (or static) fonts in the past, a
typeface would be produced as a number of individual fonts, and each font would represent one specific width/weight/style combination. so you would have separate files for 'roboto regular', 'roboto bold', and 'roboto bold italic' — meaning that you could end up with 20 or 30 different font files to represent a complete
typeface (it could be several times that for a large
typeface that has different widths as well). in such a scenario, in order to use a
typeface for typical use on a site for body copy you would need at least four files: regular, italic, bold, and bold italic. if you wanted to add more weights, like a lighter one for captions or a heavier one for extra emphasis, that would mean several more files. th...
...And 13 more matches
BigUint64Array - JavaScript
the biguint64array
typed array represents an array of 64-bit unsigned integers in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0n. once established, you can reference elements in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation). constructor biguint64array() creates a new biguint64array object. static properties biguint64array.bytes_per_element returns a number value of the element size. 8 in the case of a biguint64array. biguint64array.name returns the string value of the constructor name. in the case of the biguint64array
type this is "biguint64array". static methods biguint64array.from() creates a new biguint64array from an array-like or i...
...urns the string value of the constructor name. in the case of the biguint64array
type this is "biguint64array". static methods biguint64array.from() creates a new biguint64array from an array-like or iterable object. see also array.from(). biguint64array.of() creates a new biguint64array with a variable number of arguments. see also array.of(). instance properties biguint64array.proto
type.buffer returns the arraybuffer referenced by the biguint64array. this is fixed at construction time and thus read only. biguint64array.proto
type.bytelength returns the length (in bytes) of the biguint64array from the start of its arraybuffer. this is fixed at construction time and thus read only. ...
...ments. see also array.of(). instance properties biguint64array.proto
type.buffer returns the arraybuffer referenced by the biguint64array. this is fixed at construction time and thus read only. biguint64array.proto
type.bytelength returns the length (in bytes) of the biguint64array from the start of its arraybuffer. this is fixed at construction time and thus read only. biguint64array.proto
type.byteoffset returns the offset (in bytes) of the biguint64array from the start of its arraybuffer. this is fixed at construction time and thus read only. biguint64array.proto
type.length returns the number of elements hold in the biguint64array. this is fixed at construction time and thus read only. ...
...And 13 more matches
Float32Array - JavaScript
the float32array
typed array represents an array of 32-bit floating point numbers (corresponding to the c float data
type) in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor float32array() creates a new float32array object. static properties float32array.bytes_per_element returns a number value of the element size. 4 in the case of an float32array. float32array.name returns the string value of the constructor name. in the case of the float32array
type: "float32array". static methods float32array.from() creates a new float32array from an...
...loat32array.name returns the string value of the constructor name. in the case of the float32array
type: "float32array". static methods float32array.from() creates a new float32array from an array-like or iterable object. see also array.from(). float32array.of() creates a new float32array with a variable number of arguments. see also array.of(). instance properties float32array.proto
type.buffer returns the arraybuffer referenced by the float32array fixed at construction time and thus read only. float32array.proto
type.bytelength returns the length (in bytes) of the float32array from the start of its arraybuffer. fixed at construction time and thus read only. float32array.proto
type.byteoffset returns the offset (in bytes) of the float32array from the start of its arraybuffer. ...
...xed at construction time and thus read only. float32array.proto
type.bytelength returns the length (in bytes) of the float32array from the start of its arraybuffer. fixed at construction time and thus read only. float32array.proto
type.byteoffset returns the offset (in bytes) of the float32array from the start of its arraybuffer. fixed at construction time and thus read only. float32array.proto
type.length returns the number of elements hold in the float32array. fixed at construction time and thus read only. instance methods float32array.proto
type.copywithin() copies a sequence of array elements within the array. see also array.proto
type.copywithin(). float32array.proto
type.entries() returns a new array iterator object that contains the key/value pairs for each index in the array. s...
...And 13 more matches
Float64Array - JavaScript
the float64array
typed array represents an array of 64-bit floating point numbers (corresponding to the c double data
type) in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor float64array() creates a new float64array object. static properties float64array.bytes_per_element returns a number value of the element size. 8 in the case of an float64array. float64array.name returns the string value of the constructor name. in the case of the float64array
type: "float64array". static methods float64array.from() creates a new float64array from a...
...loat64array.name returns the string value of the constructor name. in the case of the float64array
type: "float64array". static methods float64array.from() creates a new float64array from an array-like or iterable object. see also array.from(). float64array.of() creates a new float64array with a variable number of arguments. see also array.of(). instance properties float64array.proto
type.buffer returns the arraybuffer referenced by the float64array fixed at construction time and thus read only. float64array.proto
type.bytelength returns the length (in bytes) of the float64array from the start of its arraybuffer. fixed at construction time and thus read only. float64array.proto
type.byteoffset returns the offset (in bytes) of the float64array from the start of its arraybuffer. ...
...xed at construction time and thus read only. float64array.proto
type.bytelength returns the length (in bytes) of the float64array from the start of its arraybuffer. fixed at construction time and thus read only. float64array.proto
type.byteoffset returns the offset (in bytes) of the float64array from the start of its arraybuffer. fixed at construction time and thus read only. float64array.proto
type.length returns the number of elements hold in the float64array. fixed at construction time and thus read only. instance methods float64array.proto
type.copywithin() copies a sequence of array elements within the array. see also array.proto
type.copywithin(). float64array.proto
type.entries() returns a new array iterator object that contains the key/value pairs for each index in the array. s...
...And 13 more matches
Int16Array - JavaScript
static methods int16array.from() creates a new int16array from an array-like or iterable object. ...
...the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor int16array() creates a new int16array object. static properties int16array.bytes_per_element returns a number value of the element size. 2 in the case of an int16array. int16array.name returns the string value of the constructor name. in the case of the int16array
type: "int16array". static methods int16array.from() creates a new int16array from an array-like or iterable object. see also array.from(). int16array.of() creates a new int16array with a variable number of arguments. see also array.of(). instance properties int16array.proto
type.buffer returns the arraybuffer referenced by the int16array fixed at construction time and thus read only. in...
.... static methods int16array.from() creates a new int16array from an array-like or iterable object. see also array.from(). int16array.of() creates a new int16array with a variable number of arguments. see also array.of(). instance properties int16array.proto
type.buffer returns the arraybuffer referenced by the int16array fixed at construction time and thus read only. int16array.proto
type.bytelength returns the length (in bytes) of the int16array from the start of its arraybuffer. fixed at construction time and thus read only. int16array.proto
type.byteoffset returns the offset (in bytes) of the int16array from the start of its arraybuffer. fixed at construction time and thus read only. int16array.proto
type.length returns the number of elements hold in the int16array. fixed at...
...And 13 more matches
Int32Array - JavaScript
static methods int32array.from() creates a new int32array from an array-like or iterable object. ...
...the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor int32array() creates a new int32array object. static properties int32array.bytes_per_element returns a number value of the element size. 4 in the case of an int32array. int32array.name returns the string value of the constructor name. in the case of the int32array
type: "int32array". static methods int32array.from() creates a new int32array from an array-like or iterable object. see also array.from(). int32array.of() creates a new int32array with a variable number of arguments. see also array.of(). instance properties int32array.proto
type.buffer returns the arraybuffer referenced by the int32array fixed at construction time and thus read only. in...
.... static methods int32array.from() creates a new int32array from an array-like or iterable object. see also array.from(). int32array.of() creates a new int32array with a variable number of arguments. see also array.of(). instance properties int32array.proto
type.buffer returns the arraybuffer referenced by the int32array fixed at construction time and thus read only. int32array.proto
type.bytelength returns the length (in bytes) of the int32array from the start of its arraybuffer. fixed at construction time and thus read only. int32array.proto
type.byteoffset returns the offset (in bytes) of the int32array from the start of its arraybuffer. fixed at construction time and thus read only. int32array.proto
type.length returns the number of elements hold in the int32array. fixed at...
...And 13 more matches
Int8Array - JavaScript
static methods int8array.from() creates a new int8array from an array-like or iterable object. see also array.from(). int8array.of() creates a new int8array with a variable number of arguments. ...
...ts in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor int8array() creates a new int8array object. static properties int8array.bytes_per_element returns a number value of the element size. 1 in the case of an int8array. int8array.name returns the string value of the constructor name. in the case of the int8array
type: "int8array". static methods int8array.from() creates a new int8array from an array-like or iterable object. see also array.from(). int8array.of() creates a new int8array with a variable number of arguments. see also array.of(). instance properties int8array.proto
type.buffer returns the arraybuffer referenced by the int8array fixed at construction time and thus read only. int8array...
...8array". static methods int8array.from() creates a new int8array from an array-like or iterable object. see also array.from(). int8array.of() creates a new int8array with a variable number of arguments. see also array.of(). instance properties int8array.proto
type.buffer returns the arraybuffer referenced by the int8array fixed at construction time and thus read only. int8array.proto
type.bytelength returns the length (in bytes) of the int8array from the start of its arraybuffer. fixed at construction time and thus read only. int8array.proto
type.byteoffset returns the offset (in bytes) of the int8array from the start of its arraybuffer. fixed at construction time and thus read only. int8array.proto
type.length returns the number of elements hold in the int8array. fixed at cons...
...And 13 more matches
Uint8Array - JavaScript
static methods uint8array.from() creates a new uint8array from an array-like or iterable object. see also array.from(). uint8array.of() creates a new uint8array with a variable number of arguments. ...
...the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor uint8array() creates a new uint8array object. static properties uint8array.bytes_per_element returns a number value of the element size. 1 in the case of an uint8array. uint8array.name returns the string value of the constructor name. in the case of the uint8array
type: "uint8array". static methods uint8array.from() creates a new uint8array from an array-like or iterable object. see also array.from(). uint8array.of() creates a new uint8array with a variable number of arguments. see also array.of(). instance properties uint8array.proto
type.buffer returns the arraybuffer referenced by the uint8array fixed at construction time and thus read only. ui...
.... static methods uint8array.from() creates a new uint8array from an array-like or iterable object. see also array.from(). uint8array.of() creates a new uint8array with a variable number of arguments. see also array.of(). instance properties uint8array.proto
type.buffer returns the arraybuffer referenced by the uint8array fixed at construction time and thus read only. uint8array.proto
type.bytelength returns the length (in bytes) of the uint8array. fixed at construction time and thus read only. uint8array.proto
type.byteoffset returns the offset (in bytes) of the uint8array from the start of its arraybuffer. fixed at construction time and thus read only. uint8array.proto
type.length returns the number of elements held in the uint8array. fixed at construction time and thus read o...
...And 13 more matches
JavaScript Client API - Archive of obsolete content
ode could require significant refactoring in future releases. before developing against the javascript api, it is recommended to speak to developers of the api. see https://wiki.mozilla.org/services/sync for their contact information. to create a custom sync engine to synchronize a new data you, you'll need to define an engine object that extends the base syncengine object. this involves writing
types that extend the store, tracker, and record
types as well. it will be very helpful to look at an existing sync engine for guidance. have a look at one of the following files: services/sync/modules/engines/bookmarks.js services/sync/modules/engines/history.js setting up a js module the code for your custom sync engine should live in a js module. first off we're going to import the files me...
...leartext must be a json-able object. put into it all values that you want to have encrypted, stored on the server, decrypted, and synced up. you may find it useful to write getters and setters for various properties of your record implementation. ...
...into it all values that you want to have encrypted, stored on the server, decrypted, and synced up. you may find it useful to write getters and setters for various properties of your record implementation. ...
...And 12 more matches
Venkman Introduction - Archive of obsolete content
page and click on the "install" link for the most recent version. when the download is complete, restart your browser (some windows users may also need to restart their computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have,
type /version in the interactive session view. for more information about the latest improvements and versions, see the venkman development page. there are two ways to start the debugger: from firefox, you can start it by selecting javascript debugger from the tools menu (tools->web development menu in mozilla 1.x and netscape). you can also start the browser with the -venkman command line option...
...stop button dismisses the stop mode and specifies that scripts should be executed normally, without pausing as each statement is executed. the pretty print button toggles pretty print mode. while in pretty print mode, the contents of the source view will contain the decompiled source text for the selected function. this is the same text you would get from the tosource method of the function proto
type. if the source text you are debugging is poorly formatted, pretty print can help make it easier to read by inserting line breaks and whitespace in appropriate places. when pretty print is enabled you will see a green check mark on the toolbar button, and the menu item will be checked as well. the loaded scripts view the loaded scripts view is in the top left portion of the window. when a fil...
...propriate places. when pretty print is enabled you will see a green check mark on the toolbar button, and the menu item will be checked as well. the loaded scripts view the loaded scripts view is in the top left portion of the window. when a file is loaded by the browser it will appear in this view, and when unloaded it will be removed. files are listed in alphabetical order, grouped by file
type. ...
...And 12 more matches
XUL controls - Archive of obsolete content
lowing table lists the xul user interface controls. for a step-by-step guide on how to use these controls, see the xul tutorial. for more reference information, see the xul reference. <button> a button that can be pressed by the user. <button label="save" accesskey="s"/> more information about the button element. button reference <button
type="menu"> a button that has a drop down menu attached to it. pressing the button opens the menu. <button
type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this
type of menu button element. button reference related elements: menupopup menuitem <butt...
...enu"> a button that has a drop down menu attached to it. pressing the button opens the menu. <button
type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this
type of menu button element. button reference related elements: menupopup menuitem <button
type="menu-button"> a button that that has a separate arrow button with a menu attached to it. unlike with the 'menu'
type, a separate action may be performed when the main part of the button is pressed. ...
...pup> </button> more information about this
type of menu button element. button reference related elements: menupopup menuitem <button
type="menu-button"> a button that that has a separate arrow button with a menu attached to it. unlike with the 'menu'
type, a separate action may be performed when the main part of the button is pressed. <button
type="menu-button" label="new"> <menupopup> <menuitem label="new document"/> <menuitem label="new image"/> </menupopup> </button> more information about this
type of menu button element. button reference related elements: menupopup menuitem <checkbox> a control that may be turned on and off, typically used to create options which may be enabl...
...And 12 more matches
listitem - Archive of obsolete content
« xul reference home [ examples | 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. ...
...t 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. ...
...ected, tabindex,
type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attributes accesskey
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. checked
type: boolean indicates whether the element is checked or not. use hasattribute() to determine whether this attribute is set instead of getattribute(). ...
...And 12 more matches
menu - Archive of obsolete content
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. ...
...this should be one of th...
...menuitem label="redo"/> </menupopup> </menu> </menubar> attributes acceltext
type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not apply to menus directly on the menubar. accesskey
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. allowevents
type: boolean if true, events are passed to children of the element. ...
...And 12 more matches
radio - Archive of obsolete content
dio 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. ...
...cted, tabindex, value properties accesskey, accessible
type, control, crop, disabled, image, label, radiogroup, selected, tabindex, value examples <radiogroup> <radio id="orange" label="red" accesskey="r"/> <radio id="violet" label="green" accesskey="g" selected="true"/> <radio id="yellow" label="blue" accesskey="b" disabled="true"/> </radiogroup> attributes accesskey
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. command
type: id set to the id of a command element that is being observed by the element. ...
...an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. ...
...And 12 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
detection to distinguish vendor/version through the existence of particular javascript objects. the existence of document.layers was sufficient to be sure that the browser was netscape navigator 4 while the existence of document.all was sufficient to be sure that the browser was microsoft internet explorer 4. an implicit assumption by many web authors around this time was the there were only two
types of browser available... netscape navigator and microsoft internet explorer. these strategies of classifying browsers by vendor/version, assuming that the only browsers being used where either netscape navigator 4 or internet explorer 4 failed when alternative browsers such as those based upon gecko were introduced. many of the problems reported in the press regarding gecko's inability to displa...
...veryone to avoid this trap. problems caused by inappropriate browser detection excluding unknown browsers if you only provide tests for specific browsers in your detection logic, your site will not be usable if a visitor uses a different browser. consider the following example: // wrong approach - do not use! if (document.all) { // internet explorer 4+ document.write('<link rel="stylesheet"
type="text/css" src="style-ie.css">'); } else if (document.layers) { // navigator 4 document.write('<link rel="stylesheet"
type="text/css" src="style-nn.css">'); } note how the above example only provided stylesheets for internet explorer and navigator 4 and even then only if the visitor has javascript support turned on in their browser. users of netscape 6, netscape 7, compuserve 7, mozilla, opera ...
... 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. netscape 7 corrects this error and introduces another chance for user agent string based detection to fail. mozilla/5.0 (...) gecko/200207xx netscape/7.0 note how netscape 7 no longer uses t...
...And 12 more matches
CSS values and units - Learn web development
es that are valid for any particular property. in this lesson we will take a look at some of the most common values and units in use. prerequisites: basic computer literacy, basic software installed, basic knowledge 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 different
types of values and units used in css properties. what is a css value? in css specifications and on the property pages here on mdn you will be able to spot values as they will be surrounded by angle brackets, such as <color> or <length>. when you see the value <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <colo...
... in css specifications and on the property pages here on mdn you will be able to spot values as they will be surrounded by angle brackets, such as <color> or <length>. when you see the value <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <color> reference page. ...
...ll be surrounded by angle brackets, such as <color> or <length>. when you see the value <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <color> reference page. note: you'll also see css values referred to as data
types. the terms are basically interchangeable — when you see something in css referred to as a data
type, it is really just a fancy way of saying value. note: 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 followin...
...And 12 more matches
Styling lists - Learn web development
on to css), css text and font fundamentals. objective: to become familiar with the best practices and properties related to styling lists. a simple list example to begin with, let's look at a simple list example. throughout this article, we'll look at unordered, ordered, and description lists — all have styling features that are similar, and some that are particular to their
type of list. the unstyled example is available on github (check out the source code too.) the html for our list example looks like so: <h2>shopping (unordered) list</h2> <p>paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <ul> <li>hummus</li> <li>pita</li> <li>green salad</li> <li>hall...
...ve a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em.) the list items (<li> elements) have no set defaults for spacing. the <dl> element has a top and bottom margin of 16px (1em), but no padding set. the <dd> elements have margin-left of 40px (2.5em.) the <p> elements we've included for reference have a top and bottom margin of 16px (1em), the same as the different list
types. handling list spacing when styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the css used for the text styling and spacing is as fo...
...font-size: 10px; } h2 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.5rem; } li, p { line-height: 1.5; } /* description list styles */ dd, dt { line-height: 1.5; } dt { font-weight: bold; } the first rule sets a sitewide font and a baseline font size of 10px. these are inherited by everything on the page. rules 2 and 3 set relative font sizes for the headings, different list
types (the children of the list elements inherit these), and paragraphs. this means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent. rule 4 sets the same line-height on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines. this will also help to ke...
...And 12 more matches
Useful string methods - Learn web development
rain starts melting, don't worry! you really don't need to know about most of these early on in your learning journey. but there are a few that you'll potentially use quite often that we'll look at here. let's enter some examples into the browser developer console. finding the length of a string this is easy — you simply use the length property. try entering the following lines: let browser
type = 'mozilla'; browser
type.length; this should return the number 7, because "mozilla" is 7 characters long. this is useful for many reasons; for example, you might want to find the lengths of a series of names so you can display them in order of length, or let a user know that a username they have entered into a form field is too long if it is over a certain length. retrieving a specific string c...
...is over a certain length. retrieving a specific string character on a related note, you can return any character inside a string by using square bracket notation — this means you include square brackets ([]) on the end of your variable name. ...
... to return, so for example to retrieve the first letter you'd do this: browser
type[0]; remember: computers count from 0, not 1! you could use this to, for example, find the first letter of a series of strings and order them alphabetically. to retrieve the last character of any string, we could use the following line, combining this technique with the length property we looked at above: browser
type[browser
type.length-1]; the length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using length-1 gets us the last character. finding a substring inside a string and extracting it sometimes you'll want to find if a smaller string is present inside a larger one (we generally say if a substring is present inside a string). this can be done using the indexof() m...
...And 12 more matches
Following the Android Toasts Tutorial from a JNI Perspective
y popular feature, so mozilla developers chose to bring it to the privileged javascript scope via the nativewindow object. the java code example above can be done with privileged javascript from firefox for android with the following code: window.nativewindow.toast.show("hello, firefox!", "short"); converting java to jni.jsm the first step is to look at the java code and see all the different
types, methods, constructors, and fields that are being used. in the toast code we have the following:
types - context, charsequence, int, toast, and void methods - maketext, show fields - length_short no constructors are used. declare the
types we will start by declaring the
types needed. in jni, there is the all-important property called sig. when something is declared, we are stating the s...
...
types - context, charsequence, int, toast, and void methods - maketext, show fields - length_short no constructors are used. declare the
types we will start by declaring the
types needed. in jni, there is the all-important property called sig. when something is declared, we are stating the sig and the name. ...
...oast, and void methods - maketext, show fields - length_short no constructors are used. declare the
types we will start by declaring the
types needed. in jni, there is the all-important property called sig. when something is declared, we are stating the sig and the name. ...
...And 12 more matches
NSS functions
ence documents the functions most commonly used by applications to support ssl. the nss home page links to additional ssl documentation. if documentation is available for a function listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference. the mozilla cross reference (mxr) link for each function provides access to the function definition, proto
type definition, and source code references. the nss version column indicates which versions of nss support the function. function name/documentation source code nss versions nss_getclientauthdata mxr 3.2 and later nss_setdomesticpolicy mxr 3.2 and later nss_setexportpolicy mxr 3.2 and later nss_setfrancepolicy mxr 3.2 and l...
...laced with newer versions. the deprecated functions are not supported by the new ssl shared libraries. applications that want to use the ssl shared libraries must convert to calling the new replacement functions listed below. each function name is linked to its entry in the old ssl reference. the mozilla cross reference (mxr) link for each function provides access to the function definition, proto
type definition, and source code references. function name/documentation source code replacement in nss 3.2 ssl_enable mxr ssl_optionset ssl_enablecipher mxr ssl_cipherprefsetdefault ssl_enabledefault mxr ssl_optionsetdefault ssl_redohandshake mxr ssl_rehandshake ...
... ssl_cipherpolicyset certificate functions the public functions listed here are used to interact with certificate databases. if documentation is available for a function listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference. the mozilla cross reference (mxr) link for each function provides access to the function definition, proto
type definition, and source code references. the nss version column indicates which versions of nss support the function. function name/documentation source code nss versions cert_addcerttolisttail mxr 3.2 and later cert_addextension mxr 3.5 and later cert_addocspacceptableresponses mxr 3.6 and later cert_addokdomainname mxr 3.
...And 12 more matches
NSS tools : ssltap
/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x000006) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e5 |..... ...
...cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e5 |.....
type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f
type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho. session id = { length = 32 contents = {.
... session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 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£È. ...
...And 12 more matches
JSAPI Cookbook
this article shows the jsapi equivalent for a tiny handful of common javascript idioms. note: the foss wiki page contains a few links to other libraries and programs that can make life easier when using spidermonkey and jsapi. basics working with values the basic, undifferentiated value
type in the jsapi is js::value. ...
... this article shows the jsapi equivalent for a tiny handful of common javascript idioms. note: the foss wiki page contains a few links to other libraries and programs that can make life easier when using spidermonkey and jsapi. basics working with values the basic, undifferentiated value
type in the jsapi is js::value. ...
...s. note: the foss wiki page contains a few links to other libraries and programs that can make life easier when using spidermonkey and jsapi. basics working with values the basic, undifferentiated value
type in the jsapi is js::value. ...
...And 12 more matches
Places Developer Guide
e apis are uri-centric, some use item ids. the api signature and context usually make clear which is required. bookmarks the toolkit bookmarks service is nsinavbookmarksservice: var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); this service provides methods for adding, editing and deleting items in the bookmarks collection. ...
...pi signature and context usually make clear which is required. bookmarks the toolkit bookmarks service is nsinavbookmarksservice: var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); this service provides methods for adding, editing and deleting items in the bookmarks collection. ...
...avbookmarksservice: var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); this service provides methods for adding, editing and deleting items in the bookmarks collection.
types in the bookmark system there are the four
types of items in the bookmarks system, and their identifiers in the idl: bookmark: nsinavbookmarksservice.
type_bookmark folder: nsinavbookmarksservice.
type_folder separator: nsinavbookmarksservice.
type_separator dynamic container: nsinavbookmarksservice.
type_dynamic_container identifying items in the bookmark system items in the bookmarks collection are identified by an id unique to the user's profile. most of the apis provided by the bookmarks service use an item's id to identify what to act on. t...
...And 12 more matches
Using media queries - CSS: Cascading Style Sheets
media queries are useful when you want to modify your site or app depending on a device's general
type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width). media queries are used for the following: to conditionally apply styles with the css @media and @import at-rules. to target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute. to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods. ...
...les with the css @media and @import at-rules. to target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute. to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods. ...
...style>, <link>, <source>, and other html elements with the media= attribute. to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods. note: the examples on this page use css's @media for illustrative purposes, but the basic syntax remains the same for all
types of media queries. syntax a media query is composed of an optional media
type and any number of media feature expressions. multiple queries can be combined in various ways by using logical operators. media queries are case-insensitive. a media query computes to true when the media
type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. queries involving unknown media
types are always false. note: a...
...And 12 more matches
HTML attribute reference - HTML: Hypertext Markup Language
accept-charset <form> list of supported charsets. accesskey global attribute keyboard shortcut to activate or add focus to the element. ...
... accept-charset <form> list of supported charsets. accesskey global attribute keyboard shortcut to activate or add focus to the element. ...
...n>, <select>, <textarea> indicates whether the user can interact with the element. download <a>, <area> indicates that the hyperlink is to be used for downloading a resource. draggable global attribute defines whether the element can be dragged. dropzone global attribute indicates that the element accepts the dropping of content onto it. enc
type <form> defines the content
type of the form data when the method is post. enterkeyhint <textarea>, contenteditable the enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards. the attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attri...
...And 12 more matches
Equality comparisons and sameness - JavaScript
which operation you choose depends on what sort of comparison you are looking to perform. briefly: double equals (...
... which operation you choose depends on what sort of comparison you are looking to perform. briefly: double equals (...
... which operation you choose depends on what sort of comparison you are looking to perform. briefly: double equals (...
...And 12 more matches
Array - JavaScript
the javascript array class is a global object that is used in the construction of arrays; which are high-level, list-like objects. description arrays are list-like objects whose proto
type has methods to perform traversal and mutation operations. neither the length of a javascript array nor the
types of its elements are fixed. since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, javascript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. in general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using
typed arrays. arrays cannot use strings as element indexes (as in an associative array) but must use integers. se...
...y object. static properties get array[@@species] the constructor function is used to create derived objects. static methods array.from() creates a new array instance from an array-like or iterable object. array.isarray() returns true if the argument is an array, or false otherwise. ...
...constructor function is used to create derived objects. static methods array.from() creates a new array instance from an array-like or iterable object. array.isarray() returns true if the argument is an array, or false otherwise. array.of() creates a new array instance with a variable number of arguments, regardless of number or
type of the arguments. instance properties array.proto
type.length reflects the number of elements in an array. ...
...And 12 more matches
BigInt64Array - JavaScript
the bigint64array
typed array represents an array of 64-bit signed integers in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0n. once established, you can reference elements in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation). constructor bigint64array() creates a new bigint64array object. static properties bigint64array.bytes_per_element returns a number value of the element size. 8 in the case of a bigint64array. bigint64array.name returns the string value of the constructor name. in the case of the bigint64array
type, this is "bigint64array". static methods bigint64array.from() creates a new bigint64array from an array-like or iterable obj...
...e returns the string value of the constructor name. in the case of the bigint64array
type, this is "bigint64array". static methods bigint64array.from() creates a new bigint64array from an array-like or iterable object. see also array.from(). bigint64array.of() creates a new bigint64array with a variable number of arguments. see also array.of(). instance properties bigint64array.proto
type.buffer returns the arraybuffer referenced by the bigint64array. this is fixed at construction time and thus read only. bigint64array.proto
type.bytelength returns the length (in bytes) of the bigint64array from the start of its arraybuffer. this is fixed at construction time and thus read only. ...
... arguments. see also array.of(). instance properties bigint64array.proto
type.buffer returns the arraybuffer referenced by the bigint64array. this is fixed at construction time and thus read only. bigint64array.proto
type.bytelength returns the length (in bytes) of the bigint64array from the start of its arraybuffer. this is fixed at construction time and thus read only. bigint64array.proto
type.byteoffset returns the offset (in bytes) of the bigint64array from the start of its arraybuffer. this is fixed at construction time and thus read only. bigint64array.proto
type.length returns the number of elements hold in the bigint64array. this is fixed at construction time and thus read only. ...
...And 12 more matches
SVG documentation index - SVG: Scalable Vector Graphics
ge for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content. 3 compatibility sources svg the following sources are used for the compatibility tables on svg elements and attributes: 4 content
type needstechnicalreview, svg,
types, data
types svg makes use of a number of data
types. this article lists these
types along with their syntax and descriptions of what they're used for. 5 linking guide, svg the target attribute on the svg <a> element doesn't work in mozilla firefox 1.5. when svg documents are embedded within a parent html document using the tag: ...
...reference, svg the svg core attributes are all the common attributes that can be specified on any svg element. 16 svg event attributes advanced, attribute, draft, landing, needsupdate, svg event attributes always have their name starting with "on" followed by the name of the event for which they are intended. they specifies some script to run when the event of the given
type is dispatched to the element on which the attributes are specified. 17 svg presentation attributes attribute, beginner, draft, reference, svg svg presentation attributes are css properties that can be used as attributes on svg elements. 18 svg styling attributes attribute, beginner, needsexample, reference, svg the svg styling attributes are all the attri...
...ty. 23 alphabetic deprecated, svg, svg attribute the alphabetic attribute defines the lower baseline of a font. it has the same syntax and semantics as the baseline descriptor within an @font-face. 24 amplitude needscompattable, svg, svg attribute the amplitude attribute controls the amplitude of the gamma function of a component transfer element when its
type attribute is gamma. 25 arabic-form deprecated, svg, svg attribute the arabic-form attribute indicates which of the four possible forms an arabic glyph represents. 26 ascent deprecated, needsexample, svg, svg attribute the ascent attribute defines the maximum unaccented height of the font within the font coordinate system. 27 attributename n...
...And 12 more matches
Enhanced Extension Installation - Archive of obsolete content
into the folder used by the older version, and obsolete files are not cleaned up. this can lead to incompatibilities, mysterious crashes and other problems. there are not enough guards in the upgrade and uninstall process to handle failure and abort the operation, restoring the previous state. items that are installed must be visible in the extension manager user interface, even if the extension
type is just an integration hook that has no meaningful ui presence. extension installation and registration is also prohibitively difficult/annoying for developers, who are forced to either dangerously hand-edit all the appropriate manifest files, or package their code as a xpi and install it that way every time they make a change. the state of the world install locations in firefox 1.0 extensio...
...tructure the extension manager implements a rdf datasource which contains a composite of the two xml/rdf datasources at the two install locations. the composite datasource handles all read-only information requests, and when data must be written the extension manager determines the appropriate datasource to write and flush to. ...
...nstalled location of an extension is expressed throughout the code using a boolean value, often referred to as isprofile - true if the item is installed in the profile directory's extensions folder. this boolean relationship itself is not stored directly in the datasource. rather, if the system needs to know where an item is located, it checks to see if the item is a member of the the appropriate
type container (urn:mozilla:extension:root or urn:mozilla:theme:root) in each of the two datasources. this is clumsy. item
type the extension system in firefox 1.0 supports only two item
types, extensions and themes. this is a by-product of the fact that there are physical per-
type containers in the datasource. sections of ui that display installed items are rooted on these containers. tracking ite...
...And 11 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
t makes things confusing. it is nonetheless the "correct" and best way to do things. ...
...in jsm you'll need to fetch it from an interface: const xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest"); here's how to load a file using it: function loadfile(url,
type,returnresult) { var request = new xmlhttprequest(); request.open("get", url, true); // async=true request.response
type =
type; request.onerror = function(event) { logerrormessage("error attempting to load: " + url); returnresult(null); }; request.onload = function(event) { if (request.response) returnresult(request.response); else request.onerror(event); }; request.send(); } loadfile("chrome://myaddon/content/filename.ext",data
type,functi...
...equest.send(); } loadfile("chrome://myaddon/content/filename.ext",data
type,function(data) { /* do stuff with data */ }); note: when using xmlhttprequest to access a file:// url the request.status is not properly set to 200 to indicate success. in such cases, request.readystate == 4, request.status == 0 and request.response will evaluate to true. if your file is text, use "text" as your data
type. if you're getting json this way make sure to explicitly set the
type as "text" if you intend to parse it yourself. even though it says that the default
type is "text", firefox will attempt to autodetect and fail, resulting in an error message in the console. ...
...And 11 more matches
dialog - Archive of obsolete content
t, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition 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" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selecte...
... buttonaccesskeydiscl...
..." selected="true"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebarcolor
type: color string specify background color of the window's titlebar when it is active (foreground). moreover this hides separator between titlebar and window contents. this only affects mac os x. buttonaccesskeyaccept
type: string the access key to use for the "accept" button. buttonaccesskeycancel
type: string the access key to use for the "cancel" button. ...
...And 11 more matches
toolbar - Archive of obsolete content
it can be collapsed with a grippy when the toolbar is placed inside a toolbox. the toolbar should always have an id attribute. note: gecko 2.0 adds support for external toolbars. these are toolbars that are not children of a toolbox element. you can associate an external toolbar with a toolbox for the purpose of managing your toolbars by setting the toolboxid property on the toolbar. ...
...the palette now only contains items not already in the toolbar. this introduces a potential compatibility problem for extensions that depend on being able to identify all possible toolbar items by looking in the toolbarpalette. ...
...this will be modif...
...And 11 more matches
wizard - Archive of obsolete content
e the next and pageid attributes on the pages to change the sequence. the wizard will rendered in a manner suitable for the user's selected theme and platform. in newer versions of mozilla, a statusbar may be placed directly inside the wizard element which will be shared among all pages. more information is available in the xul tutorial. ...
...nformation is available in the xul tutorial. ...
...byid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> attributes activetitlebarcolor
type: color string specify background color of the window's titlebar when it is active (foreground). moreover this hides separator between titlebar and window contents. this only affects mac os x. firstpage
type: boolean true if the wizard is on the first page. inactivetitlebarcolor
type: color string specify background color of the window's titlebar when it is inactive (background). ...
...And 11 more matches
ECMAScript 2015 support in Mozilla - Archive of obsolete content
embly. it will also appear as the international industry standard iso/iec 16262:2016. a pdf and html version of the standard can be freely downloaded on ecma-international.org. a channel for feedback on ecmascript standards is es-discuss. ...
...ernational industry standard iso/iec 16262:2016. a pdf and html version of the standard can be freely downloaded on ecma-international.org. a channel for feedback on ecmascript standards is es-discuss. ...
...dard iso/iec 16262:2016. a pdf and html version of the standard can be freely downloaded on ecma-international.org. a channel for feedback on ecmascript standards is es-discuss. ...
...And 11 more matches
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
); return false; } var j; var xincludeparent = xinclude.parentnode; try { netscape.security.privilegemanager.enableprivilege('universalxpconnect universalbrowserread'); // necessary with file:///-located files trying to reach external sites if (href !== null) { var response, response
type; var request = new xmlhttprequest(); request.open('get', href, false); request.setrequestheader('if-modified-since', 'thu, 1 jan 1970 00:00:00 gmt'); request.setrequestheader('cache-control', 'no-cache'); if (accept) { request.setrequestheader('accept', accept); ...
...pr...
...probably just need bom test since other encoding...
...And 11 more matches
HTML forms in legacy browsers - Learn web development
they are far from the only ones. in the mobile world, when neither the browser nor the os can be updated such as on older android phones or iphones, the stock browsers that don't update are also legacy browsers. dealing with this wilderness is part of the job. fortunately, there are a few tricks to know that can help you to solve most of the problems caused by legacy browsers. and html5 <input>
types don't fail when not supported: they fall back to
type=text. learn about the issues to understand common patterns, it helps to read browser documentation. if you are reading this on mdn, you are at the right place to start. just check the support of the elements (or dom interface) you want to use. mdn has compatibility tables available for most elements, properties and apis that can be used in ...
...riend graceful degradation and progressive enhancement are development patterns that allow you to build great stuff by supporting a wide range of browsers at the same time. when you build something for a modern browser, and you want to be sure it will work, one way or another, on legacy browsers, you are performing graceful degradation. let's see some examples related to html forms. ...
...egradation and progressive enhancement are development patterns that allow you to build great stuff by supporting a wide range of browsers at the same time. when you build something for a modern browser, and you want to be sure it will work, one way or another, on legacy browsers, you are performing graceful degradation. let's see some examples related to html forms. ...
...And 11 more matches
Beginning our React todo list - Learn web development
ur clipboard, then paste it into app.js so that it replaces the existing app() function: function app(props) { return ( <div classname="todoapp stack-large"> <h1>todomatic</h1> <form> <h2 classname="label-wrapper"> <label htmlfor="new-todo-input" classname="label__lg"> what needs to be done? ...
...arge"> <h1>todomatic</h1> <form> <h2 classname="label-wrapper"> <label htmlfor="new-todo-input" classname="label__lg"> what needs to be done? ...
...to be done? ...
...And 11 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. ...
... "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey 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 } command
type;
typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } header
type; /* 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 <opfilen...
...inal output file.\n\n", ""); exit(-1); } /* 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/. ...
...And 11 more matches
nss tech note1
s, the two decoders have a lot in common. quickder was written to be as compatible as possible with the classic decoder, in order to ease migration to it in areas of critical performance bottlenecks. for this reason, i will first describe all the common functionality of the two decoders, before outlining their differences. the main non-streaming apis for these two decoders have an identical proto
type : secstatus sec_asn1decodeitem(prarenapool *pool, void *dest, const sec_asn1template *t, secitem *item); secstatus sec_quickderdecodeitem(prarenapool* arena, void* dest, const sec_asn1template* templateentry, secitem* src); here is a description of the arguments : secitem* src† is a structure containing a pointer to the binary data to be decoded, as well as its size. const sec_...
...uickderdecodeitem(prarenapool* arena, void* dest, const sec_asn1template* templateentry, secitem* src); here is a description of the arguments : secitem* src† is a structure containing a pointer to the binary data to be decoded, as well as its size. const sec_asn1template* templateentry is a pointer to one or more decoder templates. the number of required templates is determined by the
type of the first template.when multiple templates are required, the pointer must point to a null-terminated array of templates. the syntax of these templates is identical for both decoders, except where noted. a "null template" is a template that is all zeros, having a zero kind.† the term "null-terminated array", as used throughout this document, means an array of templates, the last of which is a...
...f templates. the syntax of these templates is identical for both decoders, except where noted. a "null template" is a template that is all zeros, having a zero kind.† the term "null-terminated array", as used throughout this document, means an array of templates, the last of which is a null template. void* dest is a pointer to the target area. this is where the decoder stores its output. the
type is undefined as it is completely dependent on the content of the decoder templates.† this typically points to a struct that is described (or partially described) by the templates. prarenapool* arena is a pointer to an nspr arena pool. this is the arena pool from which the decoder will allocate memory as needed. decoder templates : the sec_asn1template structure tells the decoder what to do...
...And 11 more matches
Python binding for NSS
slchannelinfo.format the following class properties were added: certificate.ssl_trust_flags certificate.email_trust_flags certificate.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 sslci...
..., formerly it was limited to only a few objects. ...
...nly a few objects. ...
...And 11 more matches
ssltyp.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. ...
... 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. ...
...e 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 selected ssl
types and structures chapter 3 selected ssl
types and structures this chapter describes some of the most important
types and structures used with the functions described in the rest of this document, and how to manage the memory used for them. ...
...And 11 more matches
certutil
ent 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 module database management, see the modutil manpages. options and arguments running certutil always requires one (and only one) option to specify the
type of certificate operation. each option may take arguments, anywhere from none to multiple arguments. run the command option and -h to see the arguments available for each command option. options options specify an action and are uppercase. -a add an existing certificate to a certificate database. the certificate database should already exist; if one is not ...
... a new certificate will derive its authenticity. use the exact nickname or alias of the ca certificate, or use the ca's email address. bracket the issuer string with quotation marks if it contains spaces. -d [sql:]directory specify the database directory containing the certificate and key database files. certutil 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. -e check a certificate's signature during the process of validating a certificate. ...
.... internal slot 2 is used by key and certificate services. internal slot 1 is used by cryptographic services. -i input_file pass an input file to the command. depending on the command option, an input file can be a specific certificate, a certificate request file, or a batch file of commands. ...
...And 11 more matches
imgIContainer
ramenumber, [array, size_is(palettelength)] out pruint32 palettedata, out unsigned long palettelength); obsolete since gecko 2.0 unsigned long getframeimagedatalength(in unsigned long framenumber); obsolete since gecko 2.0 imagecontainer getimagecontainer(); native code only! ...
...(); void removeframe(in gfxiimageframe item); obsolete since gecko 1.9.2 void requestdecode(); void requestdiscard(); void requestrefresh([const] in timestamp atime); violates the xpcom interface guidelines void resetanimation(); void restoredatadone(); native code only! obsolete since gecko 2.0 void setdiscardable(in string amime
type); native code only! obsolete since gecko 2.0 void setframeblendmethod(in unsigned long framenumber, in print32 ablendmethod); obsolete since gecko 2.0 void setframedisposalmethod(in unsigned long framenumber, in print32 adisposalmethod); obsolete since gecko 2.0 void setframehasnoalpha(in unsigned long framenumber); obsolete since gecko 2.0 void setframetim...
...you can only be guaranteed that querying this will not throw if status_decode_complete is set on the imgirequest. read only. exceptions thrown ns_error_not_available if the animated state cannot be determined. animationmode unsigned short currentframe ...
...And 11 more matches
nsINavHistoryService
se 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 markpageas
typed(in nsiuri auri); boolean canadduri(in nsiuri auri); long long addvisit(in nsiuri auri, in prtime atime, in nsiuri areferringuri, in long atransition
type, in boolean aisredirect, in long long asessionid); obsolete since gecko 22.0 nsinavhistoryquery getnewquery(); nsinavhistoryqueryoptions getnewqueryoptions(); nsinavhistoryresult executequery(in nsin...
...this can be used in ui to determine whether the "clear history" button should be enabled or not. this is much better than using browserhistory.count since that can be very slow if there is a lot of history (it must enumerate each item). this is pretty fast. historydisabled boolean true if history ...
...e whether the "clear history" button should be enabled or not. this is much better than using browserhistory.count since that can be very slow if there is a lot of history (it must enumerate each item). this is pretty fast. historydisabled boolean true if history is disabled. currently, history is disabled if the browser.history_expire_days pref is "0". constants transition
type constants constant value description transition_link 1 this transition
type means the user followed a link and got a new toplevel window. transition_
typed 2 this transition
type is set when the user
typed the url to get to the page. transition_bookmark 3 this transition
type is set when the user followed a bookmark to get to the page. ...
...And 11 more matches
Reference Manual
in the constructor, destructor, and assignment operators of nscomptr. whenever you `point' the nscomptr at a different xpcom object (by assignment or initialization), it must release its old value, if any, and addref the new. at its own destructor time it must release as well. nscomptr only does exactly the work you would have done, if you always remembered to do the right thing. safety features
type safeguards it is an invariant of nscomptr that it holds the xpcom-correct interface pointer for it's underlying
type. for example, an nscomptr<nsifoo> will always hold the pointer that would be returned by queryinterface, when querying an xpcom object for its nsifoo interface. in debug builds, if you subvert this invariant with one of the assignment forms that doesn't call queryinterface, nscompt...
...ith one of the assignment forms that doesn't call queryinterface, nscomptr will assert at runtime in the bad assignment. // given two un-related interfaces |nsifoo| and |nsibar|... nsibar* bar = ...; // ... nscomptr<nsifoo> foo = bar; // ns_assertion: "queryinterface needed" // ...even assuming you can get the line to compile // (either by casting, or because the
types are related by c ) this invariant is relaxed for nscomptr<nsisupports>. like nsisupports* (or even void*), people generally use nscomptr<nsisupports> to mean "any xpcom interface." it would be annoying if nscomptr forced you to queryinterface to the xpcom-correct nsisupports within an object in places where you don't care to know the exact
type. null-dereference safeguards an n...
...eature provided by nscomptr is that it addrefs and releases automatically at the appropriate times. casting never use old-style c/c++ casts on an nscomptr. an old-style cast is guaranteed to compile, even if it can't do the right thing. old-style casts degenerate into the equivalent of reinterpret_cast if no conversion is defined. such a cast can easily by-pass nscomptrs machinery, causing leaks,
type mismatches, and other calamities. // old-style c/c++ casts by-pass |nscomptr|s machinery and cause leaks... nsresult rv; nscomptr<nsifoo> foo = ...; // ... 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...
...And 11 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
s 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 allowkeyboardmotion = 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 second to rotate around the z axis. enablerotation a boolean indicating ...
...wer 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 used if the browser doesn't implement navigator.xr. session_
type the
type of xr session to create: inline for an inline session presented in the context of the document and immersive-vr to present the scene to an immersive vr headset. mouse_speed a multiplier used to scale the inputs from the mouse used for pitch and yaw control. move_distance the distance to move in response to any of the keys used to move the viewer through the scene. note: this exam...
...ned. if it isn't—and/or the enableforcepolyfill configuration constant is set to true—we install the webxr polyfill by instantiating the webxrpolyfill class. ...
...And 11 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 specificati...
...nal, 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 the content property, must be quoted: .item::after { content: "this is my content."; } while you can generally create any name you want, including using emojis, the identifier can't be none, unset, initial, or inherit, start with a digit or two dashes, and generally you don't want it to be any other pre-defined css keyword. see the <custom-iden...
...e property’s initial value. the inherit keyword represents the computed value of the property on the element’s parent, provided it is inherited. the unset keyword acts as either inherit or initial, depending on whether the property is inherited or not. a fourth value of revert was added in the cascade level 4 specification, but it does not currently have good browser support. urls a <url>
type uses functional notation, which accepts a <string> that is a url. this may be an absolute url or a relative url. for example, if you wanted to include a background image, you might use either of the following. .box { background-image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be eithe...
...And 11 more matches
Cross-browser audio basics - Developer guides
(currently, browsers that support mp3 also support...
...(currently, browsers that support mp3 also support mp4 audio). ...
...(currently, browsers that support mp3 also support mp4 audio). here we define an <audio> element with multiple sources — we do this as not all browsers support the same audio formats. to ensure reasonable coverage, we should specify at least two different formats. the two formats that will give maximum coverage are mp3 and ogg vorbis. ...
...And 11 more matches
HTML attribute: accept - HTML: Hypertext Markup Language
the accept attribute takes as its value a comma-separated list of one or more file
types, or unique file
type specifiers, describing which file
types to allow. the accept property is an attribute of the file <input>
type. it was supported on the <form> element, but was removed in favor of file in html5. because a given file
type may be identified in more than one manner, it's useful to provide a thorough set of
type specifiers when you need files of specific
type, or use the wild card to denote a
type of any format is acceptable. ...
...e in html5. because a given file
type may be identified in more than one manner, it's useful to provide a thorough set of
type specifiers when you need files of specific
type, or use the wild card to denote a
type of any format is acceptable. ...
...ptable. for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input
type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media
type: <input
type="file" id="soundfile" accept="audio/*"> <input
type="file" id="videofile" accept="video/*"> <input
type="file" id="imagefile" accept="image/*"> the accept attribute doesn't validate the
types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file
types. it is still possible (in most cases) for users to toggle an option in the ...
...And 11 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
server developers discussing cross-origin sharing from a server perspective (with php code snippets) is supplementary reading. what requests use cors? this cross-origin sharing standard can enable cross-site http requests for: invocations of the xmlhttprequest or fetch apis, as discussed above. web fonts (for cross-domain font usage in @font-face within css), so that servers can deploy true
type fonts that can only be cross-site loaded and used by web sites that are permitted to do so. webgl textures. images/video frames drawn to a canvas using drawimage(). css shapes from images. this article is a general discussion of cross-origin resource sharing and includes a discussion of the necessary http headers. functional overview the cross-origin resource sharing standard works by addi...
...ludes a discussion of the necessary http headers. functional overview the cross-origin resource sharing standard works by adding new http headers that let servers describe which origins are permitted to read that information from a web browser. additionally, for http request methods that can cause side-effects on server data (in particular, http methods other than get, or post with certain mime
types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with the http options request method, and then, upon "approval" from the server, sending the actual request. servers can also inform clients whether "credentials" (such as cookies and http authentication) should be sent with requests. cors failures result in errors, but for security ...
... no reada...
...And 11 more matches
JavaScript modules - JavaScript
see node's ecmascript modules documentation for more details.disabled from version 12.0.0: this feature is behind the...
...see node's ecmascript modules documentation for more details.disabled from version 12.0.0: this feature is behind the --experimental-modules runtime flag. ...
...see node's ecmascript modules documentation for more details.disabled from version 12.0.0: this feature is behind the...
...And 11 more matches
Object.defineProperty() - JavaScript
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. defaults to false. a data descriptor also has the following optional keys: value the value associated with the property. can be any valid jav...
...iptor has neither of value, writable, get and set keys, it is treated as a data descriptor. if a descriptor has both value or writable and get or set keys, an exception is thrown. bear in mind that these attributes are not necessarily the descriptor's own properties. inherited properties will be considered as well. in order to ensure these defaults are preserved, you might freeze the object.proto
type upfront, specify all options explicitly, or point to null with object.create(null). // using __proto__ var obj = {}; var descriptor = object.create(null); // no inherited properties descriptor.value = 'static'; // not enumerable, not configurable, not writable as defaults object.defineproperty(obj, 'key', descriptor); // being explicit object.defineproperty(obj, 'key', { enumerable: false, ...
...withvalue.d || ( withvalue.d = { enumerable: false, writable: false, configurable: false, value: value } ); // avoiding duplicate operation for assigning value if (d.value !== value) d.value = value; return d; } // ... and ... object.defineproperty(obj, 'key', withvalue('static')); // if freeze is available, prevents adding or // removing the object proto
type properties // (value, get, set, enumerable, writable, configurable) (object.freeze || object)(object.proto
type); examples if you want to see how to use the object.defineproperty method with a binary-flags-like syntax, see additional examples. creating a property when the property specified doesn't exist in the object, object.defineproperty() creates a new property as described. fields may be...
...And 11 more matches
instanceof - JavaScript
the instanceof operator tests to see if the proto
type property of a constructor appears anywhere in the proto
type chain of an object. the return value is a boolean 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. syntax object instanceof constructor parameters object the object to test. constructor function to test against description the instanceof operator tests the presence of constructor.proto
type in object's proto
type chain. ...
...m/mdn/interactive-examples and send us a pull request. syntax object instanceof constructor parameters object the object to test. constructor function to test against description the instanceof operator tests the presence of constructor.proto
type in object's proto
type chain. ...
...mples and send us a pull request. syntax object instanceof constructor parameters object the object to test. constructor function to test against description the instanceof operator tests the presence of constructor.proto
type in object's proto
type chain. ...
...And 11 more matches
OpenSearch description format
[square brackets] should be customized for the specific plugin you're writing. ...
...e writing. ...
...it must be 16 or fewer characters of plain text, with no html or other markup. ...
...And 11 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
iles (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. listing 1: calling xpcom functions using xpconnect <?xml version="1.0" encoding="utf-8"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script
type="application/javascript"><![cdata[ var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); alert(ioservice); ]]></script> </page> calling xpconnect using local files try saving the contents of listing 1 as the file test.xul, somewhere on your desktop, and drag and drop it into firefox to open it. you'll...
...rent window, you cannot get dialogs or windows that have no relation to that window. to overcome this limitation, nsiwindowmediator makes it possible to access all of firefox's windows. get active window one thing that nsiwindowmediator is often used for is to get the active window. listing 4 shows how to get the active browser window and the number of open tabs. passing the name of the window
type as the parameter of the nsiwindowmediator.getmostrecentwindow() method returns the most recently active window from among the root element's windows with that
type set for the window
type attribute value. setting the parameter to null returns the active window from among all windows, including dialogs, etc. listing 4: get active browser window netscape.security.privilegemanager .enableprivile...
...listing 5 shows how to get a summary of all browser windows in firefox and then close them. listing 5: closing all browser windows var browsers = windowmediator.getenumerator('navigator:browser'); var browser; while (browsers.hasmoreelements()) { browser = browsers.getnext().queryinte...
...And 10 more matches
Install script template - Archive of obsolete content
file) reserve a little extra so it is not required to update too often var component_size = 10; // (xpi file) reserve a little extra so it is not required to update too often var software_name="cult3d mozilla viewer"; // plids (http://mozilla.org/projects/plugins/plugin-identifier.html) are coined by vendors. ...
...condaryfolderxpt = secondaryfolder + component_file; // write plid keys (mozilla.org/projects/plugins/first-install-problem.html) // write plid keys to hklm var hklm_status = registerplid(hkey_local_machine, reg_moz_path, plid, qualifiedsecondaryfolderdll, qualifiedsecondaryfolderxpt, plugin_description, company_name, software_name, version, mime
type, suffix, suffix_description); logcomment("moz first install installation: registerplid("+hkey_local_machine+") returned, status "+hklm_status); if (hklm_status == false) { // write plid keys (mozilla.org/projects/plugins/first-install-problem.html) // write plid keys to hkcu var hkcu_status = registerplid(hkey_current_user, reg_moz_path, plid, qualifiedsecondaryfold...
...errorcode="+hkcu_status); return hkcu_status; } } return 0; } /** * function for preinstallation of plugin (firstinstall). * you should not stop the inst...
...And 10 more matches
tabs - Archive of obsolete content
hould contain tab elements. nb: you can add some other elements to tabs such as button, but they will receive an index. activating them will not change the selectedindex. more information is available in the xul tutorial. ...
...onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltiptextnew, value, properties accessible
type, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem, getindexofitem, getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2
type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends. this feature is used by the tabbrowser to provide the facilities for adding and closing tabs. ...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. ...
...And 10 more matches
NP_GetMIMEDescription - Archive of obsolete content
np_getmimedescription returns a supported mime
type list for your plugin. it works on unix (linux) and macos. on windows you have to define supported mime
types in the dll resource file. each mime
type description should be separated by a semicolon (;). each mime
type description contains the mime
type, an extensions list and a short description. ...
... np_getmimedescription returns a supported mime
type list for your plugin. it works on unix (linux) and macos. on windows you have to define supported mime
types in the dll resource file. each mime
type description should be separated by a semicolon (;). each mime
type description contains the mime
type, an extensions list and a short description. ...
...linux) and macos. on windows you have to define supported mime
types in the dll resource file. each mime
type description should be separated by a semicolon (;). each mime
type description contains the mime
type, an extensions list and a short description. ...
...And 10 more matches
The First Install Problem - Archive of obsolete content
opment_overview for current information. problem definition the first install problem is the name given to the conditions arising when a plugin or embeddable software installs itself on a system first, before any other gecko-based browser. if this happens, gecko-based browsers often won't be able to discover the plugin, and will prompt the user to download the plugin again if the affiliated mime
type is encountered on the web. unless gecko does a pre-emptive scan upon startup for desirable plugins that are not in the browser's plugins directory first, the best way to solve this problem is to encourage plugin vendors to leave dlls (and xpt files, if applicable) in a location that gecko can discover at runtime. this document presents a consistent way to do that. proposed solution on mac os x, ...
...ined plid for each module that the vendor wishes to install. example: a piece of software called myapplication might create hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.0.1/ where the plid is something the corporation that makes myapplication (mycompany inc.) determines. note that myapplication consists of one dll (which is an npapi plugin handling a given mime
type -- say application/x-myapp) and one xpt file, for scriptable interfaces. caveat emptor: if the key cannot be created under hkey_local_machine, create it as hkey_current_user\software\mozillaplugins\ under hkey_current_user. on windows xp and windows 2000, in order to write to the registry, sometimes the software may need administrator privileges. thus, some installers may need to write to the h...
...alue name of the actual product. example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] productname=myapplication player 5 "version" -- this is the versioning scheme of the above product. example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] version=5.01 mime
types -- this is a subkey and contains individual mime
types as further subkeys. hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01/mime
types/somemime
typesubkey/ the mime
types subkey contains further subkeys based on an application's actual mime
types. examples: [hkey_local_machine\software\mozillaplugins\@mycompany.com...
...And 10 more matches
Getting started with HTML - Learn web development
ton to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. ...
...t</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. ...
...graphs.) note: html5 redefined the element categories: see element content categories. while these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than block and inline. this article will stay with these two terms. note: the terms block and inline, as used in this article, should not be confused with the
types of css boxes that have the same names. while the names correlate by default, changing the css display
type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in. one reason html5 dropped these terms was to prevent this rather common confusion. note: find useful reference pages that include lists of block and inli...
...And 10 more matches
Basic math in JavaScript — numbers and operators - Learn web development
ry far without. this is especially true when we are learning to program javascript (or any other language for that matter) — so much of what we do relies on processing numerical data, calculating new values, and so on, that you won't be surprised to learn that javascript has a full-featured set of math functions available. this article discusses only the basic parts that you need to know now.
types of numbers in programming, even the humble decimal number system that we all know so well is more complicated than you might think. we use different terms to describe different
types of decimal numbers, for example: integers are whole numbers, e.g. 10, 400, or -5. floating point numbers (floats) have decimal points and decimal places, for example 12.5, and 56.7786543. doubles are a specifi...
...of numbers in programming, even the humble decimal number system that we all know so well is more complicated than you might think. we use different terms to describe different
types of decimal numbers, for example: integers are whole numbers, e.g. 10, 400, or -5. floating point numbers (floats) have decimal points and decimal places, for example 12.5, and 56.7786543. doubles are a specific
type of floating point number that have greater precision than standard floating point numbers (meaning that they are accurate to a greater number of decimal places). we even have different
types of number systems! decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like: binary — the lowest level language of computers; 0s and 1s. octal — base 8, uses 0–7 in ...
...ase 8, uses 0–7 in each column. hexadecimal — base 16, uses 0–9 and then a–f in each column. you may have encountered these numbers before when setting colors in css. ...
...And 10 more matches
Componentizing our React app - Learn web development
the same line: export default function todo() { return ( ); } this is ok so far, but our component has to return something! ...
...if at any point in the future you try to render a component that does not ret...
...assname="todo stack-small"> <div classname="c-cb"> <input id="todo-0"
type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button
type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button
type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat</span> </button> </div> </li> ); } note: components must always return something. if at any point in the future you try to render a component that does not return anything, react will display an error in your browser. our todo component is complete, at least for now; now we can use...
...And 10 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
editing the name of a task we don’t have a user interface for editing the name of a task yet. we'll get to that in a moment. to start with, we can at least implement an edittask() function in app.js. it’ll be similar to deletetask() because it'll take an id to find its target object, but it'll also take a newname property containing the name to update the task to. we'll use array.proto
type.map() instead of array.proto
type.filter() because we want to return a new array with some changes, instead of deleting something from the array. add the edittask() function inside your app component, in the same place as the other functions: function edittask(id, newname) { const editedtasklist = tasks.map(task => { // if this task has the same id as the edited task if (id === task.id) ...
...ing a todo. we're about to create this. ...
...he todo() function, beneath your usestate() hook but above the return statement: const editingtemplate = ( <form classname="stack-small"> <div classname="form-group"> <label classname="todo-label" htmlfor={props.id}> new name for {props.name} </label> <input id={props.id} classname="todo-text"
type="text" /> </div> <div classname="btn-group"> <button
type="button" classname="btn todo-cancel"> cancel <span classname="visually-hidden">renaming {props.name}</span> </button> <button
type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.name}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div...
...And 10 more matches
Displaying Places information using views
arks or history in your extension or application, you may want to use the built-in places views, which are generic and will save you a lot of time writing basic functionality so that you can focus on building your extension or application. places provides the following built-in views: tree menu toolbar instantiating the three built-in views are simply standard xul elements with a special
type attribute whose value is "places". every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that...
...". every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special
type attribute to one of the views. the overlay contains javascript required by the views. it also contains the built-in places context menu and commands, which you may want to take advantage of in your own uses of the views. connecting a view to its data to hook up a built-in view to its data, use the view's special place attribute. note: starting in gecko 2.0, you can't use the place attribute w...
...ient to call setattribute on the element; use the element's place property instead. see querying places and places query uris for information on query uris. the following example uses the built-in tree view to display bookmarks whose titles or urls contain "mozilla". remember that, because xul is xml, any ampersands in query uris must be written as entity reference & and not simply &. <tree
type="places" place="place:terms=mozilla&onlybookmarked=1&query
type=1"> <treecols> <treecol id="title" label="my bookmarks" flex="1" primary="true" /> </treecols> <treechildren /> </tree> the next example does the same as the last but uses javascript to set the tree's place attribute: var histserv = cc["@mozilla.org/browser/nav-history-service;1"]. getservice(ci.nsinavhistorys...
...And 10 more matches
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 seamonkey. a newer and slightly simplified mechanism that is used in "toolkit" applications such as firefox and xulrunner. thunderbird 2.x and seamonkey 1.1.x support the toolkit interfaces, although they do not use the same autocomplete widget. ...
... and is used in older applications such as thunderbird and seamonkey. a newer and slightly simplified mechanism that is used in "toolkit" applications such as firefox and xulrunner. thunderbird 2.x and seamonkey 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 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...
...rray.<string>|null=} comments */ function providerautocompleteresult(searchstring, searchresult, defaultindex, errordescription, results, comments) { this._searchstring = searchstring; this._searchresult = searchresult; this._defaultindex = defaultindex; this._errordescription = errordescription; this._results = results; this._comments = comments; } providerautocompleteresult.proto
type = { _searchstring: "", _searchresult: 0, _defaultindex: 0, _errordescription: "", _results: [], _comments: [], /** * @return {string} the original search string */ get searchstring() { return this._searchstring; }, /** * @return {number} the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure...
...And 10 more matches
SpiderMonkey Internals
in addition to the interpreter, spidermonkey 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. ...
... 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 spidermonkey 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). all state associated with an interpreter instance is passed thro...
...ions 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). all state associated with an interpreter instance is passed through formal parameters to the interpreter entry point; most implicit state is collected in a
type named jscontext. therefore, almost all functions in spidermonkey, api or not, take a jscontext pointer as their first argument. compiler the compiler consumes javascript source code and produces a script which contains bytecode, source annotations, and a pool of string, number, and identifier literals. the script also contains objects, including any functions defined in the source code, each of...
...And 10 more matches
Using the Places annotation service
nt retrieving names will be. you should not design your service so that you require hundreds of unique annotation names. setting an annotation the annotation provides a variety of scriptable and non-scriptable setters for annotations on both pages and on items in the places database (see nsiannotationservice.idl for the exact declarations). ...
... is the annotation value", 0, 0); retrieving annotations there are corresponding getters for the setters above (see nsiannotationservice.idl for the exact declarations): from c++: getpageannotationstring(auri, aname); getpageannotationint32(auri, aname); getpageannotationint64(auri, aname); getpageannotationdouble(auri, aname); getpageannotationbinary(auri, aname, adata, adatalen, amime
type); getitemannotationstring(aitemid, aname); getitemannotationint32(aitemid, aname); getitemannotationint64(aitemid, aname); getitemannotationdouble(aitemid, aname); getitemannotationbinary(aitemid, aname, adata, adatalen, amime
type); from javascript: getpageannotation(auri, aname); getitemannotation(aitemid, aname); these functions will return/throw ns_error_not_available if the an...
... and catch the exception; the extra check requires an additional database lookup (which has higher overhead). but then again you won't know if the exception meant that the annotation did not exist or something else is broken. ...
...And 10 more matches
Component Internals
components from the perspective of the software developer. read on to see how components are generally implemented in xpcom, or you can skip to the next chapter, where the weblock component tutorial takes you step by step through the component creation process. xxx mediawiki...xxx sucks creating components in c++ let's start by examining how xpcom components are written in c++. the most common
type of component is one that is written in c++ and compiled into a shared library (a dll on a windows system or a dso on unix). the illustration below shows the basic relationship between the shared library containing the component implementation code you write and the xpcom framework itself. in this diagram, the outer boundary is that of the module, the shared library in which a component is define...
...om searches when it looks for xpcom components. this is how the api is used, for example, in the gecko runtime environment (gre). xpcom startup the six basic steps to xpcom startup are as follows: application starts xpcom. xpcom sends a notification that it's beginning startup. xpcom finds and processes the component manifest (see component manifests below). xpcom finds and processes the
type library manifest (see
type library manifests below). if there are new components, xpcom registers them: xpcom calls autoregistration start. xpcom registers new components. xpcom calls autoregistration end. complete xpcom startup: xpcom notifies that it's begun. component manifests and
type library manifests are described in the following section, xpcom registry manifests. x...
... registers new components. xpcom calls autoregistration end. complete xpcom startup: xpcom notifies that it's begun. component manifests and
type library manifests are described in the following section, xpcom registry manifests. xpcom registry manifests xpcom uses special files called manifests to track and persist information about the components to the local system. there are two
types of manifests that xpcom uses to track components: component manifests when xpcom first starts up, it looks for the component manifest, which is a file that lists all registered components, and stores details on exactly what each component can do. xpcom uses the component manifest to determine which components have been overridden. starting with mozilla 1.2, this file is named compreg.dat and e...
...And 10 more matches
Detailed XPCOM hashtable guide
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 data
type 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 the constant time can be larger than an array lookup sorting: sorted: stor...
...d may not hold onto entry pointers. plhashtable - low-level c api; entry class pointers are constant; more efficient for large entry structures; often wastes memory making many small heap allocations. nsthashtable - low-level c++ wrapper around pldhash; generates callback functions and handles most casting automagically. ...
...emory making many small heap allocations. nsthashtable - low-level c++ wrapper around pldhash; generates callback functions and handles most casting automagically. client writes their own entry class which can include complex key and data
types. ...
...And 10 more matches
nsIWindowsRegKey
stry. this interface is highly win32 specific. ...
...read only. key hkey this attribute exposes the native hkey and is available to provide c++ consumers with the flexibility of making other windows registry api calls that are not exposed via this interface. it is possible to initialize this object by setting an hkey on it...
...0 root_key_current_user 0x80000001 root_key_local_machine 0x80000002 access constants values for the mode parameter passed to the open() and create() methods. the values defined here correspond to the regsam values defined in winnt.h in the ms platform sdk, where access_ is replaced with key_. this interface is not restricted to using only these access
types. constant value description access_basic 0x00020000 access_query_value 0x00000001 access_set_value 0x00000002 access_create_sub_key 0x00000004 access_enumerate_sub_keys 0x00000008 access_notify 0x00000010 access_read access_basic | access_query_value | access_enumerate...
...And 10 more matches
Xray vision
. most of the time this is not a problem: the main concern xrays solve is with untrusted web content manipulating objects, and web content is usually working with dom objects. ...
...ct, it will usually be created as a property of a dom object, and then it will be filtered out by the dom xray: // content code // redefine date.getfullyear() date.proto
type.getfullyear = function() {return 1000}; var date = new date(); // chrome code // contentwindow is an xray, and date is an expando on contentwindow // so date is filtered out gbrowser.contentwindow.date.getfullyear() // ->
typeerror: gbrowser.contentwindow.date is undefined the chrome code will only even see date if it waives xrays, and then, because waiving is transitive, it should expect to be vulnerable to redefinition: // chrome code components.utils.waivexrays(gbrowser.contentwindow).date.getfullyear(); // -> 1000 however, there are some situations in which privileged code will access javascript objects that ar...
...that are not themselves dom objects and are not properties of dom objects. for example: the detail property of a customevent fired by content could be a javascript object or date as well as a string or a primitive the return value of evalinsandbox() and any properties attached to the sandbox object may be pure javascript objects also, the webidl specifications are starting to use javascript
types such as date and promise: since webidl definition is the basis of dom xrays, not having xrays for these javascript
types starts to seem arbitrary. so, in gecko 31 and 32 we've added xray support for most javascript built-in objects. like dom objects, most javascript built-in objects have an underlying c++ state that is separate from their javascript representation, so the xray implementation c...
...And 10 more matches
Using C struct and pointers
in this example, we show how to use c structs and pointers with js-c
types. ...
... in this example, we show how to use c structs and pointers with js-c
types. ...
... in this example, we show how to use c structs and pointers with js-c
types. ...
...And 10 more matches
Using the Frame Timing API - Web APIs
rk a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc. a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common target for a good responsive user experience. this means the browser should process a frame in about 16.7ms. an application can register a performanceobserver for "frame" performance entry
types and the observer will have data about the duration of each frame event. this data can be used to help identify areas that take too long to provide a good user experience. this document describes how to use the performanceframetiming interfaces including example code. for an overview of these interfaces see frame timing api. frame observers the performance observer interfaces allow an applica...
... frame event. this data can be used to help identify areas that take too long to provide a good user experience. this document describes how to use the performanceframetiming interfaces including example code. for an overview of these interfaces see frame timing api. frame observers the performance observer interfaces allow an application to register an observer for specific performance event
types. when one of those event
types is added to the browser's performance timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created. creating an observer to observe "frame" performance entry
types, the application first creates a performanceobserver object with a specific frame observer callback. in the following example...
...rowser's performance timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created. creating an observer to observe "frame" performance entry
types, the application first creates a performanceobserver object with a specific frame observer callback. in the following example, two observers for the "frame" performance entry
type are created and the first observer constructor uses inline function syntax. ...
...And 10 more matches
SVGTransform - Web APIs
erview also implement none methods void setmatrix(in svgmatrix matrix) void settranslate(in float tx, in float ty) void setscale(in float sx, in float sy) void setrotate(in float angle, in float cx, in float cy) void setskewx(in float angle) void setskewy(in float angle) properties readonly unsigned short
type readonly float angle readonly svgmatrix matrix constants svg_transform_unknown = 0 svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale = 3 svg_transform_rotate = 4 svg_transform_skewx = 5 svg_transform_skewy = 6 normative document svg 1.1 (2nd edition) constants name ...
... svg_transform_matrix 1 a matrix(…) transformation svg_transform_translate 2 a translate(…) transformation svg_transform_scale 3 a scale(…) transformation svg_transform_rotate 4 a r...
...nsform_unknown = 0 svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale = 3 svg_transform_rotate = 4 svg_transform_skewx = 5 svg_transform_skewy = 6 normative document svg 1.1 (2nd edition) constants name value description svg_transform_unknown 0 the unit
type is not one of predefined unit
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_transform_matrix 1 a matrix(…) transformation svg_transform_translate 2 a translate(…) transformation svg_transform_scale 3 a scale(…) transformation svg_transform_rotate 4 a rotate(…) transformation ...
...And 10 more matches
WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image. ...
... the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image. ...
... the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image. ...
...And 10 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
amplitude this is great, but wouldn't it be nice if we had an amplitude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and release. ...
... get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and release. ...
...easecontrol = document.queryselector('#release'); releasecontrol.addeventlistener('input', function() { releasetime = number(this.value); }, false); the final playsweep() function now we can expand our playsweep() function. we need to add a gainnode and connect that through our audio graph to actually apply amplitude variations to our sound. the gain node has one property: gain, which is of
type audioparam. this is really useful — now we can start to harness the power of the audio param methods on the gain value. we can set a value at a certain time, or we can change it over time with methods such as audioparam.linearramptovalueattime. for our attack and release, we'll use the linearramptovalueattime method as mentioned above. it takes two parameters — the value you want to set the...
...And 10 more matches
font - CSS: Cascading Style Sheets
<'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | messa...
... and the font family to serif. */ p { font: bold italic large serif } /* use the same font as the status bar of the window */ p { font: status-bar } live sample html <p> change the radio buttons below to see the generated shorthand and it's effect. ...
...mple html <p> change the radio buttons below to see the generated shorthand and it's effect. ...
...And 10 more matches
Constraint validation - Developer guides
the creation of web forms has always been a complex task. while marking up the form itself is easy, checking whether each field has a valid and coherent value is more difficult, and informing the user about the problem may become a headache. html5 introduced new mechanisms for forms: it added new semantic
types for the <input> element and constraint validation to ease the work of checking the form content on the client side. basic, usual constraints can be checked, without the need for javascript, by setting new attributes; more complex constraints can be tested using the constraint validation api. for a basic introduction to these concepts, with examples, see the form validation tutorial. note: html5 constraint validation doesn't remove the need for validation on the server side. ev...
...thout html5 and without javascript) or by bad people trying to trick your web application. therefore, like with html4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side. ...
...rick your web application. therefore, like with html4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side. ...
...And 10 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
every keyword within a space seperated value should be unique within that value. ...
...>, 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. ...
...l="icon">s, the browser uses their media attribute,
type, and sizes attributes to select the most appropriate icon. if several icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link
type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link
type is often seen before icon, but this link
type is non-conforming, ignored and web authors must not use it anymore. alternate indicates an alternate represe...
...And 10 more matches
HTML attribute: step - HTML: Hypertext Markup Language
the value can must be a positive number - integer or float -- or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max). ...
...the value can must be a positive number - integer or float -- or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max). ...
...the value can must be a positive number - integer or float -- or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max). ...
...And 10 more matches
<script>: The Script element - HTML: Hypertext Markup Language
fied on the <script> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. if a higher-level policy is not available, the empty string is treated as being equivalent to no-referrer-when-downgrade. src this attribute specifies the uri of an external script; this can be used as an alternative to embedding a script directly within a document.
type this attribute indicates the
type of script represented. the value of this attribute will be in one of the following categories: omitted or a javascript mime
type: this indicates the script is javascript. the html5 specification urges authors to omit the attribute rather than provide a redundant mime
type. in earlier browsers, this identified the scripting language of the embedded or impo...
... module: causes the code to be treated as a javascript module. the processing of the script contents is not affected by the charset and defer attributes. for information on using module, see our javascript modules guide. ...
...e processing of the script contents is not affected by the charset and defer attributes. for information on using module, see our javascript modules guide. unlike classic scripts, module scripts require the use of the cors protocol for cross-origin fetching. any other value: the embedded content is treated as a data block which won't be processed by the browser. ...
...And 10 more matches
itemscope - HTML: Hypertext Markup Language
itemscope is a boolean global attribute that defines the scope of associated metadata. specifying the itemscope attribute for an element creates a new item, which results in a number of name-value pairs that are associated with the element. a related attribute, item
type, is used to specify the valid url of a vocabulary (such as schema.org) that describes the item and its properties context. in each of the following examples, the vocabulary is from schema.org. every html element may have an itemscope attribute specified. an itemscope element that does not have an associated item
type must have an associated itemref. note: find more about item
type attributes at http://schema.org/thing simple example html the following example specifies the itemscope attribute. the example specifies the it...
...the following examples, the vocabulary is from schema.org. every html element may have an itemscope attribute specified. an itemscope element that does not have an associated item
type must have an associated itemref. note: find more about item
type attributes at http://schema.org/thing simple example html the following example specifies the itemscope attribute. the example specifies the item
type as "http://schema.org/movie", and specifies three related itemprop attributes. ...
...ribute specified. an itemscope element that does not have an associated item
type must have an associated itemref. note: find more about item
type attributes at http://schema.org/thing simple example html the following example specifies the itemscope attribute. the example specifies the item
type as "http://schema.org/movie", and specifies three related itemprop attributes. <div itemscope item
type="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data from the preceding example. itemscope ...
...And 10 more matches
Meta programming - JavaScript
systems.) target object which the proxy virtualizes. it is often used as storage backend for the proxy. invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target. invariants semantics that remain unchanged when implementing custom operations are called invariants. ...
...t remain unchanged when implementing custom operations are called invariants. if you violate the invariants of a handler, a
typeerror will be thrown. handlers and traps the following table summarizes the available traps available to proxy objects. see the reference pages for detailed explanations and examples. handler / trap interceptions invariants handler.getproto
typeof() object.getproto
typeof() reflect.getproto
typeof() __proto__ object.proto
type.isproto
typeof() instanceof getproto
typeof method must return an object or null. ...
...ts. see the reference pages for detailed explanations and examples. handler / trap interceptions invariants handler.getproto
typeof() object.getproto
typeof() reflect.getproto
typeof() __proto__ object.proto
type.isproto
typeof() instanceof getproto
typeof method must return an object or null. if target is not extensible, object.getproto
typeof(proxy) method must return the same value as object.getproto
typeof(target). handler.setproto
typeof() object.setproto
typeof() reflect.setproto
typeof() if target is not extensible, the proto
type parameter must be the same value as object.getproto
typeof(target). handler.isextensible() object.isextensible() reflect.isextensible() object.isextensible(pro...
...And 10 more matches
Error - JavaScript
for client-side exceptions, see exception handling statements. evalerror creates an instance representing an error that occurs regarding the global function eval(). ...
...for client-side exceptions, see exception handling statements. evalerror creates an instance representing an error that occurs regarding the global function eval(). ...
...s when an internal error in the javascript engine is thrown. e.g. "too much recursion". rangeerror creates an instance representing an error that occurs when a numeric variable or parameter is outside of its valid range. referenceerror creates an instance representing an error that occurs when de-referencing an invalid reference. syntaxerror creates an instance representing a syntax error.
typeerror creates an instance representing an error that occurs when a variable or parameter is not of a valid
type. urierror creates an instance representing an error that occurs when encodeuri() or decodeuri() are passed invalid parameters. constructor error() creates a new error object. static methods error.capturestacktrace() a non-standard v8 function that creates the stack propert...
...And 10 more matches
Object.freeze() - JavaScript
.freeze() method freezes an object. a frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. in addition, freezing an object also prevents its proto
type from being changed. freeze() returns the same object that was passed in. 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.freeze(obj) parameters obj the object to freeze. return value the object th...
...eractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.freeze(obj) parameters obj the object to freeze. return value the object that was passed to the function. description nothing can be added to or removed from the properties set of a frozen object. any attempt to do so will fail, either silently or by throwing a
typeerror exception (most commonly, but not exclusively, when in strict mode). for data properties of a frozen object, values cannot be changed, the writable and configurable attributes are set to false. accessor properties (getters and setters) work the same (and still give the illusion that you are changing the value). note that values that are objects can still be modified, unless they are also fr...
...jects can still be modified, unless they are also frozen. as an object, an array can be frozen; after doing so, its elements cannot be altered and no elements can be added to or removed from the array. freeze() returns the same object that was passed into the function. it does not create a frozen copy. ...
...And 10 more matches
Proxy - JavaScript
properly forwarded!) note that while this "no-op" works for javascript objects, it does not work for native browser objects like dom elements. validation with a proxy, you can easily validate the passed value for an object. this example uses the set handler. ...
...or); person.age = 100; console.log(person.age); // 100 person.age = 'young'; // throws an exception person.age = 300; // throws an exception extending constructor a function proxy could easily extend a constructor with a new constructor. this example uses the construct and apply handlers. ...
...erson.age); // 100 person.age = 'young'; // throws an exception person.age = 300; // throws an exception extending constructor a function proxy could easily extend a constructor with a new constructor. this example uses the construct and apply handlers. ...
...And 10 more matches
Using the WebAssembly JavaScript API - WebAssembly
he “wasm://” entry. starting soon in firefox, in addition to viewing webassembly as text, developers will be able to debug (place breakpoints, inspect the callstack, single-step, etc.) webassembly using the text format. see webassembly debugging with firefox devtools for a video preview. memory in the low-level memory model of webassembly, memory is represented as a contiguous range of un
typed bytes called linear memory that are read and written by load and store instructions inside the module. in this memory model, any load or store can access any byte in the entire linear memory, which is necessary to faithfully represent c/c++ concepts like pointers. unlike a native c/c++ program, however, where the available memory range spans the entire process, the memory accessible by a parti...
...word of linear memory, you can do this: new uint32array(memory.buffer)[0] = 42; you can then return the same value using: new uint32array(memory.buffer)[0] try this now in your demo — save what you’ve added so far, load it in your browser, then try entering the above two lines in your javascript console. growing memory a memory instance can be grown by calls to memory.proto
type.grow(), where again the argument is specified in units of webassembly pages: memory.grow(1); if a maximum value was supplied upon creation of the memory instance, attempts to grow past this maximum will throw a webassembly.rangeerror exception. the engine takes advantage of this supplied upper-bounds to reserve memory ahead of time, which can make resizing more efficient. note: since an arrayb...
...mbly pages: memory.grow(1); if a maximum value was supplied upon creation of the memory instance, attempts to grow past this maximum will throw a webassembly.rangeerror exception. the engine takes advantage of this supplied upper-bounds to reserve memory ahead of time, which can make resizing more efficient. note: since an arraybuffer’s bytelength is immutable, after a successful memory.proto
type.grow() operation the buffer getter will return a new arraybuffer object (with the new bytelength) and any previous arraybuffer objects become “detached”, or disconnected from the underlying memory they previously pointed to. just like functions, linear memories can be defined inside a module or imported. similarly, a module may also optionally export its memory. this means that javascript ca...
...And 10 more matches
Using Dehydra - Archive of obsolete content
as gcc compiles file, dehydra calls functions in the user analysis script with information about the code being compiled. for more information, see the function reference and the object reference. ...
... as gcc compiles file, dehydra calls functions in the user analysis script with information about the code being compiled. for more information, see the function reference and the object reference. ...
... as gcc compiles file, dehydra calls functions in the user analysis script with information about the code being compiled. for more information, see the function reference and the object reference. ...
...And 9 more matches
Introduction to XUL - Archive of obsolete content
pelling helped any, and short for "xml user interface language") is our name for the language in which these ui descriptions are built. window chrome is displayed and managed by the same layout engine that manages html content in the browser. ui descriptions, then, look a great deal like html 4. xul is an application of xml. in fact, it is just xml with specific meaning defined for a few element
types, and into which html can be scattered. terms "xpfe" is the term mozilla-the-organization is using to describe mozilla-the-browser's cross platform front end, because x and c look similar if you beat them long and hard with a hammer. the intention is to build cross-platform applications like browsers and mail clients from a set of tools designed for that purpose. the intention is not to impleme...
...tain infrastructure associated with the behaviour of the window, explained below. most of the details of writing a xul document are identical to those for writing an xml document, a description of which we will leave to other excellent xml documentation which we assume must exist but have never seen. this document will concentrate on xul-specific features. a word on case and namespaces, and file
types xml is of course case sensitive. xul is equally so. our current code tends not to be strict about enforcing this, especially for tags and attributes in the html namespace. this will change: tags and attributes will, as a rule, always be lower case as suggested in the xhtml working draft. mozilla gives a special meaning to xul files; it expects to find ui descriptions within. for this reason, w...
...case sensitive. xul is equally so. our current code tends not to be strict about enforcing this, especially for tags and attributes in the html namespace. this will change: tags and attributes will, as a rule, always be lower case as suggested in the xhtml working draft. mozilla gives a special meaning to xul files; it expects to find ui descriptions within. for this reason, we've defined a mime
type "text/xul" mapped to files with the extension ".xul". (for standards purposes, we will probably need to change the the mime
type to something like "text/x-xul".) these files are processed using the same parser as "text/xml" files (and therefore subject to xml syntax rules, as they should be). it's possible to load a xul document from an xml file (one named *.xml). the resulting ui will be created...
...And 9 more matches
Introduction - Archive of obsolete content
query. for each result returned from the query, generate some content. the template syntax allows for different rules to generate different content based on particular criteria as well as set attribute values from returned results. some other systems call this databinding. effectively, xul templates are the xul way of doing databinding. each template retrieves its data from a datasource. several
types of datasources are supported by default, rdf, xml and sqlite databases, however, processors may be written to support other
types of datasources. in xul, the datasource is specified by placing the datasources attribute on an element. typically, the value will be a uri that identifies the location of the data. for example, for an xml datasource, the url of an xml file is specified. when the xul p...
... the url of an xml file is specified. when the xul parser sees an element with this attribute, it constructs a template builder for the element and attaches it to the element. it is expected that there will be a template inside the element. the template builder loads the datasource, performs a query on the datasource and generates content based on the results in combination with the template. ...
... xul parser sees an element with this attribute, it constructs a template builder for the element and attaches it to the element. it is expected that there will be a template inside the element. the template builder loads the datasource, performs a query on the datasource and generates content based on the results in combination with the template. the
type of datasource is specified with the query
type attribute. ...
...And 9 more matches
datepicker - Archive of obsolete content
normal - a datepicker with three fields for entering the year, month and date. grid - a datepicker with a calendar grid for selecting a date. popup - a normal datepicker with three fields, but with an additional dropdown button to display a popup grid. there are several ways to set the selected day. in xul, the value attribute may be set to a value of the form yyyy-mm-dd to initialize the datepicker to a certain date. ...
...stead 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, readonly,
type, tabindex, value properties date, dateleadingzero, datevalue, disabled, month, monthleadingzero, open, readonly, tabindex, value, year, yearleadingzero examples <datepicker
type="grid" value="2007-03-26"/> 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 w...
...or 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. firstdayofweek
type: integer which day of the week to display as the first day in the grid. the values range from 0 to 6, where 0 is sunday and 6 is saturday. the default 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. ...
...And 9 more matches
preference - Archive of obsolete content
lement. each preference element corresponds to a preference which is stored in the user's preferences file. you can connect a user interface element such as a checkbox to a preference element using the user interface element's preference attribute. more information is available in the preferences system article. ...
...an connect a user interface element such as a checkbox to a preference element using the user interface element's preference attribute. more information is available in the preferences system article. attributes disabled, instantapply, inverted, name, onchange, readonly, tabindex,
type properties defaultvalue, disabled, hasuservalue, inverted, locked, name, preferences, readonly, tabindex,
type, value, valuefrompreferences methods reset examples <preferences> <preference id="pref_id" name="preference.name"
type="int"/> </preferences> see preferences system for a complete example. 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...
... 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. ...
...And 9 more matches
radiogroup - Archive of obsolete content
de the group can be selected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. ...
...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 not be submitted. ...
... 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. focused
type: boolean this attribute 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 u...
...And 9 more matches
NPEvent - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary represents an event passed by npp_handleevent() to a windowless plug-in. ...
... « gecko plugin api reference « plug-in side plug-in api summary represents an event passed by npp_handleevent() to a windowless plug-in. ...
... « gecko plugin api reference « plug-in side plug-in api summary represents an event passed by npp_handleevent() to a windowless plug-in. ...
...And 9 more matches
JSException - Archive of obsolete content
code returns an error. constructor summary the netscape.javascript.jsexception class has the following constructors: jsexception deprecated constructors optionally let you specify a detail message and other information. method summary the netscape.javascript.jsexception class has the following methods: getwrappedexception instance method getwrappedexception. getwrappedexception
type instance method getwrappedexception
type returns the int mapping of the
type of the wrappedexception object. backward compatibility javascript 1.1 through 1.3 jsexception had three public constructors which optionally took a string argument, specifying the detail message or other information for the exception. the getwrappedexception method was not available. jsexception constructors, depre...
... source the string containing the javascript code being evaluated. tokenindex the index into the source string where the error occurred. getwrappedexception instance method getwrappedexception. declaration public object getwrappedexception() description getwrappedexception() returns an object that represents the value that the javascript actually threw. ...
...e index into the source string where the error occurred. getwrappedexception instance method getwrappedexception. declaration public object getwrappedexception() description getwrappedexception() returns an object that represents the value that the javascript actually threw. javascript can throw any
type of value. use getwrappedexception() to determine what kind of value the object return
type represents. getwrappedexception
type instance method getwrappedexception
type. ...
...And 9 more matches
caret - MDN Web Docs Glossary: Definitions of Web-related terms
y the user. learn more general knowledge caret navigation on wikipedia css related to the caret you can set the color of the caret for a given element's editable content by setting the element's css caret-color property to the appropriate <color> value. ...
...re general knowledge caret navigation on wikipedia css related to the caret you can set the color of the caret for a given element's editable content by setting the element's css caret-color property to the appropriate <color> value. html elements that may present a caret these elements provide text entry fields or boxes and therefore make use of the caret. ...
...caret navigation on wikipedia css related to the caret you can set the color of the caret for a given element's editable content by setting the element's css caret-color property to the appropriate <color> value. html elements that may present a caret these elements provide text entry fields or boxes and therefore make use of the caret. ...
...And 9 more matches
Styling web forms - Learn web development
e to ensure we don't break usability. not all widgets are created equal when css is involved at present, some difficulties remain when using css with forms. these problems can be divided into three categories: the good some elements can be styled with few if any problems across platforms. these include the following elements: <form> <fieldset> and <legend> single-line text <input>s (e.g.
type text, url, email...), except for <input
type="search">. multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input
type="search"> we describe how to handle these more specific features in the article advanced form styling. ...
...ns (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input
type="search"> we describe how to handle these more specific features in the article advanced form styling. the ugly some elements can't be styled thoroughly using css. these include: <input
type="color"> date-related controls such as <input
type="datetime-local"> <input
type="range"> <input
type="file"> elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>. <progress> and <meter> again, we'll describe what can be done in terms of styling these elements in advanced form styling. the real problem with all these controls is that they...
...of your content, you can add the following rules to your stylesheet: button, input, select, textarea { font-family: inherit; font-size: 100%; } the inherit property value causes the property value to match the computed value of the property of its parent element; inheriting the value of the parent. the screenshots below show the difference. on the left is the default rendering of an <input
type="text">, <input
type="date">, <select>, <textarea>, <input
type="submit">, and a <button> in chrome on macos, with the platform's default font style in use. on the right are the same elements, with our above style rule applied. the defaults differed in a number of ways. inheriting should change their fonts to that of the parent's font family — in this case the default serif font of the paren...
...And 9 more matches
Starting our Svelte Todo list app - Learn web development
arkup representation of our app, so you can see what it will look like. ...
...he following into our todos.svelte component file, replacing the existing content: <!-- todos.svelte --> <div class="todoapp stack-large"> <!-- newtodo --> <form> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg"> what needs to be done? ...
... todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <div class="stack-small"> <form class="stack-small"> <div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' </label> <input
type="text" id="todo-1" autocomplete="off" class="todo-text" /> </div> <div class="btn-group"> <button class="btn todo-cancel"
type="button"> cancel <span class="visually-hidden">renaming create a svelte starter app</span> </button> <button class="btn btn__primary todo-edit"
type="submit"> save ...
...And 9 more matches
Multiprocess on Windows
ts your interfaces this information is current, but is likely to change when bug 1346957 is landed. interceptors cannot replicate interfaces without access to the metadata that describes those interfaces. since we are using com, we already generate metadata by declaring interfaces using midl. this does not (yet) work as transparently as we would like. ...
...plicate interfaces without access to the metadata that describes those interfaces. since we are using com, we already generate metadata by declaring interfaces using midl. this does not (yet) work as transparently as we would like. com metadata midl outputs two different
types of metadata: "fast format strings" (also known as oicf) and (optionally, if a library statement is included in the idl)
type libraries (also known as
typelib). oicf metadata is much richer than
typelib metadata, however com requires
typelibs whenever it is being used with interpreted languages. in particular,
typelibs were originally designed to work with 1990s-era visual basic.
typelib metadata is limited to supporting the same language features which were supported by vb at that time. given those two options, it may...
...bs whenever it is being used with interpreted languages. in particular,
typelibs were originally designed to work with 1990s-era visual basic.
typelib metadata is limited to supporting the same language features which were supported by vb at that time. given those two options, it may seem that oicf is the preferred format. however, for various reasons, our com interceptor currently only supports
typelib metadata. in order for the interceptor to be able to work with our interfaces, we must do some additional work to compensate for
typelib's weaknesses. the required steps are as follows: ensure that you generate
typelibs for all of your com interfaces; ensure that those interfaces are registered; register any outparams that consist of arrays of interfaces. we will now further detail each...
...And 9 more matches
NSS tools : ssltab
ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x000006) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e5 |.....
type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f
type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho. session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 ...
...7 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho. session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 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£È. ...
...1 07 a8 2a 31 91 29 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 |.... ...
...And 9 more matches
NSS tools : ssltap
ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 (0x000006) ssl3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x37c9 0xb5c9 0x7b70 0x8fe9 0xd1d3 0x2592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e5 |.....
type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f
type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho. session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 ...
...7 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho. session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 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£È. ...
...1 07 a8 2a 31 91 29 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 |.... ...
...And 9 more matches
GC Rooting Guide
spidermonkey's gc as a spidermonkey api user. since spidermonkey has a moving gc, it is very important that it knows about each and every pointer to a gc thing in the system. spidermonkey's rooting api tries to make this task as simple as possible. what is a gc thing pointer? "gc thing" is the term used to refer to memory allocated and managed by the spidermonkey garbage collector. 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. if you use these
types directly, or create classes, structs or arrays that contain them, you must follow the rules set out in this guide. if you do not your program will no...
... classes, structs or arrays that contain them, you must follow the rules set out in this guide. if you do not your program will not work correctly - if it works at all. gc things on the stack js::rooted<t> all gc thing pointers stored on the stack (i.e., local variables and parameters to functions) must use the js::rooted<t> class. this is a template class where the template parameter is the
type of the gc thing it contains. from the user perspective, a js::rooted<t> instance behaves exactly as if it were the underlying pointer. js::rooted must be constructed with a jscontext*, and optionally an initial value. there are
typedefs available for the main
types. within spidermonkey, it is suggested that these are used in preference to the template class (gecko uses the template versions): ...
.... from the user perspective, a js::rooted<t> instance behaves exactly as if it were the underlying pointer. js::rooted must be constructed with a jscontext*, and optionally an initial value. there are
typedefs available for the main
types. ...
...And 9 more matches
JSAPI User Guide
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 spidermonkey engine itself. spidermonkey provides a few core javascript data
types—numbers, strings, arrays, objects, and so on—and a few methods, such as array.push. it also makes it easy for each application to expose some of its own objects and functions to javascript code. browsers expose dom objects. your application will expose objects that are relevant for the kind of scripts you want to write. it is up to the application developer to decide what objects and methods...
... jsruntime. they cannot travel to other runtimes or be shared across runtimes. you will need at least one jsruntime per thread that uses the jsapi. contexts. a jscontext, or context, is like a little machine that can do many things involving javascript code and objects. it can compile and execute scripts, get and set object properties, call javascript functions, convert javascript data from one
type to another, create objects, and so on. almost all jsapi functions require a jscontext * as the first argument, just like most <stdio.h> functions require a file *. global objects. lastly, the global object contains all the classes, functions, and variables that are available for javascript code to use. whenever javascript code does something like window.open("http://www.mozilla.org/"), it is acc...
...(cx); js_destroyruntime(rt); js_shutdown(); return status; } each jsnative has the same signature, regardless of what arguments it expects to receive from javascript. the javascript arguments to the function are given in argc and vp. argc tells how many actual arguments the caller passed, and js_argv(cx, vp) returns an array of those arguments. the arguments do not have native c++
types like int and float; rather, they are jsvals, javascript values. the native function uses js_convertarguments to convert the arguments to c++
types and store them in local variables. the native function uses js_set_rval(cx, vp, val) to store its javascript return value. on success, a jsnative must call js_set_rval and return true. the value passed to js_set_rval is returned to the javascript cal...
...And 9 more matches
JS_InitClass
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. obj js::handleobject pointer to the "globals" object to use for initializing the class. this must not be null. ...
...als" object to use for initializing the class. this must not be null. once js_initclass creates the new class's constructor, it stores the constructor as a property in this object. so, for example, if this object is js_getglobalobject(cx), then javascript code will be able to see the new class as a global name. parent_proto js::handleobject pointer to an object to be used as a proto
type. js_initclass always creates a new proto
type object that serves as the __proto__ for class instances; parent_proto becomes the __proto__ of that proto
type object. clasp jsclass * pointer to the class structure to initialize. this structure defines the class for use by other api functions. constructor jsnative the constructor for the class. its scope matches that...
...And 9 more matches
SpiderMonkey 1.8.5
objects in a separate compartment, isolated from the other threads. the old build system (using makefile.ref) is no longer supported. spidermonkey 1.8.5 includes a new configure-based build system, introduced shortly after active development on the engine moved from cvs to mercurial. spidermonkey 1.8.5 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi
types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. previous versions of spidermonkey su...
..., and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. ...
...e same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. previous versions of spidermonkey supported two
types of native functions: jsnative and jsfastnative. all support for the slow native function
type has been removed, and the fast signature has been renamed to jsnative. embeddings that defined jsnatives in previous versions must update all those functions to the new signature. getters and setters of
type jspropertyop took an id parameter of
type jsval. the
type of the parameter has been changed to jsid. many getters and setters simply ignore the id anyway; if the value is needed, use js_idto...
...And 9 more matches
An Overview of XPCOM
jects once they are not being used, respectively. the nsisupports interface is shown below: the nsisupports interface class sample: public nsisupports { private: nsrefcnt mrefcnt; public: sample(); virtual ~sample(); ns_imethod queryinterface(const nsiid &aiid, void **aresult); ns_imethod_(nsrefcnt) addref(void); ns_imethod_(nsrefcnt) release(void); }; the various
types used in the interface are described in the xpcom
types section below. a complete (if spare) implementation of the nsisupports interface is shown below. see a reference implementation of queryinterface for detailed information. implementation of nsisupports interface // initialize the reference count to 0 sample::sample() : mrefcnt(0) { } sample::~sample() { } // typical, generic implementatio...
...inst the nsiid class. if there is a match, the object's this pointer is cast to void, the reference count is incremented, and the interface returned to the caller. if there isn't a match, the class returns an error and sets the out value to null. in the example above, it's easy enough to use a c-style cast. but casting can become more involved where you must first cast void then to the requested
type, because you must return the interface pointer in the vtable corresponding to the requested interface. casting can become a problem when there is an ambiguous inheritance hierarchy. xpcom identifiers in addition to the iid interface identifier discussed in the previous section, xpcom uses two other very important identifiers to distinguish classes and components. xpcom identifier classes the...
...he interface pointer in the vtable corresponding to the requested interface. casting can become a problem when there is an ambiguous inheritance hierarchy. xpcom identifiers in addition to the iid interface identifier discussed in the previous section, xpcom uses two other very important identifiers to distinguish classes and components. xpcom identifier classes the nsiid class is actually a
typedef for the nsid class. the other
typedefs of nsid, cid and iid, refer to specific implementations of a concrete class and to a specific interface, respectively. the nsid class provides methods like equals for comparing identifiers in the code. see identifiers in xpcom for more discussion of the nsid class. cid a cid is a 128-bit number that uniquely identifies a class or component in much the...
...And 9 more matches
nsIFile
sifile infile); void copyto(in nsifile newparentdir, in astring newname); void copytofollowinglinks(in nsifile newparentdir, in astring newname); void copytofollowinglinksnative(in nsifile newparentdir, in acstring newname); native code only! void copytonative(in nsifile newparentdir, in acstring newname); native code only! ...
...; void copytofollowinglinks(in nsifile newparentdir, in astring newname); void copytofollowinglinksnative(in nsifile newparentdir, in acstring newname); native code only! void copytonative(in nsifile newparentdir, in acstring newname); native code only! ...
...each element in the enumeration is an nsifile. read only. exceptions thrown ns_error_file_not_directory indicates that this nsifile does not reference a directory. diskspaceavailable print64 the number of bytes available to non-super...
...And 9 more matches
nsIMsgFilterCustomAction
stomaction.idl interface nsimsgfiltercustomaction : nsisupports { /* globally unique string to identify this filter action. * recommended form: extensionname@example.com#actionname */ readonly attribute acstring id; /* action name to display in action list. this should be localized. */ readonly attribute astring name; /** * is this custom action valid for a particular filter
type? * * @param
type the filter
type * @param scope the search scope * * @return true if valid */ boolean isvalidfor
type(in nsmsgfilter
typetype type, in nsmsgsearchscopevalue scope); /** * after the user inputs a particular action value for the action, determine * if that value is valid. * * @param actionvalue the value entered. * @param acti...
... the search scope * * @return true if valid */ boolean isvalidfor
type(in nsmsgfilter
typetype type, in nsmsgsearchscopevalue scope); /** * after the user inputs a particular action value for the action, determine * if that value is valid. * * @param actionvalue the value entered. ...
...* * @return true if valid */ boolean isvalidfor
type(in nsmsgfilter
typetype type, in nsmsgsearchscopevalue scope); /** * after the user inputs a particular action value for the action, determine * if that value is valid. * * @param actionvalue the value entered. ...
...And 9 more matches
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 / seamonkey 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. no...
...n and returned. set to "0" (the default) to get all results. this does not work in conjunction with sorting by title. this is because sorting by title requires us to sort after using locale-sensetive sorting (as opposed to letting the database do it for us). instead, we get the result ordered by date, pick the maxresult most recent ones, and then sort by title. query
type short the
type of search to use when querying the db; this attribute is only honored by query nodes. it is silently ignored for simple folder queries. see query
type constants for possible values. redirectsmode unsigned short specifies how to handle redirects; see redirects mode constants for details. the default value is redirects_mode_all. ...
...ying the db; this attribute is only honored by query nodes. it is silently ignored for simple folder queries. see query
type constants for possible values. redirectsmode unsigned short specifies how to handle redirects; see redirects mode constants for details. the default value is redirects_mode_all. note: this option is only used on query_
type_history. resolvenullbookmarktitles boolean if a bookmark title is null (note, not empty), attempt to use the history title. it is set to false by default. result
type short sets the result
type. see result
type constants for possible values. showsessions boolean separate/group history items based on session ...
...And 9 more matches
nsIWebNavigationInfo
introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/webnavigation-info;1 as a service: var webnavigationinfo = components.classes["@mozilla.org/webnavigation-info;1"] .getservice(components.interfaces.nsiwebnavigationinfo); method overview unsigned long is
typesupported(in acstring a
type, in nsiwebnavigation awebnav); constants support
type constants constant value description unsupported 0 returned by is
typesupported() to indicate lack of support for a
type. note: this is guaranteed not to change, so that boolean tests can be done on the return value if is
typesupported to detect whether a
type is supported a...
...tion awebnav); constants support
type constants constant value description unsupported 0 returned by is
typesupported() to indicate lack of support for a
type. note: this is guaranteed not to change, so that boolean tests can be done on the return value if is
typesupported to detect whether a
type is supported at all. image 1 returned by is
typesupported() to indicate that a
type is supported as an image. plugin 2 returned by is
typesupported() to indicate that a
type is supported via an npapi ("netscape 4 api") plug-in. this is not the value returned for "xpcom plug-ins". other 1 << 15 note: other return
types may be added here in the future as they become relevant. ...
... returned by is
typesupported() to indicate that a
type is supported as an image. plugin 2 returned by is
typesupported() to indicate that a
type is supported via an npapi ("netscape 4 api") plug-in. this is not the value returned for "xpcom plug-ins". other 1 << 15 note: other return
types may be added here in the future as they become relevant. returned by is
typesupported() to indicate that a
type is supported via some other means. methods is
typesupported() determines whether or not the specified mime
type is supported by the given nsiwebnavigation object. this lets you determine whether a mime
type can be displayed as-is inside a browser, or if the browser will instead forward handling of the data to a plug-in or an external helper application. n...
...And 9 more matches
DOMParser - Web APIs
nt, you can also replace portions of the dom with new dom trees built from html by setting the value of the element.innerhtml and outerhtml properties. these properties can also be read to fetch html fragments corresponding to the corresponding dom subtree. ...
...lt from html by setting the value of the element.innerhtml and outerhtml properties. these properties can also be read to fetch html fragments corresponding to the corresponding dom subtree. syntax let domparser = new domparser()āā methods domparser.parsefromstring() syntax let doc = domparser.parsefromstring(string, mime
type) return either document or xmldocument depending on the mime
type argument. ...
...m subtree. syntax let domparser = new domparser()āā methods domparser.parsefromstring() syntax let doc = domparser.parsefromstring(string, mime
type) return either document or xmldocument depending on the mime
type argument. parameters this method has 2 parameters (both required): string the domstring to be parsed. it must contain either html, xml, xhtml+xml, or svg document. mime
type a domstring. this string determines a class of the the method's return value. ...
...And 9 more matches
Examples of web and XML development using the DOM - Web APIs
this chapter provides some longer examples of web and xml development using the dom. wherever possible, the examples use common apis, tricks, and patterns in javascript for manipulating the document object. ...
...image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50px; width: 500px;"> </p> <div id="output"> </div> </body> </html> example 2: image attributes <!doc
type html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input
type="button" v...
...in this case, you are manipulating the individual st...
...And 9 more matches
Dragging and Dropping Multiple Items - Web APIs
caution: all of the methods and properties with a moz prefix (such as mozsetdataat() are gecko specific interfaces. these interfaces will only work with gecko based browsers. mozilla supports the ability to drag multiple items using some additional non-standard methods. these are methods that mirror the
types property as well as the getdata(), setdata() and cleardata() methods, however, they take an additional argument that specifies the index of the item to retrieve, modify or remove. the drag processing described in this document use the datatransfer interface. this processing does not use the datatransferitem interface nor the datatransferitemlist interface. setting and getting with indices the mozsetdataat() method allows you to add multiple items during a dragstart event. this fu...
... // [item1] data=url1, index=0 // [item2] data=url3, index=1 fortunately, you don't normally need to clear items often; it's more common to just add the items only when you know they are needed. common cases where dragging multiple items is used is when dragging multiple files or bookmarks. in this case, add the approp...
...ethod to retrieve a specific item from the data transfer. the following example retrieves a set of files being dragged and adds them to an array. function ondrop(event) { var files = []; var dt = event.datatransfer; for (var i = 0; i < dt.mozitemcount; i++) files.push(dt.mozgetdataat("application/x-moz-file", i)); } you may also wish to check if the desired format exists using the moz
typesat method. as with the
types property, it returns a list of strings of the
types for an item.
types property is equivalent to retrieving the list of
types for the item at index 0. var
types = event.datatransfer.moz
typesat(1); dragging non-string data the additional methods described above are also not restricted to string data; you can specify any
type of data. for example, files are dragged...
...And 9 more matches
WebGLRenderingContext.texSubImage2D() - Web APIs
the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture. ...
... the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture. ...
... the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture. ...
...And 9 more matches
Signaling and video calling - Web APIs
e other peer knows how to receive this information and deliver it to its own ice subsystem. all you have to do is channel the information back and forth. the contents don't matter at all to the signaling server. readying the chat server for signaling our chat server uses the websocket api to send information as json strings between each client and the server. ...
...this lets us send signaling messages using this same server, instead of needing a separate server. let's take a look which changes we need to make to the chat server support webrtc signaling. this is in the file chatserver.js. ...
...e pending message to see if it has a target property. if that property is present, it specifies the username of the client to which the message is to be sent, and we call sendtooneuser() to send the message to them. otherwise, the message is broadcast to all users by iterating over the connection list, sending the message to each user. as the existing code allows the sending of arbitrary message
types, no additional changes are required. our clients can now send messages of unknown
types to any specific user, letting them send signaling messages back and forth as desired. that's all we need to change on the server side of the equation. now let's consider the signaling protocol we will implement. designing the signaling protocol now that we've built a mechanism for exchanging messages, we n...
...And 9 more matches
HTML attribute: min - HTML: Hypertext Markup Language
the min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. if the value of the element is less than this, the element fails constraint validation. this value must be less than or equal to the value of the max attribute. if a value is specified for min that isn't a valid number, the input has no minimum value. ...
...for the input containing the attribute. if the value of the element is less than this, the element fails constraint validation. this value must be less than or equal to the value of the max attribute. if a value is specified for min that isn't a valid number, the input has no minimum value. valid for the numeric input
types, including the date, month, week, time, datetime-local, number and range
types, and the <meter> element, the min attribute is a number that specifies the most negative value a form control to be considered valid. syntax if any is not explicity set, valid values for the number, date/time input
types, and range input
types are equal to the basis for stepping - the min value and increments of the step value, up to the max value, if specified. for example, if we have <input...
..., and the <meter> element, the min attribute is a number that specifies the most negative value a form control to be considered valid. syntax if any is not explicity set, valid values for the number, date/time input
types, and range input
types are equal to the basis for stepping - the min value and increments of the step value, up to the max value, if specified. for example, if we have <input
type="number" min="10" step="2"> any even integer, 10 or great, is valid. ...
...And 9 more matches
Symbol - JavaScript
some further explanation about purpose and usage can be found in the glossary entry for symbol. ...
...has static properties that expose several members of built-in objects, has static methods that expose the global symbol registry, and resembles a built-in object class, but is incomplete as a constructor because it does not support the syntax "new symbol()". every symbol value returned from symbol() is unique. a symbol value may be used as an identifier for object properties; this is the data
type's primary purpose, although other use-cases exist, such as enabling opaque data
types, or serving as an implementation-supported unique identifier in general. some further explanation about purpose and usage can be found in the glossary entry for symbol. description to create a new primitive symbol, you write symbol() with an optional string as its description: let sym1 = symbol() let sym2 = ...
...itive symbol, you write symbol() with an optional string as its description: let sym1 = symbol() let sym2 = symbol('foo') let sym3 = symbol('foo') the above code creates three new symbols. note that symbol("foo") does not coerce the string "foo" into a symbol. it creates a new symbol each time: symbol('foo') === symbol('foo') // false the following syntax with the new operator will throw a
typeerror: let sym = new symbol() //
typeerror this prevents authors from creating an explicit symbol wrapper object instead of a new symbol value and might be surprising as creating explicit wrapper objects around primitive data
types is generally possible (for example, new boolean, new string and new number). if you really want to create a symbol wrapper object, you can use the object() functio...
...And 9 more matches
event/target - Archive of obsolete content
listen to the events using the standard on() and once() functions. usage many objects in the sdk can broadcast events. for example, a panel instance emits an show event when the panel is shown. with this module you can create your own objects that emit events. this module provides an exemplar eventtarget object, that implements an interface for adding and removing event listeners of a specific
type. eventtarget is the base class for all objects in sdk on which events are emitted. also see the tutorial on implementing event targets to get started with this api. instantiation it's easy to create event target objects, no special arguments are required. const { eventtarget } = require("sdk/event/target"); let target = eventtarget(); for a convenience though optional options arguments may b...
...ugh 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 an event `target` unless // intentionally overridden via `.bind()`. console.log(message); }); sometimes event listener may care only about very first event of specific
type. eventtarget interface defines convenience method for adding one shot event listeners via method once. such listeners are called on...
...e(message) { // note: `this` pseudo variable is an event `target` unless // intentionally overridden via `.bind()`. console.log(message); }); sometimes event listener may care only about very first event of specific
type. eventtarget interface defines convenience method for adding one shot event listeners via method once. such listeners are called only once next time event of the specified
type is emitted: target.once('ready', function onready() { // do the thing once ready! }); removing listeners eventtarget interface defines api for unregistering event listeners, via removelistener method: target.removelistener('message', onmessage); emitting events eventtarget interface intentionally does not define an api for emitting events. in majority of cases party emitting events is dif...
...And 8 more matches
ui/sidebar - Archive of obsolete content
as an alias for self.data.url("sidebar.html"). so you can rewrite the above code like this: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: "./sidebar.html" }); you can include javascript and css from the html as you would with any web page, for example using <script> and <link> tags containing a path relative to the html file itself. <!doc
type html> <html> <head> <link href="stuff.css"
type="text/css" rel="stylesheet"> </head> <body> <script
type="text/javascript" src="stuff.js"></script> </body> </html> you can update the sidebar's content by setting the sidebar's url property. this will change the sidebar's content across all windows. communicating with sidebar scripts you can't directly access your sidebar's cont...
...may not be initialized yet, so you can't reliably send messages to the sidebar script right away: however, you can start listening to messages from the script. here's a simple but complete add-on that shows how to set up communication between main.js and a script in a sidebar, in the case where the sidebar script initiates communication: the html file includes just a script, "sidebar.js": <!doc
type html> <html> <body> content for my sidebar <script
type="text/javascript" src="sidebar.js"></script> </body> </html> the "sidebar.js" file sends a ping message to main.js using port.emit() as soon as it loads, and adds a listener to the pong message. addon.port.emit("ping"); addon.port.on("pong", function() { console.log("sidebar script got the reply"); }); the "main.js" file c...
...d, so you can send messages to the sidebar script and be confident that they will not be lost. listen to this event if your add-on initiates the conversation. here's a simple but complete add-on that shows how to set up communication between main.js and a script in a sidebar, in the case where the main.js script initiates communication: the html file includes just a script, "sidebar.js": <!doc
type html> <html> <body> content for my sidebar <script
type="text/javascript" src="sidebar.js"></script> </body> </html> the "sidebar.js" file listens to the ping message from main.js, and responds with a pong message. addon.port.on("ping", function() { console.log("sidebar script got the message"); addon.port.emit("pong"); }); the "main.js" file creates a sidebar object and adds ...
...And 8 more matches
Dialogs and Prompts - Archive of obsolete content
ood 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="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 c...
.../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 button
types you can use 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). for each of these buttons you can set their l...
... be sure to use ondialog* attributes on dialog element instea...
...And 8 more matches
XUL Structure - Archive of obsolete content
« previousnext » we'll begin by looking at how the xul is handled in mozilla. how xul is handled in mozilla, xul is handled in much the same way as html or other
types of content are handled. when you
type the url of an html page into the browser's address field, the browser locates the web site and downloads the content. the mozilla rendering engine takes the content in the form of html source and transforms it into a document tree. the tree is then converted into a set of objects that can be displayed on the screen. style sheets (css), images, and other technologies are used to control the presentation. xul functions in much the same way. in fact, in mozilla, all document
types, whether they are html or xul, or even svg, are all handled by the same underlying code. this ...
... are specific to html, such as forms, and others which are specific to xul, such as overlays. since xul and html are handled in the same way, you can load both from either your local file system, from a web page, or from an extension or standalone xulrunner application. content from remote sources (e.g. http://localhost/~username/ ), regardless of whether they are html or xul or another document
type, are limited in the
type of operations they can perform, for security reasons. for this reason, mozilla provides a method of installing content locally and registering the installed files as part of its chrome system. this allows a special url form, called a chrome:// url, to be used. by accessing a file using a chrome url, the files receive elevated privileges to access local files, access prefe...
...age tries, for example, to read a local file. however, a file loaded via a chrome url will be able to read files with the same access privileges as the installed extension. this distinction is important. this means that there are certain things that content of web pages cannot do, such as read the user's bookmarks. this distinction is not based on the kind of content being displayed; only on the
type of url used. both html and xul placed on a web site have no extra permissions; however both html and xul loaded through a chrome url have enhanced permissions. remote xul was disabled in firefox 8, so the following is of historic interest only. if you are going to use xul on a web site, you can just put the xul file on the web site as you would an html file, and then load its url in a browser h...
...And 8 more matches
colorpicker - Archive of obsolete content
if this attribute is set, the element is disabled. ...
...if this attribute is set, the element is disabled. ...
...if this attribute is set, the element is disabled. ...
...And 8 more matches
notification - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the notification is used to display an informative message. it will normally be used as part of a notificationbox. the box includes a button which the user can use to close the box. attributes image, label, priority, persistence,
type, value properties accessible
type, control, image, label, priority, persistence,
type, value methods close examples <notification label="this is a warning"/> attributes image
type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label
type: string the label that will appear on the element. i...
...is attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. 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. persistence
type: integer the persistence may be set to a non-zero value so that the notificationbox's removetransientnotifications method does not remove them. this may be used to close a set of notifications as a group without affecting other notifications. priority
type: integer numeric value that specifies the order in which the notifications appear. should be one of the constants described in the n...
... value so that the notificationbox's removetransientnotifications method does not remove them. this may be used to close a set of notifications as a group without affecting other notifications. priority
type: integer numeric value that specifies the order in which the notifications appear. should be one of the constants described in the notificationbox's appendnotification method.
type type: one of the values below indicates the
type of notification, determined from the priority. info a notification that is of lesser importance. warning a normal warning notification. critical a critical notification. 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 ac...
...And 8 more matches
scale - Archive of obsolete content
alue is modified. attributes dir, disabled, increment, max, min, movetoclick, pageincrement, tabindex, value properties disabled, max, min, increment, pageincrement, tabindex, value, methods decrease, decreasepage, increase, increasepage, examples horizontal scale: <scale min="1" max="10"/> vertical scale: <scale min="1" max="10" orient="vertical"/> attributes dir
type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values ...
..., the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). for other elements, they are placed right to left or bottom to top. this is reverse of the order in which they appear in the xul code. 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 not be submitted. do not set the attribute to true, as this will sug...
...m 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. ...
...And 8 more matches
timepicker - Archive of obsolete content
cker's change event handlers. attributes disabled, hideseconds, increment, readonly, tabindex, value properties amindicator, datevalue, disabled, hideseconds, hour, hourleadingzero, increment, is24hourclock, ispm, minute, minuteleadingzero, pmindicator, readonly, second, secondleadingzero, tabindex, value examples <timepicker value="12:05"/> 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 not be submitted. do not set the attribute to true, as this will sug...
...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. hideseconds
type: boolean indicates whether to show the seconds field. 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. increment
type: integer indicates the number of minutes to skip each time the arrows are pressed. this should be used in combination with setting hidesecond...
...hether to show the seconds field. 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. 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. ...
...And 8 more matches
Writing JavaScript for XHTML - Archive of obsolete content
in practise, very few xhtml documents are served over the web with the correct mime media
type, application/xhtml+xml. whilst authored to the stricter rules of xml, they are sent with the media
type for html (text/html). the receiving browser considers the content to be html, and does not utilise its xml parser. there are a number of reasons for this. partially it is because, prior to version 9, internet explorer was incapable of handling xhtml sent with the official xhtml media
type at all. (rather than displaying content, it would present the user with a file download dialog.) but it is also founded in the experience that javascript, authored carefully for html, can break when placed with an xml environment. this article shows some of the reasons alongside with strategies to remedy...
...le with real xhtml applications. (note that xhtml documents which behave correctly in both application/xhtml+xml and text/html environments are sometimes known as 'polyglot' documents.) to test the following examples locally, use firefox's extension switch. just write an ordinary (x)html file and save it once as test.html and once as test.xhtml. problem: nothing works after switching the mime
type suddenly no inline script works anymore. even the plain old alert() method is gone. the code looks something like this: <script
type="text/javascript"> //<!-- window.alert("hello world!"); //--> </script> solution: the cdata trick this problem usually arises, when inline scripts are included in comments. this was common practice in html, to hide the scripts from browsers not capable...
... were intended: comments. before processing the file, all comments will be stripped from the document, so enclosing your script in them is like throwing your lunch in a piranha pool. moreover, there's really no point to commenting out your scripts -- no browser written in the last ten years will display your code on the page. ...
...And 8 more matches
Web fonts - Learn web development
; we'll go into more detail below. there are two important things to bear in mind about web fonts: browsers support different font formats, so you'll need multiple font formats for decent cross-browser support. for example, most modern browsers support woff/woff2 (web open font format versions 1 and 2), the most efficient format around, but older versions of ie only support eot (embedded open
type) fonts, and you might need to include an svg version of the font to support older versions of iphone and android browsers. we'll show you below how to generate the required code. fonts generally aren't free to use. you have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site). you shouldn't steal fonts and use them without givin...
...d, we would like you to follow the steps detailed in the below sections, to get an idea of the process. you should use the web-font-start.html and web-font-start.css files as a starting point to add your code to (see the live example). make a copy of these files in a new directory on your computer now. ...
...examples include font squirrel, dafont, and everything fonts. ...
...And 8 more matches
Video and audio content - Learn web development
encode that media. different formats are used for audio tracks versus video tracks. each audio track is encoded using an audio codec, while video tracks are encoded using (as you probably have guessed) a video codec. as we talked about before, different browsers support different video and audio formats, and different container formats (like mp3, mp4, and webm, which in turn can contain different
types of video and audio). for example: a webm container typically packages vorbis or opus audio with vp8/vp9 video. this is supported in all modern browsers, though older versions may not work. an mp4 container often packages aac or mp3 audio with h.264 video. this is also supported in all modern browsers, as well as internet explorer. the ogg container tends to use vorbis audio and theora vide...
...versions may not work. an mp4 container often packages aac or mp3 audio with h.264 video. this is also supported in all modern browsers, as well as internet explorer. the ogg container tends to use vorbis audio and theora video. this is best supported in firefox and chrome, but has basically been superseded by the better quality webm format. there are some special cases. for example, for some
types of audio, a codec's data is often stored without a container, or with a simplified container. one such instance is the flac codec, which is stored most commonly in flac files, which are just raw flac tracks. another such situation is the always-popular mp3 file. an "mp3 file" is actually an mpeg-1 audio layer iii (mp3) audio track stored within an mpeg or mpeg-2 container. this is especially in...
...ts. if your site and the user's browser don't share a media format in common, your media simply won't play. due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. see choosing the right container in media container formats (file
types) for help selecting the container file format best suited for your needs; similarly, see choosing a video codec in web video codec guide and choosing an audio codec in web audio codec guide for help selecting the first media codecs to use for your content and your target audience. one additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop...
...And 8 more matches
Looping code - Learn web development
ferent — if you've got a lot of different calculations to do, you want to do each different one, not the same one over and over again! let's look at an example to perfectly illustrate why loops are such a good thing. ...
... each time the loop iterates. let's look at a real example so we can visualize what these do more clearly. ...
...ve on to any code that follows it. ...
...And 8 more matches
React interactivity: Events and state - Learn web development
ing events if you've only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and attach listeners to them. for example: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button
type="button" onclick={() => alert("hi!")} > say hi! </button> note: this may seem counter-intuitive regarding best-practice advice that tends to advise against use of inline event handlers on html, but remember that jsx is actually part of your javascript. in the above example, we're adding an onclick attribute to the <button> element. the value of that attribute is a function that triggers a...
...". we are defining a function whose job is to modify name, called setname(). usestate() returns these two things, so we are using array destructuring to capture them both in separate variables. reading state you can see the name state in action right away. add a value attribute to the form’s input, and set its value to name. your browser will render "use hooks!" inside the input. <input
type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" value={name} /> change "use hooks!" to an empty string once you're done; this is what we want for our initial state. const [name, setname] = usestate(''); reading user input before we can change the value of name, we need to capture a user's input as they
type. for this, we can listen to the onchan...
...setname] = usestate(''); reading user input before we can change the value of name, we need to capture a user's input as they
type. for this, we can listen to the onchange event. let’s write a handlechange() function, and listen for it on the <input /> tag. // near the top of the `form` component function handlechange(e) { console.log("typing!"); } // down in the return statement <input
type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" value={name} onchange={handlechange} /> currently, your input’s value will not change as you
type, but your browser will log the word "typing!" to the javascript console, so we know our event listener is attached to the input. in order to change the input’s value, we have to use our handlechange...
...And 8 more matches
Basics
s you resize the window. you can also make displayed equations, such as the following ones: x → maps to y = f n ā” ( x ) = ( 1 + 1 x n ) n ∫ a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 ! 5 ! f ( 4 ) ( η ) , a ≤ η ≤ b | x | = { - x if x < 0 x otherwise you can also
typeset 2d mathematical constructs such as matrices. the following example shows the i-th step of the multiplication of a matrix a by a vector x (notice how ai1 , ... , ain , x1 are on the same baseline, other alignments are possible): i-th row [ a11 a12 a13 ... a1n : : : ... : ai1 ai2 ai3 ... ain : : : : an1 an2 an3 ...
...>n</mi></msup> </math> for some <i>n</i>. when you left-click any individual entry, it should toggle between its expanded and unexpanded forms. you can also <a href="javascript:unexpand();">unexpand all</a> or <a href="javascript:expand();">expand all</a>. ...
...all</a> or <a href="javascript:expand();">expand all</a>. ...
...And 8 more matches
JS::Handle
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. ...
... 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. ...
... then redundant rooting of multiple copies of the gc thing can be avoided. second, if the caller does not pass a rooted value a compile error will be generated, which is quicker and easier to fix than when relying on a separate rooting analysis. if you want to add additional methods to js::handle for a specific specialization, define a js::handlebase<t> specialization containing them. ...
...And 8 more matches
JS::PersistentRooted
this article covers features introduced in spidermonkey 31 a copyable, assignable global gc root
type with arbitrary lifetime, an infallible constructor, and automatic unrooting on destruction. syntax js::persistentrooted<t> var; // added in spidermonkey 38 js::persistentrooted<t> var(cx); js::persistentrooted<t> var(cx, initial); js::persistentrooted<t> var(rt); js::persistentrooted<t> var(rt, initial); name
type description cx jscontext * the context to get the runtime in which to add the root rt jsruntime * the runtime in which 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. meth...
...e * the runtime in which 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 spidermonkey 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 spidermonkey 38 t& get() returns ptr. const t& get() const operator const t&() const const t& operator->() const t* addr...
...returns a pointer to ptr. const t* address() const persistentrooted<t>& operator=(const t& p) sets the value of ptr. persistentrooted<t>& operator=(const persistentrooted<t>& other) bool operator!=(const t& other) const compares ptr and other. bool operator==(const t& other) const description js::persistentrooted<t> declares a variable of
type t whose value is always rooted. this is typically used for global variables. js::persistentrooted<t> is a copyable, assignable global gc root
type with arbitrary lifetime, an infallible constructor, and automatic unrooting on destruction. these roots can be used in heap-allocated data structures, so they are not associated with any particular jscontext or stack. they are registered with the jsr...
...And 8 more matches
JS::Rooted
this article covers features introduced in spidermonkey 17 local variable of
type t whose value is always 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. const t &get() const operator const t&() const ...
... t *address() returns a pointer to ptr. const t *address() const t &operator=(t value) sets the value of ptr to value. t &operator=(const rooted &value) void set(t value) bool operator!=(const t &other) const compares ptr and other. bool operator==(const t &other) const description js::rooted<t> declares a local variable of
type t whose value is always rooted. this is typically used for local variables, or for non-rooted values being passed to a function that requires a handle, e.g. foo(js::rooted<t>(cx, x)). js::rooted<t> may be automatically coerced to a js::handle<t>. js::rooted<t> should be used whenever a local variable's value may be held live across a call which can trigger a gc. if you want to add additi...
...tion that requires a handle, e.g. foo(js::rooted<t>(cx, x)). js::rooted<t> may be automatically coerced to a js::handle<t>. js::rooted<t> should be used whenever a local variable's value may be held live across a call which can trigger a gc. if you want to add additional methods to rooted for a specific specialization, define a js::rootedbase<t> specialization containing them. ...
...And 8 more matches
JSConvertOp
vp js::mutablehandlevalue out parameter. on success, *vp receives the converted value. ...
... vp js::mutablehandlevalue out parameter. on success, *vp receives the converted value. ...
... vp js::mutablehandlevalue out parameter. on success, *vp receives the converted value. ...
...And 8 more matches
SpiderMonkey 1.8.8
team is pleased to announce the release of spidermonkey 1.8.8. you can download full source code here: insert-actual-link-when-the-release-happens (md5 checksum: insert-actual-hash-here). spidermonkey 1.8.8 is the javascript engine that shipped in firefox 10.0. it continues to improve performance over previous spidermonkey 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 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 spidermonkey 1.8.8 is sup...
...ge, just not as fast. migrating to spidermonkey 1.8.8 the following features in earlier versions of spidermonkey 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. spidermonkey 1.8.8 is not binary-compatible with previous releases, nor is it source-code compatible. ...
...y jsapi
types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. a significant number of
typedefs of built-in
types, or of
types which are now standardized, have been removed. these and other changes are explained in detail below. new javascript language features javascript 1.8.8 includes significant updates to language features, yo.
typedef changes many
types have been removed from the jsapi and replaced with simpler alternatives. ...
...And 8 more matches
SpiderMonkey 17
o announce the release of spidermonkey 17. you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5 checksum: 20b6f8f1140ef6e47daa3b16965c9202). spidermonkey 17 is the javascript engine that shipped in firefox 17. it continues to improve performance over previous spidermonkey 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 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 spidermonkey 17 is supported on all the pl...
...language, just not as fast. migrating to spidermonkey 17 the following features in earlier versions of spidermonkey 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. spidermonkey 17 is not binary-compatible with previous releases, nor is it source-code compatible. ...
...y jsapi
types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. a significant number of
typedefs of built-in
types, or of
types which are now standardized, have been removed. these and other changes are explained in detail below. new javascript language features javascript 17 includes significant updates to language features, yo.
typedef changes many
types have been removed from the jsapi and replaced with simpler alternatives. ...
...And 8 more matches
Shell global objects
ipts or out-of-memory) and return 'terminated' element if present with value v, convert v to an object o and mark the source as being attached to the dom element o. if the property is omitted or v is null, don't attribute the source to any dom element. elementattributename if present and not undefined, the name of property of element that holds this code. this is what debugger.source.proto
type.elementattributename returns. sourcemapurl if present with value v, convert v to a string, and provide that as the code's source map url. if omitted, attach no source map url to the code (although the code may provide one itself, via a //#sourcemappingurl comment). sourceislazy if present and true, indicates that, after compilation, script source should not be cached by the js engine and ...
...olumn number for error messages and debug info element if present with value v, convert v to an object o and mark the source as being attached to the dom element o. if the property is omitted or v is null, don't attribute the source to any dom element. elementattributename if present and not undefined, the name of property of element that holds this code. this is what debugger.source.proto
type.elementattributename returns. runoffthreadscript() wait for off-thread compilation to complete. if an error occurred, throw the appropriate exception; otherwise, run the script and return its value. offthreadcompilemodule(code) compile code on a helper thread. to wait for the compilation to finish and get the module object, call finishoffthreadmodule. finishoffthreadmodule() wait for of...
... omitted, supply no principal. createmappedarraybuffer(filename, [offset, [size]]) create an array buffer that mmaps the given file. addpromisereactions(promise, onresolve, onreject) calls the js::addpromisereactions jsapi function with the given arguments. getmaxargs() return the maximum number of supported args for a call. objectemulatingundefined() return a new object obj for which
typeof obj === "undefined", obj == null and obj == undefined (and vice versa for !=), and toboolean(obj) === false. iscachingenabled() return whether js caching is enabled. setcachingenabled(b) enable or disable js caching. cacheentry(code) return a new opaque object which emulates a cache entry of a script. this object encapsulates the code and its cached content. the cache entry is filled and ...
...And 8 more matches
Creating the Component Code
e mentioned in the previous section, components have layers. there are three main parts to every xpcom component. from the innermost and moving outward, the first object is the xpcom object. this is the object that contains the business logic, that implements functionality such as starting a network download, implementing interfaces that listen to the download progress, or providing a new content
type handler. in weblock, this is the part that brings together various gecko services and prevents users from leaving the list of acceptable domains. in a way, the factory and module layers are glue to plug the xpcom object into the larger xpcom system. one layer above the object itself is the nsifactory object. this object provides basic abstraction of the xpcom object itself. as you can see in oni...
...e 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 is nsiclassinfo. starting from the outside ...
... public nsifactory * weblockmodule: public nsimodule in xpcom, all of these classes also derive from the nsisupports base interface. digging in: required includes and constants let's take a look at the first several lines of code in the component and discuss what they mean in xpcom. the includes and definitions at the top of an xpcom source file can give you an idea about some of the data
types and techniques we'll be discussing more in the upcoming chapters. for example, mozilla_strict_api is a variable that shields you from certain private, non-xpcom headers. for example, including nsicomponentmanager.idl without mozilla_strict_api defined will include the following headers, which are not supported across versions (unfrozen): nscomponentmanagerutils.h nscomponentmanagerobsolete.
...And 8 more matches
Starting WebLock
e-time registration code it may need. the inverse of this function is the unregistration callback, where it's a good idea to undo whatever the registration function did. the two functions look like this: static ns_method weblockregistration(nsicomponentmanager *acompmgr, nsifile *apath, const char *registrylocation, const char *component
type, const nsmodulecomponentinfo *info); static ns_method weblockunregistration(nsicomponentmanager *acompmgr, nsifile *apath, const char *registrylocation, const nsmodulecomponentinfo *info); the names of the functions can be anything you wish. both functions are passed the component manager and the path to the ...
...isupports1(weblock, nsiobserver); ns_imethodimp weblock::observe(nsisupports *asubject, const char *atopic, const prunichar *adata) { return ns_ok; } static ns_method weblockregistration(nsicomponentmanager *acompmgr, nsifile *apath, const char *registrylocation, const char *component
type, const nsmodulecomponentinfo *info) { nsresult rv; nscomptr<nsiservicemanager> servman = do_queryinterface((nsisupports*)acompmgr, &rv); if (ns_failed(rv)) return rv; nscomptr<nsicategorymanager> catman; rv = servman->getservicebycontractid(ns_categorymanager_contractid, ns_get_iid(nsicategorymanager), ...
...ock component must answer is: how should weblock look to the outside world? what, in other words, is the interaction of clients with the weblock component? in this section, we enumerate the basic functionality the component should expose and create the single interface that organizes and provides this functionality. instead of starting with the implementation, developers use xpidl (see xpidl and
type libraries for more information about xpidl) to define the interface to the component: how the functionality should be organized, expressed, and exposed to its clients. in general, the weblock service interface needs to include the following functionality: lock - enable web locking so that any browser in the gecko application is restricted to the white list of website domains. unlock - disabl...
...And 8 more matches
nsIHTMLEditor
text(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alist
type, in boolean entirelist, in astring abullet
type); boolean nodeisblock(in nsidomnode node); void pastenoformatting(in long aselection
type); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultproperty(in nsiatom aproperty, in astring aattribute, in astri...
...ring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void removeinlineproperty(in nsiatom aproperty, in astring aattribute); void removeinsertionlistener(in nsicontentfilter infilter); void removelist(in astring alist
type); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void setbackgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafterelement(in nsidomelement aelement); void setcssinlineproperty(in nsiatom aproperty, in astring aattribute, in as...
... 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 ...
...And 8 more matches
nsILocalFileMac
xpcom/io/nsilocalfilemac.idlscriptable please add a summary to this article. ...
... bundleidentifier autf8string returns the ident...
...! void initwithfsspec([const] in fsspecptr afilespec); native code only! obsolete since gecko 1.9.2 boolean ispackage(); void launchwithdoc(in nsilocalfile adoctoload, in boolean alaunchinbackground); void opendocwithapp(in nsilocalfile aapptoopenwith, in boolean alaunchinbackground); void setfile
typeandcreatorfromextension(in string aextension); obsolete since gecko 1.9.2 void setfile
typeandcreatorfrommime
type(in string amime
type); obsolete since gecko 1.9.2 attributes attribute
type description bundledisplayname astring returns the display name of the application bundle (usually the human readable name of the application) read only. bundleidentifier autf8string returns the identifier of the bundle. read only. filecreator os
type native code only! filesizewithresfor...
...And 8 more matches
Library
the library object represents a native library loaded by the c
types open() method. its methods let you declare symbols exported by the library, and to manage the library. method overview close(); cdata declare(name, [abi, ], return
type[, arg
type1, ...]); methods close() closes the library. you need to call this once you're done using the library. close(); parameters none. declare() declares an api from the native library, allowing it to be used from javascript. this can be used both for exported data symbols and for functions. ...
...see abi constants. ...
...see abi constants. ...
...And 8 more matches
Debugger.Script - Firefox Developer Tools
of the property or method differs between the instance referring to a jsscript or to a block of webassembly code, the text will be split into two sections, headed by “if the instance refers to a jsscript” and “if the instance refers to webassembly code”, respectively. if the behavior does not differ, no such emphasized headings will appear. accessor properties of the debugger.script proto
type object a debugger.script instance inherits the following accessor properties from its proto
type: isgeneratorfunction true if this instance refers to a jsscript for a function defined with a function* expression or statement. false otherwise. isasyncfunction true if this instance refers to a jsscript for an async function, defined with an async function expression or statement. false otherw...
...variable or property. thus, we use a/b to refer to theb defined withina, and a< to refer to a function that occurs somewhere within an expression that is assigned toa. ...
... startline if the instance refers to a jsscript, the number of the line at which this script’s code starts, within the file or document named by url. ...
...And 8 more matches
Index - Firefox Developer Tools
the debuggee’s memory use in various ways: 22 debugger.object a debugger.object instance represents an object in the debuggee, providing reflection-oriented 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.proto
type.getownpropertydescriptor and debugger.object.proto
type.defineproperty, ensuring that the debugger will not inadvertently invoke the referent’s getters and setters. 23 debugger.script a debugger.script instance may refer to a sequence of bytecode in the debuggee or to a block of webassembly code. for the former, it is the debugger api’s presentation of a jsapi jsscript ob...
... former, it is the debugger api’s presentation of a jsapi jsscript object. the two cases are distinguished by their format property being "js" or "wasm". 24 debugger.source a debugger.source instance represents either a piece of javascript source code or the serialized text of a block of webassembly code. the two cases are distinguished by the latter having its introduction
type property always being "wasm" and the former having its introduction
type property never being "wasm". 25 tutorial: set a breakpoint this page shows how you can try out the debugger api yourself using firefox’s scratchpad. we use debugger to set a breakpoint in a function, and then evaluate an expression whenever it is hit. 26 tutorial: show allocations per call p...
... by the function call path that allocated them. 27 debugger.object a debugger.object instance represents an object in the debuggee, providing reflection-oriented 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.proto
type.getownpropertydescriptor and debugger.object.proto
type.defineproperty, ensuring that the debugger will not inadvertently invoke the referent's getters and setters. 28 deprecated tools deprecated, tools over the course of devtools development, we have added several experimental panels to try out new ideas. not all of these have had wide adoption, and due to the cost of mainten...
...And 8 more matches
Document.evaluate() - Web APIs
returns an xpathresult based on an xpath expression and other given parameters. syntax var xpathresult = document.evaluate( xpathexpression, contextnode, namespaceresolver, result
type, result ); xpathexpression is a string representing the xpath to be evaluated. contextnode specifies the context node for the query (see the xpath specification). it's common to pass document as the context node. namespaceresolver is a function that will be passed any namespace prefixes and should return a string representing the namespace uri associated with that prefix. ...
...'s common to pass document as the context node. namespaceresolver is a function that will be passed any namespace prefixes and should return a string representing the namespace uri associated with that prefix. it will be used to resolve prefixes within the xpath itself, so that they can be matched with the document. null is common for html documents or when no namespace prefixes are used. result
type is an integer that corresponds to the
type of result xpathresult to return. use named constant properties, such as xpathresult.any_
type, of the xpathresult constructor, which correspond to integers from 0 to 9. result is an existing xpathresult to use for the results. null is the most common and will create a new xpathresult example var headings = document.evaluate("/html/body//h2", document,...
... * the result will likely be an unordered node iterator. ...
...And 8 more matches
HTMLInputElement.stepUp() - Web APIs
the htmlinputelement.stepup() method increments the value of a numeric
type of <input> element by the value of the step attribute, or the default step value if the step attribute is not explicitly set. the method, when invoked, increments the value by (step * n), where n defaults to 1 if not specified, and step defaults to the default value for step if not specified. ...
... the htmlinputelement.stepup() method increments the value of a numeric
type of <input> element by the value of the step attribute, or the default step value if the step attribute is not explicitly set. the method, when invoked, increments the value by (step * n), where n defaults to 1 if not specified, and step defaults to the default value for step if not specified. ...
...f the step attribute, or the default step value if the step attribute is not explicitly set. the method, when invoked, increments the value by (step * n), where n defaults to 1 if not specified, and step defaults to the default value for step if not specified. ...
...And 8 more matches
MediaSessionActionDetails - Web APIs
fastseek optional an seekto action may optionally include this property, which is a boolean value indicating whether or not to perform a "fast" seek. ...
... fastseek optional an seekto action may optionally include this property, which is a boolean value indicating whether or not to perform a "fast" seek. ...
... fastseek optional an seekto action may optionally include this property, which is a boolean value indicating whether or not to perform a "fast" seek. ...
...And 8 more matches
Using the Media Capabilities API - Web APIs
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 is
typesupported() or the htmlmediaelement method canplay
type(). more and more finely-detailed information about the display's properties, so that informed decisions can be made when choosing the best format to play on the user's device. for example, you can use the api to ensure that you don't try to play high dynamic range (hdr) content on a standard dynamic range (sdr) screen. support for getting re...
...deo and audio encoding. creating a video decoding configuration the mediacapabilities.decodinginfo() method takes as a parameter a media decoding configuration. there are very specific ways to go about creating the configuration defined by the mediadecodingconfiguration dictionary. in our example, we are testing the decoding capabilities of a video configuration. the configuration requires the
type of media being tested — e.g. a plain file or mediasource — and a videoconfiguration including values for the content
type, width, height, bitrate, and framerate: the content
type must be a string specifying a valid video mime
type. the width and height are the horizontal and vertical dimensions of the video; these are also used to determine the aspect ratio. the bitrate is the number of bi...
...e content
type must be a string specifying a valid video mime
type. the width and height are the horizontal and vertical dimensions of the video; these are also used to determine the aspect ratio. the bitrate is the number of bits used to encode one second of video. the framerate is the number of frames which are played per second of time when playing the video. ...
...And 8 more matches
Microdata DOM API - Web APIs
nted in some browsers for a long time. nowadays, they have been abandoned and removed from all browsers and are therefore deprecated. you can't use them anymore and this document is kept as information only. microdata becomes even more useful when scripts can use it to expose information to the user, for example offering it in a form that can be used by other applications. ...
...ed. you can't use them anymore and this document is kept as information only. microdata becomes even more useful when scripts can use it to expose information to the user, for example offering it in a form that can be used by other applications. the document.getitems(
typenames) method provides access to the top-level microdata items. it returns a nodelist containing the items with the specified
types, or all
types if no argument is specified. ...
... other applications. the document.getitems(
typenames) method provides access to the top-level microdata items. it returns a nodelist containing the items with the specified
types, or all
types if no argument is specified. each item is represented in the dom by the element on which the relevant itemscope attribute is found. these elements have their element.itemscope idl attribute set to true. the
type(s) of items can be obtained using the element.item
type idl attribute on the element with the itemscope attribute. methods document . getitems( [
types ] ) returns a nodelist of the elements in the document that create items, that are not part of other items, and that are of the
types given in the argument, if any are listed. ...
...And 8 more matches
Using Performance Timeline - Web APIs
aces can be used to help identify an application's performance bottlenecks. performance extensions performance timeline extends the performance object with three methods that provide different mechanisms to get a set of performance records (metrics), depending on the specified filter criteria. ...
...riteria. the following example show the usage of these methods getentries(), getentriesbyname() and getentriesby
type(). function log(s) { var o = document.getelementsbytagname("output")[0]; o.innerhtml += s + " <br>"; } function do_work (n) { for (var i=0 ; i < n; i++) { var m = math.random(); } } function print_perf_entry(pe) { log("..name: " + pe.name + "; entry
type: " + pe.entry
type + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } function print_performanceentries() { if (performance.mark === undefined) { log("... performance.mark not supported"); return; } // create some performance entries via the mark() and measure() methods performance.mark("begin"); do_work(50000); performance.mark("end"); do_work(...
...ies via the mark() and measure() methods performance.mark("begin"); do_work(50000); performance.mark("end"); do_work(50000); performance.measure("measure1", "begin", "end"); // use getentries() to iterate all entries var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("all entry[" + i + "]"); print_perf_entry(p[i]); } // use getentries(name, entry
type) to get specific entries p = performance.getentries({name : "measure1", entry
type: "measure"}); for (var i=0; i < p.length; i++) { log("begin and measure [" + i + "]"); print_perf_entry(p[i]); } // use getentriesby
type() to get all "mark" entries p = performance.getentriesby
type("mark"); for (var i=0; i < p.length; i++) { log ("mark only [" + i + "]"); print_perf_entr...
...And 8 more matches
RTCPeerConnection - Web APIs
ace returns an array of objects based on the rtciceserver dictionary, which indicates what, if any, ice servers the browser will use by default if none are provided to the rtcpeerconnection in its rtcconfiguration. however, browsers are not required to provide any default ice servers at all.iceconnectionstate read only the read-only property rtcpeerconnection.iceconnectionstate returns an enum of
type rtciceconnectionstate which state of the ice agent associated with the rtcpeerconnection.icegatheringstate read only the read-only property rtcpeerconnection.icegatheringstate returns an enum of
type rtcicegatheringstate that describes connection's ice gathering state. this lets you detect, for example, when collection of ice candidates has finished.localdescription read only the read-only pr...
...ate of the signaling process on the local end of the connection while connecting or reconnecting to another peer. see signaling in lifetime of a webrtc session for more details about the signaling process.event handlersalso inherits event handlers from: eventtargetonaddstream the rtcpeerconnection.onaddstream event handler is a property containing the code to execute when the addstream event, of
type mediastreamevent, is received by this rtcpeerconnection. such an event is sent when a mediastream is added to this connection by the remote peer. the event is sent immediately after the call setremotedescription() and doesn't wait for the result of the sdp negotiation.onconnectionstatechangethe rtcpeerconnection.onconnectionstatechange property specifies an eventhandler which is called to handle ...
...specifies an eventhandler which is called to handle the connectionstatechange event when it occurs on an instance of rtcpeerconnection. this happens whenever the aggregate state of the connection changes.ondatachannel the rtcpeerconnection.ondatachannel property is an eventhandler which specifies a function which is called when the datachannel event occurs on an rtcpeerconnection. this event, of
type rtcdatachannelevent, is sent when an rtcdatachannel is added to the connection by the remote peer calling createdatachannel().onicecandidatethe rtcpeerconnection property onicecandidate property is an eventhandler which specifies a function to be called when the icecandidate event occurs on an rtcpeerconnection instance. this happens whenever the local ice agent needs to deliver a message to the ...
...And 8 more matches
A basic 2D WebGL animation example - Web APIs
rner and the bottom-right corner is at (600, 460). vertex shader first, let's take a look at the vertex shader. its job, as always, is to convert the coordinates we're using for our scene into clipspace coordinates (that is, the system by which (0, 0) is at the center of the context and each axis extends from -1.0 to 1.0 regardless of the actual size of the context). ...
...respectively, since we're drawing in 2d. the standard webgl global gl_position is then set to the transformed and rotated vertex's position. fragment shader next comes the fragment shader. its role is to return the color of each pixel in the shape being rendered. since we're drawing a solid, untextured object with no lighting applied, this is exceptionally simple: <script id="fragment-shader"
type="x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 uglobalcolor; void main() { gl_fragcolor = uglobalcolor; } </script> this starts by specifying the precision of the float
type, as required. then we set the global gl_fragcolor to the value of the uniform uglobalcolor, which is set by the javascript code to the color being used to draw the square. ...
...or; let urotationvector; let avertexposition; // animation timing let previoustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup(): window.addeventlistener("load", startup, false); function startup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ {
type: gl.vertex_shader, id: "vertex-shader" }, {
type: gl.fragment_shader, id: "fragment-shader" } ]; shaderprogram = buildshaderprogram(shaderset); aspectratio = glcanvas.width/glcanvas.height; currentrotation = [0, 1]; currentscale = [1.0, aspectratio]; vertexarray = new float32array([ -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5...
...And 8 more matches
Geometry and reference spaces in WebXR - Web APIs
radians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks. all times and durations in webxr are measured using the domhighrestimestamp
type, which is a double-precision floating-point value specifying the time in milliseconds relative to the starting time. since the value is a floating-point number, it may be accurate to well better than the millisecond level, depending on the platform and hardware. time is primarily used to determine the amount of time that's elapsed since the scene's previous animation frame was drawn. as such the...
...ch as the user's headset, an observer's headset, or a virtual camera. all of this is the browser's responsibility to handle, providing consistent behavior regardless of how capable each of the underlying reference spaces are. no matter how powerful or simple the individual xr device is, code written using webxr will still work, within the limitations of the available hardware. regardless of the
type of reference space you choose, its
type is xrreferencespace or is a
type derived from xrreferencespace. the currently available reference space
types, which are defined by the xrreferencespace
type enumeration, are shown below. the reference space returned by xrsession.requestreferencespace() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicate...
... you choose, its
type is xrreferencespace or is a
type derived from xrreferencespace. the currently available reference space
types, which are defined by the xrreferencespace
type enumeration, are shown below. the reference space returned by xrsession.requestreferencespace() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicates which of the two
types is returned for each reference space
type constant.. reference space descriptors the
types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them. ...
...And 8 more matches
Web APIs
web apis are typically used with javascript, although this doesn't always have to be the case. specifications this is a list of all the apis that are available. ...
... a angle_instanced_arrays abortcontroller abortsignal absoluteorientationsensor abstractrange abstractworker accelerometer addresserrors aescbcparams aesctrparams aesgcmparams aeskeygenparams ambientlightsensor analysernode animation animationeffect animationevent animationplaybackevent animationtimeline arraybufferview attr audiobuffer audiobuffersourcen...
...ransferitem datatransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch document
type doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyimportparams ecdhkeyderiveparams ecdsaparams effecttiming element elementcssinlinest...
...And 8 more matches
Border-radius generator - CSS: Cascading Style Sheets
lect: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; float: right; } javascript content 'use strict'; /** * ui-inputslidermanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('
type', 'text'); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parseint(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); subscribe(obj.topic, function(value) { input.value = value + obj.unit; }); return input; } var sl...
...) { var topic = node.getattribute('data-topic'); var state = node.getattribute('data-state'); var name = node.getattribute('data-label'); var align = node.getattribute('data-text-on'); state = (state === "true"); var checkbox = document.createelement("input"); var label = document.createelement("label"); var id = 'checkbox-' + topic; checkbox.id = id; checkbox.setattribute('
type', 'checkbox'); checkbox.checked = state; label.setattribute('for', id); if (name) { label.classname = 'text'; if (align) label.classname += ' ' + align; label.textcontent = name; } node.appendchild(checkbox); node.appendchild(label); this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addeventlistener('change', function(e) { notify.call...
...{ this.container = document.createelement("div"); this.select = document.createelement("select"); for (var i in units) { var option = document.createelement("option"); option.value = i; option.textcontent = units[i]; this.select.appendchild(option); } this.container.classname = 'dropdown ' + 'unit-' + topic; this.container.appendchild(this.select); } unitselector.proto
type.setvalue = function setvalue(value) { this.salect.value = value; } var radiuscontainer = function radiuscontainer(node) { var radius = document.createelement('div'); var handle = document.createelement('div'); var x = node.getattribute('data-x'); var y = node.getattribute('data-y'); var active = false; this.id = node.id; this.node = node; this.radius = radius; this.handle...
...And 8 more matches
list-style - CSS: Cascading Style Sheets
plied 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 a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside. ...
...s, i.e., elements with display: list-item; . by default this includes <li> elements. because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside. ...
...d, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside. ...
...And 8 more matches
DataView - JavaScript
description endianness multi-byte number formats are represented in memory differently depending on machine architecture — see endianness for an explanation. dataview accessors provide explicit control of how data is accessed, regardless of the executing computer's endianness. var littleendian = (function() { var buffer = new arraybuffer(2); new dataview(buffer).setint16(0, 256, true /* littleendian */); // int16array uses the platform's endianness. ...
...e) parts const left = bigint(dataview.getuint32(byteoffset|0, !!littleendian)>>>0); const right = bigint(dataview.getuint32((byteoffset|0) + 4|0, !!littleendian)>>>0); // combine the two 32-bit values and return return littleendian ? (right<<bigthirtytwo)|left : (left<<bigthirtytwo)|right; } constructor dataview() creates a new dataview object. instance properties dataview.proto
type.buffer the arraybuffer referenced by this view. fixed at construction time and thus read only. dataview.proto
type.bytelength the length (in bytes) of this view from the start of its arraybuffer. fixed at construction time and thus read only. dataview.proto
type.byteoffset the offset (in bytes) of this view from the start of its arraybuffer. fixed at construction time and thus read only. ins...
...nced by this view. fixed at construction time and thus read only. dataview.proto
type.bytelength the length (in bytes) of this view from the start of its arraybuffer. fixed at construction time and thus read only. dataview.proto
type.byteoffset the offset (in bytes) of this view from the start of its arraybuffer. fixed at construction time and thus read only. instance methods dataview.proto
type.getint8() gets a signed 8-bit integer (byte) at the specified byte offset from the start of the view. dataview.proto
type.getuint8() gets an unsigned 8-bit integer (unsigned byte) at the specified byte offset from the start of the view. ...
...And 8 more matches
Strict mode - JavaScript
ally create global variables. in normal javascript mistyping a variable in an assignment creates a new property on the global object and continues to "work" (although future failure is possible: likely, in modern javascript). assignments, which would accidentally create global variables, instead throw an error in strict mode: 'use strict'; // assuming no global variable mis
typedvariable exists mis
typevariable = 17; // this line throws a referenceerror due to the // misspelling of variable second, strict mode makes assignments which would otherwise silently fail to throw an exception. for example, nan is a non-writable global variable. in normal code assigning to nan does nothing; the developer receives no failure feedback. in strict mode assign...
...eveloper receives no failure feedback. in strict mode assigning to nan throws an exception. ...
...n strict mode assigning to nan throws an exception. ...
...And 8 more matches
Web video codec guide - Web media technologies
use on a network. this guide introduces the video codecs you're most likely to encounter or consider using on the web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video. common codecs the following video codecs are those which are most commonly used on the web. for each codec, the containers (file
types) that can support them are also listed. each codec provides a link to a section below which offers additional details about the codec, including specific capabilities and compatibility issues you may need to be aware of. codec name (short) full codec name container support av1 aomedia video 1 mp4, webm avc (h.264) advanced video coding 3gp, mp4, ...
...he video during encoding. effect of codec configuration on encoded output the algorithms used do encode video typically use one or more of a number of general techniques to perform their encoding. generally speaking, any configuration option that is intended to reduce the output size of the video will probably have a negative impact on the overall quality of the video, or will introduce certain
types of artifacts into the video. it's also possible to select a lossless form of encoding, which will result in a much larger encoded file but with perfect reproduction of the original video upon decoding. in addition, each encoder utility may have variations in how they process the source video, resulting in differences in the output quality and/or size. video encoder configuration effects on q...
...e frame rate and the compression algorithm. the same effect can occur with any repeating pattern that moves, such as the ties on a railway line, posts along the side of a road, and so forth. this is a temporal (time-based) aliasing issue; the speed of the rotation interferes with the frequency of the sampling performed during compression or encoding. color edging color edging is a
type of visual artifact that presents as spurious colors introduced along the edges of colored objects within the scene. these colors have no intentional color relationship to the contents of the frame. loss of sharpness the act of removing data in the process of encoding video requires that some details be lost. if enough compression is applied, parts or potentially all of the image could lose sha...
...And 8 more matches
page-mod - Archive of obsolete content
"mozilla.org": the content script "element-getter.js" is attached to the document and runs. it adds a listener to the getelements message. the attach event is sent to the "main.js" code. its event handler sends the getelements message to the content script, and then adds a listener to the gotelement message. the content script receives the getelements message, retrieves all elements of that
type, and for each element sends a gotelement message containing the element's innerhtml. the "main.js" code receives each gotelement message and logs the contents. if multiple documents that match the page-mod's include pattern are loaded, then each document is loaded into its own execution context with its own copy of the content scripts. in this case the listener assigned to onattach is called o...
...ipts to documents loaded into private windows, even if their urls match the pattern you have specified. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. globals constructors pagemod(options) creates a page-mod. parameters options : object required options: name: include
type: string, regexp, or array of (string or regexp) a match pattern string or an array of match pattern strings. these define the documents to which the page-mod applies. at least one match pattern must be supplied. you can specify a url exactly: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://www.iana.org/domains/example/", contentscript: 'window.alert("page ...
...loper.*/, contentscript: 'window.alert("matched!");' }); to specify multiple patterns, pass an array of match patterns: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: ["*.foo.org", "*.bar.com"], contentscript: 'window.alert("matched!");' }); see the match-pattern module for a detailed description of match pattern syntax. optional options: name: contentscriptfile
type: string,array this option specifies one or more content scripts to attach to targeted documents. each script is supplied as a separate file under your add-on's "data" directory, and is specified by a url typically constructed using the url() method of the self module's data object. var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", ...
...And 7 more matches
event/core - Archive of obsolete content
d. also see the tutorial on implementing event targets to get started with this api. ...
...any event target using the on function: var { on, once, off, emit } = require('sdk/event/core'); var target = { name: 'target' }; on(target, 'message', function listener(event) { console.log('hello ' + event); }); on(target, 'data', console.log); an event of a specific
type may be emitted on any event target object using the emit function. this will call all registered listeners for the given
type on the given event target in the same order they were registered. ...
... function listener(event) { console.log('hello ' + event); }); on(target, 'data', console.log); an event of a specific
type may be emitted on any event target object using the emit function. this will call all registered listeners for the given
type on the given event target in the same order they were registered. emit(target, 'message', 'event'); // info: 'hello event' emit(target, 'data', {
type: 'data' }, 'second arg'); // info: [object object] 'second arg' registered event listeners may be removed using off function: off(target, 'message'); emit(target, 'message', 'bye'); // info: 'hello bye' sometimes listener only cares about first event of specific
type. to avoid hassles of removing such listeners there is a convenient once function: once(target, 'load', function() { console...
...And 7 more matches
places/bookmarks - Archive of obsolete content
save() and search() are both asynchronous functions: they synchronously return a placesemitter object, which then asynchronously emits events as the operation progresses and completes. ...
...et bookmarks that // match the second query. the second query's properties // are and'd together, so results that are in the platform's unsorted // bookmarks folder, and are also tagged with 'mozilla', get returned // as well in this query }); globals constructors bookmark(options) creates an unsaved bookmark instance. parameters options : object required options: name
type title string the title for the bookmark. required. url string the url for the bookmark. required. optional options: name
type group group the parent group that the bookmark lives under. defaults to the bookmarks.unsorted group. index number the index of the bookmark wi...
...bookmark lives under. defaults to the bookmarks.unsorted group. index number the index of the bookmark within its group. last item within the group by default. tags set a set of tags to be applied to the bookmark. group(options) creates an unsaved bookmark group instance. parameters options : object required options: name
type title string the title for the group. required. optional options: name
type group group the parent group that the bookmark group lives under. defaults to the bookmarks.unsorted group. index number the index of the bookmark group within its parent group. last item within the group by default. ...
...And 7 more matches
The Essentials of an Extension - Archive of obsolete content
hola mundo</em:name> <em:description>bienvenido a xul school!</em:description> </description> </em:localized> the es-es locale string indicates that this is the spanish (es) localization for spain (es). you can add as many <em:localized> sections as you need. for firefox 2, localizing this file is a little more complicated. we'll discuss localization further ahead in this section. <em:
type>2</em:
type> this specifies that the add-on being installed is an extension. you can read about different possible
types in the install.rdf specification. <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>4.0</em:minversion> <em:maxversion>10.*</em:maxversion> </description> </em:targetapplication> this node specifie...
...nifest, all you need is to add the right path after content in the uri. skin and locale files work in the same way, and you don't need to specify skin names or locale names. so, to access the dtd file in the hello world extension, the chrome path is chrome://xulschoolhello/locale/browseroverlay.dtd. firefox knows what locale to look for. here's an interesting experiment. open a new firefox tab,
type chrome://mozapps/content/downloads/downloads.xul on your location bar and press enter. surprised? you just opened the downloads window in a firefox tab! you can access any chrome file by just typing its uri in the location bar. this can come in handy if you want to inspect script files that are part of firefox, other extensions, or your own. most of these files are opened as text files, with the ...
...ot 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 namespace declarations when you mix different
types of content in the same document, such as xul with html or svg. you may have noticed the naming we use on several places, such as the id xulschoolhello-browser-overlay. this is the namespacing standard that we use to avoid conflicts with firefox and other extensions, as well as making some development tasks easier. we namespace all ids and style classes in overlay elements because they will be...
...And 7 more matches
CSS3 - Archive of obsolete content
yntax and adding the @namespace css at-rule. selectors level 3 recommendation since september 29th, 2011 adds: substring matching attribute selectors, e[attribute^="value"], e[attribute$="value"], e[attribute*="value"] . new pseudo-classes: :target, :enabled and :disabled, :checked, :indeterminate, :root, :nth-child and :nth-last-child, :nth-of-
type and :nth-last-of-
type, :last-child, :first-of-
type and :last-of-
type, :only-child and :only-of-
type,:empty, and :not. pseudo-elements are now characterized by two colons rather than one: :after becomes ::after, :before becomes ::before, :first-letter becomes ::first-letter, and :first-line becomes ::first-line. the new general sibling combinator ( h1~pre ). the next iter...
...::before, :first-letter becomes ::first-letter, and :first-line becomes ::first-line. the new general sibling combinator ( h1~pre ). the next iteration of the selectors specification is already in progress, though it still hasn't reached the first public working draft stage. media queries recommendation since june 19th, 2012 extends the former media
type ( print, screen, … ) to a full language allowing queries on the device media capabilities like only screen and (color) . media queries are not only used in css document but also in some attributes of html elements, like the media attribute of the <link> element. the next iteration of this specification is in the work, allowing to tailor a web site regarding the input methods ava...
... amends the css2.1 font matching algorithm to be closer to what is really implemented. adds: support for downloadable fonts via the css @font-face at-rule. the control of the contextual inter-glyph spacing via the css font-kerning property. the choice of language-specific glyphs via the css font-language-override property. the choice of glyphs with specific open
type features via the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected via the css font-size-adjust property. the choice of alternative font faces using the css font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties. it also...
...And 7 more matches
MenuButtons - Archive of obsolete content
menu buttons menus may be attached to buttons in several ways. both the button and the toolbar button elements support two special
types used for creating menu buttons. a button or toolbarbutton with a
type attribute set to 'menu' creates a button that will open a menu when pressed. an arrow appears on the button next to the label or image indicating to the user that a menu is present. a button or toolbarbutton with a
type attribute set to 'menu-button' creates a button that can be pressed normally. however a segment of the button displays an arrow which, when pressed, opens a menu. ...
...tton next to the label or image indicating to the user that a menu is present. a button or toolbarbutton with a
type attribute set to 'menu-button' creates a button that can be pressed normally. however a segment of the button displays an arrow which, when pressed, opens a menu. in either case, a menupopup element should be placed as a direct child of the button. the 'menu' button the 'menu'
type of button is used when pressing the button alone should just open the menu and not execute a command directly. this works similarly to the menu tag, and would be used to present a set of commands to execute. to create a button of this
type, set the
type attribute of the button to 'menu'. for instance, in the following example, pressing the 'view' button will open a menu which allows the user to ...
...if you do want this indication, you should use a menulist instead. ...
...And 7 more matches
checkbox - Archive of obsolete content
ment 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 accesskey, checked, command, crop, disabled, src, label, preference, tabindex properties accesskey, accessible
type, checked, command, crop, disabled, src, label, tabindex examples <checkbox label="enable javascript" checked="true"/> <checkbox label="enable java" checked="false"/> attributes accesskey
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. checked...
...checked, command, crop, disabled, src, label, tabindex examples <checkbox label="enable javascript" checked="true"/> <checkbox label="enable java" checked="false"/> attributes accesskey
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. checked
type: boolean indicates whether the element is checked or not. use hasattribute() to determine whether this attribute is set instead of getattribute(). ...
...attributes accesskey
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. checked
type: boolean indicates whether the element is checked or not. use hasattribute() to determine whether this attribute is set instead of getattribute(). for buttons, the
type attribute must be set to checkbox or radio for this attribute to have any effect. command
type: id set to the id of a command element that is being observed by 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 b...
...And 7 more matches
iframe - Archive of obsolete content
documents (either html or xul) such as firefox addons, the contents of the frame may have the same permissions as firefox itself. this can be a serious security vulnerability, for example if you use src="http://...". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...refox addons, the contents of the frame may have the same permissions as firefox itself. this can be a serious security vulnerability, for example if you use src="http://...". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...if this is not set, the loaded document has the same access as th...
...And 7 more matches
CSS - Archive of obsolete content
content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor.-ms-content-zoom-limit-minthe -ms-content-zoom-limit-min css property is a microsoft extension that specifies the minimum zoom factor.-ms-content-zoom-snapthe -ms-content-zoom-snap css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-snap-
type and -ms-content-zoom-snap-points properties.-ms-content-zoom-snap-pointsthe -ms-content-zoom-snap-points css property is a microsoft extension that specifies where zoom snap-points are located.-ms-content-zoom-snap-
typethe -ms-content-zoom-snap-
type css property is a microsoft extension that specifies how zooming is affected by defined snap-points.-ms-content-zoomingthe -ms-content-zooming css pr...
...nts-x css property is a microsoft extension that specifies where snap-points will be located along the x-axis.-ms-scroll-snap-points-ythe -ms-scroll-snap-points-y css property is a microsoft extension that specifies where snap-points will be located along the y-axis.-ms-scroll-snap-xthe -ms-scroll-snap-x css shorthand property is a microsoft extension that specifies values for the -ms-scroll-snap-
type and -ms-scroll-snap-points-x properties.-ms-scroll-snap-ythe -ms-scroll-snap-x css shorthand property is a microsoft extension that specifies values for the -ms-scroll-snap-
type and -ms-scroll-snap-points-y properties.-ms-scroll-translationthe -ms-scroll-translation css property is a microsoft extension that specifies whether vertical-to-horizontal scroll wheel translation occurs on the specified...
...ining frames in parent documents, which are the full-screen element in their own documents. however, those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input
type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input
type="checkbox"> and <input
type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input
type="text"> text control that clears the current value. this pseudo-element is non-standard, supported only in in...
...And 7 more matches
The box model - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge 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 css box model, what makes up the box model and how to switch to the alternate model. block and inline boxes in css we broadly have two
types of boxes — block boxes and inline boxes. these characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page: if a box is defined as a block, it will behave in the following ways: the box will break onto a new line. the box will extend in the inline direction to fill the space available in its container. in most cases this means that the bo...
...k onto a new line. the box will extend in the inline direction to fill the space available in its container. in most cases this means that the box will become as wide as its container, filling up 100% of the space available. the width and height properties are respected. padding, margin and border will cause other elements to be pushed away from the box unless we decide to change the display
type to inline, elements such as headings (e.g. <h1>) and <p> all use block as their outer display
type by default. if a box has an outer display
type of inline, then: the box will not break onto a new line. the width and height properties will not apply. vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box. horizontal padding, margin...
...and height properties will not apply. vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box. horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box. the <a> element, used for links, <span>, <em> and <strong> are all examples of elements that will display inline by default. ...
...And 7 more matches
CSS FAQ - Learn web development
in this article, you'll find some frequently-asked questions (faqs) about css, along with answers that may help you on your quest to become a web developer. why doesn't my css, which is valid, render correctly? ...
... this article, you'll find some frequently-asked questions (faqs) about css, along with answers that may help you on your quest to become a web developer. why doesn't my css, which is valid, render correctly? ...
...orrect and modern doc
type declaration at the start of your html will improve browser standards compliance. modern browsers have two main rendering modes: quirks mode: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers. documents with an incomplete, incorrect, or missing doc
type declaration or a known doc
type declaration in common use before 2001 will be rendered in quirks mode. standards mode: the browser attempts to follow the w3c standards strictly. new html pages are expected to be designed for standards-compliant browsers, and as a result, pages with a modern doc
type declaration will be rendered with standards mode. gecko-based browsers, have a third almost stand...
...And 7 more matches
CSS property compatibility table for form controls - Learn web development
rty across browsers. you may still face strange side effects in certain edge cases. partial while the property works, you may frequently face strange side effects or inconsistencies. you should probably avoid these properties unless you master those side effects first. no the property simply doesn't work or is so inconsistent that it's not reliable. n.a. the property has no meaning for this
type of widget. rendering for each property there are two possible renderings: n (normal) indicates that the property is applied as it is t (tweaked) indicates that the property is applied with the extra rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables global be...
...this property is supported inconsistently across browsers and you should avoid it. text-decoration this property is not supported by opera on form widgets. text-overflow opera, safari, and ie9 do not support this property on form widgets. text-shadow opera does not support text-shadow on form widgets and ie9 does not support it at all. text fields see the text, search, and password input
types. property n t note css box model width yes yes height partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields. therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. on windows 7, internet explorer 9 does ...
... to be able to apply this property to search fields. on windows 7, internet explorer 9 does not apply the border unless background:none is applied. on opera the border-radius property is applied only if an explicit border is set. box-shadow no partial[1] ie9 does not support this property. buttons see the button, submit, and reset input
types and the <button> element. property n t note css box model width yes yes height partial[1] yes this property is not applied on webkit based browsers on mac osx or ios. border partial yes margin yes yes padding partial[1] yes this property is n...
...And 7 more matches
Your first form - Learn web development
se attributes work in our sending form data article later on. for now, add the above <form> element into your html <body>. the <label>, <input>, and <textarea> elements our contact form is not complex: the data entry portion contains three text fields, each with a corresponding <label>: the input field for the name is a single-line text field. ...
...he input field for the e-mail is an input of
type email: a single-line text field that accepts only e-mail addresses. the input field for the message is a <textarea>; a multiline text field. in terms of html code we need something like the following to implement these form widgets: <form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">name:</label> <input
type="text" id="name" name="user_name"> </li> <li> <label for="mail">e-mail:</label> <input
type="email" id="mail" name="user_email"> </li> <li> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> </form> update your form code to look like the above. the <li> elements are there to conveniently structure our code and make styling...
...t to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users. you'll find further details of form labels in how to structure a web form. on the <input> element, the most important attribute is the
type attribute. this attribute is extremely important because it defines the way the <input> element appears and behaves. you'll find more about this in the basic native form controls article later on. in our simple example, we use the value <input/text> for the first input — the default value for this attribute. it represents a basic single-line text field that accepts any kind of text input. f...
...And 7 more matches
HTML text fundamentals - Learn web development
ht: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish. ...
..."a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish. ...
...scribed above. it is a good idea to use the relevant html element for the job. lists now let's turn our attention to lists. lists are everywhere in life—from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! lists are everywhere on the web, too, and we've got three different
types to worry about. unordered unordered lists are used to mark up lists of items for which the order of the items doesn't matter—let's take a shopping list as an example. milk eggs bread hummus every unordered list starts off with a <ul> element—this wraps around all the list items: <ul> milk eggs bread hummus </ul> the last step is to wrap each list item in a <li> (list item) element: <u...
...And 7 more matches
From object to iframe — other embedding technologies - Learn web development
previous overview: multimedia and embedding next by now you should really be getting the hang of embedding things into your web pages, including images, video and audio. at this point we'd like to take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content
types into your webpages: the <iframe>, <embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology that is on the way out, but which you'll still see semi-regularly. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and the previous articles in t...
...show solution button to see an answer. ...
...de <h2>live output</h2> <div class="output" style="min-height: 250px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 100px;"> </textarea> <div class="playable-buttons"> <input id="reset"
type="button" value="reset"> <input id="solution"
type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const ou...
...And 7 more matches
Graceful asynchronous programming with Promises - Learn web development
mpleted. however, we don't want to do this. our code doesn't care when the fetch() operations are done. instead, what we want is the loaded data. that means we want to run the promise.all() block when we get back usable blobs representing the images, and a usable text string. ...
...ns we want to run the promise.all() block when we get back usable blobs representing the images, and a usable text string. ...
...lobs representing the images, and a usable text string. we can write a function that does this; add the following inside your <script> element: function fetchanddecode(url,
type) { return fetch(url).then(response => { if(!response.ok) { throw new error(`http error! status: ${response.status}`); } else { if(
type === 'blob') { return response.blob(); } else if(
type === 'text') { return response.text(); } } }) .catch(e => { console.log(`there has been a problem with your fetch operation for resource "${url}": ` + e.message); }); } this looks a bit complex, so let's run through it step by step: first of all, we define the function, passing it a url and a string representing the
type of resource it is fetching. inside t...
...And 7 more matches
Introduction to events - Learn web development
e runway is clear for take off, a signal is communicated to the pilot. as a result, the plane can safely takeoff. in the case of the web, events are fired inside the browser window, and tend to be attached to a 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) th...
...(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } in this code, we store a reference to the button inside a constant called btn, using the document.queryselector() function. we also define a function that returns a random number. the third part of the code is the event handler. the btn constant points to a <button> element, and this
type of object has a number of events that can fire on it, and therefore, event handlers available. we are listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random rgb color and sets the <body> background-color equal to it. this code is run whenever the click event fires on the <button> element, that is,...
...ent.queryselector('button'); btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } the onclick property is the event handler property being used in this situation. it is essentially a property like any other available on the button (e.g. btn.textcontent, or btn.style), but it is a special
type — when you set it to be equal to some code, that code is run when the event fires on the button. you could also set the handler property to be equal to a named function name (like we saw in build your own function). the following works just the same: const btn = document.queryselector('button'); function bgchange() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(25...
...And 7 more matches
Client-Server Overview - Learn web development
...
... request, https://developer.mozilla.org/). http requests can also have a body, but it is empty in this case. the response the first part of the response for this request is shown below. the header contains information like the following: the first line includes the response code 200 ok, which tells us that the request succeeded. we can see that the response is text/html formatted (content-
type). we can also see that it uses the utf-8 character set (content-
type: text/html; charset=utf-8). the head also tells us how big it is (content-length: 41823). at the end of the message we see the body content — which contains the actual html returned by the request. http/1.1 200 ok server: apache x-backend-server: developer1.webapp.scl3.mozilla.com vary: accept,cookie, accept-encoding cont...
...we can also see that it uses the utf-8 character set (content-
type: text/html; charset=utf-8). the head also tells us how big it is (content-length: 41823). at the end of the message we see the body content — which contains the actual html returned by the request. ...
...And 7 more matches
Server-side web frameworks - Learn web development
rmation as "post data" within the body of the request. the http request may also include information about the current session or user in a client-side cookie. web frameworks provide programming-language-appropriate mechanisms to access this information. for example, the httprequest object that django passes to every view function contains methods and properties for accessing the target url, the
type of request (e.g. an http get), get or post parameters, cookie and session data, etc. django can also pass information encoded in the structure of the url by defining "capture patterns" in the url mapper (see the last code fragment in the section above). abstract and simplify database access websites use databases to store information both to be shared with users, and about users. web frameworks...
...nal mapper (orm). using an orm has two benefits: you can replace the underlying database without necessarily needing to change the code that uses it. this allows developers to optimize for the characteristics of different databases based on their usage. basic validation of data can be implemented within the framework. ...
...an email field would only allow valid email addresses). the field definitions may also specify their maximum size, default values, selection list options, help text for documentation, label text for forms etc. ...
...And 7 more matches
Ember app structure and componentization - Learn web development
too much effort to get our html looking like a fully-featured to-do list app. ...
... placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all"
type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle"
type="checkbox" > <label>buy movie tickets</label> <button
type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> <li> <div class="view"> <input aria-label="toggle the completion of this todo" ...
...bel>buy movie tickets</label> <button
type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle"
type="checkbox" > <label>go to movie</label> <button
type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> </ul> </section> <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </s...
...And 7 more matches
Componentizing our Svelte app - Learn web development
p. let's declare the todo prop and move the code from the todos component. just for now, we'll replace the call to removetodo with an alert. we'll add that functionality back in later on. create a new component file — components/todo.svelte. ...
.... put the following contents inside this file: <script> export let todo </script> <div class="stack-small"> <div class="c-cb"> <input
type="checkbox" id="todo-{todo.id}" on:click={() => todo.completed = !todo.completed} checked={todo.completed} /> <label for="todo-{todo.id}" class="todo-label">{todo.name}</label> </div> <div class="btn-group"> <button
type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button
type="button" class="btn btn__danger" on:click={() => alert('not implemented')}> delete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> now we need to import our todo component into todos.svelte. go to this file now, and add the following import st...
...'ll edit our todo component to emit a remove event, passing the todo being removed as additional information. first of all, add the following lines to the top of the todo component's <script> section: import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() now update the delete button in the markup section of the same file to look like so: <button
type="button" class="btn btn__danger" on:click={() => dispatch('remove', todo)}> delete <span class="visually-hidden">{todo.name}</span> </button> with dispatch('remove', todo) we are emitting a remove event, and passing as additional data the todo being deleted. the handler will be called with an event object available, with the additional data available in the event.detail property. now w...
...And 7 more matches
Creating our first Vue component - Learn web development
needs to wrap everything inside the template section (this will change when vue 3 comes out). we'll use a <div> for that root element. add an empty <div> inside your component template now. inside that <div>, let's add a checkbox and a corresponding label. add an id to the checkbox, and a for attribute mapping the checkbox to the label, as shown below. <template> <div> <input
type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">my todo item</label> </div> </template> using todoitem inside our app this is all fine, but we haven’t added the component to our app yet, so there’s no way to test it and see if everything is working. let’s add it now. open up app.vue again. at the top of your <script> tag, add the following to impor...
... to register props: the first way is to just list props out as an array of strings. each entry in the array corresponds to the name of a prop. the second way is to define props as an object, with each key corresponding to the prop name. listing props as an object allows you to specify default values, mark props as required, perform basic object typing (specifically around javascript primitive
types), and perform simple prop validation. note: prop validation only happens in development mode, so you can't strictly rely on it in production. additionally, prop validation functions are invoked before the component instance is created, so they do not have access to the component state (or other props). for this component, we’ll use the object registration method. go back to your todoit...
... value should be an object with 2 properties (or props, as they are called in the context of being available to the components). the first is a required property, which will have a value of true. this will tell vue that we expect every instance of this component to have a label field. vue will warn us if a todoitem component does not have a label field. the second property we'll add is a
type property. set the value for this property as the javascript string
type (note the capital "s"). this tells vue that we expect the value of this property to be a string. now on to the done prop. first add a default field, with a value of false. this means that when no done prop is passed to a todoitem component, the done prop will will have a value of false (bear in mind that this is n...
...And 7 more matches
Client-side tooling overview - Learn web development
overview: understanding client-side tools next in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand what
types of client-side tooling there are, and how to find tools and get help with them. overview of modern tooling writing software for the web has become more sophisticated through the ages. although it is still entirely reasonable to write html, css, and javascript "by hand" there is now a wealth of tools that developers can use to speed up the process of building a web site, or app. there are...
...l, and gradually work your way up to more advanced uses. the modern tooling ecosystem today's modern developer tooling ecosystem is huge, so it's useful to have a broad idea of what main problems the tools are solving. if you jump on your favourite search engine and look for "front-end developer tools" you're going to hit a huge spectrum of results ranging from text editors, to browsers, to the
type of pens you can use to take notes. though your choice of code editor is certainly a tooling choice, this series of articles will go beyond that, focusing on developer tools that help you produce web code more efficiently. from a high-level perspective, you can put client-side tools into the following three broad categories of problems to solve: safety net — tools that are useful during you...
...tion available to install so that all their developers are all using the same processes. this includes anything that makes your development process easier with respect to generating stable and reliable code. safety net tooling should also help you either prevent mistakes or correct mistakes automatically without having to build your code from scratch each time. a few very common safety net tool
types you will find being used by developers are as follows. linters linters are tools that check through your code and tell you about any errors that are present, what error
types they are, and what code lines they are present on. often linters can be configured to not only report errors, but also report any violations of a specified style guide that you team might be using (for example code that i...
...And 7 more matches
Error codes returned by Mozilla APIs
pects an absolute path and vice versa. ns_error_file_unresolvable_symlink (0x80520002) an attempt was made to access a symbolic link to a file or directory which does not exist. ns_error_file_execution_failed (0x80520003) an attempt to launch or execute a file failed because the file is not executable. nsifile.isexecutable() may be used to check if a file is executable. ns_error_file_unknown_
type (0x80520004) an call was made to nsifile.create() with an invalid
type. only normal_file_
type and directory_
type are allowed. ns_error_file_destination_not_dir (0x80520005) an attempt was made to copy or move a file to a destination that is not a directory. ns_error_file_target_does_not_exist (0x80520006) an attempt was made to reference a file that does not exist for copy/move, checking its...
...ted_err (0x80530009) the operation is not supported. ns_error_dom_inuse_attribute_err (0x8053000a) ns_error_dom_invalid_state_err (0x8053000b) an attempt was made to use an object which is no longer usable. ns_error_dom_syntax_err (0x8053000c) an attribute value or property was set to an invalid value. ns_error_dom_invalid_modification_err (0x8053000d) an attempt was made to modify the
type of the attribute. ns_error_dom_namespace_err (0x8053000e) a namespace was not valid. for instance, this error can occur when an invalid character was used in a namespace uri. ns_error_dom_invalid_access_err (0x8053000f) a attempt was made to access a value that was not allowed. ns_error_dom_range_bad_boundarypoints_err (0x805c0001) the boundary points of a range are invalid. ns_error_dom_r...
... ns_error_dom_namespace_err (0x8053000e) a namespace was not valid. for instance, this error can occur when an invalid character was used in a namespace uri. ns_error_dom_invalid_access_err (0x8053000f) a attempt was made to access a value that was not allowed. ns_error_dom_range_bad_boundarypoints_err (0x805c0001) the boundary points of a range are invalid. ...
...And 7 more matches
How to Report a Hung Firefox
ll trigger the crash reporter: download crashfirefox.exe here (source code). running this tool will search for firefox.exe and inject crashing code into it. the tool also has command-line options to kill processes with other names or by process id. run the crashfirefox.exe tool. the firefox crash report ui should appear. please check the box to send the crash report to mozilla start firefox.
type "about:crashes" in the url bar and click on the top listing. the crash report should look something like this report, which is an example of bug 1132241. create a new bug report at bugzilla.mozilla.org using this link. linux and mac on linux and mac (firefox >=27), sending sigabrt to a process will trigger the crash reporter. you can use any process monitoring tool to find the firefox proces...
... trigger the crash reporter. you can use any process monitoring tool to find the firefox process id (pid). then, in a terminal, kill firefox using a command such as this: # replace 31042 with the pid of firefox found above kill -n sigabrt 31042 # on osx kill -s sigabrt 31042 the firefox crash report ui should appear. please check the box to send the crash report to mozilla start firefox.
type "about:crashes" in the url bar and click on the top listing. create a new bug report at bugzilla.mozilla.org using this link. all os as long as you do not need to be in firerfox's safe mode, a user friendly method of crashing firefox is to install and use the addon crash me now! (simple) use the menu button to find the crash me icon and click the icon. firefox crash report ui should appe...
...ug report at bugzilla.mozilla.org using this link. all os as long as you do not need to be in firerfox's safe mode, a user friendly method of crashing firefox is to install and use the addon crash me now! (simple) use the menu button to find the crash me icon and click the icon. firefox crash report ui should appear. please check the box to send the crash report to mozilla start firefox.
type "about:crashes" in the url bar and click on the top listing. create a new bug report at bugzilla.mozilla.org using this link. another way to trigger a crash in a hung tab is to run the following script in the browser console (opened after selecting the hung tab): let wm = cc["@mozilla.org/appshell/window-mediator;1"]. getservice(ci.nsiwindowmediator); let win = wm.getmostrecentwindo...
...And 7 more matches
Encrypt Decrypt MAC Keys As Session Objects
"-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey 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 } command
type;
typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } header
type; /* * 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 '...
...nd .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_
typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_
type mechanism, int keysize, secitem *k...
... unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, header
type type, prfiledesc *outfile) { secstatus rv; char header[40]; char trailer[40]; char *outstring = null; switch (
type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer);...
...And 7 more matches
Encrypt and decrypt MAC using token
"-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey 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 } command
type;
typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } header
type; /* * 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 '...
...nd .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_
typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_
type mechanism, int keysize, secitem *k...
... unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, header
type type, prfiledesc *outfile) { secstatus rv; char header[40]; char trailer[40]; char *outstring = null; switch (
type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer);...
...And 7 more matches
NSS Sample Code Sample_1_Hashing
nss sample code 1: hashing a file. this is an example program that demonstrates how to compute the hash of a file and save it to another file. this program illustrates the use of nss message apis. sample code 1 /* nspr headers */ #include <prprf.h> #include <pr
types.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h>
typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag. * returns nul...
...{ pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int h
type; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t
type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t
type"); fprintf(stderr, "%-20s ", ""); for (h
type = 0; h
type < hash_algtotal; h
type++) { fprintf(stderr, hash_names[h
type].hashname); if...
... int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t
type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t
type"); fprintf(stderr, "%-20s ", ""); for (h
type = 0; h
type < hash_algtotal; h
type++) { fprintf(stderr, hash_names[h
type].hashname); if (h
type == (hash_algtotal - 2)) fprintf(stderr, " or "); else if (h
type != (hash_algtotal - 1)) fprintf(stderr, ", "); } fprintf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an input file to use (default is stdin)\n", "< input"); fprintf(stderr, "%-20s define an output file to use (default is stdout)\n", "> output"); ...
...And 7 more matches
Hashing - sample 1
e 1: hashing. the nss same code below computes the hash of a file and saves it to another file, this illustrates the use of nss message apis. /* 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/. ...
...his 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/. */ /* nspr headers */ #include <prprf.h> #include <pr
types.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> #include <nss.h>
typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag. * returns null if...
... pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int h
type; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t
type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t
type"); fprintf(stderr, "%-20s ", ""); for (h
type = 0; h
type < hash_algtotal; h
type++) { fprintf(stderr, hash_names[h
type].hashname); if...
...And 7 more matches
EncDecMAC using token object - sample 3
--" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey 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 } command
type;
typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } header
type; /* * 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 de...
...le and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_
typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_
type mechanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *k...
...nsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen, maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, header
type type, prfiledesc *outfile) { secstatus rv; char header[40]; char trailer[40]; char *outstring = null; switch (
type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); break; case iv: strcpy(header, iv_header); strcpy(trailer, iv_trailer); break; case mac: strcpy(header, mac_header); str...
...And 7 more matches
sslfnc.html
or a model socket. ssl_configsecureserver configures a listen socket with the information needed to handshake as an ssl server. ssl_configsecureserver requires the certificate for the server and the server's private key. the arguments are copied. ...
...del socket. ssl_configsecureserver configures a listen socket with the information needed to handshake as an ssl server. ssl_configsecureserver requires the certificate for the server and the server's private key. the arguments are copied. ...
...these values are currently valid: kt_rsa kt_dh kt_fortezza returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. use pr_geterror to obtain the error code. ...
...And 7 more matches
NSS Tools modutil
ecessary 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 build on solaris 2.5.1 (sunos 5.5.1) and windows nt 4.0. syntax to run the security module database tool,
type the command modutil option [arguments] where option 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. to see a usage string, issue the command without options. options and arguments options specify an action. option arguments modify an action. the options and arguments ...
... this example creates a set of security management database files in the specified directory: modutil -create -dbdir c:\databases the security module database tool displays a warning: warning: performing this operation while communicator is running couldcause corruption of your security databases. if communicator iscurrently running, you should exit communicator before continuing thisoperation.
type 'q <enter>' to abort, or <enter> to continue: after you press enter, the tool displays the following: creating "c:\databases\key3.db"...done.creating "c:\databases\cert8.db"...done.creating "c:\databases\secmod.db"...done. displaying module information this example gives detailed information about the specified module: modutil -list "netscape internal pkcs #11 module" -dbdir c:\database...
...--------name: netscape internal pkcs #11 modulelibrary file: **internal only module**manufacturer: netscape communications corp description: communicator internal crypto svcpkcs #11 version 2.0library version: 4.0cipher enable flags: nonedefault mechanism flags: rsa:dsa:rc2:rc4:des:sha1:md5:md2slot: communicator internal cryptographic services version 4.0manufacturer: netscape communications corp
type: softwareversion number: 4.1firmware version: 0.0status: enabledtoken name: communicator generic crypto svcstoken manufacturer: netscape communications corp token model: libsec 4.0 token serial number: 0000000000000000token version: 4.0token firmware version: 0.0access: write protectedlogin
type: public (no login required)user pin: not initializedslot: communicator user private key and certificat...
...And 7 more matches
JS::MutableHandle
method description const t &get() const returns *ptr. ...
... js::handle<t> and includes a |set(const t &v)| method to allow updating the value of the referenced js::rooted<t>. a js::mutablehandle<t> can be created from a js::rooted<t> by using |js::rooted<t>::operator&()|. if you want to add additional methods to js::mutablehandle for a specific specialization, define a js::mutablehandlebase<t> specialization containing them. ...
...s a |set(const t &v)| method to allow updating the value of the referenced js::rooted<t>. a js::mutablehandle<t> can be created from a js::rooted<t> by using |js::rooted<t>::operator&()|. if you want to add additional methods to js::mutablehandle for a specific specialization, define a js::mutablehandlebase<t> specialization containing them. ...
...And 7 more matches
Using the Places history service
interfaces. the places history service ("navhistory") implements these history interfaces: nsiglobalhistory2: basic add page, is visited functionality used by the docshell when visiting and rendering pages. nsiglobalhistory3: adds extra functions for dealing with redirects and hints for rendering (gecko flags). nsibrowserhistory: adds functions used by the basic browser like marking pages as
typed in the url bar, and removing pages as from the history interface. nsinavhistoryservice: complex query functions, more fine-grained getters and setters. nsiautocompletesearch: url-bar autocomplete from history from 1.9.1 (firefox3.1) on, don't use any places service on (or after) quit-application has been notified, since the database connection will be closed to allow the last sync, and chang...
...notified, since the database connection will be closed to allow the last sync, and changes will most likely be lost. use quit-application-granted instead. differences from previous implementations the previous nsglobalhistory service stored one entry for each page in history. this entry contained the url, title, visit count, last visit date, first visit date, host name, last referrer, flags for
typed, hidden, and gecko flags (gecko flags is trunk only). the navhistory service has broken this into two tables (see history service design). the main url table stores the information about the page: url, host name, title, visit count, hidden, and
typed. stored separately is the information specific to each visit. this information is called a "visit" in this document and in the code. a visit conta...
...e has broken this into two tables (see history service design). the main url table stores the information about the page: url, host name, title, visit count, hidden, and
typed. stored separately is the information specific to each visit. this information is called a "visit" in this document and in the code. a visit contains a reference to the url table for the page, the visit date, the transition
type (
typed, click, redirect, bookmark, etc.), a reference to the referring visit, and the session id. this separation of the global page information and the visit allows us to store information about each time the page was visited instead of just the last time. using the referrer information in each visit, the browsing path can be reconstructed at any time. the "session id" allows these paths to be...
...And 7 more matches
Mozilla internal string guide
the purpose of this document, we will refer to the 16-bit string classes in class documentation. every 16-bit class has an equivalent 8-bit class: naming convention for wide and narrow string classes wide narrow nsastring nsacstring nsstring nscstring nsautostring nsautocstring etc... the string classes distinguish, as part of the
type hierarchy, between strings that must have a null-terminator at the end of their buffer (ns[c]string) and strings that are not required to have a null-terminator (nsa[c]string). nsa[c]string is the base of the string classes (since it imposes fewer requirements) and ns[c]string is a class derived from it. functions taking strings as parameters should generally take one of these four
types. in ord...
...se on the stack), leading to a fourth ownership model: storage within an auto string's stack buffer auto strings will prefer reference counting an existing reference-counted buffer over their stack buffer, but will otherwise use their stack buffer for anything that will fit in it. there are a number of additional string classes: classes which exist primarily as constructors for the other
types, particularly nsdependent[c]string and nsdependent[c]substring. these
types are really just convenient notation for constructing an ns[c]s[ubs]tring with a non-default ownership mode; they should not be thought of as different
types. nsliteral[c]string which should rarely be constructed explicitly but usually through the ""_ns and u""_ns user-defined string literals. nsliteral[c]string is trivi...
...ng classes the list below describes the main base classes. once you are familiar with them, see the appendix describing what class to use when. nsastring/nsacstring: the abstract base class for all strings. it provides an api for assignment, individual character access, basic manipulation of characters in the string, and string comparison. this class corresponds to the xpidl astring parameter
type. nsastring is not necessarily null-terminated. nsstring/nscstring: builds on nsastring by guaranteeing a null-terminated storage. this allows for a method (.get()) to access the underlying character buffer. the remainder of the string classes inherit from either nsastring or nsstring. thus, every string class is compatible with nsastring. since every string derives from nsastring (or nsacstri...
...And 7 more matches
nsIBrowserHistory
inherits from: nsiglobalhistory2 last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/nav-history-service;1. ...
...wserhistory = 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 markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 void markpageas
typed(in nsiuri auri); obsolete since gecko 22.0 void registeropenpage(in nsiuri auri); obsolete since gecko 9.0 void removeallpages(); void removepage(in nsiuri auri); void removepages([array, size_is(alength)] in nsiuri auris, in unsigned long alength, in boolean adobatchnotify); void removepagesbytimeframe(in long long abegintime, in long long aendtime...
...for performance reasons this does not return the real number of entries. read only. lastpagevisited obsolete...
...And 7 more matches
nsICategoryManager
let categorymanager...
...(enumerator.hasmoreelements()) { var item = enumerator.getnext(); var entry = item.queryinterface(components.interfaces.nsisupportscstring) entries.push(entry.tostring()); } entries.sort(); var entriesstring = entries.join("\n"); dump(entriesstring + "\n"); disable currently loaded plugins by
type this snippet here shows how to disable plugins that are currently loaded for the file
type of pdf. the second portion of this snippet disables plugins from loading in the future, it does not user the category manager but it is included for completness of the example. var content_
type = 'application/pdf'; // update the category manager in case the plugins are already loaded. let categorymanager = cc['@mozilla.org/categorymanager;1']; categorymanager.getservice(ci.nsicategorymanager).d...
... plugins from loading in the future, it does not user the category manager but it is included for completness of the example. var content_
type = 'application/pdf'; // update the category manager in case the plugins are already loaded. ...
...And 7 more matches
nsIDOMXPathResult
dom/interfaces/xpath/nsidomxpathresult.idlscriptable this interface describes an xpath result returned by nsidomxpathevaluator or document.evaluate inherits from: nsisupports last changed in gecko 1.7 method overview nsidomnode iteratenext(); nsidomnode snapshotitem(in unsigned long index); attributes attribute
type description booleanvalue boolean if result
type is boolean_
type, the boolean value. read only. invaliditeratorstate boolean true if the iterator state has become invalid. for example, modifying a node invalidates the iterator. read only. numbervalue double if result
type is number_
type, the numeric value of the xpath value. read only. result
type unsigned short the
type ...
...pe is boolean_
type, the boolean value. read only. invaliditeratorstate boolean true if the iterator state has become invalid. for example, modifying a node invalidates the iterator. read only. numbervalue double if result
type is number_
type, the numeric value of the xpath value. read only. result
type unsigned short the
type of result; can be any of the
type constants except any_
type. read only. singlenodevalue nsidomnode if result
type is any_unordered_node_
type or first_ordered_node_
type, a single dom node. read only. snapshotlength unsigned long if result
type is unordered_node_snapshot_
type or ordered_node_snapshot_
type, the length of the snapshort array. read only. ...
...he
type constants except any_
type. read only. singlenodevalue nsidomnode if result
type is any_unordered_node_
type or first_ordered_node_
type, a single dom node. read only. snapshotlength unsigned long if result
type is unordered_node_snapshot_
type or ordered_node_snapshot_
type, the length of the snapshort array. read only. stringvalue domstring if result
type is string_
type, the boolean value. read only. constants
type constants constant value description any_
type 0 used when evaluating an xpath expression; the evaluator will return the most appropriate
type. number_
type 1
type is a single number. string_
type 2
type is a single string. ...
...And 7 more matches
nsIStreamConverter
netwerk/streamconv/public/nsistreamconverter.idlscriptable provides an interface to implement when you have code that converts data from one
type to another. inherits from: nsistreamlistener last changed in gecko 1.7 suppose you had code that converted plain text into html. you could implement this interface to allow everyone else to use your conversion logic using a standard api. stream converter users there are currently two ways to use a stream converter: synchronous: stream to stream. you can supply the service with a stream of
type x and it will convert it to your desired output
type and return a converted (blocking) stream to you. asynchronous: nsistreamlistener to nsistreamlistener. you can supply data directly to the converter by calling it's nsistreamlistener.ondata...
... stream converter suppliers registering a stream converter: stream converter registration is a two step process. ...
... stream converter suppliers registering a stream converter: stream converter registration is a two step process. ...
...And 7 more matches
nsIVariant
xpcom/ds/nsivariant.idlscriptable 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. ...
...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. ...
...native code only! methods native code only!getasacstring acstring getasacstring(); parameters none. return value the value is converted to an 8-bit string in the iso-8859-1 character set. if the value was utf16 then the high bits are lost. if the value was utf8 then it is converted to utf16 and the high bits are ...
...And 7 more matches
Activity Manager examples
of the related interfaces. if the default implementation of nsiactivityprocess, nsiactivitywarning and nsiactivityevent are not sufficient for the activity initiator, activity developers can provide their own components to extend the capabilities. default implementations can be found in nsactivity.js file. if activity developers would like to extend the default ui representation of the activity
types, they can provide their own xbl elements for their own activity
types. all custom activity xbl elements should inherit from "activity-base" binding. for xbl samples please see activity.xml and activitybinding.css files. showing a user-defined activity in the activity manager window the following sample will show a process and an event for junk processing in the activity manager window. // st...
...etservice(nsiam); let process = components.classes["@mozilla.org/activity-process;1"].createinstance(nsiap); // assuming folder is an instance of nsimsgfolder interface // localization is omitted, initiator is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.context
type = "account"; // group this activity by account process.contextobj = folder.server; // account in question gactivitymanager.addactivity(process); // step 2: showing some progress let percent = 50; process.setprogress(percent, "junk processing 25 of 50 messages", 25, 50); // step 3: removing the process and adding an event using process' attributes process.state = components.interfaces.nsi...
... // step 1: create a nsiactivitycancelhandler implementation function canceljunkpr...
...And 7 more matches
CData
a cdata object represents a c value or function located in memory. method overview methods available on all cdata objects cdata address() string tosource() string tostring() properties properties of all cdata objects property
type description constructor c
type the data
type of the cdata object, as a c
type. read only. note: this is never c
types.void_t or an array
type with an unspecified length. ...
... string tostring() properties properties of all cdata objects property
type description constructor c
type the data
type of the cdata object, as a c
type. read only. note: this is never c
types.void_t or an array
type with an unspecified length. value object the javascript equivalent of the cdata object's value. this will throw a
typeerror exception if the value can't be converted. methods available on all cdata objects address() returns a cdata object of the pointer
type c
types.pointer
type(dataobject.constructor) whose value points to the c object referred to by the object. this provides a way to get a pointer to the actual data of the c value represented by the cdata object. cdata address() parameters none. ret...
...verted. methods available on all cdata objects address() returns a cdata object of the pointer
type c
types.pointer
type(dataobject.constructor) whose value points to the c object referred to by the object. this provides a way to get a pointer to the actual data of the c value represented by the cdata object. cdata address() parameters none. return value a cdata object of the pointer
type c
types.pointer
type(dataobject.constructor) whose value points to the c object referred to by the object. tosource() returns the string "t(arg)", where t and arg are implementation-defined javascript expressions intended to represent the
type of the cdata object and its value, respectively. string tosource() parameters none. return value a string that, ideally, should be able to be evaluat...
...And 7 more matches
Debugger.Frame - Firefox Developer Tools
s it triggers. even though the debuggee and debugger share the same javascript stack, frames pushed for spidermonkey’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.proto
type.call, debugger.frame.proto
type.eval, and so on. while invocation functions differ in the code to be run and how to pass values to it, they all follow this general procedure: letolder be the youngest visible frame on the stack, or null if there is no such frame. (this is never one of the the debugger’s own frames; those never appear as debugger.frame instances.) push a "debugger" fram...
...ible frame on the stack, or null if there is no such frame. (this is never one of the the debugger’s own frames; those never appear as debugger.frame instances.) push a "debugger" frame on the stack, witholder as its older property. invoke the debuggee code as appropriate for the given invocation function, with the "debugger" frame as its continuation. for example, debugger.frame.proto
type.eval pushes an "eval" frame for code it runs, whereas debugger.object.proto
type.call pushes a "call" frame. when the debuggee code completes, whether by returning, throwing an exception or being terminated, pop the "debugger" frame, and return an appropriate completion value from the invocation function to the debugger. when a debugger calls an invocation function to run debuggee code, t...
...ompletion value from the invocation function to the debugger. when a debugger calls an invocation function to run debuggee code, that code’s continuation is the debugger, not the next debuggee code frame. pushing a "debugger" frame makes this continuation explicit, and makes it easier to find the extent of the stack created for the invocation. accessor properties of the debugger.frame proto
type object a debugger.frame instance inherits the following accessor properties from its proto
type:
type a string describing what sort of frame this is: "call": a frame running a function call. (we may not be able to obtain frames for calls to host functions.) "eval": a frame running code passed to eval. "global": a frame running global code (javascript that is neither ...
...And 7 more matches
DevTools API - Firefox Developer Tools
or the id of the tool to unregister. registertheme(themedefinition) registers a new theme. parameters: themedefinition {themedefinition} - an object that contains information about the theme. unregistertheme(theme) unregisters the given theme. parameters: theme {themedefinition|string} - the theme definition object or the theme identifier. ...
...string} - the theme definition object or the theme identifier. showtoolbox(target [, toolid [, host
type [, hostoptions]]]) opens a toolbox for given target either by creating a new one or activating an existing one. parameters: target {target} - the target the toolbox will debug. toolid {string} - the tool that should be activated. if unspecified the previously active tool is shown. host
type {string} - the position the toolbox will be placed. one of bottom, side, window, custom. see host
type for details. hostoptions {object} - an options object passed to the selected host. see host
type for details. return value: a promise that is fulfilled with the toolbox instance once it has been initialized and the selected tool is loaded. gettoolbox(target) fetch the toolbox object for t...
...the panel is the object returned by the tooldefinition.build() method. {toolid}-destroy(toolbox, panel) a tool with the given id is about to be destroyed. the panel is the object returned by the tooldefinition.build() method. toolbox a toolbox is a frame for the toolpanels that is debugging a specific target. properties target target. the target this toolbox is debugging. ...
...And 7 more matches
Blob - Web APIs
f another blob's data, use the slice() method. to obtain a blob object for a file on the user's file system, see the file documentation. the apis accepting blob objects are also listed in the file documentation. constructor blob() returns a newly created blob object which contains a concatenation of all of the data in the array passed into the constructor. instance properties blob.proto
type.size read only the size, in bytes, of the data contained in the blob object. blob.proto
type.
type read only a string indicating the mime
type of the data contained in the blob. if the
type is unknown, this string is empty. instance methods blob.proto
type.arraybuffer() returns a promise that resolves with an arraybuffer containing the entire contents of the blob as binary data. blob.pro...
...ize read only the size, in bytes, of the data contained in the blob object. blob.proto
type.
type read only a string indicating the mime
type of the data contained in the blob. if the
type is unknown, this string is empty. instance methods blob.proto
type.arraybuffer() returns a promise that resolves with an arraybuffer containing the entire contents of the blob as binary data. blob.proto
type.slice() returns a new blob object containing the data in the specified range of bytes of the blob on which it's called. blob.proto
type.stream() returns a readablestream that can be used to read the contents of the blob. blob.proto
type.text() returns a promise that resolves with a usvstring containing the entire contents of the blob interpreted as utf-8 text. examples creating a blob the ...
...ad the contents of the blob. blob.proto
type.text() returns a promise that resolves with a usvstring containing the entire contents of the blob interpreted as utf-8 text. examples creating a blob the blob() constructor can create blobs from other objects. for example, to construct a blob from a json string: const obj = {hello: 'world'}; const blob = new blob([json.stringify(obj, null, 2)], {
type : 'application/json'}); creating a url representing the contents of a
typed array the following code creates a javascript
typed array and creates a new blob containing the
typed array's data. it then calls url.createobjecturl() to convert the blob into a url. ...
...And 7 more matches
Element.matches() - Web APIs
e selector. syntax var result = element.matches(selectorstring); parameters selectorstring is a string representing the selector to test. return value result is a boolean. exceptions syntax_err the specified selector string is invalid. example <ul id="birds"> <li>orange-winged parrot</li> <li class="endangered">philippine eagle</li> <li>great white pelican</li> </ul> <script
type="text/javascript"> var birds = document.getelementsbytagname('li'); for (var i = 0; i < birds.length; i++) { if (birds[i].matches('.endangered')) { console.log('the ' + birds[i].textcontent + ' is endangered!'); } } </script> this will log "the philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered. polyfill f...
....log('the ' + birds[i].textcontent + ' is endangered!'); } } </script> this will log "the philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered. ...
...ent + ' is endangered!'); } } </script> this will log "the philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered. ...
...And 7 more matches
The HTML DOM API - Web APIs
the functional areas included in the html dom api include: access to and control of html elements via the dom. access to and manipulation of form data. interacting with the contents of 2d images and the context of an html <canvas>, for example to draw on top of them. management of media connected to the html media elements (<audio> and <video>). dragging and dropping of content on webpages. ...
...s such as the element's id, its coordinates, the html making up the element, information about scroll position, and so forth. in order to expand upon the functionality of the core htmlelement interface to provide the features needed by a specific element, the htmlelement class is subclassed to add the needed properties and methods. for example, the <canvas> element is represented by an object of
type htmlcanvaselement. htmlcanvaselement augments the htmlelement
type by adding properties such as height and methods like getcontext() to provide canvas-specific features. the overall inheritance for html element classes looks like this: as such, an element inherits the properties and methods of all of its ancestors. for example, consider a <a> element, which is represented in the dom by an obj...
...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. ...
...And 7 more matches
KeyboardEvent.initKeyEvent() - Web APIs
is 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.initkeyboardevent 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.initkeyevent (
type, bubbles, cancelable, viewarg, ctrlkeyarg, altkeyarg, shiftkeyarg, metakeyarg, 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 be cancele...
...ong representing the virtual key code value of the key which was depressed, otherwise 0. see keyboardevent.keycode for the list of key codes. charcodearg is a unsigned long representingthe unicode character associated with the depressed key otherwise 0. example var event = document.createevent('keyboardevent'); // create a key event // define the event event.initkeyevent("keypress", //
typearg, true, // canbubblearg, true, // cancelablearg, null, // viewarg, specifies uievent.view. this value may be null. false, // ctrlkeyarg, false, // altkeyarg, false, // shiftkeyarg, false, ...
...d('blah').dispatchevent(event); specification this implementation of keyboard events is based on the key events spec in the early versions of dom 2 events, later removed from that spec. ...
...And 7 more matches
MediaDevices.getUserMedia() - Web APIs
it returns a promise that resolves to a mediastream object. ...
... it returns a promise that resolves to a mediastream object. if the user denies permission, or matching media is not available, then the promise is rejected with notallowederror or notfounderror respectively. ...
...e error */ }); note: if the current document isn't loaded securely, navigator.mediadevices will be undefined, and you cannot use getusermedia(). see security for more information on this and other security issues related to using getusermedia(). syntax var promise = navigator.mediadevices.getusermedia(constraints); parameters constraints a mediastreamconstraints object specifying the
types of media to request, along with any requirements for each
type. the constraints parameter is a mediastreamconstraints object with two members: video and audio, describing the media
types requested. either or both must be specified. if the browser cannot find all media tracks with the specified
types that meet the constraints given, then the returned promise is rejected with notfounderror. th...
...And 7 more matches
User Timing API - Web APIs
the user timing interface allows the developer to create application specific timestamps that are part of the browser's performance timeline. there are two
types of user defined timing event
types: the "mark" event
type and the "measure" event
type. mark events are named by the application and can be set at any location in an application. measure events are also named by the application but they are placed between two marks thus they are effectively a midpoint between two marks. this document provides an overview of the mark and measure performance event
types including the four user timing methods that extend the performance interface. for more details and example code regarding these two performance event
types and the methods, see using the user timing api. performance marks a performa...
... is a named performance entry that is created by the application. the mark is a timestamp in the browser's performance timeline. creating a performance mark the performance.mark() method is used to create a performance mark. the method takes one argument, the name of the mark (for example performance.mark("mark-1")). the mark's performance entry will have the following property values: entry
type - set to "mark". name - set to the "name" given when the mark was created. starttime - set to the timestamp when mark() was called. duration - set to "0" (a mark has no duration). retrieving performance marks the performance interface has three methods that can be used to retrieve a mark: performance.getentries() returns all performance entries in the performance timeline. finding only ...
... when the mark was created. starttime - set to the timestamp when mark() was called. duration - set to "0" (a mark has no duration). retrieving performance marks the performance interface has three methods that can be used to retrieve a mark: performance.getentries() returns all performance entries in the performance timeline. ...
...And 7 more matches
WebRTC API - Web APIs
ed by the rtcpeerconnection interface. once a connection has been established and opened using rtcpeerconnection, media streams (mediastreams) and/or data channels (rtcdatachannels) can be added to the connection. media streams can consist of any number of tracks of media information; tracks, which are represented by objects based on the mediastreamtrack interface, may contain one of a number of
types of media data, including audio, video, and text (such as subtitles or even chapter names). most streams consist of at least one audio track and likely also a video track, and can be used to send and receive both live media or stored media information (such as a streamed movie). you can also use the connection between two peers to exchange arbitrary binary data using the rtcdatachannel interface...
...file transfers, or even as a primary channel for data transfer. more details and links to relevant guides and tutorials needed webrtc reference because webrtc provides interfaces that work together to accomplish a variety of tasks, we have divided up the reference by category. please see the sidebar for an alphabetical list. connection setup and management these interfaces, dictionaries, and
types are used to set up, open, and manage webrtc connections. included are interfaces representing peer media connections, data channels, and interfaces used when exchanging information on the capabilities of each peer in order to select the best possible configuration for a two-way media connection. interfaces rtcpeerconnection represents a webrtc connection between the local computer and a rem...
...ta between the two peers. rtcdatachannel represents a bi-directional data channel between two peers of a connection. rtcdatachannelevent represents events that occur while attaching a rtcdatachannel to a rtcpeerconnection. the only event sent with this interface is datachannel. rtcsessiondescription represents the parameters of a session. each rtcsessiondescription consists of a description
type indicating which part of the offer/answer negotiation process it describes and of the sdp descriptor of the session. rtcstatsreport provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling rtcpeerconnection.getstats(). details about using webrtc statistics can be found in webrtc statistics api. rtcicecandidat...
...And 7 more matches
Inputs and input sources - Web APIs
tion of a point in space by the user's input. this may involve the user simply tapping on a spot on the screen, tracking their eyes, or the use of a joystick or motion-sensing controller to move a cursor. actions include both selection actions, such as clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wearing haptic gloves. by combining these two
types of input with the changing of viewing position and/or orientation through the headset or other mechanisms, you can create an interactive simulated environment. input device
types webxr supports a variety of different
types of devices to handle targeting and action inputs. these devices include but aren't limited to: screen taps (particularly but not necessarily only on phones or tablets) ca...
... can be used to locate the following json profile data by locating the profileid field that has the value generic-trigger-squeeze-touchpad. ...
...ting the profileid field that has the value generic-trigger-squeeze-touchpad. ...
...And 7 more matches
Sending and Receiving Binary Data - Web APIs
receiving binary data using javascript
typed arrays the response
type property of the xmlhttprequest object can be set to change the expected response
type from the server. possible values are the empty string (default), "arraybuffer", "blob", "document", "json", and "text". the response property will contain the entity body according to response
type, as an arraybuffer, blob, document, json, or string. this is null if the request is not complete or was not successful. this example reads an image as a binary file and creates an 8-bit unsigned integer array from the raw bytes. note that this will not decode the image and read the pixels. you will need a png decoding library for that. ...
... document, json, or string. this is null if the request is not complete or was not successful. this example reads an image as a binary file and creates an 8-bit unsigned integer array from the raw bytes. note that this will not decode the image and read the pixels. you will need a png decoding library for that. ...
...}; oreq.send(); receiving binary data in older browsers the load_binary_resource() function shown below loads binary data from the specified url, returning it to the caller. function load_binary_resource(url) { ...
...And 7 more matches
Border-image generator - CSS: Cascading Style Sheets
-stateid="border5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url"
type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data...
...t; } #output .css-property .value { width: 65%; padding: 0 2.5%; word-break: break-all; float: left; } javascript content 'use strict'; /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('
type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function s...
..._right.classname = 'ui-input-slider-right'; if (name) { var info = document.createelement('span'); info.classname = 'ui-input-slider-info'; info.textcontent = name; node.appendchild(info); } node.appendchild(slider_left); node.appendchild(input); node.appendchild(slider_right); this.input = input; sliders[topic] = this; setvalue(topic, value); }; inputslider.proto
type.setinputvalue = function setinputvalue() { this.input.value = this.value.tofixed(this.precision) + this.unit; }; var setvalue = function setvalue(topic, value, send_notify) { var slider = sliders[topic]; if (slider === undefined) return; value = parsefloat(value.tofixed(slider.precision)); if (value > slider.max) value = slider.max; if (value < slider.min) value = slider.min; ...
...And 7 more matches
display - CSS: Cascading Style Sheets
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. ...
...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. ...
...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. ...
...And 7 more matches
Setting up adaptive streaming media sources - Developer guides
eb servers. a media presentation description (mpd) file is used to hold the information on the various streams and the bandwidths they are associated with. in your video source (src) attribute you point to the mpd instead of to the media file as you would with non-adaptive media. the mpd file tells the browser where the various pieces of media are located, it also includes meta data such as mime
type and codecs and there are other details such as byte-ranges in there too - it is an xml document and in many cases will be generated for you. there are a few profiles we can use. we're going to take a look at ondemand profile for video on demand (vod) and the live profile. for live services streaming, the live profile is a requirement. the stream switching capabilities are identical between the ...
... the bandwidth for each one and the appropriate file will be chosen automatically. here's a simple example that provides an audio track representation and four separate video representations. ...
...:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="urn:mpeg:dash:schema:mpd:2011" xsi:schemalocation="urn:mpeg:dash:schema:mpd:2011 dash-mpd.xsd"
type="static" mediapresentationduration="pt654s" minbuffertime="pt2s" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"> <baseurl>http://example.com/ondemand/</baseurl> <period> <!-- english audio --> <adaptationset mime
type="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="64000"> <baseurl>elephantsdream_aac48k_064.mp4.dash</baseurl> </representation> </adaptationset> <!-- video --> <adaptationset mime
type="video/mp4" codecs="avc1.42401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <repr...
...And 7 more matches
HTML attribute: multiple - HTML: Hypertext Markup Language
in firefox, the file input reads "no files selected" when the attribute is present and "no file selected" when not, when no files are selected. ...
...in firefox, the file input reads "no files selected" when the attribute is present and "no file selected" when not, when no files are selected. ...
...in firefox, the file input reads "no files selected" when the attribute is present and "no file selected" when not, when no files are selected. ...
...And 7 more matches
<menu> - HTML: Hypertext Markup Language
nubar, none, presentation, radiogroup, tablist, toolbar or tree dom interface htmlmenuelement attributes this element includes the global attributes. label the name of the menu as shown to the user. used within nested menus, to provide a label through which the submenu can be accessed. must only be specified when the parent element is a <menu> in the context menu state.
type this attribute indicates the kind of menu being declared, and can be one of two values. context : indicates the popup menu state, which represents a group of commands activated through another element. this might be as a button menu referenced by a menu attribute of a <button> element, or as context menu for an element with a contextmenu attribute. this value is the default if the attribut...
...n one of two ways: either as an unordered list of items represented by <li> elements (each representing a command or option the user can utilize), or (if there are no <li> elements), flow content describing the available commands and options. this element was deprecated in html4, but reintroduced in html5.1 and the html living standard. this document describes the current firefox implementation. ...
...ons. this element was deprecated in html4, but reintroduced in html5.1 and the html living standard. this document describes the current firefox implementation.
type 'list' is likely to change to 'toolbar' according to html5.1. examples context menu html <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu
type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css div { width: 300px; height: 80px; background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known browsers yet. the
type attribute on the <menu> element is now obsolete. <menuitem> elemen...
...And 7 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
me attribute has been updated. volumechange the volume has changed. waiting playback has stopped because of a temporary lack of data usage notes browsers don't all support the same video formats; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands. <video controls> <source src="myvideo.mp4"
type="video/mp4"> <source src="myvideo.webm"
type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="myvideo.mp4">link to the video</a> instead.</p> </video> we offer a substantive and thorough guide to media file
types and the guide to the codecs supported for video. also available is a guide to audio codecs that can be used with them. other usage notes: if yo...
...ing basics provides some useful styling techniques. detecting track addition and removal you can detect when tracks are added to and removed from a <video> element using the addtrack and removetrack events. however, these events aren't sent directly to the <video> element itself. instead, they're sent to the track list object within the <video> element's htmlmediaelement that corresponds to the
type of track that was added to the element: htmlmediaelement.audiotracks an audiotracklist containing all of the media element's audio tracks. you can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element. htmlmediaelement.videotracks add an addtrack listener to this videotracklist object to be informed when video tracks are added to the element...
...</video> first webm is tried. if that can't be played, then mp4 is tried. finally, ogg is tried. a fallback message is displayed if the video e...
...And 7 more matches
Microdata - HTML: Hypertext Markup Language
and each name-value pair is a property. items and properties are represented by regular elements. to create an item, the itemscope attribute is used. to add a property 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. ...
...ants. 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 item
type and startdate and location would be itemprop's that schema.org music event defines. note: more about item
type 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, such as the widely used schema.org vocabulary. a collection of commonly used m...
... can design a custom vocabulary or use vocabularies available on the web, such as the widely used schema.org vocabulary. a collection of commonly used markup vocabularies are provided by schema.org. commonly used vocabularies: creative works: creativework, book, movie, musicrecording, recipe, tvseries embedded non-text objects: audioobject, imageobject, videoobject event health and medical
types: notes on the health and medical
types under medicalentity organization person place, localbusiness, restaurant product, offer, aggregateoffer review, aggregaterating action thing intangible major search engine operators like google, microsoft, and yahoo! rely on the schema.org vocabulary to improve search results. for some purposes, an ad-hoc vocabulary is adequate. for others, a voca...
...And 7 more matches
Classes - JavaScript
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). ...
...ecmascript. constructor the constructor method is a special method for creating and initializing an object created with a class. there can only be one special method with the name "constructor" in a class. a syntaxerror will be thrown if the class contains more than one occurrence of a constructor method. a constructor can use the super keyword to call the constructor of the super class. proto
type methods see also method definitions. class rectangle { constructor(height, width) { this.height = height; this.width = width; } // getter get area() { return this.calcarea(); } // method calcarea() { return this.height * this.width; } } const square = new rectangle(10, 10); console.log(square.area); // 100 static methods the static keyword defines a static me...
...an application. class point { constructor(x, y) { this.x = x; this.y = y; } static distance(a, b) { const dx = a.x - b.x; const dy = a.y - b.y; return math.hypot(dx, dy); } } const p1 = new point(5, 5); const p2 = new point(10, 10); p1.distance; //undefined p2.distance; //undefined console.log(point.distance(p1, p2)); // 7.0710678118654755 binding this with proto
type and static methods when a static or proto
type method is called without a value for this, such as by assigning a variable to the method and then calling it, the this value will be undefined inside the method. this behavior will be the same even if the "use strict" directive isn't present, because code within the class body's syntactic boundary is always executed in strict mode. class animal { ...
...And 7 more matches
Intl.ListFormat - JavaScript
roject, please clone https://github.com/mdn/interactive-examples and send us a pull request. constructor intl.listformat() creates a new listformat object. static methods intl.listformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.listformat.proto
type.format() returns a language-specific formatted string representing the elements of the list. intl.listformat.proto
type.formattoparts() returns an array of objects representing the different components that can be used to format a list of values in a locale-aware fashion. examples using format the following example shows how to create a list formatter using the english language. const list...
.... intl.listformat.proto
type.formattoparts() returns an array of objects representing the different components that can be used to format a list of values in a locale-aware fashion. examples using format the following example shows how to create a list formatter using the english language. ...
... to format a list of values in a locale-aware fashion. examples using format the following example shows how to create a list formatter using the english language. ...
...And 7 more matches
Iteration protocols - JavaScript
t new built-ins or syntax, but protocols. these protocols can be implemented by any object by simply following some conventions. there are two protocols: the iterable protocol and the iterator protocol. the iterable protocol the iterable protocol allows javascript objects to define or customize their iteration behavior, such as what values are looped over in a for...of construct. ...
...ly following some conventions. there are two protocols: the iterable protocol and the iterator protocol. the iterable protocol the iterable protocol allows javascript objects to define or customize their iteration 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. ...
...ript objects to define or customize their iteration 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 proto
type 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...
...And 7 more matches
Navigation and resource timings - Web Performance
cureconnectionstart and requeststart will greater than 0. ssl = time.requeststart - time.secureconnectionstart; performance entry api the general performance timings above are deprecated but fully supported. we now have the performance entry api, which provides for marking and measuring times along the navigation and resource loading process. ...
...ctionstart; performance entry api the general performance timings above are deprecated but fully supported. we now have the performance entry api, which provides for marking and measuring times along the navigation and resource loading process. ...
...lly supported. we now have the performance entry api, which provides for marking and measuring times along the navigation and resource loading process. ...
...And 7 more matches
test/assert - Archive of obsolete content
expected, message) tests that two objects have a deep equality relation. deep equality is defined in the commonjs specification for assert, item 7, which is quoted here: all identical values are equivalent, as determined by ===. if the expected value 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.proto
type.hasownproperty.call), the same set of keys (although not necessarily the same order), equivalent values for every corresponding key, and an identical "proto
type" property. note: this a...
...ected : object the expected result. message : string optional message to log, providing extra information about the test. ...
... "object's inherit from different proto
types"); parameters actual : object the actual result. expected : object the expected result. message : string optional message to log, providing extra information about the test. strictequal(actual, expected, message) tests that two objects are equal, using the strict equality operator ===: // this test will pass, because "==" will perform
type conversion exports["test coercive equality"] = function(assert) { assert.equal(1, "1", "test coercive equality between 1 and '1'"); } // this test will fail, because the
types are different exports["test strict equality"] = function(assert) { assert.strictequal(1, "1", "test strict equality between 1 and '1'"); } parameters actual : object the actual result. expected : object the expect...
...And 6 more matches
LookupNamespaceURI - Archive of obsolete content
kupnamespaceuri. this function is not necessary for gecko-based browsers (though the function will quickly return the standard value for mozilla browsers) when used to reflect on static documents. however, due to bug 312019, this method does not work with dynamically assigned namespaces (e.g., those set with node.prefix). ...
...ically assigned namespaces (e.g., those set with node.prefix). ...
...amespaces (e.g., those set with node.prefix). ...
...And 6 more matches
Install Manifests - Archive of obsolete content
30f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!--firefox--> <em:minversion>1.5</em:minversion> <em:maxversion>3.0.*</em:maxversion> </description> </em:targetapplication> gecko 1.9 based applications allow you to use the special targetapplication id toolkit@mozilla.org to say that the add-on is compatible with any toolkit app with a toolkit version matching the minversion and maxversion. ...
...> <!--firefox--> <em:minversion>1.5</em:minversion> <em:maxversion>3.0.*</em:maxversion> </description> </em:targetapplication> gecko 1.9 based applications allow you to use the special targetapplication id toolkit@mozilla.org to say that the add-on is compatible with any toolkit app with a toolkit version matching the minversion and maxversion.
type an integer value representing the
type of add-on. 2 extensions 4 themes 8 locale 32 multiple item package 64 spell check dictionary 128 telemetry experiment 256 webextension experiment examples <em:
type>2</em:
type> this property was added for firefox 1.5, and is only required for add-on
types other than extensions and themes. firefox 2 and p...
... the extension's context menu will show this dialog, rather than the default. note: as of gecko 2.0, the dialog receives the addon object representing your add-on as a parameter. examples <em:abouturl>chrome://myext/content/about.xul</em:abouturl> bootstrap a boolean value that tells the application whether the extension is boot-strappable. at the moment this only works for add-ons with em:
type="2". the default value is false. for more information, see bootstrapped extensions. contributor the name(s) of additional contributors. you may specify more than one of this value to specify multiple contributors. examples <em:contributor>john doe</em:contributor> <em:contributor>john doe</em:contributor> <em:contributor>jane doe</em:contributor> <em:contributor>elvis presley</em:contributor...
...And 6 more matches
Appendix D: Loading Scripts - Archive of obsolete content
an onload attribute.) example the following overlay will load the script “overlay.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"?> <!doc
type 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...
...cluding the url, line number, and javascript version of the file from which the code being evaluated was extracted. this information is invaluable for debugging, and the flexibility with which it can be specified makes this method useful for extracting javascript from a number of file formats other than raw javascript scripts. additionally, as sandbox objects can be created with an arbitrary proto
type object, the evaluated code can be given access to the global properties of any existing scope. security: sandbox objects are initialized with a security principal object, or otherwise a window or url from which to derive one. this means that evalinsandbox can be used to execute code with a specified privilege level rather than full chrome privileges. beyond this, the scope of the sandbox can be ...
...all property accesses and method calls. javascript compartments: as noted above, each sandbox executes in its own javascript compartment. in addition to the possible performance concerns, passing data between these compartments is not entirely transparent. some known issues include: e4x xml objects cannot be wrapped for passage between compartments: bug 613142 there are a number of
type detection issues, including: string.replace does not recognize regexp objects from foreign compartments: bug 633830 debugging: support for sandbox evaluation in development tools is uneven. chromebug supports firebug based sandboxes. examples the following code will execute a simple script in a sandbox with the privilege level of the current content page. the globals o...
...And 6 more matches
MenuItems - Archive of obsolete content
ve an item on a menu that acts as a toggle. for instance, a menuitem that can be used to toggle a toolbar on and off. to indicate the current state of the toolbar, a checkbox would be displayed next to the menu item label. if the checkbox is on, the toolbar is shown, whereas if the checkbox is off, the toolbar is not shown. the user can select the menu item to switch the toolbar visibility. this
type of menuitem can be created by using the
type attribute and setting it to the value "checkbox". <menu label="view" accesskey="v"> <menupopup> <menuitem label="show toolbar" accesskey="t"
type="checkbox" checked="true"/> <menuitem label="show status bar" accesskey="s"
type="checkbox"/> </menupopup> </menu> both menuitems are of the checkbox
type. the first menuitem is checked by de...
... fired. note that the checked state is updated before the command event fires, so if you use the menuitem's checked attribute within the command listener, it will already be in the new state. <script> function changetoolbarstate(event) { if (event.target.getattribute("checked") == "true") showtoolbar(); else hidetoolbar(); } </script> ... <menuitem label="show toolbar" accesskey="t"
type="checkbox" oncommand="changetoolbarstate();"/> in this example, we show the toolbar when the menuitem is checked and hide the toolbar otherwise. there may be times when you do not want the checkbox state to be updated automatically when the menuitem is activated. this can be useful if there's a possibility that whatever action is carried out could fail. one possibility is to simply r...
...automatically, and you must write code to adjust the state yourself. <script> function changetoolbarstate(event) { if (event.target.getattribute("checked") == "true") hidetoolbar(); event.target.removeattribute("checked"); } else { if (!showtoolbar()) return; event.target.setattribute("checked", "true"); } } </script> ... <menuitem label="show toolbar" accesskey="t"
type="checkbox" autocheck="false" oncommand="changetoolbarstate();"/> this version of the changetoolbarstate function changes the checked attribute itself. the autocheck attribute has been set to false on the menuitem so the checked attribute will not be updated automatically. note that the code has been reversed in the condition blocks to hide the toolbar when the menuitem is checked and ...
...And 6 more matches
Filtering - Archive of obsolete content
show all of the photos. when a choice is made, the applyfilter function as shown above is called and the template content gets rebuilt with the desired filter applied. in this example, the menulist is hard-coded to contain the items that we know are in the datasource. next, we'll look at also generating this list using a template. generating a filter menu templates may be used to generate any
type of content. it is common to use a template to generate the items on a menu or in a listbox or tree. the syntax is the same regardless of what
type of content is being created. in the previous example, we hard-coded a menulist with the list of countries, but we could also generate this list from the datasource. the same datasource may used for both the photos list and the menulist. even though the...
...source is used, it will only be loaded once and both templates will be notified when the data has loaded. we will need to add some information to the datasource in order to specify the list of countries that are available. there are two possibilities. first, a separate seq could be added listing the countries. then, a simple <member> element can be used to iterate over it. or, we could use an rdf
type to specify the countries. then, we could just look for all resources that were of the 'country'
type. we'll use this method here since we've already seen examples of generating results from a container. an rdf
type can be assigned to a node by using the predicate 'http://www.w3.org/1999/02/22-rdf-syntax-ns#
type' set to a resource for that
type. in rdf/xml, a syntax shortcut may be used which invo...
...st look for all resources that were of the 'country'
type. we'll use this method here since we've already seen examples of generating results from a container. an rdf
type can be assigned to a node by using the predicate 'http://www.w3.org/1999/02/22-rdf-syntax-ns#
type' set to a resource for that
type. in rdf/xml, a syntax shortcut may be used which involves replacing the description tag with the
type. ...
...And 6 more matches
SQLite Templates - Archive of obsolete content
first, it may a file url pointing to a file on disk. ...
...first, it may a file url pointing to a file on disk. in this case, you will often be setting the datasources attribute dynamically after determining the file path. ...
...ibute isn't currently used for sqlite sources, so you should just set the ref attribute to a dummy value; '*' is typically used. the query for an sqlite datasource is just an sql select statement, as text inside the query element. this simple example shows how to display a listbox containing the values in one column in a database table. <listbox datasources="profile:userdata.sqlite" ref="*" query
type="storage"> <template> <query> select name from myfriends </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the query returns the list of values from the 'name' column in the table 'myfriends'. the action body, starting at the node with uri="?" is repeated for each result returned from the query. if the query returns six results, ...
...And 6 more matches
Using Recursive Templates - Archive of obsolete content
« previousnext » you may recall that templates generate content recursively. after the data is generated, each result is used as the new reference point for a nested iteration of the template. this is usually used to generate content in a tree or menu. both the rdf and xml datasource
types support recursion. for example, using this xml datasource: <people> <group name="male"> <person name="napoleon bonaparte"/> <person name="julius caesar"/> <person name="ferdinand magellan"/> </group> <group name="female"> <person name="cleopatra"/> <person name="laura secord"/> </group> </people> we could display this data in a flat list by using the right query: <query expr="group/person/"> or, we could display one level for the two groups, and use another leve...
...e"/> <person name="julius caesar"/> <person name="ferdinand magellan"/> </group> <group name="female"> <person name="cleopatra"/> <person name="laura secord"/> </group> </people> we could display this data in a flat list by using the right query: <query expr="group/person/"> or, we could display one level for the two groups, and use another level for each person. <groupbox
type="menu" datasources="people.xml" ref="*" query
type="xml"> <template> <query expr="*"/> <action> <vbox uri="?" class="indent"> <label value="?name"/> </vbox> </action> </template> </groupbox> in this simplified example, the xpath expression just gets the list of child elements of the reference node. for the outermost iteration, a vbox is created with a child lab...
...a stylesheet to provide a different appearance for containers with children, empty containers, as well as non-containers. in this example, both the parent groups and child people are displayed the same. you could use multiple rules as well, in order to generate different output for each level. in this next example, an assign element is used to assign the local name of the node is to the variable ?
type. ...
...And 6 more matches
Content Panels - Archive of obsolete content
s 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 other flags. essentially, the browser ...
...ser-like interface, but the iframe may be used when you just need a simple panel. a similar element, tabbrowser, provides the functionality of browser but also provides a tab bar for switching between multiple pages. this is the widget used by the mozilla browser for its tabbed browsing interface. the tabbrowser element is actually implemened as a tabbox containing a set of browser elements. both
types of browser offer similar control over pages that are displayed. browser example example 2 : source view <browser src="http://www.mozilla.org" flex="1" /> as with the iframe, you can specify the url in a browser using the src attribute. for a tabbrowser, you cannot set the url directly like this, as it doesn't display just one url. instead, you must use a script and call the loaduri funct...
... <browser src="http://www.mozilla.org" flex="1" /> as with the iframe, you can specify the url in a browser using the src attribute. for a tabbrowser, you cannot set the url directly like this, as it doesn't display just one url. instead, you must use a script and call the loaduri function. there are three classes of browser, depending on the kind of content that you want to display inside. the
type may be specified using the
type attribute. the first
type is the default and is used if you don't specify a
type. in this case, the content loaded inside the browser is treated as if it was part of the same application and has access to the outer window. that means that when a script loaded inside the browser tries to get the topmost window, it will get the outer xul window. this would be suitabl...
...And 6 more matches
Processing XML with E4X - Archive of obsolete content
on for javascript embedded in a page to be surrounded by html comment tags to prevent <script> unaware browsers from displaying javascript code to the user. this practice is no longer necessary, but remains in some legacy code. for backwards compatibility, e4x defaults to ignoring comments and cdata sections. ...
...cy code. for backwards compatibility, e4x defaults to ignoring comments and cdata sections. you can add an e4x=1 argument to your <script> tag to disable this restriction: <script
type="text/javascript;e4x=1"> ... </script> creating an xml object e4x offers two principal ways of creating an xml object. ...
... while the xml object looks and behaves in a similar way to a regular javascript object, the two are not the same thing. ...
...And 6 more matches
Archived JavaScript Reference - Archive of obsolete content
kly assemble a new array based on an existing one. however, it has been removed from the standard and the firefox implementation. do not use it!array.observe()the array.observe() method was used for asynchronously observing changes to arrays, similar to object.observe() for objects. it provided a stream of changes in order of occurrence. it's equivalent to object.observe() invoked with the accept
type list ["add", "update", "delete", "splice"]. however, this api has been deprecated and removed from browsers. you can use the more general proxy object instead.array.unobserve()the array.unobserve() method was used to remove observers set by array.observe(), but has been deprecated and removed from browsers. you can use the more general proxy object instead.arraybuffer.transfer()the static arraybu...
...sers. you can use the more general proxy object instead.arraybuffer.transfer()the static arraybuffer.transfer() method returns a new arraybuffer whose contents have been taken from the oldbuffer's data and then is either truncated or zero-extended by newbytelength. if newbytelength is undefined, the bytelength of the oldbuffer is used. ...
...d by newbytelength. if newbytelength is undefined, the bytelength of the oldbuffer is used. this operation leaves oldbuffer in a detached state.date.proto
type.tolocaleformat()the non-standard tolocaleformat() method converts a date to a string using the specified formatting. intl.datetimeformat is an alternative to format dates in a standards-compliant way. ...
...And 6 more matches
Implementation Status - Archive of obsolete content
4.8.2 rebuild() supported 4.8.3 recalculate() supported 4.8.4 revalidate() supported 4.8.5 refresh() supported 4.9 feature string for the hasfeature method call supported 5. ...
... 4.8.4 revalidate() supported 4.8.5 refresh() supported 4.9 feature string for the hasfeature method call supported 5. data
types section title status notes bugs 5.1 xml schema built-in data
types partial whitespace facet not supported. ...
...sh() supported 4.9 feature string for the hasfeature method call supported 5. data
types section title status notes bugs 5.1 xml schema built-in data
types partial whitespace facet not supported. ...
...And 6 more matches
2D maze game with device orientation - Game development
pt files with all the source code of the game defined inside. audio: the sound files used in the game. setting up the canvas we will be rendering our game on canvas, but we won't do it manually — this will be taken care of by the framework. let’s set it up: our starting point is the index.html file with the following content. ...
...er will load all of the assets like graphics and audio, mainmenu is the menu with the start button, howto shows the "how to play" instructions and the game state lets you actually play the game. let's quickly go though the content of those states. boot.js the boot state is the first one in the game. ...
... that will be used later in the preload state to show the progress of loading all the other assets. the create function holds some basic configuration: we're setting up the scaling and alignment of the canvas, and moving on to the preload state when everything's ready. preloader.js the preloader state takes care of loading all the assets: ball.preloader = function(game) {}; ball.preloader.proto
type = { preload: function() { this.preloadbg = this.add.sprite((ball._width-297)*0.5, (ball._height-145)*0.5, 'preloaderbg'); this.preloadbar = this.add.sprite((ball._width-158)*0.5, (ball._height-50)*0.5, 'preloaderbar'); this.load.setpreloadsprite(this.preloadbar); this.load.image('ball', 'img/ball.png'); // ... this.load.spritesheet('button-star...
...And 6 more matches
Mobile accessibility - Learn web development
alkback 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 select it. now you'll be able to swipe left and right to move between headings and a...
...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 until you get to it, and then double-tapping. for each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. double-tap to
type it. once you've finished, find the enter key and press it. swipe left and right to move between items on the page. you can double-tap an item to select it (e.g., follow a link). by default, the selected rotor option will be speaking rate; you can currently swipe up and down to increase or decrease the speaking rate. now turn two fingers around the screen like a dial to show the rotor a...
...gs. now you'll be able to swipe up and down to move between headings on the page. note: for a more complete reference covering the voiceover gestures available and other hints on accessibility testing on ios, see test accessibility on your device with voiceover. control mechanisms in our css and javascript accessibility article, we looked at the idea of events that are specific to a certain
type of control mechanism (see mouse-specific events). to recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality. as an example, the click event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing enter/return, or tapping it on a touchscr...
...And 6 more matches
Client-side storage - Learn web development
nsisting of a name and a corresponding value. this is useful when you just need to store some simple data, like the user's name, whether they are logged in, what color to use for the background of the screen, etc. the indexeddb api provides the browser with a complete database system for storing complex data. this can be used for things from complete sets of customer records to even complex data
types like audio or video files. you'll learn more about these apis below. the future: cache api some modern browsers support the new cache api. this api is designed for storing http responses to specific requests, and is very useful for doing things like storing website assets offline so the site can subsequently be used without a network connection. cache is usually used in combination with the ...
...tem() method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. try typing this into your javascript console (change the value to your own name, if you wish!): localstorage.setitem('name','chris'); the storage.getitem() method takes one parameter — the name of a data item you want to retrieve — and returns the item's value. ...
...turns the item's value. now
type these lines into your javascript console: let myname = localstorage.getitem('name'); myname upon typing in the second line, you should see that the myname variable now contains the value of the name data item. the storage.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 localstorag...
...And 6 more matches
Third-party APIs - Learn web development
he other hand, are located on third party servers. to access them from javascript you first need to connect to the api functionality and make it available on your page. this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link
type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library. for example: let map = l.mapquest.map('map', { center: [53.480759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the map...
...zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display. in this case we specify the coordinates of the center of the map, a map layer of
type map to show (created using the mapquest.tilelayer() method), and the default zoom level. this is all the information the mapquest api needs to plot a simple map. 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 develope...
...mapquest developer site, create an account, and then create a developer key to use with your example. (at the time of writing, it was called a "consumer key" on the site, and the key creation process also asked for an optional "callback url". you don't need to fill in a url here: just leave it blank.) open up your starting file, and replace the api key placeholder with your key. changing the
type of map there are a number of different
types of map that can be shown with the mapquest api. to do this, find the following line: layers: l.mapquest.tilelayer('map') try changing 'map' to 'hybrid' to show a hybrid-style map. try some other values too. the tilelayer reference page shows the different available options, plus a lot more information. adding different controls the map has a numbe...
...And 6 more matches
A first splash into JavaScript - Learn web development
but we will give you plenty of opportunity to practice thinking like a programmer throughout the course. with that in mind, let's look at the example we'll be building up in this article, and review the general process of dissecting it into tangible tasks. ...
...; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100. see if you can guess it in 10 turns or fewer. ...
...hite; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100. see if you can guess it in 10 turns or fewer. ...
...And 6 more matches
Monitors
the first time the thread enters a monitor, it acquires the monitor's lock and the thread's entry count is incremented to 1. ...
...the first time the thread enters a monitor, it acquires the monitor's lock and the thread's entry count is incremented to 1. ...
...the first time the thread enters a monitor, it acquires the monitor's lock and the thread's entry count is incremented to 1. ...
...And 6 more matches
NSS_3.12_release_notes.html
cspenabledhardfailurepolicy (see cert.h) cert_getclassicocspenabledsoftfailurepolicy (see cert.h) cert_getpkixverifynistrevocationpolicy (see cert.h) cert_getusepkixforvalidation (see cert.h) cert_getvaliddnspatternsfromcert (see cert.h) cert_newtempcertificate (see cert.h) cert_setocsptimeout (see certhigh/ocsp.h) cert_setusepkixforvalidation (see cert.h) cert_pkixverifycert (see cert.h) hash_get
type (see sechash.h) nss_initwithmerge (see nss.h) pk11_createmergelog (see pk11pub.h) pk11_creategenericobject (see pk11pub.h) pk11_createpbev2algorithmid (see pk11pub.h) pk11_destroymergelog (see pk11pub.h) pk11_generatekeypairwithopflags (see pk11pub.h) pk11_getpbecryptomechanism (see pk11pub.h) pk11_isremovable (see pk11pub.h) pk11_mergetokens (see pk11pub.h) pk11_writerawattribute (see pk11pub.h)...
...l ckm_camellia_cbc_pad ckm_camellia_ecb_encrypt_data ckm_camellia_cbc_encrypt_data ckg: mfgs ckg_mgf1_sha224 new error codes (see secerr.h): sec_error_not_initialized sec_error_token_not_logged_in sec_error_ocsp_responder_cert_invalid sec_error_ocsp_bad_signature sec_error_out_of_search_limits sec_error_invalid_policy_mapping sec_error_policy_validation_failed sec_error_unknown_aia_location_
type sec_error_bad_http_response sec_error_bad_ldap_response sec_error_failed_to_encode_data sec_error_bad_info_access_location sec_error_libpkix_internal new mechanism flags (see secmod.h) public_mech_aes_flag public_mech_sha256_flag public_mech_sha512_flag public_mech_camellia_flag new oids (see secoidt.h) new ec signature oids sec_oid_ansix962_ecdsa_signature_recommended_digest sec_oid_ansix...
... 356595: on windows, rng_systeminfoforrng calls getcurrentprocess, which returns the constant (handle)-1. bug 357015: on windows, readsystemfiles reads 21 files as opposed to 10 files in c:\windows\system32. bug 361076: clean up the use_pthreads related code in coreconf/sunos5.mk. bug 361077: clean up the use_pthreads related code in coreconf/hp-ux*.mk. bug 402114: fix the incorrect function proto
types of ssl handshake callbacks bug 402308: fix miscellaneous compiler warnings in nss/cmd bug 402777: lib/util can't be built stand-alone. bug 407866: contributed improvement to security/nss/lib/freebl/mpi/mp_comba.c bug 410587: ssl_getchannelinfo returns secsuccess on invalid arguments bug 416508: fix a _msc_ver typo in sha512.c, and use sec_begin_protos/sec_end_protos in secport.h bug 419242: 'all...
...And 6 more matches
sample1
1. a program to compute the hash of a file and save it to another file. /* nspr headers */ #include <prprf.h> #include <pr
types.h> #include <plgetopt.h> #include <prio.h> #include <prprf.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h>
typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* maps a hash name to a secoidtag. * returns null if the name is not a supported algorithm */ static secoidtag hashnametooidtag(const char *h...
..._fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* prints a usage message and exits */ static void usage(const char *progname) { int h
type; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t
type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t
type"); fprintf(stderr, "%-20s ", ""); for (h
type = 0; h
type < hash_algtotal; h
type++) { fprintf(stderr, hash_names[h
type].hashname); ...
...ash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t
type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t
type"); fprintf(stderr, "%-20s ", ""); for (h
type = 0; h
type < hash_algtotal; h
type++) { fprintf(stderr, hash_names[h
type].hashname); if (h
type == (hash_algtotal - 2)) fprintf(stderr, " or "); else if (h
type != (hash_algtotal - 1)) fprintf(stderr, ", "); } fprintf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an input file to use (default is stdin)\n", "< input"); fprintf(stderr, "%-20s define an output file to use (default is stdout)\n", "> o...
...And 6 more matches
sslerr.html
her more specific error codes defined in this file applies. ssl_error_bad_server -12281 "the client has encountered bad data from the server." this error code should occur only on sockets that are acting as clients. it is a generic error, used when none of the other more specific error codes defined in this file applies. ssl_error_unsupported_certificate_
type -12280 "unsupported certificate
type." the operation encountered a certificate that was not one of the well known certificate
types handled by the certificate library. ssl_error_unsupported_version -12279 "peer using unsupported version of security protocol." on a client socket, this means the remote server has attempted to negotiate the use of a ver...
...d." ssl_error_rx_unexpected_application_data -12234 "ssl received an unexpected application data record." received record/message with unknown discriminant: all the error codes in the following block indicate that the local socket received an ssl3 record or handshake message from the remote peer that it was unable to interpret because the byte that identifies the
type of record or message contained an unrecognized value. this probably indicates a flaw in the remote peer's implementation. ssl_error_rx_unknown_record_
type -12233 "ssl received a record with an unknown content
type." ssl_error_rx_unknown_handshake -12232 "ssl received a handshake message with an unknown message
type." ssl_error_rx_unknown_alert -...
...lly decompress an ssl record it received." ssl_error_handshake_failure_alert -12227 "ssl peer was unable to negotiate an acceptable set of security parameters." ssl_error_illegal_parameter_alert -12226 "ssl peer rejected a handshake message for unacceptable content." ssl_error_unsupported_cert_alert -12225 "ssl peer does not support certificates of the
type it received." ssl_error_certificate_unknown_alert -12224 "ssl peer had some unspecified issue with the certificate it received." ssl_error_decryption_failed_alert -12197 "peer was unable to decrypt an ssl record it received." ssl_error_record_overflow_alert -12196 "peer received an ssl record that was longer than is permitted." ssl_error_unkno...
...And 6 more matches
Scripting Java
[] listfiles() java.io.file[] listfiles(java.io.filenamefilter) java.io.file[] listfiles(java.io.filefilter) */} this output shows that the file class defines three overloaded methods listfiles: one that takes no arguments, another with a filenamefilter argument, and a third with a filefilter argument. all the methods return an array of file objects. being able to view the parameters and return
type of java methods is particularly useful in exploratory programming where we might be investigating a method and are unsure of the parameter or return
types. another useful feature for exploratory programming is the ability to see all the methods and fields defined for an object. using the javascript for..in construct, we can print out all these values: js> for (i in f) { print(i) } exists parent...
...ir property names. a javabean property foo is defined by the methods getfoo and setfoo. additionally, a boolean property of the same name can be defined by an isfoo method. for example, the following code actually calls the file object's getname and isdirectory methods. js> f.name test.txt js> f.directory false calling overloaded methods the process of choosing a method to call based upon the
types of the arguments is called overload resolution. in java, overload resolution is performed at compile time, while in rhino it occurs at runtime. this difference is inevitable given javascript's use of dynamic typing as was discussed in chapter 2: since the
type of a variable is not known until runtime, only then can overload resolution occur. as an example, consider the following java class that...
... although this has the benefit of selecting a method that may be a better match for each call, it does have an impact on performance since more work is done at each call. in practice this performance cost hasn't been noticeable in real applications. because overload resolut...
...And 6 more matches
JS::CompileOptions
this article covers features introduced in spidermonkey 17 compile options classes. constructor js::readonlycompileoptions(); // added in spidermonkey 31 js::owningcompileoptions(jscontext *cx); // added in spidermonkey 31 js::compileoptions(jscontext *cx, jsversion version = jsversion_unknown); 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. version jsversion javascript version used to compile the script. methods some methods of js::owningcompileoptions and js::compileoptions return the instance itself to allow method chain. methods of js::readonlycompileoptions ...
...returns false if it failed to duplicate. ...
...returns false if it failed to duplicate. ...
...And 6 more matches
JS::Value
js::value is the
type of javascript values in the jsapi. a c++ variable of
type js::value represents a value in javascript: a string, number, object (including arrays and functions), boolean, symbol, null, or undefined. js::value is a class whose internal structure is an implementation detail. embeddings should not rely on observed representation details or upon the size of js::value. ...
...f
type js::value represents a value in javascript: a string, number, object (including arrays and functions), boolean, symbol, null, or undefined. js::value is a class whose internal structure is an implementation detail. embeddings should not rely on observed representation details or upon the size of js::value. ...
...epresents a value in javascript: a string, number, object (including arrays and functions), boolean, symbol, null, or undefined. js::value is a class whose internal structure is an implementation detail. embeddings should not rely on observed representation details or upon the size of js::value. ...
...And 6 more matches
JS_ConvertValue
obsolete since jsapi 38this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. converts a javascript value to a value of a specific javascript
type. syntax bool js_convertvalue(jscontext *cx, js::handlevalue v, js
type type, js::mutablehandlevalue vp); name
type description cx jscontext * the context in which to perform the conversion. requires request. ...
...otherwise js_convertvalue reports an error. vp js::mutablehandlevalue out parameter. on success, *vp receives the converted value. ...
...otherwise js_convertvalue reports an error. vp js::mutablehandlevalue out parameter. on success, *vp receives the converted value. ...
...And 6 more matches
SpiderMonkey 1.8.7
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 spidermonkey 1.8.7 is supported on all the platforms where firefox 10 runs. spidermonkey 1.8.7 includes
type inference, which boosts the speed of the jägermonkey jit by about 30% over version 1.8.5.
type inference largely obviates tracemonkey, so the tracemonkey 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, just not as fast. mig...
...uage, just not as fast. migrating to spidermonkey 1.8.7 this covers migrating from version 1.8.5. see the 1.8.5 release notes for information on migrating from earlier versions. the following features in earlier versions of spidermonkey have been dropped. xxx is there anything here? spidermonkey 1.8.7 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi
types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. xxx is there anything here? these a...
...eeds updating javascript 1.8.5 adds support for ecmascript edition 5, including es5 strict mode. for details, see new in javascript 1.8.5. note that there are a very small number of incompatibilities between es5 and and es3, the version of ecmascript supported by spidermonkey versions 1.5 through 1.8. these are discussed in annex e of the es5 specification. spidermonkey 1.8.5 also ships with js-c
types, a foreign-function interface for privileged javascript. to enable js-c
types in your embedding, you must configure with the --enable-c
types option and choose one of the configuration options to enable nspr (e.g. --with-system-nspr). xxx all sections below need updating garbage collection spidermonkey 1.8.5 introduces a conservative stack-scanning garbage collector. unlike the exact garbage colle...
...And 6 more matches
How to build an XPCOM component in JavaScript
ou may not need to define a new one. you can browse existing xpcom interfaces at various locations in the mozilla source code, or using xpcomviewer, a gui for browsing registered interfaces and components. you can download an old version of xpcomviewer that works with firefox 1.5 from mozdev mirrors. if an interface exists that meets your needs, then you do not need to write an idl, or compile a
typelib, and may skip to the next section. if you don't find a suitable pre-existing interface, then you must define your own. xpcom uses a dialect of idl to define interfaces, called xpidl. here's the xpidl definition for our helloworld component: helloworld.idl #include "nsisupports.idl" [scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)] interface nsihelloworld : nsisupports { string hel...
...l to define interfaces, called xpidl. here's the xpidl definition for our helloworld component: helloworld.idl #include "nsisupports.idl" [scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)] interface nsihelloworld : nsisupports { string hello(); }; note that you must generate a new uuid for each xpcom component that you create. see generating guids for more information. compiling the
typelib your interface definition must be compiled into a binary format (xpt) in order to be registered and used within mozilla applications. the compilation can be done using the gecko sdk. you can learn how to get mac, linux, and windows versions of the gecko sdk by reading the article gecko sdk. for code outside the tree note: on windows if you download the gecko sdk without the whole build tree...
... will run with no errors but not do anything. to fix this download the mozilla build tools for windows and copy the dlls from windows\bin\x86 within the zip into the bin directory of the gecko sdk. note: the mac version of the sdk provided for download is powerpc-only. if you need an intel version, you'll need to compile it yourself as described on that page. execute this command to compile the
typelib. here, {sdk_dir} is the directory in which you unpacked the gecko sdk. {sdk_dir}/bin/xpidl -m
typelib -w -v -i {sdk_dir}/idl -e helloworld.xpt helloworld.idl note: on windows you must use forward slashes for the include path. note: (the -i flag is an uppercase i, not a lowercase l.) this will create the
typelib file helloworld.xpt in the current working directory. for a new component in ...
...And 6 more matches
mozIStorageValueArray
earray interface obtains provides methods to obtain data from a given result. for an introduction on how to use this interface, see the storage overview document. storage/public/mozistoragevaluearray.idlscriptable please add a summary to this article. ...
...gned long aindex); double getdouble(in unsigned long aindex); autf8string getutf8string(in unsigned long aindex); astring getstring(in unsigned long aindex); void getblob(in unsigned long aindex, out unsigned long adatasize, [array,size_is(adatasize)] out octet adata); boolean getisnull(in unsigned long aindex); attributes attribute
type description numentries unsigned long the number of entries in the array. constants constant value description value_
type_null 0 null data
type. value_
type_integer 1 integer data
type. value_
type_float 2 float data
type. value_
type_text 3 text data
type. value_
type_blob 4 blob data t...
... numentries unsigned long the number of entries in the array. constants constant value description value_
type_null 0 null data
type. value_
type_integer 1 integer data
type. value_
type_float 2 float data
type. value_
type_text 3 text data
type. value_
type_blob 4 blob data
type. methods get
typeofindex() returns the
type of the value at the given column index. long get
typeofindex( in unsigned long aindex ); parameters aindex the zero-based numerical index for the column to get the data from. ...
...And 6 more matches
nsIAccessNode
a queryinterface to nsiaccessible will succeed. ...
...read only. note: renamed from accessibledocument in gecko 2.0 ...
...read only. note: renamed from accessibledocument in gecko 2.0 domnode node the dom node this nsiaccessnode is associated with. read only. ...
...And 6 more matches
nsIAccessibleRetrieval
create a new accessible of the appropriate ty...
...ccessiblefor(in nsidomnode anode); nsiaccessible getcachedaccessible(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsiaccessnode getcachedaccessnode(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsidomnode getrelevantcontentnodefor(in nsidomnode anode); astring getstringevent
type(in unsigned long aevent
type); astring getstringrelation
type(in unsigned long arelation
type); astring getstringrole(in unsigned long arole); nsidomdomstringlist getstringstates(in unsigned long astates, in unsigned long aextrastates); methods getaccessiblefor() return an nsiaccessible for a dom node in pres shell 0. create a new accessible of the appropriate
type if necessary, or use one ...
...nsiaccessible 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. ...
...And 6 more matches
nsIIOService
(in string ascheme); nsichannel newchannel(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); obsolete since gecko 48 nsichannel newchannel2(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri, in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicy
type); nsichannel newchannelfromuri(in nsiuri auri); obsolete since gecko 48 nsichannel newchannelfromuri2(in nsiuri auri, in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in unsigned long asecurityflags, in unsigned long acontentpolicy
type); nsichannel newchannelfromuriwithloadinfo(in nsiuri auri, in nsiloadinfo aloadinfo...
...in unsigned long acontentpolicy
type); nsichannel newchannelfromuriwithloadinfo(in nsiuri auri, in nsiloadinfo aloadinfo); nsichannel newchannelfromuriwithproxyflags2(in nsiuri auri, in nsiuri aproxyuri, in uint32_t aproxyflags,in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicy
type); nsiuri newfileuri(in nsifile afile); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute
type description offline boolean returns true if networking is in "offline" mode. when in offline mode, attempts to access the network will fail (although this does not necessarily correlate with whe...
...nel based on aspec and abaseuri. newchannel2() a shortcut method to avoid repeated calls of newuri() and newchannelfromuri(). nsichannel newchannel2( in autf8string aspec, in string aorigincharset, in nsiuri abaseuri, in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicy
type, ); parameters aspec the spec for the desired uri. aorigincharset the charset for the uri. may be null. abaseuri the base uri for the spec. may be null. if aspec is an absolute url, this parameter is ignored. aloadingnode the loadingdocument of the channel. this is the document/element that will get access to the result of this request. for example for an image load, it's the documen...
...And 6 more matches
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 / seamonkey 1.0) inherits from: nsisupports method overview void addparam(in astring name, in astring value, in astring response
type); nsisearchsubmission getsubmission(in astring data, [optional] in astring response
type, [optional] in astring purpose); boolean supportsresponse
type(in astring response
type); 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 ...
...d be hidden from the user. iconuri nsiuri a nsiuri corresponding to the engine's icon, stored locally. may be null. read only. name astring the display name of the search engine. this is a unique identifier. read only. searchform astring a url string pointing to the engine's search form. read only. ...
... iconuri nsiuri a nsiuri corresponding to the engine's icon, stored locally. may be null. read only. name astring the display name of the search engine. this is a unique identifier. read only. searchform astring a url string pointing to the engine's search form. read only.
type long the search engine
type. read only. ...
...And 6 more matches
nsIAbCard/Thunderbird3
e instead of as attributes on the interface, allowing it to be more flexible. ...
...e card: names: firstname, lastname phoneticfirstname, phoneticlastname displayname, nickname spousename, familyname primaryemail, secondemail home contact: homeaddress, homeaddress2, homecity, homestate, homezipcode, homecountry homephone, homephone
type work contact. ...
...e, lastname phoneticfirstname, phoneticlastname displayname, nickname spousename, familyname primaryemail, secondemail home contact: homeaddress, homeaddress2, homecity, homestate, homezipcode, homecountry homephone, homephone
type work contact. ...
...And 6 more matches
Address Book examples
addressbook.deletecards(cardstodelete); how do i add and use my own properties? use the setproperty/getproperty functions on nsiabcard to set your property in the same way as you would do with normal properties: card.setproperty("random1", "xyz"); card.setproperty("random2", "foo"); ... my value = card.getproperty("random1"); note: local (mork) address books are currently the only built-in
type of address book that supports saving of non-built-in properties. however, outlook directories are the only other built-in write capable directories. how do i add/edit/delete mailing lists? adding a mailing list first create a mailing list object and initialize it: var maillist = components.classes["@mozilla.org/addressbook/directoryproperty;1"] .createinstance(compone...
...ndow.opendialog("chrome://messenger/content/addressbook/abeditlistdialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {abcard:abcard, listuri:listuri}); new address book dialog unlike the edit address book dialog, the new address book dialog does not currently have the facility to get the chrome uri based on the address book
type. the following options are available. for local (mork) address books: window.opendialog( "chrome://messenger/content/addressbook/abaddressbooknamedialog.xul", "", "chrome,modal=yes,resizable=no,centerscreen", null); for ldap address books: window.opendialog("chrome://messenger/content/addressbook/pref-directory-add.xul", "", "chrome,modal=yes,resiz...
... the call to opendialog. using the propertieschromeuri means that the different implementations can call up their own dialog. window.opendialog(addressbook.propertieschromeuri, "editdirectory", "chrome,modal=yes,resizable=no", {selecteddirectory: addressbook}); how do i set up my own address book? as of thunderbird 7.0, implementing your own address book
type can be done with either javascript or with a binary component. in either case, you'll need: a factory object implementing nsiabdirfactory a directory object implementing nsiabdirectory if you are using c++, you can inherit from nsabdirproperty and override functions for your specific implementation to save implementing all the functions on nsiabdirectory yourself. the best example of a bina...
...And 6 more matches
UInt64
you use the uint64 object to create and manipulate 64-bit unsigned integers. note: it's important to note that the 64-bit integer objects created by uint64 are not uint64 objects; rather, they're opaque objects whose values you manipulate through the other methods on the uint64 object. see 64-bit integers for details. syntax creates and returns a new 64-bit unsigned integer. ...
...onsist of an optional minus sign, followed by either a decimal number or "0x" or "0x" followed by a hexadecimal number. the string is then converted into the corresponding 64-bit integer value. you can therefore use a string to represent a 64-bit value that is too large to represent as a 32-bit javascript number. return value a new object representing the specified value. exceptions thrown
typeerror the specified value cannot be converted into a 64-bit integer. either it's not a number, string, or 64-bit integer object, or it's a string that is incorrectly formatted or contains a value outside the range that can be represented in 64 bits. this will also be thrown if the source value is a floating-point number that can't be precisely represented as a 64-bit integer. method overview ...
...hi(a); uint64 join(high, low); number lo(a); string tosource(); string tostring([radix]); methods compare() compares two 64-bit integer values. number compare( a, b ); parameters a the first value to compare. b the second value to compare. return value the returned value is -1 if a < b, 0 if a == b, and 1 if a > b. exceptions thrown
typeerror one or both of the specified values is not a 64-bit integer (either signed or unsigned). hi() returns the high 32 bits of the specified value. number hi( num ); parameters num the value whose high 32 bits are to be returned. return value the high 32 bits of num are returned. this is essentially num >> 32. exceptions thrown
typeerror num is not a 64-bit integer object. ...
...And 6 more matches
The JavaScript input interpreter - Firefox Developer Tools
you can interpret javascript expressions in real time using the interpreter provided by the web console. it has two modes: single-line entry and multi-line entry. single-line mode for single-line entry, you can
type javascript expressions in the field at the bottom of the console log, at the >> prompt. to enter expressions in single-line mode,
type at the prompt and press enter. to enter multi-line expressions, press shift+enter after typing each line, then enter to run all the entered lines. the expression you
type is echoed under the input prompt, followed by the result. ...
...at the prompt and press enter. to enter multi-line expressions, press shift+enter after typing each line, then enter to run all the entered lines. the expression you
type is echoed under the input prompt, followed by the result. if your input does not appear to be complete when you press enter, then the console treats this as shift+enter , enabling you to finish your input. for example, if you
type: function foo() { and then enter, the console does not immediately execute the input, but behaves as if you had pressed shift+enter , so you can finish entering the function definition. multi-line mode for multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press ctrl+b (windows/linux) or cmd+b (macos). the multi-line editing pane opens on ...
... via the settings ("gear") menu in the web console toolbar. the menuitem instant evaluation has a checkmark next to it when the feature is enabled, which is missing when it is disabled. select the menuitem to change the state. execution context code that you have executed becomes part of the execution context, regardless of what editing mode you were in when you executed it. for example, if you
type a function definition in the multi-line editor, and click run, you can switch to single-line mode and still use your function. syntax highlighting the text you enter has syntax highlighting as soon as you have
typed enough for the highlighter to parse it and infer the meanings of the "words". the output is highlighted as well where appropriate. note: syntax highlighting is not visible in y...
...And 6 more matches
Using the CSS Painting API - Web APIs
or in an external javascript file linked to from the document. in our example, the paintworklet is stored on github. css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/01partone/header-highlight.js'); reference the paint worklet in css once we have a registered paint worklet, we can use it in css. employ the css paint() function like we would any other <image>
type, using the same string identifier we used in the paintworklet's registerpaint() function. .fancy { background-image: paint(headerhighlight); } putting it together we can then add the fancy class to any element on the page to add a yellow box as a background: <h1 class="fancy">my cool header</h1> the following example will look like the image above in browsers supporting the css painting ap...
... registerpaint('boxbg', class { static get contextoptions() { return {alpha: true}; } /* use this function to retrieve any custom properties (or regular propert...
... registerpaint('boxbg', class { static get contextoptions() { return {alpha: true}; } /* use this function to retrieve any custom properties (or regular properties, such as 'height') defined for the element, return them in the specified array *...
...And 6 more matches
DataTransfer - Web APIs
the datatransfer object is used to hold the data that is being dragged during a drag and drop operation. it may hold one or more data items, each of one or more data
types. for more information about drag and drop, see html drag and drop api. this object is available from the datatransfer property of all drag events. constructor datatransfer() creates and returns a new datatransfer object. properties standard properties datatransfer.dropeffect gets the
type of drag-and-drop operation currently selected or sets the operation to a new
type. the value must be none, copy, link or move. datatransfer.effectallowed provides all of the
types of operations that are possible. must be one of none, copy, copylink, copymove, link, linkmove, move, all or uninitialized. datatransfer.files c...
...ssible. must be one of none, copy, copylink, copymove, link, linkmove, move, all or uninitialized. datatransfer.files contains a list of all the local files available on the data transfer. if the drag operation doesn't involve dragging files, this property is an empty list. datatransfer.items read only gives a datatransferitemlist object which is a list of all of the drag data. datatransfer.
types read only an array of strings giving the formats that were set in the dragstart event. gecko properties note: all of the properties in this section are gecko-specific. datatransfer.mozcursor gives the drag cursor's state. this is primarily used to control the cursor during tab drags. datatransfer.mozsourcenode read only the node over which the mouse cursor was located when the but...
...on by pressing escape. it will be false in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location. deprecated properties datatransfer.mozitemcount read only gives the number of items in the drag operation. removed in firefox 71. methods standard methods datatransfer.cleardata() remove the data associated with a given
type. the
type argument is optional. if the
type is empty or not specified, the data associated with all
types is removed. if data for the specified
type does not exist, or the data transfer contains no data, this method will have no effect. datatransfer.getdata() retrieves the data for a given
type, or an empty string if data for that
type does not exist or the data transfer contains no data. data...
...And 6 more matches
EventTarget - Web APIs
"30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor eventtarget() creates a new eventtarget object instance. methods eventtarget.addeventlistener() registers an event handler of a specific event
type on the eventtarget. eventtarget.removeeventlistener() removes an event listener from the eventtarget. eventtarget.dispatchevent() dispatches an event to this eventtarget. additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event targets to implement onevent properties. see also webidl bindings. void seteventhandler(domstring t...
...vent listener from the eventtarget. eventtarget.dispatchevent() dispatches an event to this eventtarget. additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event targets to implement onevent properties. see also webidl bindings. ...
...ozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event targets to implement onevent properties. see also webidl bindings. ...
...And 6 more matches
HTMLFormElement - Web APIs
htmlformelement.target a domstring reflecting the value of the form's target html attribute, indicating where to display the results received from submitting the form. htmlformelement.action a domstring reflecting the value of the form's action html attribute, containing the uri of a program that processes the information submitted by the form. htmlformelement.encoding or htmlformelement.enc
type a domstring reflecting the value of the form's enc
type html attribute, indicating the
type of content that is used to transmit the form to the server. only specified values can be set. the two properties are synonyms. htmlformelement.acceptcharset a domstring reflecting the value of the form's accept-charset html attribute, representing the character encoding that the server accepts. htmlform...
...lements collection to avoid ambiguity between an element name and a form property. never use "elements" as an element name. if you are not using javascript, this will not cause a problem. elements that are considered form controls the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose
type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms. examples creating a new form element, modifying its attributes, then submitting it: const f = document.createelement("form"); // create a form docu...
...ody f.action = "/cgi-bin/some.cgi"; // add action and method attributes f.method = "post"; f.submit(); // call the form's submit() method extract information from a <form> element and set some of its attributes: <form name="forma" action="/cgi-bin/test" method="post"> <p>press "info" for form details, or "set" to change those details.</p> <p> <button
type="button" onclick="getforminfo();">info</button> <button
type="button" onclick="setforminfo(this.form);">set</button> <button
type="reset">reset</button> </p> <textarea id="form-info" rows="15" cols="20"></textarea> </form> <script> function getforminfo(){ // get a reference to the form via its name var f = document.forms["forma"]; // the form properties we're interested in ...
...And 6 more matches
HTMLInputElement.stepDown() - Web APIs
the htmlinputelement.stepdown([n]) method decrements the value of a numeric
type of <input> element by the value of the step attribute or up to n multiples of the step attribute if a number is passed as the parameter. the method, when invoked, decrements the value by (step * n), where n defaults to 1 if not specified, and step defaults to the default value for step if not specified. valid on all numeric, date, and time input
types that support the step attribute, includingdate, month, week, time, datetime-local, number, and range. given <input id="mytime"
type="time" max="17:00" step="900" value="17:00">, invoking mytime.step(3) will change the value to 16:15, decrementing the time by 3 * 900, or 45 minutes. mytime.step(), with no parameter, would have resulted in 16:45, as n defaults to ...
...udingdate, month, week, time, datetime-local, number, and range. given <input id="mytime"
type="time" max="17:00" step="900" value="17:00">, invoking mytime.step(3) will change the value to 16:15, decrementing the time by 3 * 900, or 45 minutes. mytime.step(), with no parameter, would have resulted in 16:45, as n defaults to 1. ...
...ime" max="17:00" step="900" value="17:00">, invoking mytime.step(3) will change the value to 16:15, decrementing the time by 3 * 900, or 45 minutes. mytime.step(), with no parameter, would have resulted in 16:45, as n defaults to 1. <!-- decrements by intervals of 900 seconds (15 minute) --> <input
type="time" max="17:00" step="900"> <!-- decrements by intervals of 7 days (one week) --> <input
type="date" max="2019-12-25" step="7"> <!-- decrements by intervals of 12 months (one year) --> <input
type="month" max="2019-12" step="12"> the method, when invoked, changes the form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set within the form control. the default value for the parameter, if not is passed, is 1. the method will no...
...And 6 more matches
HTML Drag and Drop API - Web APIs
ons to use drag-and-drop features in browsers. the user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. a translucent representation of the draggable elements follows the pointer during the drag operation. for web sites, extensions, and xul applications, you can customize which elements can become draggable, the
type of feedback the draggable elements produce, and the droppable elements. this overview of html drag and drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces. drag events html drag-and-drop uses the dom event model and drag events inherited from mouse events. a typical drag operation begins wh...
...teps to add drag-and-drop support to an application, and an interoperability summary of the interfaces. drag events html drag-and-drop uses the dom event model and drag events inherited from mouse events. a typical drag operation begins when a user selects a draggable element, drags the element to a droppable element, and then releases the dragged element. during drag operations, several event
types are 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...
... note: neither dragstart nor dragend events are fired when dragging a file into the browser from the os. interfaces the html drag and drop interfaces are dragevent, datatransfer, datatransferitem and datatransferitemlist. the dragevent interface has a constructor and one datatransfer property, which is a datatransfer object. datatransfer objects include the drag event's state, such as the
type of drag being done (like copy or move), the drag's data (one or more items), and the mime
type of each drag item. datatransfer objects also have methods to add or remove items to the drag's data. the dragevent and datatransfer interfaces should be the only ones needed to add html drag and drop capabilities to an application. (firefox supports some gecko-specific extensions to the datatransfer ob...
...And 6 more matches
MediaConfiguration - Web APIs
the mediaconfiguration mediacapabilities dictionary of the media capabilities api describes how media and audio files must be configured, or defined, to be passed as a parameter of the mediacapabilities.encodinginfo() and mediacapabilities.encodinginfo() methods. properties a valid configuration includes a valid encoding configuration
type or decoding configuration
type and a valid audio configuration or video configuration. ...
... how media and audio files must be configured, or defined, to be passed as a parameter of the mediacapabilities.encodinginfo() and mediacapabilities.encodinginfo() methods. properties a valid configuration includes a valid encoding configuration
type or decoding configuration
type and a valid audio configuration or video configuration. if you plan on querying encoding information, set the media
type to record or transmission. for decoding, set the
type to file or media-source. ...
... properties a valid configuration includes a valid encoding configuration
type or decoding configuration
type and a valid audio configuration or video configuration. if you plan on querying encoding information, set the media
type to record or transmission. for decoding, set the
type to file or media-source. if the media is an audio file, the audio configuration must include a valid audio mime
type as content
type, the number of channels, the bitrate, and the sample rate. video configurations mush include a valid video mime
type as content
type, the bitrate, and framerate, along with the width and the height of the video file. all of these must be present, as in the examples below, or a
typeerror will occur. a valid media decoding configuration, to be submitted as the parameter for mediacapa...
...And 6 more matches
Using the Resource Timing API - Web APIs
as an xmlhttprequest, <svg>, image, script, etc.). the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc. the interface also includes other properties that provide data about the size of the fetched resource as well as the
type of resource that initiated the fetch. this document shows the use of resource timing interfaces. for more details about the interfaces, including examples, see each interface's reference page and the references in the see also section. a live version of the examples is available on github, as is the source code. pull requests and bug reports are welcome. resource loading phases an application...
...s a detailed profile of the resource loading phases and this data can be used to help identify performance bottlenecks. ...
...ng any applied content-codings. the following example demonstrates using these three properties. function display_size_data(){ // check for support of the performanceresourcetiming.*size properties and print their values // if supported. ...
...And 6 more matches
Using bounded reference spaces - Web APIs
ping their real-world movement into the virtual environment. imagine how uncomfortable it would feel if you moved 100 meters each time you took a step! the requirements, then, for a bounded reference space are: xr hardware that can track the user's movement in the real world, such as a camera-based system. a physical space with enough room to move around safely. basics the xrreferencespace
type of all bounded reference spaces is bounded-floor. this is the only
type of bounded reference space currently available; in all others, if you need boundaries, you will have to manage them yourself. because bounded-floor is a floor-bound reference space, the user starts out on the floor of the space, which is sensible given the real-world implications otherwise. therefore, the bounded reference s...
...are that does not have an inherent boundary defined may or may not support the bounded reference space. if it does, it likely has a system in place to allow the user to specify or select the boundaries to apply if a bounded space is to be used. however, it's entirely possible that the device will simply decline to support bounded spaces at all, so you should be prepared to fall back to some other
type of reference space. understanding boundaries as mentioned previously, the boundary is defined as an array of points located at floor level, each defining a corner of the boundary area, going around the origin in a clockwise manner. this is demonstrated in the diagram below. this diagram defines the boundaries of room with the origin in the center, as required, and a set of 12 points represen...
...floor when calling the xrsystem method requestsession() isn't enough to get a bounded space. you need to ask for one when you call requestreferencespace() as well. ...
...And 6 more matches
XPathExpression.evaluate() - Web APIs
this must be one of the xpathresult.constants. result optional allows to specify a result object which may be reused and returned by this method. ...
...this must be one of the xpathresult.constants. result optional allows to specify a result object which may be reused and returned by this method. ...
...this must be one of the xpathresult.constants. result optional allows to specify a result object which may be reused and returned by this method. ...
...And 6 more matches
XPathResult - Web APIs
the xpathresult interface represents the results generated by evaluating an xpath expression within the context of a given node. since xpath expressions can result in a variety of result
types, this interface makes it possible to determine and handle the
type and value of the result. properties xpathresult.booleanvalueread only a boolean representing the value of the result if result
type is boolean_
type. xpathresult.invaliditeratorstateread only signifies that the iterator has become invalid. ...
.... since xpath expressions can result in a variety of result
types, this interface makes it possible to determine and handle the
type and value of the result. properties xpathresult.booleanvalueread only a boolean representing the value of the result if result
type is boolean_
type. xpathresult.invaliditeratorstateread only signifies that the iterator has become invalid. it is true if result
type is unordered_node_iterator_
type or ordered_node_iterator_
type and the document has been modified since this result was returned. xpathresult.numbervalueread only a number representing the value of the result if result
type is number_
type. xpathresult.result
typeread only a number code representing the
type of the result, as defined by the
type constants. xpathresult.singlenodevalueread only ...
... methods xpathresult.iteratenext() if the result is a node set, this method iterates over it and returns the next node from it or null if there are no more nodes. xpathresult.snapshotitem() returns an item of the snapshot collection or null in case the index is not within the range of nodes. ...
...And 6 more matches
CSS reference - CSS: Cascading Style Sheets
use this css reference to browse an alphabetical index of all of the standard css properties, pseudo-classes, pseudo-elements, data
types, and at-rules. you can also browse key css concepts and a list of selectors organized by
type. 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. the syntax for each specified value depends on the data
type defined for each specified property. style rule examples strong { color: red; } div.menu-bar li:hover > ul {...
...r()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-
typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-v...
...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-bordermask-border-modemask-border-outsetma...
...And 6 more matches
Adding captions and subtitles to HTML5 video - Developer guides
for this article we will refer to the text tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of-hearing people. the <track> element html5 allows us to specify subtitles for a video using the <track> element. the various attributes of this element allow us to specify such things as the
type of content that we're adding, the language it's in, and of course a reference to the text file that contains the actual subtitle information. webvtt the files that contain the actual subtitle data are simple text files that follow a specified format, in this case the web video text tracks (webvtt) format. the webvtt specification is still being worked on, but major parts of it are stable so we ...
... need to make use of the new html5 <track> element to add our subtitle files to the html5 video. ...
...ur subtitle files to the html5 video. ...
...And 6 more matches
Creating a cross-browser video player - Developer guides
ideo first of all the <video> element is defined, contained within a <figure> element that acts as the video container. to anyone familiar with html5 markup and the <video> element, there should be nothing here that surprises you. ...
...ent that acts as the video container. to anyone familiar with html5 markup and the <video> element, there should be nothing here that surprises you. ...
...<video> element, there should be nothing here that surprises you. ...
...And 6 more matches
HTML attribute: max - HTML: Hypertext Markup Language
the element fails constraint validation. this value must be greater than or equal to the value of the min attribute. if the max attribute is present by is not specified or is invalid, no max value is applied. if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission. valid for the numeric input
types, including the date, month, week, time, datetime-local, number and range
types, and both the <progress> and <meter> elements, the max attribute is a number that specifies the most positive value a form control to be considered valid. if the value exceeds the max value allowed, the validitystate.rangeoverflow will be true, and the the control will be matched by the :out-of-range and :invalid pse...
...l, number and range
types, and both the <progress> and <meter> elements, the max attribute is a number that specifies the most positive value a form control to be considered valid. if the value exceeds the max value allowed, the validitystate.rangeoverflow will be true, and the the control will be matched by the :out-of-range and :invalid pseudo-classes. ...
...
types, and both the <progress> and <meter> elements, the max attribute is a number that specifies the most positive value a form control to be considered valid. if the value exceeds the max value allowed, the validitystate.rangeoverflow will be true, and the the control will be matched by the :out-of-range and :invalid pseudo-classes. ...
...And 6 more matches
HTML attribute: readonly - HTML: Hypertext Markup Language
attribute, when present, makes the element not mutable, meaning the user can not edit the control. if the readonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation. ...
...edit the control. if the readonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation. the readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number<input>
types and the <textarea> form control elements. if present on any of these input
types and elements, the :read-only pseudo class will match. if the attribute is not included, the :read-write pseudo class will match. the attribute is not supported or relevant to <select> or input
types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input
type. range and color, as both have default values. it is also not supp...
... note: only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply. ...
...And 6 more matches
JavaScript error reference - JavaScript
is an object based upon the error object, and has a name and a message. errors displayed in the web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code. for a beginner's introductory tutorial on fixing javascript errors, see what went wrong? troubleshooting javascript. list of errors in this list, each page is listed by name (the
type of error) and message (a more detailed human-readable error message). together, these two properties provide a starting point toward understanding and resolving the error. for more information, follow the links below! error: permission denied to access property "x"internalerror: too much recursionrangeerror: argument is not a valid code pointrangeerror: invalid array lengthrangeerror: invalid da...
...xerror: missing = in const declarationsyntaxerror: missing ] after element listsyntaxerror: missing formal parametersyntaxerror: missing name after . ...
...er element listsyntaxerror: missing formal parametersyntaxerror: missing name after . ...
...And 6 more matches
Comparing Reflect and Object methods - JavaScript
behavior, there are often subtle differences between them. the table below details the differences between the methods available on the object and reflect apis. please note that if a method does not exist in an api, it is marked as n/a. method name object reflect defineproperty() object.defineproperty() returns the object that was passed to the function. returns a
typeerror if the property was not successfully defined on the object. reflect.defineproperty() returns true if the property was defined on the object and false if it was not. defineproperties() object.defineproperties() returns the objects that were passed to the function. returns a
typeerror if any properties were not successfully defined on the object. n/a set() n/a ...
...e property was defined on the object and false if it was not. defineproperties() object.defineproperties() returns the objects that were passed to the function. returns a
typeerror if any properties were not successfully defined on the object. n/a set() n/a reflect.set() returns true if the property was set successfully on the object and false if it was not. throws a
typeerror if the target was not an object. get() n/a reflect.get() returns the value of the property. throws a
typeerror if the target was not an object. deleteproperty() n/a reflect.deleteproperty() returns true if the property was deleted from the object and false if it was not. getownpropertydescriptor() object.getownpropertydescriptor() returns a property ...
...rns a property descriptor of the given property if it exists on the object argument passed in, and returns undefined if it does not exist. however, if an object is not passed in as the first argument, it will be coerced into an object. reflect.getownpropertydescriptor() returns a property descriptor of the given property if it exists on the object. ...
...And 6 more matches
RegExp - JavaScript
r of the regular expression object—for example, new regexp('ab+c')—results in runtime compilation of the regular expression. use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and obtain it from another source, such as user input. flags in constructor starting with ecmascript 6, new regexp(/ab+c/, 'i') no longer throws a
typeerror ("can't supply flags when constructing one regexp from another") when the first argument is a regexp and the second flags argument is present. a new regexp from the arguments is created instead. when using the constructor function, the normal string escape rules (preceding special characters with \ when included in a string) are necessary. for example, the following are equivalent: let re...
...ue. (perl is the programming language from which javascript modeled its regular expressions.). see also deprecated regexp properties. constructor regexp() creates a new regexp object. static properties get regexp[@@species] the constructor function that is used to create derived objects. regexp.lastindex the index at which to start the next match. ...
...expressions.). see also deprecated regexp properties. constructor regexp() creates a new regexp object. static properties get regexp[@@species] the constructor function that is used to create derived objects. regexp.lastindex the index at which to start the next match. instance properties regexp.proto
type.flags a string that contains the flags of the regexp object. regexp.proto
type.dotall whether . matches newlines or not. ...
...And 6 more matches
Codecs used by WebRTC - Web media technologies
o without complicating the demultiplexing process. the entire range of bit rates supported by opus (6 kbps to 510 kbps) is supported in webrtc, with the bit rate allowed to be dynamically changed. higher bit rates typically improve quality. bit rate recommendations given a 20 millisecond frame size, the following table shows the recommended bit rates for various forms of media. media
type recommended bit rate range narrow-band speech (nb) 8 to 12 kbps wide-band speech (wb) 16 to 20 kbps full-band speech (fb) 28 to 40 kbps full-band monaural music (fb mono) 48 to 64 kbps full-band stereo music (fb stereo) 64 to 128 kbps the bit rate may be adjusted at any time. in order to avoid network congestion, the averag...
...dec—the first step when configuring codecs for an rtcpeerconnection is to get the list of available codecs. to do this, you first have to establish a connection on which to get the list. there are a couple of ways you can do this. the most efficient way is to use the static method rtcrtpsender.getcapabilities() (or the equivalent rtcrtpreceiver.getcapabilities() for a receiver), specifying the
type of media as the input parameter. for example, to determine the supported codecs for video, you can do this: codeclist = rtcrtpsender.getcapabilities("video").codecs; now codeclist is an array of rtcrtpcodeccapability objects, each describing one codec configuration. also present in the list will be entries for retransmission (rtx), redundant coding (red), and forward error correction (fec). if...
... returned rtcrtpsendparameters object, we set codeclist to the codecs property and return to the caller. if no video track is found, we set codeclist to null. on return, then, codeclist is either null to indicate that no video tracks were found or it's an array of rtcrtpcodecparameters objects, each describing one permitted codec configuration. of special importance in these objects: the payload
type property, which is a one-byte value which uniquely identifies the described configuration. note: the two methods for obtaining lists of codecs shown here use different output
types in their codec lists. be aware of this when using the results. customizing the codec list once you have a list of the available codecs, you can alter it and then send the revised list to rtcrtptransceiver.setcodec...
...And 6 more matches
<pattern> - SVG: Scalable Vector Graphics
efs> <pattern id="star" viewbox="0,0,10,10" width="10%" height="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile. ...
... cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile. value
type: <length>|<percentage>; default value: 0; animatable: yes href this attribute reference a template pattern that provides default values for the <pattern> attributes. value
type: <url>; default value: none; animatable: yes patterncontentunits this attribute defines the coordinate system for the contents of the <pattern>. value
type: userspaceonuse|objectboundingbox; default value: userspaceonuse; animatable: yes note: this attribute has no effect if a viewbox attribute is specified on the <pattern> element. patterntransform this attribute contains the definition ...
...he contents of the <pattern>. value
type: userspaceonuse|objectboundingbox; default value: userspaceonuse; animatable: yes note: this attribute has no effect if a viewbox attribute is specified on the <pattern> element. patterntransform this attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system. value
type: <transform-list>; default value: none; animatable: yes patternunits this attribute defines the coordinate system for attributes x, y, width , and height. ...
...And 6 more matches
<radialGradient> - SVG: Scalable Vector Graphics
org/1999/xlink"> <defs> <radialgradient id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient. ...
...ed" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient. value
type: <length> ; default value: 50%; animatable: yes cy this attribute defines the y coordinate of the end circle of the radial gradient. value
type: <length> ; default value: 50%; animatable: yes fr this attribute defines the radius of the start circle of the radial gradient. ...
...nt. value
type: <length> ; default value: 50%; animatable: yes cy this attribute defines the y coordinate of the end circle of the radial gradient. value
type: <length> ; default value: 50%; animatable: yes fr this attribute defines the radius of the start circle of the radial gradient. the gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle. value
type: <length> ; default value: 50%; animatable: yes fx this attribute defines the x coordinate of the start circle of the radial gradient. value
type: <length> ; default value: same as cx; animatable: yes fy this attribute defines the y coordinate of the start circle of the radial gradient. ...
...And 6 more matches
Interacting with page scripts - Archive of obsolete content
page scripts to access page script objects from content scripts, you can use the global unsafewindow object. with unsafewindow you can see javascript objects that have been defined by page scripts, and if a page script has modified the behavior of native dom functions, you'll get the modified version of them as well. ...
...dow.clonedcontentscriptobject = cloneinto(contentscriptobject, unsafewindow); unsafewindow.assignedcontentscriptobject = contentscriptobject; the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works"
type="button" value="i will work"/> <input id="fails"
type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.addeventlistener("click", function() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("click", function() { alert(ass...
...since structured cloning doesn't work for...
...And 5 more matches
ui/frame - Archive of obsolete content
content is then displayed inside the toolbar. constructing frames the frame constructor takes one mandatory option, which is a url pointing to an html document supplied under your add-ons "data" directory. ...
...nd a couple of <span> elements, and includes a css file to style the content and a javascript script to implement behavior: <!doc
type html> <html> <head> <link href="city-info.css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script
type="text/javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html" }); var toolbar = toolbar({ name: ...
...ar is positioned between the address bar and the content window. it occupies the whole width of the browser window and is 18 pixels high on a normal-resolution display or 36 pixels high on a high-resolution (hidpi) display. this toolbar might look something like: scripting frames to add scripts to frames, include them directly from the frame's html content, as with a normal web page: <script
type="text/javascript" src="frame.js"></script> as usual, the path to the script is relative to the html file's location. messages logged from a frame script using the console will not appear in the terminal when you run the add-on using jpm run. however, they will appear in the browser console. this issue is being tracked as bug 982385. communicating with frames you can exchange messages betwee...
...And 5 more matches
XPCOM Objects - Archive of obsolete content
nly need to get and set preferences, and those methods are in nsiprefbranch. trying to access methods or attributes without having the right interface set will result in an exception being thrown. passing parameters passing parameters to xpcom methods is no different from other js objects, with some exceptions. in general, you can rely on javascript's ability to transform values to the correct
type, but it's usually best 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 p...
...f(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 long acount,[array, size_is(acount), retval] out string achildarray); this method returns an array of strings. the first parameter is an input that tells the method where to start looking. the second one will hold the length of the return array, and the third parameter wi...
...e method call. the method will set value for you. also, since js arrays have the length attribute to get their length, there's no need for the second parameter to be used, so we just pass it an empty object that we won't use. the second parameter is only necessary for callers from within c++ code that use pointers instead of high-level arrays. some commonly used xpcom methods require other xpcom
types as parameters. the addobserver method in nsiprefbranch2 is an example of this. void addobserver(in string adomain, in nsiobserver aobserver, in boolean aholdweak); luckily, you don't have to do anything special if you want to register your js object as a preference observer. the nsiobserver has a single method observe, so all you need to do is have an observe method in your object and you'...
...And 5 more matches
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
stream converters). nsdocumentopeninfo implements nsistreamlistener and proxies the nsistreamlistener calls over to the "real" stream listener once one is chosen. this is the class that handles deciding where the data from the load should go. supporting roles necko this is the mozilla networking library. this handles actually going out and getting the data. it also handles determining the mime
type of the data, which is used to decide who gets the data. category manager this is used in a last-ditch attempt to find a content listener. nsiuricontentlistener implementations we try to find one of these which can handle data of the
type we're looking at (that is, it can give us an nsistreamlistener to pump data into). most often, the one we find is nsdsuricontentlistener, which corresponds to a ...
...who gets the data. category manager this is used in a last-ditch attempt to find a content listener. nsiuricontentlistener implementations we try to find one of these which can handle data of the
type we're looking at (that is, it can give us an nsistreamlistener to pump data into). most often, the one we find is nsdsuricontentlistener, which corresponds to a docshell and handles most of the data
types that mozilla handles internally. nsiexternalhelperappservice if we can't do anything else with a load, we give it to the nsiexternalhelperappservice and let it look for a helper app, put up the "what do i do now?" dialog, and so forth. bird's eye view <map id="loaddiagrammap" name="loaddiagrammap"><area alt="(13) docontent()" coords="534,239,715,300" href="#nsiexternalhelperappservice::doconten...
...ther 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 nsuriloader::openchannel. nsuriloader::openchannel notifies the nsiuricontentlistener hanging off the window context, if any, of the start of the load; this gives embedders a chance to abort the load if this uri
type is something they want to handle in the embedding app. if the load is not aborted, we create an nsdocumentopeninfo object for this load, passing it the "this is a link click" boolean and the window context. we then set the channel's nsiloadgroup to the one from the window context. nsdocumentopeninfo::prepare is passed the channel to open. it calls getinterface on the window context to get and s...
...And 5 more matches
findbar - Archive of obsolete content
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, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey 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 attribute is only used when the findbar is constructed. ...
...e <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. findnextaccesskey
type: string the access key for the "find next" toolbar button in the findbar. findpreviousaccesskey
type: string the access key for the "find previous" toolbar button in the findbar. highlightaccesskey
type: string the access key for the "highlight" toolbar button in the findbar. matchcaseaccesskey
type: string the access key for the "match case" checkbox in the findbar. propert...
...And 5 more matches
Building Menus With Templates - Archive of obsolete content
» menus may be generated using a template in the same manner as other elements. however, unlike with other elements, the content of a menu is only generated once the menu has been opened. this means that a menu created with a template will not have any of the generated items until the user opens the menu, or a script opens the menu. ...
... a template in the same manner as other elements. however, unlike with other elements, the content of a menu is only generated once the menu has been opened. this means that a menu created with a template will not have any of the generated items until the user opens the menu, or a script opens the menu. this applies to menus on menubars, submenus, as well as menu-
type buttons such as those with a
type attribute set to menu. ...
... menu, or a script opens the menu. this applies to menus on menubars, submenus, as well as menu-
type buttons such as those with a
type attribute set to menu. this allows for better performance as the entire content of a complex menu does not need to be created until the user needs to use the menu. it is very simple to create a menu using a template. here is an example using an xml source: <button
type="menu" datasources="people.xml" ref="*" query
type="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-
type button. the...
...And 5 more matches
Numeric Controls - Archive of obsolete content
« previousnext » xul has two elements used for the entry of numeric values or ranges, and well as two elements for entering dates and times. these elements are only available in firefox 3 and later. number fields a textbox may be used for entering numbers by setting the value of the
type attribute to the value number. this
type of textbox may only be used to enter numbers. other characters are not allowed and are just ignored if
typed. in addition, arrow buttons appear beside the textbox to allow the user to cycle through the values. as with other textboxes, the default value can be specified with the value attribute. naturally, this value should be a number. however, the minimum and maximum values can also be specified using the min and max attributes. if these are set, ...
...e a number. however, the minimum and maximum values can also be specified using the min and max attributes. if these are set, you can control the range of values that the textbox may be set to. if the user enters a value less or greater than this value, it will be reset to the minimum or maximum value as necessary. for instance, the following numeric textbox has a range between 1 and 20. <textbox
type="number" min="1" max="20"/> as the default value isn't specified, it will default to 1, the minimum value. the min attribute is set to 1 to indicate a minimum possible value of 1 and the max attribute is set to 20 to indiciate a maximum possible value of 20. if the minimum value is not specified, it has a default value of 0. the maximum value defaults to the special value infinity which means th...
...mum value defaults to the special value infinity which means that there is no limit. other numeric textbox attributes the increment attribute may be used to specify by how much the value changes when the arrows are pressed. the default value is 1, but specifying a different value allows the number to change by a larger amount. for instance, the following example steps in multiples of 10. <textbox
type="number" increment="10" max="100"/> this textbox steps in multiples of 10 from 0 to 100. since the min attribute was not specified, it defaults to 0. note that the user can still enter other values if they are
typed in. the increment attribute only affects the arrow buttons. the user may also increment or decrement the value using this increment by using the up and down cursor keys while the tex...
...And 5 more matches
notificationbox - Archive of obsolete content
this property ...
... flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties currentnotification
type: notification element the currently displayed notification element or null. this property is read-only. allnotifications
type: nodelist nodelist of all notifications. ...
...tresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties currentnotification
type: notification element the currently displayed notification element or null. this property is read-only. allnotifications
type: nodelist nodelist of all notifications. this property is read-only. notificationshidden
type: boolean indicating whether the notification area should be hidden. events alertactive
type: event fired when a notification element is shown. alertclose
type: event fired when a notification element is closed. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattr...
...And 5 more matches
prefpane - Archive of obsolete content
ted, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="extensions.myextension.one"
type="bool"/> ... more preferences ... </preferences> <checkbox label="number one?" preference="pref_one"/> ... more ui elements ... </prefpane> attributes helpuri
type: uri the uri of the help page associated with a preference panel. the uri will be opened using the help viewer when the help button is pressed. image
type: uri the uri of the image to appear...
... helpuri
type: uri the uri of the help page associated with a preference panel. the uri will be opened using the help viewer when the help button is pressed. image
type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. 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. onpaneload
type: script code code defined here is called when the pane has been loaded, much like the load event for a window. selec...
...he 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. onpaneload
type: script code code defined here is called when the pane has been loaded, much like the load event for a window. selected
type: boolean this attribute will be set to true for the currently selected prefpane. to change the selected pane, use the prefwindow's showpane method. src
type: uri the uri of the overlay contents of preference pane. if this is not specified, the contents of the prefpane element is used. properties contentheight (readonly) the height (in pixels) of ...
...And 5 more matches
tabbox - Archive of obsolete content
row of tabs is displayed at the top of tabbox which may be used to switch between each page. the tabbox should contain two children, the first a tabs element which contains the tabs and the second a tabpanels element which contains the contents of the pages. more information is available in the xul tutorial. ...
...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 ...
... 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. ...
...And 5 more matches
XULRunner tips - Archive of obsolete content
unner 1.9 the xulrunner directory is ignored, while the profile and application directories are checked. ...
... following prefs must also be set to make the xpinstall dialog, extension manager, and theme manager work: pref("xpinstall.dialog.confirm", "chrome://mozapps/content/xpinstall/xpinstallconfirm.xul"); pref("xpinstall.dialog.progress.skin", "chrome://mozapps/content/extensions/extensions.xul?
type=themes"); pref("xpinstall.dialog.progress.chrome", "chrome://mozapps/content/extensions/extensions.xul?
type=extensions"); pref("xpinstall.dialog.progress.
type.skin", "extension:manager-themes"); pref("xpinstall.dialog.progress.
type.chrome", "extension:manager-extensions"); pref("extensions.update.enabled", true); pref("extensions.update.interval", 86400); pref("extensions.dss.enabled", false); pref("extensions.dss.switchpending", false); pref("extensions.ignoremtimechanges", false); pref("extensions.lo...
...l/src for instance into your components/ directory tweak the line #include ../../../toolkit/components/exthelper/extapplication.js in your copy of fuelapplication.js as needed make sure to declare the fuel module and the two files in your components/makefile.in as in browser/fuel/src/makefile.in rebuild... useful chrome urls most of these require branding. ...
...And 5 more matches
NPClass - Archive of obsolete content
rty from a specified npobject. returns true if the property was successfully removed, otherwise returns false. enumerate called by npn_enumerate. this field is available only if structversion is np_class_struct_version_enum (2) or greater. construct called by npn_construct. this field is available only if structversion is np_class_struct_version_ctor (3) or greater. ...
...sfully removed, otherwise returns false. enumerate called by npn_enumerate. this field is available only if structversion is np_class_struct_version_enum (2) or greater. construct called by npn_construct. this field is available only if structversion is np_class_struct_version_ctor (3) or greater. ...
...d by npn_enumerate. this field is available only if structversion is np_class_struct_version_enum (2) or greater. construct called by npn_construct. this field is available only if structversion is np_class_struct_version_ctor (3) or greater. ...
...And 5 more matches
Browser Feature Detection - Archive of obsolete content
this test takes that idea to the extreme and tests a large number of properties and methods to determine the level of support a browser has for particular standards and reports a rating as the percentage of names the browser defines. ...
.../ 58% dom 1 html 100% 100% 100% 100% / 100% 100% / 100% dom css 1 100% 100% 100% 100% / 100% 96% / 96% dom css 2 100% 98% 67% 71% / 83% 38% / 42% test results cross reference dom core level 1 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.doc
type true true true document.implementation true true true document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.createcomment() true true true document.
...cument.createattribute() true true true document.createentityreference()obsolete since gecko 7 (method present but only returns null: bug 9850) false false document.getelementsbytagname() true true true dom core level 2 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.doc
type true true true document.implementation true true true document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.createcomment() true true true document.
...And 5 more matches
Mozilla XForms User Interface - Archive of obsolete content
s' and 'xforms user interface'. elements from the "form controls" group allows users to interact with instance data. the set of "xforms user interface" elements exist to aid form authors in combining host language markup and xforms markup together in order to build user interfaces. some of the 'form controls' can have multiple appearances and thus may be rendered in multiple ways. we use the data
type of the instance node that the form control is bound to as a clue when making a rendering decision. the form author can also use the 'appearance' attribute on the form control to give us another clue. for example, a xforms input control may appear as a text field or as a datepicker depending on whether it is bound to a xsd:string
type or a xsd:date
type. when a xf:output binds to a node that has a...
...of the instance node that the form control is bound to as a clue when making a rendering decision. the form author can also use the 'appearance' attribute on the form control to give us another clue. for example, a xforms input control may appear as a text field or as a datepicker depending on whether it is bound to a xsd:string
type or a xsd:date
type. when a xf:output binds to a node that has a
type of xsd:date, we output the date value as plain text. an output bound to a date and also having @appearance='full' will display as a calendar. this article uses several notations. if you see fx 3.0 only, that means that the control will only be available for firefox 3.0 (gecko 1.9). there are several possible reasons for this restriction. the first is that the changes required for such controls co...
... every xforms element can be presented as one of serveral different kinds of widgets. this section contains a short description of each xforms element and its representation. the xforms specification offers suggestions for some of the representations, but some of the widgets we use are only available in the mozilla xforms processor. the choice of widget that we use is often determined by the data
type of the instance node that the xforms element is bound to. the form 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 (s...
...And 5 more matches
GLSL Shaders - Game development
it can get very complicated — very quickly. in this article we will make a simple code example that renders a cube. ...
...it can get very complicated — very quickly. in this article we will make a simple code example that renders a cube. to speed up the background code we will be using the three.js api. ...
...ckly. in this article we will make a simple code example that renders a cube. to speed up the background code we will be using the three.js api. as you may remember from the basic theory article, a vertex is a point in a 3d coordinate system. vertices may, and usually do, have additional properties. the 3d coordinate system defines space and the vertices help define shapes in that space. shader
types a shader is essentially a function required to draw something on the screen. shaders run on a gpu (graphics processing unit), which is optimized for such operations. using a gpu to deal with shaders offloads some of the number crunching from the cpu. this allows the cpu to focus its processing power on other tasks, like executing code. vertex shaders vertex shaders manipulate coordinates in a...
...And 5 more matches
Pseudo-classes and pseudo-elements - Learn web development
basic software installed, basic knowledge 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 pseudo-class and pseudo-element selectors. what is a pseudo-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 ...
...bled matches user interface elements that are in an disabled state. :empty matches an element that has no children except optionally white space. :enabled matches user interface elements that are in an enabled state. :first in paged media, matches the first page. :first-child matches an element that is first among its siblings. :first-of-
type matches an element which is first of a certain
type among its siblings. :focus matches when an element has focus. :focus-visible matches when an element has focus and the focus should be visible to the user. :focus-within matches an element with focus plus an element with a descendent that has focus. :future matches the elements after the current...
...is in an indeterminate state, usually checkboxes. :in-range matches an element with a range when its value is in-range. :invalid matches an element, such as an <input>, in an invalid state. :lang matches an element based on language (value of the html lang attribute). :last-child matches an element which is last among its siblings. :last-of-
type matches an element of a certain
type that is last among its siblings. :left in paged media, matches left-hand pages. :link matches unvisited links. :local-link matches links pointing to pages that are in the same site as the current document. :is() matches any of the selectors in the selector list that is passed in. :not matches thing...
...And 5 more matches
Positioning - Learn web development
inside a layout from their default layout flow position, to give a slightly quirky, distressed feel? positioning is your tool. or if you want to create a ui element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser window no matter how much the page is scrolled? positioning makes such layout work possible. there are a number of different
types of positioning that you can put into effect on html elements. to make a specific
type of positioning active on an element, we use the position property. static positioning static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here." to demonstrate this, and get your example s...
...tic; background: yellow; } if you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph. this is fine — as we said before, static positioning is the default behavior! note: you can see the example at this point live at 1_static-positioning.html (see source code). relative positioning relative positioning is the first position
type we'll take a look at. this is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position, including making it overlap other elements on the page. go ahead and update the position declaration in your code: position: relative; if you save and refresh at this stage, you won't see a change in the ...
..., what determines which elements appear on top of which other elements? in the example we've seen so far, we only have one positioned element in the positioning context, and it appears on the top, since positioned elements win over non-positioned elements. what about when we have more than one? try adding the following to your css, to make the first paragraph absolutely positioned too: p:nth-of-
type(1) { position: absolute; background: lime; top: 10px; right: 30px; } at this point you'll see the first paragraph colored lime, moved out of the document flow, and positioned a bit above from where it originally was. it is also stacked below the original .positioned paragraph, where the two overlap. this is because the .positioned paragraph is the second paragraph in the source order, an...
...And 5 more matches
Other form controls - Learn web development
prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand the non-<input> form features, and how to implement them using html. multi-line text fields a multi-line text field is specified using a <textarea> element, rather than using the <input> element. ...
... are a simple way to let users select from many different options without taking up much space in the user interface. html has two forms of drop down content: the select box, and the autocomplete box. in both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between. note: you can find examples of all the drop-down box
types on github at drop-down-content.html (see it live also). select box a simple select box is created with a <select> element with one or more <option> elements as its children, each of which specifies one of its possible values. <select id="simple" name="simple"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </select> if required, the default value f...
...t. note: all browsers that support the <select> element also support the multiple attribute. autocomplete box you can provide suggested, automatically-completed values for form widgets using the <datalist> element with child <option> elements to specify the values to display. the <datalist> needs to be given an id. the data list is then bound to an <input> element (e.g. a text or email input
type) using the list attribute, the value of which is the id of the data list to bind. once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've
typed into the input. let's look at an example. <label for="myfruit">what's your favorite fruit?
...And 5 more matches
Advanced text formatting - Learn web development
prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. objective: to learn how to use lesser-known html elements to mark up advanced semantic features. description lists in html text fundamentals, we walked through how to mark up basic lists in html, but we didn't mention the third
type of list you'll occasionally come across — description lists. the purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. let's look at an example of a set of terms and definitions: soliloquy in drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process re...
... characters.) monologue in drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present. aside in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought or piece of additional background information description lists use a different wrapper than the other list
types — <dl>; in addition each term is wrapped in a <dt> (description term) element, and each description is wrapped in a <dd> (description definition) element. let's finish marking up our example: <dl> <dt>soliloquy</dt> <dd>in drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other charact...
...-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. ...
...And 5 more matches
Whatās in the head? Metadata in HTML - Learn web development
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 html head? let's revisit the simple html document we covered in the previous article: <!doc
type html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <p>this is my page</p> </body> </html> the html head is the contents of the <head> element — unlike the contents of the <body> element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. instead, the head's job is to contain metadata...
... the suggested bookmark name. the <title> contents are also used in search results, as you'll see below. metadata: the <meta> element metadata is data that describes data, and html has an "official" way of adding metadata to a document — the <meta> element. of course, the other stuff we are talking about in this article could also be thought of as metadata too. there are a lot of different
types of <meta> elements that can be included in your page's <head>, but we won't try to explain them all at this stage, as it would just get too confusing. instead, we'll explain a few things that you might commonly see, just to give you an idea. specifying your document's character encoding in the example we saw above, this line was included: <meta charset="utf-8"> this element simply specifies ...
...o try this out, revisit the simple html template you obtained in the previous section on <title> (the title-example.html page), try changing the meta charset value to iso-8859-1, and add the japanese to your page. this is the code we used: <p>japanese example: ć飯ćē±ćć</p> adding an author and description many <meta> elements include name and content attributes: name specifies the
type of meta element it is; what
type of information it contains. content specifies the actual meta content. two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. let's look at an example: <meta name="author" content="chris mills"> <meta name="description" content="the mdn web docs learning area aims to provide ...
...And 5 more matches
Introducing asynchronous JavaScript - Learn web development
/ display your image blob in the ui somehow that's because you don't know how long the image will take to download, so when you come to run the second line it will throw an error (possibly intermittently, possibly every time) because the response is not yet available. instead, you need your code to wait until the response is returned before it tries to do anything else to it. there are two main
types of asynchronous code style you'll come across in javascript code, old-style callbacks and newer promise-style code. in the below sections we'll review each of these in turn. async callbacks async callbacks are functions that are specified as arguments when calling a function which will start executing code in the background. when the background code finishes running, it calls the callback func...
...mber of older-but-still-commonly-used apis. an example of an async callback is the second parameter of the addeventlistener() method (as we saw in action above): btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); the first parameter is the
type of event to be listened for, and the second parameter is a callback function that is invoked when the event is fired. when we pass a callback function as an argument to another function, we are only passing the function's reference as an argument, i.e, the callback function is not executed immediately. it is “called back” (hence the name) asynchronously somewhere inside the containing functi...
...led back” (hence the name) asynchronously somewhere inside the containing function’s body. the containing function is responsible for executing the callback function when the time comes. you can write your own function containing a callback easily enough. ...
...And 5 more matches
Build your own function - Learn web development
in building a custom function, and explain a few more useful associated details. active learning: let's build a function the custom function we are going to build will be called displaymessage(). it will display a custom message box on a web page and will act as a customized replacement for a browser's built-in alert() function. we've seen this before, but let's just refresh our memories.
type the following in your browser's javascript console, on any page you like: alert('this is a message'); the alert function takes a single argument — the string that is displayed in the alert box. try varying the string to change the message. the alert function is limited: you can alter the message, but you can't easily vary anything else, such as the color, icon, or anything else. we'll build ...
...ry including the following line below your function to call it: displaymessage(); this line invokes the function, making it run immediately. when you save your code and reload it in the browser, you'll see the little message box appear immediately, only once. we are only calling it once, after all. now open your browser developer tools on the example page, go to the javascript console and
type the line again there, you'll see it appear again! so this is fun — we now have a reusable function that we can call any time we like. but we probably want it to appear in response to user and system actions. in a real application, such a message box would probably be called in response to new data being available, or an error having occurred, or the user trying to delete their profile ("are ...
...roving the function with parameters as it stands, the function is still not very useful — we don't want to just show the same default message every time. let's improve our function by adding some parameters, allowing us to call it with some different options. first of all, update the first line of the function: function displaymessage() { to this: function displaymessage(msgtext, msg
type) { now when we call the function, we can provide two variable values inside the parentheses to specify the message to display in the message box, and the
type of message it is. to make use of the first parameter, update the following line inside your function: msg.textcontent = 'this is a message box'; to msg.textcontent = msgtext; last but not least, you now need to update your fun...
...And 5 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
is article aims to save you from tearing your hair out over such problems by providing you with some tips on how to find and fix errors in javascript programs. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to gain the ability and confidence to start fixing problems in your own code.
types of error generally speaking, when you do something wrong in code, there are two main
types of error that you'll come across: syntax errors: these are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. these are usually okay to fix, as long as you are familiar with the ...
... that program runs successfully but gives incorrect results. these are often harder to fix than syntax errors, as there usually isn't an error message to direct you to the source of the error. okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. but the above classifications will do at this early stage in your career. we'll look at both of these
types going forward. an erroneous example to get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. go to github and make yourself a local copy of number-game-errors.html (see it running live here). to get started, open the local copy inside your favorite text editor, and your browser. try playing the ga...
... you might want to fix! we'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. then you can go back and try to fix your example. at this point, let's consult the developer console to see if it reports any syntax errors, then try to fix them. you'll learn how below. fixing syntax errors earlier on in the course we got you to
type some simple javascript commands into the developer tools javascript console (if you can't remember how to open this in your browser, follow the previous link to find out how). what's even more useful is that the console gives you error messages whenever a syntax error exists inside the javascript being fed into the browser's javascript engine. now let's go hunting. go to the tab that you've go...
...And 5 more matches
Deployment and next steps - Learn web development
in this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your svelte learning journey. 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. ...
... 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 how to prepare our svelte app for production, and what learning resources you should visit next. ...
...ode + npm installed to compile and build your app. objective: learn how to prepare our svelte app for production, and what learning resources you should visit next. note that our application is fully functional and porting it to
typescript is completely optional. there are different opinions about it, and in this chapter we will talk briefly about the pros and cons of using
typescript. even if you are not planning to adopt it, this article will be useful for allowing you to learn what it has to offer and help you make your own decision. if you are not interested at all in
typescript, you can skip to the next chapter, where we will look at different options for deploying our svelte applications, further resources, and more. code along with us git clone the github repo ...
...And 5 more matches
Eclipse CDT
bindings for that key combination (using the bindings column to sort by key combination helps with this) and remove them, or else you need to make your binding very specific by setting the "when" field to "c/c++ editor" instead of the more general "editing text". opening files you can quickly open a file by name using cmd-shift-r/ctrl-shift-r. although eclipse doesn't do fuzzy matching when you
type a file name, it does allow you to use wildcards. to quickly switch between a source file and its header file, use ctrl-tab. to quickly switch to a recently viewed document use cmd-f6/ctrl-f6. if you want to change this awkward key binding, the command you need to rebind is "next editor". to show a filterable list of open documents (similar to the way emacs gives you a list of open buffers), us...
...t you want to edit, then from the menu bar select "window > new editor". this will open another tab containing the same file. now simply drag that tab to position it beside, above, or below the original. changes you make in one editor will be immediately reflected in the other. note that the search, call hierarchy, and other tabs have a "pin" button that allows you to open multiple tabs of these
type. this is useful if you want to keep your existing search results open, for example, and have a new search open in a separate tab rather than overriding the contents of the existing search tab. code assistance note: indexing, by its very nature, is specific to a given compiler configuration. be aware that when eclipse gives results for any of the actions that follow, it will not include results ...
...ely, you can jump to the definition of the symbol under the cursor by pressing f3. to do a c++ symbol search select "search > c/c++" from the menubar, or use ctrl-h and select the "c/c++" search tab. to quickly find the definition of an enum, class, method, etc. use ctrl-shift-t/cmd-shift-t. to get a list of autocomplete options in an editor tab, start typing the name of an identifier and then
type ctrl-space. unfortunately, the autocomplete list cannot (currently) be configured to appear automatically as soon as you start typing a character that might be the start of an identifier name. to see the callers of a method (and their callers, etc.), select the method and use the context menu to select "open call hierarchy". note that there are buttons to the right of the "open call hierarchy" t...
...And 5 more matches
Mozilla Web Developer FAQ
iance with the applicable web format specifications. in the quirks mode—for the purpose of backwards compatibility—gecko mimics some behaviors of legacy browsers in ways that are spec violations. the almost standards mode is like the standards mode except it addresses the issue of the next question by rendering table cells with images in the traditional way. ...
...that are spec violations. the almost standards mode is like the standards mode except it addresses the issue of the next question by rendering table cells with images in the traditional way. the mode is picked based on the doc
type declaration (or the lack thereof) at the beginning of an html document. the easiest way to make sure that the standards mode is activated for html, is to use this doc
type declaration: <!doc
type html> the easiest way to make sure that the almost standards mode is activated for html, is to use this doc
type declaration: <!doc
type html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> the easiest way to activate the quirks mode for html is to omit the doc
type declaration. however, authoring new documents that rely on quirks...
...documents sent as xml always activate the standards layout mode. this includes documents sent as application/xhtml+xml. ...
...And 5 more matches
JS_ConvertArguments
obsolete since jsapi 38this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. 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 spidermonkey 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. ...
...allback, not an array created by application code. in certain error cases, js_convertarguments calls js_argv_callee(argv), which accesses memory outside the range [argv .. argv+argc). js_convertarguments may modify argv in place by replacing an argument with the converted value. (the purpose is to ensure gc safety.) format const char * null-terminated string describing the
types of the out parameters and how to convert the values in argv. ... void * out parameters. pointers to variables into which to store the converted values. there must be one pointer for each parameter described in format. variables for optional parameters must already be initialized, because if an optional parameter is not in argv, js_convertarguments does not modify the cor...
...alized, because if an optional parameter is not in argv, js_convertarguments does not modify the corresponding variable. the variables do not need to be rooted. (if conversion creates a new gc thing, the corresponding jsval is written back to argv, which is rooted.) description js_convertarguments provides a convenient way to translate a series of js values into their corresponding js
types with a single function call. it saves you from having to write separate tests and elaborate if...else statements in your function code to retrieve and translate multiple js values for use with your own functions. cx is the context for the call. argc indicates the number of js values you are passing in for conversion. argv is a pointer to the array of js values to convert. format is a null-term...
...And 5 more matches
JS_DefaultValue
sers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.6 converts a javascript object to a primitive value, using the semantics of that object's internal [[defaultvalue]] hook. renamed to js::toprimitive from jsapi 44. ...
... using it. this article covers features introduced in spidermonkey 1.8.6 converts a javascript object to a primitive value, using the semantics of that object's internal [[defaultvalue]] hook. renamed to js::toprimitive from jsapi 44. ...
... vp js::mutablehandle<js::value> out parameter. on success, *vp receives the converted value. ...
...And 5 more matches
JS_NewObject
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. if this is null, an ordinary javascript object is created. the jsclass may be used to override low-level object behavior, ...
...not have the jsclass_global_flags bits set (use js_newglobalobject instead). if clasp is non-null, the caller must ensure 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. proto js::handle<jsobject*> pointer to the proto
type object to use for the new object. the new object will inherit all of the proto
type object's properties and methods, and the new object's __proto__ property will be a reference to the proto
type object. js_newobject: if this is null, a default proto
type object is used. obsolete since jsapi 38 js_newobject now always uses a default proto
type object. js_newobjectwithgivenproto: if this...
... parent js::handle<jsobject*> pointer to the parent of the new object. the new object's __parent__ property will be a reference to this object. if parent is null, a default parent object is used. ...
...And 5 more matches
JS_PropertyStub
examples at jsclass illustrate how stub functions ca...
...examples at jsclass illustrate how stub functions can be ...
... js_convertstub(jscontext *cx, js::handleobject obj, js
type type, js::mutablehandlevalue vp); // obsolete since jsapi 37 void js_finalizestub(jscontext *cx, jsobject *obj); // obsolete since jsapi 14 description the stub functions are not designed to be called directly by a jsapi application. rather, they are convenient stand-ins anywhere the jsapi requires callbacks of certain
types. examples at jsclass illustrate how stub functions can be used. js_propertystub is of
type jspropertyop, the
type of getter callback. it can be used in jsclass.addproperty, and jsclass.getproperty. it behaves exactly like a property callback that accepts the default property behavior: it does nothing and returns true. ...
...And 5 more matches
IAccessibleRelation
other-licenses/ia2/accessiblerelation.idlnot scriptable this interface gives access to an object's set of relations. ...
... other-licenses/ia2/accessiblerelation.idlnot scriptable this interface gives access to an object's set of relations. ...
...icenses/ia2/accessiblerelation.idlnot scriptable this interface gives access to an object's set of relations. ...
...And 5 more matches
nsIApplicationCache
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 / seamonkey 2.1) each application cache has a unique client id for use with nsicacheservice.opensession() method, to access the cache's entries. ...
...ed 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. ...
...hat 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 get
types(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 the client id for this app...
...And 5 more matches
nsIDOMEvent
inherits from: nsisupports last changed in gecko 16.0 (firefox 16.0 / thunderbird 16.0 / seamonkey 2.13) note: as of gecko 16.0, the nsiprivatedomevent interface was merged into this interface. everything marked as gecko 16.0 was previously available in that interface. see bug 761613. ...
...see bug 761613. ...
... void initevent(in domstring event
typearg, in boolean canbubblearg, in boolean cancelablearg); boolean isdispatchstopped(); violates the xpcom interface guidelines void preventbubble(); obsolete since gecko 24 void preventcapture(); obsolete since gecko 24 void preventdefault(); void serialize(in ipcmessageptr amsg, in boolean aserializeinterface
type); violates the xpcom interface guidelines void settarget(in nsidomeventtarget atarget); native code only! void settrusted(in boolean atrusted); native code only! ...
...And 5 more matches
nsIDragService
y); native code only! void firedrageventatsource(in unsigned long amsg); obsolete since gecko 43 void firedrageventatsource(in mozilla::eventmessage aeventmessage); native code only! ...
...aeventmessage); native code only! ...
... dragdrop_action_copy 1 the drag and drop operation should copy the object. dragdrop_action_move 2 ...
...And 5 more matches
nsIFaviconService
illa.org/browser/favicon-service;1. ...
... nsiuri getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); void setandloadfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconload
type, [optional] in nsifavicondatacallback acallback); obsolete since gecko 22.0 void setfavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amime
type, in prtime aexpiration); obsolete since gecko 22.0 void setfavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl, in prtime aexpiration); obsolete si...
...read only. methods addfailedfavicon() this method adds a given favicon's uri to the failed favicon cache. the lifespan of the favicon cache is up to the caching system. ...
...And 5 more matches
nsIFileView
sitreeview so that it can be passed as a tree view. implemented by: @mozilla.org/filepicker/fileview;1. to create an instance, use: var fileview = components.classes["@mozilla.org/filepicker/fileview;1"] .createinstance(components.interfaces.nsifileview); method overview void setdirectory(in nsifile directory); void setfilter(in astring filterstring); void sort(in short sort
type, in boolean reversesort); attributes attribute
type description reversesort boolean if true results will be sorted in ascending order. read only. selectedfiles nsiarray an nsiarray of selected files, which contains nsiarray instances. read only. showhiddenfiles boolean if true hidden files will be shown. showonlydirectories boolean if true only directory entries will be returned. ...
...read only. constants constant value description sortname 0 sort by file name. sortsize 1 sort by file size. sortdate 2 sort by the date of the last modification. methods setdirectory() set the directory to be browsed. ...
...read only. constants constant value description sortname 0 sort by file name. sortsize 1 sort by file size. sortdate 2 sort by the date of the last modification. methods setdirectory() set the directory to be browsed. void setdirectory( in nsifile directory ); parameters directory the directory to be browsed. ...
...And 5 more matches
Building an Account Manager Extension
he nsiaccountmanagerextension. we name the extension "devmo-account" and state that it is located in the chrome package "example@mozilla.org". furthermore we show the new panel only for imap accounts... ...
...unts... components.utils.import("resource://gre/modules/xpcomutils.jsm"); //class constructor function devmoaccountmanagerextension() {}; // class definition devmoaccountmanagerextension.proto
type = { name : "devmo-account", chromepackagename : "example@mozilla.org", showpanel: function(server) { //this panel is only shown for imap accounts... if (server.
type == \"imap\") return true; return false; }, queryinterface: xpcomutils.generateqi([ components.interfaces.nsimsgaccountmanagerextension ]) } step 2: building a component we convert the interface to a xpcom component and register it in the component manager as account manager extension. therefore we add the following code to the previous. the javascript file ha...
...gister it in the component manager as account manager extension. therefore we add the following code to the previous. the javascript file has to be saved either in the extension's or thunderbird's component directory. // define the contract information needed for this component... // ... the unique component identifier (change it if you copied this example!)... ...
...And 5 more matches
nsIXPCScriptable
erate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32 enum_op, in jsvalptr statep, out jsid idp); prbool newresolve(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in pruint32 flags, out jsobjectptr objp); prbool convert(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32
type, in jsvalptr vp); void finalize(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool checkaccess(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in pruint32 mode, in jsvalptr vp); prbool call(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32 argc, in jsvalptr argv, in jsvalptr...
... constants constant value description want_precreate 1 << 0 want_create 1 << 1 want_postcreate 1 << 2 want_addproperty 1 << 3 want_delproperty 1 << 4 ...
... constants constant value description want_precreate 1 << 0 want_create 1 << 1 want_postcreate 1 << 2 want_addproperty 1 << 3 want_delproperty 1 << 4 want_getproperty 1 << 5 want_setproperty 1 << 6 want_enumerate 1 ...
...And 5 more matches
nsIXPConnect
obsolete since gecko 2.0 jsval getxowforobject(in jscontextptr ajscontext, in jsobjectptr aparent, in jsobjectptr awrap...
...er(in voidptr aholder); native code only! void reparentscopeawarewrappers(in jscontextptr ajscontext, in jsobjectptr aoldscope, in jsobjectptr anewscope); obsolete since gecko 1.9.1 nsixpconnectjsobjectholder reparentwrappednativeiffound(in jscontextptr ajscontext, in jsobjectptr ascope, in jsobjectptr anewparent, in nsisupports acomobj); void restorewrappednativeproto
type(in jscontextptr ajscontext, in jsobjectptr ascope, in nsiclassinfo aclassinfo, in nsixpconnectjsobjectholder aproto
type); void setdebugmodewhenpossible(in prbool mode); native code only! void setdefaultsecuritymanager(in nsixpcsecuritymanager amanager, in pruint16 flags); nsixpcfunctionthistranslator setfunctionthistranslator(in nsiidref aiid, in nsixpcfunctionthistra...
... currentnativecallcontext nsaxpcnativecallcontextptr read only. deferreleasesuntilaftergarbagecollection prbool obsolete since gecko 1.9 pendingexception nsiexception constants constant ...
...And 5 more matches
Getting Started Guide
so have a reasonable knowledge of c++. probably the three most helpful books on this topic are the c++ programming language by bjarne stroustrup, effective c++, and more effective c++ by scott meyers. all xpcom objects are allocated on the heap. clients don't get to know much about the implementation of any such object. they reference it only through a pointer to an `interface', i.e., the static
type of the pointer is a pointer to an abstract base class, the actual object pointed to is a class derived from that abstract base class. the xpcom object is said to `implement that interface'. the client's reference to the object is typically called `an interface pointer'. an object may implement many interfaces. each interface is (at least conceptually) separately `reference counted'. that is, the...
...d you already know one way to call it, applying the getter_addrefs rule, as described above. the hard way to queryinterface into an nscomptr. // a way (though not the best way) to |queryinterface| into an |nscomptr|... nscomptr<nsifoo> foo; nsresult rv = bar->queryinterface(ns_get_iid(nsifoo), getter_addrefs(foo)); // or, if you're a savvy xpcom programmer, // you use the
type-safe version... nsresult rv = callqueryinterface(bar, getter_addrefs(foo)); queryinterface is used so frequently, though, that nscomptr has a special facility to call it. this facility is
type-safe, and it enables an nscomptr to be directly constructed from the result of queryinterface. construction from the correct value is more efficient that construction followed by assignment. thi...
...ithout your explicit permission in the form of the do_queryinterface directive. you need never worry about hidden queries. however, be aware that if you should have queried but didn't, e.g., when assigning in a raw pointer where c++ allows the assignment, but xpcom wouldn't, nscomptr will assert at runtime. ...
...And 5 more matches
Debugger.Environment - Firefox Developer Tools
ssociates 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. spidermonkey 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. spidermonkey 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), spidermonkey presents the same debugger.environment instance to the debugger each time. this means that the debugge...
...g to access its properties (other than inspectable) or call any its methods throws an instance of error. debugger.environment instances protect their referents from the garbage collector; as long as the debugger.environment instance is live, the referent remains live. garbage collection has no visible effect on debugger.environment instances. ...
...r. debugger.environment instances protect their referents from the garbage collector; as long as the debugger.environment instance is live, the referent remains live. garbage collection has no visible effect on debugger.environment instances. accessor properties of the debugger.environment proto
type object a debugger.environment instance inherits the following accessor properties from its proto
type: inspectable true if this environment is a debuggee environment, and can therefore be inspected. ...
...And 5 more matches
Debugger - Firefox Developer Tools
the debugger object when called as a constructor, the debugger object creates a new debugger instance. new debugger([global, …]) create a debugger object, and apply its adddebuggee method to each of the givenglobal objects to add them as the initial debuggees. accessor properties of the debugger proto
type object a debugger instance inherits the following accessor properties from its proto
type: enabled a boolean value indicating whether this debugger instance’s handlers, breakpoints, and the like are currently enabled. it is an accessor property with a getter and setter: assigning to it enables or disables this debugger instance; reading it produces true if the instance is enabled, or false otherwise. this property is initially true in a freshly created debugger instan...
...hose message blames the debugger, and includes textual descriptions ofuncaught-hook-exception and the originaldebugger-exception. if uncaughtexceptionhook’s value is null, spidermonkey throws an exception to the debuggee whose message blames the debugger, and includes a textual description ofdebugger-exception. assigning anything other than a callable value or null to this property throws a
typeerror exception. (this is not an ideal way to handle debugger bugs, but the hope here is that some sort of backstop, even if imperfect, will make life easier for debugger 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 i...
...er 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 debuggee’s execution should proceed. on a new debugger instance, each of these properties is initially undefined. any value assigned to a debugging handler must be either a function or undefined; otherwise a
typeerror is thrown. handler functions run in the same thread in which the event occurred. they run in the compartment to which they belong, not in a debuggee compartment. onnewscript(script,global) new code, represented by the debugger.script instancescript, has been loaded in the scope of the debuggees. this method’s return value is ignored. onnewpromise(promise) a new promise objec...
...And 5 more matches
Introduction to the DOM - Web APIs
note: because the vast majority of code that uses the dom revolves around manipulating html documents, it's common to refer to the nodes in the dom as elements, although strictly speaking not every node is an el...
...e of elements in an otherwise empty html page const heading = document.createelement("h1"); const heading_text = document.createtextnode("big head!"); heading.appendchild(heading_text); document.body.appendchild(heading); } </script> </head> <body> </body> </html> fundamental data
types this reference tries to describe the various objects and
types in simple terms. ...
...ding = document.createelement("h1"); const heading_text = document.createtextnode("big head!"); heading.appendchild(heading_text); document.body.appendchild(heading); } </script> </head> <body> </body> </html> fundamental data
types this reference tries to describe the various objects and
types in simple terms. but there are a number of different data
types being passed around the api that you should be aware of. ...
...And 5 more matches
Basic concepts - Web APIs
ey 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
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-o...
...st by the web community. indexeddb used to have a competing spec, websql database, but the w3c deprecated it on november 18, 2010. while both indexeddb and 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. ...
...ons section. the indexeddb api is mostly asynchronous. the api doesn't give you data by returning values; instead, you have to pass a callback function. you don't "store" a value into the database, or "retrieve" a value out of the database through synchronous means. instead, you "request" that a database operation happens. you get notified by a dom event when the operation finishes, and the
type of event you get lets you know if the operation succeeded or failed. this sounds a little complicated at first, but there are sanity measures baked in. it's not that different from the way that xmlhttprequest works. indexeddb uses a lot of requests. requests are objects that receive the success or failure dom events that were mentioned previously. they have onsuccess and onerror properties,...
...And 5 more matches
Pointer events - Web APIs
pointer events address that need. pointer events are dom events that are fired for a pointing device. they are designed to create a single dom event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). the pointer is a hardware-agnostic device that can target a specific set of screen coordinates. ...
...tylus or touch (such as one or more fingers). the pointer is a hardware-agnostic device that can target a specific set of screen coordinates. having a single event model for pointers can simplify creating web sites and applications and provide a good user experience regardless of the user's hardware. however, for scenarios when device-specific handling is desired, pointer events defines a pointer
type property to inspect the device
type which produced the event. the events needed to handle generic pointer input are analogous to mouse events (mousedown/pointerdown, mousemove/pointermove, etc.). consequently, pointer event
types are intentionally similar to mouse event
types. additionally, a pointer event contains the usual properties present in mouse events (client coordinates, target element...
...s of pointer input devices are mouse, pen/stylus, and touch contacts. pointer capture pointer capture allows the events for a pointer to be retargeted to a particular element other than the normal hit test result of the pointer's location. pointer event a dom event fired for a pointer. interfaces the primary interface is the pointerevent interface which has a constructor plus several event
types and associated global event handlers. the standard also includes some extensions to the element and navigator interfaces. the following sub-sections contain short descriptions of each interface and property. pointerevent interface the pointerevent interface extends the mouseevent interface and has the following properties. (all of the following properties are read only .) pointerid a uni...
...And 5 more matches
RTCIceCandidateStats - Web APIs
ted to an rtcicecandidate. properties rtcicecandidatestats is based upon the rtcstats dictionary, so it includes those properties in addition to the ones below. address optional a string containing the address of the candidate. this value may be an ipv4 address, an ipv6 address, or a fully-qualified domain name. this property was previously named ip and only accepted ip addresses. candidate
type optional a string matching one of the values in the rtcicecandidate
type enumerated
type, indicating what kind of candidate the object provides statistics for. deleted optional a boolean value indicating whether or not the candidate has been released or deleted; the default value is false. for local candidates, it's value is true if the candidate has been deleted or released. for host candidate...
...efault value is false. for local candidates, it's value is true if the candidate has been deleted or released. for host candidates, true means that any network resources (usually a network socket) associated with the candidate have already been released. for turn candidates, the turn allocation is no longer active for deleted candidates. this property is not present for remote candidates. network
type optional a string from the rtcnetwork
type enumerated
type which indicates the
type of interface used for a local candidate. this property is only present for local candidates. port optional the network port number used by the candidate. priority optional the candidate's priority, corresponding to rtcicecandidate.priority. protocol optional a string specifying the protocol (tcp or udp) used...
...ciated with the candidate correspondin to these statistics. url optional for local candidates, the url property is the url of the ice server from which the candidate was received. this url matches the one included in the rtcpeerconnectioniceevent object representing the icecandidate event that delivered the candidate to the local peer. ...
...And 5 more matches
RTCStatsReport - Web APIs
coming or outgoing stream on which you call them. the statistics objects for each category of statistic information, there is a dictionary whose properties provide the relevant information. ...
...ats dictionary, which provides the most fundamental information: the timestamp, the statistic
type string, and an id uniquely identifying the source of the data: id a domstring which uniquely identifies the object which was inspected to produce this object based on rtcstats. timestamp a domhighrestimestamp object indicating the time at which the sample was taken for this statistics object.
type a domstring indicating the
type of statistics the object contains, taken from the enum
type rtcstats
type. the statistic categories the
type gives the name of the statistic category represented by the object, and is how you locate the specific
type of data you need. ...
...candidate pairs other than the currently active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart. ...
...And 5 more matches
SVGMarkerElement - Web APIs
void setorienttoangle(in svgangle angle) void setorienttoauto() properties svganimatedlength refx svganimatedlength refy svganimatedenumeration markerunits svganimatedlength markerwidth svganimatedlength markerheight svganimatedenumeration orient
type svganimatedangle orientangle constants svg_marker_orient_unknown = 0 svg_marker_orient_auto = 1 svg_marker_orient_angle = 2 svg_markerunits_unknown = 0 svg_markerunits_userspaceonuse = 1 svg_markerunits_strokewidth ...
... svg_marker_orient_auto 1 attribute orient has value 'auto'. svg_marker_orient_angle 2 attribute orient has an angle value. units ...
...rmative document svg 1.1 (2nd edition) constants orientation name value description svg_marker_orient_unknown 0 the marker orientation is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_marker_orient_auto 1 attribute orient has value 'auto'. svg_marker_orient_angle 2 attribute orient has an angle value. units name value description...
...And 5 more matches
Using the User Timing API - Web APIs
the user timing interface allows the developer to create application specific timestamps that are part of the browser's performance timeline. there are two
types of user defined timing entry
types: the "mark" entry
type and the "measure" entry
type. mark events are named by the application and can be set at any location in an application. measure events are also named by the application but they are placed between two marks thus they are effectively a midpoint between two marks. this document shows how to create mark and measure performance entry
types and how to use user timing methods (which are extensions of the performance interface) to retrieve and remove entries from the browser's performance timeline. a live version of the examples is available on github, as is the source code. pull...
..."mark-2"); do_work(50000); performance.mark("mark-2"); var marks = ["mark-1", "mark-2", "mark-2"]; for (var i=0; i < marks.length; i++) log("... created mark = " + marks[i], 0); } retrieving performance marks the performance interface has three methods to retrieve marks. the following examples shows how to use each of these methods (performance.getentries(), performance.getentriesby
type(entry
type), and performance.getentriesbyname(name, entry
type) ) to retrieve one or more marks. function display_marks(ev) { if (performance.getentries === undefined) { log("display marks: performance.getentries not supported", 0); return; } log("display marks", 0); // display each mark using getentries() var entries = performance.getentries(); var j=0; for (var i=0; i < en...
...(name, entry
type) ) to retrieve one or more marks. function display_marks(ev) { if (performance.getentries === undefined) { log("display marks: performance.getentries not supported", 0); return; } log("display marks", 0); // display each mark using getentries() var entries = performance.getentries(); var j=0; for (var i=0; i < entries.length; i++) { if (entries[i].entry
type == "mark") { if (j == 0) { log("= getentries()", 0); j++ } log("... [" + i + "] = " + entries[i].name, 0); } } // display each mark using getentriesby
type() entries = performance.getentriesby
type("mark"); for (var i=0; i < entries.length; i++) { if (i == 0) log("= getentriesby
type('mark')", 0); log("... [" + i + "] = " + entries[i].name, 0); } // display each...
...And 5 more matches
WebGL2RenderingContext.texImage3D() - Web APIs
the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image. ...
... the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image. ...
...method of the webgl api specifies a three-dimensional texture image. ...
...And 5 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. ...
... the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. ...
...e of the current texture. ...
...And 5 more matches
WebGL model view projection - Web APIs
niform locations this.positionlocation = gl.getattriblocation(this.webglprogram, 'position'); this.colorlocation = gl.getuniformlocation(this.webglprogram, 'color'); // tell webgl to test the depth when drawing, so if a square is behind // another square it won't be drawn gl.enable(gl.depth_test); } webglbox draw now we'll create a method to draw a box on the screen. webglbox.proto
type.draw = function(settings) { // create some attribute data; these are the triangles that will end being // drawn to the screen. there are two that form a square. var data = new float32array([ //triangle 1 settings.left, settings.bottom, settings.depth, settings.right, settings.bottom, settings.depth, settings.left, settings.top, settings.depth, //triangle 2 se...
...other components of the coordinate, so that the true values of x, y, and z are computed as x/w, y/w, and z/w (and w is then also w/w, becoming 1). a three dimensional point is defined in a typical cartesian coordinate system. the added fourth dimension changes this point into a homogeneous coordinate. it still represents a point in 3d space and it can easily be demonstrated how to construct this
type of coordinate through a pair of simple functions. function cartesiantohomogeneous(point) let x = point[0]; let y = point[1]; let z = point[2]; return [x, y, z, 1]; } function homogeneoustocartesian(point) { let x = point[0]; let y = point[1]; let z = point[2]; let w = point[3]; return [x/w, y/w, z/w]; } as previously mentioned and shown in the functions above, the w compon...
...unk down in order to not fill the entirety of clip space. this matrix is sent directly to the shader, having been multiplied in javascript beforehand. the following code sample defines a method on the cubedemo object that will create the model matrix. it uses custom functions to create and multiply matrices as defined in the mdn webgl shared code. ...
...And 5 more matches
Fundamentals of WebXR - Web APIs
w wide the fov can get without installing lenses into the user's eyeballs. a wide fov can substantially improve the user's sense of immersion. however, increasing the fov can also increase the weight and cost of the headset. degrees of freedom the term degrees of freedom is an indication of how much freedom of movement the user has within the virtual world. this is directly related to how many
types of movement the webxr hardware configuration is capable of recognizing and reproducing into the virtual scene. diagram showing the movements possible with 3 degree of freedom hardware: yaw, roll, and pitch. freedom of rotational movement the first three degrees of freedom are rotational. the rotational degrees of freedom are: pitch: looking up and down yaw: looking left and right r...
...--->>> some more advanced headsets provide at least minimal support for translational movement detection, but to capture more substantial movement through the space, external sensors are usually required, such as cameras (either using visible light or infrared). webxr session modes webxr offers support for both augmented reality (ar) and virtual reality (vr) sessions, using the same api. which
type of session you want to create is specified when creating the session. this is done by specifying the appropriate session mode string for the kind of session you want to create. virtual reality in a vr environment, the entire image is digitally created by your app or site, from foreground objects all the way to the background or skybox. your frame drawing code will have to redraw every pixel of ...
...is the entire world around the user (rather than being enclosed in a box on a screen), the only ar session mode is immersive-ar. the webxr augmented reality module is still in a state of early development and is not yet stable enough for regular use. we do not yet include documentation for it here on mdn, but it will come as soon as the module's specification settles down. there are two basic
types of ar device: devices which use cameras to capture the world in front of the user, render the webxr content atop that image, then display the image on a screen. these devices include phones, which show the resulting scene on the device's screen in a 2d presentation, as well as goggles that use a pair of cameras, one for each eye, to capture the scene in stereo in order to retain the world's d...
...And 5 more matches
XRReferenceSpace - Web APIs
the webxr device api's xrreferencespace interface describes the coordinate system for a specific tracked entity or object within the virtual world using a specified tracking behavior. the tracking behavior is defined by the selected reference space
type. it expands upon the base class, xrspace, by adding support for several different tracking behaviors as well as to request a new reference space which describes the offset transform between the tracked object and another location in the world. all reference spaces—with the sole exception being bounded reference spaces—are described using the xrreferencespace
type. bounded spaces are implemented as xrboundedreferencespace objects. these are special spaces which let you establish a perimeter within which it's "safe" for the viewer to move...
...erits the properties of eventtarget. xrreferencespace defines no additional properties. methods in addition to the methods inherited from its parent interface, xrspace (there are none at this time), xrreferencespace inherits methods from eventtarget. xrreferencespace also provides the following methods. getoffsetreferencespace() creates and returns a new reference space object as the same
type as the one on which you call the method (so, either xrreferencespace or xrboundedreferencespace). the new reference space can be used to transform a coordinate from the reference space of the object on which the method is called into a different coordinate space. this is useful for positioning objects while rendering, and to perform the needed transforms when changing the viewer's position and/or...
...ed wherein the tracked object's origin relative to the user's environment or location. this can happen, for example, after the user recalibrates their xr device, or if the device automatically adjusts its origin after losing and regaining tracking. in addition to using addeventlistener(), you can establish a reset event handler by setting the onreset event handler property. ...
...And 5 more matches
Basic Shapes - CSS: Cascading Style Sheets
the arguments which are accepted vary depending on the shape that you are creating. we will cover these in the examples below. ...
... the arguments which are accepted vary depending on the shape that you are creating. we will cover these in the examples below. ...
... the arguments which are accepted vary depending on the shape that you are creating. we will cover these in the examples below. ...
...And 5 more matches
Value definition syntax - CSS: Cascading Style Sheets
t 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. 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 ar...
...slash ('/') or the comma (','), and are used in a property definition to separate its parts. the comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. ...
... is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. typically, the slash is used in shorthand properties; to separate component that are of the same
type, but belong to different properties. both symbols appear literally in a value definition. ...
...And 5 more matches
font-variant-alternates - CSS: Cascading Style Sheets
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 histori...
...es) 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. ...
...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 open
type value hist. stylistic() this function enables stylistic alternates for individual characters. the parameter is a font-specific name mapped to a number. it corresponds to the open
type value salt, like salt 2. styleset() this function enables stylistic alternatives for sets of characters. the parameter is a font-specific name mapped to a number. it corresponds to the open
type value ssxy, like ss02. character-variant() this function enables specific stylistic alternatives for characters. it is similar to styleset(), but doesn't create coherent glyphs for a set of characters;...
...And 5 more matches
Getting Started - Developer guides
a in ajax. the parameter to the send() method can be any data you want to send to the server if post-ing the request. form data should be sent in a format that the server can parse, like a query string: "name=value&anothername="+encodeuricomponent(myvar)+"&so=on" or other formats, like multipart/form-data, json, xml, and so on. ...
...ormat that the server can parse, like a query string: "name=value&anothername="+encodeuricomponent(myvar)+"&so=on" or other formats, like multipart/form-data, json, xml, and so on. note that if you want to post data, you may have to set the mime
type of the request. for example, use the following before calling send() for form data sent as a query string: httprequest.setrequestheader('content-
type', 'application/x-www-form-urlencoded'); step 2 – handling the server response when you sent the request, you provided the name of a javascript function to handle the response: httprequest.onreadystatechange = nameofthefunction; what should this function do? first, the function needs to check the request's state. if the state has the value of xmlhttprequest.done (corresponding to 4), that ...
...step 3 – a simple example let's put it all together with a simple http request. our javascript will request an html document, test.html, which contains the text "i'm a test." then we'll alert() the contents of the response. note that this example uses vanilla javascript — no jquery is involved. also, the html, xml and php files should be placed in the same directory. ...
...And 5 more matches
Audio and video manipulation - Developer guides
dd display: none to the style for the <video> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames. html we can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm"
type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v"
type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="270"></canvas> javascript this code handles altering the frames. var processor = { timercallback: function() { if (this.video.paused || this.video.ended) { return; } this.computeframe(); var self = this; settime...
...obuffersourcenode.playbackrate property. ...
...ttps://udn.realityripple.com/samples/6f/08625b424a.m4v"> </video> javascript var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm"
type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v"
type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit"
type="button" value="edit" /> <input id="reset"
type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = d...
...And 5 more matches
<form> - HTML: Hypertext Markup Language
ing tag are mandatory. permitted parents any element that accepts flow content implicit aria role form if the form has an accessible name, otherwise no corresponding role permitted aria roles search, none or presentation dom interface htmlformelement attributes this element includes the global attributes. accept comma-separated content
types the server accepts. this attribute was removed in html5 and should not be used. instead, use the accept attribute on <input
type=file> elements. accept-charset space-separated character encodings the server accepts. the browser uses them in the order in which they are listed. the default value means the same encoding as the page. (in previous versions of html, character encodings could als...
...e among the forms in a document and not an empty string as of html5. rel creates a hyperlink or annotation depending on the value, see the rel attribute for details. attributes for form submission the following attributes control behavior during form submission. action the url that processes the form submission. this value can be overridden by a formaction attribute on a <button>, <input
type="submit">, or <input
type="image"> element. enc
type if the value of the method attribute is post, enc
type is the mime
type of the form submission. possible values: application/x-www-form-urlencoded: the default value. multipart/form-data: use this if the form contains <input> elements with
type=file. text/plain: introduced by html5 for debugging purposes. this value can be overridde...
... method the http method to submit the form with. possible (case insensitive) values: post: the post method; form data sent as the request body. get: the get method; form data appended to the action url with a ? separator. use this method when the form has no side-effects. ...
...And 5 more matches
<menuitem> - HTML: Hypertext Markup Language
button. a command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an indirect command whose behavior is defined by a separate element. commands can also optionally include a checkbox or be grouped to share radio buttons. ...
...er be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an indirect command whose behavior is defined by a separate element. commands can also optionally include a checkbox or be grouped to share radio buttons. ...
...checkboxes or radio buttons when defined against elements <input
type="checkbox"> and <input
type="radio">.) content categories none. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents the <menu> element, where that element is in the popup menu state. (if specified, the
type attribute of the <menu> element must be popup; if missing, the parent element of the <menu> must itself be a <menu> in the popup menu state.) permitted aria roles none dom interface htmlmenuitemelement attributes this element includes the global attributes; in particular title can be used to describe the command, or provide usage hints. checked boolean attribut...
...And 5 more matches
<ol>: The Ordered List element - HTML: Hypertext Markup Language
oup, tablist, toolbar, tree dom interface htmlolistelement attributes this element also accepts the global attributes. reversed this boolean attribute specifies that the list’s items are in reverse order. items will be numbered from high to low. start an integer to start counting from for the list items. ...
... reversed this boolean attribute specifies that the list’s items are in reverse order. items will be numbered from high to low. start an integer to start counting from for the list items. always an arabic numeral (1, 2, 3, etc.), even when the numbering
type is letters or roman numerals. for example, to start numbering elements from the letter "d" or the roman numeral "iv," use start="4". ...
... attribute specifies that the list’s items are in reverse order. items will be numbered from high to low. start an integer to start counting from for the list items. always an arabic numeral (1, 2, 3, etc.), even when the numbering
type is letters or roman numerals. for example, to start numbering elements from the letter "d" or the roman numeral "iv," use start="4". ...
...And 5 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
justification). char align each cell in the row on a specific character (such that each row in the column that is configured this way will horizontally align its cells on that character). this uses the char and charoff to establish the alignment character (typically "." or "," when aligning numerical data) and the number of characters that should follow the alignment character. this alignment
type was never widely supported. if no value is expressly set for align, the parent node's value is inherited. instead of using the obsolete align attribute, you should instead use the css text-align 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 ...
...ely unchanged, despite the addition of useful contextual information under the hood: basic styling as is the case with all parts of a table, you can change the appearance of a table row and its contents using css. any styles applied to the <tr> element will affect the cells within the row unless overridden by styles applied to those cells. let's apply a basic style to the table to adjust the
typeface being used, and add a background color to the header row. result again, let's take a look at the result first. <table> <thead> <tr> <th rowspan="2">name</th> <th rowspan="2">id</th> <th colspan="2">membership dates</th> <th rowspan="2">balance</th> </tr> <tr> <th>joined</th> <th>canceled</th> </tr> </thead> <tbody> <tr> ...
.../tr> </tbody> </table> css this time, the html is unchanged, so let's dive right into the css. table { border: 1px solid black; font: 16px "open sans", helvetica, arial, sans-serif; } thead > tr { background-color: rgb(228, 240, 245); } th, td { border: 1px solid black; padding:4px 6px; } while we add a font property to the <table> element here to set a more visually-appealing
typeface (or an an abominable sans-serif
typeface, depending on your personal opinion), the interesting part is the second style here, where we style <tr> elements located within the <thead> so they have a light blue background color. this is a way to quickly apply a background color to all of the cells in the heading area at once. this does not affect the style of the <th> elements in the first colu...
...And 5 more matches
Index - HTTP
ers allow the client and the server to pass additional information with the request or the response. an http header consists of its case-insensitive name followed by a colon ':', then by its value (without line breaks). leading white space before the value is ignored. 2 accept http, http header, reference, request header the accept request http header advertises which content
types, expressed as mime
types, the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-
type response header. browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fe...
...equest than when fetching an image, video or a script. 3 accept-charset content negotiation, http, http header, reference, request header the accept-charset request http header advertises which character set the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice within the content-
type response header. browsers usually don't set this header as the default value for each content
type is usually correct and transmitting it would allow easier fingerprinting. 4 accept-encoding content negotiation, http, http header, reference, request header the accept-encoding request http header advertises which content encoding, usually a compression algorithm, the client is...
...d not closed, allowing for subsequent requests to the same server to be done. 22 content-disposition http, reference, header in a multipart/form-data body, the http content-disposition general header is a header that can be used on the subpart of a multipart body to give information about the field it applies to. the subpart is delimited by the boundary defined in the content-
type header. used on the body itself, content-disposition has no effect. 23 content-encoding http, headers, reference the content-encoding entity header is used to compress the media-
type. when present, its value indicates which encodings were applied to the entity-body. it lets the client know how to decode in order to obtain the media-
type referenced by the content-
type header. ...
...And 5 more matches
POST - HTTP
the http post method sends data to the server. the
type of the body of the request is indicated by the content-
type header. the difference between put and post is that put is idempotent: calling it once or several times successively has the same effect (that is no side effect), where successive 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. ...
...d by the content-
type header. the difference between put and post is that put is idempotent: calling it once or several times successively has the same effect (that is no side effect), where successive 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. in this case, the content
type is selected by putting the adequate string in the enc
type attribute of the <form> element or the formenc
type 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 w...
...the keys are given in the content-disposition header of each part. ...
...And 5 more matches
A typical HTTP session - HTTP
est consists of text directives, separated by crlf (carriage return, followed by line feed), divided into three blocks: the first line contains a request method followed by its parameters: the path of the document, i.e. an absolute url without the protocol or domain name the http protocol version subsequent lines represent an http header, giving the server information about what
type of data is appropriate (e.g., what language, what mime
types), or other data altering its behavior (e.g., not sending an answer if it is already cached). these http headers form a block which ends with an empty line. the final block is an optional data block, which may contain further data mainly used by the post method. example requests fetching the root page of developer.mozilla.org, i.e. h...
...line, this separates the data block from the header block. as there is no content-length provided in an http header, this data block is presented empty, marking the end of the headers, allowing the server to process the request the moment it receives this empty line. for example, sending the result of a form: post /contact_form.php http/1.1 host: developer.mozilla.org content-length: 64 content-
type: application/x-www-form-urlencoded name=joe%20user&request=send%20me%20one%20of%20your%20catalogue request methods http defines a set of request methods indicating the desired action to be performed upon a resource. although they can also be nouns, these requests methods are sometimes referred as http verbs. the most common requests are get and post: the get method requests a data represen...
...r to a client request, a server response is formed of text directives, separated by crlf, though divided into three blocks: the first line, the status line, consists of an acknowledgment of the http version used, followed by a status request (and its brief meaning in human-readable text). subsequent lines represent specific http headers, giving the client information about the data sent (e.g. ...
...And 5 more matches
Control flow and error handling - JavaScript
reak statements the optional break statement associated with each case clause ensures that the program breaks out of switch once the matched statement is executed, and then continues execution at the statement following switch. if break is omitted, the program continues execution inside the switch statement (and will evaluate the next case, and so on). ...
...he next case, and so on). example in the following example, if fruit
type evaluates to 'bananas', the program matches the value with case 'bananas' and executes the associated statement. when break is encountered, the program exits the switch and continues execution from the statement following switch. if break were omitted, the statement for case 'cherries' would also be executed. ...
...nevertheless, not all thrown objects are created equal. while it is common to throw numbers or s...
...And 5 more matches
Array.from() - JavaScript
jects (objects such as map and set). array.from() has an optional parameter mapfn, which allows you to execute a map() function on each element of the array being created. more clearly, array.from(obj, mapfn, thisarg) has the same result as array.from(obj).map(mapfn, thisarg), except that it does not create an intermediate array. this is especially important for certain array subclasses, like
typed arrays, since the intermediate array would necessarily have values truncated to fit into the appropriate
type. the length property of the from() method is 1. in es2015, the class syntax allows sub-classing of both built-in and user-defined classes. as a result, static methods such as array.from() are "inherited" by subclasses of array, and create new instances of the subclass, not array. poly...
... the ecma-262 standard in the 6th edition (es2015). as such, it may not be present in other implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of array.from() in implementations that don't natively support it. polyfill notes: this algorithm is exactly as specified in ecma-262 6th edition (assuming object and
typeerror have their original values and that callback.call() evaluates to the original value of function.proto
type.call()). in addition, since true iterables cannot be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ecma-262. // production steps of ecma-262, edition 6, 22.1.2.1 if (!array.from) { array.from = (function () { var symbol...
... ecma-262. ...
...And 5 more matches
BigInt - JavaScript
= bigint("0x1fffffffffffff") // āŖ 9007199254740991n const hugebin = bigint("0b11111111111111111111111111111111111111111111111111111") // āŖ 9007199254740991n bigint is similar to number in some ways, but also differs in a few key matters — it cannot be used with methods in the built-in math object and cannot be mixed with instances of number in operations; they must be coerced to the same
type. ...
...11") // āŖ 9007199254740991n bigint is similar to number in some ways, but also differs in a few key matters — it cannot be used with methods in the built-in math object and cannot be mixed with instances of number in operations; they must be coerced to the same
type. 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' // true
typeof bigint('1') === 'bigint' // true when wrapped in an object, a bigint will be considered as a normal "object"
type:
typeof object(1n) === 'object' // true operators the following operators may be used with bigints (or object-wrapped bigints): +, *, -, **, %. bitwise opera...
...-1 : ((a > b) ? 1 : 0)) // āŖ [ -12n, 0, 0n, 4n, 4, 6, 10 ] note that comparisons with object-wrapped bigints act as with other objects, only indicating equality when the same object instance is compared: 0n === object(0n) // false object(0n) === object(0n) /...
...And 5 more matches
Intl.DisplayNames - JavaScript
e clone https://github.com/mdn/interactive-examples and send us a pull request. constructor intl.displaynames() creates a new intl.displaynames object. static methods intl.displaynames.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.displaynames.proto
type.of() this method receives a code and returns a string based on the locale and options provided when instantiating intl.displaynames. intl.displaynames.proto
type.resolvedoptions() returns a new object with properties reflecting the locale and formatting options computed during initialization of the object. examples region code display names to create an intl.displaynames for a locale and ge...
...mes. intl.displaynames.proto
type.resolvedoptions() returns a new object with properties reflecting the locale and formatting options computed during initialization of the object. examples region code display names to create an intl.displaynames for a locale and get the display name for a region code. ...
... // get display names of language in english let l...
...And 5 more matches
Number - JavaScript
this means it can represent fractional values, but there are some limits to what it can store. a number only keeps about 17 decimal places of precision; arithmetic is subject to rounding. ...
...this means it can represent fractional values, but there are some limits to what it can store. a number only keeps about 17 decimal places of precision; arithmetic is subject to rounding. ...
... values, but there are some limits to what it can store. a number only keeps about 17 decimal places of precision; arithmetic is subject to rounding. the largest value a number can hold is about 1.8×10308. numbers beyond that are replaced with the special number constant infinity. a number literal like 37 in javascript code is a floating-point value, not an integer. there is no separate integer
type in common everyday use. (javascript now has a bigint
type, but it was not designed to replace number for everyday uses. 37 is still a number, not a bigint.) number may also be expressed in literal forms like 0b101, 0o13, 0x0a. learn more on numeric lexical grammar here. description when used as a function, number(value) converts a string or other value to the number
type. if the value can't...
...And 5 more matches
Object.assign() - JavaScript
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. ...
... 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 proto
type if the merge sources contain getters. for copying property definitions (including their enumerability) into proto
types, use object.getownpropertydescriptor() and object.defineproperty() instead. both string and symbol properties are copied. in case of an error, for example if a property is non-writable, a
typeerror is raised, and the target object is changed if any properties are added before the error is raised. note: object.assign() does not throw on null or undefined sources. polyfill this polyfill doe...
.... both string and symbol properties are copied. in case of an error, for example if a property is non-writable, a
typeerror is raised, and the target object is changed if any properties are added before the error is raised. note: object.assign() does not throw on null or undefined sources. ...
...And 5 more matches
Uint16Array() constructor - JavaScript
the uint16array()
typed array constructor creates an array of 16-bit unsigned integers in the platform byte order. syntax new uint16array(); // new in es2017 new uint16array(length); new uint16array(
typedarray); new uint16array(object); new uint16array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. ...
..., of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object when called with an object argument, a new
typed array is created as if by the
typedarray.from() method. buffer, byteoffset, length when called with a buffer, and optionally a byteoffset and a length argument, a new
typed array view is created that views the specified arraybuffer. the byteoffset and length parameters specify...
...if control over byte order is needed, use dataview instead. ...
...And 5 more matches
Object initializer - JavaScript
method names (es2015) let o = { property(parameters) {} } // computed property names (es2015) let prop = 'foo' let o = { [prop]: 'hey', ['b' + 'ar']: 'there' } description an object initializer is an expression that describes the initialization of an object. objects consist of properties, which are used to describe an object. values of object properties can either contain primitive data
types or other objects. object literal notation vs json the object literal notation is not the same as the javascript object notation (json). although they look similar, there are differences between them: json permits only property definition using "property": value syntax. the property name must be double-quoted, and the definition cannot be a shorthand. in json the values can only be strings...
...et param = 'size' let config = { [param]: 12, ['mobile' + param.charat(0).touppercase() + param.slice(1)]: 4 } console.log(config) // {size: 12, mobilesize: 4} spread properties the rest/spread properties for ecmascript proposal (stage 4) adds spread properties to object literals. it copies own enumerable properties from a provided object onto a new object. ...
...ng (excluding proto
type) or merging objects is now possible using a shorter syntax than object.assign(). let obj1 = { foo: 'bar', x: 42 } let obj2 = { foo: 'baz', y: 13 } let clonedobj = { ...obj1 } // object { foo: "bar", x: 42 } let mergedobj = { ...obj1, ...obj2 } // object { foo: "baz", x: 42, y: 13 } note that object.assign() triggers setters, whereas the spread operator doesn't! ...
...And 5 more matches
Spread syntax (...) - JavaScript
jclone = { ...obj }; rest syntax (parameters) rest syntax looks exactly like spread syntax. in a way, rest syntax is the opposite of spread syntax. spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element. see rest parameters. examples spread in function calls replace apply() it is common to use function.proto
type.apply() in cases where you want to use the elements of an array as arguments to a function. function myfunction(x, y, z) { } const args = [0, 1, 2]; myfunction.apply(null, args); with spread syntax the above can be written as: function myfunction(x, y, z) { } const args = [0, 1, 2]; myfunction(...args); any argument in the argument list can use spread syntax, and the spread syntax can be used...
... an array can be easily used with new thanks to spread syntax: const datefields = [1970, 0, 1]; // 1 jan 1970 const d = new date(...datefields); to use new with an array of parameters without spread syntax, you would have to do it indirectly through partial application: function applyandnew(constructor, args) { function partial () { return constructor.apply(this, args); }; if (
typeof constructor.proto
type === "object") { partial.proto
type = object.create(constructor.proto
type); } return partial; } function myconstructor () { console.log("arguments.length: " + arguments.length); console.log(arguments); this.prop1="val1"; this.prop2="val2"; }; const myarguments = ["hi", "how", "are", "you", "mr", null]; const myconstructorwitharguments = applyandnew...
...vely goes one level deep while copying an array. therefore, it may be unsuitable for copying multidimensional arrays, as the following example shows. (the same is true with object.assign() and spread syntax.) const a = [[1], [2], [3]]; const b = [...a]; b.shift().shift(); // 1 // oh no! now array 'a' is affected as well: a // [[], [2], [3]] a better way to concatenate arrays array.proto
type.concat() is often used to concatenate an array to the end of an existing array. without spread syntax, this is done as: const arr1 = [0, 1, 2]; const arr2 = [3, 4, 5]; // append all items from arr2 onto arr1 arr1 = arr1.concat(arr2); with spread syntax this becomes: let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; // arr1 is now [0, 1, 2, 3, 4, 5] // note: not to use ...
...And 5 more matches
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. ...
... 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. to define an object
type, create a function for the object
type that specifies its name and properties. an object can have a property that is itself another object. see the examples below. when the code new foo(...) is executed, the following things happen: a new object is created, inheriting from foo.proto
type. the constructor function foo is called with the specified arguments, and with this bound to the newly cre...
...if the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. ...
...And 5 more matches
<altGlyph> - SVG: Scalable Vector Graphics
the <altglyph> svg element allows sophisticated selection of the glyphs used to render its child character data. usage context categoriestext content element, text content child elementpermitted contentany elements or character data attributes x this attribute defines the corresponding absolute x-coordinates for rendering the element. ...
...ontent child elementpermitted contentany elements or character data attributes x this attribute defines the corresponding absolute x-coordinates for rendering the element. value
type: <list-of-coordinates> ; default value: absolute x-coordinate of ancestor <text> or <tspan>; animatable: yes y this attribute defines the corresponding absolute y-coordinates for rendering the element. value
type: <list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>; animatable: yes dx this attribute indicates a shift along the x-axis on the position of the element. ...
...es> ; default value: absolute x-coordinate of ancestor <text> or <tspan>; animatable: yes y this attribute defines the corresponding absolute y-coordinates for rendering the element. value
type: <list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>; animatable: yes dx this attribute indicates a shift along the x-axis on the position of the element. value
type: <list-of-coordinates> ; default value: relative x-coordinate of ancestor <text> or <tspan>; animatable: yes dy this attribute indicates a shift along the x-axis on the position of the element. ...
...And 5 more matches
passwords - Archive of obsolete content
ty. usernamefield the value of the "name" attribute for the form's username field. passwordfield the value of the "name" attribute for the form's password field. ...
...for the form's username field. passwordfield the value of the "name" attribute for the form's password field. so: given a form at http://www.example.com/login with the following html: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <label>username:</label> <input
type="text" name="uname"> <label>password:</label> <input
type="password" name="pword"> </form> the corresponding values for the credential (excluding username and password) should be: url: "http://www.example.com" formsubmiturl: "http://login.example.com" usernamefield: "uname" passwordfield: "pword" note that for both url and formsubmiturl, the portion of the url after the hostname is omitted. http authentication credential these are used t...
... password string the password ...
...And 4 more matches
request - Archive of obsolete content
dvanced usage, check out the net/xhr module, based on the browser's xmlhttprequest object. globals constructors request(options) this constructor creates a request object that can be used to make network requests. the constructor takes a single parameter options which is used to set several properties on the resulting request. parameters options : object optional options: name
type url string,url this is the url to which the request will be made. can either be a string or an instance of the sdk's url. oncomplete function this function will be called when the request has received a response (or in terms of xhr, when readystate == 4). the function is passed a response object. headers object an unorde...
...tent to send to the server. if content is a string, it should be url-encoded (use encodeuricomponent). if content is an object, it should be a collection of name/value pairs. nested objects & arrays should encode safely. for get and head requests, the query string (content) will be appended to the url. for post and put requests, it will be sent as the body of the request. ...
... if content is a string, it should be url-encoded (use encodeuricomponent). if content is an object, it should be a collection of name/value pairs. nested objects & arrays should encode safely. for get and head requests, the query string (content) will be appended to the url. for post and put requests, it will be sent as the body of the request. ...
...And 4 more matches
window/utils - Archive of obsolete content
ions as its second argument. var { open } = require('sdk/window/utils'); var window = open('data:text/html,hello window'); this function wraps nsiwindowwatcher.openwindow. parameters uri : string uri of the document to be loaded into the window. only chrome, resource, and data schemes are accepted. options : object options for the function, with the following properties: name
type parent nsidomwindow parent for the new window. optional, defaults to null. name string name that is assigned to the window. optional, defaults to null. features object map of features to set for the window, defined like this: { width: 10, height: 15, chrome: true }. see the window.open features documentation for more details. op...
...tra argument(s) to be attached to the new window as the window.arguments property. returns nsidomwindow opendialog(options) opens a top level window and returns its nsidomwindow representation. this is the same as open, but you can supply more features. it wraps window.opendialog. parameters options : object options for the function, with the following properties: name
type url string uri of the document to be loaded into the window. defaults to "chrome://browser/content/browser.xul". name string optional name that is assigned to the window. defaults to "_blank". features string map of features to set for the window, defined like: { width: 10, height: 15, chrome: true }. for the set of features you can ...
...ents property. returns nsidomwindow windows() returns an array of all currently opened windows. note that these windows may still be loading. ...
...And 4 more matches
Canvas code snippets - Archive of obsolete content
de a certain shape or not. function getpixelcolour(canvas, x, y) { var cx = canvas.getcontext('2d'); var pixel = cx.getimagedata(x, y, 1, 1); return { r: pixel.data[0], g: pixel.data[1], b: pixel.data[2], a: pixel.data[3] }; } chaining methods this class provides jquery-style chained access to 2d context methods and properties. ...
... } chaining methods this class provides jquery-style chained access to 2d context methods and properties. ...
...ient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'strokestyle', 'textalign', 'textbaseline']; for (let m of methods) { let method = m; canvas2dcontext.proto
type[method] = function() { this.ctx[method].apply(this.ctx, arguments); return this; }; } for (let m of gettermethods) { let method = m; canvas2dcontext.proto
type[method] = function() { return this.ctx[method].apply(this.ctx, arguments); }; } for (let p of props) { let prop = p; canvas2dcontext.proto
type[prop] = function(value) { if (value ===...
...And 4 more matches
QuerySelector - Archive of obsolete content
along the lines of other frameworks such as jquery or proto
type, shortening the "queryselector" name can be convenient: function $ (selector, el) { if (!el) {el = document;} return el.queryselector(selector); } function $$ (selector, el) { if (!el) {el = document;} return el.queryselectorall(selector); // note: the returned object is a nodelist. ...
...queryselector" name can be convenient: function $ (selector, el) { if (!el) {el = document;} return el.queryselector(selector); } function $$ (selector, el) { if (!el) {el = document;} return el.queryselectorall(selector); // note: the returned object is a nodelist. ...
...if you'd like to convert it to a array for convenience, use this instead: // return array.proto
type.slice.call(el.queryselectorall(selector)); } alert($('#myid').id); (note that while using the firefox web console, the above functions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to add chromewindow.proto
type or window.proto
type, accessing this.document.queryselector, or following the jquery style of chaining by returning 'this' within each proto
type method of $()): htmldocument.proto
type.$ = function (selector) { // only for html return this.queryselector(selector); }; example: <h1>test!</h1> <script> htmldocument.proto
type.$ = function (selector) { return this.queryselector(selector); }; a...
...And 4 more matches
Using XML Data Islands in Mozilla - Archive of obsolete content
re is not based on multi-vendor web standards and is not supported in firefox (or other non-ie browsers). xml data islands are no longer supported from internet explorer 10 onwards. html5 has a more general feature called "data blocks" that can carry almost any textual data, including xml. ...
...not supported in firefox (or other non-ie browsers). xml data islands are no longer supported from internet explorer 10 onwards. html5 has a more general feature called "data blocks" that can carry almost any textual data, including xml. javascript can use the content of a <script> element as a data block if the src attribute is omitted and the
type attribute does not specify an executable script
type. ...
...t of a <script> element as a data block if the src attribute is omitted and the
type attribute does not specify an executable script
type. when putting xml in a data block, you need to make sure that the xml content you are embedding does not have an end tag that case-insensitively matches "</script>". ...
...And 4 more matches
Making it into a static overlay - Archive of obsolete content
essary when installing an extension like ours. we'll first make the file into a static overlay, then we'll make it into a dynamic overlay. ...
...to make the file into a static overlay, we need to move all the code we added to navigator.xul into a new file tinderstatusoverlay.xul in the same directory: <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css"
type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script
type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> tinderstatusoverlay.xul starts with an xml processing instruction that identifies the file as xml (all xul files ...
...omitted, the element will be added as the last child of statusbar, usually before the resizer grippy. we could instead have used an insertafter attribute to place the element after another. to use this overlay instead of our changes to navigator.xul we need to remove our changes, then add a reference to the overlay to the top of navigator.xul: ... ...
...And 4 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
gecko, which is at the core of the mozilla browser recent beta-only versions of the aol software based on netscape gecko, the layout engine of the mozilla project. caveats: aol time warner's compuserve browser, also based on netscape gecko, does not support xpinstall. netscape communicator 4.x does not support xpinstall. what does a plugin consist of? plugins can consist of the following
types of files, all of which can be installed via an xpi package: shared libraries (i.e. on windows, these are dlls, on unix these are *.so files). these files are native code files made with the netscape plugin api. if the plugin is scriptable, then it will also consist of an xpt file. examples would be flash 6r47 on windows, which consists of a dll (called npswf32.dll) and an xpt file for scripta...
...the plugin is scriptable, then it will also consist of an xpt file. examples would be flash 6r47 on windows, which consists of a dll (called npswf32.dll) and an xpt file for scriptability (called flashplayer.xpt). if you are developing a plugin and wish to make it scriptable, read the relevant portions of the plugin api. additional software. many plugins are part of additional software for media
types. for example, realplayer on windows consists of a plugin dll, but also the realplayer application (exe) which the plugin dll is a subset of. in this case, the plugin is the part of the software package that is browser-specific, as a mechanism to give the application additional "hooks" into the browser. xpinstall can be used to install any combination of these files on an end-user's machine. for...
...olves a digitally signed jar file which contained the software components to be installed as well as a javascript install.js file (called the install script) as the installer logic. downloads and installs would be initiated with a security dialog box naming the certificate authority and the signer. often, the smartupdate download was triggered via the pluginurl attribute of the embed tag: <embed
type="application/x-random
type" src="myfile.typ" width="50" height="50" pluginurl="http://my
typecompany.xyz/jarpacks/my
typeplugin.jar"></embed> in the example above, the pluginurl attribute points to the signed jar file, which netscape communicator 4.x would then download (subject to the security dialog boxes) if the plugin was not located on the user's machine. smartupdate differs from xpinstall in ...
...And 4 more matches
How to implement a custom XUL query processor component - Archive of obsolete content
when registering the component. in this example, we will create a simple javascript xpcom component. the component will hold a small array of javascript objects as its datasource. in practice, you would use your own custom source of data. ...
...we are not really using the datasources in our sample...
... <label value="?name"/> <label value="?age"/> <label value="?hair"/> <label value="?eye"/> </row> </template> </rows> </grid> </window> a few things to note. we are not really using the datasources in our sample component, so we set it to a dummy value. an empty string would be ok too. the query
type is important. it is used to create an instance of our xpcom object. the contract id of our xpcom component should be of the form "@mozilla.org/xul/xul-query-processor;1?name=xxx", where the xxx is the query
type used in the xul template block. here is our sample javascript xpcom query processor: components.utils.import("resource://gre/modules/xpcomutils.jsm"); // basic wrapper for nsixultempla...
...And 4 more matches
appendNotification - Archive of obsolete content
if another notification is already present with a higher priority, the new notification will be added behind it. label - label to appear on the notification. this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. keep in mind that this is all xul so using html elements for styling might still need additional css in order to work as you might expect. ...
...tion 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 is closed. the notification is also not closed if an error is thrown. label - the label to appear on the button popup - the id of a popup for the button. if null, the button is not a button popup (e.g. a menu). the
type property must also be set to "menu", or "menu-button". 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 ...
...up property. notification box events requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 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. ...
...And 4 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
les character encoding some text editors have a setting for character encoding. if your language uses only plain latin (ascii) characters, set your text editor to use any encoding except unicode. if your language uses accents or other non-latin characters, set your text editor to save files using the utf-8 encoding. to check your text editor, create a plain text file named test.txt. in the file,
type some of the special characters that your language uses. save the file. open the file in seamonkey (for example, by dragging it and dropping it in the navigator window, or by choosing file – open file... from seamonkey's menu bar). from seamonkey's menu bar, choose view – character encoding – unicode (utf-8). check that the text you
typed looks ok with this setting. if your text editor does ...
...ing steps in this new directory, creating five files there. explanation: the name is a unique identifier for your extension, and the directory will contain all your extension's files. 5. create a plain text file named contents.rdf. copy the following content, making sure that you scroll to get all of it. ...
... sections for toolbars where you do not want your button. save the file. explanation: this file contains details of your extension, and specifies how it modifies seamonkey. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. ...
...And 4 more matches
Localization - Archive of obsolete content
ample below demonstrates the use of an entity in a button. <button label="&findlabel;"/> the text that will appear on the label will be the value that the entity &findlabel; has. a file is created which contains the entity declarations for each supported language. in english, the &findlabel; entity will probably be declared to have the text "find". dtd files entities are declared in document
type definition (dtd) files. files of this
type are normally used to declare the syntax and semantics of a particular xml file, but they also let you declare entities. in the mozilla chrome system, you will find dtd files located in the locales subdirectory. you would normally have one dtd file (with an extension .dtd) per xul file. if you look in the chrome directory, you should see an archive for y...
...uld save them in utf-8 format (without bom). for more information, see mozilla language packs. once you have created a dtd file for your xul, you will need to add a line to the xul file which indicates that you want to use the dtd file. otherwise, errors will occur as it won't be able to find the entities. to do this, add a line of the following form somewhere near the top of the xul file: <!doc
type window system "chrome://findfile/locale/findfile.dtd"> this line specifies that the url indicated is to be used as a dtd for the file. in this case, we have declared that we want to use the findfile.dtd dtd file. this line is typically placed just before the window element. you also need to add the locale to the chrome.manifest file, for example: locale findfile en-us locale/ declaring enti...
..., 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 dialog so that it uses a dtd file for all of its text strings. the entire xul file is shown below with the changes shown in red. ...
...And 4 more matches
More Menu Features - Archive of obsolete content
have menu items that have checks on them. for example, a feature that is enabled has a check placed beside the command and a feature that is disabled has no check. when the user selects the menu, the check state is switched. you may also want to create radio buttons on menu items. the checks are created in a similar way to the checkbox and radio elements. ...
... have checks on them. for example, a feature that is enabled has a check placed beside the command and a feature that is disabled has no check. when the user selects the menu, the check state is switched. you may also want to create radio buttons on menu items. the checks are created in a similar way to the checkbox and radio elements. ...
...a similar way to the checkbox and radio elements. this involves the use of two attributes:
type to indicate the
type of check, and name to group commands together. the example below creates a menu with a checked item. example 2 : source view <toolbox> <menubar id="options-menubar"> <menu id="options_menu" label="options"> <menupopup> <menuitem id="backups" label="make backups"
type="checkbox"/> <menuitem id="email" label="email administrator"
type="checkbox" checked="true"/> </menupopup> </menu> </menubar> </toolbox> the
type attribute has been added which is used to make the menu item checkable. by setting its value to checkbox, the menu item can be checked on and off by selecting the menu item. menu with radios in addition to standard checks, you can ...
...And 4 more matches
Skinning XUL Files by Hand - Archive of obsolete content
define new classes of buttons particular to your xul file, in which case the style information will be wholly defined within your custom css file. reading the global skin it's very important to familiarize yourself with the basic style definitions in the global skin before you set out creating your own stylesheet. css can quickly become complicated. the ability to apply styles to elements of a
type, to specifically identified elements, and to classes of elements creates the potential for redundancies or conflicts in the style information. to avoid this, the makers of the css specification have created some rules of precedence that look at how many different rules have been defined for an element, where the style definitions appear (i.e., externally in a css file or inline), where the elemen...
...lobal skin -- makes all xul menus appear with a one pixel border, a light blue background, and 10 point fonts: menu { border: 1px; background-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids. ...
...and <dialog> elements. after these, the global skin defines styles for some of the xul widgets: statusbar, statusbarpanel and so on. most widgets have their styles defined in separate css files in the same directory that the global.css file. note that much of the style attributes in these rules have to do with borders, font information, color, margin, native appearance. in general, these are the
types of styles that should be defined only in the global skin of an application, since these are the styles that give an application a certain overall look, or skin. note that for any one class of element, there may be several pseudo-classes andattribute selector styles defined. when you declare a button in your xul to be of a particular class, you take advantage of all of the styles defined for the...
...And 4 more matches
Tree Box Objects - Archive of obsolete content
following example of the getcellat() function. ...
...an out parameter is used since the function needs to return more that one value. you will see a number of interfaces that use out parameters in the xulplanet object reference (fixme: deadlink). these are indicated by the word 'out' before the argument. for these, you will n...
...re that one value. you will see a number of interfaces that use out parameters in the xulplanet object reference (fixme: deadlink). these are indicated by the word 'out' before the argument. for these, you will need to supply an empty object and the function will fill in the 'value' property with the necessary value. the three out parameters will be filled in with the row, the column and a child
type. the row is the index of the row the mouse is over, since we call it with the event coordinates of a mousemove event. if the coordinate is not over a row, the row value will be set to -1. the column is a column object in mozilla 1.8 and later. in earlier versions, columns are identified with a string, the id of the column. in later versions, a separate column object exists, which can be queried f...
...And 4 more matches
Using Remote XUL - Archive of obsolete content
ity concern; support for it was disabled in gecko 2.0. this also means you can't load xul using file:// urls unless you set the preference dom.allow_xul_xbl_for_file to true. however, there is a whitelist that lets you specify sites that can still use remote xul. the remote xul manager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of
type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces. it contains elements fo...
... should have experience with tag-based languages like html along with basic javascript, css, and the dom. knowledge of xml and its syntax is useful but not required. you also need a text editor and a web browser that can render xul, like mozilla, or firefox. ...
...nd its syntax is useful but not required. you also need a text editor and a web browser that can render xul, like mozilla, or firefox. if you build a xul file along with this tutorial and put it onto a web server, you need to configure your web server to specify the content
type of xul files as application/vnd.mozilla.xul+xml. ...
...And 4 more matches
arrowscrollbox - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width clicktoscroll
type: boolean clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox content. if false, the mouse must be hovered over the arrows to scroll automatically. disabled
type: boolean indicates whether the...
...ntrols. 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. 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...
...ies 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, , , , , statustext, style, ,, tooltip, tooltiptext, top, width disabled
type: boolean gets and sets the value of the disabled attribute. scrollboxobject
type: nsiscrollboxobject the scroll box object implements the nsiscrollboxobject interface, which may be used to retrieve and adjust the scroll position of the list box. scrollincrement
type: integer a read only property that lets you retrieve the number of pixels by which scrolling will occur when t...
...And 4 more matches
CommandLine - Archive of obsolete content
cation. an nsicommandline object is passed as the first argument of the launched window: example var cmdline = window.arguments[0]; cmdline = cmdline.queryinterface(components.interfaces.nsicommandline); alert(cmdline.handleflagwithparam("test", false)); see also: chrome: command line for single instance applications of course, for a single instance application (see toolkit.singletonwindow
type for more information), the last example still applies the first time your application is launched. however, if you'd like to retrieve the latest command line arguments (to open a file for example), a possible solution is to create your own command line handler. for the sake of simplicity, the proposed solution involves the observer service to notify observers that the updated arguments are avail...
...e) || aiid.equals(nsisupports)) return this; throw components.results.ns_error_no_interface; }, /* nsimodule */ getclassobject : function mod_gch(acompmgr, acid, aiid) { if (acid.equals(class_id)) return apphandler.queryinterface(aiid); throw components.results.ns_error_failure; }, registerself : function mod_regself(acompmgr, afilespec, alocation, a
type) { var compreg = acompmgr.queryinterface(nsicomponentregistrar); compreg.registerfactorylocation(class_id, class_name, contract_id, afilespec, alocation, a
type); var catman = components.classes["@mozilla.org/categorymanager;1"] .getservice(nsicategorymanager); catman.addcategoryentry("command-line-handler", ...
...me, contract_id, afilespec, alocation, a
type); var catman = components.classes["@mozilla.org/categorymanager;1"] .getservice(nsicategorymanager); catman.addcategoryentry("command-line-handler", cld_category, contract_id, true, true); }, unregisterself : function mod_unreg(acompmgr, alocation, a
type) { var compreg = acompmgr.queryinterface(nsicomponentregistrar); compreg.unregisterfactorylocation(class_id, alocation); var catman = components.classes["@mozilla.org/categorymanager;1"] .getservice(nsicategorymanager); catman.deletecategoryentry("command-line-handler", cld_category); }, canunload : function (acompmgr) { return true; } };...
...And 4 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
e-issuing server software (such as red hat certificate system). the methods used to validate an identity vary depending on the policies of a given ca-just as the methods to validate other forms of identification vary depending on who is issuing the id and the purpose for which it will be used. in general, before issuing a certificate, the ca must use its published verification procedures for that
type of certificate to ensure that an entity requesting a certificate is in fact who it claims to be. the certificate issued by the ca binds a particular public key to the name of the entity the certificate identifies (such as the name of an employee or a server). certificates help prevent the use of fake public keys for impersonation. only the public key certified by the certificate will work with t...
...r to claim later not to have sent the email or the form. client authentication is an essential element of network security within most intranets or extranets. the sections that follow contrast two forms of client authentication: password-based authentication. almost all server software permits client authentication by means of a name and password. for example, a server might require a user to
type a name and password before granting access to the server. the server maintains a list of names and passwords; if a particular name is on the list, and if the user
types the correct password, the server grants access. certificate-based authentication. client authentication based on certificates is part of the ssl protocol. the client digitally signs a randomly generated piece of data and sends bo...
...r, using encryption for email requires careful planning. if the recipient of encrypted email messages loses his or her private key and does not have access to a backup copy of the key, for example, the encrypted messages can never be decrypted. single sign-on network users are frequently required to remember multiple passwords for the various services they use. for example, a user might have to
type a different password to log into the network, collect email, use directory services, use the corporate calendar program, and access various servers. multiple passwords are an ongoing headache for both users and system administrators. users have difficulty keeping track of different passwords, tend to choose poor ones, and tend to write them down in obvious places. administrators must keep track o...
...And 4 more matches
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. /* keyword values */ display-outside: block-level; display-outside: inline-level; display-outside: run-in; display-outside: contents; display-outside: none; display-outside: table-row-group; display-outside: table-header-group; display-outside: table-footer-group; display-outside: table-row; display-outside: table-cell; display-outside: table-column-group; display-outside: table-column; display-outside: table-caption; display-outside: ruby-base; display-outside: ruby-text; display-outside: ruby-base-container; display-outside: ruby-text-container; /* global values */ display-outside: inherit; display-outside:...
...out its contents using flex layout. none the element generates no boxes, and does not participate in any formatting context. table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption the element is an internal table element, and participates in a table layout context. ...
...e element generates no boxes, and does not participate in any formatting context. table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption the element is an internal table element, and participates in a table layout context. table-cell and table-caption are layout-specific leaf
types; the rest are layout-specific internal
types. ...
...And 4 more matches
E4X for templating - Archive of obsolete content
s (especially along with the convenience of javascript 1.8 expression closures), the templates can function more dynamically, offering the power and readability of templating languages such as smarty for php (though admittedly without the currently wider cross-browser support of xslt or the strictly-xml approach of phptal or seethrough templating). ...
... php (though admittedly without the currently wider cross-browser support of xslt or the strictly-xml approach of phptal or seethrough templating). ...
...roach of phptal or seethrough templating). ...
...And 4 more matches
New in JavaScript 1.2 - Archive of obsolete content
<script language="javascript1.2"> <!-- javascript for navigator 4.0. --> new features in javascript 1.2 new objects you can create objects using literal notation (inspired by dictionary literal syntax from python 1.x). arrays can now be created using literal notation (inspired by list literal syntax from python 1.x). ...
...ipt1.2"> <!-- javascript for navigator 4.0. --> new features in javascript 1.2 new objects you can create objects using literal notation (inspired by dictionary literal syntax from python 1.x). arrays can now be created using literal notation (inspired by list literal syntax from python 1.x). ...
...or navigator 4.0. --> new features in javascript 1.2 new objects you can create objects using literal notation (inspired by dictionary literal syntax from python 1.x). arrays can now be created using literal notation (inspired by list literal syntax from python 1.x). ...
...And 4 more matches
Object.observe() - Archive of obsolete content
bject.observe(obj, callback[, acceptlist]) parameters obj the object to be observed. callback the function called each time changes are made, with the following argument: changes an array of objects each representing a change. the properties of these change objects are: name: the name of the property which was changed. object: the changed object after the change was made.
type: a string indicating the
type of change taking place. one of "add", "update", or "delete". oldvalue: only for "update" and "delete"
types. the value before the change. acceptlist the list of
types of changes to be observed on the given object for the given callback. if omitted, the array ["add", "update", "delete", "reconfigure", "setproto
type", "preventextensions"] will be used. ...
...of changes to be observed on the given object for the given callback. if omitted, the array ["add", "update", "delete", "reconfigure", "setproto
type", "preventextensions"] will be used. return value the object to be observed. description callback is called each time a change is made to obj, with an array of all changes in the order in which they occurred. ...
...ntextensions"] will be used. return value the object to be observed. description callback is called each time a change is made to obj, with an array of all changes in the order in which they occurred. ...
...And 4 more matches
Reference - Archive of obsolete content
as include a link to the yet-to-be-written javascript 1.2 page documenting the various oddities and deviations made in that version, something which i think we should do anyway. maybe something like main article: javascript 1.2--sevenspade 15:16, 6 july 2006 (pdt) as a side note, the ability to to specify different versions has come up again - now between versions 1.6 and 1.7. with <script
type="application/javascript;version=1.7" />. see new_in_javascript_1.7#using_javascript_1.7. this will impact the presentation of future examples if it hasn't already. --george3 11:47, 14 sept 2006 (edt) sgml comment hiding quirks sgml comment hiding needs to be mentioned here and its consequences. brendan just mentioned one obscure one here: https://bugzilla.mozilla.org/show_bu...?id=310993#...
...onstructor note : the function.constructor seems to keep on refering to itself, if you do the following you get same results which suggests that this is indeed the top level object. alert(function.constructor.constructor) alert(function.constructor.constructor.constructor.constructor) function == object however the following statement suggests that function is object. ...
...ng to itself, if you do the following you get same results which suggests that this is indeed the top level object. alert(function.constructor.constructor) alert(function.constructor.constructor.constructor.constructor) function == object however the following statement suggests that function is object. ...
...And 4 more matches
Windows Media in Netscape - Archive of obsolete content
w that detection was done can be found here (devedge-temp). below, some of the salient points are illustrated in a code snippet: if (window.activexobject && navigator.useragent.indexof('windows') != -1) { // ie for windows object instantiation -- use of activexobject } else if(window.geckoactivexobject) { // netscape 7.1 object instantiation --use of geckoactivexobject } else if(navigator.mime
types) { // plugin 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 simi...
...layer object that exposes all its properties and methods, it is useful for rapid detections. ...
... properties and methods, it is useful for rapid detections. here is a code snippet that shows this: var player; try { if (window.activexobject) { player = new activexobject("mediaplayer.mediaplayer.1"); } else if (window.geckoactivexobject) { player = new geckoactivexobject("mediaplayer.mediaplayer.1"); } else { // plugin code using navigator.mime
types player = navigator.mime
types["application/x-mplayer2"].enabledplugin; } } catch(e) { // handle error -- no wmp control // download: http://www.microsoft.com/windows/windowsmedia/download/default.asp } if (player) { // windows media player control exists } currently, dynamically writing out markup using document.write after using detection mechanisms won't work owing to a bug in netscape 7.1. both activexobjec...
...And 4 more matches
Building up a basic demo with A-Frame - Game development
t creating virtual reality (vr) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier. mozilla's a-frame framework provides a markup language allowing us to build 3d vr landscapes using a system familiar to web developers, which follows game development coding principles; this is useful for quickly and successfully building proto
types and demos, without having to write a lot of javascript or glsl. this article explains how to get up and running with a-frame, and how to use it to build up a simple demo. high level overview the current version of a-frame is 0.3.2, which means it's highly experimental, but it already works and you can test it right away in the browser. it runs on desktop, mobile (ios and android), and oculus r...
...ct in. save a copy of the latest a-frame javascript library file inside your directory (check the github repository for latest stable a dev builds). open the a-frame documentation in a separate tab — it is useful to refer to. html structure the first step is to create an html document — inside your project directory, create a new index.html file, and save the follow html inside it: <!doc
type html> <html> <head> <meta charset="utf-8"> <title>mdn games: a-frame demo</title> <script src="aframe.min.js"></script> </head> <body> <!-- html goes here --> </body> </html> this contains some basic information like the document charset and <title>. the <script> element includes the a-frame framework in the page; we will write our example code inside the <body> element. initializing th...
...tion="0 1 4" cursor-visible="true" cursor-scale="2" cursor-color="#0095dd" cursor-opacity="0.5"> </a-camera> we've also defined a cursor for the given camera, using the cursor-* attributes (by default it is invisible.) — we've set its scale so it will more easily visible, its color, and some opacity so it won't completely covering the objects behind it. ...
...And 4 more matches
Images, media, and form elements - Learn web development
mple form fields such as text inputs, through to more complex fields added in html5 such as color and date pickers. there are some additional elements, such as <textarea> for multiline text input, and also elements used to contain and label parts of forms such as <fieldset> and <legend>. ...
...the default styling of these elements will differ however based on the operating system and browser that your user visits the site with. ...
...the default styling of these elements will differ however based on the operating system and browser that your user visits the site with. ...
...And 4 more matches
CSS selectors - Learn web development
previous overview: building blocks next in css, selectors are used to target the html elements on our web pages that we want to style. there are a wide variety of css selectors available, allowing for fine-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. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how css selectors work in detail. what is a selector? you have met selectors already. a css selector is the first part of a css rule. it is a pattern of elements...
...u group selectors in this way, if any selector is invalid the whole rule will be ignored. in the following example, the invalid class selector rule will be ignored, whereas the h1 would still be styled. h1 { color: blue; } ..special { color: blue; } when combined however, neither the h1 nor the class will be styled as the entire rule is deemed invalid. h1, ..special { color: blue; }
types of selectors there are a few different groupings of selectors, and knowing which
type of selector you might need will help you to find the right tool for the job. in this article's subarticles we will look at the different groups of selectors in more detail.
type, class, and id selectors this group includes selectors that target an html element such as an <h1>. h1 { } it also includes selec...
... then selected. p::first-line { } combinators the final group of selectors combine other selectors in order to target elements within our documents. ...
...And 4 more matches
Fundamental text and font styling - Learn web development
operating systems (windows, macos, the most common linux distributions, android, and ios). the list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the microsoft core fonts for the web initiative in the late 90s and early 2000s): name generic
type notes arial sans-serif it's often considered best practice to also add helvetica as a preferred alternative to arial as, although their font faces are almost identical, helvetica is considered to have a nicer shape, even if arial is more broadly available. courier new monospace some oses have an alternative (possibly older) version of the courier new font call...
...space are quite predictable and should provide something reasonable. on the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing as you go. the five names are defined as follows: term definition example serif fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some
typefaces) my big red elephant sans-serif fonts that don't have serifs. my big red elephant monospace fonts where every character has the same width, typically used in code listings. my big red elephant cursive fonts that are intended to emulate handwriting, with flowing, connected strokes. my big red elephant fantasy fonts that are intended ...
...o keep things simple, and avoid setting the font-size of container elements where possible. a simple sizing example when sizing your text, it is usually a good idea to set the base font-size of the document to 10 px, so that then the maths is a lot easier to work out — required (r)em values are then the pixel font size divided by 10, not 16. after doing that, you can easily size the different
types of text in your document to what you want. it is a good idea to list all your font-size rulesets in a designated area in your stylesheet, so they are easy to find. our new result is like so: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat...
...And 4 more matches
Sending form data - Learn web development
we'll discuss these headers later on. note: you can find this example on github — see post-method.html (see it live also). viewing http requests http requests are never displayed to the...
...we'll discuss these headers later on. ...
...we'll discuss these headers later on. note: you can find this example on github — see post-method.html (see it live also). ...
...And 4 more matches
Sending forms through JavaScript - Learn web development
xhr.send( urlencodeddata ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live result: note: this use of xmlhttprequest is subject to the same-origin policy if you want to send data to a third party web site. for cross-origin requests, you'll need cors and http access control.
...k', function() { senddata( {test:'ok'} ); } ) here's the live result: using formdata bound to a form element you can also bind a formdata object to an <form> element. this creates a formdata object that represents the data contained in the form. ...
...he live result: you can even get more involved with the process by using the form's elements property to get a list of all of the data elements in the form and manually manage them one at a time. to learn more about that, see the example in accessing the element list's contents in htmlformelement.elements. dealing with binary data if you use a formdata object with a form that includes <input
type="file"> widgets, the data will be processed automatically. but to send binary data by hand, there's extra work to do. there are many sources for binary data, including filereader, canvas, and webrtc. unfortunately, some legacy browsers can't access binary data or require complicated workarounds. to learn more about the filereader api, see using files from web applications. the least complicated...
...And 4 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
hen 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 version to get an idea of how it works: <ul> {#each todos as todo, index (todo.id)} <li> <input
type="checkbox" checked={todo.completed}/> {index}. {todo.name} (id: {todo.id}) </li> {:else} nothing to do here! {/each} </ul> go back to the app; you'll see something like this: now we've seen that this is working, let's generate a complete todo item with each loop of the {#each} directive, and inside embed the information from the todos array: id, name, and completed. replace yo...
...th each loop of the {#each} directive, and inside embed the information from the todos array: id, name, and completed. ...
...large" aria-labelledby="list-heading"> {#each todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input
type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> <div class="btn-group"> <button
type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button
type="button" class="btn btn__danger"> delete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> </li> {:else} <li>nothing to do here!</li> {/each} </ul> notice how we are using curly braces to embed ...
...And 4 more matches
Styling Vue components with CSS - Learn web development
ground: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[
type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end rese...
... editing our components to use some of these styles. adding css classes in vue we should apply the button css classes to the <button> in our todoform component. since vue templates are valid html, this is done in the same way to how you might do it in plain html — by adding a class="" attribute to the element. add class="btn btn__primary btn__lg" to your form’s <button> element: <button
type="submit" class="btn btn__primary btn__lg"> add </button> while we're here, there's one more semantic and styling change we can make. since our form denotes a specific section of our page, it could benefit from an <h2> element. the label, however, already denotes the purpose of the form. to avoid repeating ourselves, let's wrap our label in an <h2>. there are a few other global css styles which...
...n an <h2>. there are a few other global css styles which we can add as well. we'll also add the input__lg class to our <input> element. update your todoform template so that it looks like this: <template> <form @submit.prevent="onsubmit"> <h2 class="label-wrapper"> <label for="new-todo-input" class="label__lg"> what needs to be done? </label> </h2> <input
type="text" id="new-todo-input" name="new-todo" autocomplete="off" v-model.lazy.trim="label" class="input__lg" /> <button
type="submit" class="btn btn__primary btn__lg"> add </button> </form> </template> let's also add the stack-large class to the <ul> tag in our app.vue file. this will help improve the spacing of our to-do items a bit. update it as ...
...And 4 more matches
Gecko's "Almost Standards" Mode
e-height is ignored) do not get a height (e.g., for their background) larger than that of their descendants, even if their font size is larger (if they have no descendants, they are zero-height positioned at their baseline) other than this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors. ...
...he doc
types that will trigger "almost standards" mode are those which contain: the public identifier "-//w3c//dtd xhtml 1.0 transitional//en" the public identifier "-//w3c//dtd xhtml 1.0 frameset//en" the public identifier "-//w3c//dtd html 4.01 transitional//en", with a system identifier the public identifier "-//w3c//dtd html 4.01 frameset//en", with a system identifier the ibm system doc
type "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd" a complete doc
type contains a public identifier and a system identifier. in discussions of doc
types, many people will refer to a doc
type as being "with uri" or "without uri." the uri is the system identifier. ...
...r "-//w3c//dtd html 4.01 frameset//en", with a system identifier the ibm system doc
type "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd" a complete doc
type contains a public identifier and a system identifier. in discussions of doc
types, many people will refer to a doc
type as being "with uri" or "without uri." the uri is the system identifier. ...
...And 4 more matches
Downloads.jsm
wnloads, and retrieving download-related configuration. to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloads.jsm"); method overview promise<download> createdownload(object aproperties); promise<void> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(a
type); promise<downloadsummary> getsummary(a
type); constants constant description public work on downloads that were not started from a private browsing window. private work on downloads that were started from a private browsing window. all work on both downloads.private and downloads.public downloads. properties attribu...
...when you catch an exception during a download, you can use this to verify if ex instanceof downloads.error, before reading the exception properties with the error details. ...
...ass an object with a subset of the following fields: isprivate: optional indicates whether the download originated from a private window. if omitted, the download is public. promise resolves to undefined when the download has finished successfully and you can access the target file. promise can be rejected with downloaderror if the download failed. ...
...And 4 more matches
JNI.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/jni.jsm"); this module was available in firefox since version 17. if you would like to support versions before that, you can copy and paste the contents of the jsm file int jni stands for java native interface; this library allows calling java code running in java virtual machines (jvms), etc. the most common use for this module is in add-ons and other works on firefox for android (fennec). with this module, all of the android sdk functions that firefox has permissions for are at your fingertips. ...
...he android sdk functions that firefox has permissions for are at your fingertips. a note about firefox for android, this jsm file is already globally imported and is available from the privileged window scope as window.jni. there also exists a jenv variable in the window scope, so if you need to run jni from the global scope, use a different variable name then jenv. jni.jsm contains all the js-c
types needed to communicate with the jni libraries. the js-c
types is abstracted away while all the underlying data is all c
type data. functions are declared similar to js-c
types but in a very different syntax. unlike c from js-c
types, defining constants is not a manual magic number method in jni, it is declared the same way we define functions, except in jni they are called fields. method overview ...
...v, cdata ajavastring); void unloadclasses(); methods getforthread() blah blah cdata getforthread(); parameters this function does not take any arguments. return value blah blah loadclass() blah blah cdata loadclass( ajenv, afullyqualifiedname, [optional] object adeclares ); parameters ajenv the return value of getforthread(). afullyqualifiedname a sig of a
typed array or the name of the class that would be used in a signature, but without the surrounding l and ;. if it is the sig of a
typed array such as '[i' then adeclares must not be declared. see the section "working with arrays" to see how this is used to create
typed arrays. if it is the name of a class, then adeclares must be declared. for example, the class of geckoappshell has the fully-qual...
...And 4 more matches
Log.jsm
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. ...
...ugh the system. expect these to be written to logs only. trace most detailed information. expect these to be written to logs only. ...
...ten to logs only. ...
...And 4 more matches
PerfMeasurement.jsm
event that was not being recorded has a value of -1 (that is, 0xffffffffffffffff). note: these values are all zeroed (or set to -1, for events not being measured) when you initialize the perfmeasurement object, then they are not zeroed again unless you explicitly call the reset() method. this lets you accumulate measurements over multiple passes through code that you want to analyze. variable
type description cpu_cycles uint64 the number of cpu cycles elapsed. instructions uint64 the number of instructions executed. cache_references uint64 the number of memory accesses that occurred. cache_misses uint64 the number of times memory accesses missed the cache. branch_instructions uint64 the number of branch instructions executed. branch_misses uint64 the number of times ...
...us cycles that elapsed. page_faults uint64 the number of page exceptions the os handled. major_page_faults uint64 the number of times page faults required disk access. context_switches uint64 the number of context switches that occurred involving the thread being profiled. cpu_migrations uint64 the number of times the profiled thread migrated from one cpu core to another. event
types measured constant the eventsmeasured constant provides a mask indicating which event
types were recorded. variable
type description eventsmeasured eventmask a bit mask of the event
types recorded; this can differ from the events requested if the platform doesn't support all of the event
types you specified when creating the perfmeasurement object. constants event mask constants these co...
...page_faults 0x00000080 measure the number of page faults that occurred. major_page_faults 0x00000100 measure the number of major page faults that occurred. context_switches 0x00000200 measure the number of context switches that occurred. cpu_migrations 0x00000400 measure the number of context switches that occurred. all 0x000007ff measure all available events. ...
...And 4 more matches
SourceMap.jsm
g. sources: an array of urls to the original source files. names: an array of identifiers that can be referenced by individual mappings. sourceroot: optional. the url root from which all sources are relative. mappings: a string of base64 vlqs which contain the actual mappings. file: the generated filename this source map is associated with. sourcemapconsumer.proto
type.originalpositionfor(generatedposition) returns the original source, line, and column information for the generated source's line and column positions provided. the only argument is an object with the following properties: line: the line number in the generated source. column: the column number in the generated source. and an object is returned with the following properties: ...
...of the sourcemapgenerator represents a source map which is being built incrementally. new sourcemapgenerator(startofsourcemap) to create a new one, you must pass an object with the following properties: file: the filename of the generated source that this source map is associated with. sourceroot: an optional root for all relative urls in this source map. sourcemapgenerator.proto
type.addmapping(mapping) add a single mapping from original source line and column to the generated source's line and column for this source map being created. the mapping object should have the following properties: generated: an object with the generated line and column positions. original: an object with the original line and column positions. source: the original source file (re...
...lumn for this source map being created. the mapping object should have the following properties: generated: an object with the generated line and column positions. original: an object with the original line and column positions. source: the original source file (relative to the sourceroot). name: an optional original token name for this mapping. sourcemapgenerator.proto
type.tostring() renders the source map being generated to a string. sourcenode sourcenodes provide a way to abstract over interpolating and/or concatenating snippets of generated javascript source code, while maintaining the line and column information associated between those snippets and the original source code. this is useful as the final intermediate representation a compiler might use before ...
...And 4 more matches
BloatView
here's how you interpret the columns. the first, numerical column is the index of the leaking class. class - the name of the class in question (truncated to 20 characters). bytes per-inst - the number of bytes returned if you were to write sizeof(class). note that this number does not reflect any memory held onto by the class, such as internal buffers, etc. (e.g. for nsstring yo...
...} ...
...} ...
...And 4 more matches
NSS tools : modutil
pliance, 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 -add modulename add the named pkcs #11 module to the database. use this option with the -libfile, -ciphers, and -mechanisms arguments. -changepw tokenname change the password on the named token. if the token has not been initialized, this option initializes the password. use this option ...
...into the security database. -ciphers cipher-enable-list enable 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. 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 t...
...ary file: **internal only module** manufacturer: mozilla foundation description: nss internal crypto services pkcs #11 version 2.20 library version: 3.11 cipher enable flags: none default mechanism flags: rsa:rc2:rc4:des:dh:sha1:md5:md2:ssl:tls:aes slot: nss internal cryptographic services slot mechanism flags: rsa:rc2:rc4:des:dh:sha1:md5:md2:ssl:tls:aes manufacturer: mozilla foundation
type: software version number: 3.11 firmware version: 0.0 status: enabled token name: nss generic crypto services token manufacturer: mozilla foundation token model: nss 3 token serial number: 0000000000000000 token version: 4.0 token firmware version: 0.0 access: write protected login
type: public (no login required) user pin: not initialized slot: nss user private key and certificate se...
...And 4 more matches
sslcrt.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 certificate functions chapter 5 certificate functions this chapter describes the functions and related
types used to work with a certificate database such as the cert7.db database provided with communicator. validating certificates manipulating certificates getting certificate information comparing secitem objects validating certificates cert_verifycertnow cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames cert_verifycertnow checks that the current date is withi...
... has the following parameters: cert a pointer to the certificate whose validity period you want to check against. t the time to check against the certificate's validity period. for more information, see the nspr header pr_time.h. returns the function returns an enumerator of
type seccerttimevalidity:
typedef enum { seccerttimevalid, seccerttimeexpired, seccerttimenotvalidyet } seccerttimevalidity; nss_cmpcertchainwcanames determines whether any of the signers in the certificate chain for a specified certificate are on a specified list of ca names. syntax #include <nss.h> secstatus nss_cmpcertchainwcanames( certcertificate *cert, certdistnames *caname...
... makes a shallow copy of a specified certificate. syntax #include <cert.h> certcertificate *cert_dupcertificate(certcertificate *c) parameter this function has the following parameter: c a pointer to the certificate object to be duplicated. returns if successful, the function returns a pointer to a certificate object of
type certcertificate. description the cert_dupcertificate function increments the reference count for the 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 ...
...And 4 more matches
NSS tools : modutil
ign 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 -add modulename add the named pkcs #11 module to the database. use this option with the -libfile, -ciphers, and -mechanisms arguments. -changepw tokenname change the password on the named token. if the token has not been initialized, t...
...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. 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_...
... **internal only module** manufacturer: mozilla foundation description: nss internal crypto services pkcs #11 version 2.20 library version: 3.11 cipher enable flags: none default mechanism flags: rsa:rc2:rc4:des:dh:sha1:md5:md2:ssl:tls:aes slot: nss internal cryptographic services slot mechanism flags: rsa:rc2:rc4:des:dh:sha1:md5:md2:ssl:tls:aes manufacturer: mozilla foundation
type: software version number: 3.11 firmware version: 0.0 status: enabled token name: nss generic crypto services token manufacturer: mozilla foundation token model: nss 3 token serial number: 0000000000000000 token version: 4.0 token firmware version: 0.0 access: write protected login
type: public (no login required) user pin: not initialized slot: nss user pri...
...And 4 more matches
JS::IdentifyStandardInstance
this article covers features introduced in spidermonkey 31 determine if the given object is an instance/proto
type/constructor for a standard class. syntax jsprotokey js::identifystandardinstance(jsobject *obj); jsprotokey js::identifystandardproto
type(jsobject *obj); jsprotokey js::identifystandardinstanceorproto
type(jsobject *obj); jsprotokey js::identifystandardconstructor(jsobject *obj); // added in spidermonkey 38 name
type description obj jsobject * pointer to the instance/proto
type/constructor object to determine. ...
...if so, return the associated jsprotokey. if not, return jsproto_null. ...
...if so, return the associated jsprotokey. if not, return jsproto_null. ...
...And 4 more matches
JSHasInstanceOp
description jshasinstanceop is called to check whether v is an instance of obj. return false on error or exception, true on success with true in *bp if v is an instance of obj, false in *bp otherwise. ...
... description jshasinstanceop is called to check whether v is an instance of obj. return false on error or exception, true on success with true in *bp if v is an instance of obj, false in *bp otherwise. ...
... description jshasinstanceop is called to check whether v is an instance of obj. return false on error or exception, true on success with true in *bp if v is an instance of obj, false in *bp otherwise. ...
...And 4 more matches
JSPropertyOp
provides request. ...
... provides request. ...
... provides request. ...
...And 4 more matches
JSProtoKey
this article covers features introduced in spidermonkey 24 possible standard object proto
type types. value proto
type in javascript jsproto_null a dummy key for invalid proto
type. 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_...
...rror mxr search for jsproto_internalerror jsproto_evalerror evalerror mxr search for jsproto_evalerror jsproto_rangeerror rangeerror mxr search for jsproto_rangeerror jsproto_referenceerror referenceerror mxr search for jsproto_referenceerror jsproto_syntaxerror syntaxerror mxr search for jsproto_syntaxerror jsproto_
typeerror
typeerror mxr search for jsproto_
typeerror jsproto_urierror urierror mxr search for jsproto_urierror jsproto_iterator iterator mxr search for jsproto_iterator jsproto_stopiteration stopiteration mxr search for jsproto_stopiteration jsproto_arraybuffer arraybuffer mxr search for jsproto_arraybuffer jsproto_in...
...t mxr search for jsproto_set jsproto_dataview dataview mxr search for jsproto_dataview jsproto_symbol symbol added in spidermonkey 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 spidermonkey 31 mxr search for jsproto_generatorfunction jsproto_simd simd (nightly only) mxr search for jsproto_simd jsproto_weakset weakset added in spidermonkey 38 mxr search for jsproto_weakset jsproto_sha...
...And 4 more matches
JS_PushArguments
ay still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. convert any number of arguments to jsvals and store the resulting jsvals in an array. syntax jsval * js_pusharguments(jscontext *cx, void **markp, const char *format, ...); jsval * js_pushargumentsva(jscontext *cx, void **markp, const char *format, va_list ap); 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_threadsafe build, the caller must be in a request on this jscontext. markp void ** out parameter. on success, *markp receives the internally allocated stack...
...erpretation 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. markp void ** out parameter. on success, *markp receives the internally allocated stack mark which should be passed to js_poparguments. ...
...it is defined in <stdarg.h>. description js_pusharguments provides a convenient way to translate a series of native c/c++ values to jsvals with a single function call. cx is the context for the call. markp points to a void * to hold the internally allocated stack frame pointer to pass back to js_poparguments. ...
...And 4 more matches
SpiderMonkey 24
came an evolutionary dead end, as tc39 chose not to incorporate it into ecmascript proper. it is recommended that you embed a separate xml parser, or include an xml parsing implementation written in javascript, as an alternative. jaegermonkey has been removed and replaced by ionmonkey spidermonkey 24 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi
types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. many of the garbage collector chang...
...s, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. many of the garbage collector changes require
type signature changes to jsapi methods: specifically introducing js::rooted, js::handle, and js::mutablehandle
types. these
types, with the appropriate parametrizations, can roughly be substituted for plain
types of gc things (values, string/object pointers, etc.). these and other changes are explained in detail below. new javascript language features javascript 24 includes significant updates t...
...i methods: specifically introducing js::rooted, js::handle, and js::mutablehandle
types. these
types, with the appropriate parametrizations, can roughly be substituted for plain
types of gc things (values, string/object pointers, etc.). these and other changes are explained in detail below. new javascript language features javascript 24 includes significant updates to language features, yo.
typedef changes the fixed-size integer
types introduced in spidermonkey 17 are defined in one of the following ways (xxx update for msvc<10 deprecation): if the environment variable moz_custom_stdint_h is set, that file will be included to provide definitions for these
types. ...
...And 4 more matches
WebReplayRoadmap
prove a complex code base. comparing executions (not yet implemented) comparing the behavior of a recording that exhibits a bug with a second recording that doesn't exhibit the bug should help with quickly locating the source of the problem. doing this well will require some experimentation, but in many cases the buggy recording should hit different locations in the source or exhibit different
types from the normal recording. using a corpus of several normal recordings (or buggy recordings) would reduce false positives due to incidental differences between the recordings. aggregate call graph and data flow (not yet implemented) when developing a complex web app it is often hard to find where a function is called, the callees at a call site, where some data in an object came from or where...
...ording. using a corpus of several normal recordings (or buggy recordings) would reduce false positives due to incidental differences between the recordings. ...
...l site, where some data in an object came from or where it is used, or what
type a value has. these questions can be answered by analyzing one or more recordings to study their behavior in detail. if the debugger could perform this analysis then it could show this information to developers and help them understand the app even when they are not actively debugging a particular recording. static
type integration (not yet implemented) static
type systems like flow and
typescript are great and really useful for managing an app's codebase, but they are unsound by design, and it is pretty easy to satisfy the
type system and yet have different
types in practice. ...
...And 4 more matches
Secure Development Guidelines
xss: example the following snippet of javascript: document.write("welcome to " + document.location); ... is exp...
..._transient); sqlite3_step(stmt); sqlite3_finalize(p_stmt); writing secure code: arithmetic issues integer overflows/underflows overflows occur when an arithmetic operation attempts to create a numeric value that is larger than can be represented within the available storage space max + 1 will be 0 and 0 – 1 will be max! ...
...); ... for (i = 0, ni = 0; i < length; i++) { if ((ch = chars[i]) < 128 && is_ok(ch, mask)) { newchars[ni++] = ch; ... } ... } ... ...
...And 4 more matches
Finishing the Component
to use is "content-policy". ...
... in our own implementation of nsicontentpolicy is shouldload(). the other method on the nsicontentpolicy interface is for blocking processing of specific elements in a document, but our policy is more restrictive: if the url isn't on the white list, the entire page should be blocked. ...
... the name of the machine hosting the resource. the name of the resource itself, given as a path. ...
...And 4 more matches
IAccessible2
[propg...
...[propget] hresult...
...[propget] hresult attributes( [out] bstr attributes ); parameters at...
...And 4 more matches
mozIAsyncFavicons
placesutils.favicons from javascript. ...
...void getfaviconurlforpage( in nsiuri apageuri, in nsifavicondatacallback acallback ); parameters apageuri uri of the pa...
...page() retrieve the url of the favicon for the given page. void getfaviconurlforpage( in nsiuri apageuri, in nsifavicondatacallback acallback ); parameters apageuri uri of the page whose favicon's url we're looking up. acallback once we have found the favicon's url, we invoke this callback. note that the callback's adatalen will be 0, adata will be null, and amime
type will be empty -- only auri will be non-zero/null/empty. getfavicondataforpage() retrieves the favicon uri and data associated to the given page, if any. void getfaviconurlforpage( in nsiuri apageuri, in nsifavicondatacallback acallback ); parameters apageuri uri of the page whose favicon uri and data we're looking up. acallback this callback is always invoked to...
...And 4 more matches
nsICRLManager
security/manager/ssl/public/nsicrlmanager.idlscriptable please add a summary to this article. ...
...se add a summary to this article. ...
...void deletecrl( in unsigned long crlindex ); parameters crlindex getcrls() get a list of cr...
...And 4 more matches
nsIFrameLoader
loading a frame. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 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. ...
...m with the nsicontentview interface to manage frames across processes if electrolysis is in use to support per-frame processes. ...
...id activateframeevent(in astring a
type, in boolean capture); void activateremoteframe(); void destroy(); void loadframe(); void loaduri(in nsiuri auri); void sendcrossprocesskeyevent(in astring a
type, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); void sendcrossprocessmouseevent(in astring a
type, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void updatepositionandsize(in nsiframe aiframe); native code only! ...
...And 4 more matches
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 / seamonkey 1.0) method overview void observeactivity(in nsisupports ahttpchannel, in pruint32 aactivity
type, in pruint32 aactivitysub
type, 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 and...
...imestamp, 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 and should not be used. constants activity
type constants constant value description activity_
type_socket_transport 0x0001 socket transport activity has occurred. activity_
type_http_transaction 0x0002 http transport activity has occurred. activity sub
type constants constant value description activity_sub
type_request_header 0x5001 the http request is about to be queued for sending. observers can look at request headers in aextra...
...lue description activity_
type_socket_transport 0x0001 socket transport activity has occurred. activity_
type_http_transaction 0x0002 http transport activity has occurred. activity sub
type constants constant value description activity_sub
type_request_header 0x5001 the http request is about to be queued for sending. observers can look at request headers in aextrastringdata activity_sub
type_request_body_sent 0x5002 the http request's body has been sent. activity_sub
type_response_start 0x5003 the http response has started to arrive. activity_sub
type_response_header 0x5004 the http response header has arrived. activity_sub
type_response_complete 0x5005 the complete http response has been received. activity_sub
type_transaction_close 0x5006 the http transaction has been closed. ...
...And 4 more matches
nsIHttpHeaderVisitor
der(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-response observers. when the obser...
... 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-response observers. when the observer fires, the visitor interface is used to walk through the response headers and evaluate the mime
type. ...
... 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-response observers. when the observer fires, the visitor interface is used to walk through the response headers and evaluate the mime
type. ...
...And 4 more matches
nsIMsgSearchSession
opeusescustomheaders(in nsmsgsearchscopevalue scope, in voidptr selection, in boolean forfilters); boolean isstringattribute(in nsmsgsearchattribvalue attrib); void addallscopes(in nsmsgsearchscopevalue attrib); void search(in nsimsgwindow awindow); void interruptsearch(); void pausesearch(); void resumesearch(); [noscript] nsmsgsearch
type setsearchparam(in nsmsgsearch
type type, in voidptr param); [noscript] void addresultelement(in nsmsgresultelement element); boolean matchhdr(in nsimsgdbhdr amsghdr, in nsimsgdatabase adatabase); void addsearchhit(in nsimsgdbhdr header, in nsimsgfolder folder); attributes attribute
type description searchterms nsisupportsarray readon...
... adatabase); void addsearchhit(in nsimsgdbhdr header, in nsimsgfolder folder); attributes attribute
type description searchterms nsisupportsarray readonly: numsearchterms unsigned long readonly: runningadapter nsimsgsearchadapter readonly: searchparam voidptr not scriptable and readonly: search
type nsmsgsearch
type readonly: numresults long readonly: window nsimsgwindow constants name value description booleanor 0 booleanand 1 methods addsearchterm() void addsearchterm(in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalu...
... in voidptr selection, in boolean forfilters); parameters scope selection could be a folder or server based on scope forfilters isstringattribute() use this to determine if your attribute is a string attribute. boolean isstringattribute(in nsmsgsearchattribvalue attrib); parameters attrib addallscopes() add all scopes of a given
type to the search. void addallscopes(in nsmsgsearchscopevalue attrib); parameters attrib search() void search(in nsimsgwindow awindow); parameters awindow interruptsearch() void interruptsearch(); pausesearch() these two methods are used when the search session is using a timer to do local search, and the search adapter needs to run a url (e.g., to reparse a local folder)...
...And 4 more matches
nsISelectionController
rward, in boolean extend); boolean checkvisibility(in nsidomnode node, in short startoffset, in short endoffset); void completemove(in boolean forward, in boolean extend); void completescroll(in boolean forward); boolean getcaretenabled(); short getdisplayselection(); nsiselection getselection(in short
type); void intralinemove(in boolean forward, in boolean extend); void linemove(in boolean forward, in boolean extend); void pagemove(in boolean forward, in boolean extend); void repaintselection(in short
type); void scrollhorizontal(in boolean left); void scrollline(in boolean forward); voi...
... void linemove(in boolean forward, in boolean extend); void pagemove(in boolean forward, in boolean extend); void repaintselection(in short
type); void scrollhorizontal(in boolean left); void scrollline(in boolean forward); void scrollpage(in boolean forward); void scrollselectionintoview(in short
type, in short region, in short flags); void selectall(); void setcaretenabled(in boolean enabled); void setcaretreadonly(in boolean readonly); void setcaretvisibilityduringselection(in boolean visibility); void setcaretwidth(in short pixels); obsolete since gecko 1.8 void setdisplayselection(in short toggl...
...this is still true when the caret is enabled, visible, but in its "off" blink cycle. read only. constants selection constants constant gecko version description 1.7 - 1.9 1.9.1 - 1.9.2 2.0 ...
...And 4 more matches
nsIUpdateItem
ey 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 installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, 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 the guid of the item. read only. installlocationkey astring the name of the install location where this item is installed. read only. maxappversion astring the m...
...tsource astring returns a js object source representing an nsiupdateitem. read only. targetappid astring the target application id used for checking compatibility for this item. note: add-ons can specify a targetapplication id of toolkit@mozilla.org in their install manifest for compatibility with all apps using a specific release of the toolkit. read only.
type long the
type of this item. read only. updatekey astring the public key to verify updates for this item. this must be the public part of the key that was used to sign update manifests for this add-on. read only. updaterdf astring the url of the update rdf file for this item. read only. version astring the version of the item, in fvf format. read...
... this must be the public part of the key that was used to sign update manifests for this add-on. read only. updaterdf astring the url of the update rdf file for this item. read only. version astring the version of the item, in fvf format. read only. xpihash astring the string hash for the xpi file. can be null and if supplied must be in the format of "
type:hash" (see the
types in nsicryptohash and nsixpinstallmanager.initmanagerwithhashes(). read only. xpiurl astring the url of the xpi where this item can be downloaded. read only. constants item
type constants constants representing
types of update checks. constants that callers can use to indicate the reason for an add-on update check. internal code uses other constants in ...
...And 4 more matches
ABI
general details this article describes the calling conventions with respect to js-c
types while programming x86 and x86-64/x64/amd64 architectures. a calling convention is an implementation-level (low-level) scheme regarding how subroutines receive parameters from their caller and how they revert. http://en.wikipedia.org/wiki/x86_calling_conventions abi abi stands for "application binary interface". http://en.wikipedia.org/wiki/application_binary_interface os specific windows https://msdn.microsoft.com/en-us/library/k2b2ssfy.aspx https://msdn.microsoft.com/en-us/library/9b372w95.aspx details with respect to js-c
types this explains how to use it in the js-c
types scope. ...
...rg/wiki/x86_calling_conventions abi abi stands for "application binary interface". http://en.wikipedia.org/wiki/application_binary_interface os specific windows https://msdn.microsoft.com/en-us/library/k2b2ssfy.aspx https://msdn.microsoft.com/en-us/library/9b372w95.aspx details with respect to js-c
types this explains how to use it in the js-c
types scope. three different abis exist: c
types.default_abi, c
types.stdcall_abi, and c
types.winapi_abi. c
types.default_abi corresponds to cdecl; standard libraries use this abi. you can also use this for various system calls,including those on mac os x and linux. c
types.thiscall_abi more information is available at bugzilla :: 552533. c
types.stdcall_abi used for calling functions declared with stdcall on windows. these functions' name...
...es.winapi_abi. c
types.default_abi corresponds to cdecl; standard libraries use this abi. you can also use this for various system calls,including those on mac os x and linux. c
types.thiscall_abi more information is available at bugzilla :: 552533. c
types.stdcall_abi used for calling functions declared with stdcall on windows. these functions' names are automatically mangled for you by js-c
types. c
types.winapi_abi used for calling windows system functions. these are declared as stdcall on windows, but do not have mangled names like those used by stdcall_abi above. os specific win32 and os2 callbacks in js-c
types under these operating systems use a different abi than regular function declarations. ...
...And 4 more matches
Initialization and Destruction - Plugins
all instances of your plug-in. nperror np_initialize(void) { }; after the last plug-in instance is deleted, the browser calls np_shutdown, which releases the memory or resources allocated by np_initialize. for an example that shows the use of both the np_initialize and np_shutdown methods, see initialize and shutdown example. during initialization, when the browser encounters data of a mime
type registered for a plug-in (either embedded in an html page or in a separate file), it loads the plug-in code into memory (if it hasn't been loaded already) and creates a new instance of the plug-in. for more information, see registering plug-ins. plug-ins are native code libraries: .dll files on windows, .so or .dso files on unix, and powerpc shared library files or 68k code resources on mac os. ...
...e np_initialize is called at the end of the initialization process, you can call other methods, such as npn_memalloc and npn_status, from np_initialize. instance creation after initialization, the plug-in instance is created. more than one instance of the same plug-in can exist if a single page contains multiple embedded plug-ins, or if several browser windows are open and display the same data
type. ...
...e page contains multiple embedded plug-ins, or if several browser windows are open and display the same data
type. at this point, a plug-in can call the npn_setvalue function to specify whether it is windowed (the default) or windowless. plug-in instances are created with npp_new and destroyed with npp_destroy. npp_new informs the plug-in of the creation of a new instance with the specified mime
type. you can allocate instance-specific private data at this time. ...
...And 4 more matches
Streams - Plugins
present urls and the data they contain, or data sent by a plug-in without an associated url. although a single stream is associated with one specific instance of a plug-in, a plug-in can have more than one stream object per instance. streams can be produced by the browser and consumed by a plug-in instance, or produced by an instance and consumed by the browser. each stream has an associated mime
type identifying the format of the data in the stream. streams produced by the browser can be automatically sent to or requested by the plug-in instance. the browser calls the plug-in methods npp_newstream, npp_writeready, npp_write, and npp_destroystream to, respectively, create a stream, find out how much data the plug-in can handle, push data into the stream, and delete it. the plug-in instance s...
...pt writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode telling the plug-in when a stream is created to tell the plug-in instance when a new stream is created, the browser calls the npp_newstream method. this method also determines which mode it should use to send data to the plug-in. ...
...is method also determines which mode it should use to send data to the plug-in. the browser can create a stream for several different
types of data: for the file specified in the data attribute of the object element or the src attribute of the embed element for a data file for a full-page instance the npp_newstream method has the following syntax: nperror npp_newstream(npp instance, npmime
type type, npstream *stream, npbool seekable, uint16* s
type); the instance parameter refers to the plug-in instance receiving the stream; the
type parameter represents the stream's mime
type. the stream parameter is a pointer to the new stream, which is valid until the stream is destroyed. the seekable parameter specifies whether the stream is seekable (true) or not (false). seekable streams supp...
...And 4 more matches
ChildNode.after() - Web APIs
h the following code: // from: https://github.com/jserz/js_piece/blob/master/dom/childnode/after()/after().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('after')) { return; } object.defineproperty(item, 'after', { configurable: true, enumerable: true, writable: true, value: function after() { var argarr = array.proto
type.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appendchild(isnode ? argitem : document.createtextnode(string(argitem))); }); this.parentnode.insertbefore(docfrag, this.nextsibling); } }); }); })([element.proto
type, characterdata...
....call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appendchild(isnode ? ...
...s), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appendchild(isnode ? ...
...And 4 more matches
DataTransfer.items - Web APIs
he operation and if the operation had no items, the list is empty. syntax itemlist = datatransfer.items; return value a datatransferitemlist object containing datatransferitem objects representing the items being dragged in a drag operation, one list item for each object being dragged. if the drag operation had no data, the list is empty. ...
...operation had no items, the list is empty. syntax itemlist = datatransfer.items; return value a datatransferitemlist object containing datatransferitem objects representing the items being dragged in a drag operation, one list item for each object being dragged. if the drag operation had no data, the list is empty. example this example shows the use of the items and
types properties. ...
...t = datatransfer.items; return value a datatransferitemlist object containing datatransferitem objects representing the items being dragged in a drag operation, one list item for each object being dragged. if the drag operation had no data, the list is empty. example this example shows the use of the items and
types properties. ...
...And 4 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
of these whitespace characters, and we only tend to get rid of it in a production build step to reduce code download sizes. html largely ignores whitespace? in the case of html, whitespace is largely ignored — whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored. ...
...sizes. html largely ignores whitespace? in the case of html, whitespace is largely ignored — whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored. take the following minimal example: <!doc
type html> <h1> hello world! </h1> this source code contains a couple of line feeds after the doc
type and a bunch of space characters before, after, and inside the <h1> element, but the browser doesn’t seem to care at all and just shows the words "hello world!" as if these characters didn’t exist at all: this is so that whitespace characters don't impact the layout of your page. creating space around and inside elements is the job of css. what does happen to whitespace? they don't just ...
...ever. any whitespace characters that are outside of html elements in the original document are represented in the dom. this is needed internally so that the editor can preserve formatting of documents. this means that: there will be some text nodes that contain only whitespace, and some text nodes will have whitespace at the beginning or end. ...
...And 4 more matches
Using FormData Objects - Web APIs
the formdata object lets you compile a set of key/value pairs to send using xmlhttprequest. it is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed 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. creating a formdata object from scratch you can build a formdata object yourself, instantiating it then appending fields to it by calling its append() method, like this: var formdata = new formdata(); formdata.append("username", "groucho"); formdata.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456" // html file input, chosen by user formdata.append("userfile", fileinpu...
... = new formdata(); formdata.append("username", "groucho"); formdata.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456" // html file input, chosen by user formdata.append("userfile", fileinputelement.files[0]); // javascript file-like object var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file... var blob = new blob([content], {
type: "text/xml"}); formdata.append("webmasterfile", blob); var request = new xmlhttprequest(); request.open("post", "http://foo.com/submitform.php"); request.send(formdata); note: the fields "userfile" and "webmasterfile" both contain a file. the number assigned to the field "accountnum" is immediately converted into a string by the formdata.append() method (the field's value can be a blob, file,...
...r request = new xmlhttprequest(); request.open("post", "submitform.php"); formdata.append("serialnumber", serialnumber++); request.send(formdata); this lets you augment the form's data before sending it along, to include additional information that's not necessarily user-editable. sending files using a formdata object you can also send files using formdata. ...
...And 4 more matches
LocalFileSystem - Web APIs
s. 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. you can call the method more than once if you want to create two file systems: one that's temporary and one that's persistent. (to learn more about the storage
types, see the basic concepts article.) in most cases, you need to create only one file system, but in a few cases, it might be useful to create a second one. for example, if you were to create a mail app, you might create a temporary storage for caching assets (like images and attachments) to speed up performance, while creating persistent storage for unique data—such as drafts of emails that were ...
...my pictures, my documents) on the user's hard drive either. for more information about restrictions, see the basic concepts article. example the following is a code snippet that shows how you can request a file system storage. ...
...ystem; // the first parameter defines the
type of storage: persistent or temporary // next, set the size of space needed (in bytes) // initfs is the success callback // and the last one is the error callback // for denial of access and other errors. ...
...And 4 more matches
MediaRecorder() - Web APIs
the mediarecorder() constructor creates a new mediarecorder object that will record a specified mediastream. the object can optionally be configured to record using a specific media container (file
type), and, further, can specify the exact codec and codec configuration(s) to use by specifying the codecs parameter. syntax var mediarecorder = new mediarecorder(stream[, options]); parameters stream the mediastream that will be recorded. this source media can come from a stream created using navigator.mediadevices.getusermedia() or from an <audio>, <video> or <canvas> element. ...
...pecifying the codecs parameter. syntax var mediarecorder = new mediarecorder(stream[, options]); parameters stream the mediastream that will be recorded. this source media can come from a stream created using navigator.mediadevices.getusermedia() or from an <audio>, <video> or <canvas> element. ...
... codecs parameter. syntax var mediarecorder = new mediarecorder(stream[, options]); parameters stream the mediastream that will be recorded. this source media can come from a stream created using navigator.mediadevices.getusermedia() or from an <audio>, <video> or <canvas> element. ...
...And 4 more matches
Media Capabilities API - Web APIs
treaming, and access to display property information. examples detect audio file support and expected performance this example defines a audio configuration then checks to see if the user agent supports decoding that media configuration, and whether it will perform well in terms of smoothness and power efficiency. ...
...ormation. examples detect audio file support and expected performance this example defines a audio configuration then checks to see if the user agent supports decoding that media configuration, and whether it will perform well in terms of smoothness and power efficiency. ...
...with the media capabilities api, developers can ensure each user is getting the best bitrate and storage savings for their browser, device, and os capabilities. whether a device uses hardware or softw...
...And 4 more matches
MouseEvent() - Web APIs
the mouseevent() constructor creates a new mouseevent. syntax event = new mouseevent(
typearg, mouseeventinit); values
typearg is a domstring representing the name of the event. mouseeventinit optional is a mouseeventinit dictionary, having the following fields: "screenx", optional and defaulting to 0, of
type long, that is the horizontal position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. "screeny", optional and defaulting to 0, of
type long, that is the vertical position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. ...
...eenx", optional and defaulting to 0, of
type long, that is the horizontal position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. "screeny", optional and defaulting to 0, of
type long, that is the vertical position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer. "clientx", 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. "ctrlkey", optional and defaulting to false, of ty...
...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. "ctrlkey", optional and defaulting to false, of
type boolean, that indicates if the ctrl key was simultaneously pressed. "shiftkey", optional and defaulting to false, of
type boolean, that indicates if the shift key was simultaneously pressed. "altkey", optional and defaulting to false, of
type boolean, that indicates if the alt key was simultaneously pressed. "metakey", optional and defaulting to false, of
type boolean, that indicates if the meta key was simultaneously pressed. ...
...And 4 more matches
Node - Web APIs
the dom node interface is an abstract base class upon which many other dom api objects are based, thus letting those object
types to be used similarly and often interchangeably. as an abstract class, there is no such thing as a plain node object. all objects that implement node functionality are based on one of its subclasses. most notable are document, element, and documentfragment. in addition, every kind of dom node is represented by an interface based on node. these include attr, characterdata (which text, comment, and cdatasection are all based on), processinginstruction, document
type, notation, entity, and entityreference. in some cases, a particular feature of the base node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or th...
...data (which text, comment, and cdatasection are all based on), processinginstruction, document
type, notation, entity, and entityreference. in some cases, a particular feature of the base node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances. for example, attempting to add children to a node
type that cannot have children will throw an exception. <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/eventtarget"...
...case of a shadow dom. node.lastchildread only returns a node representing the last direct child node of the node, or null if the node has no child. node.nextsiblingread only returns a node representing the next node in the tree, or null if there isn't such node. node.nodenameread only returns a domstring containing the name of the node. the structure of the name will differ with the node
type. e.g. an htmlelement will contain the name of the corresponding tag, like 'audio' for an htmlaudioelement, a text node will have the '#text' string, or a document node will have the '#document' string. node.node
typeread only returns an unsigned short representing the
type of the node. possible values are: name value element_node 1 attribute_no...
...And 4 more matches
OES_standard_derivatives - Web APIs
constants this extension exposes one new constant, which can be used in the hint() and getparameter() methods. ext.fragment_shader_derivative_hint_oes a glenum indicating the accuracy of the derivative calculation for the glsl built-in functions: dfdx, dfdy, and fwidth. ...
...this extension exposes one new constant, which can be used in the hint() and getparameter() methods. ext.fragment_shader_derivative_hint_oes a glenum indicating the accuracy of the derivative calculation for the glsl built-in functions: dfdx, dfdy, and fwidth. ...
...nsion exposes one new constant, which can be used in the hint() and getparameter() methods. ext.fragment_shader_derivative_hint_oes a glenum indicating the accuracy of the derivative calculation for the glsl built-in functions: dfdx, dfdy, and fwidth. ...
...And 4 more matches
PerformanceObserverEntryList.getEntries() - Web APIs
the getentries() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given filter. the list's members are determined by the set of entry
types specified in the call to the observe() method. the list is available in the observer's callback function (as the first parameter in the callback). this method is exposed to window and worker interfaces. syntax general syntax: entries = list.getentries(); entries = list.getentries(performanceentryfilteroptions); specific usage: entries = list.getentries({name: "entry_name", entry
type: "mark"}); parameters performanceentryfilteroptionsoptional is a performanceentryfilteroptions dictionary, having the following fields: "name", the name of a performance entry. "en...
...interfaces. syntax general syntax: entries = list.getentries(); entries = list.getentries(performanceentryfilteroptions); specific usage: entries = list.getentries({name: "entry_name", entry
type: "mark"}); parameters performanceentryfilteroptionsoptional is a performanceentryfilteroptions dictionary, having the following fields: "name", the name of a performance entry. "entry
type", the entry
type. the valid entry
types are listed in the performanceentry.entry
type method. "initiator
type", the
type of the initiating resource (for example an html element). the values are defined by the performanceresourcetiming.initiator
type interface. this parameter is currently not supported on chrome or opera. return value a list of explicitly observed performanceentry objects tha...
...ist of explicitly observed performanceentry objects that meets the criteria of the filter. the items will be in chronological order based on the entries' starttime. if no objects that meet the filter are found, an empty list is returned. if no argument is given, all entries are returned. ...
...And 4 more matches
PerformanceObserverEntryList.getEntriesByName() - Web APIs
the getentriesbyname() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given name and entry
type. the list's members are determined by the set of entry
types specified in the call to the observe() method. the list is available in the observer's callback function (as the first parameter in the callback). this method is exposed to window and worker interfaces. syntax entries = list.getentriesbyname(name,
type); parameters name a domstring representing the name of the entry to retrieve.
type optional a domstring representing the
type of entry to retrieve such as "mark". the valid entry
types are listed in performanceentry.entry
type. return value a list of explicitly observed performance entry objects that ha...
...rfaces. syntax entries = list.getentriesbyname(name,
type); parameters name a domstring representing the name of the entry to retrieve.
type optional a domstring representing the
type of entry to retrieve such as "mark". the valid entry
types are listed in performanceentry.entry
type. return value a list of explicitly observed performance entry objects that have the specified name and
type. if the
type argument is not specified, only the name will be used to determine the entries to return. the items will be in chronological order based on the entries' starttime. if no objects meet the specified criteria, an empty list is returned. ...
...cts that have the specified name and
type. if the
type argument is not specified, only the name will be used to determine the entries to return. the items will be in chronological order based on the entries' starttime. if no objects meet the specified criteria, an empty list is returned. ...
...And 4 more matches
Performance Timeline - Web APIs
g performance timeline. performance extensions the performance timeline api extends the performance interface with three methods that provide different mechanisms to get a set of performance records (metrics), depending on the specified filter criteria. the methods are: getentries() returns all recorded performance entries or, optionally, the entries based on the specified name, performance
type and/or the initiator
type (such as an html element). getentriesbyname() returns the recorded performance entries based on the specified name and optionally the performance
type. getentriesby
type() returns the recorded performance entries based on the specified performance
type. performanceentry interface the performanceentry interface encapsulates a single performance entry — that is, a s...
...eentry interface the performanceentry interface encapsulates a single performance entry — that is, a single data point or metric in the performance timeline. this interface has the following four properties, and these properties are extended (with additional constraints) by other interfaces (such as performancemark): name the name of the performance entry when the metric was created. ...
...erface the performanceentry interface encapsulates a single performance entry — that is, a single data point or metric in the performance timeline. this interface has the following four properties, and these properties are extended (with additional constraints) by other interfaces (such as performancemark): name the name of the performance entry when the metric was created. ...
...And 4 more matches
format - Web APIs
n css2([css2], section15.3.5), then its value is the corresponding <string> parameter of the font. syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section15.3.5). ...
...n15.3.5), then its value is the corresponding <string> parameter of the font. syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section15.3.5). ...
...ue is the corresponding <string> parameter of the font. syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section15.3.5). ...
...And 4 more matches
TextEncoder - Web APIs
tion to support non-utf-8 text encodings on github. example const encoder = new textencoder() const view = encoder.encode('€') console.log(view); // uint8array(3) [226, 130, 172] constructor textencoder() returns a newly constructed textencoder that will generate a byte stream with utf-8 encoding. properties the textencoder interface doesn't inherit any property. ...
...nsole.log(view); // uint8array(3) [226, 130, 172] constructor textencoder() returns a newly constructed textencoder that will generate a byte stream with utf-8 encoding. properties the textencoder interface doesn't inherit any property. textencoder.proto
type.encodingread only always returns "utf-8". methods the textencoder interface doesn't inherit any method. textencoder.proto
type.encode() takes a usvstring as input, and returns a uint8array containing utf-8 encoded text. textencoder.proto
type.encodeinto() takes a usvstring to encode and a destination uint8array to put resulting utf-8 encoded text into, and returns a dictionary object indicating the progress of the encoding. this is potentially more performant than the older encode() method. polyfill the below polyfi...
...8array to put resulting utf-8 encoded text into, and returns a dictionary object indicating the progress of the encoding. this is potentially more performant than the older encode() method. polyfill the below polyfill is compliant with the standard and therefore only supports utf-8. it is designed to work in ie5 "out of the box". ...
...And 4 more matches
Touch() - Web APIs
the touch() constructor creates a new touch object. syntax touch = new touch(touchinit); arguments touchinit is a touchinit dictionary, having the following fields: "identifier", required, of
type long, that is the identification number for the touch point. "target", required, of
type eventtarget, the item at which the touch point started when it was first placed on the surface. "clientx", optional and defaulting to 0, of
type double, that is the horizontal position of the touch on the client window of user's screen, excluding any scroll offset. ...
... that is the identification number for the touch point. "target", required, of
type eventtarget, the item at which the touch point started when it was first placed on the surface. "clientx", optional and defaulting to 0, of
type double, that is the horizontal position of the touch on the client window of user's screen, excluding any scroll offset. "clienty", optional and defaulting to 0, of
type double, that is the vertical position of the touch on the client window of the user's screen, excluding any scroll offset. "screenx", optional and defaulting to 0, of
type double, that is the horizontal position of the touch on the user's screen. "screeny", optional and defaulting to 0, of
type double, that is the vertical position of the touch on the user's screen. "pagex", optional and de...
...he vertical position of the touch on the client window of the user's screen, excluding any scroll offset. "screenx", optional and defaulting to 0, of
type double, that is the horizontal position of the touch on the user's screen. "screeny", optional and defaulting to 0, of
type double, that is the vertical position of the touch on the user's screen. "pagex", optional and defaulting to 0, of
type double, that is the horizontal position of the touch on the client window of user's screen, including any scroll offset. ...
...And 4 more matches
Adding 2D content to a WebGL context - Web APIs
xels onto the screen: namely, the positions of the pixels and their colors. there are two shader functions run when drawing webgl content: the vertex shader and the fragment shader. you write these in glsl and pass the text of the code into webgl to be compiled for execution on the gpu. together, a set of vertex and fragment shaders is called a shader program. let's take a quick look at the two
types of shader, with the example in mind of drawing a 2d shape into the webgl context. vertex shader each time a shape is rendered, the vertex shader is run for each vertex in the shape. its job is to transform the input vertex from its original coordinate system into the clip space coordinate system used by webgl, in which each axis has a range from -1.0 to 1.0, regardless of aspect ratio, actual ...
...rning white every time, since we're just drawing a white square, with no lighting in use. const fssource = ` void main() { gl_fragcolor = vec4(1.0, 1.0, 1.0, 1.0); } `; initializing the shaders now that we've defined the two shaders we need to pass them to webgl, compile them, and link them together. the code below creates the two shaders by calling loadshader(), passing the
type and source for the shader. it then creates a program, attaches the shaders and links them together. if compiling or linking fails the code displays an alert. // // initialize a shader program, so webgl knows how to draw our data // function initshaderprogram(gl, vssource, fssource) { const vertexshader = loadshader(gl, gl.vertex_shader, vssource); const fragmentshader = loadshader(gl, gl.fra...
...ogram, vertexshader); gl.attachshader(shaderprogram, fragmentshader); gl.linkprogram(shaderprogram); // if creating the shader program failed, alert if (!gl.getprogramparameter(shaderprogram, gl.link_status)) { alert('unable to initialize the shader program: ' + gl.getprograminfolog(shaderprogram)); return null; } return shaderprogram; } // // creates a shader of the given
type, uploads the source and // compiles it. // function loadshader(gl,
type, source) { const shader = gl.createshader(
type); // send the source to the shader object gl.shadersource(shader, source); // compile the shader program gl.compileshader(shader); // see if it compiled successfully if (!gl.getshaderparameter(shader, gl.compile_status)) { alert('an error occurred compilin...
...And 4 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
e is code to handle incoming messages from the signaling server. that's implemented here as an onmessage event handler on the signaling channel object. this method is invoked each time a message arrives from the signaling server. ...
...nmessage = async ({ data: { description, candidate }}) => { try { if (description) { const offercollision = (description.
type == "offer") && (makingoffer || pc.signalingstate != "stable"); ignoreoffer = !polite && offercollision; if (ignoreoffer) { return; } await pc.setremotedescription(description); if (description.
type =="offer") { await pc.setlocaldescription(); signaler.send(description: pc.localdescription) } } else if (candidate) { try { await pc.addicecandidate(candidate); } catch(err) { if (!ignoreoffer) { throw err; } } } } catch(err) { console.error(err); } } upon receiving an incoming message from the signalingch...
...ding. 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({
type: "rollback" }); doing so returns the local peer to the stable signalingstate from whichever state it had previously been in. since a peer can only accept offers when in the stable state, the peer has thus rescinded its offer and is ready to receive the offer from the remote (impolite) peer. as we'll see in a moment, there are problems wit...
...And 4 more matches
WebRTC Statistics API - Web APIs
data. ...
...>${statname}:</strong> ${report[statname]}<br>\n`; }); } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); } when the promise returned by getstats() is fulfilled, the resolution handler receives as input an rtcstatsreport object containing the statistics information. this object contains a map of named dictionaries based on rtcstats and its affiliated
types. this example specifically looks for the report whose
type is inbound-rtp and whose kind is video. this way, we look only at the video-related statistics for the local rtcrtpreceiver responsible for receiving the streamed media. commonly used statistics reference the rtcstatsreport object contains a map of named objects based one of the rtcstats dictionary's subclasses. upon looking up a sta...
...by name, you get an object containing the corresponding data. the table below shows the statistic categories and the corresponding dictionaries; for each statistic category, the full hierarchy of rtcstats-based dictionaries are listed, so you can easily find all the available values. mapping of statistic category names to the dictionaries they implement statistic category name (rtcstats
type) description dictionaries implemented candidate-pair statistics describing the change from one rtcicetransport to another, such as during an ice restart. rtcicecandidatepairstats rtcstats certificate statistics about a certificate being used by an rtcicetransport. rtccertificatestats ...
...And 4 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
that's extra code that, as you're about to see, you don't have to write; and second, that loop uses valuable cpu time on your thread (likely the main thread), and there's a way to offload all that work to the audio rendering thread, which is optimized for this kind of work and may run at a more appropriate priority level than your code. the solution is simple, and it involves using an audio node
type which, at first glance, doesn't look all that useful: constantsourcenode. the technique this is actually a really easy way to do something that sounds like it might be hard to do. you simply need to create a constantsourcenode and connect it to all of the audioparams whose values should be linked to always match each other. since constantsourcenode's offset value is simply sent straight through...
...an propertry are all set to n as well. example let's take a look at this technique in action. in this simple example, we create three oscillatornodes. two of them have adjustable gain, controlled using a shared input control. the other oscillator has a fixed volume. ...
...ator has a fixed volume. html the html content for this example is primarily a button to toggle the oscillator tones on and off and an <input> element of
type range to control the volume of two of the three oscillators. ...
...And 4 more matches
Example and tutorial: Simple synth keyboard - Web APIs
ntrols for configuring the layer. for now, we will have two controls: one to set the master volume and another to select what periodic waveform to use when generating notes. the volume control first we create the <div> to contain the settings bar, so it can be styled as needed. ...
...t can be styled as needed. then we establish a box that will be presented on the left side of the bar and place a label and an <input> element of
type "range". the range element will typically be presented as a slider control; we configure it to allow any value between 0.0 and 1.0, stepping by 0.01 each position. ...
...); let wavepicker = document.queryselector("select[name='waveform']"); let volumecontrol = document.queryselector("input[name='volume']"); references to elements we'll need access to are obtained: keyboard is the container element into which the keys will be placed. wavepicker is the <select> element used to choose the waveform to use for the notes. volumecontrol is the <input> element (of
type "range") used to control the master audio volume. let notefreq = null; let customwaveform = null; let sineterms = null; let cosineterms = null; finally, global variables that will be used when constructing waveforms are created: notefreq will be an array of arrays; each array represents one octave, each of which contains one entry for each note in that octave. the value for each is the fre...
...And 4 more matches
XMLHttpRequest.sendAsBinary() - Web APIs
warning: this method is obsolete and should not be used. you should instead simply use the send() method, which now supports binary data in various forms. ...
...ich encodes the binary content to be sent. you can create the binary string using the filereader method readasbinarystring(). the string is converted to binary for transfer by removing the high-order byte of each character. return value undefined. ...
...create the binary string using the filereader method readasbinarystring(). the string is converted to binary for transfer by removing the high-order byte of each character. return value undefined. polyfill since sendasbinary() is an experimental feature, here is a polyfill for browsers that don't support the sendasbinary() method but support
typed arrays. ...
...And 4 more matches
XRSession - Web APIs
e read only an xrrenderstate object which contains options affecting how the imagery is rendered. this includes things such as the near and far clipping planes (distances defining how close and how far away objects can be and still get rendered), as well as field of view information. visibilitystate read only a domstring whose value is one of those found in the xrvisibilitystate enumerated
type, indicating whether or not the session's imagery is visible to the user, and if so, if it's being visible but not currently the target for user events. methods xrsession provides the following methods in addition to those inherited from its parent interface, eventtarget. cancelanimationframe() removes a callback from the animation frame painting callback from xrsession's set of animation f...
... to be called the next time the user agent is working on rendering an animation frame for the webxr device. returns an integer value which can be used to identify the request for the purposes of canceling the callback using cancelanimationframe(). this method is comparable to the window.requestanimationframe() method. requestreferencespace() requests that a new xrreferencespace of the specified
type be created. returns a promise which resolves with the xrreferencespace or xrboundedreferencespace which was requested, or throws a notsupportederror if the requested space
type isn't supported by the device. updaterenderstate() updates the properties of the session's render state to match the values specified in the specified xrrenderstateinit dictionary. any properties not included in the give...
...rrenderstateinit dictionary. any properties not included in the given dictionary are left unchanged from their current values. events the following events are delivered to xrsession objects. event description end sent to the xrsession object after the webxr session has ended and all hardware-related functions have completed. ...
...And 4 more matches
Basic form hints - Accessibility
will describe form controls. without a direct association between the control and its label, the screen reader has no way of knowing which label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
...ich label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
...each <label> element has a for attribute, indicating the id of the associated <input>. ...
...And 4 more matches
:disabled - CSS: Cascading Style Sheets
the :disabled css pseudo-class represents any disabled element. an element is disabled if it can't be activated (selected, clicked on,
typed into, etc.) or accept focus. the element also has an enabled state, in which it can be activated or accept focus. /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
... an enabled state, in which it can be activated or accept focus. /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
...ated or accept focus. /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
...And 4 more matches
@media - CSS: Cascading Style Sheets
itional group at-rule. /* at the top level of your code */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* nested within another conditional at-rule */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } for a discussion of media query syntax, please see using media queries. description media
types media
types describe the general category of a device. except when using the not or only logical operators, the media
type is optional and the all
type will be implied. all suitable for all devices. print intended for paged material and documents viewed on a screen in print preview mode. (please see paged media for information about formatting issues that are specific to these formats.) ...
... media features media features describe specific characteristics of the user agent, output device, or environment. ...
...d. all suitable for all devices. print intended for paged material and documents viewed on a screen in print preview mode. (please see paged media for information about formatting issues that are specific to these formats.) screen intended primarily for screens. speech intended for speech synthesizers. deprecated media
types: css2.1 and media queries 3 defined several additional media
types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries 4 and shouldn't be used. the aural
type has been replaced by speech, which is similar. media features media features describe specific characteristics of the user agent, output device, or environment. media feature expressions test for their presence or value, and are entirely optional. eac...
...And 4 more matches
attr() - CSS: Cascading Style Sheets
note: the attr() function can be used with any css property, but support for properties other than content is experimental, and support for the
type-or-unit parameter is sparse. the attr() css function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. it can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned. ...
...ntent is experimental, and support for the
type-or-unit parameter is sparse. the attr() css function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. it can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned. /* 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. ...
...iginating element is returned. /* 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. <
type-or-unit> is a keyword representing either the
type of the attribute's value, or its unit, as in html some attributes have implicit units. if the use of <
type-or-unit> as a value for the given attribute is invalid, the attr() expression will be invalid too. if omitted, it defaults to string. ...
...And 4 more matches
Video player styling basics - Developer guides
started. html markup there are a few changes that were made to the html markup shown in the previous article. the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items. ...
... markup shown in the previous article. the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items. ...
...ols now looks as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause"
type="button" data-state="play">play/pause</button> <button id="stop"
type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute"
type="button" data-state="mute">mute/unmute</button> <button id="volinc"
type="button" data-state="volup">vol+</button> <button id="voldec"
type="button" data-state="voldown">vol-</button> <button id="fs"
type="button" data-state="go-fullscreen">fullscreen</button> </div> related css alteration the previous article simply set the display property of the video controls to block in order to d...
...And 4 more matches
Rich-Text Editing in Mozilla - Developer guides
lows any element to become editable or non-editable (the 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...
...eaks the editing flow. ...
...s html: <button onclick="doricheditcommand('bold')" style="font-weight:bold;">b</button> javascript: function doricheditcommand(aname, aarg){ getiframedocument('editorwindow').execcommand(aname,false, aarg); document.getelementbyid('editorwindow').contentwindow.focus() } example: a simple but complete rich text editor <!doc
type html> <html> <head> <title>rich text editor</title> <script
type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { ret...
...And 4 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
canvas api lets you draw 2d bitmapped graphics in a <canvas> element. see our canvas tutorial to learn more. svg (scalable vector graphics) lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. svg commands are formatted as xml, and can be embedded directly into a web page or can be placed in he page using the <img> element, just like any other
type of image. webgl the web graphics library is an opengl es-based api for drawing high-performance 2d and 3d graphics on the web. see our webgl tutorial to find out more. how to describe a color in order to represent a color in css, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. this is typically done by breaking down the color int...
...you have to find a way to translate the analog concept 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. 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. color keywords include the standard primary and secondary colors (such as red, blue, or orange), shades of gray (from black to...
...ace, or you're implementing a drawing app. maybe you have editable text and need to let the user choose the text color. or perhaps your app lets the user assign colors to folders or items. although historically it's been necessary to implement your own color picker, html now provides support for browsers to provide one for your use through the <input> element, by using "color" as the value of its
type attribute. the <input> element represents a color only in the hexadecimal string notation covered above. example: picking a color let's look at a simple example, in which the user can choose a color. as the user adjusts the color, the border around the example changes to reflect the new color. after finishing up and picking the final color, the color picker's value is displayed. on macos, ...
...And 4 more matches
HTML attribute: required - HTML: Hypertext Markup Language
the boolean required attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. the required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input>
types along with the <select> and <textarea> form control elements. if present on any of these input
types and elements, the :required pseudo class will match. ...
... when an input has the required attribute, the :required pseudo-class also applies to it. ...
...ill match. if the attribute is not included, the :optional pseudo class will match. the attribute is not supported or relevant to range and color, as both have default values. it is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. nor is it supported on any of the button
types, including image. note color and range don't support required, but
type color defaults to #00000, and range defaults to the midpoint between min and max -- with min and max defaulting to 0 and 100 respectively in most browsers if not declared -- so always has a value. when an input has the required attribute, the :required pseudo-class also applies to it. conversely, inputs that support the required attribute but don't have the attribute set match the :optional pseu...
...And 4 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
g to fetch media data, but data is unexpectedly not forthcoming. suspend media data loading has been suspended. timeupdate the time indicated by the currenttime attribute has been updated. volumechange the volume has changed. waiting playback has stopped because of a temporary lack of data usage notes browsers don't all support the same file
types and audio codecs; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands: <audio controls> <source src="myaudio.mp3"
type="audio/mpeg"> <source src="myaudio.ogg"
type="audio/ogg"> <p>your browser doesn't support html5 audio. here is a <a href="myaudio.mp4">link to the audio</a> instead.</p> </audio> we offer a sub...
...also available is a guide to the codecs supported for video. other usage notes: if you don't specify the controls attribute, the audio player won't include the browser's default controls. ...
...t much of it is equally applicable to <audio>. detecting addition and removal of tracks you can detect when tracks are added to and removed from an <audio> element using the addtrack and removetrack events. however, these events aren't sent directly to the <audio> element itself. instead, they're sent to the track list object within the <audio> element's htmlmediaelement that corresponds to the
type of track that was added to the element: htmlmediaelement.audiotracks an audiotracklist containing all of the media element's audio tracks. you can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element. htmlmediaelement.videotracks add an addtrack listener to this videotracklist object to be informed when video tracks are added to the element...
...And 4 more matches
itemprop - HTML: Hypertext Markup Language
rms an item. property values are either a string or a url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>. examples the example below shows the source for a set of elements marked up with itemprop attributes, followed by a table showing the resulting structured data. ...
...tured data - see example below). an item with a property whose value is a product id the id is not human-friendly, so the product's name is used the human-visible text instead of the id. <h1 itemscope> <data itemprop="product-id" value="9678aou879">the instigator 2000</data> </h1> for numeric data, the meter element and its value attribute can be used. ...
...temprop="product-id" value="9678aou879">the instigator 2000</data> </h1> for numeric data, the meter element and its value attribute can be used. a meter element <div itemscope item
type="http://schema.org/product"> <span itemprop="name">panasonic white 60l refrigerator</span> <img src="panasonic-fridge-60l-white.jpg" alt=""> <div itemprop="aggregaterating" itemscope item
type="http://schema.org/aggregaterating"> <meter itemprop="ratingvalue" min=0 value=3.5 max=5>rated 3.5/5</meter> (based on <span itemprop="reviewcount">11</span> customer reviews) </div> </div> similarly, for date- and time-related data, the time element and its datetime attribute can be used. an item with one property, "birthday", whose value is a date <div itemscope> i wa...
...And 4 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
article provides a basic guide to how <link rel="preload"> works. the basics you most commonly use <link> to load a css file to style your page with: <link rel="stylesheet" href="styles/main.css"> here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want. you will also need to specify: the path to the resource in the href attribute. the
type of resource in the as attribute. a simple example might look like this (see our js and css example source, and also live): <head> <meta charset="utf-8"> <title>js and css preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas...
...chunk of html as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. for example: resources that are pointed to from inside css, like fonts or images. resources that javascript can request, like json, imported scripts, or web workers. larger images and video files. preload has other advantages too. using as to specify the
type of content to be preloaded allows the browser to: prioritize resource loading more accurately. store in the cache for future requests, reusing the resource if appropriate. apply the correct content security policy to the resource. set the correct accept request headers for it. what
types of content can be preloaded? many different content
types can be preloaded. the possible as attribute...
...e. worker: a javascript web worker or shared worker. video: video file, as typically used in <video>. note: there's more detail about these values and the web features they expect to be consumed by in the preload spec — see link element extensions. also note that the full list of values the as attribute can take is governed by the fetch spec — see request destinations. including a mime
type <link> elements can accept a
type attribute, which contains the mime
type of the resource the element points to. this is especially useful when preloading resources — the browser will use the
type attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not. you can see an example of this in our video example (see the full source code, and also...
...And 4 more matches
Evolution of HTTP - HTTP
d get followed by the path to the resource (not the url as both the protocol, server, and port are unnecessary once connected to the server). get /mypage.html the response is extremely simple too: it only consisted of the file itself. <html> a very simple html page </html> unlike subsequent evolutions, there were no http headers, meaning that only html files could be transmitted, but no other
type of documents. there were no status or error codes: in case of a problem, a specific html file was send back with the description of the problem contained in it, for human consumption. http/1.0 – building extensibility http/0.9 was very limited and both browsers and servers quickly extended it to be more versatile: versioning information is now sent within each request (http/1.0 is appended...
... consequence (like in updating or using its local cache in a specific way) the notion of http headers has been introduced, both for the requests and the responses, allowing metadata to be transmitted and making the protocol extremely flexible and extensible. ...
...mely flexible and extensible. with the help of the new http headers, the ability to transmit other documents than plain html files has been added (thanks to the content-
type header). ...
...And 4 more matches
Content-Location - HTTP
location and content-location are different. location indicates the url of a redirect, while content-location indicates the direct url to use to access the resource, without further content negotiation in the future. location is a header associated with the response, while content-location is associated with the data returned. this distinction may seem abstract without examples. header
type entity header forbidden header name no syntax content-location: <url> directives <url> a relative (to the request url) or absolute url. examples requesting data from a server in different formats let's say a site's api can return data in json, xml, or csv formats. if the url for a particular document is at https://example.com/documents/foo, the site could return d...
... then the client could remember that the json version is available at that particular url, skipping content negotation the next time it requests that document. the server could also consider other content negotiation headers, such as accept-language. pointing to ...
... then the client could remember that the json version is available at that particular url, skipping content negotation the next time it requests that document. the server could also consider other content negotiation headers, such as accept-language. ...
...And 4 more matches
Enumerability and ownership of properties - JavaScript
ag 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 proto
type chain. properties of an object can also be retrieved in total. there are a number of built-in means of detecting, iterating/enumerating, and retrieving object properties, with the chart showing below which are available. some sample code follows which demonstrates how to obtain the missing categories. property enumerability and ownership - built-in methods of detection, retrieval, and iterati...
...ere 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. ...
... 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. ...
...And 4 more matches
Introduction - JavaScript
this means that in the browser, javascript can change the way the webpage (dom) looks. and, likewise, node.js javascript on the server can respond to custom requests from code written in the browser. javascript and java javascript and java are similar in some ways but fundamentally different in some others. the javascript language resembles java but does not have java's static typing and strong
type checking. javascript follows most java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from livescript to javascript. in contrast to java's compile-time system of classes built by declarations, javascript supports a runtime system based on a small number of data
types representing numeric, boolean, and string values. javascript has ...
...ng. javascript follows most java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from livescript to javascript. in contrast to java's compile-time system of classes built by declarations, javascript supports a runtime system based on a small number of data
types representing numeric, boolean, and string values. javascript has a proto
type-based object model instead of the more common class-based object model. the proto
type-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. javascript also supports functions without any special declarative requirements. functions can be properties of objects, executing as loosely
typed methods. javascript is a very free-form language compared to j...
...eclarative requirements. functions can be properties of objects, executing as loosely
typed methods. javascript is a very free-form language compared to java. you do not have to declare all variables, classes, and methods. you do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. variables, parameters, and function return
types are not explicitly
typed. java is a class-based programming language designed for fast execution and
type safety.
type safety means, for instance, that you can't cast a java integer into an object reference or access private memory by corrupting java bytecodes. java's class-based model means that programs consist exclusively of classes and their methods. java's class inheritance and strong typi...
...And 4 more matches
Loops and iteration - JavaScript
rough 4. console.log('walking east one step'); } there are many different kinds of loops, but they all essentially do the same thing: they repeat an action some number of times. (note that it's possible that number could be zero!) the various loop mechanisms offer different ways to determine the start and end points of the loop. there are various situations that are more easily served by one
type of loop over the others. the statements for loops provided in javascript are: for statement do...while statement while statement labeled statement break statement continue statement for...in statement for...of statement for statement a for loop repeats until a specified condition evaluates to false. the javascript for loop is similar to the java and c for loop. a for statement look...
...ounts the number of selected options in a scrolling list (a <select> element that allows multiple selections). the for statement declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. ...
...ted options in a scrolling list (a <select> element that allows multiple selections). the for statement declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. ...
...And 4 more matches
Regular expressions - JavaScript
provide lists of the different special characters that fit into each category, along with descriptions and examples. assertions assertions include boundaries, which indicate the beginnings and endings of lines and words, and other patterns indicating in some way that a match is possible (including look-ahead, look-behind, and conditional expressions). character classes distinguish different
types of characters. for example, distinguishing between letters and digits. groups and ranges indicate groups and ranges of expression characters. quantifiers indicate numbers of characters or expressions to match. unicode property escapes distinguish based on unicode character properties, for example, upper- and lower-case letters, math symbols, and punctuation. if you want to look at all th...
...riable. advanced searching with flags regular expressions have six optional flags that allow for functionality like global and case insensitive searching. these flags can be used separately or together in any order, and are included as part of the regular expression. regular expression flags flag description corresponding property g global search. ...
...ix optional flags that allow for functionality like global and case insensitive searching. these flags can be used separately or together in any order, and are included as part of the regular expression. regular expression flags flag description corresponding property g global search. regexp.proto
type.global i case-insensitive search. regexp.proto
type.ignorecase m multi-line search. ...
...And 4 more matches
Intl.Locale - JavaScript
unicode represents locales with a string, called a locale identifier. the locale identifier consists of a language identifier and extension tags. language identifiers are the core of the locale, consisting of language, script, and region subtags. additional information about the locale is stored in the optional extension tags. extension tags hold information about locale aspects such as calendar
type, clock
type, and numbering system
type. traditionally, the intl api used strings to represent locales, just as unicode does. this is a simple and lightweight solution that works well. adding a locale class, however, adds ease of parsing and manipulating the language, script, and region, as well as extension tags. constructor intl.locale() creates a new locale object. instance properties ...
...umbering system
type. traditionally, the intl api used strings to represent locales, just as unicode does. this is a simple and lightweight solution that works well. adding a locale class, however, adds ease of parsing and manipulating the language, script, and region, as well as extension tags. constructor intl.locale() creates a new locale object. instance properties intl.locale.proto
type.basename returns basic, core information about the locale in the form of a substring of the complete data string. intl.locale.proto
type.calendar returns the part of the locale that indicates the locale's calendar era. intl.locale.proto
type.casefirst returns whether case is taken into account for the locale's collation rules. ...
...t. instance properties intl.locale.proto
type.basename returns basic, core information about the locale in the form of a substring of the complete data string. intl.locale.proto
type.calendar returns the part of the locale that indicates the locale's calendar era. intl.locale.proto
type.casefirst returns whether case is taken into account for the locale's collation rules. intl.locale.proto
type.collation returns the collation
type for the locale, which is used to order strings according to the locale's rules. intl.locale.proto
type.hourcycle returns the time keeping format convention used by the locale. intl.locale.proto
type.language returns the language associated with the locale. intl.locale.proto
type.numberingsystem returns the numeral system used by the locale. intl.locale.pr...
...And 4 more matches
Map - JavaScript
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. it only contains what is explicitly put into it. an object has a proto
type, 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 ke...
...", address: "321 s 2nd st"}) contacts.get('jessie') // {phone: "213-555-1234", address: "123 n 1st ave"} contacts.delete('raymond') // false contacts.delete('jessie') // true console.log(contacts.size) // 1 constructor map() creates a new map object. static properties get map[@@species] the constructor function that is used to create derived objects. ...
...ave"} contacts.delete('raymond') // false contacts.delete('jessie') // true console.log(contacts.size) // 1 constructor map() creates a new map object. static properties get map[@@species] the constructor function that is used to create derived objects. instance properties map.proto
type.size returns the number of key/value pairs in the map object. instance methods map.proto
type.clear() removes all key-value pairs from the map object. ...
...And 4 more matches
Set - JavaScript
description set objects are collections of values. you can iterate through the elements of a set in insertion order. a value in the set may only occur once; it is unique in the set's 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. ...
...lity 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. ...
...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.proto
type.size returns the number of values in the set object. instance methods set.proto
type.add(value) appends value to the set object. returns the set object. ...
...And 4 more matches
Equality (==) - 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 x == y description the equality operators (== and !=) use the abstract equality comparison algorithm to compare two operands. ...
...nd us a pull request. syntax x == y description the equality operators (== and !=) use the abstract equality comparison algorithm to compare two operands. this can be roughly summarised as follows: if the operands are both objects, return true only if both operands reference the same object. if one operand is null and the other is undefined, return true. if the operands are of different
types, try to convert them to the same
type before comparing: when comparing a number to a string, try to convert the string to a numeric value. if one of the operands is boolean, convert the boolean operand to 1 if it is true and +0 if it is false. if one of the operands is an object and the other is a number or a string, try to convert the object to a primitive using the object's valueof...
... when comparing a number to a string, try to convert the string to a numeric value. if one of the operands is boolean, convert the boolean operand to 1 if it is true and +0 if it is false. if one of the operands is an object and the other is a number or a string, try to convert the object to a primitive using the object's valueof() and tostring() methods. if the operands have the same
type, they are compared as follows: string: return true only if both operands have the same characters in the same order. number: return true only if both operands have the same value. +0 and -0 are treated as the same value. if either operand is nan, return false. boolean: return true only if operands are both true or both false. the most notable difference between this operator an...
...And 4 more matches
for...of - JavaScript
it invokes a custom iteration hook with statements to be executed for the value of each distinct property of 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. ...
...) { console.log(value); } // 10 // 20 // 30 you can use let instead of const too, if you reassign the variable inside the block. ...
...in these cases, the iterator is closed. function* foo(){ yield 1; yield 2; yield 3; }; for (const o of foo()) { ...
...And 4 more matches
function declaration - JavaScript
ns functions can be conditionally declared, that is, a function statement can be nested within an if statement, however the results are inconsistent across implementations and therefore this pattern should not be used in production code. for conditional function creation, use function expressions instead. var hoisted = "foo" in this; console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. ...
...n be conditionally declared, that is, a function statement can be nested within an if statement, however the results are inconsistent across implementations and therefore this pattern should not be used in production code. for conditional function creation, use function expressions instead. var hoisted = "foo" in this; console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. ...
...ver the results are inconsistent across implementations and therefore this pattern should not be used in production code. for conditional function creation, use function expressions instead. var hoisted = "foo" in this; console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted.
typeof foo is ${
typeof foo}`); if (false) { function foo(){ return 1; } } // in chrome: // 'foo' name is hoisted.
typeof foo is undefined // // in firefox: // 'foo' name is hoisted. ...
...And 4 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
basics. fluid grids the best place to start is with fluid measurements for our application layout — essentially, this means using a combination of percentages and ems/rems to size your containers and text, not fixed widths such as pixels. this has a lot of advantages in that the layout will adapt to different viewport dimensions. let's look at an example. we've written a simple-but-fun proto
type for an application called snapshot, which takes a video stream from your webcam (using getusermedia()) then allows you to capture stills from that video stream (using html5 <canvas>), and save them to a gallery. you can then view previously-captured images and delete them. other articles will discuss the functionality in more detail, but here we're interested in the layout. note: you can find t...
... background-color: 0; } this first block resets a number of different things from the widescreen layouts that were't required for the mobile app. x-card:nth-child(1) video, x-card:nth-child(2) img, x-card:nth-child(3) { margin-top: 17.5vw; } x-card:nth-child(1) button, x-card:nth-child(2) button { position: absolute; bottom: 0; } x-card:nth-child(2) button:nth-of-
type(2) { bottom: 5.9rem; } x-card:nth-child(1) button { font-size: 7vw; } x-card:nth-child(2) button { font-size: 7vw; } the next rules do some sizing on the buttons inside the first two cards, and give all card contents a top margin so that their content won't be lost under the navigation buttons (see below). this was necessary because mozilla brick (also see below) forces i...
...ttons are pressed. for more on using brick, read mozilla brick: ready made ui components. what's more relevant to this article is that we didn't want the brick css and javascript files being applied to the markup unless we were looking at the mobile app view. to achieve this, we applied the brick css to the page using a separate <link> element with a media attribute: <link href="dist/brick.css"
type="text/css" rel="stylesheet" media="all and (max-width: 480px)"> this says that the whole stylesheet will not be linked to the html unless the viewport width is 480px or less. moving on to the javascript, <script> elements don't accept media attributes, so i had to do this a different way. fortunately there is a javascript construct called window.matchmedia(), which can conditionally run javascri...
...And 4 more matches
<marker> - SVG: Scalable Vector Graphics
90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport. ...
...="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport. value
type: <length> ; default value: 3; animatable: yes markerunits this attribute defines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>. value
type: userspaceonuse|strokewidth ; default value: strokewidth; animatable: yes markerwidth this attribute defines the width of the marker viewport. ...
...ines the height of the marker viewport. value
type: <length> ; default value: 3; animatable: yes markerunits this attribute defines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>. value
type: userspaceonuse|strokewidth ; default value: strokewidth; animatable: yes markerwidth this attribute defines the width of the marker viewport. value
type: <length> ; default value: 3; animatable: yes orient this attribute defines the orientation of the marker relative to the shape it is attached to. ...
...And 4 more matches
<symbol> - SVG: Scalable Vector Graphics
xlink:href="#mydot" x="5" y="5" style="opacity:1.0" /> <use xlink:href="#mydot" x="20" y="5" style="opacity:0.8" /> <use xlink:href="#mydot" x="35" y="5" style="opacity:0.6" /> <use xlink:href="#mydot" x="50" y="5" style="opacity:0.4" /> <use xlink:href="#mydot" x="65" y="5" style="opacity:0.2" /> </svg> attributes height this attribute determines the height of the symbol. ...
... style="opacity:0.4" /> <use xlink:href="#mydot" x="65" y="5" style="opacity:0.2" /> </svg> attributes height this attribute determines the height of the symbol. value
type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. ...
...tratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value
type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ...
...And 4 more matches
Mixed content - Web security
their connection with the web server is encrypted with tls and is therefore safeguarded from most sniffers and man-in-the-middle attacks. an https page that includes content fetched using cleartext http is called a mixed content page. pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. that leaves the pages unsafe.
types of mixed content there are two categories for mixed content: mixed passive/display content and mixed active content. the difference lies in the threat level of the worst case scenario if content is rewritten as part of a man-in-the-middle attack. in the case of passive content, the threat is lower (the page may contain misleading content, or the user's cookies may be stolen). in the case of act...
...p with an inappropriate image or message to the user. the attacker could also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a website. if the attacker observes http requests to certain images, they could determine which webpage the user is visiting. ...
...hence, in addition to the risks described for mixed display content above, mixed active content is vulnerable to a few other attack vectors. ...
...And 4 more matches
WebAssembly Concepts - WebAssembly
it is not primarily intended to be written by hand, rather it is designed to be an effective compilation target for low-level source languages like c, c++, rust, etc. ...
...nce bottlenecks. webassembly is a different language from javascript, but it is not intended as a replacement. instead, it is designed to complement and work alongside javascript, allowing web developers to take advantage of both languages' strong points: javascript is a high-level language, flexible and expressive enough to write web applications. it has many advantages — it is dynamically
typed, requires no compile step, and has a huge ecosystem that provides powerful frameworks, libraries, and other tools. webassembly is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages with low-level memory models such as c++ and rust with a compilation target so that they can run on the web. (note that webassembly has the h...
... performance and provides languages with low-level memory models such as c++ and rust with a compilation target so that they can run on the web. (note that webassembly has the high-level goal of supporting languages with garbage-collected memory models in the future.) with the advent of webassembly appearing in browsers, the virtual machine that we talked about earlier will now load and run two
types of code — javascript and webassembly. the different code
types can call each other as required — the webassembly javascript api wraps exported webassembly code with javascript functions that can be called normally, and webassembly code can import and synchronously call normal javascript functions. in fact, the basic unit of webassembly code is called a module and webassembly modules are sym...
...And 4 more matches
Working with Events - Archive of obsolete content
: listening to built-in events emitted by objects in the sdk, such as tabs opening, pages loading, mouse clicks sending and receiving user-defined events between content scripts and add-on code this guide only covers the first of these; the second is explained in the working with content scripts guide. adding listeners you can add a listener to an event emitter by calling its on(
type, listener) method. it takes two parameters:
type: the
type of event we are interested in, identified by a string. many event emitters may emit more than one
type of event: for example, a browser window might emit both open and close events. the list of valid event
types is specific to an event emitter and is included with its documentation. listener: the listener itself. this is a fu...
...nt emitters may emit more than one
type of event: for example, a browser window might emit both open and close events. the list of valid event
types is specific to an event emitter and is included with its documentation. listener: the listener itself. this is a function which will be called whenever the event occurs. the arguments that will be passed to the listener are specific to an event
type and are documented with the event emitter. for example, the following add-on registers a listener with the tabs module to listen for the ready event, and logs a string to the console reporting the event: var tabs = require("sdk/tabs"); tabs.on("ready", function () { console.log("tab loaded"); }); it is not possible to enumerate the set of listeners for a given event. the value of this ...
... listen for the ready event, and logs a string to the console reporting the event: var tabs = require("sdk/tabs"); tabs.on("ready", function () { console.log("tab loaded"); }); it is not possible to enumerate the set of listeners for a given event. the value of this in the listener function is the object that emitted the event. listening to all events you can pass the wildcard "*" as the
type argument. if you do this, the listener will be called for any event emitted by that object, and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var butto...
...And 3 more matches
clipboard - Archive of obsolete content
examples set and get the contents of the clipboard. var clipboard = require("sdk/clipboard"); clipboard.set("lorem ipsum dolor sit amet"); var contents = clipboard.get(); set the clipboard contents to some html. ...
... examples set and get the contents of the clipboard. var clipboard = require("sdk/clipboard"); clipboard.set("lorem ipsum dolor sit amet"); var contents = clipboard.get(); set the clipboard contents to some html. ...
... examples set and get the contents of the clipboard. var clipboard = require("sdk/clipboard"); clipboard.set("lorem ipsum dolor sit amet"); var contents = clipboard.get(); set the clipboard contents to some html. ...
...And 3 more matches
panel - Archive of obsolete content
t); 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 // just start typing. ...
... 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 // just start typing. ...
... ensure that the panel's style is consistent with the dialogs displayed by firefox and other applications, but means you need to take care when applying your own styles. if the panel's content is packaged along with your add-on and specified using an html file in your data directory, you can style it by embedding css directly in the html file or by referencing a css file stored under data: <!doc
type html> <html> <head> <link href="panel-style.css"
type="text/css" rel="stylesheet"> </head> <body> my panel content </body> </html> from firefox 31 onwards, you can style panel content using the contentstyle or contentstylefile options. you can use these options even if the panel content is not packaged along with the add-on: var mypanel = require("sdk/panel").panel({ contentur...
...And 3 more matches
dev/panel - Archive of obsolete content
mandatory icon string the icon to display in the toolbox toolbar, speci...
... mandatory icon string the icon to display in the toolbox toolbar, specified as a resource:// url...
...end messages to // the panel document here } }); alternatively, you can use the extend function: const { extend } = require("sdk/core/heritage"); function mypanel() {}; mypanel.proto
type = extend(panel.proto
type, { label: "my panel", tooltip: "...", .... }); in the constructor definition there are a number of mandatory and optional parameters for you to supply. name
type description label string the string to display in the toolbox toolbar. mandatory icon string the icon to display in the toolbox toolbar, specified as a resource:// url pointing to an icon file, typically in your add-on's "data" directory. you can use the notation "./my-icon.png" as an alias for the url pointing to "data/my-icon.png". m...
...And 3 more matches
system/events - Archive of obsolete content
observerservice. you can find a list of events dispatched by the firefox codebase here. ...
...the firefox codebase here. var events = require("sdk/system/events"); var { ci } = require("chrome"); function listener(event) { var channel = event.subject.queryinterface(ci.nsihttpchannel); channel.setrequestheader("user-agent", "mybrowser/1.0", false); } events.on("http-on-modify-request", listener); globals functions emit(
type, event) send an event to observer service parameters
type : string the event
type. event : object an optional object with data and subject attributes. data refers to a string that you would like to pass through this event. subject should refer to the actual actor/subject of this event (ie: the object emitting the event). on(
type, listener, strong) listen to events of a given
type parameters
type : string the event
type name to watch. listener :...
...to pass through this event. subject should refer to the actual actor/subject of this event (ie: the object emitting the event). on(
type, listener, strong) listen to events of a given
type parameters
type : string the event
type name to watch. listener : function function that will be called when an event is fired, with a single event object as argument. this object has three attributes:
type: the event
type name subject: the event subject object data: the event data string strong : boolean default is false, a weak reference, which means it can be garbage collected at any time if there are no other references to it. ...
...And 3 more matches
Creating Event Targets - Archive of obsolete content
this consists of three functions: on(): start...
...this consists of three functions: on(): start listening for events or a given ...
...e = once.bind(null, exports); exports.removelistener = function removelistener(
type, listener) { off(exports,
type, listener); }; this code implements a module which can emit added and visited events. it duplicates the previous code, but with a few changes: import emit(), on(), once(), and off() from event/core replace listener functions with calls to emit(), passing the appropriate event
type export its own event api. ...
...And 3 more matches
Forms related code snippets - Archive of obsolete content
here are some <form> related code snippets. date picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doc
type html> <html> <head> <meta http-equiv="content-
type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script
type="text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function datepicker (otarget) { const otable = document.createelement("table"), ohrow = document.createelemen...
...) { otable.parentnode.removechild(otable); return; } otable.style.zindex = nzindex++; otable.style.position = "absolute"; otable.style.left = otarget.offsetleft + "px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "px"; otarget.parentnode.insertbefore(otable, otarget); }; ainstances.push(this); } datepicker.proto
type.writedays = function () { const nendblanks = (this.current.getday() + bzeroismonday * 6) % 7, nend = amonthlengths[this.current.getmonth()] + nendblanks, ntotal = nend + ((7 - nend % 7) % 7); var otd, otr; if (this.otbody) { this.container.removechild(this.otbody); } this.otbody = document.createelement("tbody"); for (var nday, oday, niter = 0; n...
... 1000; window.addeventlistener ? addeventlistener("load", buildcalendars, false) : window.attachevent ? attachevent("onload", buildcalendars) : (onload = buildcalendars); document.addeventlistener ? document.addeventlistener("mousedown", ondocclick, false) : document.attachevent ? ...
...And 3 more matches
JavaScript Debugger Service - Archive of obsolete content
the various hooks. jsd.scripthook = { onscriptcreated: function(script) { // your function here }, onscriptdestroyed: function(script) { // your function here } }; jsd.errorhook = { onerror: function(message, filename, lineno, colno, flags, errnum, exc) { // your function here } }; // triggered when jsd.errorhook[onerror] returns false jsd.debughook = { onexecute: function(frame,
type, rv) { // your function here } }; jsd.enumeratescripts({ // the enumeratescript method will be called once for every script jsd knows about enumeratescript: function(script) { // your function here } }); a simple stack trace here, we will show how to implement a simple javascript stack trace using the jsd. note that onerror is called for every exception. jsd.errorhook = { onerror: ...
...script) { // your function here } }); a simple stack trace here, we will show how to implement a simple javascript stack trace using the jsd. note that onerror is called for every exception. ...
...l show how to implement a simple javascript stack trace using the jsd. note that onerror is called for every exception. ...
...And 3 more matches
Adding menus and submenus - Archive of obsolete content
a menubar can hold one or more menu elements. menus require a menupopup element as a container for its children, which are usually menuitem elements...
... a menubar can hold one or more menu elements. ...
...ur overlay code should have something like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" 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 for this:
type and checked. the
type attribute must be set to "checkbox". you can set the checked attribute to "true" to check it by default. the item's checked state changes when the user clicks on it. an example of one such item...
...And 3 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
idebar.commandkey "e"> <!entity openemptysidebar.modifierskey "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 information. example 3. ...
... 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 information. example 3. ...
...cludes 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 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" ?> <!doc
type 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 ...
...And 3 more matches
Editor Embedding Guide - Archive of obsolete content
in the beginning there is makeeditable given an nsiwebbrowser instance, get an nsidomwindow from the getcontentdomwindow call. then simply call nsiwebbrowser->do_getinterface on the nsiwebbrowser to retrieve the nsieditingsession from it. from there you call editingsession->makewindoweditable(domwindow, editor
type, pr_true). the first parameter is the nsidomwindow you just retrieved, the second is the editor
type you want to create, and the third is whether you want the window editable immediately or when the document is done loading. in calling this method, the editor is created underneath and the event listeners are all prepa if (ns_failed(rv)) return ns_error_failure; // we are not setup??!! nscomptr<nsieditingsession> editingsession; nsiwebbrowser->do_getinterface(getter_addrefs(e...
... document is done loading. ...
...below is the sequence of steps that need to be followed for the same: 1. ...
...And 3 more matches
Settings - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! the jetpack.storage.settings namespace allows jetpacks to specify user-configurable settings. jetpack will automatically generate a user interface based on the specification. the settings persist across browser sessions and are stored using the jetpack simple storage api. settings are private to each jetpack and are not accessible by other jetpacks. ...
...ose to users. jetpack will automatically generate a user interface from this specification that users of your jetpack may use to customize the settings. the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
...ation that users of your jetpack may use to customize the settings. the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
...And 3 more matches
Menu - Archive of obsolete content
please see the wiki page and online documentation for more information on how to use the add-on sdk. jetpack's menu api allows features to access and modify the browser's built-in menus. features can also create new menus and attach them almost anywhere, chrome or content, as popup menus or context menus. two namespaces are associated with this api: jetpack.menu, which provides access to the browser's menus, and jetpack.menu, the constructor for making new menus. the api is fairly comprehensive, so you may want to start by reading through some examples. ...
...reates an empty menu. jetpack.menu(menuitems) creates a menu with the given items. parameters menuitems an array of menuitems. jetpack.menu(properties) creates a menu with specific properties. parameters properties an object defining any of the properties below. the items property may be used to define an array of menuitems. properties property
type description beforehide function a function invoked just before the menu is hidden. if the menu is a context menu, it is called as beforehide(menu, context) and otherwise as beforehide(menu). menu is the menu object to which beforehide is attached. context is an object describing the context in which the menu was shown. beforeshow function ...
...ode, which may be either a raw dom node or a dom node wrapped by jquery. menuitems menus in jetpack contain menuitem objects, including both built-in firefox menus and menus that features create. no menuitem constructor is exposed, because jetpack automatically boxes simple javascript objects into menuitem objects. creating menuitems to pass a new menuitem into the api, pass one of the following
types: null a simple menu separator. (note that any falsey value will suffice, including undefined, null, and the empty string. null is recommended because it stands out.) function a menuitem that will update itself when its menu is shown. the function is invoked just before the item's menu is shown and when the items array of the item's menu is retrieved. it must return a non-function menuitem. if th...
...And 3 more matches
Elements - Archive of obsolete content
refixes used in your binding. bindings contains zero or more binding elements as children. each binding child element defines a unique binding that can be attached to elements in other documents. an element can have only one binding attached (explicitly or inherited) at one moment. from several bindings only the last in the sequence will be used (like with any css rule). ...
...h binding child element defines a unique binding that can be attached to elements in other documents. an element can have only one binding attached (explicitly or inherited) at one moment. from several bindings only the last in the sequence will be used (like with any css rule). ...
...lay - this attribute specifies how the tag is displayed. by setting this attribute, you can have an element have the layout and display characteristics of an existing element. for example, use the value 'xul:button' to create an element that is displayed like a button. the part before the colon is a namespace prefix so you must declare the xul namespace as well. not all tags have a unique display
type. the following xul display
types may be used: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol. you may also use a number of html, mathml and svg tags. the 'display' attribute does not work unless the extends attribute is set, see bug bug ...
...And 3 more matches
Panels - Archive of obsolete content
a panel is a popup which can support any
type of content. it is used when supporting temporary popup displays for selecting or entering data. the panel element the 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. ...
... for selecting or entering data. the panel element the 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 pan...
...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 also place a close button in the panel which will close the panel with a script if desired. when you want to associate a panel with a button, place the <panel> element directly inside the button element. you also need to set the
type attribute on the button to the value panel, or the button will look and behave like a regular button. the popup panel will, by default, appear with its topleft corner just underneath the bottom edge of the button, much as a menu does. the position can, however, be changed. for more information about positioning the popup, see positioning popups. only buttons (and toolbarbuttons) have this autom...
...And 3 more matches
Special Condition Tests - Archive of obsolete content
parent tag tests sometimes you want to simply generate one block of content at the top level and different content at the recurisive level. for example, the bookmarks toolbar in a web browser might display buttons at the first level, but menus and submenus for content below that. templates have a means of allowing a rule to match only if the generated content would be inserted inside an element with a particular tag name. for instance, if the container was a <vbox>, a rule could be created that would only match a <vbox> element. ...
..., the content will be inserted into a <menu> in case you aren't clear, the tag that must match for the outer iteration is the root element, the one with the datasources attribute on it. for inner iterations, it will be the element with the uri attribute from the previous iteration. ...
...ent would instead be inserted into the groupbox generated from the previous iteration. this does not match the first rule, so the content from the second rule is generated instead. the end effect is the same output, however, the source code is simpler. this technique is useful when you know that the content will be different at each level. if this is not the case, you will still need to use other
types of conditions to handle this case. rdf parent matching for rdf sources, you can use the same technique. to do this kind of matching, you again place a parent attribute on the rule, set to the tag to match. for instance, we might use the following: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule parent="vbox"> <...
...And 3 more matches
Adding Style Sheets - Archive of obsolete content
me that we are building the find files dialog for themeability, because the find files dialog can be referred to with the url chrome://findfile/content/findfile.xul so the style sheet file will be stored in chrome://findfile/skin/findfile.css. all the xul examples so far have actually been using a style sheet already. the second line has always been: <?xml-stylesheet href="chrome://global/skin/"
type="text/css"?> this line indicates that we want to use the style provided by chrome://global/skin/. in mozilla, this will be translated as the file global.css, which contains default style information for xul elements. you could leave the line out and the elements will still work, however they will look fairly plain. the style sheet applies various fonts, colors and borders to make the elements lo...
...layout might change the meaning of the element. however you should avoid this as much as possible. for installed files, you'll have to create or modify a manifest file and install the skin. our find files dialog example let's modify the find files dialog so that its style comes from a separate style file. ...
... you should avoid this as much as possible. for installed files, you'll have to create or modify a manifest file and install the skin. our find files dialog example let's modify the find files dialog so that its style comes from a separate style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/"
type="text/css"?> <?xml-stylesheet href="findfile.css"
type="text/css"?> ... ...
...And 3 more matches
Creating a Window - Archive of obsolete content
« previousnext » we're going to be creating a simple find files utility throughout this tutorial. first, however, we 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 for...
...here 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 the code above: <?xml version="1.0"?> this line simply declares that this is an xml file. you would normally add this line as is at the top of each xul file. <?xml-stylesheet href="chrome://global/skin/"
type="text/css"?> this line is used to specify the style sheets to use for the file. this is the syntax that xml files use to import style sheets. in this case, we import the styles found in the global part of a skin package. we didn't specify a specific file so mozilla will determine which files in the directory to use. in this case, the all-important global.css file is selected. this file contains...
...omment block with other elements (the buttons, menus and other user interface components) to appear in the window. we'll add some of these in the next set of sections. </window> and finally, we need to close the window tag at the end of the file. opening a window in order to open a xul window, there are several methods that can be used. if you are only in the development stage, you can just
type the url (whether a chrome:, file: or other url
type) into the location bar in a mozilla browser window. you should also be able to double-click the file in your file manager, assuming that xul files are associated with mozilla. the xul window will appear in the browser window as opposed to a new window, but this is often sufficient during the early stages of development. note: the local xul docu...
...And 3 more matches
Popup Menus - Archive of obsolete content
the main difference is the way in which they appear. plain popups the plain popup is a popup window which appears when the user presses the left mouse button on an element. ...
...ries 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 provided on the button itself. all three
types of popups differ in the way that the user invokes them. the
type of popup is determined by the element that invokes the popup. declaring popup content a popup is described using the menupopup element. it has no special attributes and is a
type of box. when in...
...'s time to make the popup appear. to do this we need to associate the popup with an element where it should appear. we do this because we only want the popup to appear when the user clicks in a certain area of a window. typically, this will be a specific button or a box. to associate the popup with an element, you add one of three attributes to the element. the attribute you add depends on which
type of popup you want to create. for plain popups, add a popup attribute to the element. for context popups, add a context attribute. finally, for tooltip popups, add a tooltip attribute. the value of the attribute must be set to the id of the menupopup that you want to have appear. this is why you must put the id on the popup. that way it's easy to have multiple menupopups in one file. in the exam...
...And 3 more matches
description - Archive of obsolete content
r by placing text inside the open and close description tags. the value attribute is used to set text that appears in a single line. if text appears as a child of the description, it will wrap to multiple lines. it may contain arbitrary markup, which can be styled as needed. more information is available in the xul tutorial. attributes crop, disabled, tabindex value properties accessible
type, crop, disabled, tabindex, value style classes header, indent, monospace, plain, small-margin examples this is a long section of text that will word wrap when displayed <description> this is a long section of text that will word wrap when displayed. </description> this is a long section of text that will not word wrap <description value="this is a long section of text that will not wor...
...an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales,...
...cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } 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 not be submitted. do not set the attribute to true, as this will sug...
...And 3 more matches
label - Archive of obsolete content
amples | 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 accesskey, control, crop, disabled, href, value properties accesskey, accessible
type, 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 accesskey
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.
...d, value style classes header, indent, monospace, plain, small-margin, text-link examples <label value="email address" control="email"/> <textbox id="email"/> attributes accesskey
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. control
type: id this attribute specifies the id of the element with which the label is associated. when the user clicks on the label, the associated element is given focus. 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. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } 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 not be submitted. do not set the attribute to true, as this will sug...
...And 3 more matches
progressmeter - Archive of obsolete content
progress of a lengthy operation. it is drawn as a bar that is filled as the operation completes. in addition, an indeterminate progressmeter may be created by setting the mode attribute to undetermined. this is used when the length of time to complete an operation is not known beforehand. more information is available in the xul tutorial. ...
...an undeterminedprogressmeter can be used when you don't and will typically be drawn as a spinning barber pole. ...
...="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){ document.getelementbyid('myprogress').mode = (state) ? 'undetermined' : 'determined'; } attributes max
type: integer the maximum value that progressmeter may have. the default value if not specified is 100 such that the value may be used as a percentage. mode
type: one of the values below a determinedprogressmeter is used in cases where you know how long an operation will take. an undeterminedprogressmeter can be used when you don't and will typically be drawn as a spinning barber pole. determined the progress meter uses its value attribute to determine the amount of the bar that is filled in. undetermined the progressmeter is indeterminate. ...
...And 3 more matches
resizer - Archive of obsolete content
ow resizing. if you place a custom resizing button inside the resizer, the 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. ...
...e 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. ...
...x="1"> <vbox width="2" style="background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <resizer dir="bottomleft" height="2" style="cursor: sw-resize;"/> </vbox> <vbox flex="1"> <resizer dir="top" height="2" style="background-color: grey; cursor: n-resize;"/> <browser flex="1" id="browser"
type="content-primary"/> <resizer dir="bottom" height="2" style="background-color: grey; cursor: s-resize;"/> </vbox> <vbox width="2" style="background-color: grey; overflow: hidden;"> <resizer dir="topright" height="2" style="cursor: ne-resize;"/> <resizer dir="right" flex="1" style="cursor: e-resize;"/> <resizer dir="bottomright" height="2" style="cursor: se-resize;"/> </vbox> </h...
...And 3 more matches
richlistitem - Archive of obsolete content
if this attribute is set, the element is disabled. ...
... 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. searchlabel
type: string text used for 'find-as-you-
type' (fayt) searching. in situations where the search text is ambiguous or missing, searchlabel can be used to give context to fayt. if searchlabel is not present, fayt falls 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 selected...
...ere the search text is ambiguous or missing, searchlabel can be used to give context to fayt. if searchlabel is not present, fayt falls 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 awa...
...And 3 more matches
toolbox - Archive of obsolete content
if a toolbar is placed inside a toolbox, a grippy is displayed on its left or upper edge. the user may click the grippy to collapse the toolbar. if multiple toolbars are placed in the same toolbox, they will all collapse into the same row. the firefox browser does not have grippies so toolbars cannot be collapsed and expanded. note: gecko 2.0 adds support for external toolbars. these are toolbars that are not children of a toolbox. ...
...lbars property. more information is available in the xul tutorial. if you'd like to detect when toolbars in a toolbox are changed, see toolbar customization events. ...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type: nsiaccessible returns the accessibility object for the element. customtoolbarcount firefox only
type: integer the number of custom toolbars currently within the too...
...And 3 more matches
where - Archive of obsolete content
ties | methods | related ] indicate a condition that must match for a template result to be used. if the condition is true, the corresponding action body is generated; otherwise the result is ignored and no content is generated. for more information, see where elements. attributes ignorecase, multiple, negate, rel, subject, value examples (example needed) attributes ignorecase
type: boolean set to true to indicate that the case does not matter when making comparisons. otherwise, the default value is false, to indicate that the value should match with the same case. multiple
type: boolean set to true to indicate that the value contains multiple values separated by commas. any of the values may match. otherwise, the entire value string is compared. negate ty...
... equals the subject and value must match exactly. ...
... equals the subject and value must match exactly. ...
...And 3 more matches
-ms-filter - Archive of obsolete content
nfused with the standard filter property, as the two are fundamentally incompatible with each other. important: as of windows internet explorer 9 this feature was deprecated. as of internet explorer 10 this feature was removed and should no longer be used. ...
... filterfrom.filters.item(0).transition=12; imagefrom.style.visibility = "hidden"; filterto.style.visibility = ""; filterfrom.filters.item(0).play(14); } </scri...
...filterfrom.filters.item(0).apply(); // 12 is the dissolve filter. filterfrom.filters.item(0).transition=12; imagefrom.style.visibility = "hidden"; filterto.style.visibility = ""; filterfrom.filters.item(0).play(14); } </script> </body> gradient progid:dximagetransform.microsoft.gradient( <properties> ) where <properties> = [ <enabled> | <endcolor> | <endcolorstr> | <gradient
type> | <startcolor> | <startcolorstr> ]# where <enabled> = 'enabled=' [ true | false ] <endcolor> = 'startcolor=' <color> <endcolorstr> = 'startcolorstr=' <color> <gradient
type> = 'gradient
type=' <integer> <startcolor> = 'startcolor=' <color> <startcolorstr> = 'startcolorstr=' <color> enabled default: true set to false to disable. endcolor the end color, supports only opaque colors in the #rr...
...And 3 more matches
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
es2018 have been released. this year, the es2019 specification will be released and es2020 is the current ecmascript draft specification. you can see the latest proposals on the tc39/ecma262 github repository. a channel for feedback on ecmascript standards is es-discuss. below is a list of features in es2016+ and what version of firefox they were implemented in. ...
...is year, the es2019 specification will be released and es2020 is the current ecmascript draft specification. you can see the latest proposals on the tc39/ecma262 github repository. a channel for feedback on ecmascript standards is es-discuss. below is a list of features in es2016+ and what version of firefox they were implemented in. ...
...019 specification will be released and es2020 is the current ecmascript draft specification. you can see the latest proposals on the tc39/ecma262 github repository. a channel for feedback on ecmascript standards is es-discuss. below is a list of features in es2016+ and what version of firefox they were implemented in. ...
...And 3 more matches
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
you're writing xhtml (as opposed to regular html) you should understand the fundamental differences between html 4 and xhtml. xhtml is xml, not html one of the primary misunderstandings about xhtml is that it is just another version of html. this misunderstanding is compounded by the fact that, prior to version 9, microsoft® internet explorer only supports xhtml if it is served with mime media
type text/html rather than the recommended application/xhtml+xml. when an xhtml page is served with mime
type text/html it is treated by all browsers as if it were nothing more than html. however when an xhtml page is served with mime
type text/xml or application/xhtml+xml, then it should be treated as an xml document which must conform to the strict rules for authoring and displaying xml. proper xh...
...ontent contained within comments (<!—— ... ——>) can be ignored. problems with inline style and script inline style and script tags can cause several different problems in xhtml when it is treated as xml rather than html. javascript contains characters which can not exist in xhtml javascript typically contains characters which can not exist in xhtml outside of cdata sections. <script
type="text/javascript"> var i = 0; while (++i < 10) { // ... } </script> note that this example is not well formed xhtml since the use of raw < is only allowed as a part of markup in xhtml or xml. use of comments inside inline style and script authors who are familiar with html commonly enclose the contents of inline style and script tags in comments in order to hide the contents of t...
... // ... } </script> note that this example is not well formed xhtml since the use of raw < is only allowed as a part of markup in xhtml or xml. use of comments inside inline style and script authors who are familiar with html commonly enclose the contents of inline style and script tags in comments in order to hide the contents of the tags from browsers which do not understand them. <style
type="text/css"> <!-- body {background-color: blue; color: yellow;} --> </style> <script
type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> this example illustrates that a conformant browser can ignore content inside of comments. in addition, this example shows how the differences between browsers...
...And 3 more matches
Describing microformats in JavaScript - Archive of obsolete content
ualgetter() method will be called to attempt to create the property if it doesn't exist. virtualgetter a function that is called to get a virtual property's value. this is only used if virtual is true. value the property's default value. subproperties it's possible for a property to itself include more properties; to do so, include them in a subproperties structure within the property. data
type the
type of data contained by the property. possible values are: datetime an iso date anyuri a uri email an email address tel a telephone number html html including tags float a floating-point number microformat a microformat microformat_property a specific property within the microformat specified by microformat. custom custom data a simple example the hcard microforma...
...a microformat microformat_property a specific property within the microformat specified by microformat. custom custom data a simple example the hcard microformat for defining contact information makes use of the adr microformat to define an address. ...
... a specific property within the microformat specified by microformat. custom custom data a simple example the hcard microformat for defining contact information makes use of the adr microformat to define an address. ...
...And 3 more matches
Building up a basic demo with the PlayCanvas engine - Game development
hould start off by: making sure you are using a modern browser with good webgl support, such as the latest firefox or chrome. creating a directory to store your experiments in. saving a copy of the latest playcanvas engine inside your directory. opening the playcanvas documentation in a separate tab — it is useful to refer to. html structure here's the html structure we will use. ...
... shapes instantly in a single line of code. there are cubes, spheres, cylinders and more complicated shapes available. drawing everything for given shape is taken care of by the engine, so we can focus on the high level coding. ...
...again, add the new code below your previous additions. ...
...And 3 more matches
Implementing controls using the Gamepad API - Game development
e firefox browser on mac os x. case study: hungry fridge the github game off ii competition ran in november 2013 and enclave games decided to take part in it. the theme for the competition was "change", so they submitted a game where you have to feed the hungry fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) a countdown changes the
type of food the fridge wants to eat every few seconds, so you have to be careful and act quickly. the second, hidden "change" implementation is the ability to transform the static fridge into a full-blown moving, shooting and eating machine. when you connect the controller, the game significantly changes (hungry fridge turns into the super turbo hungry fridge) and you're able to control the armored ...
...nd, hidden "change" implementation is the ability to transform the static fridge into a full-blown moving, shooting and eating machine. when you connect the controller, the game significantly changes (hungry fridge turns into the super turbo hungry fridge) and you're able to control the armored fridge using the gamepad api. you have to shoot down the food, but once again you also have to find the
type of food the fridge wants to eat at each point, or else you'll lose energy. the game encapsulates two totally different
types of "change" — good food vs. bad food, and mobile vs. desktop. demo the full version of the hungry fridge game was built first, and then to showcase the gamepad api in action and show the javascript source code, a simple demo was created. it's part of the gamepad api co...
...next, we set up two event listeners to get the data: window.addeventlistener("gamepadconnected", gamepadapi.connect); window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); due to security policy,...
...And 3 more matches
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 proto
type). 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.proto
type.myfunction(value) the method is installed on an object called myobject. ...
...ly
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.proto
type.myfunction(value) the method is installed on an object called myobject. the method is installed on the proto
type of myobject (thus it is an instance method) as opposed to being a static method. the name of the method is myfunction. the method accepts one parameter, which is called value 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. ...
... public static void main(string[] args) the public keyword is an access modifier and indicates that this method can be called by any object. ...
...And 3 more matches
WAI-ARIA basics - Learn web development
age to link to the navigation (or whatever else), for example: <a href="#hidden" class="hidden">skip to navigation</a> but this is still not very precise, and can only be used when the screenreader is reading from the top of the page. as another example, apps started to feature complex controls like date pickers for choosing dates, sliders for choosing values, etc. html5 provides special input
types to render such controls: <input
type="date"> <input
type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website designs. as a result, developers quite often rely on javascript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled...
...he cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly. however, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<input
type="search">). in addition, some older browsers (most notably ie8) don't recognise the semantics of the html5 elements. let's improve it by the use of some aria features. first, we'll add some role attributes to our html structure. you can try taking a copy of our original files (see index.html and style.css), or navigating to our website-aria-roles example (see it live), which has a structure like...
...u a bonus feature in this example — the <input> element has been given the attribute aria-label, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a <label> element. in cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design. <input
type="search" name="q" placeholder="search query" aria-label="search through site content"> now if we use voiceover to look at this example, we get some improvements: the search form is called out as a separate item, both when browsing through the page, and in the landmarks menu. the label text contained in the aria-label attribute is read out when the form input is highlighted. beyond this, th...
...And 3 more matches
Legacy layout methods - Learn web development
css grid layout. this lesson will explain how grid systems and grid frameworks based on floats and flexbox work. having studied grid layout you will probably be surprised how complicated this all seems! this knowledge will be helpful to you if you need to create fallback code for browsers that do not support newer methods, in addition to allowing you to work on existing projects which use these
types of systems. it is worth bearing in mind, as we explore these systems, that none of them actually create a grid in the way that css grid layout creates a grid. they work by giving items a size, and pushing them around to line them up in a way that looks like a grid. a two column layout let's start with the simplest possible example — a two column layout. you can follow along by creating a ne...
...fixed at this width and center itself in the viewport. by default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. if we want the two <div>s to be floated alongside one another, we need to set their widths to total 100% of the width of their parent element or smaller so they can fit alongside one another. ...
...in the viewport. by default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. if we want the two <div>s to be floated alongside one another, we need to set their widths to total 100% of the width of their parent element or smaller so they can fit alongside one another. ...
...And 3 more matches
Beginner's guide to media queries - Learn web development
ight be made responsive. prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand how to use media queries, and the most common approach for using them to create responsive designs. ...
...html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand how to use media queries, and the most common approach for using them to create responsive designs. media query basics the simplest media query syntax looks like this: @media media-
type and (media-feature-rule) { /* css rules go here */ } it consists of: a media
type, which tells the browser what kind of media this code is for (e.g. print, or screen). ...
...query syntax looks like this: @media media-
type and (media-feature-rule) { /* css rules go here */ } it consists of: a media
type, which tells the browser what kind of media this code is for (e.g. print, or screen). a media expression, which is a rule, or test that must be passed for the contained css to be applied. a set of css rules that will be applied if the test passes and the media
type is correct. media
types the possible
types of media you can specify are: all print screen speech the following media query will only set the body to 12pt if the page is printed. it will not apply when the page is loaded in a browser. @media print { body { font-size: 12pt; } } note: the media
type here is different from the so-called mime
type. note: there were a n...
...And 3 more matches
Getting started with CSS - Learn web development
html basics (study introduction to html.) objective: to understand the basics of linking a css document to an html file, and be able to do simple text formatting with css. starting with some html our starting point is an html document. you can copy the code from below if you want to work on your own computer. save the code below as index.html in a folder on your machine. <!doc
type html> <html lang="en"> <head> <meta charset="utf-8"> <title>getting started with css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text. in the text is a <span>span element</span> and also a <a href="http://example.com">link</a>.</p> <p>this is the second paragraph. it contains an <em>emphasized</em> element.</p> <ul> <li>i...
...s by adding a rule to styles.css. using your code editor add the following to your css file: h1 { color: red; } save your html and css files and reload the page in a web browser. the level one heading at the top of the document should now be red. if that happens, congratulations — you have successfully applied some css to an html document. if that doesn't happen, carefully check that you've
typed everything correctly. you can continue to work in styles.css locally, or you can use our interactive editor below to continue with this tutorial. the interactive editor acts as if the css in the first panel is linked to the html document, just as we have with our document above. styling html elements by making our heading red we have already demonstrated that we can target and style an html e...
...t in pretty much the same way. however, you will often want something other than the choice the browser has made. this can be done by simply choosing the html element that you want to change, and using a css rule to change the way it looks. a good example is our <ul>, an unordered list. it has list bullets, and if i decide i don't want those bullets i can remove them like so: li { list-style-
type: none; } try adding this to your css now. the list-style-
type property is a good property to look at on mdn to see which values are supported. take a look at the page for list-style-
type and you will find an interactive example at the top of the page to try some different values in, then all allowable values are detailed further down the page. looking at that page you will discover that in add...
...And 3 more matches
How to build custom form controls - Learn web development
before starting. the object returned by the queryselectorall() function is a nodelist rather than an array. this is important because array objects support the foreach function, but nodelist doesn't. because nodelist really looks like an array and because foreach is so convenient to use, we can easily add the support of foreach to nodelist in order to make our life easier, like so: nodelist.proto
type.foreach = function (callback) { array.proto
type.foreach.call(this, callback); } if you need to support legacy browsers, ensure the browsers support these features. if not, you can iterate through the list or you may need to use a library or pollyfill. building event callbacks the groundwork is done. we can now start to define all the functions that will be used each time the user interacts w...
... radio buttons. we could therefore reinvent this using radio buttons instead; let's look at this option. we can start with a completely semantic, accessible, unordered list of radio buttons with an associated <label>, labeling the entire group with a semantically appropriate <fieldset> and <legend> pair. ...
...ompletely semantic, accessible, unordered list of radio buttons with an associated <label>, labeling the entire group with a semantically appropriate <fieldset> and <legend> pair. ...
...And 3 more matches
Example - Learn web development
a basic payment form for the article how to structure an html form. ...
...ds are followed by <strong><abbr title="required">*</abbr></strong>.</p> <section> <h2>contact information</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <input
type="radio" id="title_1" name="title" value="a"> ace </label> </li> <li> <label for="title_2"> <input
type="radio" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input
type="radio" id="title_3" name="title" value="q"> queen </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></...
...alue="k" > king </label> </li> <li> <label for="title_3"> <input
type="radio" id="title_3" name="title" value="q"> queen </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></strong> </label> <input
type="text" id="name" name="username"> </p> <p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input
type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</abbr></strong> </label> <input
type="pass...
...And 3 more matches
Making decisions in your code — conditionals - Learn web development
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 "...
...wo choices, or outcomes — but what if we want more than two? there is a way to chain on extra choices/outcomes to your if...else — using else if. each extra choice requires an additional block to put in between if() { ... } and else { ... ...
...t! if you want to go outside, make sure to put some sunscreen on.'; } so for example, the first code block will only be run if choice === 'sunny' and temperature < 86 return true. let's look at a quick or example: if (icecreamvanoutside || housestatus === 'on fire') { console.log('you should leave the house quickly.'); } else { console.log('probably should just stay in then.'); } the last
type of logical operator, not, expressed by the ! operator, can be used to negate an expression. let's combine it with or in the above example: if (!(icecreamvanoutside || housestatus === 'on fire')) { console.log('probably should just stay in then.'); } else { console.log('you should leave the house quickly.'); } in this snippet, if the or statement returns true, the not operator will negate it...
...And 3 more matches
Fetching data from the server - Learn web development
us lines inside your updatedisplay() function: let request = new xmlhttprequest(); next, you need to use the open() method to specify what http request method to use to request the resource from the network, and what its url is. we'll just use the get method here and set the url as our url variable. ...
...st(); next, you need to use the open() method to specify what http request method to use to request the resource from the network, and what its url is. we'll just use the get method here and set the url as our url variable. add this below your previous line: request.open('get', url); next, we'll set the
type of response we are expecting — which is defined by the request's response
type property — as text. ...
...re and set the url as our url variable. add this below your previous line: request.open('get', url); next, we'll set the
type of response we are expecting — which is defined by the request's response
type property — as text. this isn't strictly necessary here — xhr returns text by default — but it is a good idea to get into the habit of setting this in case you want to fetch other
types of data in the future. add this next: request.response
type = 'text'; fetching a resource from the network is an asynchronous operation, meaning that you have to wait for that operation to complete (e.g., the resource is returned from the network) before you can do anything with that response, otherwise, an error will be thrown. xhr allows you to handle this using its onload event handle...
...And 3 more matches
Handling text — strings in JavaScript - Learn web development
there is very little difference between the two, and which you use is down to personal preference. you should choose one and stick to it, however; differently quoted code can be confusing, especially if you use two different quotes on the same string! the following will return an error: let badquotes = 'what on earth?"; the browser will think the string has not been closed because the other
type of quote you are not using to contain your strings can appear in the string. for example, both of these are okay: let sgldbl = 'would you eat a "fish supper"?'; let dblsgl = "i'm feeling blue."; sgldbl; dblsgl; however, you can't include the same quote mark inside the string if it's being used to contain them. the following will error, as it confuses the browser as to where the string ends: ...
...urn an error, but it works just fine. trying to represent a string as a number doesn't really make sense, but representing a number as a string does, so the browser rather cleverly converts the number to a string and concatenates the two strings. you can even do this with two numbers — you can force a number to become a string by wrapping it in quote marks. ...
...sense, but representing a number as a string does, so the browser rather cleverly converts the number to a string and concatenates the two strings. you can even do this with two numbers — you can force a number to become a string by wrapping it in quote marks. ...
...And 3 more matches
Storing the information you need — Variables - Learn web development
get down to the real basics, looking at how to work with the most basic building blocks of javascript — variables. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to gain familiarity with the basics of javascript variables. tools you need throughout this article, you'll be asked to
type in lines of code to test your understanding of the content. if you are using a desktop browser, the best place to
type your sample code is your browser's javascript console (see what are browser developer tools for more information on how to access this tool). what is a variable? a variable is a container for a value, like a number we might use in a sum, or a string that we might use as part of...
... go along. 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...
...ll get errors. note: you can find a fairly complete list of reserved keywords to avoid at lexical grammar — keywords. good name examples: age myage init initialcolor finaloutputvalue audio1 audio2 bad name examples: 1 a _12 myage myage var document skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman try creating a few more variables now, with the above guidance in mind. variable
types there are a few different
types of data we can store in variables. in this section we'll describe these in brief, then in future articles, you'll learn about them in more detail. so far we've looked at the first two, but there are others. numbers you can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floati...
...And 3 more matches
Object-oriented JavaScript for beginners - Learn web development
tructure and access; objects are also commonly used as data stores that can be easily sent across the network. defining an object template let's consider a simple program that displays information about the students and teachers at a school. here we'll look at oop theory in general, not in the context of any specific programming language. to start this off, we could return to our person object
type from our first objects article, which defines the generic data and functionality of a person. there are lots of things you could know about a person (their address, height, shoe size, dna profile, passport number, significant personality traits ...) , but in this case we are only interested in showing their name, age, gender, and interests, and we also want to be able to write a short introductio...
...ow create some actual people: when an object instance is created from a class, the class's constructor function is run to create it. this process of creating an object instance from a class is called instantiation — the object instance is instantiated from the class. specialist classes in this case we don't want generic people — we want teachers and students, which are both more specific
types of people. in oop, we can create new classes based on other classes — these new child classes can be made to inherit the data and code features of their parent class, so you can reuse functionality common to all the object
types rather than having to duplicate it. where functionality differs between classes, you can define specialized features directly on them as needed. this is really use...
... definition of that feature will be in a different namespace. for example, a student's greeting might be of the form "yo, i'm [firstname]" (e.g yo, i'm sam), whereas a teacher might use something more formal, such as "hello, my name is [prefix] [lastname], and i teach [subject]." (e.g hello, my name is mr griffiths, and i teach chemistry). note: the fancy word for the ability of multiple object
types to implement the same functionality is polymorphism. just in case you were wondering. you can now create object instances from your child classes. for example: in the rest of the article, we'll start to look at how oop theory can be put into practice in javascript. constructors and object instances javascript uses special functions called constructor functions to define and initialize obj...
...And 3 more matches
Object building practice - Learn web development
the x/y coordinate values when we animate the balls, to move them by this much on each frame. color — each ball gets a color. size — each ball gets a size — this is its radius, in pixels. this handles the properties, but what about the methods? we want to get our balls to actually do something in our program. drawing the ball first add the following draw() method to the ball()'s proto
type: ball.proto
type.draw = function() { ctx.beginpath(); ctx.fillstyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * math.pi); ctx.fill(); } using this function, we can tell the ball to draw itself onto the screen, by calling a series of members of the 2d canvas context we defined earlier (ctx). the context is like the paper, and now we want to command our pen to draw something on...
...g the path we started with beginpath(), and fill the area it takes up with the color we specified earlier in fillstyle." you can start testing your object out already. save the code so far, and load the html file in a browser. open the browser's javascript console, and then refresh the page so that the canvas size changes to the smaller visible viewport that remains when the console opens.
type in the following to create a new ball instance: let testball = new ball(50, 100, 4, 4, 'blue', 10); try calling its members: testball.x testball.size testball.color testball.draw() when you enter the last line, you should see the ball draw itself somewhere on the canvas. updating the ball's data we can draw the ball in position, but to actually move the ball, we need an update functi...
...ers: testball.x testball.size testball.color testball.draw() when you enter the last line, you should see the ball draw itself somewhere on the canvas. updating the ball's data we can draw the ball in position, but to actually move the ball, we need an update function of some kind. ...
...And 3 more matches
Ember interactivity: Events, classes and state - Learn web development
we can add the interactivity we need to make 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. creating 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 addeven...
...ner (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.onkeydown}} > 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 this keyword refers to the "context" or "scope" of the component. one component's this will be different from another component's this. we can define what is available inside this by ge...
...text" or "scope" of the component. one component's this will be different from another component's this. we can define what is available inside this by generating a component class to go along with your component. this is a vanilla javascript class and has no special meaning to ember, other than extending from the component super-class. to create a header class to go with your header component,
type this in to your terminal: ember generate component-class header this will create the following empty class file — todomvc/app/components/header.js: import component from '@glimmer/component'; export default class headercomponent extends component { } inside this file we will implement the event handler code. update the content to the following: import component from '@glimmer/component';...
...And 3 more matches
Vue conditional rendering: editing existing todos - Learn web development
an editing component we can start by creating a separate component to handle the editing functionality. in your components directory, create a new file called todoitemeditform.vue. ...
...mponents directory, create a new file called todoitemeditform.vue. ...
...it.prevent="onsubmit"> <div> <label class="edit-label">edit name for "{{label}}"</label> <input :id="id"
type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button
type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button
type="submit" class="btn btn__primary"> save <span class="visually-hidden">edit for {{label}}</span> </button> </div> </form> </template> <script> export default { props: { label: {
type: string, required: true }, id: {
type: string, required: true } }, data() { return { newlabel: this.label }; }, methods: { ...
...And 3 more matches
Chrome registration
f the chrome. mozilla locates and reads the root chrome.manifest file for extensions and themes. note: with gecko 1.9.2 and older, mozilla reads chrome/*.manifest files from applications. starting with gecko 2.0, the root chrome.manifest is the only manifest used; you can add manifest commands to that file to load secondary manifests. ...
...it will typically be a xul file, since xul is designed for describing the contents of windows and dialogs. ...
...it will typically be a xul file, since xul is designed for describing the contents of windows and dialogs. ...
...And 3 more matches
pymake
ease note that python 2.7 is strongly recommended. usage if you use mach for everything, you don't have to worry about gmake and pymake: mach will run whatever is best for the current machine. note: on windows, you must take special care to be able to switch back and forth between gmake and pymake on the same object dir. see gmake vs. pymake for more information. ...
...on 2.7 is strongly recommended. usage if you use mach for everything, you don't have to worry about gmake and pymake: mach will run whatever is best for the current machine. note: on windows, you must take special care to be able to switch back and forth between gmake and pymake on the same object dir. see gmake vs. pymake for more information. ...
...h will run whatever is best for the current machine. note: on windows, you must take special care to be able to switch back and forth between gmake and pymake on the same object dir. see gmake vs. pymake for more information. anywhere you would normally
type make, instead
type python /path/to/srcdir/build/pymake/make.py. for example: instead of make -f client.mk to start a build, you would
type python build/pymake/make.py -f client.mk. ...
...And 3 more matches
PromiseWorker.jsm
there is no xpcom access, similar to chromeworker. ...
...rker 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. } transferring special data from worker to main thread just as it was possi...
...owing this in live action can be found here: github :: promiseworker transfer arraybuffer - worker side rejecting the promise to reject the promise from the worker, simply throw. various error objects are supported; each one has its specific meaning; they're described below. supported built-in javascript error are following: evalerror internalerror rangeerror referenceerror 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 f...
...And 3 more matches
Localizing with Koala
http://bitbucket.org/mozillal10n/x-testing. if you're starting a new localization, you may not have a remote reposit...
...d) existing localizations: url: if you're editing an existing localization or you already have a repository set up (either on hg.mozilla.org or bitbucket),
type the url of the remote repository, e.g. http://bitbucket.org/mozillal10n/x-testing or http://hg.mozilla.org/releases/l10n-....9.2/x-testing. new localizations: url: if you already have a repository set up by l10n-drivers (on bitbucket),
type the url of the remote repository, e.g. http://bitbucket.org/mozillal10n/x-testing. if you're starting a new localization, you may not have a remote repository set up yet. ...
...illa.org/releases/l10n-....9.2/x-testing. new localizations: url: if you already have a repository set up by l10n-drivers (on bitbucket),
type the url of the remote repository, e.g. http://bitbucket.org/mozillal10n/x-testing. if you're starting a new localization, you may not have a remote repository set up yet. it is still recommended to use mercurial locally to version your local files. just
type a single dot (".") in the url field to enable mercurial support in koala. branch: default. revision: leave empty. user:
type your name and your e-mail address in the form: "firstname lastname <me@example.com>" (be sure to
type the wrapping quotes: "") note that you no longer have to edit the location now, it automatically fills in when you check the "mercurial" checkbox (e.g. "c:\mozilla\l10n\l...
...And 3 more matches
L20n HTML Bindings
nymore (you still can if you want to). all content lives in the localization resources. a safe subset of html elements (e.g. em, sup), attributes (e.g. title) and entities can be used in translations. in addition to the pre-defined whitelists, any element found in the original source html is allowed in the translation as well. ...
...butes (e.g. title) and entities can be used in translations. in addition to the pre-defined whitelists, any element found in the original source html is allowed in the translation as well. consider the following source html: <p data-l10n-id="save"> <input
type="submit"> <a href="/main" class="btn-cancel"></a> </p> assume the following malicious translation: <save """ <input value="save"
type="text"> or <a href="http://myevilwebsite.com" onclick="alert('pwnd!')" title="back to the homepage">cancel</a>. """> the result will be: <p data-l10n-id="back"> <input value="save"
type="submit"> or <a href="/main" class="btn-cancel" title="back to the homepage">cancel</a>. </p> the input element is not on the default whitelist but since it's present in the source html, i...
...similarly, href and onclick attributes are not allowed in translations and they are not inserted in the final dom. however, the title attribute is safe. ...
...And 3 more matches
Midas
nt selection. document.querycommandvalue determines the current value of the document, range, or current selection for the given command. supported commands command value description backcolor a color code. this command will set the background color of the document. bold if there is no selection, the insertion point will set bold for subsequently
typed characters. if there is a selection and all of the characters are already bold, the bold will be removed. otherwise, all selected characters will become bold. contentreadonly this command will make the editor readonly(true)or editable(false). anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page. copy ...
...sed in the "size" attribute of the font tag. forecolor a color code this command will set the text color of the selection or at the insertion point. formatblock h1, h2, h3, h4, h5, h6, p, div, address, blockquote (more?) the selection surrounded by the given block element. heading h1, h2, h3, h4, h5, h6 selected block will be formatted as the given
type of heading. hilitecolor a color code this command will set the hilite color of the selection or at the insertion point. it only works with stylewithcss enabled. increasefontsize this command will add a <big> tag around selection or at insertion point. indent indent the block where the caret is located. if the caret is inside a list, that item becomes...
...mbered item. insertunorderedlist depends on the selection. if the caret is not inside a non-li block, that block becomes the first li and ul. if the caret is inside a numbered item, the numbered item becomes a bulleted item. insertparagraph inserts a new paragraph. italic if there is no selection, the insertion point will set italic for subsequently
typed characters. if there is a selection and all of the characters are already italic, the italic will be removed. otherwise, all selected characters will become italic. justifycenter center-aligns the current block. justifyfull fully-justifies the current block. justifyleft left-aligns the current block. justifyright right align...
...And 3 more matches
Condition Variables
the association between a condition and a monitor is established when a condition variable is created, and the association persists for its life. ...
...s a thread to block until a specified condition variable receives notification of a change of state in its associated monitored data. other threads may notify the condition variable when changes occur. for an introduction to nspr thread synchronization, including locks and condition variables, see introduction to nspr. for reference information on nspr locks, see locks. ...
...le receives notification of a change of state in its associated monitored data. other threads may notify the condition variable when changes occur. for an introduction to nspr thread synchronization, including locks and condition variables, see introduction to nspr. for reference information on nspr locks, see locks. nspr provides a special
type, prmonitor, for use with java. ...
...And 3 more matches
Introduction to NSPR
r programming concepts and illustrates them with sample code. 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. nspr does not provide a platform for porting existing code. it must be used from the beginning of a software project. ...
...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. nspr does not provide a platform for porting existing code. it must be used from the beginning of a software project. ...
...cution environment that promotes the use of lightweight threads. each thread is an execution entity that is scheduled independently from other threads in the same process. a thread has a limited number of resources that it truly owns. these resources include the thread stack and the cpu register set (including pc). to an nspr client, a thread is represented by a pointer to an opaque structure of
type prthread. a thread is created by an explicit client request and remains a valid, independent execution entity until it returns from its root function or the process abnormally terminates. (prthread and functions for creating and manipulating threads are described in detail in threads.) nspr threads are lightweight in the sense that they are cheaper than full-blown processes, but they are not fre...
...And 3 more matches
PRIOMethods
the table of i/o methods used in a file descriptor. ...
... the table of i/o methods used in a file descriptor. ...
... close close file and destroy descriptor. read read up to the specified number of bytes into buffer. write write specified number of bytes from buffer. available determine number of bytes available for reading. available64 same as previous field, except 64-bit. fsync flush all in-memory buffer...
...And 3 more matches
NSPR API Reference
introduction to nspr nspr naming conventions nspr threads thread scheduling setting thread priorities preempting threads interrupting threads nspr thread synchronization locks and monitors condition variables nspr sample code nspr
types calling convention
types algebraic
types 8-, 16-, and 32-bit integer
types signed integers unsigned integers 64-bit integer
types floating-point integer
type native os integer
types miscellaneous
types size
type pointer difference
types boolean
types status
type for return values threads threading
types and constants threading functions creating, joining, and identifying threads controlling thread priorities contr...
... threading functions creating, joining, and identifying threads controlling thread priorities controlling per-thread private data interrupting and yielding setting global thread concurrency getting a thread's scope process initialization identity and versioning name and version constants initialization and cleanup module initialization locks lock
type lock functions condition variables condition variable
type condition variable functions monitors monitor
type monitor functions cached monitors cached monitor functions i/o
types directory
type file descriptor
types file info
types network address
types
types used with socket options functions
type used with memory-mapped i/o offset interpretation for seek functions ...
...apped i/o offset interpretation for seek functions i/o functions functions that operate on pathnames functions that act on file descriptors directory i/o functions socket manipulation functions converting between host and network addresses memory-mapped i/o functions anonymous pipe function polling functions pollable events manipulating layers network addresses network address
types and constants network address functions atomic operations pr_atomicincrement pr_atomicdecrement pr_atomicset interval timing interval time
type and constants interval functions date and time
types and constants time parameter callback functions functions memory management operations memory allocation functions memory allocation macros string operations pl_strlen ...
...And 3 more matches
NSS Certificate Download Specification
ersion, digestalgorithms, contentinfo, crls, and signerinfos fields are ignored. netscape certificate sequence: this is another pkcs#7 object format, and like the signeddata format, it allows multiple certificates to be imported together. this format is simpler than the pkcs#7 signeddata object format. it consists of a pkcs#7 contentinfo structure, wrapping a sequence of certificates. the content
type field oid must be netscape-cert-sequence (see object identifiers). the content field is the following asn.1 structure: certificatesequence ::= sequence of certificate see the section below on certificate chains for more information about how multiple certificates are handled. text formats any of the above binary formats can also be imported in text form. the text form begins with the fol...
...tificate chains several of the formats described above can contain several certificates. when nss's certificate decoder encounters one of these collections of multiple certificates they are handled in the following way: the first certificate is processed in a context specific manner, depending upon how it is being imported. for mozilla browsers, this handling will depend upon the mime content-
type that is used on the object being downloaded. for nss-based servers it will depend upon the options selected in the server's administration interface. subsequent certificates are all treated the same. if the certificates contain a basicconstraints certificate extension that indicates they are ca certificates, and do not already exist in the local certificate database, they are added as untrust...
...dicates they are ca certificates, and do not already exist in the local certificate database, they are added as untrusted cas. in this way they may be used for certificate chain validation, as long as there is a trusted ca somewhere along the chain. importing 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 no...
...And 3 more matches
NSS 3.35 release notes
ewer. nss 3.35 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_35_rtm/src/ new in nss 3.35 new functionality tls 1.3 support has been updated to draft -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 sslhandshake
type - 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. no...
...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. ...
... 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 a
type prefix to the database directory, provided at nss initialization time. without a prefix, the default database
type will be used (dbm in versions prior to 3.35, and sql in version 3.35 and later.) when using the sql
type (either explicitly, or because of the new default), with a database directory which already contains a dbm
type database, nss will automatically perform a one time migration of the information contained in the dbm files to the newer sql files. if a master password was set on the dbm databas...
...And 3 more matches
nss tech note4
} else { char *name = oiddata->desc; /* name of the extension */ ....... } /* critical attr...
... } else { char *name = oiddata->desc; /* name of the extension */ ....... } /* critical attribute of t...
... case ..... ...
...And 3 more matches
nss tech note7
rsa signing and encryption 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. ...
...ing and encryption 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. ...
...n'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: seckeypublickey: a public key, defined in "keythi.h". seckeyprivatekey: a private key, defined in "keythi.h". pk11symkey: 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 ...
...And 3 more matches
NSS Tools crlutil
sses certificate revocation list management. for information on security module database management, see using the security module database tool. for information on certificate and key database management, see using the certificate database tool. availability see the release notes for the platforms this tool is available on. syntax 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. 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 mod...
... -g create new certificate revocation list(crl). -d delete certificate revocation list from cert database. -i import a crl to the cert database -e erase all crls of specified
type from the cert database -l list 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. arguments ...
...fy, or validate. bracket the nickname string with quotation marks if it contains spaces. -o output-file specify the output file name for new crl. bracket the output-file string with quotation marks if it contains spaces. if this argument is not used the output destination defaults to standard output. -t crl-
type specify
type of crl. possible
types are: 0 - sec_krl_
type, 1 - sec_crl_
type. this option is obsolete -u url specify the url. crl generation script syntax: crl generation script file has the following syntax: line with comments should have <bold>#</bold> as a first sy...
...And 3 more matches
NSS tools : signtool
specify where the database files are located. -e extension tells signtool to sign only files with the given extension; for example, use -e".class" to sign only java class files. note that with netscape signing tool version 1.1 and later this option can appear multiple times on one command line, making it possible to specify multiple file
types or classes to include. -f commandfile specifies a text file containing netscape signing tool options and arguments in keyword=value format. all options and arguments can be expressed through this file. for more information about the syntax used with this file, see "tips and techniques". -i scriptname specifies the name of an instal...
...ption of -m that follows. the -i option provides a straightforward way to provide this information if you don't need to specify any metadata other than an installer script. -j directory specifies a special javascript directory. this option causes the specified directory to be signed and tags its entries as inline javascript. this special
type of entry does not have to appear in the jar file itself. instead, it is located in the html page containing the inline scripts. when you use signtool -v, these entries are displayed with the string not present. -k key ... directory specifies the nickname (key) of the certificate you want to sign with and signs the files in the specified ...
...he keys and certificate in the communicator key and certificate databases. if you are installing the keys and certificate in the communicator databases, you must exit communicator before using this option; otherwise, you risk corrupting the databases. in all cases, the certificate is also output to a file named x509.cacert, which has the mime-
type application/x-x509-ca-cert. unlike certificates normally used to sign finished code to be distributed over a network, a test certificate created with -g is not signed by a recognized certificate authority. instead, it is self-signed. in addition, a single test signing certificate functions as both an object-signing certificate and a ca. when ...
...And 3 more matches
Hacking Tips
eses, the jsscript pointer and the jsbytecode pointer (pc) executed. ...
...ter (pc) executed. ...
...s::reportoverrecursed (gdb) r js> function f(i) { if (i % 2) f(i + 1); else f(i + 3); } js> f(0) breakpoint 1, js::reportoverrecursed (maybecx=0xfdca70) at /home/nicolas/mozilla/ionmonkey/js/src/jscntxt.cpp:495 495 if (maybecx) (gdb) call js::dumpbacktrace(maybecx) #0 (nil)
typein:2 (0x7fffef1231c0 @ 0) #1 (nil)
typein:2 (0x7fffef1231c0 @ 24) #2 (nil)
typein:3 (0x7fffef1231c0 @ 47) #3 (nil)
typein:2 (0x7fffef1231c0 @ 24) #4 (nil)
typein:3 (0x7fffef1231c0 @ 47) […] #25157 0x7fffefbbc250
typein:2 (0x7fffef1231c0 @ 24) #25158 0x7fffefbbc1c8
typein:3 (0x7fffef1231c0 @ 47) #25159 0x7fffefbbc140
typein:2 (0x7fffef1231c0 @ 24) #25160 0x7fffefbbc0b8
typein:3 (0x7fffef1231c0 @ 47) #25161 0x7fffefbbc030
typein:5 (0x7fffef123...
...And 3 more matches
Exact Stack Rooting
a gcpointer stored as a private, please file a bug. the private field is frequently used to store things that are not gcpointers, so the gc cannot automatically handle this slot. this means it must be manually traced by the object's owner: this is both fragile and more expensive than using an extra reserved slot, or even just putting a new property on the object. class fooclass = { "fooproto
type", /* name */ jsclass_has_private | jsclass_has_reserved_slots(1), /* flags */ js_propertystub, /* addproperty */ js_propertystub, /* delproperty */ ... etc ... }; rootedobject obj(cx, newobject(cx, &fooclass, nullptr(), nullptr(), &obj)); rootedvalue v(cx, object_to_value(othergcthing)); jsobject::setreservedslot(obj, 0, v); storing a gcpointer on the ch...
...tset. to that end, we have a special "rooting" mechanism for stack pointers that is very efficiently able to add and remove gcpointers to the rootedset. the downside of this efficiency is that 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, spidermonkey 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...
...sh at run time. there is also a static constructor method frommarkedlocation() that creates a handle from an arbitrary location. this is used to make handles for things like scope chain objects, which aren't explicitly rooted themselves, but are always reachable from the implicit stack roots. every use of these should be commented to explain why they are guaranteed to be rooted. js::handle<t>
typedef js::handle<t> js::handlet; -> handleobject, handlestring, handlescript, etc. any single gcthing is likely to get passed through a fairly deep call-stack before getting used. even though creating a new js::rootedt is cheap, it is silly to repeat this work for every new call frame. to solve this, we use the standard "handle" approach. a js::handlet is a pointer to a js::rootedt. a js::rootedt ...
...And 3 more matches
JSClass.flags
its value is the logical or of zero or more of the following constants: flag meaning jsclass_has_private this class uses private 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. ...
... jsclass_is_domjsclass added in spidermonkey 17 objects are dom. mxr id search for jsclass_is_domjsclass jsclass_emulates_undefined added in spidermonkey 24 causes objects which have this class to emulate undefined in certain circumstances. ...
... in spidermonkey 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. ...
...And 3 more matches
JSNewEnumerateOp
obj js::handleobject the object to be enumerated. properties js::autoidvector & out parameter. id array to populate with all property keys. ...
... obj js::handleobject the object to be enumerated. properties js::autoidvector & out parameter. id array to populate with all property keys. ...
... obj js::handleobject the object to be enumerated. properties js::autoidvector & out parameter. id array to populate with all property keys. ...
...And 3 more matches
JS_ConstructObject
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 spidermonkey releases. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. clasp jsclass * pointer to the class to use for the new object. if this is null, an ordinary javascript object is created. ...
... 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 jsclass * pointer to the class to use for the new object. if this is null, an ordinary javascript object is created. proto jsobject * the object to serve as the new object's proto
type, or null. parent jsobject * the object to serve as the new object's parent, or null. argc unsigned int (only in js_constructobjectwitharguments) the number of arguments to pass to the constructor. argv jsval * (only in js_constructobjectwitharguments) the array of arguments to pass to the constructor. this may be null if argc is zero. otherwise, the fi...
...And 3 more matches
JS_GetLocaleCallbacks
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. callbacks jslocalecallbacks * pointer to a jslocalecallbacks struct. ...
...aller must be in a request on this jscontext. callbacks jslocalecallbacks * pointer to a jslocalecallbacks struct. ...
...slocalecallbacks struct. ...
...And 3 more matches
Animated PNG graphics
encountered decoders should discard all subsequent frames, stop the animation, and revert to displaying the default image. a decoder which detects an error before the animation has started should display the default image. an error message may be displayed to the user if appropriate. structure an apng stream is a normal png stream as defined in the png specification, with three additional chunk
types describing the animation and providing additional frame data. to be recognized as an apng, an 'actl' chunk must appear in the stream before any 'idat' chunks. the 'actl' structure is described below. conceptually, at the beginning of each play the output buffer must be completely initialized to a fully transparent black rectangle, with width and height dimensions from the 'ihdr' chunk. the de...
...hdr' chunk, regardless of whether the default image is part of the animation. the default image should be appropriately padded with fully transparent pixels if extra space will be needed for later frames. each frame is identical for each play, therefore it is safe for applications to cache the frames. chunk sequence numbers the 'fctl' and 'fdat' chunks have a 4 byte sequence number. both chunk
types share the sequence. the purpose of this number is to detect (and optionally correct) sequence errors in an animated png, since the png specification does not impose ordering restrictions on ancillary chunks. the first 'fctl' chunk must contain sequence number 0, and the sequence numbers in the remaining 'fctl' and 'fdat' chunks must be in order, with no gaps or duplicates. the tables below ill...
...ers must treat out-of-order apng chunks as an error. apng-aware png editors should restore them to correct order using the sequence numbers. 'actl': the animation control chunk the 'actl' chunk is an ancillary chunk as defined in the png specification. it must appear before the first 'idat' chunk within a valid png stream. the 'actl' chunk contains: byte offset field name field
type description 0 num_frames unsigned int the number of frames in the apng. 4 num_plays unsigned int the number of times to loop this apng. 0 indicates infinite looping. num_frames indicates the total number of frames in the animation. this must equal the number of 'fctl' chunks. 0 is not a valid value. 1 is a valid value for a single-frame apng. if this ...
...And 3 more matches
XPCOM changes in Gecko 2.0
omutils.jsm, some of this was hidden from you, but it was still there. starting in gecko 2, however, components are registered using manifest files, similarly to how chrome is registered. in fact, the same chrome manifest file will be used to register components. all existing xpcom components will need to be updated to support this. however, it's very easy to do, and you can actually support both
types of registration for backward compatibility. component manifests all component registration is now handled through manifest files. for extensions, this is the same chrome.manifest currently used to register chrome. xpt files the path of any xpt files must be listed explicitly in a manifest using an interfaces directive: interfaces components/mycomponent.xpt javascript components the registration ...
...2-3d4bde0f7ef8} category profile-after-change mycomponent @foobar/mycomponent;1 the javascript code no longer exports a nsgetmodule() function. it now must export a nsgetfactory() function, which accepts a class id (cid) as a parameter. ...
... function mycomponent() { } mycomponent.proto
type = { // this must match whatever is in chrome.manifest! classid: components.id("{e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8}"), queryinterface: xpcomutils.generateqi([components.interfaces.nsimycomponent]), /* nsimycomponent implementation goes here */ ... }; // the following line is what xpcom uses to create components. each component proto
type // 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, seamonkey 2.1). * xpcomuti...
...And 3 more matches
XPCOM hashtable guide
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 data
type 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 the constant time can be larger than an array lookup sorting: sorted: stor...
...here items will be frequently added or removed. hashtables should not be used for sets that need to be sorted; very small datasets (less than 12-16 items); data that does not need random access. in these situations, an array, a linked-list, or various tree data structures are more efficient. which hashtable should i use? the appropriate hashtable class to use depends solely on the data
type. ...
...hould not be used for sets that need to be sorted; very small datasets (less than 12-16 items); data that does not need random access. in these situations, an array, a linked-list, or various tree data structures are more efficient. which hashtable should i use? the appropriate hashtable class to use depends solely on the data
type. the template specialization to use depends on the data
type and the key
type. ...
...And 3 more matches
XPCOM Stream Guide
ugh streams. on the other hand, we use streams to access files within a zip archive, to store and provide data coming from websites, even to talk to other programs on the same computer through "pipes" (more on that later). we even have streams that take input from other streams and transform the data within them to something more useful. ...
...ovide data coming from websites, even to talk to other programs on the same computer through "pipes" (more on that later). we even have streams that take input from other streams and transform the data within them to something more useful. primitive streams there are streams for several different
types of data storage. each of these implements nsiinputstream. ...
...inputstream stream.setdata(data, length); file nsfileinputstream @mozilla.org/network/file-input-stream;1 nsifileinputstream stream.init(file, ioflags, perm, behaviorflags); zip nsjarinputstream n/a nsiinputstream zipreader.getinputstream(zipentry); similarly, each of these implements nsioutputstream. ...
...And 3 more matches
Monitoring HTTP activity
within your code. this is very simple, requiring you to implement a single method, nsihttpactivityobserver.observeactivity(), which gets called each time an action of interest takes place on the http channel. ...
... this is very simple, requiring you to implement a single method, nsihttpactivityobserver.observeactivity(), which gets called each time an action of interest takes place on the http channel. ...
...vityobserver.observeactivity(), which gets called each time an action of interest takes place on the http channel. ...
...And 3 more matches
amIWebInstaller
toolkit/mozapps/extensions/amiwebinstaller.idlscriptable this interface is used to allow web pages to start installing add-ons. ...
...string amime
type, in nsidomwindow awindow, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, [optional] in amiinstallcallback acallback, [optional] in pruint32 ainstallcount); boolean isinstallenabled(in astring amime
type, in nsiuri areferer); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow. methods installaddonsfromwebpage() installs an array of add-ons at the request of a webpage. ...
... amiinstallcallback acallback, [optional] in pruint32 ainstallcount); boolean isinstallenabled(in astring amime
type, in nsiuri areferer); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow. methods installaddonsfromwebpage() installs an array of add-ons at the request of a webpage. ...
...And 3 more matches
nsIContentSecurityPolicy
erits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean permitsancestry(in nsidocshell docshell); void refinepolicy(in astring policystring, in nsiuri selfuri); void scanrequestdata(in nsihttpchannel achannel); void sendreports(in astring blockeduri, in astring violateddirective); short shouldload(in unsigned long acontent
type, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amime
typeguess, in nsisupports aextra); short shouldprocess(in unsigned long acontent
type, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amime
type, in nsisupports aextra); attributes attribute
type description allowseval boolean whether this policy al...
.... violateddirective the directive that was violated. shouldload() delegate method called by the service when sub-elements of the protected document are being loaded. given a bit of information about the request, decides whether or not the policy is satisfied. calls to this may trigger violation reports when queried, so this value should not be cached. short shouldload( in unsigned long acontent
type, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amime
typeguess, in nsisupports aextra ); parameters acontent
type acontentlocation arequestorigin acontext amime
typeguess aextra return value shouldprocess() delegate method called by the service when sub-elements of the protected document are being processed. given a bit of information ...
..., in nsisupports aextra ); parameters acontent
type acontentlocation arequestorigin acontext amime
typeguess aextra return value shouldprocess() delegate method called by the service when sub-elements of the protected document are being processed. given a bit of information about the request, decides whether or not the policy is satisfied. ...
...And 3 more matches
nsIEditor
ection(in boolean should); inline spellchecking methods nsiinlinespellchecker getinlinespellchecker(in boolean autocreate); void syncrealtimespell(); void setspellcheckuseroverride(in boolean enable); clipboard methods void cut(); boolean cancut(); void copy(); boolean cancopy(); void paste(in long aselection
type); boolean canpaste(in long aselection
type); selection methods void selectall(); void beginningofdocument(); void endofdocument(); drag/drop methods boolean candrag(in nsidomevent aevent); void dodrag(in nsidomevent aevent); void insertfromdrop(in nsidomevent aevent); node manipulation methods void s...
...xistingrightnode, in long offset, out nsidomnode newleftnode); void joinnodes(in nsidomnode leftnode, in nsidomnode rightnode, in nsidomnode parent); void deletenode(in nsidomnode child); void marknodedirty(in nsidomnode node); direction controller void switchtextdirection(); output methods astring outputtostring(in astring format
type, in unsigned long flags); example: // flags are declared in base/public/nsidocumentencoder.idl // outputselectiononly = 1, outputformatted = 2, // outputraw = 4, outputbodyonly = 8, // outputpreformatted = 16, outputwrap = 32, // outputformatflowed = 64, outputabsolutelinks = 258, // outputencodew3centities = 256, outputcrlinebreak = 512, // outpu...
...end tag (</html>). // tag name are in lower case with <br>. ...
...And 3 more matches
nsIEditorMailSupport
nsisupportsarray getembeddedobjects(); parameters none. return value an nsisupportsarray containing the img and object tags of the current document. insertascitedquotation() insert a string a...
...nsisupportsarray getembeddedobjects(); parameters none. return value an nsisupportsarray containing the img and object tags of the current document. insertascitedquotation() insert a string as quoted text (whose representation is dependent ...
...ap(in boolean arespectnewlines); void stripcites(); methods getembeddedobjects() get a list of img and object tags in the current document. nsisupportsarray getembeddedobjects(); parameters none. return value an nsisupportsarray containing the img and object tags of the current document. insertascitedquotation() insert a string as quoted text (whose representation is dependent on the editor
type), replacing the selected text (if any), including, if possible, a "cite" attribute. nsidomnode insertascitedquotation( in astring aquotedtext, in astring acitation, in boolean ainserthtml ); parameters aquotedtext the actual text to be quoted. acitation the "mid" url of the source message. ainserthtml insert as html? (vs plaintext) return value the nsidomnode which was inserted. insertas...
...And 3 more matches
nsIFeedTextConstruct
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) implemented by: @mozilla.org/feed-textconstruct;1, but users usually don't need to create instances of this directly. ...
...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. ...
... methods createdocumentfragment() creates a new document fragment on a given dom element, containing the text and (if the text construct contains html or xhtml) its markup. ...
...And 3 more matches
nsIHttpServer
eturn { get objectname () { return "webserver"; }, /** * @param integer|string port port or "host:port" * @param object opt optional options. ...
...ot supported) * @param function callback optional callback */ listen: function(port, opt, callback) { if (arguments.length == 2 && "function" ==
typeof opt) { callback = opt; } if (callback) { this.registerprefixhandler("/", callback); } let host = "localhost"; if (
typeof port === "string" && port.indexof(':') != -1){ [host, port] = port.split(':'); port = parseint(port); server.identity.add('http', host, port); } server.wrappedjsobject._start(port, host); return true; }, registerfile: function(path, filepath) { var file = components.classes['@mozilla...
...if it doesn't * match the field-value production in rfc 2616 * @note * no syntax checking is ...
...And 3 more matches
nsIMsgIncomingServer
biffminutes long biffstate unsigned long canbedefaultserver boolean read only. cancompactfoldersonserver boolean read only. cancreatefoldersonserver boolean candelete boolean can this server be removed from the account manager? for instance, local mail is not removable, but an imported folder is. canemptytrashonexit boolea...
...s server be removed from the account manager? for instance, local mail is not removable, but an imported folder is. canemptytrashonexit boolean read only. canfilemessagesonserver boolean canhavefilters boolean read only. cansearchmessages boolean read only. canundodeleteonserver boolean read only. constructedprettyname astring helper function to construct the pretty name in a server
type specific way - for example, mail for foo@test.com, news on news.mozilla.org. read only. defaultcopiesandfoldersprefstoserver boolean if the server supports fcc/sent/etc, default prefs can point to the server. otherwise, copies and folders prefs should point to local folders. by default this value is set to true via global pref 'allows_specialfolders_usage' (mailnews.js). for nntp, the value is...
... 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 localstore
type 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 passwordpromptrequired boolean if the password for the server is available either via authentication in the current session or from password manager sto...
...And 3 more matches
nsINavHistoryObserver
methods onbeforedeleteuri() obsolete since gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) note: this method was removed in gecko 21.0 as part of bug 826409. the specified page and ...
... this date. aguid the unique id associated with the page. onendupdatebatch() called once a batch of updates is completed. once this has been called, you can perform processing, user interface updates, and so forth. this is called sometime after onbeginupdatebatch(). void onendupdatebatch(); parameters none. onpagechanged() some attribute on the specified page has changed. note that for
typed and hidden pages, the page might not actually have been added yet. this needs 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. onpageexpir...
...ther case it will always be an empty string. void ontitlechanged( in nsiuri auri, in astring apagetitle ); parameters auri the uri of the page whose title changed. apagetitle the new title of the page. onvisit() called when a resource is visited. this is called the first time a resource (page, image, and so on.) is seen as well as every subsequent time. normally, transition
types of transition_embed (corresponding to images in a page, for example) are not displayed in history results (unless includehidden is set). many observers can ignore _embed notifications (which will comprise the majority of visit notifications) to save work. void onvisit( in nsiuri auri, in long long avisitid, in prtime atime, in long long asessionid, in long long areferringid, in unsig...
...And 3 more matches
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 / seamonkey 2.1) attributes attribute
type description accesscount unsigned long total number of times the uri has been accessed. for hosts, this is the total number of the children under it, rather than the total number of times the host has been accessed (getting that information would require an additional query, so for performance reasons that information isn't given by default). read only. bookmarkindex long when this item is in a bookmark folder (its ...
...long total number of times the uri has been accessed. for hosts, this is the total number of the children under it, rather than the total number of times the host has been accessed (getting that information would require an additional query, so for performance reasons that information isn't given by default). read only. bookmarkindex long when this item is in a bookmark folder (its parent is of
type folder), this is the index into that folder at which this node resides. these indices start at 0 and increase in the order at which the nodes appear in the bookmark folder. for items that are not in a bookmark folder, this value is -1. read only. dateadded prtime if the node is an item (bookmark, folder, or separator), this value is the time at which the item was created. for other nodes, this ...
...rwise this is an empty string. read only. time prtime the time at which the user accessed the page. read only. for visits, this is the exact time at which the page visit occurred. for uris, this is the most recent time at which the uri was visited. even if you ask for all uris for a given date range long ago, this might contain today's date if the uri was visited today. for hosts, or other node
types with children, this is the most recent access time for any of the children. for days, this is midnight on the morning of the day in question in utc. title autf8string title of the web page or of the node's grouping (day, host, folder, and so on.). read only.
type unsigned long identifies the
type of node. you can use queryinterface to access the corresponding specialized result node interfa...
...And 3 more matches
Component; nsIPrefBranch
ef(in string aprefname,requires gecko 54 [optional] in string adefaultvalue); requires gecko 58 utf8tring getstringpref(in string aprefname, [optional] in utf8string adefaultvalue); void getchildlist(in string astartingat, [optional] out unsigned long acount, [array, size_is(acount), retval] out string achildarray); void getcomplexvalue(in string aprefname, in nsiidref a
type, [iid_is(a
type), retval] out nsqiresult avalue); long getintpref(in string aprefname,requires gecko 54 [optional] in long adefaultvalue); long getpref
type(in string aprefname); void lockpref(in string aprefname); boolean prefhasuservalue(in string aprefname); boolean prefislocked(in string aprefname); void removeobserver(in string adomain, in ...
... constants constant value description pref_invalid ...
... void setcharpref(in string aprefname, in string avalue); requires gecko 58 void setstringpref(in string aprefname, in utf8string avalue); void setcomplexvalue(in string aprefname, in nsiidref a
type, in nsisupports avalue); void setintpref(in string aprefname, in long avalue); void unlockpref(in string aprefname); attributes attribute
type description root string called to get the root on which this branch is based, such as "browser.startup." read only. constants constant value description pref_invalid 0 long pref_string 32 long data
type. pref_int 64 long data
type. pref_bool 128 long data
type. methods addobserver() adds ...
...And 3 more matches
nsIProtocolProxyService
zilla.org/network/protocol-proxy-service;1"] .getservice(components.interfaces.nsiprotocolproxyservice); method overview deprecated since gecko 18 nsiproxyinfo resolve(in nsiuri auri, in unsigned long aflags); nsicancelable asyncresolve(in nsiuri auri, in unsigned long aflags,in nsiprotocolproxycallback acallback); nsiproxyinfo newproxyinfo(in acstring a
type, in autf8string ahost,in long aport, in unsigned long aflags, in unsigned long afailovertimeout, in nsiproxyinfo afailoverproxy); nsiproxyinfo getfailoverforproxy(in nsiproxyinfo aproxyinfo, in nsiuri auri, in nsresult areason); void registerfilter(in nsiprotocolproxyfilter afilter, in unsigned long aposition); void unregisterfilter(in nsiprotocolproxyfilter afilter); ...
..., getfailoverforproxy() may be called to determine the correct secondary proxy to be used. if the protocol handler for the given uri supports nsiproxiedprotocolhandler, then the nsiproxyinfo instance returned from resolve may be passed to the nsiproxiedprotocolhandler.newproxiedchannel() method to create a nsichannel to the given uri that uses the specified proxy. however, if the nsiproxyinfo
type is "http", then it means that the given uri should be loaded using the http protocol handler, which also supports nsiproxiedprotocolhandler. nsiproxyinfo resolve( in nsiuri auri, in unsigned long aflags ); parameters auri the uri to test. aflags a bit-wise combination of the resolve_ flags defined above. pass 0 to specify the default behavior. any additional bits that do not corr...
...lags a bit-wise combination of the resolve_ flags defined above. pass 0 to specify the default behavior. any additional bits that do not correspond to a resolve_ flag are reserved for future use. return value an nsiproxyinfo object or null for a direct connection. note: if pac is configured, and the pac file has not yet been loaded, then this method will return a nsiproxyinfo instance with a
type of "unknown" to indicate to the consumer that asyncresolve should be used to wait for the pac file to finish loading. otherwise, the consumer may choose to treat the result as
type "direct" if desired. see nsiproxiedprotocolhandler.newproxiedchannel(). asyncresolve() this method is an asychronous version of the resolve method. unlike resolve, this method is guaranteed not to block the calling ...
...And 3 more matches
nsISelectionPrivate
de, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results); native code only! void getrangesforintervalcomarray(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results); native code only! obsolete since gecko 12.0 long gettableselection
type(in nsidomrange range); void removeselectionlistener(in nsiselectionlistener listenertoremove); void scrollintoview(in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent); void setancestorlimiter(in nsicontent acontent); native code only! void setpresshell(in nsipresshell apresshell); native code only! void settextrangest...
... endplaceholdertransaction will give rise to reflow/refreshing view/scroll, and call times of nstextframe::getpointfromoffset whose return value is t...
... endplaceholdertransaction will give rise to reflow/refreshing view/scroll, and call times of nstextframe::getpointfromoffset whose return value is to be cached. see bug 35296 and bug 199412 native code only! interlineposition b...
...And 3 more matches
nsISocketTransport
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 only! unsigned long gettimeout(in unsigned long a
type); boolean isalive(); void settimeout(in unsigned long a
type, in unsigned long avalue); attributes attribute
type description connectionflags unsigned long a bitmask that can be used to modify underlying behavior of the socket connection. see connection flag constants for more details. ...
...e: this attribute cannot be changed once a stream has been opened. securityinfo nsisupports security info object returned from the secure socket provider. this object supports nsisslsocketcontrol, nsitransportsecurityinfo, and possibly other interfaces. this attribute is only available once the socket is connected. read only. constants timeout
type this constants are used by gettransport() and settransport() to specify socket timeouts constant value description timeout_connect 0 connecting timeout. timeout_read_write 1 read and write timeouts. nsitransporteventsink status codes note: although these constants look like xpcom error codes and are p...
...return value an prnetaddr containing the resolved ip address. native code only!getselfaddr returns the ip address of the initiating end. this attribute is defined only once a connection has been established. prnetaddr getselfaddr(); parameters none. return value an prnetaddr containing the resolved ip address. gettimeout() retrieves a socket timeout. unsigned long gettimeout( in unsigned long a
type ); parameters a
type the timeout
type, who's associated value should be retrieved. can be one of the constants timeout_connect or timeout_read_write. return value returns the timeout in seconds for the given
type. a value of pr_uint32_max is equivalent to no timeout. isalive() test if this socket transport is (still) connected. boolean isalive(); parameters none. return value re...
...And 3 more matches
nsITelemetry
this is true if the fhr data reporting service or the self-support service is enabled. canrecordextended boolean a flag indicating if telemetry is allowed to record extended data. returns false if the user has not opted into "extended telemetry" on the release chan...
... indicate whether telemetry will send any data. that is governed by user preference and other mechanisms. histogramsnapshots jsval an object containing a snapshot from all of the currently registered histograms. ...
... histogram_linear 1 buckets increase linearly. histogram_boolean 2 for storing 0/1 values. histogram_flag 3 for storing a single value; its count is always == 1. ...
...And 3 more matches
nsIWebProgressListener
to an end consumer. this flag indicates that the request has been targeted, and that the user may start seeing content corresponding to the request. state_negotiating 0x00000008 this flag is not used. state_stop 0x00000010 this flag indicates the completion of a request. the astatus parameter to onstatechange() indicates the final status of the request. state
type flags these flags further describe the entity for which the state transition is occurring. these flags are not mutually exclusive (that is an onstatechange() event may indicate some combination of these flags). constant value description state_is_request 0x00010000 this flag indicates that the state transition is for a request, which includes but is not limited to ...
...n is occurring. these flags are not mutually exclusive (that is an onstatechange() event may indicate some combination of these flags). constant value description state_is_request 0x00010000 this flag indicates that the state transition is for a request, which includes but is not limited to document requests. (see below for a description of document requests.) other
types of requests, such as requests for inline content (for example images and stylesheets) are considered normal requests. state_is_document 0x00020000 this flag indicates that the state transition is for a document request. this flag is set in addition to state_is_request. a document request supports the nsichannel interface and its loadflags attribute includes the nsichannel::lo...
...sponding to a document request is available via the domwindow attribute of onstatechange()'s awebprogress parameter. state_is_network 0x00040000 this flag indicates that the state transition corresponds to the start or stop of activity in the indicated nsiwebprogress instance. this flag is accompanied by either state_start or state_stop, and it may be combined with other state
type flags. unlike state_is_window, this flag is only set when activity within the nsiwebprogress instance being observed starts or stops. if activity only occurs in a child nsiwebprogress instance, then this flag will be set to indicate the start and stop of that activity. for example, in the case of navigation within a single frame of a html frameset, a nsiwebprogresslistener instance attac...
...And 3 more matches
XPCOM reference
s_addrefmacrons_assertionmacrons_ensure_arg_pointermacrons_errorthrows a assertion (ns_assertion) with the text "error: (error text)", so writes this text to console (stderr) and to debug logs (nspr logging). this macro is meant for critical errors; like assertions, ns_errors should not be reachable.ns_if_addrefmacrons_if_releasemacrons_releasemacrons_warningmacronsgetmoduleprocthis function proto
type provides the xpcom entry-point into a module.nsiabcard/thunderbird3the nsiabcard interface is used to represent and manipulate cards in the address book. in a big change from the original nsiabcard, properties are now stored in a hash table instead of as attributes on the interface, allowing it to be more flexible.nsicookie2 mozilla 1 8 branchnsimsgsearchvaluedefined in comm-central/ mailnews/ ba...
...ies are now stored in a hash table instead of as attributes on the interface, allowing it to be more flexible.nsicookie2 mozilla 1 8 branchnsimsgsearchvaluedefined in comm-central/ mailnews/ base/ search/ public/ nsimsgsearchvalue.idl nsmsgmessageflagsthe nsmsgmessageflags interface describes possible flags for messages. equivalent flags are also defined in nsmsgmessageflags.h. nsmsgnavigation
typethe nsmsgnavigation
type interface contains constants used for message navigation in thunderbird. for example to move forward a message, you would call:nsmsgsearchopvaluedefined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl nsmsgviewcommandcheckstatethe nsmsgviewcommandcheckstate interface contains constants used for command status in thunderbird. it is (as far as i can tell)...
...r message navigation in thunderbird. for example to move forward a message, you would call:nsmsgsearchopvaluedefined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl nsmsgviewcommandcheckstatethe nsmsgviewcommandcheckstate interface contains constants used for command status in thunderbird. it is (as far as i can tell) not currently used anywhere in thunderbird.nsmsgviewcommand
typethe nsmsgviewcommand
type interface contains constants used for commands in thunderbird. for example to mark a message read, you would call:nsmsgviewflags
typethe nsmsgviewflags
type interface contains constants used for view flags in thunderbird. this interface isn't ever implemented. it is only used to store constants. for example, the 'unread only' view would use the flag:nsmsgviewsortorderthe nsm...
...And 3 more matches
Int64
you use the int64 object to create and manipulate 64-bit signed integers. note: it's important to note that the 64-bit integer objects created by int64 are not int64 objects; rather, they're opaque objects whose values you manipulate through the other methods on the int64 object. see 64-bit integers for details. syntax creates and returns a new 64-bit signed integer. ...
...onsist of an optional minus sign, followed by either a decimal number or "0x" or "0x" followed by a hexadecimal number. the string is then converted into the corresponding 64-bit integer value. you can therefore use a string to represent a 64-bit value that is too large to represent as a 32-bit javascript number. return value a new object representing the specified value. exceptions thrown
typeerror the specified value cannot be converted into a 64-bit integer. either it's not a number, string, or 64-bit integer object, or it's a string that is incorrectly formatted or contains a value outside the range that can be represented in 64 bits. this will also be thrown if the source value is a floating-point number that can't be precisely represented as a 64-bit integer. method overview ...
...; int64 join(high, low); number lo(a); string tosource(); string tostring([radix]); methods compare() compares two 64-bit integer values. number compare( a, b ); parameters a the first value to compare. b the second value to compare. return value the returned value is: -1 if a < b, 0 if a == b, and 1 if a > b. exceptions thrown
typeerror one or both of the specified values is not a 64-bit integer (either signed or unsigned). hi() returns the high 32 bits of the specified value. number hi( num ); parameters num the value whose high 32 bits are to be returned. return value the high 32 bits of num are returned. this is essentially num >> 32. exceptions thrown
typeerror num is not a 64-bit integer object. ...
...And 3 more matches
Mozilla
are used to specify various startup options for mozilla applications.this page describes the commonly used options and how to use them. you can open the command line interface by pressing shift + f2. continuous integration when you push a commit to mozilla-central or a related repository, it initiates a large chain of builds and tests across multiple
types of infrastructure. this document will help you understand all the pieces that comprise mozilla's continuous integration systems. cookies in mozilla suggestions as to needed documentation can be directed to mike connor. cookies preferences in mozilla these preferences apply to most mozilla products (including firefox...
...iginal navigator code base had large sections that were shared across multiple platforms. many times, code checked in would compile or run on a handful of platforms. also, with as many as 100 engineers, it was very difficult to determine what happened in the tree that caused the instability. bonsai was created to solve these problems. how mozilla determines mime
types all data handling in mozilla is based on the mime
type of the content. this means that every time an uri is loaded, mozilla must find out its mime
type. the several ways how this happens are described in this document. how test harnesses work mozilla test harnesses are typically composed of a python runner that invokes firefo...
...ird or some other product, substitute the product name where ever you see firefox in this instructions.) 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: how to investigate disconnect failures this article will guide you on how to investigate disconnect failures. an example of such a failure how to report a hung firefox is your firefox not responding? or are you regularly seeing the "firefox is running but ...
...And 3 more matches
URLs - Plugins
usnext » this chapter describes retrieving urls and displaying them on specified target pages, posting data to an http server, uploading files to an ftp server, and sending mail. uniform resource locator (url) protocols provide a means for locating and accessing resources that are available on the internet and on intranets. plug-ins can request and receive the data associated with urls of any
type that the browser can handle, including http, ftp, news, mailto, and gopher. the table below summarizes urls supported by gecko. in addition, gecko may support urls not listed on this table. url scheme description about locates browser information or "fun" pages. file (host-specific filenames) locates files on a specific host computer rather than an internet r...
...and writing the data. for this reason as well, calling npn_geturlnotify may be more useful than npn_geturl; the plug-in is notified upon either successful or unsuccessful completion of the request. nperror npn_geturl(npp instance, const char *url, const char *target); the instance parameter represents the current plug-in instance. the url parameter is the url of the request, which can be of any
type, including http, ftp, news, or mailto. the target parameter represents the destination where the url will be displayed, a window or frame. if target refers to the window or frame containing the plug-in instance, it is destroyed and the plug-in may be unloaded. if the target parameter is set to null, the application creates a new stream and delivers the data to the plug-in instance, through calls...
...ay be unloaded. if the target parameter is set to null, the application creates a new stream and delivers the data to the plug-in instance, through calls to npp_newstream, npp_writeready and npp_write, and npp_destroystream. in general, if a url works in the location box of the navigator, it works as a target for npn_geturl, except for the _self target. make sure that the target matches the url
type sent to it. for example, a null target does not make sense for some url
types (such as mailto). for some recommendations to help you with target parameter choice, see the reference entry for npn_geturl. the npn_geturlnotify method acts like npn_geturl. both request the creation of a new stream with the contents of the specified url, and, in addition, npn_geturlnotify notifies the plug-in of the ...
...And 3 more matches
Debugger.Source - Firefox Developer Tools
each debugger instance has a separate collection of debugger.source instances representing the source code that has been presented to the system. ...
... each debugger instance has a separate collection of debugger.source instances representing the source code that has been presented to the system. ...
...y or method differs between the instance referring to javascript source or to a block of webassembly code, the text will be split into two sections, headed by “if the instance refers to javascript source” and “if the instance refers to webassembly code”, respectively. if the behavior does not differ, no such emphasized headings will appear. accessor properties of the debugger.source proto
type object a debugger.source instance inherits the following accessor properties from its proto
type: text if the instance refers to javascript source, the javascript source code, as a string. the value satisfies the program, functiondeclaration, or functionexpression productions in the ecmascript standard. if the instance refers to webassembly code, the serialized text representation. the fo...
...And 3 more matches
Attr - Web APIs
the attr interface represents one of a dom element's attributes as an object. in most dom methods, you will directly retrieve the attribute as a string (e.g., element.getattribute()), but certain functions (e.g., element.getattributenode()) or means of iterating return attr
types. <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/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...
...value is expected to be unique across a dom document. in html dom, "id" is the only id attribute, but xml documents could define others. whether or not an attribute is unique is often determined by a dtd or other schema description. lastchild obsolete since gecko 14 this property now always returns null. nextsibling this property now always returns null. nodename use attr.name instead. ...
... specified this property now always returns true. ...
...And 3 more matches
Using dynamic styling information - Web APIs
ing the individual style rules that make up a css stylesheet. to get to the style objects from the document, you can use the document.stylesheets property and access the individual objects by index (e.g., document.stylesheets[0] is the first stylesheet defined for the document, etc.). modify a stylesheet rule with cssom <html> <head> <title>modifying a stylesheet rule with cssom</title> <style
type="text/css"> body { background-color: red; } </style> <script
type="text/javascript"> var stylesheet = document.stylesheets[0]; stylesheet.cssrules[0].style.backgroundcolor="blue"; </script> </head> <body> the stylesheet declaration for the body's background color is modified via javascript. </body> </html> the list of properties available in the dom from the style property is given on the dom...
...where for that element's border property in the head section, or external style sheets. however, this will not affect any other property declarations for that element's styles, such as padding or margin or font, for example. to change a particular element's style, you can adapt the following example for the element(s) you want to style. <html> <head> <title>simple style example</title> <script
type="text/javascript"> function alterstyle(elem) { elem.style.background = 'green'; } function resetstyle(elemid) { elem = document.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style
type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" onclick="alterstyle(this)...
...idual style statement. unlike the individual rules available from the document.stylesheets collection, the style object is accessed from the document or from the elements to which that style is applied. it represents the in-line styles on a particular element. ...
...And 3 more matches
Basic usage of canvas - Web APIs
is not needed, a simple <canvas id="foo" ...></canvas> is fully compatible with all browsers that support canvas at all. the rendering context the <canvas> element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. in this tutorial, we focus on the 2d rendering context. other contexts may provide different
types of rendering; for example, webgl uses a 3d context based on opengl es. the canvas is initially blank. to display something, a script first needs to access the rendering context and draw on it. the <canvas> element has a method called getcontext(), used to obtain the rendering context and its drawing functions. getcontext() takes one parameter, the
type of context. for 2d graphics, such as those...
...document.getelementbyid('tutorial'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); // drawing code here } else { // canvas-unsupported code here } a skeleton template here is a minimalistic template, which we'll be using as a starting point for later examples. note: it is not good practice to embed a script inside html. we do it here to keep the example concise. ...
...// drawing code here } else { // canvas-unsupported code here } a skeleton template here is a minimalistic template, which we'll be using as a starting point for later examples. note: it is not good practice to embed a script inside html. we do it here to keep the example concise. ...
...And 3 more matches
DOMError - Web APIs
thrown in a range object). hierarchyrequesterror the node tree hierarchy is not correct. wrongdocumenterror the object is in the wrong document. ...
...thrown in a range object). hierarchyrequesterror the node tree hierarchy is not correct. wrongdocumenterror the object is in the wrong document. ...
...thrown in a range object). hierarchyrequesterror the node tree hierarchy is not correct. wrongdocumenterror the object is in the wrong document. ...
...And 3 more matches
Document.createEvent() - Web APIs
see notes section for details. example // create the event. var event = document.createevent('event'); // define that the event name is 'build'. ...
...see notes section for details. example // create the event. var event = document.createevent('event'); // define that the event name is 'build'. ...
...see notes section for details. example // create the event. var event = document.createevent('event'); // define that the event name is 'build'. ...
...And 3 more matches
Document Object Model (DOM) - Web APIs
the document's structure, style, or content. nodes can also have event handlers attached to them. once an event is triggered, the event handlers get executed. to learn more about what the dom is and how it represents documents, see our article introduction to the dom. ...
...roduction to the dom. dom interfaces attr cdatasection characterdata childnode comment customevent document documentfragment document
type domerror domexception domimplementation domstring domtimestamp domstringlist domtokenlist element event eventtarget htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocument
typechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker url window worker xmldocument obsolete dom interfaces the document object model has been highly simplified. to achieve this, the following interfaces present in the different dom level 3 or earlier specifications have been removed. it is uncertain whether some may ...
...in particular, the element interface is enhanced to become htmlelement and various subclasses, each representing one of (or a family of closely related) elements. the html dom api provides access to vari...
...And 3 more matches
HTMLButtonElement - Web APIs
element, then the attribute can be the id of any form element in the same document it is related to, or the null value if none matches. htmlbuttonelement.formaction is a domstring reflecting the uri of a resource that processes information submitted by the button. if specified, this attribute overrides the action attribute of the <form> element that owns this element. htmlbuttonelement.formenc
type is a domstring reflecting the
type of content that is used to submit the form to the server. if specified, this attribute overrides the enc
type attribute of the <form> element that owns this element. htmlbuttonelement.formmethod is a domstring reflecting the http method that the browser uses to submit the form. if specified, this attribute overrides the method attribute of the <form> element t...
... 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 element to be displayed if the button is clicked and is of
type="menu". htmlbuttonelement.name is a domstring representing the name of the object when submitted with a form. html5 if specified, it must not be the empty string. htmlbuttonelement.tabindex is a long that represents this element's position in the tabbing order. htmlbuttonelement.
type is a domstring indicating the behavior of the button. this is an enumerated attribute with the following pos...
...ecified, html5 or if it is dynamically changed to an empty or invalid value. reset: the button resets the form. button: the button does nothing. menu: the button displays a menu. htmlbuttonelement.willvalidate read only is a boolean indicating whether the button is a candidate for constraint validation. it is false if any conditions bar it from constraint validation, including: its
type property is reset or button; it has a <datalist> ancestor; or the disabled property is set to true. htmlbuttonelement.validationmessage read only is a domstring representing the localized message that describes the validation constraints that the control does not satisfy (if any). this attribute is the empty string if the control is not a candidate for constraint validation (willvalidate is fa...
...And 3 more matches
Headers - Web APIs
to be clear, the difference between headers.set() and headers.append() is that if the specified header does already exist and does accept multiple values, headers.set() will overwrite the existing value with the new one, whereas headers.append() will append the new value onto the end of the set of values. see their dedicated pages for example code. note: all of the headers methods will throw a
typeerror if you try to pass in a reference to a name that isn't a valid http header name. the mutation operations will throw a
typeerror if the header has an immutable guard. in any other failure case they fail silently. note: when header values are iterated over, they are automatically sorted in lexicographical order, and values from duplicate header names are combined. obsolete methods head...
...rs object with a given name; this method has now been deleted from the spec, and headers.get() now returns all values of a given name instead of just the first one. ...
...s now been deleted from the spec, and headers.get() now returns all values of a given name instead of just the first one. ...
...And 3 more matches
Ajax navigation example - Web APIs
hub.com/giabao/mdn-ajax-nav-example.git ): note: for fully integrating the <form> elements within this mechanism, please take a look at the paragraph submitting forms and uploading files. first_page.php: <?php $page_title = "first page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doc
type html> <html> <head> <?php include "include/header.php"; echo "<title>" . $page_title . "</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <div id="ajax-content"> <?php } ?> <p>this is the content of <strong>first_page.php</strong>.</p> <?php ...
...$page_title . "</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> <div id="ajax-content"> <?php } ?> <p>this is the content of <strong>second_page.php</strong>.</p> <?php ...
... echo "</body>\n</html>"; } ?> third_page.php: <?php $page_title = "third page"; $page_content = "<p>this is the content of <strong>third_page.php</strong>. this content is stored into a php variable.</p>"; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { echo json_encode(array("page" => $page_title, "content" => $page_content)); } else { ?> <!doc
type html> <html> <head> <?php include "include/header.php"; echo "<title>" . $page_title . "</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <div id="ajax-content"> <?php echo $page_content; ?> </div> <p>this paragraph is shown only when the navigation ...
...And 3 more matches
MediaDevices.ondevicechange - Web APIs
let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.gete...
...ant to fetch the current list of media devices and then update the displayed lists of audo and video devices using that information. ...
...st() { navigator.mediadevices.enumeratedevices() .then(function(devices) { audiolist.innerhtml = ""; videolist.innerhtml = ""; devices.foreach(function(device) { let elem = document.createelement("li"); let [kind,
type, direction] = device.kind.match(/(\w+)(input|output)/i); elem.innerhtml = "<strong>" + device.label + "</strong> (" + direction + ")"; if (
type === "audio") { audiolist.appendchild(elem); } else if (
type === "video") { videolist.appendchild(elem); } }); }); } updatedevicelist() consists entirely of a call to the function enumeratedevices() on the mediadevices object referenced in the navigator.mediadevices property, as well as the code that's run when the promise returned by enumeratedevices() is fulfil...
...And 3 more matches
MediaSession.setActionHandler() - Web APIs
the setactionhandler() property of the mediasession interface sets an event handler for a media session action. these actions let a web app receive notifications when the user engages a device's built-in physical or onscreen media controls, such as play, stop, or seek buttons. syntax navigator.mediasession.setactionhandler(
type, callback) parameters
type a domstring representing an action
type to listen for. it will be one of play, pause, seekbackward, seekforward, seekto, skipad,previoustrack, or nexttrack. further details on the action
types can be found below under media session actions. callback a function to call when the specified action
type is invoked. the callback receives no input parameters, and should not return a value. return value undefined. description to remove ...
...pe is invoked. the callback receives no input parameters, and should not return a value. return value undefined. description to remove a previously-established action handler, call setactionhandler() again, specifying null as the callback. ...
...rs, and should not return a value. return value undefined. description to remove a previously-established action handler, call setactionhandler() again, specifying null as the callback. the action handler receives as input a single parameter: an object conforming to the mediasessionactiondetails dictionary, which provides both the action
type (so the same function can handle multiple action
types), as well as data needed in order to perform the action. media session actions a media session action's
type is specified using a string from the mediasessionaction enumerated
type. values each of the actions is a common media session control request. implement support for each of these in order to allow that
type of action to be performed. the following strings identify the currently availa...
...And 3 more matches
Using Navigation Timing - Web APIs
utput { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above. for a list of the available timing values you can look for in performancetiming, see the performancetiming interface's properties section. determining navigation
type to put the timing information obtained from performancetiming into the correct perspective, you need to know more about what sort of load operation occurred. in particular, you need to know: was this a load or a reload? was this a navigation or a move forward or backward through history? how many (if any) redirects were required in order to complete the navigation? this information is pro...
...gation property, which returns a performancenavigation object that includes the needed information. let's add this information to the example above. ...
...cenavigation object that includes the needed information. let's add this information to the example above. ...
...And 3 more matches
Network Information API - Web APIs
the network information api provides information about the system's connection in terms of general connection
type (e.g., 'wifi', 'cellular', etc.). this can be used to select high definition content or low definition content based on the user's connection. the entire api consists of the addition of the networkinformation interface and a single property to the navigator interface: navigator.connection. note: this feature is available in web workers. examples detect connection changes this example watches for changes to the user's connection. ...
...ion. the entire api consists of the addition of the networkinformation interface and a single property to the navigator interface: navigator.connection. note: this feature is available in web workers. examples detect connection changes this example watches for changes to the user's connection. ...
...s of the addition of the networkinformation interface and a single property to the navigator interface: navigator.connection. note: this feature is available in web workers. examples detect connection changes this example watches for changes to the user's connection. var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; var
type = connection.effective
type; function updateconnectionstatus() { console.log("connection
type changed from " +
type + " to " + connection.effective
type);
type = connection.effective
type; } connection.addeventlistener('change', updateconnectionstatus); preload large resources the connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. this example would b...
...And 3 more matches
PointerEvent - Web APIs
a pointer is a hardware agnostic representation of input devices (such as a mouse, pen or contact point on a touch-enable surface). the pointer can target a specific coordinate (or set of coordinates) on the contact surface such as a screen. a pointer's hit test is the process a browser uses to determine the target element for a pointer event. ...
...tylus) axis and the y axis. pointerevent.tilty read only the plane angle (in degrees, in the range of -90 to 90) between the x–z plane and the plane containing both the pointer (e.g. pen stylus) axis and the x axis. pointerevent.twist read only the clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359. pointerevent.pointer
type read only indicates the device
type that caused the event (mouse, pen, touch, etc.) pointerevent.isprimary read only indicates if the pointer represents the primary pointer of this pointer
type. methods pointerevent.getcoalescedevents() returns a sequence of all pointerevent instances that were coalesced into the dispatched pointermove event. pointerevent.getpredictedevents() ret...
... note: it's important to note that in many cases, both pointer and mouse events get sent (in order to let non-pointer-specific code still interact with the user). ...
...And 3 more matches
SVGAngle - Web APIs
attribute. unless otherwise described, an svgangle object is not associated with any element. every svgangle object operates in one of two modes: reflect the base value of a reflected animatable attribute (being exposed through the baseval member of an svganimatedangle), be detached, which is the case for svgangle objects created with svgsvgelement.createsvgangle(). constants svg_angle
type_unknown some unknown
type of value. svg_angle
type_unspecified a unitless <number> interpreted as a value in degrees. svg_angle
type_deg an <angle> with a deg unit. svg_angle
type_rad an <angle> with a rad unit. svg_angle
type_grad an <angle> with a grad unit. properties unit
type the
type of the value as specified by one of the svg_angle
type_* constants defined on this interface. valu...
...ing this attribute will cause valueinspecifiedunits and valueasstring to be updated automatically to reflect this setting. exceptions on setting: a domexception with code no_modification_allowed_err is raised when the length corresponds to a read-only attribute, or when the object itself is read-only. valueinspecifiedunits the value as a floating point value, in the units expressed by unit
type. setting this attribute will cause value and valueasstring to be updated automatically to reflect this setting. exceptions on setting: a domexception with code no_modification_allowed_err is raised when the length corresponds to a read-only attribute, or when the object itself is read-only. valueasstring the value as a domstring value, in the units expressed by unit
type. setting this attr...
...ring to be updated automatically to reflect this setting. exceptions on setting: a domexception with code no_modification_allowed_err is raised when the length corresponds to a read-only attribute, or when the object itself is read-only. valueasstring the value as a domstring value, in the units expressed by unit
type. setting this attribute will cause value, valueinspecifiedunits, and unit
type to be updated automatically to reflect this setting. exceptions on setting: a domexception with code syntax_err is raised if the assigned string cannot be parsed as a valid <angle>. a domexception with code no_modification_allowed_err is raised when the length corresponds to a read-only attribute, or when the object itself is read-only. methods newvaluespecifiedunits reset the v...
...And 3 more matches
Sensor APIs - Web APIs
eturns the acceleration of the device along all three axes at the time it is read. sensors may or may not correspond exactly to a physical device sensor. for example, the gyroscope interface corresponds exactly to a physical device interface. alternatively, the absoluteorientationsensor interface provides information that is algorithmically agregated from two or more device sensors. these sensor
types are referred to as low-level and high-level respectively. the latter
type of sensor is also called a fusion sensor (alternatively, virtual or synthetic sensors). feature detection sensor interfaces are only proxies for the underlying device sensors. consequently, feature detection is more complicated for sensors than it is for other apis. the presence of a sensor api does not tell you whether ...
...nd battery life. therefore, feature detection for sensor apis must include both detection of the apis themselves and defensive programming strategies (see below). the examples below show three methods for detecting sensor apis. additionally you can put object instantiation inside a try...catch block. notice that detection through the navigator interface is not one of the available options. if (
typeof gyroscope === "function") { // run in circles... } if ("proximitysensor" in window) { // watch out! } if (window.ambientlightsensor) { // go dark... } defensive programming as stated in feature detection, checking for a particular sensor api is insufficient for feature detection. the existence of an actual sensor must be confirmed as well. this is where defensive programming is ...
...ling the errors gracefully so that the user experience is enhanced rather than degraded. the code example below illustrates these principles. the try...catch block catches errors thrown during sensor instantiation. it implements a handler for sensor.onerror to catch errors thrown during use. the only time anything is shown to the user is when permissions need to be requested and when the sensor
type isn't supported by the device. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. let accelerometer = null; try { accelerometer = new accelerometer({ referenceframe: 'device' }); accelerometer.addeventliste...
...And 3 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
the webglrenderingcontext.vertexattribpointer() method of the webgl api binds the buffer currently bound to gl.array_buffer to a generic vertex attribute of the current vertex buffer object and specifies its layout. syntax void gl.vertexattribpointer(index, size,
type, normalized, stride, offset); parameters index a gluint specifying the index of the vertex attribute that is to be modified. size a glint specifying the number of components per vertex attribute. must be 1, 2, 3, or 4.
type a glenum specifying the data
type of each component in the array. possible values: gl.byte: signed 8-bit integer, with values in [-128, 127] gl.short: signed 16-bit integer, with values in [-32768, 32767] gl.unsigned_byte: unsigned 8-bit integer, with values in [0, 255] gl.unsigned_short...
...gned_short: unsigned 16-bit integer, with values in [0, 65535] gl.float: 32-bit ieee floating point number when using a webgl 2 context, the following values are available additionally: gl.half_float: 16-bit ieee floating point number normalized a glboolean specifying whether integer data values should be normalized into a certain range when being cast to a float. for
types gl.byte and gl.short, normalizes the values to [-1, 1] if true. for
types gl.unsigned_byte and gl.unsigned_short, normalizes the values to [0, 1] if true. for
types gl.float and gl.half_float, this parameter has no effect. stride a glsizei specifying the offset in bytes between the beginning of consecutive vertex attributes. cannot be larger than 255. if stride is 0, the attribute is a...
... cannot be larger than 255. if stride is 0, the attribute is assumed to be tightly packed, that is, the attributes are not interleaved but each attribute is in a separate block, and the next vertex' attribute follows immediately after the current vertex. offset a glintptr specifying an offset in bytes of the first component in the vertex attribute array. must be a multiple of the byte length of
type. return value none. exceptions a gl.invalid_value error is thrown if offset is negative. a gl.invalid_operation error is thrown if stride and offset are not multiples of the size of the data
type. a gl.invalid_operation error is thrown if no webglbuffer is bound to the array_buffer target. when using a webgl 2 context, a gl.invalid_operation error is thrown if this vertex attribute is d...
...And 3 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
captions) using the <track> element. the primary purpose of webvtt files is to add text overlays to a <video>. webvtt is a text based format, which must be encoded using utf-8. where you can use spaces you can also use tabs. there is also a small api available to represent and manage these tracks and the data needed to perform the playback of the text at the correct times. webvtt files the mime
type of webvtt is text/vtt. a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen. 00:05.000 --> 00:09.000 - it will perforate your stomach. - you could die. webvtt body the structure of a webvtt consists of the following components, some of them optional, in this order: an optiona...
...how to write a webvtt file there are few steps that can be followed to write a simple webvtt file. before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. steps are given below: open a notepad. the first line of webvtt is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file
type. on the very first line you have to write: webvtt 3. leave the second line blank, and on the third line the time for first cue is to be specified. for example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as: 00:01.000 --> 00:05.000 on the next line you can write the caption for this cue which will run from 1st second to the 5th second, inclusive. ...
...ple, for a first cue starting at time 1 second and ending at 5 seconds, it is written as: 00:01.000 --> 00:05.000 on the next line you can write the caption for this cue which will run from 1st second to the 5th second, inclusive. following the similar steps, a complete webvtt file for specific video or audio file can be made. ...
...And 3 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
arg1, arg2, ...]); |*| var intervalid = window.setinterval(code, delay); |*| \*/ (function() { settimeout(function(arg1) { if (arg1 === 'test') { // feature test is passed, no need for polyfill return; } var __nativest__ = window.settimeout; window.settimeout = function(vcallback, ndelay /*, argumenttopass1, argumenttopass2, etc. ...
... } : vcallback, ndelay); }; }, 0, 'test'); var interval = setinterval(function(arg1) { clearinterval(interval); if (arg1 === 'test') { // feature test is passed, no need for polyfill return; } var __nativesi__ = window.setinterval; window.setinterval = function(vcallback, ndelay /*, argumenttopass1, argumenttopass2, etc. ...
...eout, then when it's called, its this is not set so it defaults to the window object. there's also no option to pass a thisarg to settimeout as there is in array methods like foreach, reduce, etc. and as shown below, using call to set this doesn't work either. ...
...And 3 more matches
HTML in XMLHttpRequest - Web APIs
which originally supported only xml parsing. this feature allows web apps to obtain an html resource as a parsed dom using xmlhttprequest. to get an overview of how to use xmlhttprequest in general, see using xmlhttprequest. limitations to discourage the synchronous use of xmlhttprequest, html support is not available in the synchronous mode. also, html support is only available if the response
type property has been set to "document". this limitation avoids wasting time parsing html uselessly when legacy code uses xmlhttprequest in the default mode to retrieve responsetext for text/html resources. also, this limitation avoids problems with legacy code that assumes that responsexml is null for http error pages (which often have a text/html response body). usage retrieving an html resource ...
...with legacy code that assumes that responsexml is null for http error pages (which often have a text/html response body). ...
... a dom using xmlhttprequest, except you can't use the synchronous mode and you have to explicitly request a document by assigning the string "document" to the response
type property of the xmlhttprequest object after calling open() but before calling send(). var xhr = new xmlhttprequest(); xhr.onload = function() { console.log(this.responsexml.title); } xhr.open("get", "file.html"); xhr.response
type = "document"; xhr.send(); feature detection method 1 this method relies on the "force async" nature of the feature. when you try to set response
type of an xmlhttprequest object after it is opened as "sync". this throws an error in the browsers that implement the feature and works on others. function htmlinxhr() { if (!window.xmlhttprequest) return false; var req = new window.xmlhttp...
...And 3 more matches
Synchronous and asynchronous requests - Web APIs
equest object asynchronously in order to switch the content of the read file to a specified listener. function xhrsuccess() { this.callback.apply(this, this.arguments); } function xhrerror() { console.error(this.statustext); } function loadfile(url, callback /*, opt_arg1, opt_arg2, ... ...
...e that the request should be handled asynchronously. line 16 actually initiates the request. example: using a timeout you can use a timeout to prevent your code from hanging while waiting for a read to finish. ...
...e get request. line 5 checks the status code after the transaction is completed. if the result is 200 -- http's "ok" result -- the document's text content is output to the console. example: synchronous http request from a worker one of the few cases in which a synchronous request does not usually block execution is the use of xmlhttprequest within a worker. ...
...And 3 more matches
XPathEvaluator.evaluate() - Web APIs
the evaluate() method of the xpathevaluator interface executes an xpath expression on the given node or document and returns an xpathresult. syntax xpathresult xpathevaluator.evaluate(expression, contextnode, resolver,
type, result); parameters expression a domstring representing the xpath expression to be parsed and evaluated. contextnode a node representing the context to use for evaluating the expression. resolver optional permits translation of all prefixes, including the xml namespace prefix, within the xpath expression into appropriate namespace uris.
type optional specifies the
type of result to be returned by evaluating the expression. this must be one of the xpathresult.constants. result optional allows to specify a result object which may be reused and returned by th...
...y be reused and returned by this method. if this is specified as null or the implementation does not reuse the specified result, a new result object will be returned. return value an xpathresult object representing the result of evaluating the xpath expression. exceptions invalid_expression_err if the expression is not legal according to the rules of the xpathevaluator, an xpathexception of
type invalid_expression_err is raised.
type_err in case result cannot be converted to the specified
type, an xpathexception of
type type_err is raised. namespace_err if the expression contains namespace prefixes which cannot be resolved by the specified xpathnsresolver, a domexception of
type namespace_error is raised. wrong_document_err if the provided context node is from a document that is no...
... example the following example shows the use of the evaluate() method. ...
...And 3 more matches
XRPermissionDescriptor.requiredFeatures - Web APIs
res = reqfeaturelist; reqfeaturelist = xrpermissiondescriptor.requiredfeatures; value an array of strings indicating the webxr features which must be available for use by the app or site. the permissions check will be performed in such a manner as to verify that all features in the list are available for use with the user's permission. ...
...list; reqfeaturelist = xrpermissiondescriptor.requiredfeatures; value an array of strings indicating the webxr features which must be available for use by the app or site. the permissions check will be performed in such a manner as to verify that all features in the list are available for use with the user's permission. ...
...scriptor.requiredfeatures; value an array of strings indicating the webxr features which must be available for use by the app or site. the permissions check will be performed in such a manner as to verify that all features in the list are available for use with the user's permission. ...
...And 3 more matches
ARIA: grid role - Accessibility
y td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'), row = 0, col = 0, maxrow = trs.length - 1, maxcol = 0; array.proto
type.foreach.call(trs, function(gridrow, i){ array.proto
type.foreach.call(gridrow.queryselectorall('td'), function(el, i){ el.dataset.row = row; el.dataset.col = col; col = col + 1; }); if (col>maxcol) { maxcol = col - 1; } col = 0; row = row + 1; }); function moveto(newrow, newcol) { var tgt = document.queryselector('[data-row="' + newrow + '"][data-col="' + newcol + '"]'); ...
...(gridrow.queryselectorall('td'), function(el, i){ el.dataset.row = row; el.dataset.col = col; col = col + 1; }); if (col>maxcol) { maxcol = col - 1; } col = 0; row = row + 1; }); function moveto(newrow, newcol) { var tgt = document.queryselector('[data-row="' + newrow + '"][data-col="' + newcol + '"]'); if (tgt && (tgt.getattribute('role')==='gridcell') ) { array.proto
type.foreach.call(document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } } document.queryselector('table').addeventlistener("keydown", function(event) { switch (event.key) { case "arrowright": moveto(parseint(event.target.datase...
...ent.ctrlkey) { var i = maxrow; var result; do { var j = maxcol; do { result = moveto(i, j); j--; } while (result == false); i--; } while (result == false); } else { moveto(parseint(event.target.dataset.row, 10), document.queryselector('[data-row="' + event.target.dataset.row + '"]:last-of-
type').dataset.col); } break; case "pageup": var i = 0; var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break;...
...And 3 more matches
Text labels and names - Accessibility
the different problems and solutions are discussed in the sections below. ...
...on of the group. users of assistive technology find this description helpful when trying to work out the overall purpose of the group. without the legend, they would have to navigate around the individual form controls in the group to infer an idea of the overall purpose, which could result in confusion. examples <form> <fieldset> <legend>choose your favorite monster</legend> <input
type="radio" id="kraken" name="monster"> <label for="kraken">kraken</label><br/> <input
type="radio" id="sasquatch" name="monster"> <label for="sasquatch">sasquatch</label><br/> <input
type="radio" id="mothman" name="monster"> <label for="mothman">mothman</label> </fieldset> </form> you can see a live, interactive version of this example on the <fieldset> reference page. see ...
... the form element can be placed inside the <label>, in which case the association between the form element and the label is obvious from the structure. ...
...And 3 more matches
:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input
type="radio">), checkbox (<input
type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state. /* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. ...
...-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. ...
...cking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. ...
...And 3 more matches
Pseudo-classes - CSS: Cascading Style Sheets
nts can be used to style a specific part of an element. syntax selector:pseudo-class { property: value; } like regular classes, you can chain together as many pseudo-classes as you want in a selector. ...
...tor. ...
... html liv...
...And 3 more matches
Visual formatting model - CSS: Cascading Style Sheets
dia. this includes continuous media such as a computer screen and paged media such as a book or document printed by browser print functions. most of the information applies equally to continuous and paged media. in the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. the layout of these boxes is governed by: box dimensions and
type. positioning scheme (normal flow, float, and absolute positioning). relationships between elements in the document tree. external information (e.g., viewport size, intrinsic dimensions of images, etc.). much of the information about the visual formatting model is defined in css2, however, various level 3 specifications have added to this information. when reading specifications you will ofte...
...e document that are not displayed. we most often see this as scrolling in the block dimension — vertically in a horizontal, top-to-bottom language. however, you might design something that requires scrolling in the inline dimension too. box generation box generation is the part of the css visual formatting model that creates boxes from the document's elements. generated boxes are of different
types, which affect their visual formatting. the
type of the box generated depends on the value of the css display property. initially defined in css2, the display property is extended in the css display module level 3. in addition, some of the terminologies around the display have been updated and clarified in the years since css2. css takes your source document and renders it onto a canvas. to do ...
...d document. each box in the box tree represents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes. then, for each element, css generates zero or more boxes as specified by that element’s display property value. note: boxes are often referred to by their display
type — e.g. a box generated by an element with display: block is called a "block box" or just a "block". note however that block boxes, block-level boxes and box containers are all subtly different; see the block boxes section below for more details. the principal box when an element generates one or more boxes, one of them is the principal box, which contains its descendant boxes and generated c...
...And 3 more matches
font-style - CSS: Cascading Style Sheets
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. ...
... 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. ...
...true
type or open
type 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>. ...
...And 3 more matches
font-variant-east-asian - CSS: Cascading Style Sheets
t-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. ...
...r 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 open
type values ruby. <east-asian-variant-values> these values specify a set of logographic glyph variants which should be used for display. ...
... simplified none, use the simplified chinese glyphs smpl traditional none, use the traditional chinese glyphs trad <east-asian-width-values> these values control the sizing of figures used for east asian characters. two values are possible: proportional-width activating the set of east asian characters which vary in width. ...
...And 3 more matches
font-variant-numeric - CSS: Cascading Style Sheets
an 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 open
type values ordn. slashed-zero this keyword forces the use of a 0 with a slash; this is useful when a clear distinction between o and 0 is needed. it corresponds to the open
type values zero. <numeric-figure-values> these values control the figures used for numbers. two values are possible: lining-nums activating the set of figures where numbers are all lying on the baseline. it corresponds to ...
...ordn. slashed-zero this keyword forces the use of a 0 with a slash; this is useful when a clear distinction between o and 0 is needed. it corresponds to the open
type values zero. <numeric-figure-values> these values control the figures used for numbers. two values are possible: lining-nums activating the set of figures where numbers are all lying on the baseline. it corresponds to the open
type values lnum. oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. it corresponds to the open
type values onum. <numeric-spacing-values> these values controls the sizing of figures used for numbers. two values are possible: proportional-nums activating the set of figures where numbers are not all of the same size. it corresponds to the opentyp...
...g-values> these values controls the sizing of figures used for numbers. two values are possible: proportional-nums activating the set of figures where numbers are not all of the same size. it corresponds to the open
type values pnum. tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. it corresponds to the open
type values tnum. <numeric-fraction-values> these values controls the glyphs used to display fractions. two values are possible: diagonal-fractions activating the set of figures where the numerator and denominator are made smaller and separated by a slash. it corresponds to the open
type values frac. stacked-fractions activating the set of figures where the numerator and denominator are mad...
...And 3 more matches
Overview of events and handlers - Developer guides
events and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing. ...
...en actions, which javascript leverages. (the talk is available from several sources, including this one.) currently, all execution environments for javascript code use events and event handling. the event design pattern the event system, at its core, is simply a programming design pattern. the pattern starts with an agreement over a kind of event and: the name string used for the event, the
type of the data structure used to represent the key properties of that event, and the javascript object which will 'emit' that event. the pattern is implemented by defining a javascript function which takes as an argument the data structure which was agreed upon, and registering the function using the name string with the object which will emit the event. the function is said to be a 'listen...
...y be followed using completely custom code, as explained in the article on custom events. the pattern is also used by modern web browsers which define many events emitted in response to user input or browser activity. modern web browsers follow the event pattern using a standardized approach. browsers use as the data structure for the properties of the event, an object derived from the eventproto
type object. browsers use as the registration method for the function which will handle those data structures a method called addeventlistener which expects as arguments a string event
type name and the handler function. finally, browsers define a large number of objects as event emitters and define a wide variety of event
types generated by the objects. button event handler demo for example, browse...
...And 3 more matches
Printing - Developer guides
dow.onafterprint to assign handlers for these events, but using eventtarget.addeventlistener() is preferred. examples here are some common examples. ...
... but using eventtarget.addeventlistener() is preferred. examples here are some common examples. ...
...n and automatically close a popup window when finished if you want to be able to automatically close a popup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this: <!doc
type html> <html> <head> <meta http-equiv="content-
type" content="text/html; charset=utf-8" /> <title>javascript window close example </title> <script
type="text/javascript"> function popuponclick() { my_window = window.open('', 'mywindow', 'status=1,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.wr...
...And 3 more matches
HTML attribute: capture - HTML: Hypertext Markup Language
value description user the user-facing camera and/or microphone should be used. ...
... value description user the user-facing camera and/or microphone should be used. ...
... value description user the user-facing camera and/or microphone should be used. ...
...And 3 more matches
disabled - HTML: Hypertext Markup Language
kbox, radio button, <option> and <optgroup>, as well as some form controls that are disabled via the disabled attribute set on the ancestor <fieldset> element. the <option>s are disabled, but the <select> itself is not. we could have disable the entire <select> by adding the attribute to that element rather than it's descendants. ...
...via the disabled attribute set on the ancestor <fieldset> element. the <option>s are disabled, but the <select> itself is not. we could have disable the entire <select> by adding the attribute to that element rather than it's descendants. ...
...<select> by adding the attribute to that element rather than it's descendants. ...
...And 3 more matches
HTML attribute: pattern - HTML: Hypertext Markup Language
the pattern attribute specifies a regular expression the form control's value should match. if a non-null value doesn't conform to the constraints set by the pattern value, the validitystate object's read-only patternmismatch property will be true. the pattern attribute is an attribute of the text, tel, email, url, password, and search input
types. the pattern attribute, when specified, is a regular expression which the input's value must match in order for the value to pass constraint validation. it must be a valid javascript regular expression, as used by the regexp
type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii. ...
...ashes should be specified around the pattern text. if the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. some of the input
types supporting the pattern attribute, notably the email and url input
types, have expected value syntaxes that must be matched. if the pattern attribute isn't present, and the value doesn't match the expected syntax for that value
type, the validitystate object's read-only
typemismatch property will be true. usability when including a pattern, provide a description of the pattern in visible text ...
... its end anchored to the end of the string, which is slightly different from javascript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end. ...
...And 3 more matches
<button>: The Button element - HTML: Hypertext Markup Language
d with its ancestor <form> element, if any.) this attribute lets you associate <button> elements to <form>s anywhere in the document, not just inside a <form>. it can also override an ancestor <form> element. formaction html5 the url that processes the information submitted by the button. overrides the action attribute of the button's form owner. does nothing if there is no form owner. formenc
type html5 if the button is a submit button (it's inside/associated with a <form> and doesn't have
type="button"), specifies how to encode the form data that is submitted. possible values: application/x-www-form-urlencoded: the default if the attribute is not used. multipart/form-data: use to submit <input> elements with their
type attributes set to file. text/plain: specified as a debugging ...
...n"), specifies how to encode the form data that is submitted. possible values: application/x-www-form-urlencoded: the default if the attribute is not used. multipart/form-data: use to submit <input> elements with their
type attributes set to file. text/plain: specified as a debugging aid; shouldn’t be used for real form submission. if this attribute is specified, it overrides the enc
type attribute of the button's form owner. formmethod html5 if the button is a submit button (it's inside/associated with a <form> and doesn't have
type="button"), this attribute specifies the http method used to submit the form. possible values: post: the data from the form are included in the body of the http request when sent to the server. use when the form contains information that should...
... search forms. if specified, this attribute overrides the method attribute of the button's form owner. formnovalidate html5 if the button is a submit button, this boolean attribute 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 attribu...
...And 3 more matches
<label> - HTML: Hypertext Markup Language
a touch-screen device. to associate the <label> with an <input> element, you need to give the <input> an id attribute. the <label> then needs a for attribute whose value is the same as the input's id. alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit: <label>do you like peas? <input
type="checkbox" name="peas"> </label> other usage notes: the form control that the label is labeling is called the labeled control of the label element. one input can be associated with multiple labels. when a <label> is clicked or tapped and it is associated with a form control, the resulting click event is also raised for the associated control. attributes this element includes the global a...
...ned control element. styling with css there are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element. you can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read. ...
...> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element. you can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read. ...
...And 3 more matches
<style>: The Style Information element - HTML: Hypertext Markup Language
he document — make sure you include them in the correct order, to avoid unexpected cascade issues. in the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width. attributes this element includes the global attributes.
type this attribute defines the styling language as a mime
type (charset should not be specified). this attribute is optional and defaults to text/css if it is not specified; values other than the empty string or text/css are not used. note: there is very little reason to include this attribute in modern web documents. media this attribute defines which media the style should be applied to. its val...
...scoped this attribute specifies that the styles only apply to the elements of its parent(s) and children. this attribute may be re-introduced in the future per https://github.com/w3c/csswg-drafts/issues/3547. if you want to use the attribute now, you can use a polyfill. ...
...e stylesheet to a document: <!doc
type html> <html> <head> <style> p { color: red; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> multiple style elements in this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity. ...
...And 3 more matches
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
orer 5. this is essential in order to support websites that were built before the widespread adoption of web standards. in full standards mode, the behavior is (hopefully) the behavior described by the html and css specifications. in almost standards mode, there are only a very small number of quirks implemented. ...
...cribed by the html and css specifications. in almost standards mode, there are only a very small number of quirks implemented. how do browsers determine which mode to use? for html documents, browsers use a doc
type in the beginning of the document to decide whether to handle it in quirks mode or standards mode. to ensure that your page uses full standards mode, make sure that your page has a doc
type like in this example: <!doc
type html> <html lang="en"> <head> <meta charset=utf-8> <title>hello world!</title> </head> <body> </body> </html> the doc
type shown in the example, <!doc
type html>, is the simplest possible, and the one recommended by html5. earlier versions of the html standard recommended other variants, but all existing browsers today will use full standards mode f...
...is example: <!doc
type html> <html lang="en"> <head> <meta charset=utf-8> <title>hello world!</title> </head> <body> </body> </html> the doc
type shown in the example, <!doc
type html>, is the simplest possible, and the one recommended by html5. earlier versions of the html standard recommended other variants, but all existing browsers today will use full standards mode for this doc
type, even the dated internet explorer 6. there are no valid reasons to use a more complicated doc
type. if you do use another doc
type, you may risk choosing one which triggers almost standards mode or quirks mode. make sure you put the doc
type right at the beginning of your html document. ...
...And 3 more matches
Microformats - HTML: Hypertext Markup Language
may use the first instance of a property. hierarchical data is represented with nested microformats, typically as property values themselves. all microformats class names use prefixes. prefixes are syntax independent from vocabularies, which are developed separately. "h-*" for root class names, e.g. "h-card", "h-entry", "h-feed", and many more. these top-level root classes usually indicate a
type and corresponding expected vocabulary of properties. for example: h-card describes a person or organization h-entry describes episodic or date stamped online content like a blog post h-feed describes a stream or feed of posts you can find many more vocabularies on the microformats2 wiki. "p-*" for plain (text) properties, e.g. "p-name", "p-summary" generic plain text parsing, ...
... p-street-address street number + name p-locality city/town/village p-country-name country name nested h-card example <div class="h-card"> <a class="p-name u-url" href="http://blog.lizardwrangler.com/" >mitchell baker</a> (<a class="p-org h-card" href="http://mozilla.org/" >mozilla foundation</a>) </div> parsed json: { "items": [{ "
type": ["h-card"], "properties": { "name": ["mitchell baker"], "url": ["http://blog.lizardwrangler.com/"], "org": [{ "value": "mozilla foundation", "
type": ["h-card"], "properties": { "name": ["mozilla foundation"], "url": ["http://mozilla.org/"] } }] } }] } note: the nested h-card has implied 'name' and 'url' properties, just like any other root-cla...
...is microformats resource</p> <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a> published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published" datetime="2019-05-31t14:19:09+0000">31 may 2019</time></a></p> </div> { "items": [ { "
type": [ "h-entry" ], "properties": { "in-reply-to": [ "/docs/web/html/microformats" ], "name": [ "hey thanks for making this microformats resource" ], "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ], "published": [ "2019-05-31t14:19:09+0000" ], "content": [ { "html": ...
...And 3 more matches
Network Error Logging - HTTP
thin 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. ...
...work 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_code": 400, "
type": "http.error", "url": "https://example.com/bad-request" } } dns name not resolved note that the phase is set to dns in this report and no server_ip is available to include. ...
...ase": "application", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "137.205.28.66", "status_code": 400, "
type": "http.error", "url": "https://example.com/bad-request" } } dns name not resolved note that the phase is set to dns in this report and no server_ip is available to include. ...
...And 3 more matches
CSS Houdini
applying any style updates found in scripts. in addition, layout, paint, and composite processes are repeated for javascript style updates. houdini code doesn't wait for that first rendering cycle to be complete. rather, it is included in that first cycle — creating renderable, understandable styles. houdini provides an object-based api for working with css values in javascript. houdini's css
typed om is a css object model with
types and methods, exposing values as javascript objects making for more intuitive css manipulation than previous string based htmlelement.style manipulations. every element and style sheet rule has a style map which is accessible via its stylepropertymap. a feature of css houdini is the worklet. with worklets, you can create modular css, requiring a single line of...
... pages covering the apis that fall under the houdini umbrella, along with links to guides to help you if you need guidance in learning how to use them. start by reading houdini, an introduction — this provides a brief history of houdini and an overview of its many features. ...
...of its many features. css parser api an api exposing the css parser more directly, for parsing arbitrary css-like languages into a mildly
typed representation. no guide or reference has currently been written for this api. css properties and values api defines an api for registering new css properties. properties registered using this api are provided with a parse syntax that defines a
type, inheritance behaviour, and an initial value. ...
...And 3 more matches
Closures - JavaScript
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. ...
...ess 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. ...
...n 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. ...
...And 3 more matches
Float32Array() constructor - JavaScript
the float32array()
typed array constructor creates a new float32array object, which is, an array of 32-bit floating point numbers (corresponding to the c float data
type) in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). ...
...ing to the c float data
type) in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new float32array(); // new in es2017 new float32array(length); new float32array(
typedarray); new float32array(object); new float32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros. ...
...yntax (that is, using bracket notation). syntax new float32array(); // new in es2017 new float32array(length); new float32array(
typedarray); new float32array(object); new float32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object whe...
...And 3 more matches
Float64Array() constructor - JavaScript
the float64array()
typed array constructor creates a new float64array object, which is, an array of 64-bit floating point numbers (corresponding to the c double data
type) in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). ...
...ng to the c double data
type) in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new float64array(); // new in es2017 new float64array(length); new float64array(
typedarray); new float64array(object); new float64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros. ...
...yntax (that is, using bracket notation). syntax new float64array(); // new in es2017 new float64array(length); new float64array(
typedarray); new float64array(object); new float64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object whe...
...And 3 more matches
Math.ceil() - JavaScript
bject you created (math is not a constructor). examples using math.ceil() the following example shows example usage of math.ceil(). math.ceil(.95); // 1 math.ceil(4); // 4 math.ceil(7.004); // 8 math.ceil(-0.95); // -0 math.ceil(-4); // -4 math.ceil(-7.004); // -7 decimal adjustment // closure (function() { /** * decimal adjustment of a number. ...
...created (math is not a constructor). examples using math.ceil() the following example shows example usage of math.ceil(). math.ceil(.95); // 1 math.ceil(4); // 4 math.ceil(7.004); // 8 math.ceil(-0.95); // -0 math.ceil(-4); // -4 math.ceil(-7.004); // -7 decimal adjustment // closure (function() { /** * decimal adjustment of a number. ...
.../ -0 math.ceil(-4); // -4 math.ceil(-7.004); // -7 decimal adjustment // closure (function() { /** * decimal adjustment of a number. * * @param {string}
type the
type of adjustment. * @param {number} value the number. * @param {integer} exp the exponent (the 10 logarithm of the adjustment base). * @returns {number} the adjusted value. */ function decimaladjust(
type, value, exp) { // if the exp is undefined or zero... ...
...And 3 more matches
Math.floor() - JavaScript
it as math.floor(), rather than as a method of a math object you created (math is not a constructor). note: math.floor(null) returns 0, not a nan. examples using math.floor() math.floor( 45.95); // 45 math.floor( 45.05); // 45 math.floor( 4 ); // 4 math.floor(-45.05); // -46 math.floor(-45.95); // -46 decimal adjustment /** * decimal adjustment of a number. ...
....floor(), rather than as a method of a math object you created (math is not a constructor). note: math.floor(null) returns 0, not a nan. examples using math.floor() math.floor( 45.95); // 45 math.floor( 45.05); // 45 math.floor( 4 ); // 4 math.floor(-45.05); // -46 math.floor(-45.95); // -46 decimal adjustment /** * decimal adjustment of a number. ...
...( 45.05); // 45 math.floor( 4 ); // 4 math.floor(-45.05); // -46 math.floor(-45.95); // -46 decimal adjustment /** * decimal adjustment of a number. * * @param {string}
type the
type of adjustment. * @param {number} value the number. * @param {integer} exp the exponent (the 10 logarithm of the adjustment base). * @returns {number} the adjusted value. */ function decimaladjust(
type, value, exp) { // if the exp is undefined or zero... ...
...And 3 more matches
Promise - JavaScript
or rejected with a reason (error). when either of these options happens, the associated handlers queued up by a promise's then method are called. if the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached. as the promise.proto
type.then() and promise.proto
type.catch() methods return promises, they can be chained. not to be confused with: several other languages have mechanisms for lazy evaluation and deferring a computation, which they also call "promises", e.g. scheme. promises in javascript represent processes that are already happening, which can be chained with callback functions. if you are looking to lazily evalua...
...the promise chain. sometimes there is no choice, because an error must be handled immediately. (see throw -999 in the example, below, for a technique to handle the consequences.) on the other hand, in the absence of an immediate need, it is simpler to leave out error handling until a final .catch() statement. the signatures of these two functions are simple, they accept a single parameter of any
type. these functions are written by you, the programmer. the termination condition of these functions determines the "settled" state of the next promise in the chain. any termination other than a throw creates a "resolved" state, while terminating with a throw creates a "rejected" state. handlefulfilled(value) { /*...*/; return nextvalue; } handlerejection(reason) { /*...*/; throw nextreaso...
...lved with the given value. if the value is a thenable (i.e. has a then method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. generally, if you don't know if a value is a promise or not, promise.resolve(value) it instead and work with the return value as a promise. ...
...And 3 more matches
Reflect.construct() - JavaScript
the static reflect.construct() method acts like the new operator, but as a function. it is equivalent to calling new target(...args). it gives also the added option to specify a different proto
type. 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.construct(target, argumentslist[, newtarget]) parameters target the target function to call. argumentslist an array-like object specifying the arguments with which target should be called. newtarget optional the constructor whose proto
type should be used. see also the new.target operator. if newtarget is not present, its value defaults to target. ...
... description reflect.construct() allows you to invoke a constructor with a variable number of arguments. ...
...truct() allows you to invoke a constructor with a variable number of arguments. ...
...And 3 more matches
Uint8Array() constructor - JavaScript
the uint8array() constructor creates a
typed array of 8-bit unsigned integers. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new uint8array(); // new in es2017 new uint8array(length); new uint8array(
typedarray); new uint8array(object); new uint8array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. ea...
..., byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object when called with an object argument, a new
typed array is created as if by the
typedarray.from() method. buffer, byteoffset, length when called with a buffer, and optionally a byteoffset and a le...
... if both are omitted, all of buffer is viewed; if only length is omitted, the remainder of buffer is viewed. ...
...And 3 more matches
Uint8ClampedArray() constructor - JavaScript
the uint8clampedarray() constructor creates a
typed array of 8-bit unsigned integers clamped to 0-255; if you specified a value that is out of the range of [0,255], 0 or 255 will be set instead; if you specify a non-integer, the nearest integer will be set. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). ...
... [0,255], 0 or 255 will be set instead; if you specify a non-integer, the nearest integer will be set. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). ...
...cket notation). syntax new uint8clampedarray(); // new in es2017 new uint8clampedarray(length); new uint8clampedarray(
typedarray); new uint8clampedarray(object); new uint8clampedarray(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object whe...
...And 3 more matches
undefined - JavaScript
property attributes of undefined writable no enumerable no configurable no 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 undefined description undefined is a property of the global object. that is, it is a variable in global scope. ...
...ed is a property of the global object. that is, it is a variable in global scope. the initial value of undefined is the primitive value undefined. in modern browsers (javascript 1.8.5 / firefox 4+), undefined is a non-configurable, non-writable property, per the ecmascript 5 specification. (even when this is not the case, avoid overriding it.) a variable that has not been assigned a value is of
type undefined. a method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. a function returns undefined if a value was not returned. be careful. while it is possible to use it as an identifier (variable name) in any scope other than the global scope (because undefined is not a reserved word), doing so is a very bad idea that will make your c...
...turns undefined if a value was not returned. be careful. while it is possible to use it as an identifier (variable name) in any scope other than the global scope (because undefined is not a reserved word), doing so is a very bad idea that will make your code difficult to maintain and debug. // don't do this // logs "foo string" (function() { var undefined = 'foo'; console.log(undefined,
typeof undefined); })(); // logs "foo string" (function(undefined) { console.log(undefined,
typeof undefined); })('foo'); examples strict equality and undefined you can use undefined and the strict equality and inequality operators to determine whether a variable has a value. in the following code, the variable x is not initialized, and the if statement evaluates to true. var x; if (x === un...
...And 3 more matches
delete operator - JavaScript
pression should evaluate to a property reference, e.g.: delete object.property delete object['property'] parameters object the name of an object, or an expression evaluating to an object. property the property to delete. return value true for all cases except when the property is an own non-configurable property, in which case, false is returned in non-strict mode. exceptions throws
typeerror in strict mode if the property is an own non-configurable property. description unlike what common belief suggests (perhaps due to other programming languages like delete in c++), the delete operator has nothing to do with directly freeing memory. memory management is done indirectly via breaking references. see the memory management page for more details. the delete operator removes a gi...
... for more details. the delete operator removes a given property from an object. on successful deletion, it will return true, else false will be returned. however, it is important to consider the following scenarios: if the property which you are trying to delete does not exist, delete will not have any effect and will return true. if a property with the same name exists on the object's proto
type chain, then, after deletion, the object will use the property from the proto
type chain (in other words, delete only has an effect on own properties). any property declared with var cannot be deleted from the global scope or from a function's scope. as such, delete cannot delete any functions in the global scope (whether this is part from a function definition or a function expression). fun...
...onsole.log(delete employee.name); // returns true console.log(delete employee.age); // returns true // when trying to delete a property that does // not exist, true is returned console.log(delete employee.salary); // returns true non-configurable properties when a property is marked as non-configurable, delete won't have any effect, and will return false. in strict mode this will raise a
typeerror. var employee = {}; object.defineproperty(employee, 'name', {configurable: false}); console.log(delete employee.name); // returns false var, let, and const create non-configurable properties that cannot be deleted with the delete operator: var nameother = 'xyz'; // we can access this global property using: object.getownpropertydescriptor(window, 'nameother'); // output: object {value...
...And 3 more matches
let - JavaScript
console.log(this.y); // undefined emulating private members in dealing with constructors it is possible to use the let bindings to share one or more private members without using closures: var thing; { let privatescope = new weakmap(); let counter = 0; thing = function() { this.someproperty = 'foo'; privatescope.set(this, { hidden: ++counter, }); }; thing.proto
type.showpublic = function() { return this.someproperty; }; thing.proto
type.showprivate = function() { return privatescope.get(this).hidden; }; } console.log(
typeof privatescope); // "undefined" var thing = new thing(); console.log(thing); // thing {someproperty: "foo"} thing.showpublic(); // "foo" thing.showprivate(); // 1 the same privacy pattern with closures over local variab...
...e not initialized until their definition is evaluated. accessing the variable before the initialization results in a referenceerror. the variable is in a "temporal dead zone" from the start of the block until the initialization is processed. ...
...results in a referenceerror. the variable is in a "temporal dead zone" from the start of the block until the initialization is processed. ...
...And 3 more matches
Web audio codec guide - Web media technologies
for optimal cross-platform support of video and audio conferencing, and to integrate better with legacy telecommunication solutions. see codecs used by webrtc for details. for information about the fundamental concepts behind how digital audio works, see the article digital audio concepts. common codecs the list below denotes the codecs most commonly used on the web and which containers (file
types) support them. if all you need to know is which codecs are even possible to use, this is for you. of course, individual browsers may or may not choose to support all of these codecs, and their support for which container
types can use them may vary as well. in addition, browsers may choose to support additional codecs not included on this list. codec name (short) full codec name ...
...tion about these and other features of audio data, see audio data format and structure in digital audio concepts. the effect of codec configuration on encoded audio output audio codecs typically employ cleverly-designed and highly-complex mathematical algorithms to take source audio data and compress it to take substantially less space in memory or network bandwidth. in addition to choosing the
type of encoder to use, you may have the opportunity to adjust the encoder using parameters that choose specific algorithms, tune those algorithms, and specify how many passes to apply while encoding. audio encoder configuration effects on quality and size feature effect on quality effect on size lossless compression no loss of fidelity unlikely to get more than 40-...
...ng at their basic capabilities and their primary use cases. aac (advanced audio coding) the advanced audio coding (aac) codec is defined as part of the mpeg-4 (h.264) standard; specifically, as part of mpeg-4 part 3 and mpeg-2 part 7. designed to be able to provide more compression with higher audio fidelity than mp3, aac has become a popular choice, and is the standard format for audio in many
types of media, including blu-ray discs and hdtv, as well as being the format used for songs purchased from online vendors including itunes. aac has a number of profiles that define methods of compressing audio for specific use cases, including everything from high quality surround sound to low-fidelity audio for speech-only use. as a patent-encumbered format, aac support is somewhat less predictabl...
...And 3 more matches
begin - SVG: Scalable Vector Graphics
lue-list> default value 0s animatable no the definition of <begin-value-list> is the same as for the other animation elements. ...
...0" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attribute
type="xml" attributename="width" to="100" begin="0s" dur="8s" fill="freeze" /> </rect> <rect x="35" y="60" height="15" width="0"> <animate attribute
type="xml" attributename="width" to="75" begin="2s" dur="6s" fill="freeze" /> </rect> <rect x="60" y="85" height="15" width="0"> <animate attribute
type="xml" attributename="width" to="50" begin="4s" dur="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <lin...
...".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> begin-1-offset.svg syncbase 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 attribute
type="xml" attributename="width" to="50" id="first" begin="0s;third.end" dur="4s" /> </rect> <rect x="60" y="60" height="15" width="0"> <animate attribute
type="xml" attributename="width" to="25" id="second" begin="first.end" dur="2s" /> </rect> <rect x="85" y="85" height="15" width="0"> <animate attribute
type="xml" attributename="widt...
...And 3 more matches
format - SVG: Scalable Vector Graphics
ef> context notes value <string> default value none animatable no <string> this value specifies the format of the given font. ...
... value <string> default value none animatable no <string> this value specifies the format of the given font. ...
...string> default value none animatable no <string> this value specifies the format of the given font. ...
...And 3 more matches
values - SVG: Scalable Vector Graphics
the values attribute has different meanings, depending upon the context where itʼs used, either it defines a sequence of values used over the course of an animation, or itʼs a list of numbers for a color matrix, which is interpreted differently depending on the
type of color change to be performed. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <fecolormatrix> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, values is a list of values defining the sequence of values over the course of the animation. if this attribute is specified, any from, to, and by attribute values set on the element are ignored. value <list-of-values> default...
...atetransform>, values is a list of values defining the sequence of values over the course of the animation. if this attribute is specified, any from, to, and by attribute values set on the element are ignored. value <list-of-values> default value none animatable no <list-of-values> the value holds a semicolon-separated list of one or more values. ...
...ored. value <list-of-values> default value none animatable no <list-of-values> the value holds a semicolon-separated list of one or more values. the
type of the values is defined by the href and attributename attributes. fecolormatrix for the <fecolormatrix> element, values is a list of numbers interpreted differently depending on the value of the
type attribute. ...
...And 3 more matches
<a> - SVG: Scalable Vector Graphics
, svg|a:active { outline: dotted 1px blue; } since this element shares its tag name with html's <a> element, selecting a with css or queryselector may apply to the wrong kind of element. try the @namespace rule to distinguish the two. attributes download instructs browsers to download a url instead of navigating to it, so the user will be prompted to save it as a local file. ...
...selecting a with css or queryselector may apply to the wrong kind of element. try the @namespace rule to distinguish the two. attributes download instructs browsers to download a url instead of navigating to it, so the user will be prompted to save it as a local file. value
type: <string> ; default value: none; animatable: no href the url or url fragment the hyperlink points to. value
type: <url> ; default value: none; animatable: yes hreflang the human language of the url or url fragment that the hyperlink points to. value
type: <string> ; default value: none; animatable: yes ping a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background). typically used for tracking. for a more w...
... url fragment that the hyperlink points to. value
type: <string> ; default value: none; animatable: yes ping a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background). typically used for tracking. for a more widely-supported feature addressing the same use cases, see navigator.sendbeacon(). value
type: <list-of-urls> ; default value: none; animatable: no referrerpolicy which referrer to send when fetching the url. ...
...And 3 more matches
<style> - SVG: Scalable Vector Graphics
nt. svg's style element has the same attributes as the corresponding element in html (see html's <style> element). ...
...the same attributes as the corresponding element in html (see html's <style> element). ...
... html (see html's <style> element). html,body,svg { height:100%; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes
type this attribute defines
type of the style sheet language to use as a media
type string. ...
...And 3 more matches
<svg> - SVG: Scalable Vector Graphics
{ height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> <circle cx="50" cy="50" r="40" /> <circle cx="150" cy="50" r="4" /> <svg viewbox="0 0 10 10" x="200" width="100"> <circle cx="5" cy="5" r="4" /> </svg> </svg> attributes baseprofile deprecated since svg 2 the minimum svg language profile that the document requires. ...
...rg/2000/svg" stroke="red" fill="grey"> <circle cx="50" cy="50" r="40" /> <circle cx="150" cy="50" r="4" /> <svg viewbox="0 0 10 10" x="200" width="100"> <circle cx="5" cy="5" r="4" /> </svg> </svg> attributes baseprofile deprecated since svg 2 the minimum svg language profile that the document requires. value
type: <string> ; default value: none; animatable: no contentscript
type deprecated since svg 2 the default scripting language used by the svg fragment. value
type: <string> ; default value: application/ecmascript; animatable: no contentstyle
type deprecated since svg 2 the default style sheet language used by the svg fragment. value
type: <string> ; default value: text/css; animatable: no height the displayed height of the rectangular viewport. (not the height ...
...lt scripting language used by the svg fragment. value
type: <string> ; default value: application/ecmascript; animatable: no contentstyle
type deprecated since svg 2 the default style sheet language used by the svg fragment. value
type: <string> ; default value: text/css; animatable: no height the displayed height of the rectangular viewport. (not the height of its coordinate system.) value
type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio how the svg fragment must be deformed if it is displayed with a different aspect ratio. ...
...And 3 more matches
<textPath> - SVG: Scalable Vector Graphics
h" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <!-- </defs> --> <text> <textpath href="#mypath"> quick brown fox jumps over the lazy dog. </textpath> </text> </svg> attributes href the url to the path or basic shape on which to render the text. if the path attribute is set, href has no effect. ...
...ps over the lazy dog. </textpath> </text> </svg> attributes href the url to the path or basic shape on which to render the text. if the path attribute is set, href has no effect. value
type: <url> ; default value: none; animatable: yes lengthadjust where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves. value
type: spacing|spacingandglyphs; default value: spacing; animatable: yes method which method to render individual glyphs along the path. ...
...f the path attribute is set, href has no effect. value
type: <url> ; default value: none; animatable: yes lengthadjust where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves. value
type: spacing|spacingandglyphs; default value: spacing; animatable: yes method which method to render individual glyphs along the path. value
type: align|stretch ; default value: align; animatable: yes path the path on which the text should be rendered. value
type: <path_data> ; default value: none; animatable: yes side which side of the path the text should be rendered. ...
...And 3 more matches
<tspan> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> <style> text { font: italic 12px serif; } tspan { font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana! </text> </svg> attributes x the x coordinate of the starting point of the text baseline. ...
...; } tspan { font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana! ...
...banana! ...
...And 3 more matches
Example - SVG: Scalable Vector Graphics
sition. combined, we get this very natural-looking behavior. this is done completely in w3c standards–xhtml, svg, and javascript–no flash or any vendor-specific extensions. this example should work in firefox 1.5 and above. ...
... mote tries to move away from the average mote position. combined, we get this very natural looking behavior. </p> <p> this is done completely in w3c standards–xhtml, svg and javascript–no flash or any vendor specific extensions. currently, this will work in mozilla firefox version 1.5 and above. </p> <div> (c) 2006 <a id='emailme' href='#'>nick johnson</a> <script
type='text/javascript'> <![cdata[ // foil spam bots var email = '@riovia.net'; email ='nick' + email; document.getelementbyid('emailme').href = 'mailto:'+email; ]]> </script> this software is free for you to use in any way whatsoever, and comes with no warranty at all. </div> <form action="" onsubmit="return false;"> <p> <label>number of motes:</label> <input id='n...
...rn false;"> <p> <label>number of motes:</label> <input id='num_motes' value='5'/> <br/> <label>max. velocity:</label> <input id='max_velocity' value='15'/> <br/> <label>attraction to cursor:</label> <input id='attract_cursor' value='6'/> <br/> <label>repulsion from peers:</label> <input id='repel_peer' value='5'/> <br/> </p> </form> <script
type='text/javascript'> <![cdata[ // array of motes var motes; // get the display element. function display() { return document.getelementbyid('display'); } // determine dimensions of the display element. // return this as a 2-tuple (x,y) in an array function dimensions() { // our rendering element var display = display(); var width = parseint( display.getattributen...
...And 3 more matches
Private Properties - Archive of obsolete content
x each private property name with an underscore. consider the following example: function point(x, y) { this._x = x; this._y = y; } the properties _x and _y are intended to be private, and should only be accessed by member functions. to make a private property readable/writable from any function, it's common to define getter/setter functions for the property, respectively: point.proto
type.getx = function () { return this._x; }; point.proto
type.setx = function (x) { this._x = x; }; point.proto
type.gety = function () { return this._y; }; point.proto
type.sety = function (y) { this._y = y; }; the above technique is simple and clearly expresses intent. however, the use of an underscore prefix is just a coding convention and is not enforced by the language: there is...
... function point(_x, _y) { this.getx = function () { return _x; }; this.setx = function (x) { _x = x; }; this.gety = function () { return _y; }; this.sety = function (y) { _y = y; }; } note that this technique requires member functions that need access to private properties to be defined on the object itself, instead of its proto
type. this is slightly less efficient than using the underscore convention, but not significantly for most applications. the advantage of this technique is that it offers more protection: there is no way for the user to access a private property, except by using its getter or setter function. however, the use of closures makes private properties too restrictive: since there is no way to access variab...
... object, called a namespace, and then store the namespace as a private property on the original object. ...
...And 2 more matches
context-menu - Archive of obsolete content
me match pattern strings that you use with the page-mod include property. read more about patterns. predicatecontext(predicatefunction) predicatefunction is called when the menu is invoked, and the context occurs when the function returns a true value. the function is passed an object with properties describing the menu invocaton context. array an array of any of the other
types. this context occurs when all contexts in the array occur. menu items also have a context property that can be used to add and remove declarative contexts after construction. for example: var context = require("sdk/context-menu").selectorcontext("img"); mymenuitem.context.add(context); mymenuitem.context.remove(context); when a menu item is bound to more than one context, it appears in ...
...u. you can use it to determine whether your item should be shown. you can both specify declarative contexts and listen for contexts in a content script. your context listener is called even if any declarative contexts are not current (since firefox 36). if you combine selectorcontext and the "context" event, be aware that the node argument passed to the "context" event will not always match the
type specified in selectorcontext. selectorcontext will match if the menu is invoked on the node specified or any descendant of that node, but the "context" event handler is passed the actual node on which the menu was invoked. the example above works because <img> elements can't contain other elements, but in the example below, node.nodename is not guaranteed to be "p" - for example, it won't be "p"...
...= getmostrecentbrowserwindow().document.queryselectorall(".addon-context-menu-item[value^='"+ uuidstr +"']"); for(var i=0; i < cmitems.length; i++) cmitems[i].tooltiptext = cmitems[i].value.substring(36); } }); globals constructors item(options) creates a labeled menu item that can perform an action when clicked. parameters options : object required options: name
type label string the item's label. it must either be a string or an object that implements tostring(). optional options: name
type image string the item's icon, a string url. the url can be remote, a reference to an image in the add-on's data directory, or a data uri. data string an optional arbi...
...And 2 more matches
core/promise - Archive of obsolete content
(url); timeout(tweets, 20).then(function(data) { ui.display(data); }, function() { alert('network is being too slow, try again later'); }); alternative promise apis there may be cases where you will want to provide more than just then method on your promises. in fact some other promise frameworks do that. such use cases are also supported. ...
...g too slow, try again later'); }); alternative promise apis there may be cases where you will want to provide more than just then method on your promises. in fact some other promise frameworks do that. such use cases are also supported. earlier described defer may be passed optional proto
type argument, in order to make the returned promise and all the subsequent promises decendents of that proto
type: let { promise, resolve } = defer({ get: function get(name) { return this.then(function(value) { return value[name]; }); } }); promise.get('foo').get('bar').then(console.log); resolve({ foo: { bar: 'taram !!' } }); // => 'taram !!' also promised function maybe be passed a second optional proto
type argument to achieve the same effect. treat all values as promises module pro...
... also promises. if you pass it a promise it will return a new identical one: const { resolve } = require('sdk/core/promise'); resolve(resolve(resolve(3))).then(console.log); // => 3 this construct may look strange at first, but it becomes quite handy when writing functions that deal with both promises and values. in such cases it's usually easier to wrap value into promise than branch on value
type: function or(a, b) { var second = resolve(b).then(function(bvalue) { return !!bvalue }); return resolve(a).then(function(avalue) { return !!avalue || second; }, function() { return second; }) } note: we could not use promised function here, as they reject returned promise if any of the given arguments is rejected. if you need to customize your promises even further you may pass...
...And 2 more matches
stylesheet/style - Archive of obsolete content
ents style modifications via stylesheet file(s) or/and css rules. stylesheet file url(s) are verified to be local to an add-on, while css rules are verified to be a string or array of strings. the style created can be applied to a content by calling attach, and removed using detach. those functions are part of content/mod module. ...
...it accepts the following values: "agent", "user" and "author". if not provided, the default value is "author". style properties source an array of strings that contains the css rule(s) specified in the constructor's option; null if no source option was given to the constructor. ...
...it accepts the following values: "agent", "user" and "author". if not provided, the default value is "author". style properties source an array of strings that contains the css rule(s) specified in the constructor's option; null if no source option was given to the constructor. this property is read-only. ...
...And 2 more matches
ui/button/action - Archive of obsolete content
out this, see the api documentation for state(). destroying buttons when you've finished with a button, destroy it by calling its destroy() method. after that, any attempts to access any of its properties or to call any of its methods will throw exceptions. globals constructors actionbutton(options) creates an action button. parameters options : object required options: name
type id string the button's id. this is used internally to keep track of this button. the id must be unique within your add-on. label string the button's human-readable label. when the button is in the toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend. icon url, strin...
...disabled buttons appear disabled in the ui, and do not respond to clicks. defaults to false. onclick function click handler for the button. badge number or string new in firefox 36. badge to attach to the button. the badge can contain as many...
...d with the currently active tab: console.log(button.state("tab")); this object represents a snapshot of the state at the time state() is called. it is not kept up to date with changes made to the button: button.label = "foo"; var state = button.state(button); button.label = "bar"; console.log(state.label) // foo on() add a listener to an event emitted by the button. the button only emits one
type of event, click: button.on("click", handleclick) function handleclick(state) { console.log("button '" + state.label + "' was clicked"); } parameters event : string the event to listen for. action buttons only emit one
type of event, "click". listener : function function that will be called on click. once() assign a listener to the first occurrence only of an event emitted by the button...
...And 2 more matches
File I/O - Archive of obsolete content
"dir" in the user's profile folder. you can also create a directory explicitly; for more information refer to nsifile.create(). creating temporary files to create a temporary file, use nsifile.createunique(): components.utils.import("resource://gre/modules/fileutils.jsm"); var file = fileutils.getfile("tmpd", ["suggestedname.tmp"]); file.createunique(components.interfaces.nsifile.normal_file_
type, fileutils.perms_file); // do whatever you need to the created file alert(file.path); user input via nsifilepicker the file picker component, nsifilepicker, can be used to open standard open / save dialogs. it returns the user-specified file as nsifile. nsifile and path strings you can use nsifile.path to get a platform-specific path string, for example "c:\windows\system32" or "/usr/share".
...mponents.utils.import("resource://gre/modules/netutil.jsm"); netutil.asyncfetch(file, function(inputstream, status) { if (!components.issuccesscode(status)) { // handle error! return; } // the file data is contained within inputstream. ...
...s/netutil.jsm"); netutil.asyncfetch(file, function(inputstream, status) { if (!components.issuccesscode(status)) { // handle error! return; } // the file data is contained within inputstream. // you can read it into a string with var data = netutil.readinputstreamtostring(inputstream, inputstream.available()); }); read with content
type hint it's useful to provide a content
type hint to prevent the file system from doing a potentially expensive content
type look up (which would be synchronous i/o). in this case an nsichannel object has to be explicitly created from the file: components.utils.import("resource://gre/modules/netutil.jsm"); // content
type hint is useful on mobile platforms where the filesystem // would otherwise try to determine the content
type. var chann...
...And 2 more matches
HTML in XUL for rich tooltips - Archive of obsolete content
ynamic html in xul tooltip insert the appropriate code from below into your xul overlay. ...
...our customized tooltiphtml attribute for each element can be set at any time. var htmltip = { onload: function() { //at any point you can save an html string to a xul attribute for later injection into the tooltip document.getelementbyid("htmltip1").setattribute("too...
...ptableunescapehtml) .parsefragment(txt, false, null, div); //attach the dom object to the html div element div.appendchild(injecthtml); } } window.addeventlistener('load', htmltip.onload, false); in the xul overlay, xmlns:html is used to enable html tags to be used inside the xul. our enhanced xul tooltip is an element that is written ahead of time, and it contains an html div element whose
type attribute lowers its privileges to being that content element, although it is an element of chrome. this is recommended for security reasons, especially if remote html is to be inserted. a number of menuitems have a tooltip attribute pointing to the same tooltip. that tooltip is empty now, but we will use the mouseover event to dynamically populate the tooltip (which is about to be shown) with a...
...And 2 more matches
HTML to DOM - Archive of obsolete content
onents.interfaces.nsiscriptableunescapehtml) .parsefragment(ahtmlstring, false, null, body)); return body; } it works by creating a content-level (this is safer than chrome-level) <div> in the current page, then parsing the html fragment and attaching that fragment to the <div>. the <div> is returned, and it is never actually appended to the current page. ...
...see using a hidden iframe element to parse html to a window's dom below. parsing complete html to dom loading an html document seems much simpler if it's loaded using the xmlhttprequest object. for that matter, we're going to load our html document first: var request = xmlhttprequest(); request.open("get", "http://example.org/file.html", false); request.send(null); o...
... html to a window's dom sample code may need more work. create your own function using unique name, id, and so forth. ...
...And 2 more matches
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
l functionality. reasons why you might want to include c++ components in your extension include: need for high-performance beyond what can be delivered by javascript code. use of third-party libraries written in c or c++. use of mozilla interfaces that are not exposed via xpcom (e.g. nspr). note: with the modern jit javascript engine in gecko and js-c
types more extension code can be written only in javascript than ever before. please consider all of your options carefully before deciding to use native code (c++) in your extension. in addition, binary components need to be recompiled for every major firefox release, which can be frustrating. this article describes how to set up the development environment for a large, complex firefox extens...
...if you have multiple modules, make absolutely sure that you use a different value for xpidl_module for each one. otherwise the first module's xpt file will be overwritten by the second and you'll get ns_error_xpc_bad_iid errors when you try to access its idl interfaces from your code. the files under exports are copied directly to the /mozilla/$(moz_objdir)/...
...when you try to access its idl interfaces from your code. the files under exports are copied directly to the /mozilla/$(moz_objdir)/dist/include/ directory and are thus accessible from other modules (the value of moz_objdir is defined in /mozilla/.mozconfig). xpidlsrcs are run through the idl processor, and the generated c++ headers are copied into the same include directory. in addition, an xpt (
type library) file is generated and placed in the components/ subdirectory of your extension. source files now it's time to create the makefile and source files in the src/ subdirectory. if you're implementing interfaces that you've described using idl, the easiest way to do this is to leave the src/ directory empty and run make on the public/ directory only; this will be explained short...
...And 2 more matches
Displaying web content in an extension without security issues - Archive of obsolete content
ion that needs to display web content (which is always potentially dangerous) will use all of them. displaying untrusted data as content in firefox, there is a distinction between chrome and content documents. the top document in a window is always a chrome document. if you look at the frames it loads, those will usually be chrome documents as well. however, if the document is loaded into <iframe
type="content"> or <browser
type="content">, it will be considered a content document, and so will be all the frames it loads (the "
type" attribute is ignored at that point). so if we look at the frame hierarchy there is a boundary between chrome and content, and at that boundary a number of security mechanisms apply. in particular, a content document can only go up in the frame hierarchy until the to...
...ocument. if you open "chrome://foo/content/foo.xul" in the browser, it will open as a content document despite having extended privileges. this also means that you won’t be able to establish a security boundary between your extension and untrusted data if your extension opens as a tab in the browser — so displaying your extension in a browser tab is a bad choice. note: dynamic changes of the "
type" attribute have no effect, the frame
type is read out when the frame element is inserted into the document and never again. so the usual rule is: don’t change the value of the "
type" attribute. but if you really have to do this, you will also have to remove the frame element from the document and insert it back. not giving privileges to documents that contain untrusted data the privileges that ...
...e any privileges at all. here the "data:" protocol is useful. this protocol is special because it inherits the privileges from its parent document. however, if a "data:" document is the topmost content document, there is no parent document (remember, content documents have no access to the chrome documents above them) and consequently no privileges. ...
...And 2 more matches
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
then select open windows:quicknote.xul:files on the top-left of the screen. double-click on quicknote.js to open it in source-code view (figure 2). fixme: figure 2: selecting source code inserting breakpoints now you’ll want to set some breakpoints. try inserting one within the quicknote_savenote function, around line 345 (figure 3). fixme: figure 3: inserting a breakpoint start debugger
type in some text into the quicknote screen, and then select save current tab from the menu. this should halt the program at the spot where you inserted the breakpoint with venkman, and start the debugger. the local variables screen should always display variables and objects during step-by-step execution. with functions that include a lot of variables, this will be hard to read, so you can point out...
...t use any filenames that have whitespace in them. usage an rpn calculator we’re going to implement a simple rpn3 calculator in javascript to see how this can be used. on the program side, we’ll create a class called rpncalc. first we’ll sketch out a simple interface for it (listing 1). save this as a file called calc.js. listing 1: calc.js (stage 1) function rpncalc() { } rpncalc.proto
type = { init: function() { }, push: function(val) { }, plus: function() { }, pop: function() { } } implement the addition operation create test case begin by creating the test case. first, select the menu item tools:mozlab:open mozunit runner to bring up the mozunit window. select the menu item file:new, and save test_calc.js in the same directory as the file that is the test targ...
...('rpn calc testcase'); var module = new modulemanager(); var rpncalc = module.require('package', 'calc'); tc.tests = { '2 1 +': function() { var calc = new rpncalc.rpncalc(); calc.init(); calc.push(2); calc.push(1); calc.plus(); assert.equals(calc.pop(), 3); } } listing 3: additional content for calc.js function rpncalc() { this.stack = new array(); } rpncalc.proto
type = { init: function() { this.stack = new array(); }, push: function(val) { this.stack.push(number(val)); }, _letfunc: function(func) { a = this.pop(); b = this.pop(); this.push(func(a, b)); }, plus: function() { return this._letfunc(this._plus); }, _plus: function(a, b) { return a + b; }, pop: function() { return this.stack.pop(); } } check...
...And 2 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
lementns(elemns.namespace || jsontodom.defaultnamespace, elemns.shortname); // set element's attributes and/or callback functions (eg. onclick) for (var key in elemattr) { var val = elemattr[key]; if (nodes && key == "key") { nodes[val] = elem; continue; } var attrns = namespace(key); if (
typeof val == "function") { // special case for function attributes; don't just add them as 'on...' attributes, but as events, using addeventlistener elem.addeventlistener(key.replace(/^on/, ""), val, false); } else { // note that the default namespace for xml attributes is, and should be, blank (ie. they're not in any namespace) ...
...; function addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newitem); }; var jsontemplatebtn = ["xul:toolbarbutton", { id: "mytestbutton", class: "toolbarbutton-1",
type: "menu", label: "test button label", tooltiptext: "test button tooltip", removable: true, key: "mytestbutton123" }, [ "menupopup", { onpopupshowing: function(event) { addentrytopopup(this, document, window); } }, null ] ]; var capturednodes = {}; var toolbox = doc.getel...
... by giving them a 'key' attribute; for example: " + capturednodes.mytestbutton123); another example this here is another example of using jsontodom but in the html scope, a complex form is created with ease. ...
...And 2 more matches
JavaScript Object Management - Archive of obsolete content
located in a file of its own, so that you have this one js file that should be included in all of your xul files. we'll be using the placeholder ćnamespaceć below. this needs to be replaced with an identifier name which is unique to your add-on. if your add-on is called sergeant pepper, for instance, then sgtpepper would be a good namespace name. /** * ćnamespaceć namespace. */ if (
typeof ćnamespaceć == "undefined") { var ćnamespaceć = {}; }; note: the naming standard that we normally follow is that the first part of the namespace corresponds to the development group (or company), and the second to the specific project. however, most extensions are small projects by individuals, so these examples follow a more practical approach of having just one namespace with ...
...lude functions in any namespace, since namespaces are just regular js objects. that should come in handy when you have general utility functions or properties that you want to use across all objects within the namespace. for instance, there are frequently used xpcom services such as the observer service that can be included as members in the namespace: /** * ćnamespaceć namespace. */ if (
typeof ćnamespaceć == "undefined") { var ćnamespaceć = { /** * initializes this object. */ init : function() { this.obsservice = cc["@mozilla.org/observer-service;1"].getservice(ci.nsiobserverservice); } }; ćnamespaceć.init(); }; js objects can also be treated as string-indexed arrays: // equivalent. ćnamespaceć.hello = {}; ćnamespa...
... protocol. just like with the chrome, we define the package name and then a path. to keep things simple, just locate the jsm files in a modules directory under the root of our project. in order to access a file messagecount.js in this directory, the url would be: resource://xulschoolhello/messagecount.js code modules are regular js files, so there's nothing new in regards to naming or file
types. mozilla has adopted a standard of using the extension .jsm for these files, but they say .js is fine as well. to keep things simple, specially regarding code editors and default file associations in the developer's system, we have decided to stick with .js. download this version of the hello world project with jsm to see the changes you need to make to the build system in order to include the ...
...And 2 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
install and uninstall code is only provided for restartless add-ons but can be adapted for traditional add-ons. ...
...an be adapted for traditional add-ons. search.xml <?xml version="1.0" encoding="utf-8"?> <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>example engine</shortname> <description>example search engine</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16"
type="image/png">data:image/png;base64, ... ...
...> <shortname>example engine</shortname> <description>example search engine</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16"
type="image/png">data:image/png;base64, ... ...
...And 2 more matches
Adding preferences to an extension - Archive of obsolete content
etails on how observers work, read up on the nsiobserver interface. observe: function(subject, topic, data) { if (topic != "nspref:changed") { return; } switch(data) { case "symbol": this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.refreshinformation(); break; } }, the topic parameter indicates what
type of event occurred. if it's not nspref:changed, we simply ignore the event, since all we're interested in is changes to the values of our preferences. once we've established that the event is in fact a preference change, we look at the data parameter, which contains the name of the preference that changed. in our example, we only have one preference, but you can monitor as many preferences as you...
...he browser window is loaded and unloaded. window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false); window.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. ...
...the options dialog. <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"
type="text/css"?> <prefwindow id="stockwatcher2-prefs" title="stockwatcher 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol"
type="string"/> </preferences> <hbox align="center"> <label control="symbol" value="stock to watch: "/> <textbox preference="pref_symbol" id="symbol" maxlength="4"/> </hbox> </prefpane> </prefwindow> the <preferences> block establishes all the settings we implement as well as their
types. in our case, we have a single preference, the stock symbol to monitor. preferences are identifie...
...And 2 more matches
Index of archived content - Archive of obsolete content
ocesses getting started modules private properties firefox compatibility module structure of the sdk porting the library detector program id 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 hotkeys indexed-db l10n notifications page-mod page-wor...
... content/worker core/heritage core/namespace core/promise dev/panel event/core event/target frame/hidden-frame frame/utils fs/path io/byte-streams io/file io/text-streams lang/functional lang/
type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks places/favicon places/history platform/xpcom preferences/event-target preferences/service remote/child remote/parent stylesheet/style sty...
... xulrunner 1.9 release notes xulrunner 1.9.1 release notes xulrunner 1.9.2 release notes xulrunner 2.0 release notes xulrunner faq xulrunner hall of fame xulrunner tips xulrunner/old releases toolkit.defaultchromefeatures toolkit.defaultchromeuri toolkit.singletonwindow
type xulauncher ant script to assemble an extension application/http-index-format specification calicalendarview calicalendarviewcontroller califile
type mozilla.dev.platform faq reftest opportunities files symsrv_convert xbdesignmode.js archi...
...And 2 more matches
Drag and Drop Example - Archive of obsolete content
gecko 1.9.1 (firefox 3.5) and later supports a newer and simpler api. an example of implementing drag and drop will be implemented in this section. dragging elements around here, we'll create a simple board where items from a palette can be dragged onto the board. the user can click on one of several xul elements on the palette and drag it onto a stack element to create an element of a particular
type. first, we'll add the wrapper scripts: <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> an additional script file dragboard.js is included which will contain the code we will write ourselves. the board will be created using a stack element. we'll use some style properties to set the width and height of...
...t, listobserver)"/> </vbox> the nsdraganddrop object will be called to do most of the work. we'll create a listobserver object that will set the data to be dragged. note that each button here has an additional elem attribute. this is a made-up attribute. xul doesn't handle it and just ignores it, but we can still retrieve it with the dom's getattribute function. we need this so that we know what
type of element to create when dragging. next, we'll define the two listener objects. first, the listobserver which needs a function to handle the start of the drag. var listobserver = { ondragstart: function (event, transferdata, action) { var txt = event.target.getattribute("elem"); transferdata.data = new transferdata(); transferdata.data.adddataforflavour("text/unicode", txt); } } ...
...ransfer object. the elem attribute is retrieved from the target of the drag event. the target will be the element that had the drag start on. we'll use the value of this attribute as the data of the drag. the boardobserver will need three functions, getsupportedflavours, ondragover and ondrop. the ondrop function will grab the data from the drag session and create a new element of the appropriate
type. var boardobserver = { getsupportedflavours : function () { var flavours = new flavourset(); flavours.appendflavour("text/unicode"); return flavours; }, ondragover: function (event, flavour, session) {}, ondrop: function (event, dropdata, session) { if (dropdata.data != "") { var elem = document.createelement(dropdata.data); event.target.appendchild(elem); ...
...And 2 more matches
Layout System Overview - Archive of obsolete content
his presentation is typically formatted in accordance with the requirements of the css1 and css2 specifications from the w3c. presentation formatting is also required to provide compatibility with legacy browsers (microsoft internet explorer and netscape navigator 4.x). the decision about when to apply css-specified formatting and when to apply legacy formatting is controlled by the document's doc
type specification. these layout modes are referred to as 'standards' and 'navquirks' modes. (doc
type and modes are explained in more detail in article mozilla's doc
type sniffing. galley and page presentations: the presentation generally is constrained by the width of the window in which the presentation is to be displayed, and a height that extends as far as necessary. this is referred to as the gall...
...gement of frames. frames are an encapsulation of a region on the screen, a region that contains geometry (size and location, stacking order). generally frames correspond to the content elements, though there is often a one-to-many correspondence between content elements and frames. layout creates frames for content based on either the specific html rules for an element or based on the css display
type of the element. in the case of the html-specific elements, the frame
types that correspond to the element are hard-coded, but in the more general case where the display
type is needed, the layout system must determine that display
type by using the style system. a content element is passed to the style system and a request is made to resolve the style for that element. this causes the style syste...
...nipulation is the html editor. layout is used to implement both a full-blown wysiwyg html editor, and a single and multi-line text entry control. in both cases, the content is manipulated by the user (via the dom) and the resulting visual impacts must be shown as quickly as possible, without disconcerting flicker or other artifacts that might bother the user. consider a text entry field: the user
types text into a form on the web. as the user
types a new character it is inserted into the content model. this causes layout to be notified that a new piece of content has been entered, which causes layout to create a new frame and format it. this must happen very fast, so the user's typing is not delayed. in the case of the wysiwyg html editor, the user expects that the modifications they make to t...
...And 2 more matches
Settings - Archive of obsolete content
pose to users. jetpack will automatically generate a user interface from this specification that users of your jetpack may use to customize the settings. the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
...cation that users of your jetpack may use to customize the settings. the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
...ings. the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
...And 2 more matches
New Security Model for Web Services - Archive of obsolete content
med "web-scripts-access.xml" in the root directory of the server that the sandboxed script requests to communicate with. it should be fairly easy for most providers of public resources to create. web scripts access statements the syntax of statements of the access file are as follows. <!element webscriptaccess (delegate?|allow*)> <!element delegate empty> <!element allow empty> <!attlist allow
type|from cdata #implied>. the root element the first element of the file should be the following: <wsa:webscriptaccess xmlns:wsa="http://www.mozilla.org/2002/soap/security"> delegation if the <delegate/> element is present then "web-scripts-access.xml" is required in the subdirectory for uris which are in a subdirectory. for example, if the script in question is "http://www.example.com/foo/bar...
...ss file also handles all resources in subdirectories. any syntax error in the document will result in the rest of the file to be ignored. since the commands only allow access, the order of processing the "allow" commands that were successfully parsed is never significant. allowing web script access to permit scripts to access the resources of this server, use the following command: <wsa:allow
type="<request-
type>" from ="<uri-prefix>"/> the
type of request, if specified, will be checked against the
type of request being requested by the script, such as "soap", "soapv", or "load".
types must not contain spaces. specify "any" as the
type to permit any requested
type of access to resources. the principle uri of the script will be checked for the specified uri prefix. if "from" is not speci...
...eing requested by the script, such as "soap", "soapv", or "load".
types must not contain spaces. specify "any" as the
type to permit any requested
type of access to resources. the principle uri of the script will be checked for the specified uri prefix. if "from" is not specified, then all scripts will be allowed. note: one can also use wild charater(s) in "from" value. for example: <wsa:allow
type="soapv" from="http://www.mozilla.org"/> this command allows soap requests with verification headers from scripts loaded from the domain www.mozilla.org. <wsa:allow
type="soapv" from="http://*.mozilla.org"/> this command allows soap requests with verification headers from scripts loaded from the domain with host name containing mozilla.org. that is, http://www.mozilla.org/, http://lxr.mozilla...
...And 2 more matches
Proxy UI - Archive of obsolete content
ormation in "related" ui. the "ok" button saves the preferences. the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy mode, then "related proxy mode" ui when needed. for the purposes of this document, "proxy mode" means both: whatever was selected in the ui (as opposed to the value of the network.proxy.
type. the underlying behavior. the currently available modes are based on "network.proxy.
type". for example, firefox 3: [ ] no proxy [ ] auto-detect proxy settings for this network [ ] manual proxy configuration: [ ] automatic proxy configuration url: behavior default value: "no proxy" is selected all other "
type" radio buttons are enabled, but not selected. "related" ui elements only two proxy mo...
...proxy autoconfiguration has a url field and a reload button. enabling and disabling related fields when a radio button is selected, the related ui elements are enabled (and editable). the previously selected radio button becomes unselected, and the related ui of the previous button is disabled (and is not editable). ...
... button. enabling and disabling related fields when a radio button is selected, the related ui elements are enabled (and editable). the previously selected radio button becomes unselected, and the related ui of the previous button is disabled (and is not editable). saving changes click "ok" to save changes to prefs. click "cancel" to discard changes. the radio buttons do not map to the proxy
type in order (due the evolution of the ui): proxy mode "network.proxy.
type" no proxy (direct) network.proxy.
type=0 auto-detect proxy settings... (wpad) network.proxy.
type=4 manual proxy configuration (manual) network.proxy.
type=1 automatic proxy configuration url (pac) network.proxy.
type=2 manual manual allows the entry of a proxy server hostname name and server. the entries are on a pe...
...And 2 more matches
Frequently Asked Questions - Archive of obsolete content
actually the second binding isn't always required, but unless you understand namespaces, we'd strongly recommend you include it. for more information see this link. if source code is displayed without a gray area at the top, or if you just see gibberish, then the problem is server misconfiguration. when servers send user agents an svg file they must tell the user agent that the file has the mime
type "image/svg+xml", and if the svg file is stored gzipped they must tell the browser that too. mozilla is strict about this, and no, it's not a bug. failing to respect the mime
types servers send is incorrect and has been a source of security holes in other browsers. mozilla will not be changing this behaviour. for more information on server configuration for svg see this link. why does mozilla sho...
...n you try to load svg files from some websites you may get a dialogue asking you "what should firefox do with this file?". this is either because your browser doesn't support svg (you must have mozilla firefox 1.5 or newer), or because the webpage/server isn't correctly telling mozilla that the file contains svg. for example, webpages that embed svg using the <object> or <embed> tags must have a '
type' attribute assigned with the correct svg mime
type of "image/svg+xml". if the mime
type specified is wrong (for example image/svg-xml) mozilla won't recognise it. if that isn't the problem, then it may be that the server hosting the website is misconfigured. for information on configuring servers for svg see this link. why am i asked to install a plug-in to view svg files? this is probably beca...
...correct this mistake or ask the document maintainer to correct it. how should i report bugs in mozilla svg? if you discover any problems with our svg implementation that you think we should know about then we'd like to hear from you. ...
...And 2 more matches
Menus - Archive of obsolete content
it is normally attached to a menubar or to a button. when the menu or button is clicked the menu is opened, listing the commands that are available. the user may select a command to invoke it, or may cancel the operation by pressing escape or clicking outside the menu. xul provides a number of tags for creating menus. these tags can be used to create menus which sit on a menubar or are attached to buttons. submenus may be created by nesting one menu inside of another. ...
...ments that a menupopup can be attached to. in each case, the menupopup element is placed as a direct child of the element. the following is a brief summary of these elements, examples of each will be provided later. menu the menu tag is used when placing menus on a menu bar. for example, the file and edit menus along the top of an application window (or the menubar on the top of screen). this
type of menu is usually used for commands that apply to the entire application. commands that don't apply at a given time should be disabled. however, the actual top level menus do not generally change for a given window. button a menu may be attached to a button by setting the
type attribute of the button to 'menu'. instead of creating a standard button, this will create a button with a small arrow...
...see menu buttons for more information. toolbarbutton toolbar buttons can also support menus. ...
...And 2 more matches
Sorting and filtering a custom tree view - Archive of obsolete content
this is example code for sorting and filtering a custom tree view, that is, a tree whose values are loaded via javascript. this will not work for other
types of trees, for example rdf-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. ...
...ew, that is, a tree whose values are loaded via javascript. this will not work for other
types of trees, for example rdf-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. ...
...e values are loaded via javascript. this will not work for other
types of trees, for example rdf-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. ...
...And 2 more matches
XML Templates - Archive of obsolete content
this indicates to the template builder that an xml source is being used as that the queries use syntax that is specific to xml. ...
...he datasources attribute should be set to the url of an xml document, either a local file or a remote web site. the ref attribute isn't currently used for xml sources, as the root of the document is always the starting point for xml queries; you should just set the ref attribute to a dummy value, for example '*' which is typically used. an example: <listbox datasources="people.xml" ref="*" query
type="xml"> <template> ... </template> <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 (fir...
...lius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> xml query syntax the query syntax is fairly simple for xml datasources. just place an expr attribute on the query element containing an xpath expression returns the set of results to output. here is an example: <listbox datasources="people.xml" ref="*" query
type="xml"> <template> <query expr="person"/> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the expr attribute is a very simple xpath expression which simply retrieves the person elements from within the datasource. as there are five in the xml document, five results will be generated. the action element defines the content to generate for each resu...
...And 2 more matches
Templates - Archive of obsolete content
attribute. when this attribute is present, an object called a builder is added to the element which is responsible for building the content from the template. in javascript you can access the builder object with the builder property, although usually you would only need to do this to have the builder regenerate the content in situations where it is not done automatically. there are two different
types of builders. the first is a content builder and is used in most situations, and the other is a tree builder which is used only for trees. content builder the content builder takes the content inside the template element and duplicates it for each row. for instance, if the user had ten bookmarks in the example above, ten label elements would be created and added as children of the vbox element.
... noticed that the third button is simply a button with hyphens on it. this is a separator in the bookmark list. in the way that we have been using it, the rdf bookmarks datasource supplies the separators as if they were just regular bookmarks. what we would really like to do is add a small amount of spacing instead of a button for separator resources. that means that we want to have two different
types of content be created, one
type for regular bookmarks and a second
type for separators. we can do this by using the rule element. we define a rule for each variation of elements that we want to have created. in our case, we would need a rule for bookmarks and a rule for separators. attributes placed on the rule element determine which rules apply to which rdf resource. when scanning for which ...
...in the first rule, bookmark separators are selected, as can b...
...And 2 more matches
Using the Editor from XUL - Archive of obsolete content
rts in editor.js, and the xbl binding for the editor element in editor.xml. something, somewhere, tells mozilla to open the composer window. editor.xul is loaded. in editor.xul, the <window> tag has an onload handler: onload="editoronload()". that causes the editoronload() javascript function to get executed when the xul is done loading. the xul contains an <editor> tag, e.g.: <editor
type="content-primary" id="content-frame" src="about:blank" flex="1"/> the attribute
type="content-primary" identifies this as the window content element, i.e. that which you get from window._content. having an id attribute, id="content-frame", allows us to find this element with document.getelementbyid("content-frame"), and to style it from css. editoronload() is called. it does some getting...
...es. the nseditorboxobject creates an nseditorshell, and holds the owning reference to it. through the magic of xbl, the xul bindings, and the nsieditorboxobject interface, you can get a javascript reference to the editorshell from the editor element with element.editorshell. we thus have an editorshell to play with. ...
... can get a javascript reference to the editorshell from the editor element with element.editorshell. we thus have an editorshell to play with. now we set up the editorshell by calling its init() method, telling it what
type of editor we want (text or html), pointing it at the webshellwindow to use, and telling it the content node that it lives on: editorshell.init(); editorshell.seteditor
type(editor
type); editorshell.webshellwindow = window; editorshell.contentwindow = window._content; the webshellwindow (a settable attribute on nsieditorshell) points to the top-level window element, from which the editorshell can get the xul document in which it is living. it needs this to poke the ui (e.g. for command state maintenance, starting and stopping the throbber etc.). the contentwind...
...And 2 more matches
XUL Questions and Answers - Archive of obsolete content
n the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument. is it possible to have 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. ...
...ersion="1.0"?> <?xml-stylesheet href="chrome://global/skin/"
type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell
type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell
type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell
type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listitem> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> </listhead> <listitem
type="checkbox" value="1...
...if user wants checkbox support for multicolumn lists, then they will have to implement one. ...
...And 2 more matches
The Implementation of the Application Object Model - Archive of obsolete content
ontent. what is rdf? rdf (pronounced r-d-f) has never been a ravening demon intent upon taking over the earth, although that does depend on who you ask. rdf stands for resource description framework, a rather intimidating name that doesn't do much to help the layman understand exactly what it does. rdf provides a very general mechanism for representing relationships between different disparate
types of data. the relationships between data are represented as a directed labeled graph structure. the data itself can be fed in from any number of different sources (e.g., from a local file system, from your bookmarks file, or from some remote downloadable rdf file), and can then be combined into a single graph. ok, so after that paragraph many of you probably still don't understand what rdf does, ...
...box:blah"/> which would specify a uri that pointed to a specific mailbox node. our architecture must know how to examine this localdata attribute to determine not only which kind of pluggable content needs to be instantiated, but that also has to determine which specific node should be instantiated. in order to accomplish this, our architecture has to have some sort of facility whereby different
types of content, e.g., mail and bookmarks, can register themselves as the appropriate content to be instantiated for a given uri. we could do this using a registry that can map strings to cids, so we have a story for instantiating our different content nodes. but now let's consider one of these nodes, e.g., nsmailelement. let's look at the set of interfaces that nsmailelement needs to implement in or...
...r to plug into than the 4-5 interfaces required if directly implementing the content tree interfaces. furthermore, should the content tree interfaces change, only this layer would need to be updated. the pluggable content, safe behind this layer, wouldn't have to change at all. one natural solution to try for implementing such a layer might be inheritance. however, in this xpcom world, where each
type of pluggable content is off in its own dll, there's no clean way to inherit functionality from some base class implementation, when that implementation must necessarily reside in a different dll, without introducing a code dependency between all pluggable content and the common base class. this inability to provide a cleanly inherited system argues for a different approach, namely that all conten...
...And 2 more matches
image - Archive of obsolete content
ge. more information is available in the xul tutorial. note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth. the new behavior aligns more with the html <img> element and shrinks both the width and height down proportionally. ...
... using maxheight or maxwidth. the new behavior aligns more with the html <img> element and shrinks both the width and height down proportionally. attributes onerror, onload, src, validate properties accessible
type, src style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror
type: script code this event is sent to an image element when an error occurs loading the image. image.onload
type: script code this event handler will be called on the image element when the image has finished loading. this applies whether the image is applied via the src attribute or the list-style-image style property. if you change the image, the event will fire again when the new image ...
...this would be useful if the images are stored remotely or you plan on swapping the image frequently. ...
...And 2 more matches
param - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] for sql templates, used to bind values to parameters specified within an sql statement. the value to bind should be text as a child of the param element. for more information, see query_parameters. attributes index, name,
type attributes index
type: integer the index within the sql statement of the parameter. ...
...mples | attributes | properties | methods | related ] for sql templates, used to bind values to parameters specified within an sql statement. the value to bind should be text as a child of the param element. for more information, see query_parameters. attributes index, name,
type attributes index
type: integer the index within the sql statement of the parameter. name
type: string the name of a parameter within the sql statement. ...
...sql statement. the value to bind should be text as a child of the param element. for more information, see query_parameters. attributes index, name,
type attributes index
type: integer the index within the sql statement of the parameter. name
type: string the name of a parameter within the sql statement. this name should appear within the query preceded by a colon. ...
...And 2 more matches
splitter - Archive of obsolete content
esizeafter, resizebefore, state, substate style classes tree-splitter examples <!-- this bar has some styling associated with it. the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse
type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked. if this attribute is not specified, the splitter will not cause a collapse. you should put a grippy element inside the splitter when it is used for collapsing. none no collapsing occurs. before when the grippy is clicked, the element immediately before the splitter in the same pare...
...s 0. after when the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0. both either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter. resizeafter
type: one of the values below this attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned. closest the element immediately to the right or below the splitter resizes. farthest the element that is the farthest away from the splitter to the right or below the splitter resizes. grow the elements to the right or below the s...
...t or below the splitter resizes. farthest the element that is the farthest away from the splitter to the right or below the splitter resizes. grow the elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size. flex the closest flexible element resizes. resizebefore
type: one of the values below this attribute indicates which element to the left or above the splitter should be resized when the splitter is repositioned. closest the element immediately to the left or above the splitter resizes. farthest the element that is the farthest away from the splitter to the left or above the splitter resizes. flex the closest flexible element resizes. ...
...And 2 more matches
stringbundle - Archive of obsolete content
ay 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 getformattedstring, getstring examples (example needed) attributes src
type: uri the uri of the property file that contains the localized strings. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrou...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties applocale obsolete since gecko 1.9.1
type: nsilocale returns the xpcom object which holds information about the user's locale. this is an object which implements nsilocale. src
type: url gets and sets the...
...e, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties applocale obsolete since gecko 1.9.1
type: nsilocale returns the xpcom object which holds information about the user's locale. this is an object 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. ...
...And 2 more matches
treecell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell in a tree. this element should be placed inside a treerow. you can set the text for the cell using the label attribute. more information is available in the xul tutorial. attributes editable, label, mode, properties, ref, src, value attributes editable
type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol
type="checkbox">. also useful for disabling editing of individual treecells. when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell. the tree and treecol must also be marked as editable in order for this to work. the tree must be a conte...
... changed, especially useful when <treecol
type="checkbox">. also useful for disabling editing of individual treecells. when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell. the tree and treecol must also be marked as editable in order for this to work. the tree must be a content tree for this to work on treecells. 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. mode
type: one of the values below for columns that are progress meters, this determines the
type of progress meter to use. none no progress meter is d...
...this will correspond to the value of an about attribute on an rdf container. ...
...And 2 more matches
application/http-index-format specification - Archive of obsolete content
rovide a generic, extensible file listing format that is principly machine readable. syntax every line in the file must conform to the following generic syntax: number: data where number is at least a three digit number (note that more digits are possible in the future) and data is separated from number by a colon and a space. the syntax of data is defined by the syntax spec for every number
type. if a number is encountered that a parser does not understand the parser is required to ignore that line. there is no line length limit. all lines must be terminated by a carriage return followed by a line feed. number codes 100 a human readable comment line. machine parsers should ignore this data. this data is not intended for display to the end user and is only meant as a comment to make ...
...lid 200 tokens note that all tokens are case insensitive. filename the name of file that can be used to retrieve the file when combined with the full path provided by the 300 line. white 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. ...
...e that all tokens are case insensitive. filename the name of file that can be used to retrieve the file when combined with the full path provided by the 300 line. white 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 ...
...And 2 more matches
NPN NewStream - Archive of obsolete content
target name of the target window or frame, or one of several special target names. for values, see npn_geturl. ...
... target name of the target window or frame, or one of several special target names. for values, see npn_geturl. ...
... target name of the target window or frame, or one of several special target names. for values, see npn_geturl. stream stream to be created by the browser. ...
...And 2 more matches
NPP_New - Archive of obsolete content
instance contains instance-specific private data for the plug-in and the browser. this data is stored in instance->pdata. mode display mode of plug-in. ...
... instance contains instance-specific private data for the plug-in and the browser. this data is stored in instance->pdata. mode display mode of plug-in. ...
... instance contains instance-specific private data for the plug-in and the browser. this data is stored in instance->pdata. mode display mode of plug-in. ...
...And 2 more matches
Building a Theme - Archive of obsolete content
--> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>29.0</em:minversion> <em:maxversion>39.*</em:maxversion> </description> </em:targetapplication> <!-- front end metad...
...--> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>29.0</em:minversion> <em:maxversion>39.*</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> ...
...rl> </description> </rdf> sample@example.net - the id of the extension. this is a value you come up with to identify your extension in email address format (note that it should not be your email). make it unique. you could also use a guid. note: this parameter must be in the format of an email address, although it does not have to be a valid email address. (example.example.example) 4 - the
type of the add-on. '4' declares that it is installing a theme. if you were to install an extension it would be 2 (see install manifests#
type for other
type codes). {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - firefox's application id. 29.0 - the exact version number of the earliest version of firefox you're saying this extension will work with. never use a * in a minversion, it almost certainly will no...
...And 2 more matches
Theme changes in Firefox 2 - Archive of obsolete content
"] .tab-image-middle > .tab-text you may of course wish to make changes to other styles as well. menu.css the following style is no longer used in firefox 2 and has been removed: menulist > menupopup > menuitem[_moz-menuactive="true"] the firefox 2 theme also adds the following new styles: .menu-iconic-icon menubar > menu menubar > menu[_moz-menuactive="true"][open="true"] menuitem[
type="checkbox"] > .menu-iconic-left menuitem[
type="radio"] > .menu-iconic-left you may wish to change the definitions of other styles as well. notification.css this is a new file in firefox 2. it is used for the notification bar along the top of the browser that displays messages to the user such as popup blocked, or a plugin is needed and so forth. there are three severity levels for messages, ...
...irefox 2. it is used for the notification bar along the top of the browser that displays messages to the user such as popup blocked, or a plugin is needed and so forth. there are three severity levels for messages, info, warning and critical. ...
...e notification bar along the top of the browser that displays messages to the user such as popup blocked, or a plugin is needed and so forth. there are three severity levels for messages, info, warning and critical. ...
...And 2 more matches
::-ms-clear - Archive of obsolete content
the ::-ms-clear css pseudo-element creates a clear button at the edge of an <input
type="text"> text control that clears the current value. this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge. the clear button is only shown on focused, non-empty text controls. this includes inputs that appear text-like or fall back to
type="text". ...
...ent creates a clear button at the edge of an <input
type="text"> text control that clears the current value. this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge. the clear button is only shown on focused, non-empty text controls. this includes inputs that appear text-like or fall back to
type="text". such inputs include: <input
type="color"> <input
type="date"> <input
type="datetime"> <input
type="datetime-local"> <input
type="email"> <input
type="month"> <input
type="number"> <input
type="search"> <input
type="tel"> <input
type="time"> <input
type="url"> <input
type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector. other properties are ignore...
...*/ /* the cross can be hidden by setting the display attribute as "none"...
...And 2 more matches
Array.observe() - Archive of obsolete content
however, this api has been deprecated and removed from browsers. you can use the more general proxy object instead. syntax array.observe(arr, callback) parameters arr the array to be observed. ...
...stead. syntax array.observe(arr, callback) parameters arr the array to be observed. callback the function called each time changes are made, with the following argument: changes an array of objects each representing a change. the properties of these change objects are: name: the name of the property which was changed. object: the changed array after the change was made.
type: a string indicating the
type of change taking place. one of "add", "update", "delete", or "splice". oldvalue: only for "update" and "delete"
types. the value before the change. index: only for the "splice"
type. the index at which the change occurred. removed: only for the "splice"
type. an array of the removed elements. addedcount: only for the "splice"
type. the number of elements ...
.... the index at which the change occurred. removed: only for the "splice"
type. an array of the removed elements. addedcount: only for the "splice"
type. the number of elements added. description the callback function is called each time a change is made to arr, with an array of all changes in the order in which they occurred. changes done via array methods, such as array.proto
type.pop() will be reported as "splice" changes. index assignment changes which do not change the length of the array may be reported as "update" changes. ...
...And 2 more matches
JavaArray - Archive of obsolete content
summary core object a wrapped java array accessed from within javascript code is a member of the
type javaarray. created by any java method which returns an array. in addition, you can create a javaarray with an arbitrary data
type using the newinstance method of the array class: public static object newinstance(class component
type, int length) throws negativearraysizeexception description the javaarray object is an instance of a java array that is created in or passed to javascript. javaarray is a wrapper for the instance; all references to the array instance are made through the javaarray. in javascript 1.4 and later, the component
type parameter is either a javaclass object representing the
type of the array or class object, such as one returned by java.lang.class.forname. in...
...e of a java array that is created in or passed to javascript. javaarray is a wrapper for the instance; all references to the array instance are made through the javaarray. in javascript 1.4 and later, the component
type parameter is either a javaclass object representing the
type of the array or class object, such as one returned by java.lang.class.forname. in javascript 1.3 and earlier, component
type must be a class object. use zero-based indexes to access the elements in a javaarray object, just as you do to access elements in an array in java. for example: var javastring = new java.lang.string("hello world!"); var bytearray = javastring.getbytes(); bytearray[0] // returns 72 bytearray[1] // returns 101 any java data brought into javascript is converted to javascript data
types. when the...
... in javascript 1.4 and later, the methods of java.lang.object are inherited by javaarray. ...
...And 2 more matches
XForms Alert Element - Archive of obsolete content
ta, 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. attributes single-node binding linking src - url of a document whose contents will be retrieved by the alert element and used to provide the alert message for the containing form control.
type restrictions the alert element can be bound to any simple content. representations can be represented in two ways: modeless window that contains the alert element's message (default representation). the alert element's message can also be displayed immediately after the containing form control element in the xforms document's layout. this representation is used if the alert element has an ...
...element's message (default representation). the alert element's message can also be displayed immediately after the containing form control element in the xforms document's layout. this representation is used if the alert element has an inline display style. ...
...es <xforms:model> <xforms:instance> <data xmlns=""> <x>10</x> </data> </xforms:instance> <xforms:bind id="x" nodeset="x"
type="xsd:integer"/> </xforms:model> <style> @namespace xforms url("http://www.w3.org/2002/xforms"); xforms|input:invalid xforms|alert.inline { display: inline; font-style: italic; width: 40%; } } </style> <xforms:input bind="x"> <xforms:label>you can
type only numbers (validation happens on blur): </xforms:label> <xforms:alert>wrong value! ...
...And 2 more matches
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 accesskey - 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 b...
...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 by the following widgets for the specified data
types (or
types derived from these data
types): text - default representation for instance data of most
types, especially static text (xhtml/xul). calendar - used to represent instance data of
type date (xhtml/xul). image - if the instance node contains an image, then an output element can be used in combination with the media
type element to display the image (fx 3.0 only, xhtml/xul). text disp...
...instance node contains an image, then an output element can be used in combination with the media
type element to display the image (fx 3.0 only, xhtml/xul). text displaying the data as text is the default presentation. xforms output is most often used when a form author needs to render simple text of an instance node (xhtml/xul). characteristics text is presented to the user when there is no
type given for the bound node or a
type is specified that is not handled by one of the other widgets (as documented below). analogous widgets are <xhtml:span/> and <xul:description/> calendar a form author may notice a xforms output element represented by a calendar widget in the mozilla xforms processor if the control meets the following criteria (xhtml/xul). characteristics the bound instance ...
...And 2 more matches
XForms Secret Element - Archive of obsolete content
representations the xforms secret element is represented by a password field. ...
... representations the xforms secret element is represented by a password field. ...
...d by an asterisk on the screen (see the spec). attributes ui common appearance - isn't supported. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special inputmode - isn't supported. incremental - supported. the default value is false.
type restrictions the secret element can be bound to a node containing simple content of any data
type except xsd:base64binary, xsd:hexbinray or any data
type derived from these. ...
...And 2 more matches
Index - Game development
t creating virtual reality (vr) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier. mozilla's a-frame framework provides a markup language allowing us to build 3d vr landscapes using a system familiar to web developers, which follows game development coding principles; this is useful for quickly and successfully building proto
types and demos, without having to write a lot of javascript or glsl. this article explains how to get up and running with a-frame, and how to use it to build up a simple demo. 17 building up a basic demo with babylon.js 3d game engines, babylon.js, beginner, webgl babylon.js is one of the most popular 3d game engines used by developers. as with any other 3d library it provides bu...
... this article explains all of the basic theory that's useful to know when you are getting started working with 3d. 23 glsl shaders beginner, glsl, opengl, shader, texture shader, three.js, vertex shader shaders use glsl (opengl shading language), a special opengl shading language with syntax similar to c. glsl is executed directly by the graphics pipeline. there are two
types of shaders: vertex shaders and fragment (pixel) shaders. vertex shaders transform shape positions into 3d drawing coordinates. fragment shaders compute the renderings of a shape's colors and other attributes. 25 async scripts for asm.js games, javascript, asm.js, async every medium or large game should compile asm.js code as part of an async script to give the browser the ma...
...ascript that is highly optimizable. this article looks at exactly what is permitted in the asm.js subset, what improvements it confers, where and how you can make use of it, and further resources and examples. 41 tutorials canvas, games, javascript, web, workflows this page contains multiple tutorial series that highlight different workflows for effectively creating different
types of web games. 42 2d breakout game using phaser 2d, beginner, canvas, games, javascript, phaser, tutorial in this step-by-step tutorial, we create a simple mobile mdn breakout game written in javascript, using the phaser framework. 43 animations and tweens 2d, animation, beginner, canvas, games, javascript, phaser, tutorial, tween to make the game look mo...
...And 2 more matches
MDN Web Docs Glossary: Definitions of Web-related terms
css css object model (cssom) css pixel css preprocessor d data structure decryption delta denial of service descriptor (css) deserialization developer tools dhtml digest digital certificate distributed denial of service dmz dns doc
type document directive document environment dom (document object model) domain domain name domain sharding dominator dos attack dtls (datagram transport layer security) dtmf (dual-tone multi-frequency signaling) dynamic programming language dynamic typing e ecma ...
...ent environment dom (document object model) domain domain name domain sharding dominator dos attack dtls (datagram transport layer security) dtmf (dual-tone multi-frequency signaling) dynamic programming language dynamic typing e ecma ecmascript effective connection
type element empty element encapsulation encryption endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os firewall f...
...p lossless compression lossy compression ltr (left to right) m main axis main thread markup mathml media media (audio-visual presentation) media (css) metadata method microsoft edge microsoft internet explorer middleware mime mime
type minification mitm mixin mobile first modem modern web apps modularity mozilla firefox mutable mvc n namespace nan nat native navigation directive netscape navigator network throttling nntp node node (dom...
...And 2 more matches
Accessible multimedia - Learn web development
o and video controls implementing controls for web-based audio/video shouldn't be a problem, right? let's investigate. the problem with native html5 controls html5 video and audio instances even come with a set of inbuilt controls that allow you to control the media straight out of the box. for example (see native-controls.html source code and live): <audio controls> <source src="viper.mp3"
type="audio/mp3"> <source src="viper.ogg"
type="audio/ogg"> <p>your browser doesn't support html5 audio. here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp4"
type="video/mp4"> <source 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<...
...basic setup first, grab a copy of our custom-controls-start.html, custom-controls.css, rabbit320.mp4, and rabbit320.webm files and save them in a new directory on your hard drive. create a new file called main.js and save it in the same directory. first of all, let's look at the html for the video player, in the html: <section class="player"> <video controls> <source src="rabbit320.mp4"
type="video/mp4"> <source 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> <div class="controls"> <button class="playpause">play</button> <button class="stop">stop</button> <button class="rwd">rwd</button> <button class="fwd">fwd</button> <div class="time">...
...the main ones you'll come across are: captions — there for the benefit of deaf users who can't hear the audio track, including the words being spoken, and contextual information such as who spoke the words, if the people were angry or sad, and what mood the music is currently creating. subtitles — include translations of the audio dialog, for users ...
...And 2 more matches
Practical positioning examples - Learn web development
using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page. ...
...heir list-style-
type is set to none to get rid of the bullets, and their width is set to 150px so they will comfortably fit across the info-box. the <a> elements are set to display inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties. add the following css: .info-box li { float: left; list-style-
type: none; width: 150px; } .info-box li a { display: inline-block; text-decoration: none; width: 100%; line-height: 3; background-color: red; color: black; text-align: center; } finally for this section we'll set some styles on the link states. first, we'll set the :focus and :hover states of the tabs to look different when they are focused/hovered, providing users with some visual ...
...g live at hidden-info-panel.html (source code). check it out to get an idea of what you will be building in this section of the article. as a starting point, make a local copy of hidden-info-panel-start.html from our github repo. this doesn't follow on from the previous example, so a fresh start file is required. let's have a look at the html in the file: <label for="toggle">ā</label> <input
type="checkbox" id="toggle"> <aside> ... </aside> to start with here we've got a <label> element and an <input> element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). here it is associated with the <input> checkbox using the for and id attributes. note: ...
...And 2 more matches
How CSS is structured - Learn web development
lesheet contains css in a separate file with a .css extension. this is the most common and useful method of bringing css to a document. you can link a single css file to multiple web pages, styling all of them with the same css stylesheet. in the getting started with css, we linked an external stylesheet to our web page. ...
.../general/style.css"> <!-- go up one directory level, then inside a subdirectory called styles --> <link rel="stylesheet" href="../styles/style.css"> internal stylesheet an internal stylesheet resides within an html document. to create an internal stylesheet, you place css inside a <style> element contained inside the html <head>. ...
.... the efficiency penalty carries over to site maintenance too. with css in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages. inline styles inline styles are css declarations that affect a single html element, contained within a style attribute. the implementation of an inline style in an html document might look like this: <!doc
type html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">hello world!</h1> <p style="color:red;">this is my first css example</p> </body> </html> avoid using css in this way when possible. it is the opposite of a best practice. first, it is the least efficient imple...
...And 2 more matches
How the Web works - Learn web development
: transmission control protocol and internet protocol are communication protocols that define how data should travel across the internet. this is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. in our example, this is like a car or a bike (or however else you might get around). dns: domain name servers are like an address book for websites. when you
type a web address in your browser, the browser looks at the dns to find the website's real address before it can retrieve the website. the browser needs to find out which server the website lives on, so it can send http messages to the right place (see below). this is like looking up the address of the shop so you can access it. http: hypertext transfer protocol is an application protocol that defin...
... the address of the shop so you can access it. http: hypertext transfer protocol is an application protocol that defines a language for clients and servers to speak to each other. this is like the language you use to order your goods. component files: a website is made up of many different files, which are like the different parts of the goods you buy from the shop. ...
... different parts of the goods you buy from the shop. these files come in two main
types: code files: websites are built primarily from html, css, and javascript, though you'll meet other technologies a bit later. assets: this is a collective name for all the other stuff that makes up a website, such as images, music, video, word documents, and pdfs. so what happens, exactly? when you
type a web address into your browser (for our analogy that's like walking to the shop): the browser goes to the dns server, and finds the real address of the server that the website lives on (you find the address of the shop). the browser sends an http request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). this message, and a...
...And 2 more matches
Images in HTML - Learn web development
in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css background images. ...
...in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css background images. ...
...he alt text instead: so, why would you ever see or need alt text? it can come in handy for a number of reasons: the user is visually impaired, and is using a screen reader to read the web out to them. in fact, having alt text available to describe images is useful to most users. as described above, the spelling of the file or path name might be wrong. the browser doesn't support the image
type. some people still use text-only browsers, such as lynx, which displays the alt text of images. you may want to provide text for search engines to utilize; for example, search engines can match alt text with search queries. users have turned off images to reduce data transfer volume and distractions. this is especially common on mobile phones, and in countries where bandwidth is limited or expe...
...And 2 more matches
Drawing graphics - Learn web development
handled by lower level languages such as c++ or java. the situation started to improve when browsers began to support the <canvas> element and associated canvas api — apple invented it in around 2004, and other browsers followed by implementing it in the years that followed. as you'll see below, canvas provides many useful tools for creating 2d animations, games, data visualizations, and other
types of app, especially when combined with some of the other apis the web platform provides. the below example shows a simple 2d canvas-based bouncing balls animation that we originally met in our introducing javascript objects module: around 2006–2007, mozilla started work on an experimental 3d canvas implementation. this became webgl, which gained traction among browser vendors, and was stand...
... could become pixellated/distorted. getting the canvas context and final setup we need to do one final thing before we can consider our canvas template finished. to draw onto the canvas we need to get a special reference to the drawing area called a context. this is done using the htmlcanvaselement.getcontext() method, which for basic usage takes a single string as a parameter representing the
type of context you want to retrieve. in this case we want a 2d canvas, so add the following javascript line below the others inside the <script> element: const ctx = canvas.getcontext('2d'); note: other context values you could choose include webgl for webgl, webgl2 for webgl 2, etc., but we won't need those in this article. so that's it — our canvas is now primed and ready for drawing on! th...
......
...And 2 more matches
Introduction to web APIs - Learn web development
or manipulating documents loaded into the browser. the most obvious example is the dom (document object model) api, which allows you to manipulate html and css — creating, removing and changing html, dynamically applying new styles to your page, etc. every time you see a popup window appear on a page or some new content displayed, for example, that's the dom in action. find out more about these
types of api in manipulating documents. apis that fetch data from the server to update small sections of a webpage on their own are very commonly used. this seemingly small detail has had a huge impact on the performance and behaviour of sites — if you just need to update a stock listing or list of available new stories, doing it instantly without having to reload the whole entire page from the ser...
...t. audiodestinationnode, which represents the destination of the audio, i.e. the device on your computer that will actually output it — usually your speakers or headphones. so how do these objects interact? if you look at our simple web audio example (see it live also), you'll first see the following html: <audio src="outfoxing.mp3"></audio> <button class="paused">play</button> <br> <input
type="range" min="0" max="1" step="0.01" value="1" class="volume"> we, first of all, include an <audio> element with which we embed an mp3 into the page. we don't include any default browser controls. next, we include a <button> that we'll use to play and stop the music, and an <input> element of
type range, which we'll use to adjust the volume of the track while it's playing. next, let's look at th...
...the gain node is then connected to the destination node so the sound can be played on your computer (the audiocontext.destination property represents whatever is the default audiodestinationnode available on your computer's...
...And 2 more matches
Video and Audio APIs - Learn web development
ng blocks, javascript objects), the basics of client-side apis objective: to learn how to use browser apis to control video and audio playback. html5 video and audio the <video> and <audio> elements allow us to embed video and audio into web pages. as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4"
type="video/mp4"> <source 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> this creates a video player inside the browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enab...
...ou'll find it in javascript/apis/video-audio/start/ at this point, if you load the html you should see a perfectly normal html5 video player, with the native controls rendered. exploring the html open the html index file. ...
... point, if you load the html you should see a perfectly normal html5 video player, with the native controls rendered. exploring the html open the html index file. ...
...And 2 more matches
Arrays - Learn web development
tml and css, an understanding of what javascript is. objective: to understand what arrays are and how to manipulate them in javascript. what is an array? arrays are generally described as "list-like objects"; they are basically single objects that contain multiple values stored in a list. array objects can be stored in variables and dealt with in much the same way as any other
type of value, the difference being that we can access each value inside the list individually, and do super useful and efficient things with the list, like loop through it and do the same thing to every value. maybe we've got a series of product items and their prices stored in an array, and we want to loop through them all and print them out on an invoice, while totaling all the prices together and ...
...s into browser developer console. creating arrays arrays consist of square brackets and elements that are separated by commas. suppose we want to store a shopping list in an array. paste the following code into the console: let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; shopping; in the above example, each element is a string, but in an array we can store various data
types — strings, numbers, objects, and even other arrays. we can also mix data
types in a single array — we do not have to limit ourselves to storing only numbers in one array, and in another only strings. for example: let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ['tree', 795, [0, 1, 2]]; before proceeding, create a few example arrays. accessing and modifying array items you can the...
... 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 let itemtext = 0; const listitem = document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } totalbox.textcontent = 'total: $' + total.tofixed(2); </textarea> <div class="playable-buttons"> <input id="reset"
type="button" value="reset"> <input id="solution"
type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() ...
...And 2 more matches
Solve common problems in your JavaScript code - Learn web development
to see which one is bigger, or to see if one...
...to see which one is bigger, or to see if one value is equal to another). strings how do you crea...
...to see which one is bigger, or to see if one value is equal to another). strings how do you create a string in javascript? ...
...And 2 more matches
Working with JSON - Learn web development
provides a global json object that has methods available for converting between the two. note: converting a string to a native object is called deserialization, while converting a native object to a string so it can be transmitted across the network is called serialization. a json object can be stored in its own file, which is basically just a text file with an extension of .json, and a mime
type of application/json. json structure as described above, a json is a string whose format very much resembles javascript object literal format. you can include the same basic data
types inside json as you can in a standard javascript object — strings, numbers, arrays, booleans, and other object literals. this allows you to construct a data hierarchy, like so: { "squadname": "super hero squad...
...are not valid. even a single misplaced comma or colon can cause a json file to go wrong, and not work. you should be careful to validate any data you are attempting to use (although computer-generated json is less likely to include errors, as long as the generator program is working correctly). you can validate json using an application like jsonlint. json can actually take the form of any data
type that is valid for inclusion inside json, not just arrays or objects. so for example, a single string or number would be a valid json object. unlike in javascript code in which object properties may be unquoted, in json only quoted strings may be used as properties. active learning: working through a json example so, let's work through an example to show how we could make use of some json data...
...her optional parameters available. we only need the two mandatory ones for this simple example: the http method to use when making the network request. in this case get is fine, as we are just retrieving some simple data. the url to make the request to — this is the url of the json file that we stored earlier. next, add the following two lines — here we are setting the response
type to json, so that xhr knows that the server will be returning json, and that this should be converted behind the scenes into a javascript object. then we send the request with the send() method: request.response
type = 'json'; request.send(); the last bit of this section involves waiting for the response to return from the server, then dealing with it. add the following code below your previou...
...And 2 more matches
Introduction to client-side frameworks - Learn web development
y a community of individuals and corporations. it is a complete rewrite from the same team that built angularjs. angular was officially released on the 14th of september 2016. angular is a component-based framework which uses declarative html templates. at build time, transparently to developers, the framework's compiler translates the templates to optimized javascript instructions. angular uses
typescript, a superset of javascript that we’ll look at in a little more detail in the next chapter. vue evan you first released vue in 2014, after working on and learning from the original angularjs project. vue is the youngest of the big four, but has enjoyed a recent uptick in popularity. vue, like angularjs, extends html with some of its own code. apart from that, it mainly relies on modern, ...
...e lines of code to create the properties and children it needs. the tenth line of this snippet references another build function: builddeletebuttonel(). it follows a similar pattern to the one we used to build a list item element: function builddeletebuttonel(id) { const button = document.createelement('button'); const textcontent = document.createtextnode('delete'); button.setattribute('
type', 'button'); button.appendchild(textcontent); return button; } this button doesn't do anything yet, but it will later once we decide to implement our delete feature. the code that will render our items on the page might read something like this: function rendertodolist() { const frag = document.createdocumentfragment(); state.tasks.foreach(task => { const item = buildtodoitemel(tas...
...ook, 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 represents, whereas the vanilla javascript code does not. ...
...And 2 more matches
Framework main features - Learn web development
ered by javascript, and all allow you to use domain-specific languages (dsls) in order to build your applications. in particular, react has popularized the use of jsx for writing its components, while ember utilizes handlebars. unlike html, these languages know how to read data variables, and this data can be used to streamline the process of writing your ui. angular apps often make heavy use of
typescript.
typescript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla javascript. dsls can't be read by the browser directly; they must be transformed into javascript or html first. transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle thi...
...tml that an application ultimately builds. like jsx, handlebars uses curly braces to inject the value of a variable. handlebars uses a double-pair of curly braces, instead of a single pair. given this handlebars template: <header> <h1>hello, {{subject}}!</h1> </header> and this data: { subject: "world" } handlebars will build html like this: <header> <h1>hello, world!</h1> </header>
typescript
typescript is a superset of javascript, meaning it extends javascript — all javascript code is valid
typescript, but not the other way around.
typescript is useful for the strictness it allows developers to enforce on their code. for instance, consider a function add(), which takes integers a and b and returns their sum. in javascript, that function could be written like this: function...
...on add(a, b) { return a + b; } this code might be trivial for someone accustomed to javascript, but it could still be clearer. javascript lets us use the + operator to concatenate strings together, so this function would technically still work if a and b were strings — it just might not give you the result you'd expect. what if we wanted to only allow numbers to be passed into this function?
typescript makes that possible: function add(a: number, b: number) { return a + b; } the : number written after each parameter here tells
typescript that both a and b must be numbers. if we were to use this function and pass '2' into it as an argument,
typescript would raise an error during compilation, and we would be forced to fix our mistake. we could write our own javascript that raises these ...
...And 2 more matches
Getting started with Svelte - Learn web development
e of the other framework options. it's main current disadvantages are that it is a young framework — its ecosystem is therefore more limited in terms of tooling, support, plugins, clear usage patterns, etc. than more mature frameworks, and there are also less job opportunities. but it's advantages should be enough to make you interested to explore it. note: recently svelte has added official
typescript support, one of its most requested features. we'll look at it later on in this tutorial series. we encourage you to go through the svelte tutorial for a really quick introduction to the basic concepts, before returning to this tutorial series to learn how to build something slightly more in-depth. it should take you about 30 minutes to complete. use cases svelte can be used to develop s...
...oject — useful if you decide to include your app in a git repo. rollup.config.js: svelte uses rollup.js as a module bundler. this configuration file tells rollup how to compile and build your app. if you prefer webpack you can create your starter project with npx degit sveltejs/template-webpack svelte-app instead. scripts: contains setup scripts as required. currently should only contain setup
typescript.js, a script that sets up
typescript support in svelte. we'll talk about this more in the last article. src: this directory is where the source code for your application lives — where you'll be creating the code for your app. app.svelte: this is the top-level component of your app. so far it just renders the 'hello world!' message. main.js: the entry point to our application. it...
...cesses the <style> section of every component and compiles them into the public/build/bundle.css file. it also compiles the markup and <script> section of every component and stores the result in public/build/bundle.js. it also adds the code in src/main.js to reference the features of each component. ...
...And 2 more matches
Getting started with Vue - Learn web development
ue/cli or if you'd prefer to use yarn: yarn global add @vue/cli once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run vue create <project-name>. the cli will then give you a list of project configurations you can use. there are a few preset ones, and you can make your own. these options let you configure things like
typescript, linting, vue-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-...
...hings like eslint into their own, dedicated files. the other option, "in package.json", will put all of your config settings into the app's package.json file. select "in dedicated config files" and push enter. finally, you are asked if you want to save this as a 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 ma...
..., logic, and styling code into separate files, vue takes the opposite approach. using single file components, vue lets you group your templates, corresponding script, and css all together in a single file ending in .vue. these files are processed by a js build tool (such as webpack), which means you can take advantage of build-time tooling in your project. this allows you to use tools like babel,
typescript, scss and more to create more sophisticated components. as a bonus, projects created with the vue cli are configured to use .vue files with webpack out of the box. in fact, if you look inside the src folder in the project we created with the cli, you'll see your first .vue file: app.vue. let's explore this now. app.vue open your app.vue file — you’ll see that it has three parts: <te...
...And 2 more matches
Implementing feature detection - Learn web development
to ie8 or 9, although older versions of ie will have additional problems, such as not supporting document.queryselector, and having a messed up box model). javascript we already saw an example of a javascript feature detection test earlier on. generally, such tests are done via one of the following common patterns: summary of javascript feature detection techniques feature detection
type explanation example if member in object check whether a certain method or property (typically an entry point into using the api or other feature you are detecting for) exists in its parent object. if("geolocation" in navigator) { ... } property on element create an element in memory using document.createelement() and then check if a property exists on...
...element in memory using document.createelement() and then check if a method exists on it. if it does, check what value it returns. see dive into html5 video formats detection test. property on element retains value create an element in memory using document.createelement(), set a property to a certain value, then check to see if the value is retained. see dive into html5 <input>
types detection test. note: the double not in the above example (!!) is a way to force a return value to become a "proper" boolean value, rather than a truthy/falsy value that may skew the results. the dive into html5 detecting html5 features page has a lot more useful feature detection tests besides the ones listed above, and you can generally find a feature detection test for most things b...
...ia("(max-width: 480px)").matches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (480px wide or less). we first use the media attribute to only apply the brick css to the page if the page width is 480px or less: <link href="dist/brick.css"
type="text/css" rel="stylesheet" media="all and (max-width: 480px)"> we then use matchmedia() in the javascript several times, to only run brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views). if (window.matchmedia("(max-width: 480px)").matches) { deck.shuffleto(1); } using m...
...And 2 more matches
Command line crash course - Learn web development
e. the cd command lets you change directory. technically, cd isn’t a program but a built-in. this means your operating system provides it out of the box, and also that you can’t accidentally delete it — thank goodness! you don’t need to worry too much about whether a command is a built-in or not, but bear in mind that built-ins appear on all unix-based systems. to change 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 n...
...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 know the path to get to it. this usually becomes easier as you get more familia...
...ture of your file system, but if you are not sure of the path you can usually figure it out with a combination of the ls command (see below), and by clicking around in your explorer/finder window to see where a directory is, relative to where you currently are. ...
...And 2 more matches
Adding a new event
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. ...
... 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. ...
... 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. ...
...And 2 more matches
Eclipse CDT Manual Setup
e preferences (window > preferences, or eclipse > preferences) before creating a project in that workspace: in "general > workspace", disable "build automatically" in "c/c++ > indexer", disable "automatically update the index" turning off automatic indexing prevents the cpu intensive indexer from running at various stages during the steps below before we're ready. select "general > content
types", expand "text > c source file > c++ source file", click "add" and add "*.mm". eclipse cdt doesn't currently understand objective-c files (although there is a project that promises to add objective-c support), so for now, this is the best we can do to give eclipse a chance of expanding its understanding of the source into the objective-c files. select "general > editors > text editors". if you ...
...ct "refresh using native hooks or polling" and "refresh on access" to prevent eclipse giving you annoying "resource is out of sync" messages when files change from under it due to mercurial or other external activity. select "c/c++ > build > console" and set "limit console output (number of lines)" to something large, like "1000000". eclipse cdt will try to format c/c++ code that you add as you
type. however, its default formats are not a good match to mozilla's style rules. download this first pass at an eclipse formatter configuration for mozilla c/c++ coding style, and install it by opening the workspace preferences, selecting "c/c++ > code style > formatter", and then using the "import" button to import that file. the "active profile" field should then automatically change to "mozilla". ...
...y change to "mozilla". depending on the area of the code that you work on, you may need to tweak this configuration using the "edit" button. (note that the format settings under "general > editors > text editors" have no effect in c/c++ views, since the c/c++ settings are more specific and override those settings. ...
...And 2 more matches
Multiple Firefox profiles
le manager, there are a few third-party tools that make working with multiple profiles easy. this list is by no means exhaustive. please add any helpful tools you discover to the list! mac os x multifirefox by dave martorana profile management determining the profile while firefox is running to determine the profile of a currently-running firefox instance in windows, macos or linux,
type about:profiles into the browser url search bar. the page presents a list of all of your profiles, each beginning with "profile: " followed by its name. the one being run by this firefox instance will include the bold text "this is the profile in use" for example, if you find that text beneath the entry for "profile: suzie", then you are running in a profile named suzie. launching firefox into...
...n different profiles, to avoid confusion, you might want to first exit/quit/terminate all running instances of firefox, firefox developer edition or nightly. then follow the instructions below, applicable to your operating system. from profile manager inside firefox if you already have firefox instance running, you can open another profile from the integrated profile manager on any platform:
type about:profiles into the browser url search bar. 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. ...
...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. run firefox...
...And 2 more matches
Storage access policy: Block cookies from trackers
ck cookie request headers and ignore set-cookie response headers. return an empty string for calls to document.cookie and ignore requests to set cookies via document.cookie. dom storage: localstorage: window.localstorage: read and write attempts throw a securityerror exception. prior to firefox 70: window.localstorage is null. thus, attempts to read and write using this object will throw a
typeerror exception. sessionstorage: read and write attempts are permitted. indexeddb: attempting to access the indexeddb factory object throws a securityerror exception. messaging and workers: broadcast channel: attempts to create a new broadcastchannel will throw a securityerror exception. shared worker: attempts to create a new sharedworker will throw a securityerror exception. service wor...
...n. in the sample image below, trackertest.org is classified as a tracking resource, while the request to example.com is not. adding custom domains to the tracking protection list curious how things will work if a third-party domain on your site were classified as a tracker? we’ve added a preference that allows you to add custom domains to the tracking protection url classifier. to do so:
type about:config in your address bar. if you are presented with a page that warns you "this may void your warranty!", click "i accept the risk!" search for the preference name "urlclassifier.trackingannotationtable.testentries". if the preference already exists, edit the preference value. if the preference does not exist, click "string" and then "+" to create a new preference. for the preference ...
... they do under firefox’s current cookie policy with some minor differences in the user experience. a social content provider that is classified as a tracker will not have access to their third-party cookies when the user first visits a new first party. thus, the user may appear logged out to the service despite being logged in when they visit the provider’s website directly. depending on the
type of integration, the user may have to take some action to interact with the social content provider before the provider is given access to their cookies. for example: for social login, the user may have to click a login button on the first party. for social like or share buttons, the user will have to first interact with the button in a logged-out state. once they do, many social content provi...
...And 2 more matches
Overview of Mozilla embedding APIs
ing application to control activity and respond to changes within this client area. using these interfaces an embedding application can build up its own user interface around a webbrowser instance. public classes the following utility classes are available from the xpcom dll. they provide some basic functionality which should be leveraged when building new xpcom components. nscomptr<interface-
type> these are templatized smart pointers which transparently deal with xpcom reference counting issues. see the nscomptr user's manual for more information. nsstring there are a collection of string classes which support both unicode and ascii strings. these classes provide a variety of string operations as well as dealing with the memory management issues of storing the underlying data. see th...
...omponent manager service. ns_convertasciitoucs2 this is a helper class which converts an ascii string into a ucs2 string. typically, instances of this class are stack allocated, and wrap ascii arguments which must be converted into ucs2. do_queryinterface this is a helper class which works in conjunction with nscomptr to perform a simplified call to nsisupports::queryinterface(...) with a
typesafe assignment. do_getinterface this function simplfies retrieving interfaces via the nsiinterfacerequestor::getinterface(...) method. using this function, one can use nsisupports instances and still easily access other interfaces via nsiinterfacerequestor. internally, this function tries to convert the nsisupports argument into an nsiinterfacerequestor and then calls getinterface(...) to ret...
...nsiinterfacerequestor and then calls getinterface(...) to retrieve the requested interface. do_queryreferent this function is the equivilent of do_queryinterface except that it performs the qi through a weak reference. do_getservice this function simplifies accessing services from the service manager. do_createinstance this function simplifies creating new component instances. nscom
typeinfo<interface-
type>::getiid() this template helper class allows easy access to an interface's nsiid. typically the ns_get_iid(...) macro is used instead of using the nscom
typeinfo template directly. ns_getweakreference this function creates a weak reference to a component which implements the nsiweakreference interface. global services nsservicemanager the service manager is the central repo...
...And 2 more matches
Implementing QueryInterface
eptr ) { ns_assertion(ainstanceptr, "queryinterface requires a non-null destination!"); // it's a logic error, not a runtime error, to call me without any place to put my answer! // ...but that won't matter when someone calls me wrongly in a non-debug build. ...
...ogic error, not a runtime error, to call me without any place to put my answer! // ...but that won't matter when someone calls me wrongly in a non-debug build. ...
...non-debug build. if ( !ainstanceptr ) return ns_error_null_pointer; nsisupports* foundinterface; if ( aiid.equals(nscom
typeinfo<nsix>::getiid()) ) foundinterface = ns_static_cast(nsix*, this); else if ( aiid.equals(nscom
typeinfo<nsiy>::getiid()) ) foundinterface = ns_static_cast(nsiy*, this); // ...as many cases as needed... ...
...And 2 more matches
Introduction to Layout in Mozilla
ncy [0..1] per frame, owned by frame widget native window [0..1] per view, owned by view key data structures the document owns the content model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views, widgets presentation has media
type, dimensions, etc. may not be directly manipulated detailed walk-through setting up content model construction frame construction style resolution reflow painting setting up assume basic knowledge of embedding and network apis (doc shell, streams) content dll auto-registers a document loader factory (dlf) @mozilla.org/content-viewer-factory/view;1?
type=tex...
... creates a parser, returned as nsistreamlistener back to the docshell creates a content sink, whi...
...p assume basic knowledge of embedding and network apis (doc shell, streams) content dll auto-registers a document loader factory (dlf) @mozilla.org/content-viewer-factory/view;1?
type=text/html all mime
types mapped to the same class, nscontentdlf nsdocshell receives inbound content via nsdsuricontentlistener invokes nsidlf::createinstance, passes mime
type to dlf nscontentdlf creates a nshtmldocument object, invokes startdocumentload. creates a parser, returned as nsistreamlistener back to the docshell creates a content sink, which is linked to the parser and the document creates a documentviewerimpl object, which is returned as nsicontentviewer back to the docshell documentviewer...
...And 2 more matches
API-provided widgets
custom for fine-grained control over the creation of the widget. ...
... custom for fine-grained control over the creation of the widget. ...
... custom for fine-grained control over the creation of the widget. ...
...And 2 more matches
Widget Wrappers
ows, and 'single' wrappers which provide information about a specific instance in a specific window. group wrapper methods forwindow() a method to obtain a single window wrapper for a widget, in the window awindow passed as the only argument. properties all of a wrapper's properties are read-only unless otherwise indicated. ...
...ngle' wrappers which provide information about a specific instance in a specific window. group wrapper methods forwindow() a method to obtain a single window wrapper for a widget, in the window awindow passed as the only argument. properties all of a wrapper's properties are read-only unless otherwise indicated. ...
...a method to obtain a single window wrapper for a widget, in the window awindow passed as the only argument. properties all of a wrapper's properties are read-only unless otherwise indicated. attribute description id the widget's id
type the
type of widget (button, view, custom). ...
...And 2 more matches
JavaScript OS.Constants
using os.constants from the main thread to initialize os.constants for use in the main thread, add the following snippet to your code: components.classes["@mozilla.org/net/osfileconstantsservice;1"]. getservice(components.interfaces.nsiosfileconstantsservice). init(); from a chrome worker no initialization is required. module os.constants is always available for chrome workers. os.constants.sys constants related to system configuration. name the name of the operating system (e.g. "darwin"). ...
...ed to system configuration. name the name of the operating system (e.g. "darwin"). debug set to true on debug build configurations, non-existent otherwise. os.constants.path paths of well-known files and directories. libxul the path to the file containing libxul. useful, for instance, to access the platform code from javascript in conjunction with js-c
types. profiledir the path to the current profile. homedir the path to the user's home directory. winappdatadir the path to the user's roaming application data directory. winlocalappdatadir the path to the user's local application data directory. winstartmenuprogsdir the path to the programs subdirectory in the user's start menu. mac...
...r the path to the user's local application data directory. winstartmenuprogsdir the path to the programs subdirectory in the user's start menu. macuserlibdir the path to the user's library directory. maclocalapplicationsdir the path to the local applications directory. os.constants.libc constants for interacting with libc. useful mostly for using js-c
types to interact with the following platforms: macos x; android; linux; other variants of unix. os.constants.libc is available on all platforms, although some constants are not defined everywhere. before using a constant, you should check that it is defined. error values eacces permission denied eagain resource temporarily unavailable ebadf bad file descr...
...And 2 more matches
Localizing without a specialized tool
with that document, users can see immediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation. ...
...iles are called "entities".) "manage search engines..." can easily be found in the firefox browser ui by clicking on the drop-down arrow in the search box in the upper-right corner of your browser. at the bottom of the list of search engines that appears, you'll see, "manage search engines...". to start, make sure you are in /path/to/your/working/directory/l10n-mozilla-1.9.2/x-testing and then,
type the command mkdir /browser/chrome/browser now, step back out to the broader directory that contains both your l10n base (l10n-mozilla-1.9.2) and the en-us source code (mozilla-1.9.2). you can do this by typing: cd ../../ where each ".." represents the prior sub directory before the main directory where you want to be. you can always check the path by typing pwd once you are in the root work...
... add and localize this file" note. you should see // add and localize this file aboutcerterror.dtd notice from the compare-locales output that this file is located in the directory /browser/chrome/browser. you will want to copy this file from the en-us sources into the proper ab-cd directory. to do this, you first need to create the directory structure and then copy the file into it. ...
...And 2 more matches
Mozilla Style System Documentation
table formatting objects. the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements. (mozilla has a bunch of its pseudo-elements that are not in the css specification.) we also create style contexts for some things that are not css formatting objects: text nodes and placeholder frames. these three
types of style contexts correspond to the three ways of creating a style context: nsiprescontext::resolvestylecontextfor, nsiprescontext::resolvepseudostylecontextfor, and.nsiprescontext::resolvestylecontextfornonelement there is also a fourth method, nsiprescontext::probepseudostylecontextfor, which creates a style context only if there are style rules that match the pseudo-element. this is useful fo...
...for frames: const nsstyledisplay *display; ::getstyledata(frame, &display); or for style contexts: const nsstyledisplay *display; ::getstyledata(sc, &display); these functions cause an appropriate struct to be computed if it hasn't bee...
...truct_display)); there is also a (non-virtual) method on nsiframe to get the style data from a frame's style context (saving the refcounting needed to get the style context): const nsstyledisplay *display; frame->getstyledata(estylestruct_display, (const nsstylestruct*&)display); however, there are similar
typesafe global function templates that (should) compile to the same thing but use the
type of the template parameter to pass the correct nsstylestructid parameter. for frames: const nsstyledisplay *display; ::getstyledata(frame, &display); or for style contexts: const nsstyledisplay *display; ::getstyledata(sc, &display); these functions cause an appropriate struct to be computed if it hasn't been computed already and then fill in the struct pointer. the struct is owned by the styl...
...And 2 more matches
Date and Time
absolute time representation treats time instants as points along the time line. a time instant is represented by its position on the time line relative to the origin, called the epoch. nspr defines the epoch to be midnight (00:00:00) 1 january 1970 utc (coordinated universal time). in this form, time is just a point on the time line. there is no notion of time zone. ...
...nated universal time). in this form, time is just a point on the time line. there is no notion of time zone. clock/calendar time, used for human interfaces, represents time in the familiar year, month, day, hour, minute, second components. in this form, the time zone information is important. for example, without specifying the time zone, the time 8:00am 1 may 1998 is ambiguous. ...
...us. the nspr data
type for clock/calendar time, called an exploded time, has the time zone information in it, so that its corresponding point in absolute time is uniquely specified. note that absolute and clock times are not normally used in timing operations. for functions that deal with the measurement of elapsed time and with timeouts, see interval timing. macros for time unit conversion
types and constants time parameter callback functions functions macros for time unit conversion macros for converting between seconds, milliseconds, microseconds, and nanoseconds. ...
...And 2 more matches
NSPR Error Handling
pr_bad_descriptor_error the file descriptor used as an argument in the preceding function is invalid. ...
... pr_bad_descriptor_error the file descriptor used as an argument in the preceding function is invalid. ...
... pr_bad_descriptor_error the file descriptor used as an argument in the preceding function is invalid. ...
...And 2 more matches
PRSockOption
pr_sockopt_linger time to linger on close if data is present in the socket send buffer. ...
... pr_sockopt_linger time to linger on close if data is present in the socket send buffer. ...
... pr_sockopt_linger time to linger on close if data is present in the socket send buffer. ...
...And 2 more matches
PR_EXTERN
the macro includes the proper specifications to declare the target extern and set up other required linkages. ...
...the macro includes the proper specifications to declare the target extern and set up other required linkages. ...
...the macro includes the proper specifications to declare the target extern and set up other required linkages. ...
...And 2 more matches
NSS PKCS11 Functions
s: if successful, a pointer to the name of the token (a string). if unsuccessful, null. description if the slot is freed, the string with the token name may also be freed. if you want to preserve it, copy the string before freeing the slot. do not try to free the string yourself. pk11_ishw finds out whether a slot is implemented in hardware or software. syntax #include <pk11pub.h> #include <pr
types.h> prbool pk11_ishw(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if the slot is implemented in hardware, pr_true. if the slot is implemented in software, pr_false. pk11_ispresent finds out whether the token for a slot is available. syntax #include <pk11pub.h> #include <...
...h> prbool pk11_ishw(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if the slot is implemented in hardware, pr_true. if the slot is implemented in software, pr_false. pk11_ispresent finds out whether the token for a slot is available. ...
...returns the function returns one of these values: if slot is read-only, pr_true. otherwise, pr_false. ...
...And 2 more matches
NSS tools : crlutil
ertutil 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 database tool. for information on certificate and key database management, see using the certificate database tool. 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. to see a usage string, issue the command without options, or with the -h option. options and arguments options options specify an action. option arguments modify an acti...
...ommand without options, or with the -h option. options and arguments options options specify an action. option arguments modify an action. the options and arguments for the crlutil command are defined as follows: -g create new certificate revocation list(crl).- -d delete certificate revocation list from cert database. -i import a crl to the cert database -e erase all crls of specified
type from the cert database -l list 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 (f...
...ecify the nickname of a certificate or key to list, create, add to a database, modify, or validate. bracket the nickname string with quotation marks if it contains spaces. -o output-file specify the output file name for new crl. bracket the output-file string with quotation marks if it contains spaces. if this argument is not used the output destination defaults to standard output. -t crl-
type specify
type of crl. possible
types are: 0 - sec_krl_
type, 1 - sec_crl_
type. this option is obsolete -u url specify the url. crl generation script syntax crl generation script file has the following syntax: * line with comments should have # as a first symbol of a line * set "this update" or "next update" crl fields: update=yyyymmddhhmmssz nextupdate=yyyymmddhhmmssz field "next update" ...
...And 2 more matches
NSS tools : pk12util
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 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. -k slotpasswordfile specify the text file containing the slot's password.
...he entire package. if no algorithm is specified, the tool defaults to using pkcs12 v2 pbe with sha1 and 3key triple des-cbc for private key encryption. pkcs12 v2 pbe with sha1 and 40 bit rc4 is the default for the overall package encryption when not in fips mode. when in fips mode, there is no package encryption. the private key is always protected with strong encryption by default. several
types of ciphers are supported. symmetric cbc ciphers for pkcs#5 v2 o des-cbc o rc2-cbc o rc5-cbcpad o des-ede3-cbc (the default for key encryption) o aes-128-cbc o aes-192-cbc o aes-256-cbc o camellia-128-cbc o camellia-192-cbc o camellia-256-cbc pkcs#12 pbe ciphers o pkcs #12 pbe with sha1 and 128 bit rc4 o pkcs #12 pbe with sha1 and 40 bit rc4 o pkcs #12 pbe with sha1 and triple des ...
...c with pkcs#12, the crypto provider may be the soft token module or an external hardware module. if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default). if no suitable replacement for the desired algorithm can be found, the tool returns the error no security module can perform the requested operation. 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...
...And 2 more matches
pkfnc.html
ul, a pointer to the name of the token (a string). if unsuccessful, null. description if the slot is freed, the string with the token name may also be freed. if you want to preserve it, copy the string before freeing the slot. do not try to free the string yourself. pk11_ishw finds out whether a slot is implemented in hardware or software. syntax #include <pk11func.h> #include <pr
types.h> prbool pk11_ishw(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if the slot is implemented in hardware, pr_true. if the slot is implemented in software, pr_false. pk11_ispresent finds out whe...
...owing parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if the slot is implemented in hardware, pr_true. if the slot is implemented in software, pr_false. pk11_ispresent finds out whether the token for a slot is available. syntax #include <pk11func.h> #include <pr
types.h> prbool pk11_ispresent(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if token is available, pr_true. if token is disabled or missing, pr_false. pk11_isreadonly finds out whether a slot is read...
...arameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if token is available, pr_true. if token is disabled or missing, pr_false. pk11_isreadonly finds out whether a slot is read-only. syntax #include <pk11func.h> #include <pr
types.h> prbool pk11_isreadonly(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if slot is read-only, pr_true. otherwise, pr_false. pk11_setpasswordfunc defines a callback function used by the nss libra...
...And 2 more matches
NSS tools : crlutil
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 database tool. for information on certificate and key database management, see using the certificate database tool. 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. to see a usage string, issue the command without options, or with the -h option. options and arguments options options specify an action. option argume...
...uments options options specify an action. option arguments modify an action. the options and arguments for the crlutil command are defined as follows: -g create new certificate revocation list(crl). -d delete certificate revocation list from cert database. -i import a crl to the cert database -e erase all crls of specified
type from the cert database -l list 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. ...
... to a database, modify, or validate. bracket the nickname string with quotation marks if it contains spaces. -o output-file specify the output file name for new crl. bracket the output-file string with quotation marks if it contains spaces. if this argument is not used the output destination defaults to standard output. -t crl-
type specify
type of crl. possible
types are: 0 - sec_krl_
type, 1 - sec_crl_
type. this option is obsolete -u url specify the url. crl generation script syntax crl generation script file has the following syntax: * line with comments should have # as a first symbol of a line * set "this update" or "next update" crl fields: update=yyyymmddhhmmssz n...
...And 2 more matches
NSS tools : pk12util
cs#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 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. -p prefix specify the prefix used on the certificate and key databases. this option ...
...age. if no algorithm is specified, the tool defaults to using pkcs12 v2 pbe with sha1 and 3key triple des-cbc for private key encryption. pkcs12 v2 pbe with sha1 and 40 bit rc4 is the default for the overall package encryption when not in fips mode. when in fips mode, there is no package encryption. the private key is always protected with strong encryption by default. several
types of ciphers are supported. symmetric cbc ciphers for pkcs#5 v2 des_cbc o rc2-cbc o rc5-cbcpad o des-ede3-cbc (the default for key encryption) o aes-128-cbc o aes-192-cbc o aes-256-cbc o camellia-128-cbc o camellia-192-cbc o camellia-256-cbc pkc...
...cs#12, the crypto provider may be the soft token module or an external hardware module. if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default). if no suitable replacement for the desired algorithm can be found, the tool returns the error no security module can perform the requested operation. 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 flexibili...
...And 2 more matches
The JavaScript Runtime
compilation to java bytecodes for improved performance, rhino may compile javascript scripts to java bytecodes. the generated bytecodes in turn depend upon runtime support routines. each javascript script or function is compiled to a separate class. compilation of javascript source to class files is supported. it is possible to specify the class files as well as the packages to generate into. ...
... performance, rhino may compile javascript scripts to java bytecodes. the generated bytecodes in turn depend upon runtime support routines. each javascript script or function is compiled to a separate class. compilation of javascript source to class files is supported. it is possible to specify the class files as well as the packages to generate into.
types and values there are six fundamental
types in javascript. ...
...pile javascript scripts to java bytecodes. the generated bytecodes in turn depend upon runtime support routines. each javascript script or function is compiled to a separate class. compilation of javascript source to class files is supported. it is possible to specify the class files as well as the packages to generate into.
types and values there are six fundamental
types in javascript. these
types are implemented with the following java
types and values: javascript fundamental
type java
type undefined a singleton object defined by context.getundefined
type() null null boolean java.lang.boolean number java.lang.number, that is, any of java.lang.byte, java.lang.short, java.lang.integer, java.lang.float, or java.lang.double. not...
...And 2 more matches
64-bit Compatibility
this article focuses on hacking tracemonkey code generation (jstracer.cpp, jsregex.cpp) in ways that will work on both 32-bit and 64-bit jit backends. 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. for all intents and purposes they are also 32-bit on 64-bit platforms: intn, uintn jsintn, jsuintn, jsbool general problems with pointers when performing bitwise operations on poin...
...can implicitly sign or zero extend operands with unintended side effects. for example, consider this code: #define pointer_tagbits 3 static inline uintptr_t unmaskpointer(uintptr_t v) { return v & ~pointer_tagbits; } the value 3 will be inverted to 0xfffffffc, then zero-extended to 0x00000000fffffffc - a subtle and nasty bug, assuming it is unintended. the best way to fix this is to make
types explicit, such as: const uintptr_t pointer_tagbits = 3 or by using a cast inside the macro. this sort of bug happens surprisingly often - see bug 501324, bug 512866 for example. amd64 pointers if mucking with pointers on amd64 (or em64-t/intel64), it is important to keep in mind an invariant that bits 63-48 must be sign-extended from bit 47. if you use these bits to squirrel away a payload, the...
... important to keep in mind an invariant that bits 63-48 must be sign-extended from bit 47. if you use these bits to squirrel away a payload, they must be adjusted before attempting to dereference the pointer. for more information and platform specific details on virtual address widths, see this article on wikipedia. builtins and calls when passing arguments to lirwriter::inscall(), there are four
types: argsize_f - floating point value argsize_i - 32-bit integer argsize_q - 64-bit integer argsize_p - 32-bit integer on 32-bit platforms, 64-bit integer on 64-bit platforms. remember to use argsize_p where appropriate - on pointers or natively sized integers (including jsvals). similarly, when adding
types to jsbuiltins.h, remember to use _js_ptr for pointer-width values. lir safety it is no...
...And 2 more matches
Self-hosted builtins in SpiderMonkey
obal 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. in contrast to function.proto
type.call, this syntax makes it impossible for other code to interfere and gets compiled to bytecode that doesn't have any overhead compared to a normal function invocation. otoh, normal method calls are forbidden in self-hosted code. so instead of receiver.fun(arg1, ..., argn) you have to use callfunction(fun, receiver, arg1, ... argn). this restriction was added because otherwise it's extremely eas...
...tions when assuming that content can't interfere with behavior. e.g., if receiver is an object that content has access to, then callfunction(receiver.fun, receiver) wouldn't be guaranteed to work, because content might have changed the value of receiver.fun, so callcontentfunction(receiver.fun, receiver) has to be used. self-hosted functions by default are not constructors and do not have a proto
type property, so that they meet the requirements for standard built-in functions as described in the ecmascript language specification 5.1, clause 15. to make a self-hosted function a constructor, call makeconstructible(functionname) after the function declaration. a proto
type property can be added from the self-hosted code itself. all self-hosted functions have direct access to each other and can r...
...a select set of c++-implemented builtins is installed via the intrinsic_functions array in selfhosting.cpp, as described below. using the same mechanism, c++-implemented helper functions are made available to self-hosted code. ...
...And 2 more matches
JS_ValueToNumber
requires request. ...
...requires request. ...
... which simply calls v.valueof() if present. if the convert callback produces a primitive value, the value is converted to a number as described above and conversion succeeds. otherwise, the resulting object's tostring method, if any, is called. ...
...And 2 more matches
SpiderMonkey 38
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 spidermonkey 38 .... xxx will need updating for actual new gc stuff at time! a major change to spidermonkey in 38 is that its apis support a moving garbage collector. this entailed changing the vast majority of the jsapi from raw
types, such as js::value or js::value*, to js::handle and js::mutablehandle template
types that encapsulate access to the provided value/string/object or its location. the js::handle<js::value> and js::mutablehandle<js::value> classes have been specialized to implement the same interface as js::value, for simplicity and to ease migration pain. changes to introduce handles to the jsapi are not indivi...
...:value, for simplicity and to ease migration pain. changes to introduce handles to the jsapi are not individually documented, because of the breadth of the changes involved. the following features in earlier versions of spidermonkey have been dropped. xxx list removed features here spidermonkey 38 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi
types, functions, and callback signatures have changed, though most functions that have changed still have the same names and implement essentially unchanged functionality. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant ...
... js_evaluatescript (bug 1100579) js_evaluateucscript (bug 1100579) js_executescriptversion (bug 1095660) js_getflatstringchars (bug 1037869) js_getfunctioncallback (bug 1103269) js_getinternedstringchars (bug 1037869) js_getinternedstringcharsandlength (bug 1037869) js_getstringcharsandlength (bug 1037869) js_getstringcharsz (bug 1037869) js_getstringcharszandlength (bug 1037869) js_get
typename (bug 1037718) js_isabouttobefinalized (bug 650161) js_lookupelement (bug 1094176) js_lookupproperty (bug 1094176) js_lookuppropertybyid (bug 1094176) js_lookupucproperty (bug 1094176) js_newpropertyiterator (bug 1081660) js_nextproperty (bug 1081660) js_resolvestub (bug 1103152) js_setfinalizecallback (bug 996785) js_setfunctioncallback (bug 1103269) jschar (bug 1063962) api chan...
...And 2 more matches
SpiderMonkey 45
arm architectures. on several other platforms (sparc, mips), the jit is provided but not supported. on remaining platforms the jit is disabled; javascript code runs in an interpreter, as it has in previous versions. it's the same language, just not as fast. migrating to spidermonkey 45 spidermonkey 45 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi
types; functions, and callback signatures, have changed though most functions that have retain their previous name, providing relatively unchanged functionality. applications will require significant changes, but most changes will be automatically detected by the c/c++ compiler, making them easy to detect and updating the code a relatively straightforward job. here is a list of the most significant ch...
...ain their previous name, providing relatively unchanged functionality. applications will require significant changes, but most changes will be automatically detected by the c/c++ compiler, making them easy to detect and updating the code a relatively straightforward job. here is a list of the most significant changes: js::nullptr is obsolete. you should now use nullptr instead. (supporting decl
type(nullptr)). new javascript language features javascript 45 includes significant updates to its language features, yo. new c++ apis jsapi is a c++ exclusive api. please note that spidermonkey reserves the js:: namespace for itself for public exports and the js:: namespace for internal use. js_setcurrentembeddertimefunction (bug 1159507) js_getcurrentembeddertime (bug 1159507) js_mayresol...
...vascript 45 includes significant updates to its language features, yo. new c++ apis jsapi is a c++ exclusive api. please note that spidermonkey reserves the js:: namespace for itself for public exports and the js:: namespace for internal use. ...
...And 2 more matches
TPS History Lists
date: required. an integer representing when the visit took place, expressed in hours from the present. for example, 0 is now, -24 is 24 hours in the past. ...
...date: required. an integer representing when the visit took place, expressed in hours from the present. for example, 0 is now, -24 is 24 hours in the past. ...
...ed for adding/modiyfing/verifying history, and the other for deleting history. the history list used for operations other than delete has the following properties: uri: required. title: optional. the page title for this uri. visits: required. an array of objects representing visits to the page, each object has the following properties:
type: required. ...
...And 2 more matches
History Service Design
sociation of useful metadata with urls flexible query system for both end-users and add-ons developers clean architecture for ease of code reuse and maintainability the most known and visible feature of history are views. the user can query his visits based on a date range, meta contents or revisit behavior. this involves storing informations on all of the user's visits, including visit time,
type of visit and meta data. old history system was instead only storing first and last visit date, and a generic visits counter, creating some problem due to the impossibility to represent real history flow in a timeframe. history views must be organized and as concise as possible. each visit is associated with a favicon, to allow for better recognizability and groupable by common timeframes or doma...
...istory 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. ...
...y 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.
typed means the page as a
typed visit, hidden means the page should not be shown in autocomplete, while frecency is the relevance the page will have in locationbar queries. finally observers are notified a new visit has been added. ...
...And 2 more matches
Creating a Python XPCOM component
he interface: #include "nsisupports.idl" [scriptable, uuid(2b324e9d-a322-44a7-bd6e-0d8c83d94883)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void change(in string avalue); }; this is the same as the nsisimple interface used here. theoretically, because several components can share an interface, the same file could be used. ...
..., uuid(2b324e9d-a322-44a7-bd6e-0d8c83d94883)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void change(in string avalue); }; this is the same as the nsisimple interface used here. theoretically, because several components can share an interface, the same file could be used. ...
...ause several components can share an interface, the same file could be used. pay special attention to
types here - python and javascript are both loosely-
typed, so it's fairly easy to pass information from one to the other. note: there are exceptions; see this discussion for information on the use of string and wstring for unicode transfer. see here for info on describing interfaces, and on which
types can be used. registering the interface in the "components" directory, execute : ../xpidl -m
typelib -w -v -i /usr/share/idl/mozilla/ nsipysimple.idl on windows you must point to the idl directory as part of your mozilla build. ...
...And 2 more matches
Building the WebLock UI
ce for the dialog and the events that initiate interaction with the web locking are 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...
...textbox and the button children, and it orients them horizontally (in contrast to 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. ...
... the weblock.xul file we defined previously. the icon is actually a separate <statusbarpanel/> 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. ...
...And 2 more matches
Setting up the Gecko SDK
ed by the module. the includes directory contains c++ header files used by your component. xpcom exports a number of binaries that should be mentioned at this point. the table below refers to the windows file names for the executables. application name description of functionality regxpcom.exe registers or unregisters components with xpcom xpidl.exe generates
typelib and c++ headers from xpidl xpt_dump.exe prints out information about a given
typelib xpt_link.exe combines multiple
typelibs into a single
typelib library name description of functionality xpcomglue.lib xpcom glue library to be used by xpcom components. building a microsoft visual cpp project once you set up the gecko sdk, you can ...
...e dialog to name your project and set its location. (this example uses "samplegeckoproject" as the project name and c:\ as its location.). (need correction for last visual c++. now it's microsoft visual c++ 2010. express edition is free.) new dialog select ok. in the win32 dynamic-link library dialog that displays (see below), you can choose the default selection "an empty dll project" as the
type of dll. in this dialog, click finish. microsoft studio creates a new project per your specification and presents you with the standard project view. adding the gecko sdk to the project settings in order to build anything that uses gecko, you have to further modify the project so that it knows where to find the gecko sdk on the disk. to edit project settings, select settings from the project ...
...ht forward. first create the idl file. ispecialthing.idl #include "nsisupports.idl" [scriptable, uuid(263ed1ba-5cc1-11db-9673-00e08161165f)] interface ispecialthing : nsisupports { attribute astring name; long add(in long a, in long b); }; next is to build the .h file to compile against and the .xpt for gecko to understand your new interface. xpidl -m header ispecialthing.idl xpidl -m
typelib ispecialthing.idl the code add the main code, the real work horse. cspecialthing.h #ifndef __specialthing_impl_h__ #define __specialthing_impl_h__ #include "ispecialthing.h" #include "nsstringapi.h" #define specialthing_contractid "@starkravingfinkle.org/specialthing;1" #define specialthing_classname "specialthing" #define specialthing_cid { 0x245626, 0x5cc1, 0x11db, { 0x96, 0x73, 0x0, ...
...And 2 more matches
nsEmbedCString
methods nsembedcstring constructors for nsembedcstring. ...
... methods nsembedcstring constructors for nsembedcstring. ...
... methods nsembedcstring constructors for nsembedcstring. ...
...And 2 more matches
nsEmbedString
methods nsembedstring constructors for nsembedstring. ...
... methods nsembedstring constructors for nsembedstring. ...
... methods nsembedstring constructors for nsembedstring. ...
...And 2 more matches
IAccessibleValue
ets you access the value and its upper and lower bounds. method overview [propget] hresult currentvalue([out] variant currentvalue ); [propget] hresult maximumvalue([out] variant maximumvalue ); [propget] hresult minimumvalue([out] variant minimumvalue ); hresult setcurrentvalue([in] variant value ); methods currentvalue() returns the value of this object as a number. the exact return
type is implementation dependent. typical
types are long and double. [propget] hresult currentvalue( [out] variant currentvalue ); parameters currentvalue returns the current value represented by this object. see the section about. return value s_false if there is nothing to return, [out] value is null. s_ok. maximumvalue() returns the maximal value that can be represented by this object. the typ...
...rrentvalue( [out] variant currentvalue ); parameters currentvalue returns the current value represented by this object. see the section about. return value s_false if there is nothing to return, [out] value is null. s_ok. maximumvalue() returns the maximal value that can be represented by this object. the
type of the returned value is implementation dependent. it does not have to be the same
type as that returned by method currentvalue(). ...
...urn, [out] value is null. s_ok. maximumvalue() returns the maximal value that can be represented by this object. the
type of the returned value is implementation dependent. it does not have to be the same
type as that returned by method currentvalue(). [propget] hresult maximumvalue( [out] variant maximumvalue ); parameters maximumvalue returns the maximal value in an implementation dependent
type. if this object has no upper bound then an empty object is returned. see the section about. return value s_ok. minimumvalue() returns the minimal value that can be represented by this object. the
type of the returned value is implementation dependent. it does not have to be the same
type as that returned by method currentvalue(). [propget] hresult minimumvalue( [out] variant minimumvalue ); p...
...And 2 more matches
mozIStorageConnection
68 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) for a general overview on how to use this interface, see storage. ...
...this will be false if the connection failed to open, or it has been closed. read only. databasefile nsifile the current database nsifile. null if the database connection refers to an in-memory database. read only. lasterror long the last sqlite error code that ...
...xpected thrown if the method was called on a thread other than the one that opened the connection. begintransaction() starts a new transaction deferred transaction. this is the same as calling mozistorageconnection with mozistorageconnection.transaction_deferred. void begintransaction(); parameters none. begintransactionas() this method starts a new transaction of the given transaction
type. see the sqlite documentation on transactions for more details. in javascript, managing transactions can be difficult when you are using the same connection on different threads, or are using a combination of asynchronous and synchronous statement execution. the best way to deal with this is to only execute your statements asynchronously using mozistorageconnection.executeasync(). this method wi...
...And 2 more matches
nsIChannel
headers to be retrieved for the corresponding http transaction. this interface must be used only from the xpcom main thread. implemented by netwerk/base/src/nsbasechannel.cpp and netwerk/protocol/http/src/nshttpchannel.cpp. method overview void asyncopen(in nsistreamlistener alistener, in nsisupports acontext); nsiinputstream open(); attributes attribute
type description contentcharset acstring the character set of the channel's content if available and if applicable. this attribute only applies to textual data. setting contentcharset before the channel has been opened provides a hint to the channel on what the charset should be. the behavior is similar to content
type. the value of the contentcharset attribute is a mixe...
... of the data associated with the channel if available. a value of -1 indicates that the content length is unknown. note: as of gecko 19.0, this parameter changed from long to int64_t. in earlier versions callers could get the "content-length" property as 64-bit value by queryinterfacing the channel to nsipropertybag2, if that interface is exposed by the channel. ...
...hannel if available. a value of -1 indicates that the content length is unknown. note: as of gecko 19.0, this parameter changed from long to int64_t. in earlier versions callers could get the "content-length" property as 64-bit value by queryinterfacing the channel to nsipropertybag2, if that interface is exposed by the channel. content
type acstring the mime
type of the channel's content if available. note: the content
type can often be wrongly specified (for example wrong file extension, wrong mime
type, wrong document
type stored on a server and so on.), and the caller most likely wants to verify with the actual data. setting content
type before the channel has been opened provides a hint to the channel as to what the mime
type is. the channel ...
...And 2 more matches
nsIDOMHTMLSourceElement
e source child of the audio and video media elements in html. dom/interfaces/html/nsidomhtmlsourceelement.idlscriptable please add a summary to this article. last changed in gecko 1.9.1.2 inherits from: nsidomhtmlelement the source element allows authors to specify multiple media resources for media elements. it does not specify anything on its own. ...
...the codecs parameter may be specified and might be necessary to specify exactly how the resource is encoded. ...
...te
type description src domstring the src attribute gives the address of the media resource. the value must be a valid url. this attribute must be present. note that dynamically manipulating this value after the page has loaded has no effect on the containing element; instead, change the src attribute of that element (audio or video) instead.
type domstring the
type attribute gives the
type of the media resource, to help the user agent determine if it can play this media resource before fetching it. if specified, its value must be a valid mime
type. the codecs parameter may be specified and might be necessary to specify exactly how the resource is encoded. ...
...And 2 more matches
nsIDOMMouseScrollEvent
e 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 / seamonkey 2.0) gecko 1.9.2 note prior to gecko 1.9.2, this inherited from nsisupports instead of from nsidommouseevent. ...
...read only. constants constant value description horizontal_axis 1 the horizontal (x) axis. vertical_axis 2 the vertical (y) axis. methods initmous...
...d; this will be either horizontal_axis or vertical_axis. read only. constants constant value description horizontal_axis 1 the horizontal (x) axis. vertical_axis 2 the vertical (y) axis. methods initmousescrollevent() initializes the progress event object. ...
...And 2 more matches
nsIDOMMozNetworkStatsManager
ional] in jsval options /* networkstatsalarmoptions */); nsidomdomrequest getallalarms([optional] in nsisupports network); nsidomdomrequest removealarms([optional] in long alarmid); nsidomdomrequest clearstats(in nsisupports network); nsidomdomrequest clearallstats(); nsidomdomrequest getavailablenetworks(); nsidomdomrequest getavailableservice
types(); attributes attribute
type description samplerate long minimum time in milliseconds between samples stored in the database. read only. maxstorageage long long time in milliseconds recorded by the api until present time. all samples older than maxstorageage from now are deleted. read only. constants constant
type descri...
...corded by the api until present time. all samples older than maxstorageage from now are deleted. read only. constants constant
type description wifi long constant for wifi, set to 0 mobile long constant for mobile, set to 1 methods getsamples() asynchronously queries network interface statistics. the query may be filtered by connection
type and date. nsidomdomrequest getsamples(in nsisupports network, in jsval start, in jsval end, [optional] in jsval options /* networkstatsgetoptions */); parameters network the origin of the data. it can specify wifi, mobile, or null. if null, data measurement from both origins are merged. to know in advance w...
...networkstats object describing the network statistics. if network stats are not available for some dates, then rxbytes and txbytes are undefined for those dates. if the filtering start date is greater than the end date, an exception is thrown. exceptions thrown ns_error_invalid_arg the filtering start date is greater than the end date. ns_error_not_implmented both appmanifesturl and service
type are specified at the same time in the networkstatsgetoptions dictionary. invalidnetwork the network must be in the return of getavailablenetworks. addalarm() install an alarm on a network. when total data usage reaches threshold bytes, a "networkstats-alarm" system message is sent to the application, where the optional parameter data must be a cloneable object. nsidomdomrequest addalarm(in ...
...And 2 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 / seamonkey 2.0) the nsidomsimplegestureevent interface is the data
type 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.
... device. client coordinates contain the center pivot point of the action. (xxx not implemented on mac) default behavior: some operating systems support default behaviors for gesture events when they are not handled by the application. consumers should use event.preventdefault() to prevent default behavior when consuming events. ...
...for update events, this indicates the movement since the previous update; for the mozrotategesture and mozmagnifygesture events, this indicates the total movement that occurred while the event was being processed. the value is specified in degrees for rotation events (where positive values i...
...And 2 more matches
nsIDownloadManager
erits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) implemented by: @mozilla.org/download-manager;1. ...
...read only. activedownloads nsisimpleenumerator an enumeration of active nsidownloads. read only. cancleanup boolean whether or not there are downloads that can be cleaned up (removed) that is downloads that have completed, have failed or have been canceled. read onl...
... that a file is infected and cannot be cleaned. download_scanning 7 the download is being scanned by a virus checking utility. download_dirty 8 a virus was detected in the download. the target will most likely no longer exist. download_blocked_policy 9 windows specific: request was blocked by zone policy settings. (see bug 416683) download_
type_download 0 the download
type used by adddownload. is the
type for a "generic file download" according to the .idl file. methods adddownload() creates an nsidownload and adds it to the list of activities being managed by the download manager. note: adding a download doesn't automatically begin the transfer. if you want to both add and start a download, you need to create an nsiwebb...
...And 2 more matches
nsIEventListenerService
venttarget aeventtarget, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidomeventtarget aoutarray); void getlistenerinfofor(in nsidomeventtarget aeventtarget, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsieventlistenerinfo aoutarray); boolean haslistenersfor(in nsidomeventtarget aeventtarget, in domstring a
type); void addsystemeventlistener(in nsidomeventtarget target, in domstring
type, in nsidomeventlistener listener, in boolean usecapture); void removesystemeventlistener(in nsidomeventtarget target, in domstring
type, in nsidomeventlistener listener, in boolean usecapture); attributes attribute
type description sys...
...is(acount)] out nsieventlistenerinfo aoutarray ); parameters aeventtarget the nsieventtarget for which to obtain a list of listeners. acount on return, the number of returned listener descriptors. aoutarray an array of nsieventlistenerinfo objects describing the listeners. haslistenersfor() returns true if a event target has any listener for the given
type. boolean haslistenersfor( in nsidomeventtarget aeventtarget, in domstring a
type ); parameters aeventtarget the nsidomeventtarget for which to check if this has any listener for a
type. a
type an event name. addsystemeventlistener() add a system-group eventlistener to a event target. system-group eventlisteners are called after all eventlisteners in default-group ...
...oup eventlistener to a event target. system-group eventlisteners are called after all eventlisteners in default-group handle the events. so, system-group eventlisteners can implement the default action of the event. even if an event is stopped its propagation in default-group, the event will be fired again in system-group. void addsystemeventlistener( in nsidomeventtarget target, in domstring
type, in nsidomeventlistener listener, in boolean usecapture ); parameters target the nsidomeventtarget for the event target to listen an event.
type the event name to listen. listener the nsidomeventlistener which listens the event. usecapture true if to listen the event in capture phase, otherwise, false. removesystemeventlistener() rem...
...And 2 more matches
nsIFocusManager
void windowlowered(in nsidomwindow awindow); native code only! void windowraised(in nsidomwindow awindow); native code only! void windowshown(in nsidomwindow awindow, in prbool aneedsfocus); native ...
...setting the activewindow raises it, and focuses the current child window's current element, if any. setting this to null or to a non-top-level window throws an ns_error_invalid_arg exception. focusedelement nsidomelement the ele...
... 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. flag_showring 0x100000 always show the focus ring or other indicator of focus, regardless of other state. movefocus_forward 1 move focus forward one element, used when pressing tab. movefocus_backward 2 move focus backward one element, used when pressing shift+tab. movefocus_forwarddoc 3 move focus ...
...And 2 more matches
nsINavBookmarksService
etitemdateadded(in long long aitemid); 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 getitem
type(in long long aitemid); astring getkeywordforbookmark(in long long aitemid); obsolete since gecko 40.0 astring getkeywordforuri(in nsiuri auri); obsolete since gecko 40.0 nsitransaction getremovefoldertransaction(in long long aitemid); nsiuri geturiforkeyword(in astring keyword); obsolete since gecko 40.0 void importbookmarkshtml(in nsiuri url); obsol...
...read only. note: renamed from bookmarksroot in gecko 1.9 placesroot long long the item id of the top-level folder that contains bookmarks, tags and all other places data. this contains administrative data as well as user data, and is therefore not recommended for use in queries. re...
...nfiledbookmarksfolder long long the item id of the unfiled bookmarks folder. read only. constants constant value description default_index -1 this is the default index; this value should be used for apis that allow passing in an index where the index is not known or is not required to be specified, such as when appending an item to a folder.
type_bookmark 1 this is an index for
type "bookmark".
type_folder 2 this is an index for
type "folder".
type_separator 3 this is an index for
type "separator".
type_dynamic_container 4 this is an index for
type "dynamic container". dynamic containers were removed in gecko 11, but the
type index remains to prevent reuse. methods addobserver() ...
...And 2 more matches
nsIPropertyBag2
t, or exists but is null. 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 an acstring. note: accessing a property of a different
type may attempt conversion to this
type. getpropertyasastring() astring getpropertyasastring( in astring prop ); parameters prop property to return the value of. return value the property value as a string. note: accessing a property of a different
type may attempt conversion to this
type. getpropertyasautf8string() autf8string getpropertyasautf8string( in astring prop ); parameters ...
...operty to return the value of. return value the property value as a string. note: accessing a property of a different
type may attempt conversion to this
type. getpropertyasautf8string() autf8string getpropertyasautf8string( in astring prop ); parameters prop property to return the value of. return value the property value as an autf8string. note: accessing a property of a different
type may attempt conversion to this
type. getpropertyasbool() boolean getpropertyasbool( in astring prop ); parameters prop property to return the value of. return value the property value as a boolean. note: accessing a property of a different
type may attempt conversion to this
type. getpropertyasdouble() double getpropertyasdouble( in astring prop ); parameters prop propert...
...ers prop property to return the value of. return value the property value as a boolean. note: accessing a property of a different
type may attempt conversion to this
type. getpropertyasdouble() double getpropertyasdouble( in astring prop ); parameters prop property to return the value of. return value the property value as a double. note: accessing a property of a different
type may attempt conversion to this
type. getpropertyasint32() print32 getpropertyasint32( in astring prop ); parameters prop property to return the value of. return value the property value as a print32. note: accessing a property of a different
type may attempt conversion to this
type. getpropertyasint64() print64 getpropertyasint64( in astring prop ); parameters prop proper...
...And 2 more matches
nsIProxyInfo
this interface identifies a proxy server. netwerk/base/public/nsiproxyinfo.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports attributes attribute
type description failoverproxy nsiproxyinfo this attribute specifies the proxy to failover to when this proxy fails. failovertimeout unsigned long this attribute specifies the failover timeout in seconds for this proxy. if a nsiproxyinfo is reported as failed via nsiprotocolproxyservice.getfailoverforproxy(), then the failed proxy will not be used again for this many seconds. read only. flags unsigned long this attribute ...
... failovertimeout unsigned long this attribute specifies the failover timeout in seconds for this proxy. if a nsiproxyinfo is reported as failed via nsiprotocolproxyservice.getfailoverforproxy(), then the failed proxy will not be used again for this many seconds. read only. flags unsigned long this attribute specifies flags that modify the proxy
type. the value of this attribute is the bit-wise combination of the proxy flags defined below. any undefined bits are reserved for future use. read only. host autf8string this attribute specifies the hostname of the proxy server. read only. note: prior to gecko 1.8 host was available by the host method. next nsiproxyinfo proxy i...
... next nsiproxyinfo proxy info objects may be chained if several proxies could be treated equivalently. this is used to support proxy failover. read only. obsolete since gecko 1.8 port long this attribute specifies the port number of the proxy server. read only. note: prior to gecko 1.8 port was available by the port method.
type acstring this attribute specifies the
type of the proxy server as a case insensitive ascii string. some special values for this attribute include (but are not limited to) the following: "http" - http proxy (or ssl connect for https) "socks" - socks v5 proxy "socks4" - socks v4 proxy "direct" - no proxy "unknow...
...And 2 more matches
nsISHEntry
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! boolean hasdetachededito...
... 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...
...oid setissubframe(in boolean aflag); void setscrollposition(in long x, in long y); void settitle(in astring atitle); void setuniquedocidentifier(); void seturi(in nsiuri auri); void setviewerbounds(in nsintrect bounds); native code only! void syncpresentationstate(); attributes attribute
type description cachekey nsisupports set and get the cache key for the entry. content
type 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 entries for the same document. in practice, two entries a and b wi...
...And 2 more matches
nsISocketTransportService
netwerk/base/public/nsisockettransportservice.idlscriptable this interface provides a mapping between a socket
type and its associated socket provider instance. one could also use the service manager directly. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/socket-transport-service;1. ...
... an instance, use: var sockettransportservice = components.classes["@mozilla.org/network/socket-transport-service;1"] .getservice(components.interfaces.nsisockettransportservice); method overview void attachsocket(in prfiledescptr afd, in nsasockethandlerptr ahandler); native code only! ...
...obsolete since gecko 1.8 methods native code only! attachsocket adds a new socket to the list of controlled sockets. ...
...And 2 more matches
nsIStyleSheetService
5 / seamonkey 1.0) inherits from: nsisupports implemented by: @mozilla.org/content/style-sheet-service;1. ...
...style-sheet-service;1. ...
...a user sheet loaded via this api will come before...
...And 2 more matches
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 / seamonkey 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 v...
... isprivatedata boolean although this is not a read-only attribute, you should generally avoid changing it, since doing so may cause it not to actually reflect the status of the context...
...is transferable was created from. native code only! note: currently, this can only be used on windows (in order to support network principal information in drag operations). constants kflavorhasdataprovider (that title needs to be better) constant value description kflavorhasdataprovider 0 a description is needed here. common mime
types some of these need better descriptions, especially the mozilla-specific ones. constant value description ktextmime text/plain plain text. kunicodemime text/unicode unicode text. kmoztextinternal text/x-moz-text-internal text data that isn't meant to be used by non-mozilla code. khtmlmime text/html html. kao...
...And 2 more matches
nsITreeView
read only. selection nsitreeselection the selection for this view. constants constant value description progress_normal 1 note: renamed from progressnormal in gecko 1.8 progress_undetermined 2 note: renam...
...text for a given cell. if a column consists only of an image, then the empty string is returned. astring getcelltext( in long row, in nsitreecolumn col ); parameters row the index of the row. col the column of the cell. (note that this is not the column index.) return value the text of the cell. getcellvalue() the value for a given cell. this method is only called for columns of
type other than text. astring getcellvalue( in long row, in nsitreecolumn col ); parameters row the index of the row. col the column of the cell. (note that this is not the column index.) return value the value of the cell. getcolumnproperties() called to get properties to paint a column background. for shading the sort column, and so on. each property, x, that the view gives back wi...
...ines in the tree. getparentindex is used to obtain the index of a parent row. if there is no parent row, getparentindex returns -1. long getparentindex( in long rowindex ); parameters rowindex the index of the row whose parent should be found. return value the row index of the parent row. getprogressmode() the progress mode for a given cell. this method is only called for columns of
type progressmeter. see the constants section for possible modes. long getprogressmode( in long row, in nsitreecolumn col ); parameters row the index of the row. col the index of the column. return value the progress mode for the cell. getrowproperties() an atomized list of properties for a given row. each property, x, that the view gives back will cause the css ::moz-tree-row(x) pse...
...And 2 more matches
nsIXmlRpcClient
add a summary to this article. ...
...null if the last call didn't return an xml-rpc fault. result readonly nsisupports the most recent xml-rpc call result returned from this server. null if the last call...
... server. null if the last call didn't return a valid result. responsestatus readonly unsigned long the most recent http status code returned from this server. null if the server was unreachable or not yet contacted. responsestring readonly unsigned long the most recent http status code returned from this server. null if the server was unreachable or not yet contacted. constants constant
type description int unsigned long nsisupportsprint32 boolean unsigned long nsisupportsprbool string unsigned long nsisupportscstring double unsigned long nsisupportsdouble datetime unsigned long nsisupportsprtime array readonly unsigned long nsisupportsarray struct readonly unsigned long nsisupportsdictionary methods init() set server url. call this before using this object void ge...
...And 2 more matches
pyxpidl
the pyxpidl tool suite has been built to replace the older xpidl tool which, in the past, was used to turn xpidl files into c++ headers and xpcom
typelibs (xpt files). the newer utility has the advantage of not needing any code to be compiled in order to use it, and let us remove a bunch of old code from the tree. pyxpidl has been in use for a while, but replaced xpidl in the gecko sdk starting in gecko 9.0. using pyxpidl pyxpidl is in the sdk in the sdkdir/sdk/bin/ directory. unlike xpidl, which combined all the functions into a single utility, pyxpidl is comprised of two utilities: header.py, which generates c++ headers from idl, and
typelib.py, which generates xpt files. pyxpidl requires a directory to cache certain information in. you can use a temporary directory or the curre...
...enerates c++ headers from idl, and
typelib.py, which generates xpt files. pyxpidl requires a directory to cache certain information in. you can use a temporary directory or the current directory or whatever works best for you. generating c++ headers to generate c++ headers, use the header.py utility: sdkdir/sdk/bin/header.py --cachedir=<path> -o <outputfilename.h> <filename.idl> generating
typelibs generating
typelib files is done using the
typelib.py utility: sdkdir/sdk/bin/
typelib.py --cachedir=<path> -o <outputfilename.xpt> <filename.idl> comparing pyxpidl to xpidl this table provides a mapping of old xpidl options to pyxpidl. ...
...ath> -o <outputfilename.h> <filename.idl> generating
typelibs generating
typelib files is done using the
typelib.py utility: sdkdir/sdk/bin/
typelib.py --cachedir=<path> -o <outputfilename.xpt> <filename.idl> comparing pyxpidl to xpidl this table provides a mapping of old xpidl options to pyxpidl. ...
...And 2 more matches
xpidl
pyxpidl has been used for some time now, but now this older tool has been fully retired. ...
...pyxpidl has been used for some time now, but now this older tool has been fully retired. ...
... further information on where to get libidl and glib. using xpidl to add an idl file to the build, use the xpidlsrcs makefile variable. for testing purposes, or one-off interface compilation, xpidl can be run from the command line: usage: ./xpidl -m mode [-w] [-v] [-t version number] [-d filename.pp] [-i path] [-o basename | -e filename.ext] filename.idl -a emit annotations to
typelib -w turn on warnings (recommended) -v verbose mode (nyi) -t create a
typelib of a specific version number -i add entry to start of include path for ``#include "nsithing.idl" -o use basename (e.g. ``/tmp/nsithing) for output -e use explicit output filename -d write dependencies (requires -e) -m specify output mode: header g...
...And 2 more matches
Filelink Providers
nsimsgcloudfileprovider is being created as part of an add-on, the add-on must register the component in chrome.manifest. also, you must add the component's contract id to the "cloud-file" category. see cloudfile/cloudfilecomponents.manifest for an example, as well as this document on chrome.manifest files. the account setup dialog the account setup dialog allows the user to select what account
type they would like to create from a menulist. some providers require thunderbird to do very little in order to connect a user to their account. other providers however may require the user to fill in additional details in order to connect to the service. hightail, for example, requires a username and password. other services may require the user to fill in a server string or port number. a provi...
...uld resize itself automatically in order to fit the content of the iframe without scrollbars. custom settings fields to handle custom settings, the settings xhtml page should contain a form with the id "provider-form", with its onsubmit attribute set to "return false;". example: <form id="provider-form" onsubmit="return false;"> <label for="username">username:</label> <input id="username"
type="text" required="true" /> <label for="server">server:</label> <input id="server"
type="text" required="true" /> <label for="port">port:</label> <input id="port" pattern="[0-9]+" required="true" /> </form> the form is expected to use html5 form validation. for each input event, the checkvalidity method of the form is automatically called. the button to set up the account will only become...
...n to set up the account will only become enabled once the checkvalidity method for the form returns true. saving custom settings in preferences custom settings for a provider are saved using the preferences api. saving the preferences is handled automatically by the dialog code. ...
...And 2 more matches
Flash Activation: Browser Comparison - Plugins
t the user in some way and give the user an opportunity to enable flash for that site. flash-blocking extensions are no longer necessary because this functionality is now built into the browser. ...
...no longer necessary because this functionality is now built into the browser. ...
... using a script callback to determine when a plugin is activated similarly, a site's script shouldn't attempt to script a plugin...
...And 2 more matches
Debugger.Memory - Firefox Developer Tools
y.maxallocationsloglength. censuses a census is a complete traversal of the graph of all reachable memory items belonging to a particular debugger‘s debuggees. it produces a count of those items, broken down by various criteria. ifdbg is a debugger instance, you can call dbg.memory.takecensus to conduct a census of its debuggees’ possessions. accessor properties of the debugger.memory.proto
type object ifdbg is a debugger instance, then <i>dbg</i>.memory is a debugger.memory instance, which inherits the following accessor properties from its proto
type: trackingallocationsites a boolean value indicating whether this debugger.memory instance is capturing the javascript execution stack when each object is allocated. this accessor property has both a getter and setter: assigning to it...
...e allocation site tracking. reading the accessor produces true if the debugger is capturing stacks for object allocations, and false otherwise. allocation site tracking is initially disabled in a new debugger. assignment is fallible: if the debugger cannot track allocation sites, it throws an error instance. you can retrieve the allocation site for a given object with the debugger.object.proto
type.allocationsite accessor property. allocationsamplingprobability a number between 0 and 1 that indicates the probability with which each new allocation should be entered into the allocations log. 0 is equivalent to “never”, 1 is “always”, and .05 would be “one out of twenty”. the default is 1, or logging every allocation. note that in the presence of multiple debugger instanc...
...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 instance, each of these properties is initially undefined. any value assigned to a debugging handler must be either a function or undefined; otherwise a
typeerror is thrown. handler functions run in the same thread in which the event occurred. they 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 proper...
...And 2 more matches
Aggregate view - Firefox Developer Tools
before firefox 48, this was the default view of a heap snapshot. after firefox 48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": the aggregate view looks something like this: it presents a breakdown of the heap's contents, as a table. ...
...o group the data:
type call stack inverted call stack you can switch between them using the dropdown menu labeled "group by:" located at the top of the panel: there's also a box labeled "filter" at the top-right of the pane. you can use this to filter the contents of the snapshot that are displayed, so you can quickly see, for example, how many objects of a specific class were allocated.
type this is the default view, which looks something like this: it groups the things on the heap into
types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape". these are prefixed with "js::". ...
...for example, in the screenshot above you can see that javascript objects account for most memory, followed by strings. the "total count" column shows you the number of objects of each category that are currently allocated. ...
...And 2 more matches
Network request list - Firefox Developer Tools
g) by modifying the devtools.netmonitor.audits.slow setting. url: the url of the file requested. protocol: the network protocol used to transfer the data, this column is hidden by default. scheme: the scheme (https/http/ftp/...) of the path requested. this column is hidden by default. remote ip: the ip address of the server answering the request. this column is hidden by default.
type: content-
type of the response. cookies: the number of request cookies associated to the request. this column is hidden by default. this is new in firefox 55. set-cookies: the number of response cookies associated to the request. this column is hidden by default. this is new in firefox 55. transferred: the number of bytes that were actually transferred to load the resource, or a message about w...
...g a url from the request list hover over the item. select unblock url. now when you refresh the page, the item will once enabled. note: (starting in firefox 80) you can also block and unblock urls from the web console, using the :block and :unblock helper commands. these accept any string, and affect any url containing the string. filtering requests you can filter requests by content
type, by whether they are xmlhttprequests or websocket requests, or by request properties. filter
type how to apply content
type use the buttons in the toolbar (html, css, js). xhr requests use the xhr button in the toolbar. websocket connections use the ws button in the toolbar. you can filter by plain text (in which case the text is used to find p...
...od shows resources that have were requested via the specific http request method. method:post domain shows resources coming from a specifc domain. domain:mozilla.org remote-ip shows resources coming from a server with the specified ip. remote-ip:63.245.215.53 remote-ip:[2400:cb00:2048:1::6810:2802] cause shows resources matching a specific cause
type. the
types can be found in the description of the cause column. cause:js cause:stylesheet cause:img transferred shows resources having a specific transferred size or a transferred size close to the one specified. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024. transferred:1k size shows resources having a sp...
...And 2 more matches
Examine and edit CSS - Firefox Developer Tools
ent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule. it represents the css properties assigned to the element via its style attribute. this also gets the target icon: , giving you a convenient way to highlight the currently selected element in the page. filtering rules there's a box at the top of the rules view labeled "filter styles": as you
type: any rules which don't contain the
typed string at all are hidden any declarations which contain the
typed string are highlighted click the "x" at the end of the search box to remove the filter. while in the rules view, you can press ctrl / cmd + f to focus the search field. once you've
typed in a filter, you can press esc to remove it again. strict search by default, the search box ...
...u can click the .cls button in the rules pane toolbar, to display the classes defined on that element. you can clear the checkbox for a particular class name, to see how the element would appear without that class applied to it. you can add a class to the element by typing a name in the add new class field below the rules toolbar. autocompletions based on existing classes are suggested as you
type. link to css file at the top right of each rule, the source filename and line number is displayed as a link: clicking it opens the file in the style editor. you can copy the location of the source file: right-click the link and select "copy location". the inspector understands css source maps. that means that if you are using a css preprocessor that has support for source maps, and you've en...
...ult, this view only shows values that have been explicitly set by the page: to see all values, click the "browser styles" box. you can tab through the filenames/line numbers; pressing enter/return will open up the relevant file at that point in the style editor. typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can
type "font" in the search box, and only properties with "font" in the name will be listed. you can also search for the values of properties: to find the rule responsible for setting the font to "lucida grande",
type that in the search box. while in the computed view, you can press ctrl / cmd + f to focus the search field. once you've
typed in a filter, you can press esc to remove it again. edit ru...
...And 2 more matches
Storage Inspector - Firefox Developer Tools
cookies — all the cookies created by the page or any iframes inside of the page. cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open. indexeddb — all indexeddb databases created by the page or any iframes inside the page, their object stores and the items stored in these object stores. local storage — all local storage items created by the page or any iframes inside the page. ...
...), 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 inspect: under each
type, objects are organized by origin. for cookies, the protocol does not differentiate the origin. for indexed db or local storage an origin is a combination of protocol + hostname. for example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them. under "cache storage...
...ocol + hostname. for example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them. under "cache storage", objects are organized by origin and then by the name of the cache: indexeddb objects are organized by origin, then by database name, then by object store name: with the cookies, local storage, and session storage
types, there's only one level in the hierarchy, so stored items are listed directly under each origin: you can click on each item in the tree to expand or collapse its children. the tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage
type automatically. clicking on a tree item will display detailed information about that item in the tabl...
...And 2 more matches
Applying styles and colors - Web APIs
illstyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')'; for (var j = 0; j < 4; j++) { ctx.fillrect(5 + i * 14, 5 + j * 37.5, 14, 27.5); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample line styles there are several properties which allow us to style lines. linewidth = value sets the width of lines drawn in the future. linecap =
type sets the appearance of the ends of lines. linejoin =
type sets the appearance of the "corners" where lines meet. miterlimit = value establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes. getlinedash() returns the current line dash pattern array containing an even number of non-negative numbers. setlinedash(segments) sets ...
...the setlinedash method ...
...the setlinedash method accepts a list of numbers that specifies distances to al...
...And 2 more matches
Pixel manipulation with canvas - Web APIs
he invert function simply subtracts each color from the max value 255. the grayscale function simply uses the average of red, green and blue. you can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. see grayscale on wikipedia for more information. ...
...e max value 255. the grayscale function simply uses the average of red, green and blue. you can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. see grayscale on wikipedia for more information. ...
... because anti-aliasing is enabled by default, we might want to disable the smoothing to see clear pixels. you can toggle the checkbox to see the effect of the imagesmoothingenabled property (which needs prefixes for different browsers). ...
...And 2 more matches
DataTransferItemList.add() - Web APIs
the datatransferitemlist.add() method creates a new datatransferitem using the specified data and adds it to the drag data list. the item may be a file or a string of a given
type. if the item is successfully added to the list, the newly-created datatransferitem object is returned. syntax datatransferitem = datatransferitemlist.add(data,
type); datatransferitem = datatransferitemlist.add(file); parameters data a string representing the drag item's data.
type a string of the drag item's
type. some example
types are text/html and text/plain. file a file object. no
type needs to be given in this case. return value a datatransferitem containing the specified data. if the drag item couldn't be created (for example, if the associated datatransfer object has no data store), null is...
... example this example shows the use of the add() method. ...
...iven in this case. return value a datatransferitem containing the specified data. if the drag item couldn't be created (for example, if the associated datatransfer object has no data store), null is returned. exceptions notsupportederror a string data parameter was provided, and the list already contains an item whose kind is "plain unicode string" and whose
type is equal to the specified
type parameter. example this example shows the use of the add() method. html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</...
...And 2 more matches
Document.forms - Web APIs
omponent user input elements using the htmlformelement.elements property. syntax collection = document.forms; value an htmlcollection object listing all of the document's forms. each item in the collection is a htmlformelement representing a single <form> element. if the document has no forms, the returned collection is empty, with a length of zero. ...
...e an htmlcollection object listing all of the document's forms. each item in the collection is a htmlformelement representing a single <form> element. if the document has no forms, the returned collection is empty, with a length of zero. ...
...t representing a single <form> element. if the document has no forms, the returned collection is empty, with a length of zero. ...
...And 2 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
ine in any modern browser, including all versions of firefox and ie 5+. the dom methods presented here are part of the document object model (core) level 1 specification. dom level 1 includes both methods for generic document access and manipulation (dom 1 core) as well as methods specific to html documents (dom 1 html). ...
...>). finally, each <td> has one child: a text node. example: setting the background color of a paragraph getelementsbytagname(tagnamevalue) is a method available in any dom element or the root document element. when called, it returns an array with all of the element's descendants matching the tag name. the first element of the list is located at position [0] in the array. ...
...round = "rgb(255,0,0)"; // setting inline style attribute creating textnodes with document.createtextnode("..") use the document object to invoke the createtextnode method and create your text node. you just need to pass the text content. the return value is an object that represents the text node. mytextnode = document.createtextnode("world"); this means that you have created a node of the
type text_node (a piece of text) whose text data is "world", and mytextnode is your reference to this node object. to insert this text into your html page, you need to make this text node a child of some other node element. inserting elements with appendchild(..) so, by calling myp.appendchild(node_element), you are making the element a new child of the second <p> element. myp.appendchild(mytextnod...
...And 2 more matches
Element: blur event - Web APIs
element has lost focus. the main difference between this event and focusout is that focusout bubbles while blur does not. the opposite of blur is focus. ...
...tween this event and focusout is that focusout bubbles while blur does not. the opposite of blur is focus. ...
... ht...
...And 2 more matches
Element: focus event - Web APIs
ment has received focus. the main difference between this event and focusin is that focusin bubbles while focus does not. the opposite of focus is blur. ...
...tween this event and focusin is that focusin bubbles while focus does not. the opposite of focus is blur. ...
... htm...
...And 2 more matches
Element - Web APIs
2px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent interface, node, and by extension that interface's parent, eventtarget. it implements the properties of parentnode, childnode, nondocument
typechildnode, and animatable. element.attributes read only returns a namednodemap object containing the assigned attributes of the corresponding html element. element.classlist read only returns a domtokenlist containing the list of class attributes. element.classname is a domstring representing the class of the element. element.clientheight read only returns a number representing the in...
....localname read only a domstring representing the local part of the qualified name of the element. element.namespaceuri read only the namespace uri of the element, or null if it is no namespace. note: in firefox 3.5 and earlier, html elements are in no namespace. in later versions, html elements are in the http://www.w3.org/1999/xhtml namespace in both html and xml trees. nondocument
typechildnode.nextelementsibling read only is an element, the element immediately following the given one in the tree, or null if there's no sibling node. element.outerhtml is a domstring representing the markup of the element including its content. when used as a setter, replaces the element with nodes parsed from the given string. element.part represents the part identifier(s) of the element (...
...the markup of the element including its content. when used as a setter, replaces the element with nodes parsed from the given string. element.part represents the part identifier(s) of the element (i.e. set using the part attribute), returned as a domtokenlist. element.prefix read only a domstring representing the namespace prefix of the element, or null if no prefix is specified. nondocument
typechildnode.previouselementsibling read only is a element, the element immediately preceding the given one in the tree, or null if there is no sibling element. element.scrollheight read only returns a number representing the scroll view height of an element. element.scrollleft is a number representing the left scroll offset of the element. element.scrollleftmax read only returns a number...
...And 2 more matches
File - Web APIs
ht="50" fill="#f4f7f8" 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">file</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file. ...
...fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">file</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file. instance properties file.proto
type.lastmodified read only returns the last modified time of the file, in millisecond since the unix epoch (january 1st, 1970 at midnight). file.proto
type.lastmodifieddate read only returns the last modified date of the file referenced by the file object. ...
...5dd; pointer-events: all;} constructor file() returns a newly constructed file. instance properties file.proto
type.lastmodified read only returns the last modified time of the file, in millisecond since the unix epoch (january 1st, 1970 at midnight). file.proto
type.lastmodifieddate read only returns the last modified date of the file referenced by the file object. file.proto
type.nameread only returns the name of the file referenced by the file object. file.proto
type.webkitrelativepath read only returns the path the url of the file is relative to. ...
...And 2 more matches
FileList - Web APIs
an object of this
type is returned by the files property of the html <input> element; this lets you access the list of files selected with the <input
type="file"> element. it's also used for a list of files dropped into web content when using the drag and drop api; see the datatransfer object for details on this usage. note: prior to gecko 1.9.2, the input element only supported a single file being selected at a time, meaning that the filelist would contain only one file. starting with gecko 1.9.2, if the input element's multiple attribute is true, the filelist may contain multiple files. using the file list all <input> element nodes have a files attribute of
type filelist on them which allows access to the items in this list. for example, if the html includes the following file input: ...
...meaning that the filelist would contain only one file. starting with gecko 1.9.2, if the input element's multiple attribute is true, the filelist may contain multiple files. using the file list all <input> element nodes have a files attribute of
type filelist on them which allows access to the items in this list. for example, if the html includes the following file input: <input id="fileitem"
type="file"> the following line of code fetches the first file in the node's file list as a file object: var file = document.getelementbyid('fileitem').files[0]; method overview file item(index); properties attribute
type description length integer a read-only value indicating the number of files in the list. methods item() returns a file o...
...m() returns a file object representing the file at the specified index in the file list. file item( index ); parameters index the zero-based index of the file to retrieve from the list. return value the file representing the requested file. ...
...And 2 more matches
HTMLElement: change event - Web APIs
fired for each alteration to an element's value. ...
... to an element's value. ...
... examples <select> element html <label>choose an ice cream flavor: <select class="i...
...And 2 more matches
HTMLFormElement.elements - Web APIs
collection will update to reflect the change. the form controls in the returned collection are in the same order in which they appear in the form by following a preorder, depth-first traversal of the tree. this is called tree order. the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose
type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms. example quick syntax example in this example, we see how to obtain the list of form controls as well as how to access its members by index and by n...
...asons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms. example quick syntax example in this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or id. ...
...<textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms. example quick syntax example in this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or id. ...
...And 2 more matches
HTMLSelectElement.form - Web APIs
the htmlselectelement.form read-only property returns a htmlformelement representing the form that this element is associated with. if the element is not associated with of a <form> element, then it returns null. ...
...tmlselectelement.form read-only property returns a htmlformelement representing the form that this element is associated with. if the element is not associated with of a <form> element, then it returns null. ...
... element is associated with. if the element is not associated with of a <form> element, then it returns null. syntax edit aform = aselectelement.form.selectname; example html <form action="http://www.google.com/search" method="get"> <label>google: <input
type="search" name="q"></label> <input
type="submit" value="search..."> </form> javascript a property available on all form elements, "
type" returns the
type of the calling form element. ...
...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. ...
...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. "ctrlkey", optional and defaulting to false, of
type boolean, that sets the value of keyboardevent.ctrlkey. "shiftkey", optional and defaulting to false, of
type boolean, that sets the value of keyboardevent.shiftkey. "altkey", optional and defaulting to false, of
type boolean, that sets the value of keyboardevent.altkey. "metakey", optional and defaulting to false, of
type boolean, that sets the value of keyboardevent.metakey. "repeat", op...
...yboardevent.ctrlkey. "shiftkey", optional and defaulting to false, of
type boolean, that sets the value of keyboardevent.shiftkey. "altkey", optional and defaulting to false, of
type boolean, that sets the value of keyboardevent.altkey. "metakey", optional and defaulting to false, of
type boolean, that sets the value of keyboardevent.metakey. "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. ...
...And 2 more matches
MediaStream Recording API - Web APIs
you can then process the data further or write it to file as desired. overview of the recording process the process of recording a stream is simple: set up a mediastream or htmlmediaelement (in the form of an <audio> or <video> element) to serve as the source of the media data. create a mediarecorder object, specifying the source stream and any desired options (such as the container's mime
type or the desired bit rates of its tracks). set mediarecorder.ondataavailable to an event handler for the dataavailable event; this will be called whenever data is available for you. once the source media is playing and you've reached the point where you're ready to record video, call mediarecorder.start() to begin recording. your dataavailable event handler gets called every time there's data re...
...s sent to the mediarecorder. you can listen for error events by setting up a onerror event handler. example here, we use an html canvas as source of the mediastream, and stop recording after 9 seconds. var canvas = document.queryselector("canvas"); // optional frames per second argument. var stream = canvas.capturestream(25); var recordedchunks = []; console.log(stream); var options = { mime
type: "video/webm; codecs=vp9" }; mediarecorder = new mediarecorder(stream, options); mediarecorder.ondataavailable = handledataavailable; mediarecorder.start(); function handledataavailable(event) { console.log("data-available"); if (event.data.size > 0) { recordedchunks.push(event.data); console.log(recordedchunks); download(); } else { // ... } } function download() { va...
...der = new mediarecorder(stream, options); mediarecorder.ondataavailable = handledataavailable; mediarecorder.start(); function handledataavailable(event) { console.log("data-available"); if (event.data.size > 0) { recordedchunks.push(event.data); console.log(recordedchunks); download(); } else { // ... ...
...And 2 more matches
Web-based protocol handlers - Web APIs
ink when they want to provide a convenient way for users to send an email, directly from the webpage. when the link is activated, the browser should launch the default desktop application for handling email. you can think of this as a desktop-based protocol handler. web-based protocol handlers allow web-based applications to participate in the process too. this is becoming more important as more
types of applications migrate to the web. in fact, there are many web-based email handling applications that could process a mailto link. registering setting up a web application as a protocol handler is not a difficult process. basically, the web application uses registerprotocolhandler() to register itself with the browser as a potential handler for a given protocol. for example: navigator.regist...
...e.com/handle_mailto/%s, but not for http://example.org/handle_mailto/%s. registering the same protocol handler more than once will pop up a different notification, indicating that the protocol handler is already registered. therefore, it is a good idea to guard your call to register the protocol handler with a check to see if it is already registered, such as in the example below. ...
...up a different notification, indicating that the protocol handler is already registered. therefore, it is a good idea to guard your call to register the protocol handler with a check to see if it is already registered, such as in the example below. ...
...And 2 more matches
NetworkInformation.downlinkMax - Web APIs
echnology. note: this feature is available in web workers. syntax var max = networkinformation.downlinkmax return value an unrestricted double representing the maximum downlink speed, in megabits per second (mb/s), for the underlying connection technology. examples the following example monitors the connection using the change event and logs changes as they occur. ...
...ature is available in web workers. syntax var max = networkinformation.downlinkmax return value an unrestricted double representing the maximum downlink speed, in megabits per second (mb/s), for the underlying connection technology. examples the following example monitors the connection using the change event and logs changes as they occur. ...
...ricted double representing the maximum downlink speed, in megabits per second (mb/s), for the underlying connection technology. examples the following example monitors the connection using the change event and logs changes as they occur. ...
...And 2 more matches
ParentNode.childElementCount - Web APIs
s, one aimed at node that have children, one at those that are children, they have been moved into two separate pure interfaces, parentnode and childnode. in this case, childelementcount moved to parentnode. this is a fairly technical change that shouldn't affect compatibility. syntax var count = node.childelementcount; count the return value, which is an unsigned long (simply an integer)
type. node an object representing a document, documentfragment, or element. example var foo = document.getelementbyid('foo'); if (foo.childelementcount > 0) { // do something } polyfill for ie8 & ie9 & safari this property is completely unsupported prior to ie9. in ie9 and safari, it is unsupported in the document and documentfragment objects. ;(function(constructor) { if (constructor && ...
...esenting a document, documentfragment, or element. example var foo = document.getelementbyid('foo'); if (foo.childelementcount > 0) { // do something } polyfill for ie8 & ie9 & safari this property is completely unsupported prior to ie9. in ie9 and safari, it is unsupported in the document and documentfragment objects. ...
...agment, or element. example var foo = document.getelementbyid('foo'); if (foo.childelementcount > 0) { // do something } polyfill for ie8 & ie9 & safari this property is completely unsupported prior to ie9. in ie9 and safari, it is unsupported in the document and documentfragment objects. ...
...And 2 more matches
ParentNode.children - Web APIs
s in the collection by using either the item() method on the collection, or by using javascript array-style notation. if the node has no element children, then children is an empty list with a length of 0. example const foo = document.getelementbyid('foo'); for (let i = 0; i < foo.children.length; i++) { console.log(foo.children[i].tagname); } polyfill // overwrites native 'children' proto
type. ...
...y list with a length of 0. example const foo = document.getelementbyid('foo'); for (let i = 0; i < foo.children.length; i++) { console.log(foo.children[i].tagname); } polyfill // overwrites native 'children' proto
type. // adds document & documentfragment support for ie9 & safari. // returns array instead of htmlcollection. ...
...xample const foo = document.getelementbyid('foo'); for (let i = 0; i < foo.children.length; i++) { console.log(foo.children[i].tagname); } polyfill // overwrites native 'children' proto
type. // adds document & documentfragment support for ie9 & safari. // returns array instead of htmlcollection. ...
...And 2 more matches
ParentNode.firstElementChild - Web APIs
nge that shouldn't affect compatibility. syntax var element = node.firstelementchild; example <ul id="foo"> <li>first (1)</li> <li>second (2)</li> <li>third (3)</li> </ul> <script> var foo = document.getelementbyid('foo'); // yields: first (1) console.log(foo.firstelementchild.textcontent); </script> polyfill for ie8, ie9 and safari // overwrites native 'firstelementchild' proto
type. ...
...second (2)</li> <li>third (3)</li> </ul> <script> var foo = document.getelementbyid('foo'); // yields: first (1) console.log(foo.firstelementchild.textcontent); </script> polyfill for ie8, ie9 and safari // overwrites native 'firstelementchild' proto
type. // adds document & documentfragment support for ie9 & safari. ...
.../li> </ul> <script> var foo = document.getelementbyid('foo'); // yields: first (1) console.log(foo.firstelementchild.textcontent); </script> polyfill for ie8, ie9 and safari // overwrites native 'firstelementchild' proto
type. // adds document & documentfragment support for ie9 & safari. ...
...And 2 more matches
ParentNode.lastElementChild - Web APIs
example <ul id="foo"> <li>first (1)</li> <li>second (2)</li> <li>third (3)</li> </ul> <script> const foo = document.getelementbyid('foo'); console.log(foo.lastelementchild.textcontent); // logs: third (3) </script> polyfill the code below adds support of lastelementchild() to document and documentfragment in internet explorer and safari. // overwrites native 'lastelementchild' proto
type. ...
... document.getelementbyid('foo'); console.log(foo.lastelementchild.textcontent); // logs: third (3) </script> polyfill the code below adds support of lastelementchild() to document and documentfragment in internet explorer and safari. // overwrites native 'lastelementchild' proto
type. // returns array instead of htmlcollection. ...
...'); console.log(foo.lastelementchild.textcontent); // logs: third (3) </script> polyfill the code below adds support of lastelementchild() to document and documentfragment in internet explorer and safari. // overwrites native 'lastelementchild' proto
type. // returns array instead of htmlcollection. ...
...And 2 more matches
PerformanceEntry - Web APIs
gle performance metric that is part of the performance timeline. a performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. performance entries are also created in indirect ways such as loading a resource (such as an image). performanceentry instances will always be one of the following sub
types: performancemark performancemeasure performanceframetiming performancenavigationtiming performanceresourcetiming performancepainttiming note: this feature is available in web workers. properties performanceentry.name read only a value that further specifies the value returned by the performanceentry.entry
type property. the value of both depends on the sub
type. see property page f...
...e performanceframetiming performancenavigationtiming performanceresourcetiming performancepainttiming note: this feature is available in web workers. properties performanceentry.name read only a value that further specifies the value returned by the performanceentry.entry
type property. the value of both depends on the sub
type. see property page for valid values. performanceentry.entry
type read only a domstring representing the
type of performance metric such as, for example, "mark". see property page for valid values. performanceentry.starttime read only a domhighrestimestamp representing the starting time for the performance metric. performanceentry.duration read only a domhighrestimestamp representing the time value of the duration of the performance event. methods ...
...o, write their values to the console. function print_performanceentries() { // use getentries() to get a list of all performance entries var p = performance.getentries(); for (var i=0; i < p.length; i++) { console.log("performanceentry[" + i + "]"); print_performanceentry(p[i]); } } function print_performanceentry(perfentry) { var properties = ["name", "entry
type", "starttime", "duration"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("... " + properties[i] + " = " + value); } else { console.log("... " + properties[i] + " is not supported"); } ...
...And 2 more matches
PerformanceObserverEntryList - Web APIs
the performanceobserverentrylist interface is a list of peformance events that were explicitly observed via the observe() method. note: this interface is exposed to window and worker. methods performanceobserverentrylist.getentries() returns a list of explicitly observed performanceentry objects based on the given filter. ...
...ance events that were explicitly observed via the observe() method. note: this interface is exposed to window and worker. methods performanceobserverentrylist.getentries() returns a list of explicitly observed performanceentry objects based on the given filter. performanceobserverentrylist.getentriesby
type() returns a list of explicitly observed performanceentry objects of the given entry
type. ...
...rentrylist.getentries() returns a list of explicitly observed performanceentry objects based on the given filter. performanceobserverentrylist.getentriesby
type() returns a list of explicitly observed performanceentry objects of the given entry
type. performanceobserverentrylist.getentriesbyname() returns a list of explicitly observed performanceentry objects based on the given name and entry
type. ...
...And 2 more matches
Performance API - Web APIs
he interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource). since a platform's system clock is subject to various skews (such as ntp adjustments), the interfaces support a monotonic clock i.e. a clock that is always increasing. as such, the performance api defines a domhighrestimestamp
type rather than using the date.now() interface. domhighrestimestamp the domhighrestimestamp
type, as its name implies, represents a high resolution point in time. this
type is a double and is used by the performance interfaces. the value could be a discrete point in time or the difference in time between two discrete points in time. the unit of domhighrestimestamp is milliseconds and should be acc...
...those attributes that can be serialized. properties the performance interface has two properties. the timing property returns a performancetiming object containing latency-related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc. the navigation property returns a performancenavigation object representing the
type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc. interfaces performance provides methods and properties containing timing-related performance information for the given page. performanceentry provides methods and properties the encapsulate a single performance metric that is part of t...
...taining timing-related performance information for the given page. performanceentry provides methods and properties the encapsulate a single performance metric that is part of the performance timeline. performanceframetiming provides methods and properties containing frame timing data about the browser's event loop. ...
...And 2 more matches
PointerEvent.PointerEvent() - Web APIs
the pointerevent() constructor creates a new synthetic and untrusted pointerevent object instance. syntax event = new pointerevent(
type, pointereventinit); arguments
type is a domstring representing the name of the event (see pointerevent event
types). pointereventinitoptional is a pointereventinit dictionary, having the following fields: pointerid — optional and defaulting to 0, of
type long, that sets the value of the instance's pointerevent.pointerid. width — optional and defaulting to 1, of
type double, that sets the value of the instance's pointerevent.width. ...
...event event
types). pointereventinitoptional is a pointereventinit dictionary, having the following fields: pointerid — optional and defaulting to 0, of
type long, that sets the value of the instance's pointerevent.pointerid. width — optional and defaulting to 1, of
type double, that sets the value of the instance's pointerevent.width. height — optional and defaulting to 1, of
type double, that sets the value of the instance's pointerevent.height. pressure — optional and defaulting to 0, of
type float, that sets the value of the instance's pointerevent.pressure. tangentialpressure — optional and defaulting to 0, of
type float, that sets the value of the instance's pointerevent.tangentialpressure. ...
... defaulting to 1, of
type double, that sets the value of the instance's pointerevent.height. pressure — optional and defaulting to 0, of
type float, that sets the value of the instance's pointerevent.pressure. tangentialpressure — optional and defaulting to 0, of
type float, that sets the value of the instance's pointerevent.tangentialpressure. tiltx — optional and defaulting to 0, of
type long, that sets the value of the instance's pointerevent.tiltx. tilty — optional and defaulting to 0, of
type long, that sets the value of the instance's pointerevent.tilty. twist — optional and defaulting to 0, of
type long, that sets the value of the instance's pointerevent.twist. ...
...And 2 more matches
Multi-touch interaction - Web APIs
at the cost of additional complexity in the multi-touch interaction handling. this document demonstrates via example code, using pointer events with different multi-touch interactions. a live version of this application is available on github. the source code is available on github; pull requests and bug reports are welcome. example this example demonstrates using pointer events' various event
types (pointerdown, pointermove, pointerup pointercancel, etc.) for different multi-touch interactions. define touch targets the application uses <div> to define three different touch target areas. <style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3...
...his event for later processing (this could be part of a // multi-touch interaction) and update the background color push_event(ev); if (logevents) log("pointerdown: name = " + ev.target.id, ev); update_background(ev); } pointer move the pointermove handler is called when the pointer moves. it may be called multiple times (for example, if the user moves the pointer) before a different event
type is fired. in this application, a pointer move is represented by the target's border being set to dashed to provide a clear visual indication that the element has received this event. function pointermove_handler(ev) { // note: if the user makes more than one "simultaneous" touch, most browsers // fire at least one pointermove event and some will fire several pointermoves. // // this functio...
...ove", ev); update_background(ev); ev.target.style.border = "dashed"; } pointer up the pointerup event is fired when a pointer is raised from the contact surface. when this occurs, the event is removed from the associated event cache. in this application, this handler is also used for pointercancel, pointerleave and pointerout events. function pointerup_handler(ev) { if (logevents) log(ev.
type, ev); // remove this touch point from the cache and reset the target's // background and border remove_event(ev); update_background(ev); ev.target.style.border = "1px solid black"; } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and to clear the log. to prevent the browser's default touch behavior from overriding this a...
...And 2 more matches
RTCIceCandidateStats.deleted - Web APIs
tionary's deleted property indicates whether or not the candidate has been deleted or released. syntax isdeleted = rtcicecandidatestats.deleted; value a boolean value indicating whether or not the candidate has been deleted or released. if this value is true, the candidate described by the rtcicecandidatestats object is no longer under consideration. dthe exact meaning varies depending on the
type of candidate: local candidate a value of true means the candidate has been deleted as described by rfc 5245: 8.3. host candidate a value of true indicates that the candidate's network resources have been released. this generally mean sthat any associated socket(s) have been closed and released. remote (turn) candidate a value of true means the candidate's turn allocation is no longer acti...
...ation if this value is true. example in this example, setinterval() is used to set up a function that runs periodically to display the latest statistics for candidates. only candidates which have not been deleted are included in the output. ...
...e in this example, setinterval() is used to set up a function that runs periodically to display the latest statistics for candidates. only candidates which have not been deleted are included in the output. ...
...And 2 more matches
RTCSessionDescription - Web APIs
the rtcsessiondescription interface describes one end of a connection—or potential connection—and how it's configured. each rtcsessiondescription consists of a description
type indicating which part of the offer/answer negotiation process it describes and of the sdp descriptor of the session. the process of negotiating a connection between two peers involves exchanging rtcsessiondescription objects back and forth, with each description suggesting one combination of connection configuration options that the sender of the description supports. ...
... peers involves exchanging rtcsessiondescription objects back and forth, with each description suggesting one combination of connection configuration options that the sender of the description supports. once the two peers agree upon a configuration for the connection, negotiation is complete. properties the rtcsessiondescription interface doesn't inherit any properties. rtcsessiondescription.
type read only an enum of
type rtcsdp
type describing the session description's
type. rtcsessiondescription.sdp read only a domstring containing the sdp describing the session. constants rtcsdp
type this enum defines strings that describe the current state of the session description, as used in the
type property. the session description's
type will be specified using one of these values. ...
...iption object describes the initial proposal in an offer/answer exchange. the session negotiation process begins with an offer being sent from the caller to the callee. pranswer the session description object describes a provisional answer; that is, a response to a previous offer that is not the final answer. it is usually employed by legacy hardware. rollback this special
type with an empty session description is used to roll back to the previous stable state. methods the rtcsessiondescription doesn't inherit any methods. rtcsessiondescription() this constructor returns a new rtcsessiondescription. the parameter is a rtcsessiondescriptioninit dictionary containing the values to assign the two properties. rtcsessiondescription.tojson() returns a json des...
...And 2 more matches
SVGPathSeg - Web APIs
svg path segment interface this is a base interface that corresponds to a single command within a path data specification. ...
...gment interface this is a base interface that corresponds to a single command within a path data specification. ...
... pathseg_closepath 1 corresponds to a "closepath" (z) path data command. pathseg_moveto_abs 2 corresponds to an "absolute moveto" (m) path data command.
...And 2 more matches
SVGPreserveAspectRatio - Web APIs
svg_preserveaspectratio_none 1 corresponds to value none for attribute preserveaspectratio. svg_preserveaspectratio_xminymin 2 corresponds to value xminymin for attribute preserveaspectratio. svg_preserveaspectratio_xmidymin 3 correspon...
... svg_meetorslice_unknown = 0 svg_meetorslice_meet = 1 svg_meetorslice_slice = 2 normative document svg 1.1 (2nd edition) constants name value description svg_preserveaspectratio_unknown 0 the enumeration was set to a value that is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_preserveaspectratio_none 1 corresponds to value none for attribute preserveaspectratio. svg_preserveaspectratio_xminymin 2 corresponds to value xminymin for attribute preserveaspectratio. svg_preserveaspectratio_xmidymin 3 corresponds to value xmidymin for attribute preserveaspectratio. ...
...rresponds to value xminymax for attribute preserveaspectratio. svg_preserveaspectratio_xmidymax 9 corresponds to value xmidymax for attribute preserveaspectratio. svg_preserveaspectratio_xmaxymax 10 corresponds to value xmaxymax for attribute preserveaspectratio. ...
...And 2 more matches
SVGTextPathElement - Web APIs
...
... fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-79" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants method
types name value description textpath_method
type_unknown 0 the
type is not one of predefined
types. ...
...naco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants method
types name value description textpath_method
type_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. textpath_method
type_align 1 corresponds to the value align. textpath_method
type_stretch 2 corresponds to the value stretch. spacing
types name value description textpath_spacing
type_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new v...
...And 2 more matches
Using server-sent events - Web APIs
ch means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.example2.com (per stackoverflow). when using http/2, the maximum number of simultaneous http streams is negotiated between the server and the client (defaults to 100). ...
... echo "event: ping\n"; $curdate = date(date_iso8601); echo 'data: {"time": "' . $curdate . '"}'; echo "\n\n"; // send a simple message at random intervals. ...
..."event: ping\n"; $curdate = date(date_iso8601); echo 'data: {"time": "' . $curdate . '"}'; echo "\n\n"; // send a simple message at random intervals. $counter--; if (!$counter) { echo 'data: this is a message at time ' . $curdate . "\n\n"; $counter = rand(1, 10); } ob_end_flush(); flush(); sleep(1); } the code above generates an event every second, with the event
type "ping". each event's data is a json object containing the iso 8601 timestamp corresponding to the time at which the event was generated. at random intervals, a simple message (with no event
type) is sent. note: you can find a full example that uses the code shown in this article on github — see simple sse demo using php. error handling when problems occur (such as a network timeout or issu...
...And 2 more matches
Touch events - Web APIs
rather than touchstart. that way, mouse events can still fire and things like links will continue to work. alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (this example is oversimplified and may result in strange behavior. ...
...ly, some frameworks have taken to refiring touch events as mouse events for this same purpose. (this example is oversimplified and may result in strange behavior. ...
... events as mouse events for this same purpose. (this example is oversimplified and may result in strange behavior. ...
...And 2 more matches
ValidityState.patternMismatch - Web APIs
the read-only patternmismatch property of a validitystate object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's pattern attribute. ...
...rn attribute -- which means the <input> is of
type text, tel, email, url, password, or search -- and the pattern value is set to a valid regular expression, if the value don't doesn't conform to the constraints set by the pattern value, the patternmismatch property will be true. ...
...value is set to a valid regular expression, if the value don't doesn't conform to the constraints set by the pattern value, the patternmismatch property will be true. ...
...And 2 more matches
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
achment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl pname a glenum specifying information to query. possible values: gl.framebuffer_attachment_object_
type: the
type which contains the attached image. gl.framebuffer_attachment_object_name: the texture or renderbuffer of the attached image (webglrenderbuffer or webgltexture). gl.framebuffer_attachment_texture_level: mipmap level. default value: 0. gl.framebuffer_attachment_texture_cube_map_face: the name of cube-map face of the texture. when using the ext_srgb extension: ext.framebuff...
...e of the texture. when using the ext_srgb extension: ext.framebuffer_attachment_color_encoding_ext: the framebuffer color encoding. when using a webgl 2 context, the following values are available additionally: gl.framebuffer_attachment_alpha_size gl.framebuffer_attachment_blue_size gl.framebuffer_attachment_color_encoding gl.framebuffer_attachment_component_
type gl.framebuffer_attachment_depth_size gl.framebuffer_attachment_green_size gl.framebuffer_attachment_red_size gl.framebuffer_attachment_stencil_size gl.framebuffer_attachment_texture_layer when using the ovr_multiview2 extension: ext.framebuffer_attachment_texture_num_views_ovr: the number of views of the framebuffer object attachment. ext.framebuffer_attac...
... the framebuffer object attachment. ext.framebuffer_attachment_texture_base_view_index_ovr: the base view index of the framebuffer object attachment. return value depends on the requested information (as specified with pname). either a glint, a glenum, a webglrenderbuffer, or a webgltexture. pname parameter return value gl.framebuffer_attachment_object_
type a glenum indicating the
type of the texture. either gl.renderbuffer, gl.texture, or if no image is attached, gl.none. gl.framebuffer_attachment_object_name the texture (webgltexture) or renderbuffer (webglrenderbuffer) of the attached image. gl.framebuffer_attachment_texture_level a glint indicating the mipmap level. default value: 0. gl.framebuffer_attachment_...
...And 2 more matches
WebGLRenderingContext.getUniform() - Web APIs
the webglrenderingcontext.getuniform() method of the webgl api returns the value of a uniform variable at a given location. syntax any gl.getuniform(program, location); parameters program a webglprogram containing the uniform attribute. location a webgluniformlocation object containing the location of the uniform attribute to get. ...
...the webglrenderingcontext.getuniform() method of the webgl api returns the value of a uniform variable at a given location. syntax any gl.getuniform(program, location); parameters program a webglprogram containing the uniform attribute. location a webgluniformlocation object containing the location of the uniform attribute to get. ...
...t.getuniform() method of the webgl api returns the value of a uniform variable at a given location. syntax any gl.getuniform(program, location); parameters program a webglprogram containing the uniform attribute. location a webgluniformlocation object containing the location of the uniform attribute to get. ...
...And 2 more matches
WebGLRenderingContext.readPixels() - Web APIs
the webglrenderingcontext.readpixels() method of the webgl api reads a block of pixels from a specified rectangle of the current color framebuffer into an arraybufferview object. syntax // webgl1: void gl.readpixels(x, y, width, height, format,
type, pixels); // webgl2: void gl.readpixels(x, y, width, height, format,
type, glintptr offset); void gl.readpixels(x, y, width, height, format,
type, arraybufferview pixels, gluint dstoffset); parameters x a glint specifying the first horizontal pixel that is read from the lower left corner of a rectangular block of pixels. y a glint specifying the first vertical pixel that is read from the lower left corner of a rectangular block of pixels. width a glsizei specifying the width of the rectangle. height a glsizei specifying the height o...
...f the pixel data. possible values: gl.alpha: discards the red, green and blue components and reads the alpha component. gl.rgb: discards the alpha components and reads the red, green and blue components. gl.rgba: red, green, blue and alpha components are read from the color buffer. webgl2 adds gl.red gl.rg gl.red_integer gl.rg_integer gl.rgb_integer gl.rgba_integer
type a glenum specifying the data
type of the pixel data. possible values: gl.unsigned_byte gl.unsigned_short_5_6_5 gl.unsigned_short_4_4_4_4 gl.unsigned_short_5_5_5_1 gl.float webgl2 adds gl.byte gl.unsigned_int_2_10_10_10_rev gl.half_float gl.short gl.unsigned_short gl.int gl.unsigned_int gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev pixels a...
... possible values: gl.unsigned_byte gl.unsigned_short_5_6_5 gl.unsigned_short_4_4_4_4 gl.unsigned_short_5_5_5_1 gl.float webgl2 adds gl.byte gl.unsigned_int_2_10_10_10_rev gl.half_float gl.short gl.unsigned_short gl.int gl.unsigned_int gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev pixels an arraybufferview object to read data into. the array
type must match the
type of the
type parameter. uint8array for gl.unsigned_byte. uint16array for gl.unsigned_short_5_6_5, gl.unsigned_short_4_4_4_4, or gl.unsigned_short_5_5_5_1. float32array for gl.float. dstoffset optional offset. defaults to 0. return value none. exceptions a gl.invalid_enum error is thrown if format or
type is not an accepted value. a gl.invalid_operation err...
...And 2 more matches
Starting up and shutting down a WebXR session - Web APIs
f the world—requires that the xr-spatial-tracking feature policy be in place. on top of that, the document needs to be secure and currently focused. finally, you must call requestsession() from a user event handler, such as the handler for the click event. for more specifics about securing webxr actitvities and usage, see the article permissions and security for webxr. confirming the session
type you need is available before trying to create a new webxr session, it's often wise to first check to see if the user's hardware and software support the presentation mode you wish to use. this can also be used to determine whether to use an immersive or an inline presentation, for example. to find out if a given mode is supported, simply call the xrsystem method issessionsupported(). this retur...
... new webxr session, it's often wise to first check to see if the user's hardware and software support the presentation mode you wish to use. this can also be used to determine whether to use an immersive or an inline presentation, for example. to find out if a given mode is supported, simply call the xrsystem method issessionsupported(). this returns a promise which resolves to true if the given
type of session is available for use or false otherwise. const immersiveok = await navigator.xr.issessionsupported("immersive-vr"); if (immersiveok) { // create and use an immersive vr session } else { // create an inline session instead, or tell the user about the // incompatibility if inline is required } creating and starting the session a webxr session is represented by an xrsession obje...
...em's requestsession() method, which returns a promise that resolves with an xrsession if it's able to establish one successfully. fundamentally, that looks like this: xr.requestsession("immersive-vr").then((session) => { xrsession = session; /* continue to set up the session */ }); note the parameter passed into requestsession() in this code snippet: immersive-vr. this string specifies the
type of webxr session you want to establish—in this case, a fully-immersive virtual reality experience. there are three options: immersive-vr a fully-immersive virtual reality session using a headset or similar device that fully replaces the world around the user with the images you present. immersive-ar an augmented reality session in which images are added to the real world using a headset o...
...And 2 more matches
Using the Web Audio API - Web APIs
it into the context we have created. lucky for us there's a method that allows us to do just that — audiocontext.createmediaelementsource: // get the audio element const audioelement = document.queryselector('audio'); // pass it into the audio context const track = audiocontext.createmediaelementsource(audioelement); note: the <audio> element above is represented in the dom by an object of
type htmlmediaelement, which comes with its own set of functionality. all of this has stayed intact; we are merely allowing the sound to be available to the web audio api. controlling sound when playing sound on the web, it's important to allow the user to control it. depending on the use case, there's a myriad of options, but we'll provide functionality to play/pause the sound, alter the track's v...
... will make our audio graph look like this: the default value for gain is 1; this keeps the current volume the same. gain can be set to a minimum of about -3.4 and a max of about 3.4. here we'll allow the boombox to move the gain up to 2 (double the original volume) and down to 0 (this will effectively mute our sound). let's give the user control to do this — we'll use a range input: <input
type="range" id="volume" min="0" max="2" value="1" step="0.01"> note: range inputs are a really handy input
type for updating values on audio nodes. you can specify a range's values and use them directly with the audio node's parameters. so let's grab this input's value and update the gain value when the input node has its value changed by the user: const volumecontrol = document.queryselector('...
...s parameters. so let's grab this input's value and update the gain value when the input node has its value changed by the user: const volumecontrol = document.queryselector('#volume'); volumecontrol.addeventlistener('input', function() { gainnode.gain.value = this.value; }, false); note: the values of node objects (e.g. gainnode.gain) are not simple values; they are actually objects of
type audioparam — these called parameters. this is why we have to set gainnode.gain's value property, rather than just setting the value on gain directly. this enables them to be much more flexible, allowing for passing the parameter a specific set of values to change between over a set period of time, for example. great, now the user can update the track's volume! the gain node is the perfect nod...
...And 2 more matches
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
request object and modifying the example appropriately, you can create your own alert dialog to handle ssl exceptions in your firefox extension or xulrunner application. // adapted from the patch for moztcpsocket error reporting (bug 861196). const {cc,ci} = require("chrome"); function createtcperrorfromfailedxhr(xhr) { let status = xhr.channel.queryinterface(ci.nsirequest).status; let err
type; if ((status & 0xff0000) === 0x5a0000) { // security module const nsinsserrorsservice = ci.nsinsserrorsservice; let nsserrorsservice = cc['@mozilla.org/nss_errors_service;1'].getservice(nsinsserrorsservice); let errorclass; // geterrorclass will throw a generic ns_error_failure if the error code is // somehow not in the set of covered errors. try { errorclass = ns...
...let errorclass; // geterrorclass will throw a generic ns_error_failure if the error code is // somehow not in the set of covered errors. try { errorclass = nsserrorsservice.geterrorclass(status); } catch (ex) { //catching security protocol exception errorclass = 'securityprotocol'; } if (errorclass == nsinsserrorsservice.error_class_bad_cert) { err
type = 'securitycertificate'; } else { err
type = 'securityprotocol'; } // nss_sec errors (happen below the base value because of negative vals) if ((status & 0xffff) < math.abs(nsinsserrorsservice.nss_sec_error_base)) { // the bases are actually negative, so in our positive numeric space, we // need to subtract the base off our value. let nsser...
...et sslerr = math.abs(nsinsserrorsservice.nss_ssl_error_base) - (status & 0xffff); switch (sslerr) { case 3: // ssl_error_no_certificate, ssl(3) errname = 'securitynocertificateerror'; break; case 4: // ssl_error_bad_certificate, ssl(4) errname = 'securitybadcertificateerror'; break; case 8: // ssl_error_unsupported_certificate_
type, ssl(8) errname = 'securityunsupportedcertificate
typeerror'; break; case 9: // ssl_error_unsupported_version, ssl(9) errname = 'securityunsupportedtlsversionerror'; break; case 12: // ssl_error_bad_cert_domain, ssl(12) errname = 'securitycertificatedomainmismatcherror'; break; default: errname = 'securit...
...And 2 more matches
XMLHttpRequest.getAllResponseHeaders() - Web APIs
parameters none. return value a bytestring representing all of the response's headers (except those whose field name is set-cookie or set-cookie2) separated by crlf, or null if no response has been received. if a network error happened, an empty string is returned. an example of what a raw header string looks like: date: fri, 08 dec 2017 21:04:30 gmt\r\n content-encoding: gzip\r\n x-content-
type-options: nosniff\r\n server: meinheld/0.6.1\r\n x-frame-options: deny\r\n content-
type: text/html; charset=utf-8\r\n connection: keep-alive\r\n strict-transport-security: max-age=63072000\r\n vary: cookie, accept-encoding\r\n content-length: 6502\r\n x-xss-protection: 1; mode=block\r\n each line is terminated by both carriage return and line feed characters (\r\n). these are essentially delimite...
... specifications specification status comment xmlhttprequestthe definition of 'getallresponseheaders()' in that specification. living standard whatwg living standard ...
... specifications specification status comment xmlhttprequestthe definition of 'getallresponseheaders()' in that specification. living standard whatwg living standard ...
...And 2 more matches
XMLHttpRequest.response - Web APIs
the xmlhttprequest response property returns the response's body content as an arraybuffer, blob, document, javascript object, or domstring, depending on the value of the request's response
type property. syntax var body = xmlhttprequest.response; value an appropriate object based on the value of response
type. you may attempt to request the data be provided in a specific format by setting the value of response
type after calling open() to initialize the request but before calling send() to send the request to the server. ...
... arraybuffer the response is a javascript arraybuffer containing binary data. ...
...r calling open() to initialize the request but before calling send() to send the request to the server. the value is null if the request is not yet complete or was unsuccessful, with the exception that when reading text data using a response
type of "text" or the empty string (""), the response can contain the response so far while the request is still in the loading readystate (3). the response
types are described below. "" an empty response
type string is treated the same as "text", the default
type. arraybuffer the response is a javascript arraybuffer containing binary data. blob the response is a blob object containing the binary data. document the response is an html document or xml xmldocument, as appropriate based on the mime
type of the received data. see html in xmlhttpreque...
...And 2 more matches
XPathResult.snapshotLength - Web APIs
the read-only snapshotlength property of the xpathresult interface represents the number of nodes in the result snapshot. note: this feature is available in web workers. syntax var snapshotlength = result.snapshotlength; return value an integer value representing the number of nodes in the result snapshot. ...
... the read-only snapshotlength property of the xpathresult interface represents the number of nodes in the result snapshot. note: this feature is available in web workers. syntax var snapshotlength = result.snapshotlength; return value an integer value representing the number of nodes in the result snapshot. ...
... the read-only snapshotlength property of the xpathresult interface represents the number of nodes in the result snapshot. note: this feature is available in web workers. syntax var snapshotlength = result.snapshotlength; return value an integer value representing the number of nodes in the result snapshot. ...
...And 2 more matches
XRPermissionDescriptor.optionalFeatures - Web APIs
site would like to use but can operate without if permission isn't granted to use them. syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.optionalfeatures = optfeaturelist; optfeaturelist = xrpermissiondescriptor.optionalfeatures; value an array of strings taken from the xrreferencespace
type enumerated
type, indicating set of features that your app would like to use, but can operate without if permission to use them isn't available. while further features may be defined in future editions of webxr, currently all permitted values come from the xrreferencespace
type enumerated
type, indicating reference spaces the app rquires to be available. the reference space returned by xrsession.r...
...ile further features may be defined in future editions of webxr, currently all permitted values come from the xrreferencespace
type enumerated
type, indicating reference spaces the app rquires to be available. the reference space returned by xrsession.requestreferencespace() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicates which of the two
types is returned for each reference space
type constant.. reference space descriptors the
types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them. ...
...space() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicates which of the two
types is returned for each reference space
type constant.. reference space descriptors the
types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them. xrreferencespace
type description interface bounded-floor similar to the local
type, except the user is not expected to move outside a predetermined boundary, given by the boundsgeometry in the returned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends...
...And 2 more matches
XRSession.requestReferenceSpace() - Web APIs
the requestreferencespace() method of the xrsession interface returns a promise that resolves with an instance of either xrreferencespace or xrboundedreferencespace as appropriate given the
type of reference space requested. syntax refspacepromise = xrsession.requestreferencespace(referencespace
type); parameters
type a domstring specifying the
type of reference space for which an instance is to be returned. the string must be one of those found in the xrreferencespace
type enumerated
type. ...
...space
type); parameters
type a domstring specifying the
type of reference space for which an instance is to be returned. the string must be one of those found in the xrreferencespace
type enumerated
type. the reference space returned by xrsession.requestreferencespace() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicates which of the two
types is returned for each reference space
type constant.. reference space descriptors the
types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them. ...
...space() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicates which of the two
types is returned for each reference space
type constant.. reference space descriptors the
types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them. xrreferencespace
type description interface bounded-floor similar to the local
type, except the user is not expected to move outside a predetermined boundary, given by the boundsgeometry in the returned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends...
...And 2 more matches
ARIA: button role - Accessibility
activated by the user. adding role="button" will make an element appear as a button control to a screen reader. this role can be used in combination with the aria-pressed attribute to create toggle buttons. <div id="savechanges" tabindex="0" role="button" aria-pressed="false">save</div> the above example creates a 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. ...
...n 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 dialog unless the function performed in the dialog context logically leads to a different element. if the button alters the current context, then focus typically remains on the button, such as muti...
...ndlers perform the button's action when activated using a mouse click or the space or enter key. in this case, the action is to add a new name to the list of names. try the example by adding a name to the text box. the button will cause the name to be added to a list. ...
...And 2 more matches
ARIA: textbox role - Accessibility
the textbox role is used to identify an element that allows the input of free-form text. whenever possible, rather than using this role, use an <input> element with
type="text", for single-line input, or a <textarea> element for multi-line input. description when an element has the textbox role, the browser sends an accessible textbox event to assistive technologies, which can then notify the user about it. the default is a single line input, in which return or enter submits the form; in this case, it is preferable to use an html <input> with
type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. <!-- simple text input field --> <div id="tx...
.../div> <!-- multi-line text area --> <div id="txtboxmultilinelabel">enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic elements are more concise and require no javascript to support textbox features. <label for="txtbox">enter your five-digit zipcode</label> <input
type="text" placeholder="5-digit zipcode" id="txtbox"/> <!-- multi-line text area --> <label for="txtboxmultiline">enter the tags for the article</label> <textarea id="txtboxmultiline" required></textarea> where a text field is read-only, indicated this by setting aria-readonly="true" on the element. associated aria properties aria-activedescendent attribute taking as it's value the id of...
... setting focus on the control, whereas placeholder text is only temporary hint about the expected value, which if implemented incorrectly can decrease accessibility. the placeholder should be visible when the control's value is the empty string such as when the control first receives focus and when users remove a previously-entered value. instead of using aria-placeholder, use the semantic <input
type="text"> or <textarea> with a placeholder attribute. aria-readonly attribute indicates that the user cannot modify the value of the text field. instead of using aria-readonly, use the semantic <input
type="text"> or <textarea> with a readonly attribute. aria-required attribute indicates that a value must be provided for the field before it is submitted. instead of using aria-required, use the ...
...And 2 more matches
:default - CSS: Cascading Style Sheets
the :default css pseudo-class selects form elements that are the default in a group of related elements. what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <input
type="checkbox">, <input
type="radio">, and <option> elements: a default option element is the first one with the selected attribute, or the first enabled option in dom order. multiple <select>s can have more than one selected option, so all will match :default. <input
type="checkbox"> and <input
type="radio"> match if they have the checked attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input>
types that submit forms, like image or submit. syntax :default ...
...tch :default. <input
type="checkbox"> and <input
type="radio"> match if they have the checked attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input>
types that submit forms, like image or submit. ...
...checked attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input>
types that submit forms, like image or submit. ...
...And 2 more matches
:nth-child() - CSS: Cascading Style Sheets
r step size, b is an integer offset, n is all positive integers, starting from 0. it can be read as the an+bth element of a list. ...
...syntax :nth-child( <nth> [ of <complex-selector-list> ]? )where <nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <
type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '|' ]where <
type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><clas...
...the <code><em></code> is completely skipped over and ignored.</p> <div clas...
...And 2 more matches
pointer - CSS: Cascading Style Sheets
none the primary input mechanism does not include a pointing device. coarse the primary input mechanism includes a pointing device of limited accuracy. fine the primary input mechanism includes an accurate pointing device. examples this example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers. ...
... coarse the primary input mechanism includes a pointing device of limited accuracy. fine the primary input mechanism includes an accurate pointing device. examples this example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers. ...
...n accurate pointing device. examples this example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers. ...
...And 2 more matches
Block and inline layout in normal flow - CSS: Cascading Style Sheets
tting model. the display property and flow layout in addition to the rules existing in css2.1, new levels of css further describe the behaviour of block and inline boxes. the display property defines how a box and any boxes inside it behave. in the css display model level 3, we can learn more about how the display property changes the behaviour of boxes and the boxes they generate. the display
type of an element defines the outer display
type; this dictates how the box displays alongside other elements in the same formatting context. it also defines the inner display
type, which dictates how boxes inside this element behave. we can see this very clearly when considering a flex layout. in the example below i have a <div>, which i have given display: flex. the flex container behaves like a bl...
...ng context. it also defines the inner display
type, which dictates how boxes inside this element behave. we can see this very clearly when considering a flex layout. in the example below i have a <div>, which i have given display: flex. the flex container behaves like a block element: it displays on a new line and takes up all of the space it can in the inline direction. this is the outer display
type of block. the flex items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display
type of flex, establishing the flex formatting context for the direct children. therefore you can think of every box in css working in this way. ...
...e inline direction. this is the outer display
type of block. the flex items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display
type of flex, establishing the flex formatting context for the direct children. therefore you can think of every box in css working in this way. the box itself has an outer display
type, so it knows how to behave alongside other boxes. it then has an inner display
type which changes the way its children behave. those children then have an outer and inner display
type too. the flex items in the previous example become flex level boxes, so their outer display
type is dictated by way of them being part of the flex formatting context. ...
...And 2 more matches
CSS Fonts - CSS: Cascading Style Sheets
ngs font-style font-variant font-weight font-stretch src unicode-range @font-feature-values guides fundamental text and font styling in this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing. ...
... fundamental text and font styling in this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing. open
type font features guide font features or variants refer to different glyphs or character styles contained within an open
type font. ...
...cing. open
type font features guide font features or variants refer to different glyphs or character styles contained within an open
type font. these include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. these are all referred to as open
type features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings. this article provides you with all you need to know about using open
type font features in css. ...
...And 2 more matches
<basic-shape> - CSS: Cascading Style Sheets
when creating a shape, the reference box is defined by each property that uses <basic-shape> values. the coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards. ...
... when creating a shape, the reference box is defined by each property that uses <basic-shape> values. the coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards. ...
...r-radius> value in inset() is computed as an expanded list of all eight <length> or percentage values. interpolation of basic shapes when animating between one <basic-shape> and another, the rules below are applied. the values in 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 shape...
...And 2 more matches
font-feature-settings - CSS: Cascading Style Sheets
the font-feature-settings css property controls advanced typographic features in open
type fonts. 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. ...
...ettings css property controls advanced typographic features in open
type fonts. 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. ...
...operty or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position. these lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an open
type font feature. in particular, font-feature-settings shouldn't be used to enable small caps. values normal text is laid out using default settings. <feature-tag-value> when rendering text, the list of open
type 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 i...
...And 2 more matches
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. ...
...lyphs */ /* 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. ...
...ial 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 without (ı), and using the ligature would incorrectly transform a dotted "i" into a dotless "i." the font-language-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 norm...
...And 2 more matches
font-weight - CSS: Cascading Style Sheets
older lighter 100 400 100 200 400 100 300 400 100 400 700 100 500 700 100 600 900 400 700 900 400 800 900 700 900 900 700 common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names (see the open
type specification): value common weight name 100 thin (hairline) 200 extra light (ultra light) 300 light 400 normal (regular) 500 medium 600 semi bold (demi bold) 700 bold 800 extra bold (ultra bold) 900 black (heavy) 950 extra black (ultra black) variable fo...
...00 black (heavy) 950 extra black (ultra black) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping. however some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. ...
...(heavy) 950 extra black (ultra black) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping. however some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. ...
...And 2 more matches
shape-outside - CSS: Cascading Style Sheets
n network errors such that there is no valid fallback image, the effect is as if the value none had been specified. interpolation when animating between one <basic-shape> and a second, the rules below are applied. the values in the shape functions interpolate as a simple list. the list values interpolate as <length>, <percentage>, or calc() where possible. ...
...es below are applied. the values in 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 (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. ...
... in all other cases no interpolation occurs. ...
...And 2 more matches
Event reference
standard events these events are defined in official web specifications, and should be common across browsers. each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event. event name event
type specification fired when... abort uievent dom l3 the loading of a resource has been aborted. abort progressevent progress and xmlhttprequest progression has been terminated (not due to an error). abort event indexeddb a transaction has been aborted. afterprint event html5 the associated document has started printing...
...he content of a tab has become visible or has been hidden. volumechange event html5 media the volume has changed. waiting event html5 media playback has stopped because of a temporary lack of data. wheel wheelevent dom l3 a wheel button of a pointing device is rotated in any direction. non-standard events event name event
type specification fired when... afterscriptexecute event mozilla specific a script has been executed. beforescriptexecute event mozilla specific a script is about to be executed. beforeinstallprompt event chrome specific a user is prompted to save a website to a home screen on mobile. dommousescroll mozilla specific ...
...ecific a new ussd message is received mscontentzoom microsoft specific msmanipulationstatechanged microsoft specific mspointerhover microsoft specific mozilla-specific events note: these events are never exposed to web content and can only be used in a xul chrome content context. xul events event name event
type specification fired when... broadcast xul an observer noticed a change to the attributes of a watched broadcaster. checkboxstatechange xul the state of a checkbox has been changed either by a user action or by a script (useful for accessibility). close xul the close button of the window has been clicked. command xu...
...And 2 more matches
Making content editable - Developer guides
the preferences shown below using about:config: user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); user_pref("capability.policy.allowclipboard.clipboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.paste", "allaccess"); example: a simple but complete rich text editor <!doc
type html> <html> <head> <title>rich text editor</title> <script
type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function va...
...ontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doc
type html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style
type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sour...
...0px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input
type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2">title 2 <h2></option> <option value="h3">title 3 <h3></option> <option value="h4">title 4 <h4></option> <option value="h5">title 5 &l...
...And 2 more matches
XHTML - Developer guides
xhtml is a term that was historically used to describe html documents written to conform with xml syntax rules. the following example shows an html document and corresponding "xhtml" document, and the accompanying http content-
type headers they should be served with. ...
... xhtml is a term that was historically used to describe html documents written to conform with xml syntax rules. the following example shows an html document and corresponding "xhtml" document, and the accompanying http content-
type headers they should be served with. ...
... xhtml is a term that was historically used to describe html documents written to conform with xml syntax rules. the following example shows an html document and corresponding "xhtml" document, and the accompanying http content-
type headers they should be served with. ...
...And 2 more matches
Index - Developer guides
dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. currently, to support all browsers we need to specify two formats, although with the adoption of mp3 and mp4 formats in firefox and opera, this is changing fast. you can find compatibility information in the guide to media
types and formats on the web. 7 adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player. this article will take the same player and show how to add captions and subtitles to it, usi...
... the ability to read the pixel values from each frame of a video can be very useful. 17 event developer guide dom, event, guide, needsupdate, events events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different
types. 18 creating and triggering events advanced, dom, guide, javascript, needscontent, events this article demonstrates how to create and dispatch dom events. such events are commonly called synthetic events, as opposed to the events fired by the browser itself. 19 dom onevent handlers beginner, dom, dom beginner, needsbeginnerupdate, needsupdate the web pla...
... mean. this article provides details about the coordinate systems at play and how you use them. 24 overview of events and handlers beginner, dom, example, javascript, needsbeginnerupdate, needsupdate, events this overview 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 / seamonkey 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/firef...
...And 2 more matches
<picture>: The Picture element - HTML: Hypertext Markup Language
. the selected image is then presented in the space occupied by the <img> 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. to decide which url to load, the user agent examines each <source>'s srcset, media, and
type attributes to select a compatible image that best matches the current layout and capabilities of the display device. the <img> element serves two purposes: it describes the size and other attributes of the image and its presentation. it provides a fallback in case none of the offered <source> elements are able to provide a usable image. common use cases for <picture>: art direction. cro...
...or is composed of a url of the image, and either... a width descriptor, followed by a w (such as 300w); or a pixel density descriptor, followed by an x (such as 2x) to serve a high-res image for high-dpi screens. ...
...url of the image, and either... a width descriptor, followed by a w (such as 300w); or a pixel density descriptor, followed by an x (such as 2x) to serve a high-res image for high-dpi screens. ...
...And 2 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
must have at least a width descriptor or a pixel density descriptor to be valid. among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor. the browser chooses the most adequate image to display at a given point of time. the srcset attribute has an effect only when the <source> element is the direct child of a <picture> element. ...
... width descriptor or a pixel density descriptor to be valid. among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor. the browser chooses the most adequate image to display at a given point of time. the srcset attribute has an effect only when the <source> element is the direct child of a <picture> element. ...
...the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor. the browser chooses the most adequate image to display at a given point of time. the srcset attribute has an effect only when the <source> element is the direct child of a <picture> element.
type the mime media
type of the resource, optionally with a codecs parameter. if the
type attribute isn't specified, the media's
type is retrieved from the server and checked to see if the user agent can handle it; if it can't be rendered, the next <source> is checked. if the
type attribute is specified, it's compared against the
types the user agent can present, and if it's not recognized, the server doesn't even get queried; instead, the next <source> element is checked at once. wh...
...And 2 more matches
HTML elements reference - HTML: Hypertext Markup Language
hrasing content, which does not inherently represent anything. it can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. <strong> the html strong importance element (<strong>) indicates that its contents have strong importance, seriousness, or urgency. browsers typically render the contents in bold
type. <sub> the html subscript element (<sub>) specifies inline text which should be displayed as subscript for solely typographical reasons. <sup> the html superscript element (<sup>) specifies inline text which is to be displayed as superscript for solely typographical reasons. <time> the html <time> element represents a specific period in time. <...
...tml supports the use of scripting languages, most prominently javascript. certain elements support this capability. element description <canvas> use the html <canvas> element with either the canvas scripting api or the webgl api to draw graphics and animations. <noscript> the html <noscript> element defines a section of html to be inserted if a script
type on the page is unsupported or if scripting is currently turned off in the browser. <script> the html <script> element is used to embed executable code or data; this is typically used to embed or refer to javascript code. demarcating edits these elements let you provide indications that specific parts of the text have been altered. element description ...
...l <fieldset> element is used to group several controls as well as labels (<label>) within a web form. <form> the html <form> element represents a document section containing interactive controls for submitting information. <input> the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of
types of input data and control widgets are available, depending on the device and user agent. <label> the html <label> element represents a caption for an item in a user interface. <legend> the html <legend> element represents a caption for the content of its parent <fieldset>. <meter> the html <meter> element represents either a scalar value within a known ...
...And 2 more matches
Global attributes - HTML: Hypertext Markup Language
irectionality, then it applies that directionality to the whole element. draggable an enumerated attribute indicating whether the element can be dragged, using the drag and drop api. it can have the following values: true, which indicates that the element may be dragged false, which indicates that the element may not be dragged. dropzone an enumerated attribute indicating what
types of content can be dropped on an element, using the drag and drop api. it can have the following values: copy, which indicates that dropping will create a copy of the element that was dragged move, which indicates that the element that was dragged will be moved to this new location. link, will create a link to the dragged data. exportparts used to transitively export shadow parts ...
... process has been 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 mic...
...ml element may have an itemprop attribute specified, where an itemprop consists of a name and value pair. itemref properties that are not descendants of an element with the itemscope attribute can be associated with the item using an itemref. it provides a list of element ids (not itemids) with additional properties elsewhere in the document. itemscope itemscope (usually) works along with item
type to specify that the html contained in a block is about a particular item. itemscope creates the item and defines the scope of the item
type associated with it. item
type is a valid url of a vocabulary (such as schema.org) that describes the item and its properties context. item
type specifies the url of the vocabulary that will be used to define itemprops (item properties) in the data structure. i...
...And 2 more matches
Content-Disposition - HTTP
be displayed inline in the browser, that is, as a web page or as part of a web page, or as an attachment, that is downloaded and saved locally. in a multipart/form-data body, the http content-disposition general header is a header that can be used on the subpart of a multipart body to give information about the field it applies to. ...
...ined in the content-
type header. used on the body itself, content-disposition has no effect. the content-disposition header is defined in the larger context of mime messages for e-mail, but only a subset of the possible parameters apply to http forms and post requests. only the value form-data, as well as the optional directive name and filename, can be used in the http context. ...
...;'). content-disposition: form-data content-disposition: form-data; name="fieldname" content-disposition: form-data; name="fieldname"; filename="filename.jpg" directives name is followed by a string containing the name of the html field in the form that the content of this subpart refers to. when dealing with multiple files in the same field (for example, the multiple attribute of an <input
type="file"> element), there can be several subparts with the same name. a name with a value of '_charset_' indicates that the part is not an html field, but the default charset to use for parts without explicit charset information. filename is followed by a string containing the original name of the file transmitted. the filename is always optional and must not be used blindly by the application: ...
...And 2 more matches
Proxy-Authorization - HTTP
see also the iana registry of authentication schemes. ...
...see also the iana registry of authentication schemes. ...
...see also the iana registry of authentication schemes. ...
...And 2 more matches
WWW-Authenticate - HTTP
iana maintains a list of authentication schemes. realm=<realm> a description of the protected area. ...
...iana maintains a list of authentication schemes. realm=<realm> a description of the protected area. ...
...iana maintains a list of authentication schemes. realm=<realm> a description of the protected area. ...
...And 2 more matches
HTTP headers - HTTP
s, but with no relation to the data transmitted in the body. request headers contain more information about the resource to be fetched, or about the client requesting the resource. response headers hold additional information about the response, like its location or about the server providing it. entity headers contain information about the body of the resource, like its content length or mime
type. headers can also be grouped according to how proxies handle them: connection keep-alive proxy-authenticate proxy-authorization te trailer transfer-encoding upgrade (see also protocol upgrade mechanism). end-to-end headers these headers must be transmitted to the final recipient of the message: the server for a request, or the client for a response. intermediate proxies must retr...
...ow to match request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server. connection management connection controls whether the network connection stays open after the current transaction finishes. keep-alive controls how long a persistent connection should stay open. content negotiation accept informs the server about the
types of data that can be sent back. accept-charset which character encodings the client understands. accept-encoding the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back. accept-language informs the server about the human language the server is expected to send back. this is a hint and is not necessarily under the full control of the user: the serv...
...s the tracking status of the corresponding response. downloads content-disposition indicates if the resource transmitted should be displayed inline (default behavior without the header), or if it should be handled like a download and the browser should present a “save as” dialog. message body information content-length the size of the resource, in decimal number of bytes. content-
type indicates the media
type of the resource. content-encoding used to specify the compression algorithm. content-language describes the human language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language. content-location indicates an alternate location for the returned data. proxies forwarded contains information from th...
...And 2 more matches
HTTP Messages - HTTP
http messages are composed of textual information encoded in ascii, and span over multiple lines. in http/1.1, and earlier versions of the protocol, these messages were openly sent across the connection. in http/2, the once human-readable message is now divided up into http frames, providing optimization and performance improvements. web developers, or webmasters, rarely craft these textual http messages themselves: software, a web browser, proxy, or web server, perform this action. ...
...ttp header: a case-insensitive string followed by a colon (':') and a value whose structure depends upon the header. the whole header, including the value, consist of one single line, which can be quite long. there are numerous request headers available. they can be divided in several groups: general headers, like via, apply to the message as a whole. request headers, like user-agent, accept-
type, modify the request by specifying it further (like accept-language), by giving context (like referer), or by conditionally restricting it (like if-none). entity headers, like content-length which apply to the body of the request. obviously, there is no such header transmitted if there is no body in the request. body the final part of the request is its body. not all requests have one: reque...
... its body. not all requests have one: requests fetching resources, like get, head, delete, or options, usually don't need one. some requests send data to the server in order to update it: as often the case with post requests (containing html form data). bodies can be broadly divided into two categories: single-resource bodies, consisting of one single file, defined by the two headers: content-
type and content-length. multiple-resource bodies, consisting of a multipart body, each containing a different bit of information. this is typically associated with html forms. http responses status line the start line of an http response, called the status line, contains the following information: the protocol version, usually http/1.1. a status code, indicating success or failure of the req...
...And 2 more matches
HTTP range requests - HTTP
ze of the image). the content-range response header indicates where in the full resource this partial message belongs. multipart ranges the range header also allows you to get multiple ranges at once in a multipart document. the ranges are separated by a comma. ...
... range header also allows you to get multiple ranges at once in a multipart document. the ranges are separated by a comma. curl http://www.example.com -i -h "range: bytes=0-50, 100-150" the server responses with the 206 partial content status and a content-
type: multipart/byteranges; boundary=3d6b6a416f9b5 header, indicating that a multipart byterange follows. each part contains its own content-
type and content-range fields and the required boundary parameter specifies the boundary string used to separate each body-part. ...
...ytes=0-50, 100-150" the server responses with the 206 partial content status and a content-
type: multipart/byteranges; boundary=3d6b6a416f9b5 header, indicating that a multipart byterange follows. each part contains its own content-
type and content-range fields and the required boundary parameter specifies the boundary string used to separate each body-part. ...
...And 2 more matches
Public class fields - JavaScript
s are an experimental feature (stage 3) proposed at tc39, the javascript standards committee. support in browsers is limited, but the feature can be used through a build step with systems like babel. see the compat information below. both static and instance public fields are writable, enumerable, and configurable properties. as such, unlike their private counterparts, they participate in proto
type inheritance. syntax class classwithinstancefield { instancefield = 'instance field' } class classwithstaticfield { static staticfield = 'static field' } class classwithpublicinstancemethod { 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 ...
...aticfield) // expected output: "static field"ā fields without initializers are initialized to undefined. class classwithstaticfield { static staticfield } console.assert(classwithstaticfield.hasownproperty('staticfield')) console.log(classwithstaticfield.staticfield) // expected output: "undefined" public static fields are not reinitialized on subclasses, but can be accessed via the proto
type chain. class classwithstaticfield { static basestaticfield = 'base field' } class subclasswithstaticfield extends classwithstaticfield { static substaticfield = 'sub class field' } console.log(subclasswithstaticfield.substaticfield) // expected output: "sub class field" console.log(subclasswithstaticfield.basestaticfield) // expected output: "base field" when initializing fields, this re...
...onst prefix = 'prefix' class classwithcomputedfieldname { [`${prefix}field`] = 'prefixed field' } const instance = new classwithcomputedfieldname() console.log(instance.prefixfield) // expected output: "prefixed field" when initializing fields this refers to the class instance under construction. just as in public instance methods, if you're in a subclass you can access the superclass proto
type using super. class classwithinstancefield { baseinstancefield = 'base field' anotherbaseinstancefield = this.baseinstancefield baseinstancemethod() { return 'base method output' } } class subclasswithinstancefield extends classwithinstancefield { subinstancefield = super.baseinstancemethod() } const base = new classwithinstancefield() const sub = new subclasswithinstancefield() consol...
...And 2 more matches
Deprecated and obsolete features - JavaScript
x 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 decode escape sequences for special characters. ...
... 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 decode escape sequences for special characters. string methods html wrapper methods like string.proto
type.fontsize and string.proto
type.big. ...
...es (\ 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 decode escape sequences for special characters. string methods html wrapper methods like string.proto
type.fontsize and string.proto
type.big. string.proto
type.quote is removed from firefox 37. ...
...And 2 more matches
The arguments object - JavaScript
follows: arguments[0] // first argument arguments[1] // second argument arguments[2] // third argument each argument can also be set or reassigned: arguments[1] = 'new value'; the arguments object is not an array. it is similar, but lacks all array properties except length. for example, it does not have the pop() method. ...
...ng() { var longest = ''; for (var i=0; i < arguments.length; i++) { if (arguments[i].length > longest.length) { longest = arguments[i]; } } return longest; } you can use arguments.length to count how many arguments the function was called with. if you instead want to count how many parameters a function is declared to accept, inspect that function's length property. using
typeof with arguments the
typeof operator returns 'object' when used with arguments console.log(
typeof arguments); // 'object' the
type of individual arguments can be determined by indexing arguments: console.log(
typeof arguments[0]); // returns the
type of the first argument properties arguments.callee reference to the currently executing function that the arguments belong to. forbidden in ...
...tor] returns a new array iterator object that contains the values for each index in arguments. examples defining a function that concatenates several strings this example defines a function that concatenates several strings. the function's only formal argument is a string containing the characters that separate the items to concatenate. function myconcat(separator) { let args = array.proto
type.slice.call(arguments, 1); return args.join(separator); } you can pass as many arguments as you like to this function. it returns a string list using each argument in the list: // returns "red, orange, blue" myconcat(', ', 'red', 'orange', 'blue'); // returns "elephant; giraffe; lion; cheetah" myconcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); // returns "sage. basil. oregano. pepper.
...And 2 more matches
Atomics.and() - JavaScript
ray, and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. 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 atomics.and(
typedarray, index, value) parameters
typedarray an integer
typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to compute the bitwise and. value the number to compute the bitwise and with. return value the old value at the given position (
typedarray[index]). exceptions throw...
... description the bitwise and operation only yields 1, if both a and b are 1. ...
... description the bitwise and operation only yields 1, if both a and b are 1. ...
...And 2 more matches
Atomics.or() - JavaScript
rray, and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. 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 atomics.or(
typedarray, index, value) parameters
typedarray an integer
typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to compute the bitwise or. value the number to compute the bitwise or with. return value the old value at the given position (
typedarray[index]). exceptions throws ...
... description the bitwise or operation yields 1, if either a or b are 1. ...
... description the bitwise or operation yields 1, if either a or b are 1. ...
...And 2 more matches
Atomics.xor() - JavaScript
ray, and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. 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 atomics.xor(
typedarray, index, value) parameters
typedarray an integer
typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to compute the bitwise xor. value the number to compute the bitwise xor with. return value the old value at the given position (
typedarray[index]). exceptions throw...
... description the bitwise xor operation yields 1, if a and b are different. ...
... description the bitwise xor operation yields 1, if a and b are different. ...
...And 2 more matches
Int16Array() constructor - JavaScript
the int16array()
typed array constructor creates an array of twos-complement 16-bit signed integers in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new int16array(); // new in es2017 new int16array(length); new int16array(
typedarray); new int16array(object); new int16array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros. ...
...ay index syntax (that is, using bracket notation). syntax new int16array(); // new in es2017 new int16array(length); new int16array(
typedarray); new int16array(object); new int16array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object whe...
...gument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object when called with an object argument, a new
typed array is created as if by the
typedarray.from() method. buffer, byteoffset, length when called with a buffer, and optionally a byteoffset and a length argument, a new
typed array view is created that views the specified arraybuffer. the byteoffset and length parameters specify the memory range that will be exposed by the
typed array view. if both are omitted, all of buffer is viewed; if only ...
...And 2 more matches
Int32Array() constructor - JavaScript
the int32array()
typed array constructor creates an array of twos-complement 32-bit signed integers in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new int32array(); // new in es2017 new int32array(length); new int32array(
typedarray); new int32array(object); new int32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros. ...
...ay index syntax (that is, using bracket notation). syntax new int32array(); // new in es2017 new int32array(length); new int32array(
typedarray); new int32array(object); new int32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object whe...
...gument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object when called with an object argument, a new
typed array is created as if by the
typedarray.from() method. buffer, byteoffset, length when called with a buffer, and optionally a byteoffset and a length argument, a new
typed array view is created that views the specified arraybuffer. the byteoffset and length parameters specify the memory range that will be exposed by the
typed array view. if both are omitted, all of buffer is viewed; if only ...
...And 2 more matches
Int8Array() constructor - JavaScript
the int8array() constructor creates a
typed array of twos-complement 8-bit signed integers. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new int8array(); // new in es2017 new int8array(length); new int8array(
typedarray); new int8array(object); new int8array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros. ...
...d array index syntax (that is, using bracket notation). syntax new int8array(); // new in es2017 new int8array(length); new int8array(
typedarray); new int8array(object); new int8array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object whe...
...gument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object when called with an object argument, a new
typed array is created as if by the
typedarray.from() method. buffer, byteoffset, length when called with a buffer, and optionally a byteoffset and a length argument, a new
typed array view is created that views the specified arraybuffer. the byteoffset and length parameters specify the memory range that will be exposed by the
typed array view. if both are omitted, all of buffer is viewed; if only ...
...And 2 more matches
JSON.parse() - JavaScript
f a function, this prescribes how the value originally produced by parsing is transformed, before being returned. return value the object, array, string, number, boolean, or null value corresponding to the given json text. exceptions throws a syntaxerror exception if the string to parse is not valid json. ...
... 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. ...
...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. ...
...And 2 more matches
JSON.stringify() - JavaScript
s capped at 10 (if it is greater, the value is just 10). values less than 1 indicate that no space should be used. if this is a string, the string (or the first 10 characters of the string, if it's longer than that) is used as white space. if this parameter is not provided (or is null), no white space is used. return value a json string representing the given value. exceptions throws a
typeerror ("cyclic object value") exception when a circular reference is found. throws a
typeerror ("bigint value can't be serialized in json") when trying to stringify a bigint value. description json.stringify() converts a value to json notation representing it: if the value has a tojson() method, it's responsible to define what data will be serialized. boolean, number, and string objects ar...
...ke 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 weakmap([[{a: 1}, 2]])]); // '[{},{},{},{}]' //
typedarray json.stringify([new int8array([1]), new int16array([1]), new int32array([1])]); // '[{"0":1},{"0":1},{"0":1}]' json.stringify([new uint8array([1]), new uint8clampedarray([1]), new uint16array([1]), new uint32array([1])]); // '[{"0":1},{"0":1},{"0":1},{"0":1}]' json.stringify([new float32array([1]), new float64array([1])]); // '[{"0":1},{"0":1}]' // tojson() json.stringify({ x: 5, y: 6, toj...
...1])]); // '[{"0":1},{"0":1}]' // tojson() json.stringify({ x: 5, y: 6, tojson(){ return this.x + this.y; } }); // '11' // symbols: json.stringify({ x: undefined, y: object, z: symbol('') }); // '{}' json.stringify({ [symbol('foo')]: 'foo' }); // '{}' json.stringify({ [symbol.for('foo')]: 'foo' }, [symbol.for('foo')]); // '{}' json.stringify({ [symbol.for('foo')]: 'foo' }, function(k, v) { if (
typeof k === 'symbol') { return 'a symbol'; } }); // undefined // 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 f...
...And 2 more matches
Object.getOwnPropertyDescriptors() - JavaScript
ptors. return value an object containing all own property descriptors of an object. might be an empty object, if there are no properties. description this method permits examination of the precise description of all own properties of an object. a property in javascript consists of either a string-valued name or a symbol and a property descriptor. further information about property descriptor
types and their attributes can be found in object.defineproperty(). a property descriptor is a record with some of the following attributes: value the value associated with the property (data descriptors only). writable true if and only if the value associated with the property may be changed (data descriptors only). get a function which serves as a getter for the property, or undefined if th...
...). writable true if and only if the value associated with the property may be changed (data descriptors only). get a function which serves as a getter for the property, or undefined if there is no getter (accessor descriptors only). set a function which serves as a setter for the property, or undefined if there is no setter (accessor descriptors only). 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. enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. examples creating a shallow clone whereas the object.assign() method will only copy enumerable and own properties from a source object to a target object, you are a...
...rue if and only if this property shows up during enumeration of the properties on the corresponding object. ...
...And 2 more matches
Object.preventExtensions() - JavaScript
new properties can be added to it. object.preventextensions() marks an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. note that the properties of a non-extensible object, in general, may still be deleted. ...
...d as non-extensible. note that the properties of a non-extensible object, in general, may still be deleted. attempting to add new properties to a non-extensible object will fail, either silently or by throwing a
typeerror (most commonly, but not exclusively, when in strict mode). object.preventextensions() only prevents addition of own properties. properties can still be added to the object proto
type. this method makes the [[proto
type]] of the target immutable; any [[proto
type]] re-assignment will throw a
typeerror. this behavior is specific to the internal [[proto
type]] property, other properties of the target object will remain mutable. there is no way to make an object extensible again once it has been made non-extensible. examples using object.preventextensions // object.preventext...
...; object.isextensible(empty); // === true // ...but that can be changed. object.preventextensions(empty); object.isextensible(empty); // === false // object.defineproperty throws when adding // a new property to a non-extensible object. var nonextensible = { removable: true }; object.preventextensions(nonextensible); object.defineproperty(nonextensible, 'new', { value: 8675309 }); // throws a
typeerror // in strict mode, attempting to add new properties // to a non-extensible object throws a
typeerror. function fail() { 'use strict'; // throws a
typeerror nonextensible.newproperty = 'fail'; } fail(); a non-extensible object's proto
type is immutable: var fixed = object.preventextensions({}); // throws a '
typeerror'. fixed.__proto__ = { oh: 'hai' }; non-object coercion in es5, if...
...And 2 more matches
Object.seal() - JavaScript
bject fixed and immutable. making all properties non-configurable also prevents them from being converted from data properties to accessor properties and vice versa, but it does not prevent the values of data properties from being changed. attempting to delete or add properties to a sealed object, or to convert a data property to accessor or vice versa, will fail, either silently or by throwing a
typeerror (most commonly, although not exclusively, when in strict mode code). the proto
type chain remains untouched. however, the __proto__ property is sealed as well. comparison to object.freeze() existing properties in objects frozen with object.freeze() are made immutable. objects sealed with object.seal() can have their existing properties changed. examples using object.seal var obj = { p...
...be changed or removed. obj.foo = 'baz'; obj.lumpy = 'woof'; delete obj.prop; var o = object.seal(obj); o === obj; // true object.issealed(obj); // === true // changing property values on a sealed object // still works. obj.foo = 'quux'; // but you can't convert data properties to accessors, // or vice versa. ...
...convert data properties to accessors, // or vice versa. object.defineproperty(obj, 'foo', { get: function() { return 'g'; } }); // throws a
typeerror // now any changes, other than to property values, // will fail. obj.quaxxor = 'the friendly duck'; // silently doesn't add the property delete obj.foo; // silently doesn't delete the property // ...and in strict mode such attempts // will throw
typeerrors. function fail() { 'use strict'; delete obj.foo; // throws a
typeerror obj.sparky = 'arf'; // throws a
typeerror } fail(); // attempted additions through // object.defineproperty will also throw. ...
...And 2 more matches
Symbol.toStringTag - JavaScript
the symbol.tostringtag well-known symbol is a string valued property that is used in the creation of the default string description of an object. it is accessed internally by the object.proto
type.tostring() method. 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. ...
... 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. property attributes of symbol.tostringtag writable no enumerable no configurable no examples default tags object.proto
type.tostring.call('foo'); // "[object string]" object.proto
type.tostring.call([1, 2]); // "[object array]" object.proto
type.tostring.call(3); // "[object number]" object.proto
type.tostring.call(true); // "[object boolean]" object.proto
type.tostring.call(undefined); // "[object undefined]" object.proto
type.tostring.call(null); // "[object null]" // ... and more built-in tost...
... "[object string]" object.proto
type.tostring.call([1, 2]); // "[object array]" object.proto
type.tostring.call(3); // "[object number]" object.proto
type.tostring.call(true); // "[object boolean]" object.proto
type.tostring.call(undefined); // "[object undefined]" object.proto
type.tostring.call(null); // "[object null]" // ... and more built-in tostringtag symbols object.proto
type.tostring.call(new map()); // "[object map]" object.proto
type.tostring.call(function* () {}); // "[object generatorfunction]" object.proto
type.tostring.call(promise.resolve()); // "[object promise]" // ... ...
...And 2 more matches
SyntaxError - JavaScript
the syntaxerror object represents an error when trying to interpret syntactically 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.proto
type.message error message. ...
...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.proto
type.message error message. although ecma-262 specifies that syntaxerror should provide its own message property, in spidermonkey, it inherits error.proto
type.message. syntaxerror.proto
type.name error name. inherited from error. syntaxerror.proto
type.filename path to file that raised this error. ...
...inherited from error. ...
...And 2 more matches
Uint32Array() constructor - JavaScript
the uint32array()
typed array constructor creates an array of 32-bit unsigned integers in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new uint32array(); // new in es2017 new uint32array(length); new uint32array(
typedarray); new uint32array(object); new uint32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros. ...
...dex syntax (that is, using bracket notation). syntax new uint32array(); // new in es2017 new uint32array(length); new uint32array(
typedarray); new uint32array(object); new uint32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object whe...
...gument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object when called with an object argument, a new
typed array is created as if by the
typedarray.from() method. buffer, byteoffset, length when called with a buffer, and optionally a byteoffset and a length argument, a new
typed array view is created that views the specified arraybuffer. the byteoffset and length parameters specify the memory range that will be exposed by the
typed array view. if both are omitted, all of buffer is viewed; if only ...
...And 2 more matches
WebAssembly.Table() constructor - JavaScript
if maximum is specified and is smaller than initial, a rangeerror is thrown. ...
... if maximum is specified and is smaller than initial, a rangeerror is thrown. ...
... if maximum is specified and is smaller than initial, a rangeerror is thrown. examples creating a new webassembly table instance the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial size of 2 elements. ...
...And 2 more matches
globalThis - JavaScript
ng code. see the language proposal's "naming" document for more details. examples search for the global across environments prior to globalthis, the only reliable cross-platform way to get the global object for an environment was function('return this')(). ...
...nt for more details. examples search for the global across environments prior to globalthis, the only reliable cross-platform way to get the global object for an environment was function('return this')(). ...
...ross environments prior to globalthis, the only reliable cross-platform way to get the global object for an environment was function('return this')(). ...
...And 2 more matches
Lexical grammar - JavaScript
hell. 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 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 ...
...xpression and so on. function import() {} // illegal. identifiers with special meanings a few identifiers have a special meaning in some contexts without being keywords of any kind. they include: arguments get set literals null literal see also null for more information. null boolean literal see also boolean for more information. true false numeric literals the number and bigint
types use numeric literals. decimal 1234567890 42 // caution when using with a leading zero: 0888 // 888 parsed as decimal 0777 // parsed as octal, 511 in decimal note that decimal literals can start with a zero (0) followed by another decimal digit, but if all digits after the leading 0 are smaller than 8, the number is interpreted as an octal number. this won't throw in javascript, see bug 9575...
... number syntax uses a leading zero followed by a lowercase or uppercase latin letter "x" (0x or 0x). if the digits after 0x are outside the range (0123456789abcdef), the following syntaxerror is thrown: "identifier starts immediately after numeric literal". 0xfffffffffffffffff // 295147905179352830000 0x123456789abcdef // 81985529216486900 0xa // 10 bigint literal the bigint
type is a numeric primitive in javascript that can represent integers with arbitrary precision. bigint literals are created by appending n to the end of an integer. 123456789123456789n // 123456789123456789 0o777777777777n // 68719476735 0x123456789abcdefn // 81985529216486895⬠0b11101001010101010101n // 955733 note that legacy octal numbers with just a leading zero won't work fo...
...And 2 more matches
Inequality (!=) - 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 x != y description the inequality operator checks whether its operands are not equal. ...
...y description the inequality operator checks whether its operands are not equal. it is the negation of the equality operator so the following two lines will always give the same result: x != y !(x == y) for details of the comparison algorithm, see the page for the equality operator. ...
...not equal. it is the negation of the equality operator so the following two lines will always give the same result: x != y !(x == y) for details of the comparison algorithm, see the page for the equality operator. ...
...And 2 more matches
Strict equality (===) - JavaScript
the strict equality operator (===) checks whether its two operands are equal, returning a boolean result. unlike the equality operator, the strict equality operator always considers operands of different
types to be different. 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 x === y description the strict equality operators (=== and !==) use the strict equality comparison algorithm to compare two operands. if the operands are of different
types, return false. if both operands are objects, return true only if they refer to the same object. if both operands are null or both operands are undefined, return...
...d is nan, return false. otherwise, compare the two operand's values: numbers must have the same numeric values. +0 and -0 are considered to be the same value. strings must have the same characters in the same order. booleans must be both true or both false. ...
...s values: numbers must have the same numeric values. +0 and -0 are considered to be the same value. strings must have the same characters in the same order. booleans must be both true or both false. the most notable difference between this operator and the equality (==) operator is that if the operands are of different
types, the == operator attempts to convert them to the same
type before comparing. ...
...And 2 more matches
for...in - JavaScript
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. objects created from built–in constructors like array and object have inherited non–enumerable properties from object.proto
type and string.proto
type, such as string's indexof() method or object's tostring() method. the loop will iterate over all enumerable properties of the object itself and those the object inherits from its proto
type chain (properties of nearer proto
types take precedence over those of proto
types further away from the object in its proto
type chain). deleted, added, or modified properties a for...in loo...
....in will return the indexes in any particular order. the for...in loop statement will return all enumerable properties, including those with non–integer names and those that are inherited. because the order of iteration is implementation-dependent, iterating over an array may not visit elements in a consistent order. therefore, it is better to use a for loop with a numeric index (or array.proto
type.foreach() or the for...of loop) when iterating over arrays where the order of access is important. iterating over own properties only if you only want to consider properties attached to the object itself, and not its proto
types, use getownpropertynames() or perform a hasownproperty() check (propertyisenumerable() can also be used). alternatively, if you know there won't be any outside code inte...
...terating over arrays where the order of access is important. iterating over own properties only if you only want to consider properties attached to the object itself, and not its proto
types, use getownpropertynames() or perform a hasownproperty() check (propertyisenumerable() can also be used). alternatively, if you know there won't be any outside code interference, you can extend built-in proto
types with a check method. ...
...And 2 more matches
Authoring MathML - MathML
ed in html5 and in particular you can use usual web features like css, dom, javascript or svg. this is out of the scope of this document but anyone with basic knowledge of web languages will easily be able to mix these features with mathml. check out our demos and mathml references for more details. using mathml mathml in html pages you can use presentation mathml inside html5 documents: <!doc
type html> <html> <head> <title>mathml in html5</title> </head> <body> <h1>mathml in html5</h1> <p> square root of two: <math> <msqrt> <mn>2</mn> </msqrt> </math> </p> </body> </html> content mathml is not supported by browsers. it's recommended to convert your content mathml markup into presentation mathml before publishing it, for example with the help of ...
...font-face rule as usual to provide woff fallback for latin modern and latin modern math. see this github repository to get woff fonts and sample css stylesheets to use on your web site and check its test page. ...
...s test page. mathml in xml documents (xhtml, epub, etc) if for some reason you need to use mathml in xml documents, be sure to satisfy the usual requirements: well-formed document, use of correct mime
type, mathml namespace "http://www.w3.org/1998/math/mathml" on <math> roots. ...
...And 2 more matches
SVG Attribute reference - SVG: Scalable Vector Graphics
ls about exactly how the element should be handled or rendered. below is a list of all of the attributes available in svg along with links to reference documentation to help you learn which elements support them and how they work. ...
...ulate additive alignment-baseline allowreorder alphabetic amplitude arabic-form ascent attributename attribute
type autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscript
type contentstyle
type cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style fon...
...tiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex tablevalues target targetx targety text-anchor text-decoration text-rendering textlength to transform transform-origin
type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w width widths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole...
...And 2 more matches
<feComponentTransfer> - SVG: Scalable Vector Graphics
<stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset="1" stop-color="#800080"></stop> </lineargradient> <filter id="identity" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="identity"></fefuncr> <fefuncg
type="identity"></fefuncg> <fefuncb
type="identity"></fefuncb> <fefunca
type="identity"></fefunca> </fecomponenttransfer> </filter> <filter id="table" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="table" tablevalues="0 0 1 1"></fefuncr> <fefuncg
type="table" tablevalues="1 1 0...
...fefuncg
type="identity"></fefuncg> <fefuncb
type="identity"></fefuncb> <fefunca
type="identity"></fefunca> </fecomponenttransfer> </filter> <filter id="table" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="table" tablevalues="0 0 1 1"></fefuncr> <fefuncg
type="table" tablevalues="1 1 0 0"></fefuncg> <fefuncb
type="table" tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="discrete" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="discrete" tablevalues="0 0 1 1"></fefuncr> <fefuncg
type="discrete" tablevalues="1 1 0 0"></fefuncg> <fefuncb
type="discrete" tablevalues="0 1 1 0"></fefuncb> </fecomponenttran...
..."100%" height="100%"> <fecomponenttransfer> <fefuncr
type="discrete" tablevalues="0 0 1 1"></fefuncr> <fefuncg
type="discrete" tablevalues="1 1 0 0"></fefuncg> <fefuncb
type="discrete" tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="linear" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="linear" slope="0.5" intercept="0"></fefuncr> <fefuncg
type="linear" slope="0.5" intercept="0.25"></fefuncg> <fefuncb
type="linear" slope="0.5" intercept="0.5"></fefuncb> </fecomponenttransfer> </filter> <filter id="gamma" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="gamma" amplitude="4" exponent="7" offset="0"></fefuncr>...
...And 2 more matches
<linearGradient> - SVG: Scalable Vector Graphics
argradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value
type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system. value
type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value
type: <...
...value
type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value
type: <url> ; default value: none; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. value
type: pad|reflect|repeat ; default value: pad; animatable: yes x1 this attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. value
type: <length> ; default value: 0%; animatable: yes x2 this attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. ...
.... value
type: pad|reflect|repeat ; default value: pad; animatable: yes x1 this attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. value
type: <length> ; default value: 0%; animatable: yes x2 this attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. value
type: <length> ; default value: 100%; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template. value
type: <iri> ; default value: none; animatable: yes y1 this attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. ...
...And 2 more matches
<mask> - SVG: Scalable Vector Graphics
d="m10,35 a20,20,0,0,1,50,35 a20,20,0,0,1,90,35 q90,65,50,95 q10,65,10,35 z" fill="black" /> </mask> <polygon points="-10,110 110,110 110,-10" fill="orange" /> <!-- with this mask applied, we "punch" a heart shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="url(#mymask)" /> </svg> attributes height this attribute defines the height of the masking area. ...
...range" /> <!-- with this mask applied, we "punch" a heart shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="url(#mymask)" /> </svg> attributes height this attribute defines the height of the masking area. value
type: <length> ; default value: 120%; animatable: yes maskcontentunits this attribute defines the coordinate system for the contents of the <mask>. value
type: userspaceonuse|objectboundingbox ; default value: userspaceonuse; animatable: yes maskunits this attribute defines defines the coordinate system for attributes x, y, width and height on the <mask>. value
type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes x this attribute defines the x-axis coordinate of the top-left corner of the masking area. value ...
...: userspaceonuse|objectboundingbox ; default value: userspaceonuse; animatable: yes maskunits this attribute defines defines the coordinate system for attributes x, y, width and height on the <mask>. value
type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes x this attribute defines the x-axis coordinate of the top-left corner of the masking area. value
type: <coordinate> ; default value: -10%; animatable: yes y this attribute defines the y-axis coordinate of the top-left corner of the masking area. ...
...And 2 more matches
<script> - SVG: Scalable Vector Graphics
= math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element. ...
... } document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element. value
type: <string>; default value: ?; animatable: yes href the url to the script to load. ...
...stener('click', (e) => { e.target.style.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element. value
type: <string>; default value: ?; animatable: yes href the url to the script to load. value
type: <url> ; default value: none; animatable: no
type this attribute defines
type of the script language to use. ...
...And 2 more matches
<text> - SVG: Scalable Vector Graphics
l property, the color property is for html only */ .rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heavy">cat</text> <text x="55" y="55" class="small">is</text> <text x="65" y="55" class="rrrrr">grumpy!</text> </svg> attributes x the x coordinate of the starting point of the text baseline. ...
...class="small">my</text> <text x="40" y="35" class="heavy">cat</text> <text x="55" y="55" class="small">is</text> <text x="65" y="55" class="rrrrr">grumpy!</text> </svg> attributes x the x coordinate of the starting point of the text baseline. value
type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the starting point of the text baseline. value
type: <length>|<percentage> ; default value: 0; animatable: yes dx shifts the text position horizontally from a previous text element. ...
...="rrrrr">grumpy!</text> </svg> attributes x the x coordinate of the starting point of the text baseline. value
type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the starting point of the text baseline. value
type: <length>|<percentage> ; default value: 0; animatable: yes dx shifts the text position horizontally from a previous text element. value
type: <length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a previous text element. value
type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of each individual glyph. ...
...And 2 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
<image>; bug 1240357) rendering model change notes svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status unknown allow overflow: scroll; to show scroll bars on <svg> elements implementation status unknown basic data
types and interfaces change notes dommatrix or dommatrixreadonly instead of svgmatrix implementation status unknown domrect or domrectreadonly instead of svgrect implementation status unknown dompoint or dompointreadonly instead of svgpoint implementation status unknown members of svgstylable and svglangspace available in svgelement impl...
... methods partially implemented (bug 1239100). the methods ispointinfill() and ispointinstroke() are not implemented yet (bug 1325319). ...
...implementation status unknown made <use> element shadow trees consistent with shadow dom spec implementation status unknown role mapping of <a> element depending on whether it is a valid link implementation status unknown aria state and property attributes animatable implementation status unknown styling change notes contentstyle
type attribute removed implementation status unknown linkstyle on svgstyleelement implemented (bug 1239128 (firefox 46.0 / thunderbird 46.0 / seamonkey 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 ...
...And 2 more matches
Getting started - SVG: Scalable Vector Graphics
e cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg. then open the file in firefox. it will render as shown in the following screenshot. (firefox users: click here) the rendering process involves the following: we start with the <svg> root element: a doc
type declaration as known from (x)html should be left off because dtd based svg validation leads to more problems than it solves before svg 2, to identify the version of the svg for other
types of validation the version and baseprofile attributes should always be used instead. both version and baseprofile attributes are deprecated in svg 2. as an xml dialect, svg must always bind the namespaces ...
...vg files the first important thing to notice is the order of rendering elements. the globally valid rule for svg files is, that later elements are rendered atop previous elements. the further down an element is the more it will be visible. ...
...however, this technique doesn't work in firefox before 4.0. finally, svg can be created dynamically with javascript and injected into the html dom. ...
...And 2 more matches
XML introduction - XML: Extensible Markup Language
t. encoding : used encoding in this document. comments <!-- comment --> "correct" xml (valid and well-formed) Дorrect design rules for an xml document to be correct, the following conditions must be fulfilled: document must be well-formed. document must conform to all xml syntax rules. document must conform to semantic rules, which are usually set in an xml schema or a dtd (document
type definition). example <?xml version="1.0" encoding="utf-8"?> <message> <warning> hello world <!--missing </warning> --> </message> now let's look at a corrected version of that same document: <?xml version="1.0" encoding="utf-8"?> <message> <warning> hello world </warning> </message> a document that contains an undefined tag is invalid. for example, if we n...
...please refresh and try again."> ]> <body> <message> &warning; </message> </body> you can also use numeric character references to specify special characters; for example, © is the "©" symbol. displayi...
... greater than sign & & ampersand " " one double-quotation mark ' ' one apostrophe (or single-quotation mark) even though there are only 5 declared entities, more can be added using the document's document
type definition. for example, to create a new &warning; entity, you can do this: <?xml version="1.0" encoding="utf-8"?> <!doc
type body [ <!entity warning "warning: something bad happened... please refresh and try again."> ]> <body> <message> &warning; </message> </body> you can also use numeric character references to specify special characters; for example, © is the "©" symbol. displaying xml xml is usually used for descriptive purposes, but there are ways to display xml data. if you don't define a specific w...
...And 2 more matches
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
ctions, xpath functions, xpath axes the <xsl:output> element controls the characteristics of the output document. to function correctly in netscape, this element, with the method attribute, must be used. as of 7.0, method="text" works as expected. syntax <xsl:output method="xml" | "html" | "text" version=string encoding=string omit-xml-declaration="yes" | "no" standalone="yes" | "no" doc
type-public=string doc
type-system=string cdata-section-elements=list-of-names indent="yes" | "no" media-
type=string /> required attributes none. optional attributes method specifies output format. version specifies the value of the version attribute of the xml or html declaration in the output document. this attribute is only used when method="html" or method="xml". encoding spec...
... encoding specifies the value of the encoding attribute in the output document. omit-xml-declaration indicates whether or not to include an xml declaration in the output. acceptable values are "yes" or "no". standalone (not supported.) if present, indicates that a standalone declaration should occur in the output document and gives its value. acceptable values are "yes" or "no". doc
type-public specifies the value of the public attribute of the doc
type declaration in the output document. doc
type-system specifies the value of the system attribute of the doc
type declaration in the output document. cdata-section-elements lists elements whose text contents should be written as cdata sections. elements should be whitespace separated. indent (not supported.) specifies i...
... defined xslt, section 16. gecko support partial support. see comments above. ...
...And 2 more matches
Compiling from Rust to WebAssembly - WebAssembly
kage in this tutorial, and so you need to have node.js and npm installed. to get node.js and npm, go to the get npm! page and follow the instructions. when it comes to picking a version, choose any one you'd like; this tutorial isn't version-specific. building our webassembly npm package enough setup; let's create a new package in rust. navigate to wherever you keep your personal projects, and
type this: $ cargo new --lib hello-wasm created library `hello-wasm` project this creates a new library in a subdirectory named hello-wasm with everything you need to get going: +-- cargo.toml +-- src +-- lib.rs first, we have cargo.toml; this is the file that we use to configure our build. if you've used gemfile from bundler or package.json from npm, this is likely to be familiar; cargo ...
...et it? cargo ships crates. the third line contains a use command, which imports code from a library into your code. in this case, we're importing everything in the wasm_bindgen::prelude module. we use these features in the next section. before we move on to the next section, we should talk a bit more about wasm-bindgen. wasm-pack uses wasm-bindgen, another tool, to provide a bridge between the
types of javascript and rust. it allows javascript to call a rust api with a string, or a rust function to catch a javascript exception. we use wasm-bindgen's functionality in our package. in fact, that's the next section. calling external functions in javascript from rust the next part looks like this: #[wasm_bindgen] extern { pub fn alert(s: &str); } the bit inside the #[ ] is called an "at...
...ode to webassembly to compile our code correctly, we first need to configure it with cargo.toml. open this file, and change its contents to look like this: [package] name = "hello-wasm" version = "0.1.0" authors = ["your name <you@example.com>"] description = "a sample project with wasm-pack" license = "mit/apache-2.0" repository = "https://github.com/yourgithubusername/hello-wasm" [lib] crate-
type = ["cdylib"] [dependencies] wasm-bindgen = "0.2" fill in your own repository and use the same info that git uses for the authors field. the big part to add is the stuff at the bottom. the first part — [lib] — tells rust to build a cdylib version of our package; we won't get into what that means in this tutorial. for more, consult the cargo and rust linkage documentation. the last section ...
...And 2 more matches
Communicating With Other Scripts - Archive of obsolete content
"talk.js") }); the "talk.js" content script uses window.postmessage() to send the message to the page: // content-script (talk.js) window.postmessage("message from content script", "http://my-domain.org/"); the second argument may be '*' which will allow communication with any domain. finally, "listen.html" uses window.addeventlistener() to listen for messages from the content script: <!doc
type html> <html> <head></head> <body> <script> window.addeventlistener('message', function(event) { window.alert(event.data); // message from content script }, false); </script> </body> </html> messaging from page script to content script sending messages from the page script to the content script is just the same, but in reverse. here "main.js" creates a page-m...
..." creates a page-mod that attaches "listen.js" to the web page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" embeds a script that uses window.postmessage() to send the content script a message when the user clicks a button: <!doc
type html> <html> <head></head> <body> <script> function sendmessage() { window.postmessage("message from page script", "http://my-domain.org/"); } </script> <button onclick="sendmessage()">send message</button> </body> </html> finally, the content script "listen.js" uses window.addeventlistener() to listen for messages from the page script: // listen.js window...
...e-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message"
type="button" value="send a message"/> <script
type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greet...
..."main.js" creates a page-mod to target the page we are interested in: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" creates and dispatches a custom dom event, using initcustomevent()'s detail parameter to supply the payload: <!doc
type html> <html> <head></head> <body> <script> function sendmessage() { var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, { hello: 'world' }); document.documentelement.dispatchevent(event); } </script> <button onclick="sendmessage()">send message</button> </body> </html> finally, the content scrip...
tabs - Archive of obsolete content
ab on active window in the background. tabs.open({ url: "http://www.mysite.com", inbackground: true }); // open a new tab as an app tab and do something once it's open. tabs.open({ url: "http://www.mysite.com", ispinned: true, onopen: function onopen(tab) { // do stuff like listen for content // loading. } }); parameters options : object required options: name
type url string string url to be opened in the new tab. this is a required property. optional options: name
type isprivate boolean boolean which will determine whether the new tab should be private or not. if your add-on does not support private browsing this will have no effect. see the private-browsing documentation fo...
..., this becomes tab-centric: if the user navigates to a new page in the same tab, then the content scripts will be reattached to the new page. example var tabs = require("sdk/tabs"); tabs.on('ready', function(tab) { var worker = tab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); }); parameters options : object optional options: name
type contentscriptfile string,array the local file urls of content scripts to load. content scripts specified by this option are loaded before those specified by the contentscript option. optional. contentscript string,array a string or an array of strings of code to be evaluated in the context. content scripts specified by this option are loaded af...
...n called when the content worker receives a message from content scripts. listeners are passed a single argument, the message posted from the content script. optional. onerror function a function called when the content worker receives an error from content scripts. listeners are passed a single argument, error, which is the error posted from the content script and an object of
type error. optional returns worker : the worker object can be used to communicate with the content script. see content scripts guide to learn the details. properties id the unique id for the tab. this property is read-only. title the title of the tab (usually the title of the page currently loaded in the tab) this property can be set to change the tab title. url the url of the page cur...
...oaded in the tab) this property can be set to change the tab title. url the url of the page currently loaded in the tab. this property can be set to load a different url in the tab. favicon the url of the favicon for the page currently loaded in the tab. this property is read-only. this property is deprecated. from version 1.15, use the favicon module's getfavicon() function instead. content
type this is currently an experimental api, so we might change it in future releases. returns the mime
type that the document currently loaded in the tab is being rendered as. this may come from http headers or other sources of mime information, and might be affected by automatic
type conversions performed by either the browser or extensions. this property is read-only. index the index of the ta...
widget - Archive of obsolete content
' alert("got message: " + message);' + '});' + 'self.postmessage("ready");', onmessage: function(message) { if (message == "ready") widget.postmessage("me too"); } }); globals constructors widget(options) creates a new widget. the widget is immediately added to the add-on bar. ...
...it may contain html. widgets must have either the content property or the contenturl property set. if the content is an image, it is automatically scaled to be 16x16 pixels. ...
...pts under self.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. widget represents a widget object. methods destroy() removes the widget from the add-on bar. postmessage(data) sends a message to the widget's content scripts. parameters data : value the message to send. the message can be any json-serializable value. on(
type, listener) registers an event listener with the widget. parameters
type : string the
type of event to listen for. listener : function the listener function that handles the event. removelistener(
type, listener) unregisters an event listener from the widget. parameters
type : string the
type of event for which listener was registered. listener : function the listener function that was...
...displayed text: view.content = tab.url.match(/^https/) ? "secured" : "unsafe"; } tabs.on('ready', updatewidgetstate); tabs.on('activate', updatewidgetstate); methods destroy() removes the widget view from the add-on bar. postmessage(data) sends a message to the widget view's content scripts. parameters data : value the message to send. the message can be any json-serializable value. on(
type, listener) registers an event listener with the widget view. parameters
type : string the
type of event to listen for. listener : function the listener function that handles the event. removelistener(
type, listener) unregisters an event listener from the widget view. parameters
type : string the
type of event for which listener was registered. listener : function the listener functio...
core/namespace - Archive of obsolete content
for objects, which effectively may be used for creating fields that are not part of objects public api. let { ns } = require('sdk/core/namespace'); let anamespace = ns(); anamespace(publicapi).secret = secret; one namespace may be used with multiple objects: let { ns } = require('sdk/core/namespace'); let dom = ns(); function view(element) { let view = object.create(view.proto
type); dom(view).element = element; // .... } view.proto
type.destroy = function destroy() { let { element } = dom(this); element.parentnode.removechild(element); // ... }; // ... exports.view = view; // ... also, multiple namespaces can be used with one object: // ./widget.js let { cu } = require('chrome'); let { ns } = require('sdk/core/namespace'); let { vi...
... namespaces can be used with one object: // ./widget.js let { cu } = require('chrome'); let { ns } = require('sdk/core/namespace'); let { view } = require('./view'); // note this is completely independent from view's internal namespace object. ...
...= require('./view'); // note this is completely independent from view's internal namespace object. let sandboxes = ns(); function widget(options) { let { element, contentscript } = options; let widget = object.create(widget.proto
type); view.call(widget, options.element); sandboxes(widget).sandbox = cu.sandbox(element.ownerdocument.defaultview); // ... } widget.proto
type = object.create(view.proto
type); widget.proto
type.postmessage = function postmessage(message) { let { sandbox } = sandboxes(this); sandbox.postmessage(json.stringify(json.parse(message))); ... }; widget.proto
type.destroy = function destroy() { view.proto
type.destroy.call(this); // ... delete sandboxes(this).sandbox; }; exports.widget = widget; in addition access...
...postmessage(json.stringify(json.parse(message))); ... }; widget.proto
type.destroy = function destroy() { view.proto
type.destroy.call(this); // ... delete sandboxes(this).sandbox; }; exports.widget = widget; in addition access to the namespace can be shared with other code by just handing them a namespace accessor function. ...
ui/button/toggle - Archive of obsolete content
this.state('tab', {checked: !checked}); } }); destroying buttons when you've finished with a button, destroy it by calling its destroy() method. after that, any attempts to access any of its properties or to call any of its methods will throw exceptions. globals constructors togglebutton(options) creates a toggle button. parameters options : object required options: name
type id string the button's id. this is used internally to keep track of this button. the id must be unique within your add-on. label string the button's human-readable label. when the button is in the toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend. icon url, strin...
...disabled buttons appear disabled in the ui, and do not respond to clicks. defaults to false. onchange function change handler for the button. onclick function click handler for the button. badge number or string new in firefox 36. ...
... changes made to the button: button.label = "foo"; var state = button.state(button); button.label = "bar"; console.log(state.label) // foo on() add a listener to an event emitted by the button. button.on("click", handleclick) function handleclick(state) { console.log("button '" + state.label + "' was clicked"); } parameters event : string the event to listen for. toggle buttons emit two
types of event, "click" and "change". listener : function function that will be called on the event. once() assign a listener to the first occurrence only of an event emitted by the button. the listener is automatically removed after the first time the event is emitted. parameters event : string the event to listen for. toggle buttons emit two
types of event, "click" and "change". listener : f...
...ction that will be called on the event. removelistener() removes an event listener. for example, this code is equivalent to once(): button.on("click", handleclick) function handleclick(state) { console.log("button '" + state.label + "' was clicked"); button.removelistener("click", handleclick); } parameters event : string the event to listener is listening for. toggle buttons emit two
types of event, "click" and "change". 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 property is read-only. label the button's label. icon the button's icon or icons, as a url, relat...
Examples and demos from articles - Archive of obsolete content
[article] fade in/out [html] sometimes a page uses dozens and dozens of animations. ...
...[article] fade in/out [html] sometimes a page uses dozens and dozens of animations. ...
...[article] fade in/out [html] sometimes a page uses dozens and dozens of animations. ...
...s to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them. here is a possible and minimalist example of such abstraction, which for this reason we named minidaemon. [article] image preview before upload [html] the filereader.proto
type.readasdataurl() method is useful, for example, to get a preview of an image before uploading it. [article] note: the filereader() constructor was not supported by internet explorer for versions before 10. for a full compatibility code, see also our crossbrowser possible solution for image preview. determine if an element has been totally scrolled [html] this example shows how to determine wh...
Extension Versioning, Update and Compatibility - Archive of obsolete content
he extension with id foobar@developer.mozilla.org. the versions included are 2.2 and 2.5, both of which specify compatibility with firefox versions 1.5 to 2.0.0.*. for version 2.2 an https update link is used while version 2.5 has a regular http link with a hash to verify the file retrieved. it is important to get the initial rdf:description's about attribute correct. it varies depending on what
type of add-on you are providing information for: for an extension or plugin bundle it must be urn:mozilla:extension:<id> for a theme it must be urn:mozilla:theme:<id> for any other
type of add-on it must be urn:mozilla:item:<id> note: prior to gecko 2.0 (firefox 4.0), the ordering of the versions within the <rdf:seq> is significant. for later versions, the compatible add-on version with the g...
...ate manifest (see the example above). the page at this url will be retrieved and displayed to the user. since it is being displayed outside of a normal webpage context it is heavily sanitized, which means there are few formatting options available and scripting and images aren't allowed. the information page retrieved must currently be totally valid xhtml, including being delivered with the mime
type application/xhtml+xml (important: see problems section) you may include %app_locale% in your updateinfourl if you want to have locale information included in the url -- this allows you to customize the text based on the user's locale. you may also use the other substitution strings supported by updateurl, although those may be less useful. formatting prior to firefox 4 prior to firefox 4 you c...
...and dd for lists b, i, em, strong, u, q, sub, sup and code for text formatting br and hr for line breaking the head, style and script tags and any of their contents are completely stripped. ...
...ntent of updateinfourl will be displayed to user in the add-ons page, in a list of all available updates. the user then can click the show information button, and will see the information, on the right hand side. (note the button caption is changed to hide information) problems you may encounter a problem where the content will not be displayed. see image below. the problem is because of mime
type that should be set in the server for xhtml extension. if you are running apache server, you might consider adding add
type application/xhtml+xml .xhtml to the .htacess file. unfortunately, i've encounter cases where adding the mime
type to the server didnt help either. so the solution i did, and which worked, was just to give the file a "xml" extension instead of "xhtml". securing updates ge...
Multiple item extension packaging - Archive of obsolete content
nd then start the installation of the individual packages it contains automatically. no other files besides the install.rdf install manifest and the files with a jar and xpi file extension will be extracted or utilized. install.rdf a multiple item package does not have the same requirements as an extension for its install.rdf. the only required properties are em:id, em:targetapplication, and em:
type. for the firefox and thunderbird 1.5 extension manager to determine that the package is a multiple item package, the em:
type specified in your install.rdf must be 32 and specified as <em:
type nc:parse
type="integer">32</em:
type>. the xml namespace xmlns:nc="http://home.netscape.com/nc-rdf#" must also be declared in your install.rdf as shown below. ... <rdf xmlns="http://www.w3.org/1999/02/22-rdf...
... ... ...
...l namespace xmlns:nc="http://home.netscape.com/nc-rdf#" must also be declared in your install.rdf as shown below. ... <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem
type for a multiple item package --> <em:
type nc:parse
type="integer">32</em:
type> ... ...
...//www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem
type for a multiple item package --> <em:
type nc:parse
type="integer">32</em:
type> ... for the firefox and thunderbird 2.0 extension manager you can use the above syntax or <em:
type>32</em:
type> as shown below. ... <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"> <!-- nsiupdateitem
type for a multiple item package --> <em:
type>32</em:
type> ... when specifying em:targetapplication the minversion specified should be the highest minversion and the maxvers...
Offering a context menu for form controls - Archive of obsolete content
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. ...
...="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. ...
...n/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. ...
...; components.utils.reporterror(settargetoriginal); nscontextmenu.proto
type.settarget = function(anode, arangeparent, arangeoffset) { settargetoriginal.apply(this, arguments); if (this.istargetaformcontrol(anode)) this.shoulddisplay = true; }; }, false); this code, which is run when the window is opened up, works by replacing the settarget() routine for the proto
type of nscontextmenu with one that forces the context menu to display if the target of the menu is a form control. as a result, all controls in the window will support a context menu when right-clicked, since we've changed the core behavior of context menus to override their default behavior of doing nothing on form controls. ...
Connecting to Remote Content - Archive of obsolete content
ion to handle the response returned from the remote server. in both cases aevent.target is an nsixmlhttprequest. in the onload callback function, the responsetext parameter contains the server response as text. if the response is an xml document, the responsexml property will hold an xmldocument object that can be manipulated using dom methods. sometimes the server doesn't specify an xml content-
type header, which is necessary for the xml parsing to happen automatically. you can use overridemime
type to force the response to be parsed as xml. request.overridemime
type("text/xml"); // do this before sending the request! the open method takes two required parameters: the http request method and the url to send the request. the http request method can be "get", "post" or "put". sending a post r...
... parsing to happen automatically. you can use overridemime
type to force the response to be parsed as xml. request.overridemime
type("text/xml"); // do this before sending the request! the open method takes two required parameters: the http request method and the url to send the request. the http request method can be "get", "post" or "put". sending a post request requires you to set the content
type of the request and to pass the post data to the send() method as below. request.open("post", url, true); request.setrequestheader("content-
type", "application/x-www-form-urlencoded"); request.send("data=hello&version=2"); the third parameter for the open method specifies whether the request should be handled asynchronously or not. in asynchronous mode code execution continues immediately after...
...es immediately after the send call. in synchronous mode the code and user interface are blocked while waiting for a response to come back. note: requests can take a long time to process and you don't want users to be stuck waiting while a request is obtained and processed. therefore, it is very important that xmlhttprequest calls are always done asynchronously. now let's look at the most common
types of content you can use to communicate with remote servers. json content json is a very lightweight and simple data representation format, similar to the object representation used in javascript. unlike javascript, the json format doesn't allow any kind of code that can be run, only data. json used to be risky in terms of security because the favored way of parsing it was to use the javascript...
...rform the transformation. ...
Supporting search suggestions in search plugins - Archive of obsolete content
firefox supports search suggestions in opensearch plugins; as the user
types in the search bar, firefox queries the url specified by the search plugin to fetch live search suggestions. once the list has been retrieved, it's displayed in a popup box that appears under the search bar, which lets the user select a suggested search term. if the user continues to
type, a new set of suggestions is requested from the search engine, and the displayed list is refreshed. implementing suggestion support in the search plugin to support search suggestions, a search plugin needs to define an extra <url> element with its
type attribute set to "application/x-suggestions+json". (this means that a suggestion-supporting engine plugin will have two <url> elements, the other one being the main text/html...
...ting suggestion support in the search plugin to support search suggestions, a search plugin needs to define an extra <url> element with its
type attribute set to "application/x-suggestions+json". ...
... see creating opensearch plugins for firefox to learn more about how to implement a search plugin. ...
...have two <url> elements, the other one being the main text/html search url.) for example, the yahoo search plugin has this <url> entry: <url
type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}"/> if the user
types "fir" into the search bar, then pauses, firefox inserts "fir" in place of {searchterms} and queries that url: <url
type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/> the results are used to construct the suggestion list box. see creating opensearch plugins for firefox to learn more about how to implement a search plugin. implementing search suggestion support on the server the majority of the work in handling search suggestions is actually implemente...
XML data - Archive of obsolete content
al-purpose language for any kind of structured data. by default, your mozilla browser displays xml in a format very similar to the original data in the xml file. you see the actual tags that define the data's structure. by linking a css stylesheet with the xml document, you can define other ways to display it. to do this, your stylesheet uses rules that map tags in the xml document to the display
types used by html. example data in an xml document uses <info> tags. you want the document's info elements to be displayed like html paragraphs. in the document's stylesheet, you specify how info elements are to be displayed: info { display: block; margin: 1em 0; } the most common values for the display property are: block displayed like h...
... block displayed like html's div (for headings, paragraphs) inline displayed like html's span (for emphasis within text) add your own style rules that specify the font, spacing and other details in the same way as for html. more details other values of display display the element like a list item, or like a component of a table. for the full list of display
types, see the display property in the css specification. using css alone, the structure of the display must be the same as the structure of the document. other technologies can modify the structure of the display—for example, xbl can add content, and javascript can modify the dom. for more information about xml in mozilla, see the xml page in this wiki. action: an xml demonstratio...
...he structure of the display—for example, xbl can add content, and javascript can modify the dom. for more information about xml in mozilla, see the xml page in this wiki. action: an xml demonstration make a new xml file, doc9.xml. ...
... xbl can add content, and javascript can modify the dom. for more information about xml in mozilla, see the xml page in this wiki. action: an xml demonstration make a new xml file, doc9.xml. ...
XUL user interfaces - Archive of obsolete content
de, and xbl bindings. like other xml-based languages, xul uses css stylesheets. more details 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. ...
...d languages, xul uses css stylesheets. more details 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 make a new xul document as a plain text file, doc7.xul. ...
... 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:" accesskey="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" disabled="true"/> <label class="day" value="wednesday" disab...
Creating a status bar extension - Archive of obsolete content
ll.rdf, is a text file containing information that tells the host application important information about the extension. ...
...a text file containing information that tells the host application important information about the extension. ...
... 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. version the extension's version number.
type the addon
type. for extensions, this is 2. human-readable information in this sample, we have four pieces of human-readable information; that is, information that is displayed to the user within the firefox interface. these are: property name description em:name the extension's name. this name is displayed in the extensions window. em:description a sho...
...e to overlay onto the browser. see xul overlays for details on how overlays work. you can also find 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. ...
Images, Tables, and Mysterious Gaps - Archive of obsolete content
an image it contained. fast forward to 2001, and the rise of standards-based browsers that lay out pages using html and css instead of their own private layout algorithms. thanks to an obscure corner of the css specification, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen. all it takes is a modern browser and the right doc
type, and kaboom! the components let's take a close look at the breeding ground for trouble, and why this is a problem. we start with a simple case, illustrated in figure 1: a one-cell table containing an image. obviously most designs are a touch more complicated than this, but we don't need anything more for our purposes. one image, one cell-- that's all it takes. there's nothing apparently wron...
...sly most designs are a touch more complicated than this, but we don't need anything more for our purposes. one image, one cell-- that's all it takes. there's nothing apparently wrong with that example. there isn't supposed to be, since it's an example of how browsers have traditionally behaved. now let's see what that same simple table looks like in a modern browser when the page has a strict doc
type. notice the added space beneath the image in figure 2. the markup of both table and cell remains unchanged-- it's the rendering mode that's different. instead of "shrinkwrapping" the image itself, the browser is now wrapping around the line in which the image sits. the image is sitting in a line because images are, by default, inline content. that's all it takes. how inline content is constru...
... is one obvious fix-- stop creating designs that are dependent on tables and sliced up or single-pixel images-- but it's not terribly practical for many designers, and it sure doesn't help fix old designs that are suddenly blowing apart in recent browsers. there's another obvious fix, which is to make sure your document doesn't trigger the "standards"rendering mode. you can do this by using a doc
type that will trigger either "quirks" mode or "almost standards" mode, or not having a doc
type appear in your document at all. the lack of a doc
type will prevent validation, and so is not recommended. for authors who are working with legacy documents, a "quirks" mode doc
type is the best choice. in cases where an author is writing a new document or trying to migrate a design to be as standards-based a...
...height-policy. obviously, the sooner a solution can be found and implemented, the happier authors everywhere will be. recommendations absent support for css3, it is difficult to provide a clear set of steps for fixing every instance of these problems, because the best solution for a given document will greatly depend on its structure. if your document uses transitional markup, make sure your doc
type reflects that fact and does not trigger "standards" mode. this will prevent browsers from using standards-based rendering, and thus all the image-layout problems are avoided. if you're using strict markup, or you need for other reasons to be in "standards" rendering, then remember these guidelines: any image alone in a table cell (e.g., single-pixel spacer images) should be made block-level. ...
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
d to support the np api, look for a file called plugin.ocx in your windows system directory. this 100k activex control contains the entire np api implementation and probably worked much like pluginhostctrl.dll does now. the sections below tell you how to fetch, build and use the pluginhostctrl.dll . get the source you need cvs to get the source code. assuming you have cvs somewhere in your path,
type this from a command prompt: c:\> set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot c:\> set home=\temp c:\> cvs login (logging in to anonymous@cvs-mirror.mozilla.org) cvs password: anonymous c:\> cvs -z3 co mozilla/embedding/browser/activex/src/pluginhostctrl this fetches the source for the control into mozilla\embedding\browser\activex\src\pluginhostctrl. you can also see the code...
...t on a machine, you must register it either through an install script or manually: regsvr32 pluginhostctrl.dll you must have administrator privileges to install a new control on operating systems such as windows nt, 2000 & xp. usage insert some html like this into your content: <object classid="clsid:dbb2de32-61f1-4f7f-beb8-a37f5bc24ee2" width="500" height="300"> <param name="
type" value="video/quicktime"/> <param name="src" value="http://www.foobar.com/some_movie.mov"/> <!-- custom arguments --> <param name="loop" value="true"/> </object> the classid attribute tells ie to create an instance of the plug-in hosting control, the width and height specify the dimensions in pixels. you may optionally specify a codebase attribute if you have packaged the c...
...="loop" value="true"/> </object> the classid attribute tells ie to create an instance of the plug-in hosting control, the width and height specify the dimensions in pixels. you may optionally specify a codebase attribute if you have packaged the control into a cab file and wish for it to be installed automatically. ...
.../object> the classid attribute tells ie to create an instance of the plug-in hosting control, the width and height specify the dimensions in pixels. you may optionally specify a codebase attribute if you have packaged the control into a cab file and wish for it to be installed automatically. the following <embed> attributes have <param> tag equivalents: <param name="
type" ...> is equivalent to
typespecifies the mime
type of the plug-in. the control uses this value to determine which plug-in it should create to handle the content. <param name="src" ...> is equivalent to srcspecifies an url for the initial stream of data to feed the plug-in. if you havent't specified a "
type" param, the control will attempt to use the mime
type of this stream to create the correct plug-in. <param name="plug...
Bookmark Keywords - Archive of obsolete content
acking, 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. ...
...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 illustrate this process: a keymark that will let the user jump st...
...s "insert user input here." it doesn't have to go at the end of the location field-- it can be anywhere inside the field. you just need to fill in whatever piece of a url it is you want to be able to "fill in" when you use the keymark. all we need now is a keyword, and our keymark will be ready to go. fill in the value bz, as shown in figure 5. with that done, all you have to do in the future is
type <tt>bz</tt> followed by a space and the bug's number into mozilla's address bar, and the browser will jump right to the bug with that number. this is illustrated in figure 6. that's all it takes! setting up a google keymark to set up a keymark that will search google directly form the address bar, go to google and run a search for any word. once you get a result page, bookmark that page. you'...
...s properties. in this case, we'll give it a keyword and title of google and replace the term "geitost" with the %s, as shown (with extra highlighting) in figure 8. now we can run google searches straight from the address bar. these searches can be as complex as google will tolerate, since the entered data will be converted to url-encoded text before it's sent to the google servers. thus we could
type any of the following into the address bar and get back useful results: <tt>google geitost</tt> <tt>google mozilla keyword bookmark</tt> <tt>google bookmark site:developer.netscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing this article, a number of potentially useful bookmarks were considered as possible examples. instead of ju...
Dehydra Function Reference - Archive of obsolete content
gcc command line -fplugin=/path/to/gcc_dehydra.so -fplugin-arg-gcc_dehydra=/path/to/your/script.js callback functions the following functions may be provided by the analysis script and will be called by dehydra while compiling. see the dehydra object reference for details on the available object properties. process_
type(
type) dehydra calls this for each class, struct, enum, union, and
typedef declaration. process_
type is called after process_function is called for all the member functions.
type is a
type object representing the
type that was declared. process_function(decl, body) dehydra calls this for each function definition (declarations without bodies are not included), including both top-level functions, class member functions, and inline class member functions. decl is a var...
...aration. process_
type is called after process_function is called for all the member functions.
type is a
type object representing the
type that was declared. process_function(decl, body) dehydra calls this for each function definition (declarations without bodies are not included), including both top-level functions, class member functions, and inline class member functions. decl is a variable
type object representing the function being processed body is an array of {loc:, statements:array of variable
types} representing an outline of the function stripped down to variables, function calls and assignments. process_decl(decl) process_decl is called for every global variable, function, or template declaration. ...
...this is useful for finalizing analyses. builtin functions the following functions are provided by dehydra and may be called by the user: print(msg) print a string to stdout (or stderr if the compiler is piping output). ...
...the first argument to warning() is an integer. it is not possible to define new warnings in dehydra, thus one has to figure out a warning code from an existing warning and hijack it for ulterior purposes. msg is a string to be presented as a gcc warning optional: loc is the location that should be reported for the warning. if no location is provided, the location is inferred from the last process_
type or process_function. error(msg [, loc]) print an error message using the gcc error mechanism. this will cause compilation to fail. msg is a string to be presented as a gcc error optional: loc is the location that should be reported for the warning. if no location is provided, the location is inferred from the last process_
type or process_function. _print(msg, ...) the low level function called...
Drag and Drop JavaScript Wrapper - Archive of obsolete content
number of properties, each set to a function which handles a particular aspect of drag and drop. five functions may be defined. you only have to define the ones that you need. ondragstart(event, transferdata, action) define this function to have something happen when a drag starts. it takes three arguments, the event object as was originally passed to the event handler, the data to drag and the
type of drag action. this function should add the data to drag to the transferdata object. ondragover(event, flavor, session) this function should be defined when you want something to happen when an element is dragged over. the first argument is the event object, the second is the flavor of the data and the third is a drag session object which provides more details about the drag that is occurring. ...
...akes no arguments. this function is necessary so that the wrapper can determine the best flavour to pass to the other functions. for an observer that is observing an element that can start a drag, you should define at least the ondragstart function. for elements that can have objects dropped on them, you should define ondragover, ondrop and getsupportedflavours (and, if desired, ondragexit). the
type of data being dragged is stored as a set of flavors. often, a dragged object will be available in a number of flavors. that way, a drop target can accept the flavor it finds most suitable. for example, a file may come in two flavors, the file itself and the text name of the file. if the file is dragged and dropped onto a directory, the file flavor will be used. if the file is dropped onto a textb...
...ample, a file may come in two flavors, the file itself and the text name of the file. if the file is dragged and dropped onto a directory, the file flavor will be used. if the file is dropped onto a textbox, the text name flavor will be used. the text is therefore used to insert the name of the file when files can't be dropped directly. a flavor object has a name, which is a formatted like a mime
type, such as 'text/unicode'. within the ondragstart function, you specify what flavours are available for the item being dragged. to do this, add data and flavours to the transferdata object, which is the second argument to ondragstart. an example should help here. the ondragstart function adds data to the transferdata object. var textobserver = { ondragstart: function (event, transferdata, action)...
...perties, data which holds the data and flavour which holds the flavour of the data. once you have the data, you can add it to the element is some way. for example, you might set the value of a textbox. var textobserver = { ondrop : function (event, transferdata, session) { event.target.setattribute("value",transferdata.data); } } the flavour system used allows multiple objects of various
types to be dragged at once and also allows alternative forms of the data to be dragged. the following table describes some of the flavours you might use. you can also make up your own flavours if necessary. text/unicode text data text/html html data text/x-moz-url a url application/x-moz-file a local file see here for an overview of more data flavours. « previousnext » original ...
Code snippets - Archive of obsolete content
://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); json.parse(new resource(weave.service.storageurl + collection).get()).length; dump the cleartext of each record in a collection to the console. ...
...ve.service.storageurl + collection).get()).length; dump the cleartext of each record in a collection to the console. ...
...l + collection, record
type); coll.full = true; coll.recordhandler = function(item) { item.collection = collection; item.decrypt(); console.log(item.cleartext); }; coll.get(); print an individual record let collection = "history"; let id = "guid_goes_here"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/record.js"); let record
type = weave.engines.get(collection)._recordobj; let coll = new collection(weave.service.storageurl + collection, record
type); coll.full = true; coll.ids = [id]; coll.recordhandler = function(item) { item.collection = collection; item.decrypt(); console.log(item.cleartext); }; coll.get(); count
types of bookmark records components.utils.import("resource://services-sync/main.js"); component...
...; coll.ids = [id]; coll.recordhandler = function(item) { item.collection = collection; item.decrypt(); console.log(item.cleartext); }; coll.get(); count
types of bookmark records components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/record.js"); let deleted = 0; let items = {}; let collection = "bookmarks"; let record
type = weave.engines.get(collection)._recordobj; let coll = new collection(weave.service.storageurl + collection, record
type); coll.full = true; coll.limit = null; coll.recordhandler = function(item) { item.collection = collection; item.decrypt(); if (item.deleted) { deleted++; } else { items[item.
type] = 1 + (items[item.
type] || 0); } }; coll.get(); con...
Introducing the Audio API extension - Archive of obsolete content
metadata of the media element is available, it triggers a loadedmetadata event. this event has the following attributes: mozchannels: number of channels mozsamplerate: sample rate per second mozframebufferlength: number of samples collected in all channels this information is needed later to decode the audio data stream. ...
...r contains an array of audio samples. it's important to note that the samples are not separated by channels; they are all delivered together. for example, for a two-channel signal: channel1-sample1 channel2-sample1 channel1-sample2 channel2-sample2 channel1-sample3 channel2-sample3. ...
...n mozwriteaudio(). it's important to note that not all the samples might get written in the stream. the function returns the number of samples written, which is useful for the next writing. ...
...ple below: // write samples using a js array var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...]; var numbersampleswritten = audiooutput.mozwriteaudio(samples); // write samples using a
typed array var samples = new float32array([0.242, 0.127, 0.0, -0.058, -0.242, ...]); var numbersampleswritten = audiooutput.mozwriteaudio(samples); in the following example, we create an audio pulse: <!doc
type html> <html> <head> <title>generating audio in real time</title> <script
type="text/javascript"> function playtone() { var output = new audio(); output.mozsetup(1, 44100); var samples = new float32array(22050); for (var i = 0; i < samples.length ; i++) { samples[i] = math.sin( i / 20 ); } output.mozwriteaudio(samples); }...
JavaScript crypto - Archive of obsolete content
lesmartcardevents to true. you can then register event handlers for these events with the document.addeventlistener() method. two smart card related events are generated: smartcard-insert when smartcards are inserted, and smartcard-remove when smartcards are removed. web sites which use ssl clientauth login could use the following code to refresh the page on token insertions and removals: <!doc
type html> <p>... <script> function onsmartcardchange() { window.location.reload(); } function register() { window.crypto.enablesmartcardevents = true; document.addeventlistener("smartcard-insert", onsmartcardchange, false); document.addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() { document.removeeventlistener("smartcard-insert", onsmartcardchange, fa...
...signed blob and any other necessary info to the ca/ra ca/ra verifies signature on signed blob ca/ra validates identity of user ca/ra sends wrapped encryption private key to kra kra sends escrow verification back to ca ca creates and signs certificates ca sends certificates back to the user (importusercertificates) typical use the ca's enrollment page could look something like this: <!doc
type html> <h2>request a cert</h2> <form name="reqform" method="post" action="http://your.ra.site.org"> <p><input
type=hidden name=cert_request value=""> <p>name: <input
type=text name=name value=""> <p>password: <input
type=password name="password" value=""> <p><input
type=submit name="send" value="submit"> </form> <script> /* the following values could be filled in by the server cgi */ var authentic...
...put
type=text name=name value=""> <p>password: <input
type=password name="password" value=""> <p><input
type=submit name="send" value="submit"> </form> <script> /* the following values could be filled in by the server cgi */ var authenticator = "server_magic"; var keytransportcert = null; var crmfobject = null; var form = document.forms[0]; function validate() { // generate keys for nsm. ...
...ue, form.password.value, authenticator, keytransportcert, "setcrmfrequest();", 1024, null, "rsa-dual-use"); } return false; } function setcrmfrequest() { form.cert_request.value = crmfobject.request; form.submit(); } form.onsubmit = validate; </script> on completion of the request, the ca may submit a page that looks something like this: <!doc
type html> <h2>certificate request successful</h2> <p>hit 'load' to load your certificate</p> <form name="reqform"> <p><input
type=submit name="load" value="submit"></p> </form> <script> /* the following values could be filled in by the server cgi */ var nickname= "mycertnickname"; var cert = "mkjflakdjfiwjflaksufklasf ..."; var forcebackup = false; function loadcertificate() { window.crypto.import...
Table Layout Regression Tests - Archive of obsolete content
e trees are dumped to separate files in a baseline or verify directory for all url's in rtest.lst (see: nsregressiontester::dumpframemodel). their name is generated by replacing the old extension .html or .xml with .rgd. for appendcells1.html a file appendcells1.rgd will be created in the baseline or verify subdirectory. ...
...++webshell == 1 ++domwindow == 1 ++webshell == 2 ++domwindow == 2 note: styleverifytree is disabled note: frameverifytree is disabled note: verifyreflow is disabled ++webshell == 3 ++domwindow == 3 running baseline test for e:\moz_src\mozilla\layout\html\tests\block\rtest.lst.
...ts\block\base\baseline\pre_html.rgd writing regression data to e:\moz_src\mozilla\layout\html\tests\block\base\baseline\pre1_html.rgd the second verify run creates first the frame dumps in the verify subdirectories (verify) and compares each frame dump with the corresponding reference frame dump. if they differ in critical points the test fails. a typical part of the verify log would look like:
type manifest file: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed. ++webshell == 1 ++domwindow == 1 ++webshell == 2 ++domwindow == 2 note: styleverifytree is disabled note: frameverifytree is disabled note: verifyreflow is disabled ++webshell == 3 ++domwindow == 3 running verify test for e:\moz_src\mozilla\layout\html\tests\block\rtest.lst. w...
...hecked in the code: please add your testcase for the bug to the regression tests. a testcase should only contain local files. place the images in table/images block/images or (don't forget cvs commit -kb) and the test file in the table/bugs or block/bugs directory. update the rtest.lst file in the corresponding directory in order to include your file. additional notes there is a special
type of frame dumps - the printing regression tests, they are invoked by the -prt command line argument to the viewer and include first a display then a frame dump taking into account the printer pages. please contact if you need help with running those tests. i would like to thank chris karnaze for his guidance and fantasai for her language support. original document information author(s): bernd...
Using Breakpoints in Venkman - Archive of obsolete content
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. ...
...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. ...
...future breakpoints are used when you want to stop in a script that has not yet been compiled. ...
...oint script. to reset the count, enter a 0 in the "trigger count" field. meta comments you can also embed scripted breakpoints directly into the source code you are debugging by using a venkman facility called meta comments. meta comments are specially formatted comments that pull in the script named after the comment and specify how to treat the output of that script. the following meta comment
types are available: the //@jsd_log comment will insert a breakpoint which is set to execute the script that follows without stopping. the result of the evaluation will be logged to the interactive session. the //@jsd_break comment will insert a breakpoint which is set to execute the script that follows and stop if the result is true. the //@jsd_eval command will insert a breakpoint which is se...
Anonymous Content - Archive of obsolete content
bound document using a single tag can then be constructed out of multiple child elements, and this implementation is hidden from the bound document. for example, the html file upload control appears in most browsers as a composite widget consisting of a text field and a button. a sample xbl binding for the file widget might look as follows: <binding id="fileupload"> <content> <html:input
type="text"/> <html:input
type="button"/> </content> </binding> because this content is not visible to its parent element, it is said to be anonymous content. scoping and access using the dom when a binding is attached and certain conditions are met, the children of the binding's content element are cloned. elements and attributes in the xbl namespace are never cloned. for content generated ...
...y a comma-separated list of attributes that should be inherited. attributes with namespaces can be defined using a namespace prefix and the attribute name separate by a colon. for example, on the html file upload control, the anonymous textfield can be set up to automatically inherit the value attribute from the bound element. <xbl:binding id="fileuploadcontrol"> <xbl:content> <html:input
type="text" xbl:inherits="value"/> <html:input
type="button" value="browse..."/> </xbl:content> </xbl:binding> each entry in the inherits list can either simply list an attribute (such as value in the example above), or it can specify an = separated pair consisting of the attribute on the anonymous content that should be tied to the attribute on the bound element. the anonymous content attribu...
...e is never cloned when content is generated from a template. insertion points <children> xbl bindings can interleave anonymous content between bound elements and their explicit children. they do so using xbl children tags. any number of children tags may be used in a binding's anonymous content template. the location at which a children tag occurs is called an insertion point. there are two
types of insertion points: explicit and inherited. explicit insertion points specify locations at which the explicit children of a bound element are inserted. explicit insertion points are only used if they are found on the primary generating binding. explicit insertion points on other bindings are ignored. inherited insertion points are used to place the anonymous content generated by the next bindi...
...retargeted so that the bound element becomes the target, or the event is stopped and flow proceeds to the next phase. whenever an event is retargeted, the target field of the event is set to the bound element. the original anonymous content responsible for the event can be obtained from a new field of the event object: originaltarget. the action taken (retarget vs. stop) is specific to the event
type. in general, ui events are retargeted and mutation events are stopped. exceptions to the rule are noted below. focus and blur events when a focus or blur event crosses a scope boundary, the bound element is checked to see if it is focusable (i.e., if the user agent would normally fire a focus or blur event on the element). if the bound element is focusable, then the event is retargeted. if not,...
XML in Mozilla - Archive of obsolete content
s a relative path, and the xml declaration states that the document is not standalone (default), in which case mozilla will try to look for the entity under <bin>/res/dtd directory. mozilla may also make an exception with xhtml documents, see below. mozilla will read internal (dtd) subsets, and in special circumstances external dtds as explained above and will use this information to recognize id
type attributes, default attribute values, and general entities. other notes a lot of the document object model (dom, w3c recommendations and drafts) applies to xml. likewise, the cascading style sheets (css, w3c recommendations and drafts) style language can be used to style xml documents. the code for most the core xml can be found in the following directories on the mozilla mercurial repository: co...
...ce gecko 1.9.1 this scheme is simply a wrapper for fixptr xpointer xpath1() scheme obsolete since gecko 1.9.1 internet-draft document.load(), document.async part of dom level 3 load & save module, a w3c working draft xhtml we have reasonable xhtml support, most things should work. ...
...orking draft xhtml we have reasonable xhtml support, most things should work. we treat xhtml documents differently depending on the mime
type (or file suffix if files are loaded from local discs). files that go through the html code path are not checked for well-formedness. you will also notice not all xhtml features are supported when you exercise the html code path. mime
type file suffix code path text/xml application/xml application/xhtml+xml xml xht xhtml xml text/html html htm html the entire document need not be xhtml. you can use xhtml elements inside an arbitrary xml document by using the xhtml namespace. see the testing and qa section for samples...
... the entire document need not be xhtml. you can use xhtml elements inside an arbitrary xml document by using the xhtml namespace. see the testing and qa section for samples. the correct xhtml namespace is http://www.w3.org/1999/xhtml please note that the xhtml entities, like ä, work only in conforming xhtml documents that have a valid xhtml formal public identifier (or in other words, a doc
type section with a public identifier). xhtml entities will not work in arbitrary xml documents, not even if the xhtml namespace is used. the public identifiers that are recognized are: -//w3c//dtd xhtml 1.0 transitional//en -//w3c//dtd xhtml 1.1//en -//w3c//dtd xhtml 1.0 strict//en -//w3c//dtd xhtml 1.0 frameset//en -//w3c//dtd xhtml basic 1.0//en -//w3c//dtd xhtml 1.1 plus mathml 2.0//en -//w3c//dtd...
menuitem.name - Archive of obsolete content
« xul reference home name
type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
... « xul reference home name
type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
...reference home name
type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
... a group. only one menuitem in each radio group can be checked at a time. ...
Extensions - Archive of obsolete content
ng a context menu for a link displays items to open the link in a new window or tab and to save or bookmark the link. an extension may modify the context menu to show additional items that either appear always, or appear only when certain content is selected. in firefox, the browser area that displays web pages has only one context menu. instead of having separate context menus depending on what
type of element was the target of the context menu, only one context menu is used and items that don't apply to that
type of element are hidden from the menu as needed. thus, you can add items to the firefox context menu by overlaying this single menu. this context menu has the id 'contentareacontextmenu'. in this example, a single item is added to the end of the firefox context menu. <popup id="cont...
...ed on context. determining what element was context clicked for general information about how to determine which element was the target of the context menu, that is, the element that was context clicked, see determining what was context clicked firefox uses its own popupshowing event listener to adjust the items on the context menu. this allows the menu to have different commands for different
types of targets. while the popup is open, the gcontextmenu global variable is set to an object which handles all of the functionality specific to the firefox context menu. specifically, this object is initialized with a set of properties that indiciate the
type of object that was the target of the context menu. for instance, the 'onlink' property is set to true when a link was context-clicked. you m...
...the following are the most common properties that you can check. ...
...code already handles various special and complex cases that would take a lot of code to deal with manually. the following are the most common properties that you can check. an example follows. target the element that was context clicked. if the keyboard was used to open a context menu, this will be the focused element. ontextinput true if the target is a plain or password
type input, a textarea, or an editable area. this would be used to enable or disable commands related to text editing. onimage true if the target is an image. hasbgimage true if the target or an ancestor has a background image. onmathml true if the target is a mathml element. onlink true if the target is a link. onmailtolink true if the targe...
Property - Archive of obsolete content
« xul reference accessible accessible
type accesskey 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 custom...
...trollers 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 disablekeynavigation dlg
type docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editor
type emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage ...
...nly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle sel
type sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject
type uri u...
...t.children dom:element.clientheight dom:element.clientleft dom:element.clienttop dom:element.clientwidth dom:element.clonenode dom:element.firstchild dom:element.firstelementchild dom:element.lastchild dom:element.lastelementchild dom:element.localname dom:element.namespaceuri dom:element.nextelementsibling dom:element.nextsibling dom:element.nodename dom:element.node
type dom:element.nodevalue dom:element.ownerdocument dom:element.parentnode dom:element.prefix dom:element.previouselementsibling dom:element.previoussibling dom:element.scrollheight dom:element.scrollleft dom:element.scrolltop dom:element.scrollwidth dom:element.tagname dom:element.textcontent ...
Multiple Rules - Archive of obsolete content
t match the conditions have content generated for them. for each result, the conditions associated with each rule are examined to see if they match. the first rule that matches causes content to be generated for that result. for example, the first rule might match directories or folders, whereas the second rule might match files. in this situtation, you would want to use different output for each
type. if a result from the query doesn't match any of the rules, it is ignored and no content is generated for it. note that only the first rule, in the order that the rules appear in the template, that matches for a result is used, not all of them that match. thus, you can assume that earlier rules handled earlier matches. for instance, if the first rule matched all folders, then the remaining rules ...
... are shown. however, you will probably notice that the one photo that matches the first rule has appeared differently that the others. in fact, the content for this photo is that of the first rule with the button, whereas the content for the other photos is that of the second rule with the normal images. ...
...or each one. we assume that anyone that isn't male is female and use the second rule to create a disabled radio button for females. as all males have been filtered out by the first rule, we do not need any conditions for the second rule. where elements we saw in the example above how to compare a value exactly to a specific value. this would be useful for comparing a field that identified the
type of a result. however, there are many different ways in which the where element may be used. beside the equals operator, there are several other operators that may be used. operatordescriptionexample equalsmatch if a value equals anothermatch a specific value lessmatch if a number is less than anothermatch only negative values with one rule, positive values with another greatermatch if a number ...
...a value comes before another alphabetically aftermatch if a value comes after another alphabetically startswithmatch if a value starts with a specific string endswithmatch if a value ends with a specific string containsmatch if a value contains a substringto highlight results that contain a search term here is an example using the 'contains' operator: <vbox datasources="people.xml" ref="*" query
type="xml"> <template> <query expr="person"> <assign var="?letters" expr="string-length(@name) - 1"/> </query> <rule> <where subject="?name" rel="contains" value=" "/> <action> <label uri="?" value="?name has two names for a total length of ?letters"/> </action> </rule> </template> </vbox> this example contains only one rule with a condition which c...
Sorting Results - Archive of obsolete content
rvice assumes that the starting ref resource is the container and the end results are the children. in this case, the natural order of the results will just be the order that the template builder generates the results. for ascending or descending sorts, this doesn't matter, since it will ignore whether results are containers and just sort by a value, alphabetically or numerically depending on the
type of data. when using a tree, sorting may be performed on each column of the tree. for instance, if a list of photos was displayed in a two column tree showing the title and description, you could sort by either title or description. the user can change the sort column and direction by clicking the column headers, however, you can programmatically change the sort as well. sorting tree results we'll...
...bel value. however, one situation where this is not desirable is if the displayed values would not generate the correct order as there is a different representation that is more accurate. for example, the date 'may 15' would appear after 'august 24' when sorted purely alphabetically but before it when sorted chronologically. for rdf datasources, another way to sort by dates is to use the the parse
type="date" construct in the rdf datasource. this marks a literal as being a date value rather than a string. the builder will recognize this and sort chronologically instead. this also has the advantage that the dates will be displayed according to the user's current locale (meaning that the date is formatted so as to be suitable for the user's language). here is a sample of how to specify this in th...
...language). here is a sample of how to specify this in the rdf/xml datasource: <rdf:rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:r="http://www.xulplanet.com/rdf/" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"> <r:date nc:parse
type="date">1125966767295<r:date> </rdf:description> </rdf:rdf> you can also specify parse
type="integer" for numbers which will allow sorting numerically. by specifing different
types for different values, you can sort alphabetically, numerically or by date. if you are using the simple rdf query syntax, there are no variables, so you need to specify the full predicate including the rdf: prefix in t...
...is done by placing the attributes on the root element. content sorting for content builders (templates that do not use flags="dont-build-content"), sorting is done by placing the sort and sortdirection attributes on the root node of the template. the sortactive attribute is not needed. in this example, the list of people is sorted ascending by name. <listbox datasources="people2.xml" ref="*" query
type="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 valu...
Custom toolbar button - Archive of obsolete content
character encoding some text editors have a setting for character encoding. if your language uses only plain latin (ascii) characters, set your text editor to use any encoding except unicode. if your language uses accents or other non-latin characters, set your text editor to save files using the utf-8 encoding. to check your text editor, create a plain text file named test.txt. in the file,
type some of the special characters that your language uses. save the file. open the file in firefox (for example, by dragging it and dropping it in firefox, or by choosing file – open file... from firefox's menu bar). from firefox's menu bar, choose view – character encoding – unicode (utf-8). check that the text you
typed looks ok with this setting. if your text editor does not support utf-...
...te a directory named chrome. perform the following steps in that directory, creating five files there. explanation: the chrome directory contains files that specify what the extension does. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. ...
...y, creating five files there. explanation: the chrome directory contains files that specify what the extension does. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. ...
...plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. ...
Tree Widget Changes - Archive of obsolete content
sundetermined -> nsitreeview.progress_undetermined (2) nsitreeview.progressnode -> nsitreeview.progress_none (3) as well, the drag and drop methods candropon and candropbeforeafter have been replaced with a single method candrop(idx,orientation) which handles both. it should return true if a drop is allowed on a row. checkbox columns tree columns now implement the checkbox
type. previously the value existed but was not implemented. now it is. you can create a checkbox column by setting the
type attribute of a column to checkbox. <treecol
type="checkbox"> you can then set or clear the checkbox for a particular cell in that column by setting the value attribute to true, or leaving out the attribute. note that it's the value attribute you use, not the label attribute. ...
...pecify the checkbox image with css for the checkbox to display. (do not set id of the column to be 'checked' it will cause problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol
type="checkbox" editable="true"> ... </treecol> </treecols> </tree> if the column is editable, the user can click the cell to change the state of the checkbox. when the user clicks the cell, the view's setcellvalue method will be called with either the value true or false. note that the tree must also be marked as editable using the editable attribute in order for this to work. this is ...
...for that cell by setting editable to false for that cell, as in the following: <treecell value="true" editable="false"/> or, for custom views, return false from the iseditable method. currently, only checkbox columns support editing, although the content-based tree handles the nsitreeview.setcellvalue() and nsitreeview.setcelltext() functions to change the tree content with a script for other
types of cells. for instance: var col = tree.columns.getprimarycolumn(); treecell.setcelltext(5, col, "banana"); this will change the label of the cell in row 5 and the primary column to banana. however, this paves the way in the future for more general tree editing features. style improvements you can now specify the cursor to use for a cell using the css cursor property. treechildren::-moz-tre...
...primary column to banana. however, this paves the way in the future for more general tree editing features. style improvements you can now specify the cursor to use for a cell using the css cursor property. treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. the :-moz-tree-separator pseudo has been improved to make it a proper box
type and now has additional styling capabilities. example: treechildren::-moz-tree-separator { margin-top: 1px; border-top: 1px solid threedshadow; border-left: 1px solid threedshadow; border-right: 1px solid threedhighlight; border-bottom: 1px solid threedhighlight; height: 2px; } original document information author: neil deakin source: here ...
Anonymous Content - Archive of obsolete content
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 identifier of the binding. this way it can be referred to through the css -moz-binding property. the content tag is use...
...to. presumably this binding would be bound to a scroll bar, although it doesn't have to be. any element that has its css -moz-binding property set to the uri of the binding will use it. the result of using the above binding is that the line of xul below will be expanded as follows, assuming that the scrollbar is bound to the xbl above: <scrollbar/> expands to: <scrollbar> <xul:scrollbarbutton
type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton
type="increment"/> </scrollbar> the elements within the content tag are added to the scroll bar anonymously. although anonymous content is displayed on screen, you cannot get to it through a script in the normal way. to the xul, it's as if there was only one single element, even though it is reall...
...menu. the xbl content is hidden away so the xul developer doesn't need to even know it is there. the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific
types of content and not others. or, you may wish to place different
types of content in different places. the includes attribute can be used to allow only certain elements to appear in the content. its value should be set to a single tag name, or to a list of tags separated by vertical bars (the | symbol). <children includes="button"/> this line will add all buttons that are children of the bound el...
...ly certain elements to appear in the content. its value should be set to a single tag name, or to a list of tags separated by vertical bars (the | symbol). <children includes="button"/> this line will add all buttons that are children of the bound element in place of the children tag. other elements will not match this tag. you can place multiple children elements in a binding to place different
types of content in different places. if an element in the xul does not match any of the children elements, that element (and any others that don't match) will be used instead of the bound content. here is another example. let's say that we wanted to create a widget that displayed an image with a zoom in and zoom out button on each side of it. this would be created with a box to hold the image and two...
Box Model Details - Archive of obsolete content
the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible. the best interface is one that can be displayed at various sizes without problems. the box model may be difficult to understand without trying various various things out for yourself. the following is an outline of both
types of boxes: horizontal boxes lay out their elements next to each other horizontally. flexible elements are flexed horizontally. packing controls their horizontal placement of child elements. alignment controls how the row of elements are aligned vertically. vertical boxes lay out their elements vertically in a column. flexible elements are flexed vertically. packing controls the v...
...trols how the column of child elements are aligned horizontally. you can put boxes anywhere in a xul file, including inside an html element such as a table. however, the layout will be partly controlled by the html element. that means that the flex might not work exactly as you want it. remember that flexibility only has meaning for elements that are directly inside a box or an element that is a
type of box. layout examples using spacers example 3 : source view <hbox> <button label="one"/> <spacer style="width: 5px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels. you could also set margins using the css margin property. centering buttons example 4 : source view <hbox pack="center" align="center" fl...
...e buttons horizontally. the align attribute aligns the buttons vertically. the result is that the buttons will be centered in the box in both directions. this example will work with a vertical box as well, although the second button will be underneath the first one, instead of beside it. ...
...each other by some space of no more than 30 pixels. the second box has an alignment of start. this causes the child elements to be aligned on the left edge. if this was not specified, the default would be stretch, which would make the child elements stretch horizontally. because we don't want the find button to change size, we need to set an alignment. next, we will learn about a more specialized
type of box, the groupbox. « previousnext » ...
Box Objects - Archive of obsolete content
objects since it isn't displayed in any way. similarly, any element that has been hidden will not have a layout object either. the dom is generally used only to get and modify information pertaining to the content or structure of the document. it's relatively simple to determine what kind of content tree node will be created for a given element. a xul element, for example, will have a xulelement
type of content node. the layout objects that will be created are determined in a more complex manner. various pieces of information are used such as the tag name, the attributes on an element, various css properties, the elements and layout objects around the element, and the xbl associated with an element (xbl is described in a later section). unless you change the style for an element, most xul ele...
...determined in a more complex manner. various pieces of information are used such as the tag name, the attributes on an element, various css properties, the elements and layout objects around the element, and the xbl associated with an element (xbl is described in a later section). unless you change the style for an element, most xul elements will usually use the box layout object or one of its sub
types. 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 sub
types, about 25 or so, for specific xul elements. some of these sub
types, 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 lay...
...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 function of the element. ...
...escribed above of xul layout for more advanced xul development. box objects the layout objects are not accessible to the developer for manipulating. they are internal to the xul layout components. however, xul provides some helper objects, called box objects, which can provide some layout related information. as the name implies, they are available for all box-based elements. there are several sub
types of box object, although only a couple of them are generally used. the others have functions which are more easily accessible by methods mapped directly onto the element, since those
types are generally only used with one particular element. the base box object, or the interface nsiboxobject, however, has a number of properties which are quite useful for xul development. the base box object has t...
More Button Features - Archive of obsolete content
used, where normal means place the image above the text, and reverse means place the image below the text. example 3 : source view <button label="left" image="happy.png"/> <button label="right" image="happy.png" dir="reverse"/> <button label="above" image="happy.png" orient="vertical"/> <button label="below" image="happy.png" orient="vertical" dir="reverse"/> the example here shows all four
types of alignment of buttons. note that the two attributes are not specified when the default value can be used. buttons with extra content buttons may have arbitrary markup contained inside them, and it will be rendered inside the button. you probably wouldn't use this very often, but you might use it when creating custom elements. for example, the following will create a button where two of the wor...
...ced inside the button. html elements will be ignored, so you need to wrap them inside a description element. if you specify the label attribute on the button, it will override any content placed 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...
...this also creates a button with a menu, but the appearance will be different. the image to the right shows the difference. ...
...this also creates a button with a menu, but the appearance will be different. ...
Open and Save Dialogs - Archive of obsolete content
« previousnext » a common
type of dialog is one where the user can select a file to open or save. file pickers a file picker is a dialog that allows the user to select a file. it is most commonly used for the open and save menu commands, but you can use it any place in which the user needs to select a file. the xpcom interface nsifilepicker is used to implement a file picker. note that the file picker only works from chrome urls. you can use the file picker in one of three modes: open - the user is asked to select a file for opening. get folder - the user is asked to select a folder (directory). save - the user is asked to select the name to save a file to. the appearance of the dialog will be different for each
type and will vary on each platform. once the user se...
... is used for an open dialog. you can also use modegetfolder and modesave for the other two modes. these modes are constants of the nsifilepicker interface. default directory and filters there are two features you can set of the dialog before it is displayed. the first is the default directory that is displayed when the dialog is opened. the second is a filter that indicates the list of file
types that are displayed in the dialog. this would be used, for example, to hide all but .html files. you can set the default directory by setting the displaydirectory property of the file picker object to a directory. the directory should be an nsilocalfile object. if you do not set this, a suitable default will be selected for you. to add filters, call the appendfilters() function to set the file ...
...s that are displayed in the dialog. this would be used, for example, to hide all but .html files. you can set the default directory by setting the displaydirectory property of the file picker object to a directory. the directory should be an nsilocalfile object. if you do not set this, a suitable default will be selected for you. to add filters, call the appendfilters() function to set the file
types that you wish to have displayed. fp.appendfilters(nsifilepicker.filterhtml | nsifilepicker.filterimages); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); the first example will add filters for html and for image files. the user will only be able to select those
types of files. the manner in which this is done is platform specific. on some platforms, each filter will be...
...l files. you can also use filterxml and filterxul to filter for xml and xul files respectively. if you would like to filter for custom files, you can use the appendfilter() function to do this: fp.appendfilter("all files" ,"*.*"); fp.appendfilter("audio files (*.wav, *.mp3)","*.wav; *.mp3"); this line will add a filter for wave and mp3 audio files. the first argument is the title of the file
type and the second is a semicolon-seperated list of file masks. you can add more masks or fewer masks as needed. you can call appendfilter as many times as necessary to add additional filters. the order you add them determines their priority. typically, the first one added is selected by default. getting the selected file finally, you can show the dialog by calling the show() function. it takes no ...
Using the standard theme - Archive of obsolete content
espond to the standard theme (the theme currently chosen by the user in the theme selector), or even the default theme delivered with your the base application. applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/"
type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme. you do not have to specify a specific file; mozilla will determine by its own which files in the directory it needs to use. if you are only going to use these global style sheets, you of course do not need a <tt>skin</tt...
...r custom skin in the <tt>chrome.manifest</tt>. note that you can also mix these two approaches, although it makes your code more readable when sticking to only one way. ...
... two approaches, although it makes your code more readable when sticking to only one way. ...
...that is, depending on the theme currently selected by the user, you can provide different custom style sheets for your extensions. ...
caption - Archive of obsolete content
mplex caption. more information is available in the xul tutorial. attributes accesskey, crop, image, label, tabindex properties accesskey, crop, image, label, tabindex examples <groupbox> <caption label="my groupbox"/> </groupbox> <groupbox flex="1"> <caption> <checkbox label="a checked groupbox"/> </caption> </groupbox> attributes accesskey
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...
...r cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image
type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. 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...
... this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. 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 accesskey
type: character gets and sets the value of the accesskey attribute. crop
type: string gets and sets the value of the crop attribute. ...
...r 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 accesskey
type: character gets and sets the value of the accesskey 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 gets and sets the value of the label attribute. tabindex
type: integer gets and sets the value of the tabindex attribute. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand...
deck - Archive of obsolete content
ion is available in the xul tutorial. attributes selectedindex properties selectedindex, selectedpanel examples <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex
type: integer gets and sets the index of the currently selected panel. the first item is at index 0. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheigh...
...you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns...
..., height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties selectedindex
type: integer returns the index of the currently selected item. you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. ...
...assigning a value to this property will modify the selected panel. ...
dropmarker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a dropmarker is a button with an arrow which will reveal more details when pressed. a dropmarker is not intended to be used as a separate element, but as part of another element. for instance the menulist and the popup
type of datepicker use a dropmarker, that when pressed, will reveal a popup menu. ...
...mples | attributes | properties | methods | related ] a dropmarker is a button with an arrow which will reveal more details when pressed. a dropmarker is not intended to be used as a separate element, but as part of another element. for instance the menulist and the popup
type of datepicker use a dropmarker, that when pressed, will reveal a popup menu. ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, context...
...flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type type: integer a value indicating the
type of accessibility object for the element. 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, , p...
key - Archive of obsolete content
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. attributes command, disabled, key, keycode, keytext, modifiers, oncommand, phase examples (example needed) attributes command
type: id set to the id of a command element that is being observed by the element. 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 ...
...owed 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. key
type: character the character that must be pressed. this should be set to a displayable character. 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
type: string a label for the keyboard shortcut. this text would ...
...multiple keys may be separated by spaces or commas. ...
...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 accesskey. any: indicates that all modifiers preceding it are optional. 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. phase
type: string the event phase where the handler is invoked. this should be set to the value capturing to indicate during the event capturing phase or target to indicate at the target element or left out entire...
listcell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell of a listbox. by default it only contains text but iconic and checkbox listcells are also available. attributes crop, disabled, image, label,
type properties disabled style classes listcell-iconic, examples (example needed) 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 text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the...
...cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } 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 not be submitted. do not set the attribute to true, as this will sug...
...d 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. image
type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. 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...
...lement. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. 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.
type type: string this attribute is reserved for use by anonymous children of listitem; do not use. properties disabled
type: boolean gets and sets the value of the disabled attribute. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id...
listhead - Archive of obsolete content
if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. ...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. ...
... inherited ...
...flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type type: integer a value indicating the
type of accessibility object for the element. disabled
type: boolean gets and sets the value of the disabled attribute. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,...
listheader - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a header for a single column in a listbox. attributes disabled properties acesssible
type examples <listbox> <listhead> <listheader label="name"/> <listheader label="occupation"/> </listhead> <listitem> <listcell label="george"/> <listcell label="house painter"/> </listitem> <listitem> <listcell label="mary ellen"/> <listcell label="candle maker"/> </listitem> <listitem> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </listbox> 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 ...
...ed 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. 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. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, dat...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, context...
...flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type type: integer a value indicating the
type of accessibility object for the element. 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, , p...
scrollbar - Archive of obsolete content
when a numeric value or percentage needs to be selected by the user. the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around. more information is available in the xul tutorial. ...
...ll bar or by dragging the scroll bar thumb around. more information is available in the xul tutorial. attributes curpos, increment, maxpos, pageincrement examples <scrollbar curpos="5" maxpos="50"/> attributes curpos
type: integer the current position of the scrollbar, which ranges from 0 to the value of the maxpos attribute. the default value is 0. ...
...the default value is 10. ...
...the default value is 10. ...
<statusbarpanel> - Archive of obsolete content
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. ...
...er there are new messages. attributes crop, image, label properties image, label style classes statusbarpanel-iconic, statusbarpanel-iconic-text, statusbarpanel-menu-iconic examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> 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 text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales,...
...ar cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image
type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. 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 ...
...empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. 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. properties image
type: image url gets and sets the value of the image attribute. label
type: string gets and sets the value of the label attribute. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, mi...
tabpanels - Archive of obsolete content
g the second tab, the second panel will be displayed and so on. there should be the same number of panels as there are tabs. panels should never be hidden; hiding the tab suffices to make the panel inaccessible. more information is available in the xul tutorial. attributes selectedindex properties selectedindex, selectedpanel examples (example needed) attributes selectedindex
type: integer gets and sets the index of the currently selected panel. the first item is at index 0. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheigh...
...you may select an item by ass...
...ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type: nsiaccessible returns the accessibility object for the element. selectedindex
type: integer returns the index of the currently selected item. ...
...assigning a value to this property will modify the selected panel. a select event will be sent when the selected panel is changed. ...
NPN_GetURL - Archive of obsolete content
-in side plug-in api summary asks the browser to create a stream for the specified url. syntax #include <npapi.h> nperror npn_geturl(npp instance, const char* url, const char* target); parameters the function has the following parameters: instance pointer to the current plug-in instance. url pointer to the url of the request. can be of any
type, such as http, ftp, news, or mailto. target name of the target window or frame, or one of the following special target names. values: _blank or _new: load the link in a new blank unnamed window. safest target, even though, when used with a mailto or news url, this creates an extra blank the browser instance. _self or _current: load the link into the same window the plug-in inst...
...e's document. if the plug-in instance's document has no parent, the default is _self. _top: load the link into the plug-in instance window. the default is _self, if the plug-in instance's document is already at the top. use for breaking out of a deep frame nesting. if the target is null, the browser creates a new stream and delivers the data to the current instance regardless of the mime
type of the url. in general, if a url works in the location box of the browser, it works here, except for the _self target. returns if successful, the function returns nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible values, see error codes. description npn_geturl() is used to load a url into the current window or another target or str...
... for enabling an existing application to operate on the web. for http urls, the browser resolves this method as the http server method get, which requests url objects. use npn_geturlnotify() instead of npn_geturl() in these cases: to request a stream and receive notification of the result. if the buffer contains header information (even a blank line). make sure that the target matches the url
type sent to it. for example, a null target does not make sense for some url
types (such as mailto). the following recommendations about target choice apply to other methods that handle urls as well. if the target parameter refers to the window or frame containing the current plug-in instance, the instance is destroyed and the plug-in may be unloaded. if target is null, the application creates a new s...
...window or frame containing the current plug-in instance, the instance is destroyed and the plug-in may be unloaded. if target is null, the application creates a new stream and delivers the data to the plug-in instance, through calls to npp_newstream(), npp_writeready() and npp_write(), and npp_destroystream(). this means that if you want the plug-in to handle a new stream, no matter what the mime
type is, use null. if the application cannot locate the url and retrieve the data, it does not create a stream for the instance. when the plug-in instance is part of a regular browser window, and it uses a _blank target with a mailto or news url, another blank window is opened along with the mail or news window. when the plug-in uses a _self target, no other instance is created; the plug-in usually co...
NPN_PostURL - Archive of obsolete content
get, uint32 len, const char *buf, npbool file); parameters the function has the following parameters: instance pointer to the current plug-in instance. url url of the request, specified by the plug-in. target display target, specified by the plug-in. if null, pass the new stream back to the current plug-in instance regardless of mime
type. for values, see npn_geturl. len length of the buffer buf. buf path to local temporary file or data buffer that contains the data to post. temporary file is deleted after use. data in buffer cannot be posted for a protocol that requires a header. file a boolean value that specifies whether to post a file. values: true: post the file whose path ...
... similarly to npn_geturl, but in reverse. npn_geturl reads data from the url and either displays it in the target window or delivers it to the plug-in. npn_posturl writes data from a file or buffer to the url and either displays the server's response in the target window or delivers it to the plug-in. if the target parameter is null, the new stream is passed to the plug-in regardless of mime
type. when you use npn_posturl to send data to the server, you can handle the response in several different ways by specifying different target parameters. if target is null, the server response is sent back to the plug-in. you can get the data and save it in a file or use it in a program. if you specify _current, _self, or _top, the response data is written to the same plug-in window and the pl...
... as the target parameter. for http urls only, the browser resolves this method as the http server method post, which transmits data to the server. the data to post can be contained either in a local temporary file or a new memory buffer. to post to a temporary file, set the flag file to true, the buffer buf to the path name string for a file, and len to the length of the path string. ...
...plug-ins can use this function to post form data to cgi scripts using http or upload files to a remote server using ftp. you cannot use npn_posturl to specify headers (even a blank line) in a memory buffer. ...
NPSetWindowCallbackStruct - Archive of obsolete content
display standard x toolkit attribute. pointer to the display structure that represents the browser-server connection. ...
... display standard x toolkit attribute. pointer to the display structure that represents the browser-server connection. ...
... display standard x toolkit attribute. pointer to the display structure that represents the browser-server connection. visual standard x toolkit attribute. ...
...s are used to pass platform-specific information. the npsetwindowcallbackstruct object, allocated by the browser, contains information required for the ws_info field of an npwindow. the npp_setwindow() function passes a pointer to this structure to the plug-in. the structure is valid for the lifetime of the npwindow, that is, until npp_setwindow() is called again or the instance is destroyed. the
type field of this structure always contains np_setwindow. the remaining fields are standard x toolkit attributes of the top-level shell window in the browser window hierarchy. see also npp_setwindow() npwindow npprintcallbackstruct npanycallbackstruct ...
NPWindow - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains information about the target into which the plug-in instance can draw. ...
...mac os: window is a pointer to an np_port. x, y the x and y coordinates for the top left corner of the plug-in relative to the page (and thus relativ...
...mac os: window is a pointer to an np_port. x, y the x and y coordinates for the top left corner of the plug-in relative to the page (and thus relative to ...
...ble or window. clipping to the cliprect prevents the plug-in from overwriting the status bar, scroll bars, and other page elements when partially scrolled off the screen. mac os: cliprect is the rectangle in port coordinates to which the plug-in should clip its drawing. ws_info unix: contains information about the plug-in's unix window environment; points to an npsetwindowcallbackstruct.
type npwindow
type value that specifies whether the npwindow instance represents a window or a drawable. values: npwindow
typewindow: indicates that the window field holds a platform-specific handle to a window (as in navigator 2.0 and navigator 3.0). the plug-in is considered windowed. npwindow
typedrawable: indicates that the plugin is windowless. the window field holds a platform-specific handl...
Adobe Flash - Archive of obsolete content
iptability features. until macromedia changes this from within the flash plugin, scriptability can not be used on mac os x browsers based on gecko. the example below shows a detection heuristic in action. example 1: verifying the flash plugin version below, javascript identifies the version of flash, and whether it is scriptable in netscape gecko: can we have javascript in a wiki page? <script
type="text/javascript">identifyflash();</script> typically, javascript code that determines what version of the plugin is installed looks at the mime
types array that is part of the navigator object. every plugin exposes a description string that typically includes the plugin's name and version number. the flash plugin's description string uses a standard versioning nomenclature that can then be pars...
...ent flash plugin version is flash 6 r79. the description string exposes this version. furthermore, it is also necessary weed out versions of flash that are not scriptable in mach-o browsers on os x. fortunately, mach-o browsers based on netscape gecko expose this information in their user-agent string. an algorithmic approach to detecting flash plugin version might be: var plugin = navigator.mime
types["application/x-shockwave-flash"].enabledplugin; var description = plugin.description; // 1. tokenize description string to its constituent parts var versionarray = description.match(/[\d.]+/g); // 2. determine if the flash version is greater than 6r.49 // 3. if so, the plugin is scriptable on windows and linux // 4. determine whether the browser is a mach-o browser // 5. if the browser is a ma...
...ed a handle to the html that spawned the plugin (the object element or the embed element) and then called a published method of the flash plugin on the reference to the html element. with fscommands, developers may choose to use macromedia's actionscript language to make a call back into the environment that contains the flash animation -- in this case, the html page. the example below shows both
types of communication in action: example 3: javascript to flash communication and fscommands -- flash to javascript communication the example is missing. in example 3, clicking the html button causes a ball to move in the flash animation. this exemplifies javascript to flash communication. by clicking the html button, you trigger a javascript event that further triggers actions within the flash a...
... function myflash_dofscommand(command, args) { // handle any callback logic that you may have designed into your flash plugin // the flash animation will supply you with the values for command and args // this is a function that handles any information that the flash animation may pass it // actionscript can communic...
-ms-content-zoom-snap - Archive of obsolete content
the -ms-content-zoom-snap css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-snap-
type and -ms-content-zoom-snap-points properties. ...
... the -ms-content-zoom-snap css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-snap-
type and -ms-content-zoom-snap-points properties. ...
...values for the -ms-content-zoom-snap-
type and -ms-content-zoom-snap-points properties. initial valueas each of the properties of the shorthand:-ms-content-zoom-snap-
type: none-ms-content-zoom-snap-points: snapinterval(0%, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-content-zoom-snap-
type: as specified-ms-content-zoom-snap-points: as specifiedanimation
typediscrete syntax the -ms-content-zoom-snap shorthand property is specified as one or both of the following content zoom snap values, in order, separated by spaces. values -ms-content-zoom-snap-
type value of the -ms-content-zoom-snap-
type property. -ms-content-zoom-snap-points value of the -ms-content-zoom-snap-points pro...
... remarks this property has no effect on non-zoomable elements. see -ms-content-zooming for details on zoomable elements. starting with windows 8.1, this property is also supported for touchpad interaction. this property requires windows 8 or later. ...
-ms-scroll-snap-points-x - Archive of obsolete content
the -ms-scroll-snap-points-x css property is a microsoft extension that specifies where snap-points will be located along the x-axis. initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation
typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>. snapinterval( <length-percentage>, <length-percentage> ) specifies a starting snap-point followed by the interval between all snap-points. the first value specifies where the first snap-point will be placed. the second value specifies the distance between subsequent snap-points both to the left and the right of the initial snap-point. snaplist( <length-perce...
...ctor. if any value is less than -ms-scroll-limit-x-min , then -ms-scroll-limit-x-min is used. if any value is greater than -ms-scroll-limit-x-max, then -ms-scroll-limit-x-max is used. formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snaplist( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both
types of values for the -ms-scroll-snap-points-x property. in the first selector, the first snap-point is at 0%, and the interval is set to 100%. in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. (the -ms-scroll-snap-points-x property behaves identically to the -ms-scroll-snap-points-y property, but along the x-axis.) .container { overflow-x: auto; over...
...p-points-x property. in the first selector, the first snap-point is at 0%, and the interval is set to 100%. in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. ...
... remarks this property requires windows 8 or later. this property has no effect on non-scrollable elements. ...
-ms-scroll-snap-points-y - Archive of obsolete content
the -ms-scroll-snap-points-y css property is a microsoft extension that specifies where snap-points will be located along the y-axis. initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation
typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>. snapinterval( <length-percentage>, <length-percentage> ) specifies a starting snap-point followed by the interval between all snap-points. the first value specifies where the first snap-point will be placed. the second value specifies the distance between subsequent snap-points both above and below the initial snap-point. snaplist( <length-percentage>...
...ctor. if any value is less than -ms-scroll-limit-y-min , then -ms-scroll-limit-y-min is used. if any value is greater than -ms-scroll-limit-y-max, then -ms-scroll-limit-y-max is used. formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snaplist( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both
types of values for the -ms-scroll-snap-points-y property. in the first selector, the first snap-point is at 0%, and the interval is set to 100%. in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. (the -ms-scroll-snap-points-y property behaves identically to the -ms-scroll-snap-points-x property, but along the y-axis.) .container { overflow-x: auto; over...
...p-points-y property. in the first selector, the first snap-point is at 0%, and the interval is set to 100%. in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. ...
... remarks this property requires windows 8 or later. this property has no effect on non-scrollable elements. ...
GetObject - Archive of obsolete content
net explorer versions prior to ie 9 (standards mode). the getobject function returns a reference to an automation object from a file. syntax getobject([pathname] [, class]) parameters pathname full path and name of the file containing the object to retrieve. if pathname is omitted, class is required. class optional class of the object. the class argument uses the syntax appname.objec
type and has these parts: appname name of the application providing the object. objec
type type or class of object to create. remarks the getobject function is not supported in internet explorer 9 standards mode, internet explorer 10 standards mode, internet explorer 11 standards mode, and windows store apps or later. use the getobject function to access an automation object from a file. ass...
... from a file. assign the object returned by getobject to the object variable. for example: var cadobject; cadobject = getobject("c:\\cad\\schema.cad"); when this code is executed, the application associated with the specified pathname is started, and the object in the specified file is activated. if pathname is a zero-length string (""), getobject returns a new object instance of the specified
type. if the pathnameargument is omitted, getobject returns a currently active object of the specified
type. if no object of the specified
type exists, an error occurs. some applications allow you to activate part of a file. to do so, add an exclamation point (!) to the end of the file name and follow it with a string that identifies the part of the file you want to activate. for information on how t...
...ng code to activate a layer within a drawing called schema.cad: var layerobject = getobject("c:\\cad\\schema.cad!layer3"); if you do not specify the object's class, automation determines which application to start and which object to activate, based on the file name you provide. some files, however, may support more than one class of object. for example, a drawing might support three different
types of objects: an application object, a drawing object, and a toolbar object, all of which are part of the same file. to specify which object in a file you want to activate, use the optional class argument. for example: var myobject; myobject = getobject("c:\\drawings\\sample.drw", "figment.drawing"); in the preceding example, figment is the name of a drawing application and drawing is one of th...
...cts: an application object, a drawing object, and a toolbar object, all of which are part of the same file. to specify which object in a file you want to activate, use the optional class argument. for example: var myobject; myobject = getobject("c:\\drawings\\sample.drw", "figment.drawing"); in the preceding example, figment is the name of a drawing application and drawing is one of the object
types it supports. once an object is activated, you reference it in code using the object variable you defined. in the preceding example, you access properties and methods of the new object using the object variable myobject. for example: myobject.line(9, 90); myobject.inserttext(9, 100, "hello, world."); myobject.saveas("c:\\drawings\\sample.drw"); note: use the getobject function when there is a...
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
jaxer – example application the example ap...
... between the two, it's very possible to produce a single page application which could also include any number of external assets such as a popular third party framework. listing 6 shows the beginning of our application which takes advantage of some of these concepts. ...
... of our application which takes advantage of some of these concepts. ...
...essage varchar(300) not null )" ); jaxer.db.execute( "insert into comments ( name, email, message ) values ( ?, ?, ? )", [ name, email, message ] ); } formprocessor.proxy = true; </script> the first statement which uses the jaxer.db namespace creates a new database table in the default sqlite database if it doesn't already exist. you can see the field names and data
types which make sense for the
type of data that's been added. the second statement is just a simple insert statement using the data obtained from the form. placeholders in the form of '?' are used to match up the argument values with their proper position in the insert statement. xml processing the final feature we'll explore is xml processing with a particular emphasis firs...
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
e done to the plugin code to turn it scriptable again. what's in the mozilla code? a couple of lines have been added to the dom code asking a plugin to return a scriptable iid and a pointer to a scriptable instance object. the old plugin api call npp_getvalue is used to retrieve this information from the plugin. so the plugin project should be aware of two new additions to nppvariable enumeration
type which are now defined in npapi.h as: nppvpluginscriptableinstance = 10, nppvpluginscriptableiid = 11 and two analogous additions to nsplugininstancevariable
type in nsplugindefs.h as: nsplugininstancevariable_scriptableinstance = 10, nsplugininstancevariable_scriptableiid = 11 what's in the plugin code? a unique interface id should be obtained. windows command uuidgen should be suffi...
...ssinfo and implement its methods to be able to request all necessary privileges from the mozilla security manager (see example 2). two new cases for the above mentioned new variables should be added to the plugin implementation of npp_getvalue (see example 3). how to call plugin native methods the following html code will do the job:</p> this should be changed, we shouldn't advocate embed <embed
type="application/plugin-mime
type"> <script language="javascript"> var embed = document.embeds[0]; embed.nativemethod(); </script> how to build and install having the built mozilla tree is probably not necessary, but building the plugin with a scriptable instance interface will require mozilla headers and the xpcom compatible idl compiler -- xpidl.exe. ms devstudio midl must not be used. (let's assum...
... // notice that we expose our claim to implement nsiclassinfo. ns_impl_isupports2(nsscriptablepeer, nsitestplugin, nsiclassinfo) // the following method will be callable from javascript ns_imethodimp nsscriptablepeer::nativemethod() { return ns_ok; } example 3. ...
...that we expose our claim to implement nsiclassinfo. ns_impl_isupports2(nsscriptablepeer, nsitestplugin, nsiclassinfo) // the following method will be callable from javascript ns_imethodimp nsscriptablepeer::nativemethod() { return ns_ok; } example 3. ...
Building up a basic demo with Three.js - Game development
eed much. you should: make sure you are using a modern browser with good webgl support, such as the latest firefox or chrome. create a directory to store your experiments in. save a copy of the latest minimized three.js library inside your directory. open the three.js documentation in a separate tab — it is useful to refer to. ...
...iew our handiwork — imagine a movie set without any cameras. the following lines put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); add the above lines to your code, below those previously added. there are other
types of camera available (cube, orthographic), but the simplest is perspective. to initialize it, we have to set its field of view and aspect ratio: the former is used to set how much is seen, and the latter is important for the objects on the screen to have the right proportions when rendered, and not look stretched. let's explain values we are setting for the code above: the value we set for the...
...object. we're using a lambert material, similar to phong, but should be less glossy. again it's black, for now. we're moving the object to the right, so it's not in the same position as the box, or torus. as mentioned above, the new objects currently just look black. to have both, the phong and lambert materials properly visible, we need to introduce a source of light. lights there are various
types of light sources available in three.js. the most basic is pointlight, which works like a flashlight, shining a spotlight in a defined direction. add the following lines, below your shape definitions: var light = new three.pointlight(0xffffff); light.position.set(-10, 15, 50); scene.add(light); we define a white point of light, set its position a little away from the center of the scene, so it...
... shape definitions: var light = new three.pointlight(0xffffff); light.position.set(-10, 15, 50); scene.add(light); we define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. now everything works as it should, all three shapes are visible. you should check the documentation for other
types of lights, like ambient, directional, hemisphere, or spot. experiment placing them on our scene, to see how they affect it. this looks a little boring though. in a game, something is usually happening. we might see animations and such. so let's try breathing a little life into these shapes, by animating them! animation we already used rotation, to adjust the position of the cube. we can als...
Visual-js game engine - Game development
gine creator : nikola lukic 2017 2018 open source visual-js project parts : -2d part : this is javascript game engine (server part node.js / client part js) js framework with windows gui editor and game instance creator. ( + server engine tools + server part of web apps ) -3d part : webgl based on three.js engine -3d part : webgl2 based on glmatrix 2.0 -2d part (new): this is
typescript based game engine (client part ts). with strong connection with webpack physics done with (matter.js) matter ts this part is removed from this project. new link is : https://github.com/zlatnaspirala/visual-ts-game-engine basic licence rules : 1) each file in this project has its own license , be careful , do not violate the basic rules. 2) you are free to use any version of visua...
...h all your game object was created in editor style . or you can use visual-js source editor. visual-js source editor (2d part only) is new and better way .in future visual staff will be better (real time simulator will be implemented).for now this place is good for coding . visual-js works direct with project files , no need for build . add->new game object (form dialog for define
type of new game object ) add->quick code (make your work faster - add usually code blocks) resources - explorer view for images and audios , you can drag or edit also need to execute node build_resources for creating resources object for engine. inserting new code will be always at current line selected intro editor . save on drop menu or better with ctrl+s before testing in browsers. adding ne...
...ates/paths.js templetes are made from visual-js core also . see source code : paths.js see the pen visual js - pencil by visualjs game engine (@zlatnaspirala) on codepen. online demo examples at : https://jsfiddle.net/user/zlatnaspirala/fiddles/ demo slot mashine basic demo at : https://jsfiddle.net/zlatnaspirala/7d0d8v6d/ help about new 2d part - implementation of matter.js based
typescript . i make strong relation with webpack and project . build folder is full vendor nature. html css and resources come from dependency logic taken from source. to make all dependency works in build proccess we need some plugins. features : tile's background draw for images (alias sprite - but for now there's no sprite and frame by frame animation methods). small engine config . some op...
...ct . build folder is full vendor nature. html css and resources come from dependency logic taken from source. to make all dependency works in build proccess we need some plugins. features : tile's background draw for images (alias sprite - but for now there's no sprite and frame by frame animation methods). small engine config . some option in aspect view like npm install ... npm install
typescript npm i clean-webpack-plugin --save-dev npm i html-webpack-plugin --save-dev possible fix : npm i webpack --save-dev npm i extract-text-webpack-plugin --save-dev fix code format : tslint -c tslint.json 'src/**/*.ts' --fix download project link : download link from bitbucket. ...
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
most of the time, a primitive value is represented directly at the lowest level of the language implementation. all primitives are immutable, i.e., they cannot be altered. it is important not to confuse a primitive itself with a variable assigned a primitive value. ...
... most of the time, a primitive value is represented directly at the lowest level of the language implementation. all primitives are immutable, i.e., they cannot be altered. it is important not to confuse a primitive itself with a variable assigned a primitive value. ...
... most of the time, a primitive value is represented directly at the lowest level of the language implementation. all primitives are immutable, i.e., they cannot be altered. it is important not to confuse a primitive itself with a variable assigned a primitive value. ...
...nd undefined, all primitive values have object equivalents that wrap around the primitive values: string for the string primitive. number for the number primitive. bigint for the bigint primitive. boolean for the boolean primitive. symbol for the symbol primitive. the wrapper's valueof() method returns the primitive value. learn more general knowledge introduction to javascript data
types primitive data
type on wikipedia ...
Symbol - MDN Web Docs Glossary: Definitions of Web-related terms
in a javascript runtime environment, a symbol value is created by invoking the function symbol, which dynamically produces an anonymous, unique value. a symbol may be used as an object property. symbol can have an optional description, but for debugging purposes only. a symbol value represents a unique identifier. for example: // here are two symbols with the same description: let sym1 = symbol("sym") let sym2 = symbol("sym") console.log(sym1 === sym2) // returns "false" // symbols are guaranteed to be unique. ...
...ym1 = symbol("sym") let sym2 = symbol("sym") console.log(sym1 === sym2) // returns "false" // symbols are guaranteed to be unique. // even if we create many symbols with the same description, // they are different values. note: if you are familiar with ruby's (or another language) that also has a feature called "symbols", please don’t be misguided. javascript symbols are different. symbol
type is a new feature in ecmascript 2015. there is no ecmascript 5 equivalent for symbol. in some programming languages, the symbol data
type is referred to as an "atom." symbols don't "auto-convert" to strings most values in javascript support implicit conversion to a string. for instance, we can alert almost any value, and it will work. symbols are special. they don’t auto-convert. for example...
... if you really want to show a symbol, we need to call .tostring() on it. ...
...xcept through these reflective methods. ...
HTML: A good basis for accessibility - Learn web development
<a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input
type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffff...
...veloper.mozilla.org">mozilla developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">click me!</button> <button data-message="this is from the second button">click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form</h2> <form> <div> <label for="name">fill in your name:</label> <input
type="text" id="name" name="name"> </div> <div> <label for="age">enter your age:</label> <input
type="text" id="age" name="age"> </div> <div> <label for="mood">choose your mood:</label> <select id="mood" name="mood"> <option>happy</option> <option>sad</option> <option>angry</option> <option>worried</option> </select> </div> </form> this means usin...
...ck here</a>.</p> note: you can find a lot more about link implementation and best practices in our creating hyperlinks article. you can also see some good and bad examples at good-links.html and bad-links.html. form labels are also important for giving you a clue about what you need to enter into each form input. the following seems like a reasonable enough example: fill in your name: <input
type="text" id="name" name="name"> however, this is not so useful for disabled users. there is nothing in the above example to associate the label unambiguously with the form input and make it clear how to fill it in if you cannot see it. if you access this with some screen readers, you may only be given a description along the lines of "edit text." the following is a much better example: <div> <...
...so useful for disabled users. there is nothing in the above example to associate the label unambiguously with the form input and make it clear how to fill it in if you cannot see it. if you access this with some screen readers, you may only be given a description along the lines of "edit text." the following is a much better example: <div> <label for="name">fill in your name:</label> <input
type="text" id="name" name="name"> </div> with code like this, the label will be clearly associated with the input; the description will be more like "fill in your name: edit text." as an added bonus, in most browsers associating a label with a form input means that you can click the label to select or activate the form element. this gives the input a bigger hit area, making it easier to select. ...
HTML: A good basis for accessibility - Learn web development
<a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input
type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffff...
...veloper.mozilla.org">mozilla developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">click me!</button> <button data-message="this is from the second button">click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form</h2> <form> <div> <label for="name">fill in your name:</label> <input
type="text" id="name" name="name"> </div> <div> <label for="age">enter your age:</label> <input
type="text" id="age" name="age"> </div> <div> <label for="mood">choose your mood:</label> <select id="mood" name="mood"> <option>happy</option> <option>sad</option> <option>angry</option> <option>worried</option> </select> </div> </form> this means usin...
...ck here</a>.</p> note: you can find a lot more about link implementation and best practices in our creating hyperlinks article. you can also see some good and bad examples at good-links.html and bad-links.html. form labels are also important for giving you a clue about what you need to enter into each form input. the following seems like a reasonable enough example: fill in your name: <input
type="text" id="name" name="name"> however, this is not so useful for disabled users. there is nothing in the above example to associate the label unambiguously with the form input and make it clear how to fill it in if you cannot see it. if you access this with some screen readers, you may only be given a description along the lines of "edit text." the following is a much better example: <div> <...
...so useful for disabled users. there is nothing in the above example to associate the label unambiguously with the form input and make it clear how to fill it in if you cannot see it. if you access this with some screen readers, you may only be given a description along the lines of "edit text." the following is a much better example: <div> <label for="name">fill in your name:</label> <input
type="text" id="name" name="name"> </div> with code like this, the label will be clearly associated with the input; the description will be more like "fill in your name: edit text." as an added bonus, in most browsers associating a label with a form input means that you can click the label to select or activate the form element. this gives the input a bigger hit area, making it easier to select. ...
Cascade and inheritance - Learn web development
and therefore carry the same specificity, so the last one in the source order wins. specificity specificity is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element. it is basically a measure of how specific a selector's selection will be: an element selector is less specific — it will select all elements of that
type that appear on a page — so will get a lower score. a class selector is more specific — it will select only the elements on a page that have a specific class attribute value — so will get a higher score. example time! below we again have two rules that could apply to the h1. the below h1 ends up being colored red — the class selector gives its rule a higher specificity, and so it will b...
...ge only some of the properties and values. the values defined initially are applied to all headings, then the more specific values are applied to the headings with the classes. let's now have a look at how the browser will calculate specificity. we already know that an element selector has low specificity and can be overwritten by a class. essentially a value in points is awarded to different
types of selectors, and adding these up gives you the weight of that particular selector, which can then be assessed against other potential matches. the amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns: thousands: score one in this column if the declara...
...ity of 23 vs. 24 — it has one fewer element selectors in the chain. selector seven, however, beats both five and six — it has the same number of sub-selectors in the chain as five, but an element has been swapped out for a class selector. so the winning specificity is 33 vs. 23 and 24. note: this has only been an approximate example for ease of understanding. in actuality, each selector
type has its own level of specificity that cannot be overwritten by selectors with a lower specificity level. for example, a million class selectors combined would not be able to overwrite the rules of one id selector. a more accurate way to evaluate specificity would be to score the specificity levels individually starting from highest and moving on to lowest when necessary. only when there is a tie...
...ssional web developers sometimes find tricky. we'd advise that you return to this article a few times as you continue through the course, and keep thinking about it. refer back here if you start to come across strange issues with styles not applying as expected. it could be a specificity issue. ...
Flexbox - Learn web development
n this case, we are giving each <article> element the same value (a value of 1), which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. it is relative to other flex items, meaning that giving each flex item a value of 400000 would have exactly the same effect. now add the following rule below the previous one: article:nth-of-
type(3) { flex: 2; } now when you refresh, you'll see that the third <article> takes up twice as much of the available width as the other two — there are now four proportion units available in total (since 1 + 1 + 2 = 4). the first two flex items have one unit each so they take 1/4 of the available space each. the third one has two units, so it takes up 2/4 of the available space (or one-half). ...
...ur proportion units available in total (since 1 + 1 + 2 = 4). the first two flex items have one unit each so they take 1/4 of the available space each. the third one has two units, so it takes up 2/4 of the available space (or one-half). you can also specify a minimum size value inside the flex value. try updating your existing article rules like so: article { flex: 1 200px; } article:nth-of-
type(3) { flex: 2 200px; } this basically states "each flex item will first be given 200px of the available space. after that, the rest of the available space will be shared out according to the proportion units." try refreshing and you'll see a difference in how the space is shared out. the real value of flexbox can be seen in its flexibility/responsiveness — if you resize the browser window,...
...st of all, we set the children of the <section> to be laid out as flexible boxes. section { display: flex; } next, we set some flex values on the <article>s themselves. take special note of the 2nd rule here — we are setting the third <article> to have its children laid out like flex items too, but this time we are laying them out like a column. article { flex: 1 200px; } article:nth-of-
type(3) { flex: 3 200px; display: flex; flex-flow: column; } next, we select the first <div>. we first use flex:1 100px; to effectively give it a minimum height of 100px, then we set its children (the <button> elements) to also be laid out like flex items. here we lay them out in a wrapping row, and align them in the center of the available space like we did in the individual button example we...
...ay: flex; flex-flow: column; } next, we select the first <div>. we first use flex:1 100px; to effectively give it a minimum height of 100px, then we set its children (the <button> elements) to also be laid out like flex items. here we lay them out in a wrapping row, and align them in the center of the available space like we did in the individual button example we saw earlier. article:nth-of-
type(3) div:first-child { flex:1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; } finally, we set some sizing on the button, but more interestingly we give it a flex value of 1 auto. this has a very interesting effect, which you'll see if you try resizing your browser window width. the buttons will take up as much space as they can and sit as ...
Introduction to CSS layout - Learn web development
is very important, as you can then work with the way things are laid out by default rather than fighting against it. the methods that can change how elements are laid out in css are as follows: the display property — standard values such as block, inline or inline-block can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see
types of css boxes for more information). we also have entire layout methods that are switched on via specific display values, for example css grid and flexbox, which alter how elements inside the element they are set on are laid out. floats — applying a float value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating...
... are just a small part of the power of grid layout; to find out more see our grid layout article. the rest of this guide covers other layout methods, which are less important for the main layout structures of your page but can still help you achieve specific tasks. by understanding the nature of each layout task, you will soon find that when you look at a particular component of your design the
type of layout best suited to it will often be clear. floats floating an element changes the behavior of that element and the block level elements that follow it in normal flow. the element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item. the float property has four possible values: left — floats the element to the left. r...
...er location. positioning isn’t a method for creating your main page layouts, it is more about managing and fine-tuning the position of specific items on the page. there are however useful techniques for certain layout patterns that rely on the position property. understanding positioning also helps in understanding normal flow, and what it is to move an item out of normal flow. there are five
types of positioning you should know about: static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here". relative positioning allows you to modify an element's position on the page, moving it relative to its position in normal flow — including making it overlap other elements on...
...d browsers without support for flexbox or grid. let's look at an example. first, some simple markup that creates an html form. each input element has a label, and we've also included a caption inside a paragraph. each label/input pair is wrapped in a <div>, for layout purposes. <form> <p>first of all, tell us your name and age.</p> <div> <label for="fname">first name:</label> <input
type="text" id="fname"> </div> <div> <label for="lname">last name:</label> <input
type="text" id="lname"> </div> <div> <label for="age">age:</label> <input
type="text" id="age"> </div> </form> now, the css for our example. most of the css is fairly ordinary, except for the uses of the display property. the <form>, <div>s, and <label>s and <input>s have been told to display l...
Styling links - Learn web development
tarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { }</textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset"
type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution"
type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = docu...
...hover { background: orange; } a:active { background: red; color: white; } this gives us the following result: let's explain what's going on here, focusing on the most interesting parts: our second rule removes the default padding from the <ul> element, and sets its width to span 100% of the outer container (the <body>, in this case). <li> elements are normally block by default (see
types of css boxes for a refresher), meaning that they will sit on their own lines. in this case, we are creating a horizontal list of links, so in the third rule we set the display property to inline, which causes the list items to sit on the same line as one another — they now behave like inline elements. the fourth rule — which styles the <a> element — is the most complicated here; let's go ...
...rmation about this problem (and solutions) at fighting the space between inline block elements. test your skills! you've reached the end of this article, and already did some skill testing in our active learning sections, but can you remember the most important information going forward? you can find an assessment to verify that you've retained this information at the end of the module — see
typesetting a community school homepage. this assessment tests all the knowledge discussed in this module, so you might want to read the next article before moving on to it. summary we hope this article has provided you with all you'll need to know about links — for now! the final article in our styling text module details how to use custom fonts on your websites, or web fonts as they are better ...
...efore moving on to it. ...
Example - Learn web development
this is the example code for the article your first html form. ...
... this is the example code for the article your first html form. ...
.../my-handling-form-page" method="post"> <div> <label for="name">name:</label> <input
type="text" id="name" name="user_name"> </div> <div> <label for="mail">e-mail:</label> <input
type="email" id="mail" name="user_email"> </div> <div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button
type="submit">send your message</button> </div> </form> css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top: 1em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-blo...
...width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to
type some text */ height: 5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra magin represent the same space as the space between the labels and...
Responsive images - Learn web development
have high resolution screens that need larger images than you might expect to display nicely. this is essentially the same problem, but in a slightly different context. you might think that vector images would solve these problems, and they do to a certain degree — they are small in file size and scale well, and you should use them wherever possible. however, they aren't suitable for all image
types. vector images are great for simple graphics, patterns, interface elements, etc., but it starts to get very complex to create a vector-based image with the kind of detail that you'd find in say, a photo. raster image formats such as jpegs are more suited to the kind of images we see in the above example. this kind of problem didn't exist when the web first existed, in the early to mid 90s — b...
...ave been loaded, and you would load the small image as well, which is even worse in responsive image terms. use modern image formats boldly there are several exciting new image formats (such as webp and jpeg-2000) that can maintain a low file size and high quality at the same time. however, browser support is spotty. <picture> lets us continue catering to older browsers. you can supply mime
types inside
type attributes so the browser can immediately reject unsupported file
types: <picture> <source
type="image/svg+xml" srcset="pyramid.svg"> <source
type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture> do not use the media attribute, unless you also need art direction. in a <source> element, you c...
... use comma-separated lists with srcset and sizes, as needed. active learning: implementing your own responsive images for this active learning, we're expecting you to be brave and go it alone ... mostly. ...
... use comma-separated lists with srcset and sizes, as needed. active learning: implementing your own responsive images for this active learning, we're expecting you to be brave and go it alone ... mostly. we want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset. ...
Choosing the right approach - Learn web development
or flexible. use only when necessary. useful for... ...
..."callbac...
..."callback hell"...
...e delayed operation repeating operation multiple sequential operations multiple simultaneous operations no no no yes code example the following example fetches several resources from the server, and uses promise.all() to wait for all of them to be available before then displaying all of them — see it live, and see the source code: function fetchanddecode(url,
type) { // returning the top level promise, so the result of the entire chain is returned out of the function return fetch(url).then(response => { // depending on what
type of file is being fetched, use the relevant function to decode its contents if(
type === 'blob') { return response.blob(); } else if(
type === 'text') { return response.text(); } }) .catch(e => { ...
Manipulating documents - Learn web development
ers a page, and developers like you can manipulate the dom with javascript after the page has been rendered. we have created a simple example page at dom-example.html (see it live also). try opening this up in your browser — it is a very simple page containing a <section> element inside which you can find an image, and a paragraph with a link inside. ...
...https://www.mozilla.org/">mozilla homepage</a></p> </section> </body> </html> the dom on the other hand looks like this: note: this dom tree diagram was created using ian hickson's live dom viewer. you can see here that each element and bit of text in the document has its own entry in the tree — each one is called a node. you will also encounter various terms used to describe the
type of node, and their position in the tree in relation to one another: element node: an element, as it exists in the dom. root node: the top node in the tree, which in the case of html is always the html node (other markup vocabularies like svg and custom xml will have different root elements). child node: a node directly inside another node. for example, img is a child of section in the above ...
...ailable for grabbing element references, such as: document.getelementbyid(), which selects an element with a given id attribute value, e.g. <p id="myid">my paragraph</p>. the id is passed to the function as a parameter, i.e. const elementref = document.getelementbyid('myid'). document.getelementsbytagname(), which returns an array-like object containing all the elements on the page of a given
type, for example <p>s, <a>s, etc. the element
type is passed to the function as a parameter, i.e. const elementrefarray = document.getelementsbytagname('p'). these two work in older browsers than the modern methods like queryselector(), but are not as convenient. have a look and see what others you can find! creating and placing new nodes the above has given you a little taste of what you can do...
... (see it live also). active learning: getting useful information from the window object so far we've only really looked at using node and document features to manipulate documents, but there is no reason why you can't get data from other sources and use it in your ui. you just have to make sure your data is in the right format; javascript makes it easier than many other languages, being weakly
typed — for example numbers will convert to strings automatically when you want to print them to the screen. in this example we will solve a common problem — making sure your application is as big as the window it is viewed in, whatever size it is. this is often useful in situations like games, where you want to use as much of the screen area as possible to play the game in. to start with, make ...
Adding features to our bouncing balls demo - Learn web development
s, which is used to track whether the balls exist in the program (have not been eaten by the evil circle). this should be a boolean (true/false). the ball() constructor should inherit the x, y, velx, vely, and exists properties from the shape() constructor. it should also define a color and a size property, like the original ball() constructor did. remember to set the ball() constructor's proto
type and constructor appropriately. the ball draw(), update(), and collisiondetect() method definitions should be able to stay exactly the same as they were before. you also need to add a new parameter to the new ball() ( ... ) constructor call — the exists parameter should be the 5th parameter, and should be given a value of true. at this point, try reloading the code — it should work just th...
... the evilcircle() constructor should inherit x, y, velx, vely, and exists from shape(), but velx and vely should always equal 20. you should do this something like shape.call(this, x, y, 20, 20, exists); it should also define its own properties, as follows: color — 'white' size — 10 again, remember to define your inherited properties as parameters in the constructor, and set the proto
type and constructor properties correctly. defining evilcircle()'s methods evilcircle() should have four methods, as described below. draw() this method has the same purpose as ball()'s draw() method: it draws the object instance on the canvas. it will work in a very similar way, so you can start by copying the ball.proto
type.draw definition. you should then make the following changes: we want ...
... see the evil circle a bit more easily. this can be achieved by setting a value for linewidth somewhere after the beginpath() call (3 will do). checkbounds() this method will do the same thing as the first part of ball()'s update() function — look to see whether the evil circle is going to go off the edge of the screen, and stop it from doing so. again, you can mostly just copy the ball.proto
type.update definition, but there are a few changes you should make: get rid of the last two lines — we don't want to automatically update the evil circle's position on every frame, 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 circ...
...ine shareable editor (as mentioned in step 1 above). ...
Multimedia: Images - Learn web development
rrect sizes? the most optimal format the optimal file format typically depends on the character of the image. the less colors an image has and the less photographic it is, the better it is to use the svg format. this requires the source to be available as in a vector graphic format. should such an image only exist as a bitmap, then png would be the fallback format to chose. examples for these
types of motifs are logos, illustrations, charts or icons (note: svgs are far better than icon fonts!). both formats support transparency. pngs can be saved with three different output combinations: 24 bit color + 8 bit transparency — offer full color acurracy and smooth transparencies at the expense of size. you probably want to avoid this combination in favor for webp (see below). 8 bit color...
...(heif) or av1 still image file format (avif). given the narrow support for jpeg-xr and jpeg2000, and also taking decode costs into the equation, the only serious contender for jpeg today is webp. which is why you could consider offering your images in that flavor, too, for the browsers that support it. this can be done via the <picture> element with the help of a <source> element equipped with a
type attribute. if all of this sounds a bit complicated or feels like too much work for your team then there is also online services that you can use as image cdns that will automate the serving of the correct image format on-the-fly, according to the
type of device or browser requesting the image. the biggest ones are cloudinary and image engine. and finally, should you want to include animated ima...
...t image format on-the-fly, according to the
type of device or browser requesting the image. the biggest ones are cloudinary and image engine. and finally, should you want to include animated images into your page, then know that safari allows using video files within <img> and <picture> elements. these also allow you to add in an animated webp for all other modern browsers. <picture> <source
type="video/mp4" src="giphy.mp4"> <source
type="image/webp" src="giphy.webp"> <img src="giphy.gif"> </picture> serving the optimal size in image delivery the "one size fits all" approach will not yield the best results, meaning that for smaller screens you would want to serve images with smaller resolution and vis-versa for larger screens. on top of that you'd also want to serve higher resolut...
...wser can reserve space for them in the layout. for any background images, it's important you set a background-color value so any content overlaid is still readable before the image has downloaded. conclusion in this section we took a look at image optimization. you now have a general understanding of how to optimize half of the average web sites average bandwidth total. this is just one of the
types of media consuming users bandwidth and slowing down page load. let's take a look at video optimization, tackling the next 20% of bandwidth consumption. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best ...
Multimedia: video - Learn web development
optimizing video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the various video formats, their impact on performance, and how to reduce video impact on overall page load time while serving the smallest video file size based on each browsers file
type support. why optimize your multimedia? for the average website, 25% of bandwidth comes from video. optimizing video has the potential for very large bandwidth savings that translate into better website performance. optimizing video delivery it's best to compress all video, optimize <source> order, set autoplay, remove audio from muted video, optimize video preload, and consider streamin...
...tion below), that encode, decode, convert, and perform other optimization functions. optimize <source> order order video source from smallest to largest. for example, given video compressions in three different formats at 10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" controls="controls"> <!-- webm: 10 mb --> <source src="video.webm"
type="video/webm" /> <!-- mpeg-4/h.264: 12 mb --> <source src="video.mp4"
type="video/mp4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv"
type="video/ogv" /> </video> the browser downloads the first format it understands. the goal is to offer smaller versions ahead of larger versions. with the smallest version, make sure that the most compressed video still looks good. there are some c...
...st version, make sure that the most compressed video still looks good. there are some compression algorithms that can make video look (bad) like an animated gif. while a 128 kb video may seem like it could provide a better user experience than a 10 mb download, a grainy gif-like video may reflect poorly on the brand or project. see caniuse.com for current browser support of video and other media
types. video autoplay to ensure that a looping background video autoplays, you must add several attributes to the video tag: autoplay, muted, and playsinline. <video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp4"> while the loop and autoplay make sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers. playsinline is ...
...g video, the muted attribute is required for autoplay in mobile browsers. playsinline is required for mobile safari, allowing videos to play without forcing fullscreen mode. remove audio from muted hero videos for hero-video or other video without audio, removing audio is smart. <video autoplay="" loop="" muted="true" playsinline="" id="hero-video"> <source src="banner_video.webm"
type='video/webm; codecs="vp8, vorbis"'> <source src="web_banner.mp4"
type="video/mp4"> </video> this hero-video code (above) is common to conference websites and corporate home pages. it includes a video that is auto-playing, looping, and muted. there are no controls, so there is no way to hear audio. the audio is often empty, but still present, and still using bandwidth. there is no reason to ser...
Introduction to the server side - Learn web development
pt). the server-side code has full access to the server operating system and the developer can choose what programming language (and specific version) they wish to use. developers typically write their code using web frameworks. web frameworks are collections of functions, objects, rules and other code constructs designed to solve common problems, speed up development, and simplify the different
types of tasks faced in a particular domain. again, while both client and server-side code use frameworks, the domains are very different, and hence so are the frameworks. client-side web frameworks simplify layout and presentation tasks while server-side web frameworks provide a lot of “common” web server functionality that you might otherwise have to implement yourself (e.g. support for session...
...e is some overlap! efficient storage and delivery of information imagine how many products are available on amazon, and imagine how many posts have been written on facebook? creating a separate static page for each product or post would be completely impractical. server-side programming allows us to instead store the information in a database and dynamically construct and return html and other
types of files (e.g. pdfs, images, etc.). it is also possible to simply return data (json, xml, etc.) for rendering by appropriate client-side web frameworks (this reduces the processing burden on the server and the amount of data that needs to be sent). the server is not limited to sending information from databases, and might alternatively return the result of software tools, or data from communica...
... to simply return data (json, xml, etc.) for rendering by appropriate client-side web frameworks (this reduces the processing burden on the server and the amount of data that needs to be sent). the server is not limited to sending information from databases, and might alternatively return the result of software tools, or data from communications services. the content can even be targeted for the
type of client device that is receiving it. because the information is in a database, it 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 ...
...s include: facebook and twitter send emails and sms messages to notify you of new communications. amazon regularly sends product e-mails that suggest products similar to those already bought or viewed that you might be interested in. a web server might send warning messages to site administrators alerting them to low memory on the server, or suspicious user activity. note: the most common
type of notification is a "confirmation of registration". pick almost any large site that you are interested in (google, amazon, instagram, etc.) and create a new account using your email address. you will shortly receive an email confirming your registration, or requiring acknowledgment to activate your account. data analysis a website may collect a lot of data about users: what they search for, w...
Website security - Learn web development
er from the site, the code is trusted and can do things like send the user's site authorization cookie to the attacker. when the attacker has the cookie, they can log into a site as though they were the user and do anything the user can, such as access their credit card details, see contact details, or change passwords. note: xss vulnerabilities have been historically more common than any other
type of security threat. the xss vulnerabilities are divided into reflected and persistent, based on how the site returns the injected scripts to a browser. a reflected xss vulnerability occurs when user content that is passed to the server is returned immediately and unmodified for display in the browser. any scripts in the original user content will be run when the new page is loaded. for exa...
... injection sql injection vulnerabilities enable malicious users to execute arbitrary sql code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. a successful injection attack might spoof identities, create new identities with administration rights, access all data on the server, or destroy/modify the data to make it unusable. sql injection
types include error-based sql injection, sql injection based on boolean errors, and time-based sql injection. this vulnerability is present if user input that is passed to an underlying sql statement can change the meaning of the statement. for example, the following code is intended to list all users with a particular name (username) that has been supplied from an html form: statement = "select * ...
...often take care of the character escaping for you. django, for example, ensures that any user-data passed to querysets (model queries) is escaped. note: this section draws heavily on the information in wikipedia here. cross-site request forgery (csrf) csrf attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. this
type of attack is best explained by example. john is a malicious user who knows that a particular site allows logged-in users to send money to a specified account using an http post request that includes the account name and an amount of money. john constructs a form that includes his bank details and an amount of money as hidden fields, and emails it to other site users (with the submit button disgui...
...e result is that any user who clicks the submit button while they are logged in to the trading site will make the transaction. john gets rich. note: the trick here is that john doesn't need to have access to the user's cookies (or access credentials). the browser of the user stores this information and automatically includes it in all requests to the associated server. one way to prevent this
type of attack is for the server to require that post requests include a user-specific site-generated secret. the secret would be supplied by the server when sending the web form used to make transfers. this approach prevents john from creating his own form, because he would have to know the secret that the server is providing for the user. even if he found out the secret and created a form for a part...
Getting started with Ember - Learn web development
ls, you'll notice ember's opinions — such as strict naming conventions of component files. how does ember relate to vanilla javascript? ember is built on javascript technologies and is a thin layer on top of traditional object-oriented programming, while still allowing developers to utilize functional programming techniques. ember makes use of two main syntaxes: javascript (or optionally,
typescript) ember's own templating language, which is loosely based on handlebars. the templating language is used to make build and runtime optimizations that otherwise wouldn't be possible. most importantly, it is a superset of html — meaning that anyone who knows html can make meaningful contributions to any ember project with minimal fear of breaking code. designers and other non-developers c...
...h to mitigating the slow i/o of dom changes). for more information on the technical aspects of the glimmer vm, the github repository has some documentation — specifically, references and validators may be of interest. everything else in ember is just javascript. in particular, javascript classes. this is where most of the "framework" parts come into play, as there are superclasses, where each
type of thing has a different purpose and different expected location within your project. here is a demonstration the impact ember has on the javascript that is in typical projects: gavin demonstrates how < 20% of the js written is specific to ember. getting started the rest of the ember material you'll find here consists of a multi-part tutorial, in which we'll make a version of the classic to...
...e tutorial, we'll focus on adding code to our application to fix some of todomvc's biggest faults. installing the ember tooling ember uses a command-line interface (cli) tool for building and scaffolding parts of your application. you'll need node and npm installed before you can install ember-cli. go here to find out how to install node and npm, if you haven't already got them. now
type the following into your terminal to install ember-cli: npm install -g ember-cli this tool provides the ember program in your terminal, which is used to create, build, develop, test, and scaffold your application (run ember --help for a full list of commands and their options). to create a brand new application,
type the following in your terminal. this creates a new directory inside t...
... vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores
typescript support in svelte deployment and next steps ...
Adding a new todo form: Vue events, methods, and models - Learn web development
a <script> tag like before: <template></template> <script> export default {}; </script> let's add in an html form that lets you enter a new todo item and submit it into the app. we need a <form> with a <label>, an <input>, and a <button>. update your template as follows: <template> <form> <label for="new-todo-input"> what needs to be done? </label> <input
type="text" id="new-todo-input" name="new-todo" autocomplete="off" /> <button
type="submit"> add </button> </form> </template> so we now have a form component into which we can enter the title of a new todo item (which will become a label for the corresponding todoitem when it is eventually rendered). let's load this component into our app. go back to app...
... onsubmit() { console.log("form submitted"); } }, data() { return { label: "" }; } }; we now need some way to attach the value of the new-todo-input <input> field to the label field. vue has a special directive for this: v-model. v-model binds to the data property you set on it and keeps it in sync with the <input>. ...
...or this: v-model. v-model binds to the data property you set on it and keeps it in sync with the <input>. v-model works across all the various input
types, including check boxes, radios, and select inputs. to use v-model, you add an attribute with the structure v-model="variable" to the <input>. so in our case, we would add it to our new-todo-input field as seen below. do this now: <input
type="text" id="new-todo-input" name="new-todo" autocomplete="off" v-model="label" /> note: you can also sync data with <input> values through a combination of 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. ...
... vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores
typescript support in svelte deployment and next steps ...
Handling common JavaScript problems - Learn web development
ode editor has a jshint plugin available. to install it: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on windows/linux) and choose the install option in the left-hand menu. in the search packages text field,
type "jslint" and press enter/return to search for linting-related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters rely on it to work. after that, install the linter-jshint plugin. after the packages have finished installing, try loading up a javascript file: you'll see any issues highlighted with green (for warni...
...it more setup and configuration than jshint, but it is more powerful too. browser developer tools browser developer tools have many useful features for helping to debug javascript. for a start, the javascript console will report errors in your code. make a local copy of our broken-ajax.html example (see the source code also). if you look at the console, you'll see the error message "uncaught
typeerror: can't access property "length", heroes is undefined", and the referenced line number is 49. if we look at the source code, the relevant code section is this: function showheroes(jsonobj) { let heroes = jsonobj['members']; for(i = 0; i < heroes.length; i++) { ... so the code falls over as soon as we try to access a property of jsonobj (which as you might expect, is supposed to be a ...
...ict mode at the top of your javascript code causes it to be parsed with a stricter set of rules, meaning that more warnings and errors will be thrown, and some things will be disallowed that would otherwise be acceptable. it is arguably a good idea to use strict mode, as it makes for better, more efficient code, however it has limited/patchy support across browsers (see strict mode in browsers).
typed arrays allow javascript code to access and manipulate raw binary data, which is necessary as browser apis for example start to manipulate streams of raw video and audio data. these are available in ie10 and above, and all modern browsers. there are also many new apis appearing in recent browsers, which don't work in older browsers, for example: indexeddb api, web storage api, and others for...
... the wild because other people might find them useful too. javascript libraries tend to come in a few main varieties (some libraries will serve more than one of these purposes): utility libraries: provide a bunch of functions to make mundane tasks easier and less boring to manage. jquery for example provides its own fully-featured selectors and dom manipuation libraries, to allow css-selector
type selecting of elements in javascript and easier dom building. it is not so important now we have modern features like document.queryselector()/document.queryselectorall()/node methods available across browsers, but it can still be useful when older browsers need supporting. convenience libraries: make difficult things easier to do. for example, the webgl api is really complex and challenging to u...
Package management basics - Learn web development
ut you can call it whatever you like: mkdir parcel-experiment cd parcel-experiment next, let's initialise our app as an npm package, which creates a config file — package.json — that allows us to save our configuration details in case we want to recreate this environment later on, or even publish the package to the npm registry (although this is somewhat beyond the scope of this article).
type the following command, making sure you are inside the parcel-experiment directory: npm init you will now be asked some questions; npm will then create a default package.json file based on the answers: name: a name to identify the app. just press return to accept the default parcel-experiment. version: the starting version number for the app: again, just press return to accept the default 1.
...-experiment directory: npm init you will now be asked some questions; npm will then create a default package.json file based on the answers: name: a name to identify the app. just press return to accept the default parcel-experiment. version: the starting version 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. lic...
...e setup. parcel expects an index.html and an index.js file to work with, but otherwise it is very unopinionated about how you structure your project. other tools can be very different, but at least parcel makes it easy for our initial experiment. so now we need to add an index.html file to our working directory. create index.html in your test directory, and give it the following contents: <!doc
type html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <script src="./index.js"></script> </body> </html> next, we need to add an index.js file in the same directory as index.html. for now index.js can be empty; it just needs to exist. create this now. having fun with parcel now we’ll run our newly installed parcel tool. in your...
....js can be empty; it just needs to exist. create this now. having fun with parcel now we’ll run our newly installed parcel tool. in your terminal, run the following command: parcel index.html you should see something like this printed to your terminal: server running at http://localhost:1234 ⨠built in 193ms. note: if you have trouble with the terminal returning a "command not found"
type error, try running the above command with the npx utility, i.e. npx parcel index.html. now we're ready to benefit from the full javascript package ecosystem. for a start, there is now a local web server running at http://localhost:1234. go there now and you’ll not see anything for now, but what is cool is that when you do make changes to your app, parcel will rebuild it and refresh the server...
Accessibility/LiveRegionDevGuide
n to the standard priority queue methods, additional methods will need to be implemented that purge the queue based on one of the priority criterion. the "purge by timestamp" method will be used to remove old messages that are no longer deemed relevant while "purge by politeness" is used to satisfy the aria live politeness specification. the later method will be explained in detail below. event
types the table for web page mutation event
types lists the two major event
types associated with live regions, namely text-changed and object changed events. both will be discussed in detail below. object changed the object changed events are slightly different in at-spi and iaccessible2. in at-spi, the object changed event are called object:children-changed events because the event is triggered...
...ject. the actual object that change can then be found in the event.any_data field. in iaccessible2, the event_object_* events are triggered on the actual object that changed. the object changed events can be further subdivided into object addition and removal events. in at-spi, this is accomplished by appending ":add" or ":remove" to the event string. in iaccessible2, there are two separate event
types, namely event_object_show and event_object_hide. text changed the text changed events are quite similar in at-spi and iaccessible2 with both having an insert and delete or removal events. the text changed event
type in at-spi has a similar scheme as the object:children-changed events. in this case, the root event string is object:text-changed with ":delete" and ":insert" being appended to com...
...the text associated with an at-spi text changed event is directly in the event object. ...
...the text associated with an at-spi text changed event is directly in the event object. ...
Embedding API for Accessibility
for each preference named "browser.accept.*", there is also an "alert.audio.*" preference, to allow conf...
...the audio file could be a clip of a human voice saying "you've got video" or even a simple beep. ...
...the audio file could be a clip of a human voice saying "you've got video" or even a simple beep. ...
..."you've got video" or even a simple beep. how we expose this through the user interface is another matter. accepting special content on an instance basis after being notified of special content, the user needs to be able to select specific unloaded content for loading. one way of doing this is to build up the nsiwebbrowseraccessible interface, so that there is a method to force loading each
type of content just for the current page in the current session. open issue: accessibility settings per url a powerful possibility is that we design an interface for setting certain preferences based on the url. if we can find a clean way to present it to the user, this would be extremely useful. for example, settings per url would allow a user to accept scripts from their known benign web pages,...
Software accessibility: Where are we today?
followed by variants 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 pe...
...ond with small, bite sized pieces of information that are as short and to the point as possible. ideally, intelligent decisions are made, so the user does not have to wade through as much non-relevant data. alternative ways to command the computer and enter data another problem is how people with disabilities get information into the computer. if you're physically disabled, you may not be able to
type on a regular keyboard or use a mouse. here are some of the alternative ways physically disabled people enter information: sticky keys make entering key combinations easy. for example to make a capital letter, first press the shift key, release it, then press the letter to be capitalized. the sticky key technique is utilized by people who have only one usable hand, or who have no us...
...d or use a mouse. here are some of the alternative ways physically disabled people enter information: sticky keys make entering key combinations easy. for example to make a capital letter, first press the shift key, release it, then press the letter to be capitalized. the sticky key technique is utilized by people who have only one usable hand, or who have no use of their hands and
type using a stick in their mouth. single switch technologies enable persons with severe physical disabilities. some, like stephen hawking, enter information by choosing among lists of options. they might press a switch down to begin moving a highlight bar through the list, and release the switch when the desired option is highlighted. special keyboards exist to make data e...
...bilities, and the importance of their work cannot be diminished. however, all these solutions fell short of providing people with disabilities with a working environment which was completely accessible and usable by them. this is due to a simple problem of context - the idea that a user's interaction with a computer is governed by the situation in which this interaction takes place. when the user
types something on the keyboard, or when an application displays text or images on the screen, the exact meaning of these actions is determined by the context in which they take place. for example, one application might display the image of a light bulb to indicate that it is processing a task, while another might display it as an indicator that it has completed processing a task. without the applicat...
Creating Sandboxed HTTP Connections
reate an nsiuri var uri = ioservice.newuri(myurlstring, null, null); // get a channel for that nsiuri gchannel = ioservice.newchannelfromuri(uri); // get an listener var listener = new streamlistener(callbackfunc); gchannel.notificationcallbacks = listener; gchannel.asyncopen(listener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener.proto
type = { mdata: "", // nsistreamlistener onstartrequest: function (arequest, acontext) { this.mdata = ""; }, ondataavailable: function (arequest, acontext, astream, asourceoffset, alength) { var scriptableinputstream = components.classes["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); scriptableinputstream.i...
...ointerface; } }; quick note: storing the channel in a global (especially in an extension) isn't a good idea, but was done to make the code easier to read. it would be better to have the entire implementation inside a class and storing the channel as a member: function myclass() { this.mchannel = null; // ... var listener = new this.streamlistener(callbackfunc); // ... } myclass.proto
type.streamlistener = function (acallbackfunc) { return ({ mdata: "", // ... }) } handling cookies when sending a request, cookies that apply to the url are sent with the http request. the http response can also contain cookies, which the browser processes. as of mozilla 1.8.1 (firefox 2), it is now possible to intercept those two cases. for example, this means that if the user was logg...
...eaning that the string should look like this: foo=bar&baz=eek. var inputstream = components.classes["@mozilla.org/io/string-input-stream;1"] .createinstance(components.interfaces.nsistringinputstream); inputstream.setdata(postdata, postdata.length); next, the nsichannel is qied to an nsiuploadchannel. ...
...tream method is called, passing in the nsiinputstream and the
type (in this case, "application/x-www-form-urlencoded"): var uploadchannel = gchannel.queryinterface(components.interfaces.nsiuploadchannel); uploadchannel.setuploadstream(inputstream, "application/x-www-form-urlencoded", -1); due to a bug, calling setuploadstream will reset the nsihttpchannel to be a put request, so now the request
type is set to post: // order important - setuploadstream resets to put httpchannel.requestmethod = "post"; ...
HTTP logging
nd easiest way to do http logging. at any point during while your browser is running, you can turn logging on and off. this allows you to capture only the "interesting" part of the browser's behavior (i.e. your bug), which makes the http log much smaller and easier to analyze. launch the browser and get it into whatever state you need to be in just before your bug occurs. open a new tab and
type in "about:networking" into the url bar. go to the "logging section" adjust the location of the log file if you don't like the default adjust the list of modules that you want to log: this list has the exact same format as the moz_log environment variable (see below). generally the default list is ok, unless a mozilla developer has told you to modify it. click on start logging. reproduce the...
...g 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. 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. press the enter key after each one.: for 64-bit windows: set moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 set moz_log_file=%temp%\log.txt "c:\program files\mozilla firefox\firefox...
...86)\mozilla firefox\firefox.exe" (these instructions assume that you installed firefox to the default location, and that drive c: is your windows startup disk. make the appropriate adjustments if those aren't the case.) reproduce whatever problem it is that you're having. once you've reproduced the problem, exit firefox and look for the generated log files in your temporary directory. you can
type "%temp%" directly into the windows explorer location bar to get there quickly. linux this section offers information on how to capture http logs for firefox running on linux. quit out of firefox if it's running. open a new shell. the commands listed here assume a bash-compatible shell. copy and paste the following commands into the shell one at a time. make sure to hit enter after each li...
...e:5 -moz_log_file=%temp%\log.txt (these instructions assume that you installed firefox to the default location, and that drive c: is your windows startup disk. make the appropriate adjustments if those aren't the case.) reproduce whatever problem it is that you're having. once you've reproduced the problem, exit firefox and look for the generated log files in your temporary directory. you can
type "%temp%" directly into the windows explorer location bar to get there quickly. advanced techniques you can adjust some of the settings listed above to change what http information get logged. limiting the size of the logged data by default there is no limit to the size of log file(s), and they capture the logging throughout the time firefox runs, from start to finish. these files can get qu...
mach
firefox from its c++ source code. requirements mach requires a current version of /mozilla-central/ (or a tree derived from there). mach was committed on 2012-sep-26. mach also requires python 2.7. mach itself is python 3 compliant, but modules used by mach likely are not python 3 compliant - so stick to python 2.7. running from the root of the source tree checkout, you should just be able to
type: $ ./mach if all is well, you should see a help message. of course, in a random dir you just get a cryptic error message to improve the experience. for full help: $ ./mach help try building the tree: $ ./mach build if you get error messages, make sure that you have all of the build requisites for your system. if it works, you can look at compiler warnings: $ ./mach warnings-list try r...
...ach build # let's pretend the mozconfig environment variable isn't set. this will use # the mozconfig from the object directory. $ cd objdir-firefox $ mach build adding mach to your shell's search path if you add mach to your path (by modifying the path environment variable to include your source directory, or by copying mach to a directory in the default path like /usr/local/bin) then you can
type mach anywhere in your source directory or your objdir. mach expands relative paths starting from the current working directory, so you can run commands like mach build . to rebuild just the files in the current directory. for example: $ cd devtools/client $ mach build webconsole # rebuild only the files in the devtools/client/webconsole directory $ mach mochitest webconsole/test # run mochites...
... why even bother with a competing build system in arch 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 ...
... move to a python-based build system but the transition period will be rather long. does mach work with mozconfigs? yes! you use the control file mozconfig like you have always used them. does mach have its own configuration file? yes. you can specify configuration settings in a ~/.mozbuild/machrc file. to see the list of the 4 available settings ( which are: alias , test , try , runprefs )
type : $ ./mach settings should i implement x as a mach command? there are no hard or fast rules. generally speaking, if you have some piece of functionality or action that is useful to multiple people (especially if it results in productivity wins), then you should consider implementing a mach command for it. some other cases where you should consider implementing something as a mach command: ...
mozbrowsererror
e may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsererror event is fired when an error occurs while trying to load content within a browser <iframe>. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property
type description target read only eventtarget the browser iframe
type read only domstring the
type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. detail the detail p...
...me
type read only domstring the
type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. detail the detail property returns an anonymous javascript object with the following properties:
type a domstring representing the
type of error that occurred. ...
...rty returns an anonymous javascript object with the following properties:
type a domstring representing the
type of error that occurred. ...
... are: fatal(crash) unknownprotocolfound filenotfound dnsnotfound connectionfailure netinterrupt nettimeout cspblocked phishingblocked malwareblocked unwantedblocked offline malformeduri redirectloop unknownsocket
type netreset notcached isprinting deniedportaccess proxyresolvefailure proxyconnectfailure contentencodingfailure remotexul unsafecontent
type corruptedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange m...
mozbrowsershowmodalprompt
n implementations and the behavior may change in the future. the mozbrowsershowmodalprompt event is fired when the content of a browser <iframe> calls the window.alert(), window.confirm(), or window.prompt() methods. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property
type description target read only eventtarget the browser iframe
type read only domstring the
type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details...
...it can be alert, confirm, or prompt. title a domstring representing the title of the prompt. message a domstring representing the value passed to the window.alert(), window.confirm(), or window.prompt() methods within the browser <iframe>'s content. returnvalue a domstring representing the return value for the window.prompt() methods. ...
...it can be alert, confirm, or prompt. title a domstring representing the title of the prompt. message a domstring representing the value passed to the window.alert(), window.confirm(), or window.prompt() methods within the browser <iframe>'s content. returnvalue a domstring representing the return value for the window.prompt() methods. ...
...ser <iframe>'s content. returnvalue a domstring representing the return value for the window.prompt() methods. this should be set by the embedder. unblock() a function to be called when the iframe is unblocked. note that if the embedder calls preventdefault() on this event, the iframe is blocked until unblock() is called. obsolete properties of details msg_name a string representing the
type of message. for that event, it's always showmodalprompt. initialvalue a string representing the initial value for the window.prompt() methods. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsershowmodalprompt", function( event ) { console.log("asking for prompt:" + json.stringify(event.detail)); }); related events mozbrowserasyncscroll mozbro...
Addon
presents an add-on that is either installed or can be installed. instances can be created using the many getaddon methods on the addonmanager object. the interface can represent many different kinds of add-ons and as such, some of the methods and properties are considered "required" and others "optional," which means that the optional methods or property may not exist on addon instances for some
types of add-ons. api consumers should take care to verify the existence of these methods or properties before relying on them. overview of required methods void iscompatiblewith(in string appversion, in string platformversion) void findupdates(in updatelistener listener, in integer reason, in string appversion, in string platformversion) overview of optional methods ...
... blockliststate read only integer the current blocklist state of this add-on; see nsiblocklistservice for possible values. creator read only addonauthor the creator of the add-on. ...
...that are waiting to be performed for this add-on. operations are generally deferred when a restart is necessary to accomplish them. permissions read only integer a bitfield holding all the the operations that can be performed on this add-on. ...
...alled), add-on
type (e.g., themes may not be disabled), or add-on state (e.g., an incompatible add-on cannot be enabled). providesupdatessecurely read only boolean true if the add-on has a secure means of updating or cannot be updated at all. scope read only integer indicates what scope the add-on is installed in, per profile, user, system, or application.
type read only string the
type of the add-on. userdisabled boolean true if the user wants this add-on to be disabled. version read only string the version of the add-on. optional properties attribute
type description abouturl read only string the url of the about dialog to display for this add-on. this is passed to window.ope...
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 informati...
...ibleupdate( in updateinfo 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. ...
...ppversion 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. ...
... 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. ...
Download
download object can be created using the downloads.createdownload() function. method overview promise start(); promise launch(); promise showcontainingdirectory(); promise cancel(); promise removepartialdata(); promise whensucceeded(); promise finalize([optional] boolean aremovepartialdata); properties attribute
type description canceled read only boolean indicates that the download has been canceled. this property can become true, then it can be reset to false when a canceled download is restarted. this property becomes true as soon as the cancel() method is called, though the stopped property might remain false until the cancellation request has been processed. temporary files o...
...come true, then it can be reset to false when a canceled download is restarted. this property becomes true as soon as the cancel() method is called, though the stopped property might remain false until the cancellation request has been processed. temporary files or part files may still exist even if they are expected to be deleted, until the stopped property becomes true. content
type string the mime
type of the download, for example "text/plain", or null if the mime
type is not available. this property may be populated or changed while the download is in progress, using the mime
type provided by the server. currentbytes read only number number of bytes currently transferred. this value starts at zero, and may be updated regardless of t...
...aver and the download source. launchwhensucceeded boolean if this property is true when the download finishes successfully, the target file will be opened or executed automatically. launcherpath string local file path of the application to be used to launch the target file, or null if the file should be launched with the default application associated with the content
type property or the extension of the target file. onchange function this can be set to a function that is called after other properties change. warning: this property cannot be used if the download is part of a downloadlist. progress read only number progress percent, from 0 to 100. intermediate values are reported only if hasprogress is tru...
... promise start(); parameters none. promise resolves to undefined when the download has finished successfully and you can access the target file. promise can be rejected with downloaderror if the download failed. launch() opens or executes the target file after download has completed. if the launcherpath property is null, the file will be opened with the default application for the mime
type specified in the content
type property. if the content
type is not available, an attempt will be made to obtain it from the extension of the target file. if the launcherpath property is set, the file will be opened with the specified custom application. promise launch(); parameters none. promise resolves to undefined when the instruction to launch the file has been successfully given to the...
Http.jsm
lements 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 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. ...
...ters. 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. additional xhr configuration it is possible to modify things manually on the xhr object after calling httprequest. httprequest returns an xhr object, which can be used to set additional pa...
...another example of how this can be used can be found here. ...
...to modify things manually on the xhr object after calling httprequest. httprequest returns an xhr object, which can be used to set additional parameters for the request. for example, xhr might be configured to use any custom mime-
type when processing a response regardless of what the server returns. to achieve this, you can obtain an xhr object by calling httprequest and then call its overridemime
type() with a preferred mime-
type. another example of how this can be used can be found here. ...
Deferred
methods resolve() fulfills the associated promise with the specified value, or propagates the state of an existing promise. if the associated promise has already been resolved, either to a value, a rejection, or another promise, this method does nothing. note: this function ...
...ndling. note: this argument should not be a promise. specifying a rejected promise would make the rejection reason equal to the rejected promise itself, and not its rejection reason. backwards and forwards compatible helper this deferred function can be used for backwards and forwards compatibility, due to a change that took place in firefox 30. ...
...te: this argument should not be a promise. specifying a rejected promise would make the rejection reason equal to the rejected promise itself, and not its rejection reason. backwards and forwards compatible helper this deferred function can be used for backwards and forwards compatibility, due to a change that took place in firefox 30. ...
...ards and forwards compatible helper this deferred function can be used for backwards and forwards compatibility, due to a change that took place in firefox 30. function deferred() { // update 062115 for
typeof if (
typeof(promise) != 'undefined' && promise.defer) { //need import of promise.jsm for example: cu.import('resource:/gree/modules/promise.jsm'); return promise.defer(); } else if (
typeof(promiseutils) != 'undefined' && promiseutils.defer) { //need import of promiseutils.jsm for example: cu.import('resource:/gree/modules/promiseutils.jsm'); return promiseutils.defer(); } else { /* a method to resolve the associated promise with the value passed. * if the promise is already settled it does nothing. * * @param {anything} value : this value is used to resolve the p...
Extras
</mrow> </math> </p> css content math.cue *[title] { color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="
type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:r...
...%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attribute
type="xml"
type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</...
...nt id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attribute
type="xml"
type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <mo>(</mo> <mtable> <mtr> <mtd><mi>cos</mi><mi>θ<...
...mi>θ</mi></mtd> </mtr> </mtable> <mo>)</mo> </mrow> </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" attribute
type="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>...
Fonts for Mozilla's MathML engine
tix-italic, stix-bolditalic font files. open the stixmath-regular font file and click the "install the font" button from the window that opens. if desired, you may also do the same for the other font files. note: a deprecated version of stix is preinstalled starting with os x lion and should ensure relatively good mathml rendering. enhancement requests have been submitted to apple to ship open
type math fonts in the default installation. if you have a developer account, these are problems 16841023 and 17021145. linux install the latin modern math, stix or xits fonts, which are generally available from your package manager. on debian/ubuntu/mint and other debian-based distributions, use the following command: sudo apt-get install fonts-lmodern fonts-stix on fedora and other fedora-base...
...tions, consider installing appropriate texlive packages, which includes latin modern math and xits: sudo pacman -s texlive-core texlive-fontsextra # arch linux sudo urpmi texlive-dist texlive-fontsextra # mageia however, you might need to ensure that the fonts are known by your system. ...
...ncludes latin modern math and xits: sudo pacman -s texlive-core texlive-fontsextra # arch linux sudo urpmi texlive-dist texlive-fontsextra # mageia however, you might need to ensure that the fonts are known by your system. typically, use a fontconfig configuration /etc/fonts/conf.avail/09-texlive-fonts.conf that points to the open
type directory of texlive, such as: <?xml version="1.0"?> <!doc
type fontconfig system "fonts.dtd"> <fontconfig> <dir>/your/path/to/texmf-dist/fonts/open
type</dir> </fontconfig> finally, add this configuration file to the system font location list and regenerate the fontconfig cache: ln -sf /etc/fonts/conf.avail/09-texlive-fonts.conf /etc/fonts/conf.d/ fc-cache -sf android you must use the mathml-fonts add-on. note: there is an enhancement request opened ...
...e menu to configure the default font for mathematics. alternatively, you can try the mathml-fontsettings add-on. asana math cambria math dejavu math tex gyre garamond math (under development) latin modern math libertinus math lucida bright math minion math stix math tex gyre bonum math tex gyre pagella math tex gyre schola math tex gyre termes math xits math fira math (sans-serif
typeface, under development) gfs neohellenic math (sans-serif
typeface) using mathematical fonts on web pages starting with gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28), it is now easy to set up the css style (and optional woff fonts) to use on your web site. see the authoring mathml page for details and try the mathml torture test. you can use fontforge and fonttools to edit the ...
Mozilla Web Services Security Model
such file exists, then access will be denied. the allow element if no delegate elements are present or if the web service is in the same directory as the web-script-access.xml file, then the allow elements will be processed. if the file exists but contains no allow elements, then all access will be allowed. if allow elements exist, then the access will be allowed if one of them allows it. the
type attribute the
type attribute of the allow element can take the following values: any means that the allow element applies to all services that use web-scripts-access.xml for security checks. there may be more such such services in the future than there are now. this is the same as not having a
type attribute. load [not implemented!] ability to load documents via xmlhttprequest or similar...
...ces directory to allow access to services only within a certain directory (i.e., the directory where the safe, public, non-authenticated services are), you need one web-scripts-access.xml in the root directory of the server and one in the directory containing the services. ...
...vices are), you need one web-scripts-access.xml in the root directory of the server and one in the directory containing the services. ...
...ne web-scripts-access.xml in the root directory of the server and one in the directory containing the services. ...
Profiling with the Firefox Profiler
ime of that particular frame and not the total of all called instances of that function. you can see the samples in the timeline get darker as you select different functions in the call tree; these are samples that were taken when the selected function was running. "filter stacks" will allow you to search for functions by name. one of the easiest ways to find slowness caused by a page's js is to
type its url into the "filter stacks" box. you can then select corresponding call tree entries and watch the timeline for entries in the content process main thread that get darker as you select call tree entries. tip: if things are blank elsewhere in the ui, you may have text entered into the "filter stacks" box. custom annotations in bug 1334218 an annotation was added to presshell::paint to sh...
...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 ionmonkey (-i),
type inference (-n) and jäegermonkey (-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 */, ["stackwalk", "js...
...es after capturing and viewing a profile you will see "share..." and "save as file..." buttons in the top-right of the window. sharing will upload your profile to profiler.firefox.com and make it public. more information on sharing profiles is available. profiling a hung process it is possible to get profiles from hung firefox processes using lldb1. after the process has hung, attach lldb.
type in2, : p (void)profiler_save_profile_to_file("somepath/profile.txt") clone mstange’s handy profile analysis repository. run: python symbolicate_profile.py somepath/profile.txt to graft symbols into the profile. mstange’s scripts do some fairly clever things to get those symbols – if your firefox was built by mozilla, then it will retrieve the symbols from the mozilla symbol serve...
...is way, the layer tree for a composite can be seen by clicking on a composite in the "frames" section of cleopatra (you may need to a sub-range of samples to make individual composites large enough to be clicked). this will activate the "layertree" tab: in this screenshot, composite #143 has been selected. the layer tree structure can be seen in the left panel. it contains, for each layer, the
type of the layer, and various metrics about the layer, such as the visible region and any transforms. in the right panel, a visualization of the layer tree (based entirely on the aforementioned metrics) is shown. hovering over a layer in the left panel highlights the layer in the right panel. this is useful for identifying what content each layer corresponds to. here, i'm hovering over the last layer...
TraceMalloc
ates allocation counts and ignores free calls. if you run with --trace-malloc -, your code can call ns_tracemallocdumpallocations(pathname) at opportune times, and a human-readable listing of the current heap, including stack traces for every allocation, will be written to pathname. ...
...imes, and a human-readable listing of the current heap, including stack traces for every allocation, will be written to pathname. ...
... also, your javascript can call the following dom window methods: tracemallocdisable() - turn off tracing, first flushing any buffered log events for all log files. tracemallocenable() - turn on tracing. tracemallocopenlogfile(filename) - open a new log file and return its log file descriptor (or -1 on error). tracemallocchangelogfd(logfd) - change the current log file to t...
...leaks. it will produce a report like the following. leaks: 382739 bytes, 3465 allocations maximum heap size: 7751799 bytes 62095212 bytes were allocated in 391091 allocations. detecting memory usage growth in a running process to do this, dump the existing allocations to a file by calling the function tracemallocdumpallocations from javascript. you can use the following web page to do so. <script
type="text/javascript"> var filename = window.prompt("filename to log: "); if (filename) tracemallocdumpallocations(filename); </script> one can then use the script tools/trace-malloc/diffbloatdump.pl to compare trace-malloc dumps before and after doing an action that might leak. if there are significant differences, it might be worth examining the call stacks for the destructors of the...
Creating a Cookie Log
ookie handling. if you are reading this, you have probably been directed here from a bug report. please follow the instructions below to run firefox with cookie logging enabled. enabling cookie logging windows open a command prompt (this is under programs or programs/accessories in normal installations of windows). ...
...ly been directed here from a bug report. please follow the instructions below to run firefox with cookie logging enabled. enabling cookie logging windows open a command prompt (this is under programs or programs/accessories in normal installations of windows). ...
...am files\mozilla firefox)
type "set nspr_log_file=c:\temp\cookie-log.txt", enter
type "set nspr_log_modules=cookie:4" and press enter run firefox by typing "firefox.exe" and pressing enter. linux start a command shell (these instructions are for bash, if you use something else, you probably know how to modify these instructions already). change to the installation directory for firefox.
type "export nspr_log_file=~/cookie-log.txt" and press enter.
type "export nspr_log_modules=cookie:4" and press enter. run firefox by typing "./firefox" and pressing enter mac os x open terminal.app, which is located in the /applications/utilities folder (these instructions are for bash, the default shell in mac os x 10.3 and higher; if you use something else, you probably know how to modify thes...
...dules=cookie:4" and press enter. run firefox by typing "./firefox" and pressing enter mac os x open terminal.app, which is located in the /applications/utilities folder (these instructions are for bash, the default shell in mac os x 10.3 and higher; if you use something else, you probably know how to modify these instructions already). change to the installation directory for firefox, e.g.
type "cd /applications/firefox.app/contents/macos" and press return.
type "export nspr_log_file=~/desktop/cookie-log.txt" and press return.
type "export nspr_log_modules=cookie:4" and press return. run firefox by typing "./firefox-bin" and pressing return (note that firefox will launch behind windows for other applications). creating the log now that you have firefox running with logging enabled...
I/O Functions
this chapter describes the nspr functions used to perform operations such as system access, normal file i/o, and socket (network) i/o. for sample code that illustrates basic i/o operations, see introduction to nspr. for information about the
types most commonly used with the functions described in this chapter, see i/o
types. functions that operate on pathnames functions that act on file descriptors directory i/o functions socket manipulation functions converting between host and network addresses memory-mapped i/o functions anonymous pipe function polling functions pollable events manipulating layers functions that operate on pathnames a file or directory in a file system is specified by its pathname. nspr uses unix-style pathnames, which are null-terminated character strings...
.... the forward slash (/) separates the directories in a pathname. nspr converts the slashes in a pathname to the directory separator of the native os--for example, backslash (\) on windows and colon (:) on mac os--before passing it to the native system calls. some file systems also differentiate drives or volumes. ...
... passing it to the native system calls. some file systems also differentiate drives or volumes. pr_open pr_delete pr_getfileinfo pr_getfileinfo64 pr_rename pr_access
type praccesshow functions that act on file descriptors pr_close pr_read pr_write pr_writev pr_getopenfileinfo pr_getopenfileinfo64 pr_seek pr_seek64 pr_available pr_available64 pr_sync pr_getdesc
type pr_getspecialfd pr_createpipe directory i/o functions pr_opendir pr_readdir pr_closedir pr_mkdir pr_rmdir socket manipulation functions the network programming interface presented here is a socket api modeled after the popular berkeley sockets. differences include the following: the blocking socket functions in nspr take a timeout parameter. two new functions, pr_transmitfile an...
... pr_newpollableevent pr_destroypollableevent pr_setpollableevent pr_waitforpollableevent one can call pr_poll with the pr_poll_read flag on a pollable event. whe the pollable event is set, pr_poll returns the the pr_poll_read flag set in the out_flags. manipulating layers file descriptors may be layered. for example, ssl is a layer on top of a reliable bytestream layer such as tcp. each
type of layer has a unique identity, which is allocated by the runtime. the layer implementor should associate the identity with all layers of that
type. it is then possible to scan the chain of layers and find a layer that one recognizes and therefore predict that it will implement a desired protocol. a layer can be pushed onto or popped from an existing stack of layers. the file descriptor of the t...
Interval Timing
such parameters are common in nspr functions such as those used for i/o operations and operations on condition variables. nspr 2.0 provides interval times that are efficient in terms of performance and storage requirements. ...
...such parameters are common in nspr functions such as those used for i/o operations and operations on condition variables. nspr 2.0 provides interval times that are efficient in terms of performance and storage requirements. ...
...such parameters are common in nspr functions such as those used for i/o operations and operations on condition variables. nspr 2.0 provides interval times that are efficient in terms of performance and storage requirements. ...
...such parameters are common in nspr functions such as those used for i/o operations and operations on condition variables. ...
Function_Name
describe all side-effects on "out" parameters. ...
...describe all side-effects on "out" parameters. ...
...describe all side-effects on "out" parameters. ...
...describe all side-effects on "out" parameters. ...
Cryptography functions
the public functions listed here perform cryptographic operations based on the pkcs #11 interface. if documentation is available for a function listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference. the mozilla cross reference (mxr) link for each function provides access to the function definition, proto
type definition, and source code references. the nss version column indicates which versions of nss support the function. function name/documentation source code nss versions pk11_algtagtomechanism mxr 3.2 and later pk11_authenticate mxr 3.2 and later pk11_blockdata mxr 3.2 and later pk11_changepw mxr ...
...slotfromprivatekey mxr 3.2 and later pk11_getslotid mxr 3.2 and later pk11_getslotinfo mxr 3.4 and later pk11_getslotname mxr 3.2 and later pk11_getslotseries mxr 3.2 and later pk11_getsymkeynickname mxr 3.4 and later pk11_getsymkey
type mxr 3.9 and later pk11_getsymkeyuserdata mxr 3.11 and later pk11_gettokeninfo mxr 3.2 and later pk11_gettokenname mxr 3.2 and later pk11_getwindow mxr 3.2 and later pk11_getwrapkey mxr 3.2 and later pk11_hashbuf mxr 3.2...
...mxr 3.4 and later pk11_listpublickeysinslot mxr 3.4 and later pk11_loadprivkey mxr 3.4 and later pk11_logoutall mxr 3.4 and later pk11_makekeapubkey mxr 3.2 and later pk11_mappbemechanismtocryptomechanism mxr 3.2 and later pk11_mapsignkey
type mxr 3.11 and later pk11_mechanismtoalgtag mxr 3.4 and later pk11_mergetokens mxr 3.12 and later pk11_movesymkey mxr 3.9 and later pk11_needlogin mxr 3.2 and later pk11_needuserinit mxr 3.2 and later pk11_paramfromiv mxr ...
... seckey_destroyprivatekey mxr 3.2 and later seckey_ecparamstobasepointorderlen mxr 3.12 and later seckey_ecparamstokeysize mxr 3.12 and later seckey_destroypublickeylist mxr 3.4 and later seckey_destroysubjectpublickeyinfo mxr 3.2 and later seckey_getpublickey
type mxr 3.3 and later seckey_publickeystrengthinbits mxr 3.8 and later seckey_signaturelen mxr 3.11.2 and later ...
NSS 3.24 release notes
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 sslkea
type 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...
... the stack and use port_initcheaparena/port_destroycheaparena to initialize and destroy it. items allocated from the arena are still created on the 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.) ...
...acros 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 supplementary information about a certificate, such as the intended
type of the certificate, stapled ocsp responses, or signed certificate timestamps (used for certificate transparency). in secport.h portcheaparenapool - a stack-allocated arena pool, to be used ...
...on in tls 1.3. notable changes in nss 3.24 additions, deprecations, and other changes in nss 3.24 are listed below. deprecate the following functions. (applications should instead use the new ssl_configservercert function.) ssl_setstapledocspresponses ssl_setsignedcerttimestamps ssl_configsecureserver ssl_configsecureserverwithcertchain deprecate the nss_findcertkea
type function, as it reports a misleading value for certificates that might be used for signing rather than key exchange. update sslauth
type to define a larger number of authentication key
types. deprecate the member attribute authalgorithm of
type sslciphersuiteinfo. instead, applications should use the newly added attribute auth
type. rename ssl_auth_rsa to ssl_auth_rsa_decrypt. add a shared libr...
FC_Login
the security officer (cku_so) only logs in to initialize the normal user's pin. the so pin is the empty string. the nss cryptographic module doesn't allow the so to log in if the normal user's pin is already initialized. ...
... the security officer (cku_so) only logs in to initialize the normal user's pin. the so pin is the empty string. the nss cryptographic module doesn't allow the so to log in if the normal user's pin is already initialized. ...
... the security officer (cku_so) only logs in to initialize the normal user's pin. the so pin is the empty string. the nss cryptographic module doesn't allow the so to log in if the normal user's pin is already initialized. ...
...r_device_error: the token is in the error state. ckr_host_memory: 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. user
type is cku_so and the normal user's pin is already initialized. see also nsc_login ...
NSC_Login
the security officer (cku_so) only logs in to initialize the normal user's pin. the so pin is the empty string. the nss cryptographic module doesn't allow the so to log in if the normal user's pin is already initialized. ...
...the security officer (cku_so) only logs in to initialize the normal user's pin. the so pin is the empty string. the nss cryptographic module doesn't allow the so to log in if the normal user's pin is already initialized. ...
...the security officer (cku_so) only logs in to initialize the normal user's pin. the so pin is the empty string. the nss cryptographic module doesn't allow the so to log in if the normal user's pin is already initialized. ...
.... ckr_device_error: the token is in the error state. ckr_host_memory: 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. user
type is cku_so and the normal user's pin is already initialized. see also fc_login ...
NSS tools : vfychain
sl client, 1=ssl server, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient, 6=object signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose mode. ...
...ver, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient, 6=object signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose mode. prints root cert subject(double the argument for whole root cert info) -w password database password -w pwfile password file revocation options for pkix api (invoked with -pp options) is a collection of the following flags: [-g
type [-h flags] [-m
type [-s flags]] ...] ... ...
...er, 5=email recipient, 6=object signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose mode. prints root cert subject(double the argument for whole root cert info) -w password database password -w pwfile password file revocation options for pkix api (invoked with -pp options) is a collection of the following flags: [-g
type [-h flags] [-m
type [-s flags]] ...] ... where: -g test-
type sets status checking test
type. possible values are "leaf" or "chain" -g test
type sets status checking test
type. possible values are "leaf" or "chain". -h test flags sets revocation flags for the test
type it follows. possible flags: "testlocalinfofirst" and "requirefreshinfo". -m method
type sets method
type for the test
type it follows. possible
types are "crl" and "ocsp". -s method flags set...
...additional resources for information about nss and other tools related to nss (like jss), 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. ...
NSS_3.12.3_release_notes.html
previous behavior through the use of environment variables. here is a table of the new environment variables introduced in nss 3.12.3 and information about how they affect these new behaviors. the information in this table is excerpted from https://developer.mozilla.org/en/nss_reference/nss_environment_variables environment variable value
type description nsrandcount integer (byte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below). makes nsrandfile usable with /dev/urandom. nss_allow_weak_signature_alg boolean (any non-empty value to enable) ...
...andom integer bug 347037: make shlibsign depend on the softoken only bug 371522: auto-update of crls stops after first update bug 380784: pk11mode in non fips mode failed. bug 394077: libpkix need to return revocation status of a cert bug 412468: modify certutil bug 417092: modify pkix_certselector api to return an error if cert was rejected. ...
...date the coreconf/xxx.mk files for windows bug 478563: add _msc_ver (the cl version) to coreconf. bug 478724: nss build fails on windows since 20090213.1 nightly build. ...
...24: nss build fails on windows since 20090213.1 nightly build. bug 478931: object leak in pkix_list_mergelists function bug 478994: allow softoken's fork check to be disabled bug 479029: ocsp response signature cert found invalid if issuer is trusted only for ssl bug 479601: wrong
type (utf8 string) for email addresses in subject by cert_asciitoname bug 480142: use sizeof on the correct
type of ckc_x509 in lib/ckfw bug 480257: ocsp fails when response > 1k byte bug 480280: the cka_ec_point pkcs#11 attribute is encoded in the wrong way: missing encapsulating octet string bug 480442: remove (empty) watcomfx.h from nss bug 481216: fix specific spelling errors in nss bug 482702: ocsp test with revoked ca cert validated as good. bug 483113: add environment variable to disable/...
NSS tools : signver
ryptographic 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 format. -i input_file gives t...
...object (from the input file). signver -v -s signature_file -i signed_file -d sql:/home/my/sharednssdb signaturevalid=yes printing signature data the -a option prints 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 flexibili...
...e 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, pk12util, modutil) assume that the given security databases follow the more common legacy
type. using the sqlite databases must be manually specified by using the sql: prefix with the given security directory. for example: # signver -a -s signature -...
...mat is included for backward compatibility. by default, the tools (certutil, pk12util, modutil) assume that the given security databases follow the more common legacy
type. using the sqlite databases must be manually specified by using the sql: prefix with the given security directory. for example: # signver -a -s signature -d sql:/home/my/sharednssdb to set the shared database
type as the default
type for the tools, set the nss_default_db_
type environment variable to sql: export nss_default_db_
type="sql" this line can be set added to the ~/.bashrc file to make the change permanent. most applications do not use the shared database by default, but they can be configured to use them. for example, this how-to article covers how to configure firefox and thu...
Rhino overview
are ecma conformant. operators == and != version 1.2 only uses strict equality for the == and != operators. in version 1.3 and greater, == and != have the same meanings as ecma. the operators === and !== use strict equality in all versions. toboolean boolean(new boolean(false)) is false for all versions before 1.3. it is true (and thus ecma conformant) for version 1.3 and greater. array.proto
type.tostring and object.proto
type.tostring version 1.2 only returns array or object literal notation ("[1]" or "{a:1, b:2}" for example). in version 1.3 and greater these functions are ecma conformant. array constructor array(i) for a number argument i constructs an array with a single element equal to i for version 1.2 only. otherwise the ecma conformant version is used (an array is constructed w...
...rray or object literal notation ("[1]" or "{a:1, b:2}" for example). in version 1.3 and greater these functions are ecma conformant. array constructor array(i) for a number argument i constructs an array with a single element equal to i for version 1.2 only. otherwise the ecma conformant version is used (an array is constructed with no elements but with length property equal to i). string.proto
type.substring for version 1.2 only, the two arguments are not swapped if the first argument is less than the second one. all other versions are ecma compliant. string.proto
type.split for version 1.2 only, split performs the perl4 special case when given a single space character as an argument (skips leading whitespace, and splits on whitespace). all other versions split on the space character prop...
...alue of the property security.requiresecuritydomain should be changed to true in the resource bundle org.mozilla.javascript.resources.security. the value of this property can be determined at runtime by calling the issecuritydomainrequired method of context. setting this property to true requires that any calls that compile or evaluate javascript must supply a security domain object of any object
type that will be used to identify javascript code. in a typical client embedding, this object might be a string with the url of the server that supplied the script, or an object that contains a representation of the signers of a piece of code for certificate-based security policies. when javascript code attempts a restricted action, the security domain can be retrieved in the following manner. the c...
...action, the security domain can be retrieved in the following manner. the class context should be obtained from the security manager (see java.lang.securitymanager.getclasscontext()). then, the class of the code that called to request the restricted action can be obtained by looking an appropriate index into the class context array. if the caller is javascript the class obtained may be one of two
types. first, it may be the class of the interpreter if interpretive mode is in effect. second, it may be a generated class if classfile generation is supported. an embedding can distinguish the two cases by calling isinterpreterclass() in the context class. if it is the interpreter class, call the getinterpretersecuritydomain() method of context to obtain the security domain of the currently executin...
Rhino scopes and contexts
nsive method to call and it allocates a fair amount of memory. we'll see below that there are ways to share a scope created this way among multiple scopes and threads. name lookup so how are scopes used to look up names? in general, variables are looked up by starting at the current variable object (which is different depending on what code is being executed in the program), traversing its proto
type chain, and then traversing the parent chain. in the diagram below, the order in which the six objects are traversed is indicated. order of lookups in a two-deep scope chain with proto
types. for a more concrete example, let's consider the following script: var g = 7; function f(a) { var v = 8; x = v + a; } f(6); we have a top-level variable g, and the call to f will create a new top-l...
...traversed looking for a 'x' property. when none is found, a new property 'x' is created in the top-level scope. sharing scopes javascript is a language that uses delegation rather than traditional class-based inheritance. this is a large topic in itself, but for our purposes it gives us an easy way to share a set of read-only variables across multiple scopes. to do this we set an object's proto
type. when accessing a property of an object in javascript, the object is first searched for a property with the given name. if none is found, the object's proto
type is searched. this continues until either the object is found or the end of the proto
type chain is reached. so to share information across multiple scopes, we first create the object we wish to share. typically this object will have been ...
... searched. this continues until either the object is found or the end of the proto
type chain is reached. so to share information across multiple scopes, we first create the object we wish to share. typically this object will have been created with initstandardobjects and may also have additional objects specific to the embedding. then all we need to do is create a new object and call its setproto
typemethod to set the proto
type to the shared object, and the parent of the new scope to null: scriptable newscope = cx.newobject(sharedscope); newscope.setproto
type(sharedscope); newscope.setparentscope(null); the call to newobject simply creates a new javascript object with no properties. it uses thesharedscope passed in to initialize the proto
type with the standard object.proto
type value. we ca...
...o when it references a variable? the answer to 1 determines which scope should be the ultimate parent scope: rhino follows the parent chain up to the top and places the variable there. after you've constructed your parent scope chain, the answer to question 2 may indicate that there are additional scopes that need to be searched that are not in your parent scope chain. you can add these as proto
types of scopes in your parent scope chain. when rhino looks up a variable, it starts in the current scope, walks the proto
type chain, then goes to the parent scope and its proto
type chain, until there are no more parent scopes left. ...
JS::CreateError
this article covers features introduced in spidermonkey 38 create an error object. syntax // added in spidermonkey 45 bool js::createerror(jscontext *cx, jsexn
type 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, jsexn
type 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 js...
... 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 js_threadsafe build, the caller must be in a request on this jscontext.
type jsexn
type the exception's
type. stack js::handlestring or js::handleobject the value of error.proto
type.stack. filename js::handlestring the value of error.proto
type.filename. linenumber uint32_t the value of error.proto
type.linenumber. columnnumber uint32_t the value of error.proto
type.columnnumber. report jserrorrepor...
...f error.proto
type.stack. filename js::handlestring the value of error.proto
type.filename. linenumber uint32_t the value of error.proto
type.linenumber. columnnumber uint32_t the value of error.proto
type.columnnumber. report jserrorreport * a pointer to jserrorreport instance. message js::handlestring the value of error.proto
type.message. rval js::mutablehandlevalue out parameter. receives the created error object. description js::createerror creates an error object with specified properties. if successful, js::createerror stores the created error object to *rval and returns true, otherwise returns false and the value of *rval is undefined. ...
...o
type.message. rval js::mutablehandlevalue out parameter. receives the created error object. description js::createerror creates an error object with specified properties. if successful, js::createerror stores the created error object to *rval and returns true, otherwise returns false and the value of *rval is undefined. ...
JS::DoubleValue
the result is an floating-point js::value. ...
... the result is an floating-point js::value. ...
... the result is an floating-point js::value. ...
... the result is an floating-point js::value. ...
JS::Float32Value
the result is an floating-point js::value. ...
... the result is an floating-point js::value. ...
... the result is an floating-point js::value. ...
... the result is an floating-point js::value. ...
JS::Int32Value
the result is an integer js::value. ...
... the result is an integer js::value. ...
... the result is an integer js::value. ...
... the result is an integer js::value. ...
JSConstDoubleSpec
name const char * name to assign the double. ...
... name const char * name to assign the double. ...
... name const char * name to assign the double. ...
... name const char * name to assign the double. flags uint8_t property attributes for the double. ...
JSExtendedClass.wrappedObject
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 spidermonkey 1.8 callback for objects that wrap other objects. syntax
typedef jsobject * (*jsobjectop)(jscontext *cx, jsobject *obj); name
type description cx jscontext * the context in which the object is being unwrapped. obj jsobject * the object to unwrap. description if a class has the jsclass_is_extended bit set in its jsclass.flags and has a non-null jsextendedclass.wrappedobject, then objects of that class may be wrappers. in a few cases the javascript engine will pretend the wrapper isn't th...
... the wrapper isn't there, instead operating on the object it wraps. in these cases the engine calls the jsextendedclass.wrappedobject callback to get the wrapped object. most classes do not implement wrappedobject. the specific cases where this happens are: the default tostring method returns a string that contains the name of the wrapped object's class rather than the wrapper's class. in
typeof expressions and in js_
typeofvalue, the
type of the wrapped object is returned. (the result may be "object", "function", or "xml".) when assigning to __proto__ or __parent__ from script, the javascript engine checks to see if the assignment would produce a cycle. if so, it fails with an exception. when walking the chain to do this check, wrappers are automatically unwrapped. a wrapper ob...
...__ or __parent__ from script, the javascript engine checks to see if the assignment would produce a cycle. if so, it fails with an exception. when walking the chain to do this check, wrappers are automatically unwrapped. a wrapper object is strictly equal to the object it wraps, in the sense of === and !==. two wrapper objects that wrap the same object are also strictly equal. object.proto
type.eval unwraps. a wrapper object that wraps an array is considered an array for the purpose of array.proto
type.concat and array.concat (which treat array arguments differently from other arguments, per ecma 262-3 §15.4.4.4). the wrappedobject callback implementation must never fail. if it returns null or obj, then the js engine treats the object as though it were not a wrapper. wrapper obje...
...r object that wraps an array is considered an array for the purpose of array.proto
type.concat and array.concat (which treat array arguments differently from other arguments, per ecma 262-3 §15.4.4.4). the wrappedobject callback implementation must never fail. if it returns null or obj, then the js engine treats the object as though it were not a wrapper. wrapper objects typically have no proto
type, do not allow setting __proto__, and inherit properties from the wrapped object rather than the proto
type chain (see jsnewresolveop). ...
JSNative
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()). ...
...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()). ...
...ny jsapi callbacks. in particular, apis such as js_initclass and js_definefunctions create custom methods on javascript objects that are implemented as jsnative callbacks provided by the application, written in c/c++ code. the term "native" here refers to c/c++ code as opposed to javascript code. syntax
typedef bool (* jsnative)(jscontext *cx, unsigned argc, js::value *vp); name
type description cx jscontext * the context in which the native function is being called. 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()). argc unsigned the number of arguments supplied to the function by the caller (as opposed to, say, ...
... unsigned the number of arguments supplied to the function by the caller (as opposed to, say, the number of arguments the function is specified to take in its jsfunctionspec). vp js::value * the arguments, the this 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 spidermonkey 24. this header is new, but the semantics it describes are applicable to all recent spidermonkey releases. the preferred way to implement a function is to use the js::...
JSObjectOps.getProperty
pi documentation. see bug 408416 for details. jsobjectops.getproperty, setproperty, and deleteproperty are high-level callbacks that implement object property accesses. ...
... obj jsobject * the object to be accessed. ...
...sclass hooks; calling getters or setters; and actually getting, setting, or deleting the property once it is found. contrast jsclass.getproperty, jsclass.setproperty, and jsclass.delproperty, which are hooks called during property accesses and don't have to implement any of that. syntax
typedef jsbool (*jspropertyidop)( jscontext *cx, jsobject *obj, jsid id, jsval *vp); name
type description cx jscontext * pointer to the js context in which the property access is happening. obj jsobject * the object to be accessed. id jsid the name or index of the property to access. vp jsval * in/out parameter. see the description section below. description get, set, or delete obj[id], returning js_false on error or e...
...ription get, set, or delete obj[id], returning js_false on error or exception, js_true on success. if getting or setting, the new value is returned in *vp on success. if deleting without error, *vp will be jsval_false if obj[id] is permanent, and jsval_true if id named a direct property of obj that was in fact deleted, or if id names no direct property of obj (id could name a property of a proto
type, or no property in obj or its proto
type chain). this reflects the quirky behavior of delete as specified in ecma 262-3 §11.4.1 and ecma 262-3 §8.6.2.5. ...
JS_DumpHeap
wsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8 debug only. dump the object graph of heap-allocated things. syntax bool js_dumpheap(jsruntime *rt, file *fp, void* startthing, jsgctracekind kind, void *thingtofind, size_t maxdepth, void *thingtoignore); name
type description cx jscontext * pointer to a js context. every jscontext is permanently associated with a jsruntime; each jsruntime contains a gc heap. fp file * file for the dump output. startthing void * null or a pointer to a gc thing (use js::value::togcthing() to obtain a pointer to pass here). when null, dump all things reachable from the runtime r...
...ll, js_dumpheap only dumps paths in the object graph leading to the specified thing. maxdepth size_t the upper bound on the number of edges to descend from the graph roots. thingtoignore void * null or a pointer to a gc thing that will be ignored during graph traversal. enum jsgctracekind { // these trace kinds have a publicly exposed, although opaque, c++
type. // note: the order here is determined by our value packing. other users // should sort alphabetically, for consistency. jstrace_object = 0x00, jstrace_string = 0x01, jstrace_symbol = 0x02, jstrace_script = 0x03, // shape details are exposed through js_traceshapecyclecollectorchildren. jstrace_shape = 0x04, // the kind associated with a nullptr. jst...
...aceshapecyclecollectorchildren. jstrace_shape = 0x04, // the kind associated with a nullptr. jstrace_null = 0x06, // a kind that indicates the real kind should be looked up in the arena. jstrace_outofline = 0x07, // the following kinds do not have an exposed c++ idiom. jstrace_base_shape = 0x0f, jstrace_jitcode = 0x1f, jstrace_lazy_script = 0x2f, jstrace_
type_object = 0x3f, jstrace_last = jstrace_
type_object }; description see bug 378261 for detail. when tracing a thing, the gc needs to know about the layout of the object it is looking at. there are a fixed number of different layouts that the gc knows about. the "trace kind" is a static map which tells which layout a gc thing has. although this map is public, the details are completely hidd...
... see js::value::gckind() and jstracecallback in <codde>tracer.h</codde> for more details. ...
JS_NewExternalString
create a new jsstring whose characters are stored in external memory. syntax jsstring * js_newexternalstring(jscontext *cx, const char16_t *chars, size_t length, const jsstringfinalizer *fin); jsstring * js_newexternalstringwithclosure(jscontext *cx, jschar *chars, size_t length, int
type, void *closure); // obsolete since jsapi 13 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. chars const char16_t * or const jschar * pointer to the first element of an array of char16_ts. this array is used as the character buffer of the jsstring to be created. the array must...
...d, 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 spidermonkey 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-defined data to i...
... js_addexternalstringfinalizer. obsolete since jsapi 13 description js_newexternalstring and js_newexternalstringwithclosure create a new jsstring whose characters are stored in external memory, i.e., memory allocated by the application, not the javascript engine. since the program allocated the memory, it will need to free it; this happens in an external string finalizer indicated by the
type parameter. js_newexternalstringwithclosure works similarly, except it accepts an additional parameter, closure, which is saved in the string's internal data structure. it can be retrieved later by calling js_getexternalstringclosure. this is application-defined data you can associate with the string. to determine if a string was created as an external string, you can call js_isexternalstring. ...
...aved in the string's internal data structure. ...
JS_ReportErrorNumber
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. flags unsigned error report flags. errorcallback jserrorcallback callback to fetch the error message. userref void * a pointer to application data. the javascript engine pa...
...ript engine passes this pointer to errorcallback. the meaning of the data is up to the application. errornumber const unsigned an error code. the javascript engine passes this number to errorcallback. the meaning of the error number is up to the application. ... / args ... / const char16_t ** additional arguments for the error message. ...
...s ... / const char16_t ** additional arguments for the error message. these arguments must be of
type char * for js_reporterrornumber or js_reporterrorflagsandnumber, or char16_t * for js_reporterrornumberuc or js_reporterrorflagsandnumberuc. the number of additional arguments required depends on the error message, which is determined by the errorcallback. callback syntax
typedef const jserrorformatstring * (* jserrorcallback)(void *userref, const unsigned errornumber); name
type description userref void * the userref pointer that was passed to the reporterrornumber api. errornumber const unsigned the errornumber that was passed to the reporterrornumber api. description these functions create a jserrorreport, populate...
...e a jserrorreport, populate it with an error message obtained from the given jserrorcallback, and either report it to the current error reporter callback or create an error object and set it as the pending exception. first errorcallback(userref, errornumber) is called. if errorcallback returns null, (??? what happens?). otherwise, if the jserrorformatstring returned by the jserrorcallback has .exn
type == jsexn_none, then the error reporter, if any, is called, and no error object is created. (??? the source code seems to say we ignore the .exn
type, actually, but surely i'm just missing something.) otherwise, if any javascript code is running in cx (for example, if the caller is a jsnative that was called from a script), then an error object is created and becomes the pending exception. the erro...
JS_ValueToId
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. 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 c...
... 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 jsprotokey the proto
type 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 interned string jsid based on the valu...
...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::protokeytoid converts a specified proto
type 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::protokeytoid js_valuetoid bug 698...
JS_ValueToObject
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v js::handlevalue the value to convert. objp js::mutablehandleobject out parameter. on success, *objp receives null or a pointer to the resulting object. description js_valuetoobject converts a specified javascript value, v, to an object. ...
...ion js_valuetoobject converts a specified javascript value, v, to an object. on success, this function stores either null or a pointer to the resulting object in *objp and returns true. otherwise it returns false and the value left in *objp is unspecified. if v is jsval_null or jsval_void, the result is null. ...
...number, or a string, the result is a new wrapper object of
type boolean, number, or string. otherwise v is an object, and the result depends on the object. if v is a native javascript object, this calls the object's valueof method, if any. in any case, the result is not guaranteed to be the same object as v. (implementation note: the object's jsobjectops.defaultvalue method is called with hint=js
type_object.) the resulting object is subject to garbage collection unless the variable *objp is protected by a local root scope, an object property, or the js_addroot function. ...
...th hint=js
type_object.) the resulting object is subject to garbage collection unless the variable *objp is protected by a local root scope, an object property, or the js_addroot function. ...
SpiderMonkey 31
jsapi operation has completed, the corresponding js_shutdown method (currently non-mandatory, but highly recommended as it may become mandatory in the future) uninitializes spidermonkey, cleaning up memory and allocations performed by js_init. a major change to spidermonkey in 31 is that its apis support a moving garbage collector. this entailed changing the vast majority of the jsapi from raw
types, such as js::value or js::value*, to js::handle and js::mutablehandle template
types that encapsulate access to the provided value/string/object or its location. the js::handle<js::value> and js::mutablehandle<js::value> classes have been specialized to implement the same interface as js::value, for simplicity and to ease migration pain. changes to introduce handles to the jsapi are not indivi...
...:value, for simplicity and to ease migration pain. changes to introduce handles to the jsapi are not individually documented, because of the breadth of the changes involved. the following features in earlier versions of spidermonkey have been dropped. xxx list removed features here spidermonkey 31 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi
types, functions, and callback signatures have changed, though most functions that have changed still have the same names and implement essentially unchanged functionality. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant ...
... most functions that have changed still have the same names and implement essentially unchanged functionality. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes: many of the garbage collector changes require
type signature changes to jsapi methods: specifically introducing js::rooted, js::handle, and js::mutablehandle
types. these
types, with the appropriate parametrizations, can roughly be substituted for plain
types of gc things (values, string/object pointers, etc.). the jsbool
type has been removed, along with the corresponding js_true and js_false constants. they have been replaced by bool, true, ...
...zes the js engine after all runtimes have been destroyed. js_seticumemoryfunctions is a new function which can be used to set the allocation and deallocation functions used by the icu internationalization library. this is unlikely to be of interest to embedders unless you are doing detailed memory profiling. it must be called before js_init is called. ...
Redis Tips
technically, this is true: it's a database that doesn't use sql. but the statement is meaningless. ...
... but that are also very unlike ice cream -- it just gives the whaling industry a way to lump together people who don't use their products. so rather than thinking about redis as a database with some kind of non-existent relationship to sql, think of it as a data structure server with a rich set of commands for querying and manipulating those data structures over a network connection. redis data
types include: strings hashes lists sets ordered sets (called zsets in redis) transactions publishers and subscribers this table lists some common programming tasks and data structures, and suggests some redis functions or data structures for them: dictionary lookup set, get, setnx, etc. counters set, incr, incrby list manipulation lpush, rpush, lpop, rp...
... key while we were processing it and thus * the execution of the multi command was not performed. * * notice: failing an execution of multi is not considered * an error. so you will have err === null and results === null */ }); }); }); nice. you just have to be careful that you check the result
type of an exec() when you're watching variables. it could be either a list or null. note also that it's not an error for a transaction to be aborted, so err will be null in either case. do notice however that watch will only work for keys. it won't work for hash fields nor for fields of other operations. you can watch a hash, but not its subfields. lists and queues lists make great queues. u...
... so for a test user account creation and verification service called "persona test user," i have these keys: ptu:nextval an iterator ptu:mailq a queue (list) of incoming verification emails ptu:emails:staging a zset of emails being staged, sorted by creation date ptu:emails:valid a zset of email accounts ready for use, sorted by ...
Gecko object attributes
s is especially important in atomic regions. the entire atomic region should be presented once when it is finally no longer busy. see the live region support for more information. container-live interruption policy. see the live region support for more information. container-live-role indicates the role for the live region that contains the current accessible object. container-relevant what
types of mutations are possibly relevant? see the live region support for more information. event-from-input was the root cause of this event explicit user input? see the live region support for more information. member-of points to the root of the atomic container that this object is in. this will always be an ancestor of the current object. see the live region support for more information. com...
...ject is in. this will always be an ancestor of the current object. see the live region support for more information. common widget attributes checkable true when the widget is known to behave like a checkbox. note some widgets which appear to be checkboxes might in fact be cyclers (see "cycles" below). action 0 is named either "check" or "uncheck". ...
...on support for more information. common widget attributes checkable true when the widget is known to behave like a checkbox. note some widgets which appear to be checkboxes might in fact be cyclers (see "cycles" below). action 0 is named either "check" or "uncheck". applied to: state_checkable state data
type warning: obsolete, do not use! a qname that refers to an xsd (schema) defined
type. for example, a data
type may be xsd:integer. ...
...r to be checkboxes might in fact be cyclers (see "cycles" below). action 0 is named either "check" or "uncheck". applied to: state_checkable state data
type warning: obsolete, do not use! a qname that refers to an xsd (schema) defined
type. for example, a data
type may be xsd:integer. when this is not specified, the default is string, unless the value interface is exposed, which indicates the
type is numeric. for more information please read about schema data
types. applied to: any widget that accepts input exposed via aria: aria-data
type exposed in xforms: from boud instance node data
type draggable true when the accessible object can be grabbed. dropeffect indicates what functions can be performed when the dragged object is released on the drop target. refer to aria-dropeffect for t...
The Places database
e design). any time a places component wants to reference a url, whether visited or not, it refers to this table. each entry has an optional reference to the moz_favicon table to identify the favicon of the page. no two entries may have the same value in the url column. moz_hosts: one entry in this table is created each time you visit a new host. it contains the host url, frequency of access, if
typed or not, and it's prefix (https://, ftp://, etc). history tables moz_historyvisits: one entry in this table is created each time you visit a page. it contains the date, referrer, and other information specific to that visit. it contains a reference to the moz_places table which contains the url and other global statistics. see history service design for more information. bookmarks tables ...
...hy is defined via the parent column, which points to the moz_bookmarks record which is the parent. the position column numbers each of the peers beneath a given parent starting with 0 and incrementing higher with each addition. the fk column provides 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 manipu...
...m annotations. it maps a bookmark, folder or separator (reference to moz_bookmarks) and an annotation name (reference to moz_anno_attributes) to the value of the annotation. favicon table moz_favicons: this contains a list of unique favicon uris and data. one or more pages in moz_places refer to each entry. when no pages reference a favicon, the icon entry will be deleted. if the mime
type of the image is image/png, the data blob must be reencoded from base16 (the format in which it is stored) to base64 in order to display correctly. expiration expiration is handled in toolkit/components/places/nsplacesexpiration.js. this algorithm determines the lifetime of all objects in the places system. periodically at runtime, the following happens to expire pages: expire visits t...
...enced by the expired visits and not referenced by any non-expired visit or bookmark. delete favicons for those expiring history entries that are not referenced by any other history entry. delete annotations that belong to the expiring pages. at shutdown time, an extra step is performed in case there are any orphans. there are several ways for orphans to be created, including calling markpageas
typed and then never visiting the page. extensions might also set favicons for pages that have never been visited. delete any history entries that have no visits, are not bookmarked, and are not place: uris. delete any favicons that are not referenced by any history entries. see places expiration for more information. ...
Aggregating the In-Memory Datasource
nscomptr<nsirdfdatasource>, you'll just want an nscomptr<nsisupports>: class myclass : public nsimyinterface { ... private: nscomptr<nsisupports> minner; }; construct the datasource delegate when your object is constructed (or, at worst, when somebody qi's for it): rv = nscomponentmanager::createinstance( krdfinmemorydatasourcecid, this, /* the "outer" */ nscom
typeinfo<nsisupports>::getiid(), getter_addrefs(minner)); note passing this as the "outer" parameter. now, if the in-memory datasource's implementation of queryinterface() fails because it doesn't support the requested interface, it willforward the query interface to its "outer" (which is "us"). this preserves the symmetrical property of queryinterface(). for us to preserve symmetry, our q...
...outer" (which is "us"). this preserves the symmetrical property of queryinterface(). ...
...y of queryinterface(). ...
...o the delegate3: ns_imethodimp myclass::queryinterface(refnsiid aiid, void** aresult) { ns_precondition(aresult != nsnull, "null ptr"); if (! ...
Using XPCOM Utilities to Make Things Easier
to begin with, the first section describesc++ macros that can replace a lot of the code in weblock1.cpp. ...
...eir iids. on any interface that is generated by xpidl, you can call ns_get_iid() to obtain the iid which is associated with that interface. // returns a reference to a shared nsiid object\ static const nsiid iid1 = ns_get_iid(nsisupports); // constructs a new nsiid object static const nsiid iid2 = ns_isupports_iid; in order to use ns_impl_isupportsn, you must be sure that a member variable of
type nsrefcnt is defined and named mrefcnt in your class. but why even bother when you can use another macro? declaration macros ns_decl_nsisupports declares addref, release, and queryinterface for you, and it also defines the mrefcnt required by ns_impl_isupports. furthermore, ns_decl_ appended with any interface name in all caps will declare all of the methods of that interface for you. for exampl...
...ake changes to your idl file, since the c++ header file will then automatically include the updated list of methods to be supported. the ns_init_isupports macro is also a bit of a special case. historically, it gets called in the constructor for your class and sets mrefcnt to zero. however, a change in xpcom that occurred before mozilla 1.3 makes ns_init_isupports no longer necessary: mrefcnt's
type has been changed from an integer to a class that provides its own auto-initialization. if you are building with versions earlier than mozilla 1.3, this macro is still required. the following table summarizes the macro usage in this portion of the weblock.cpp source file: common xpcom macros ns_impl_isupportsn implements nsisupports for a given class with n number of interfaces ...
...e call to url.get() is owned by the url string object. if you need to keep this string data around past the lifetime of the string object, you must make a copy. string size the examples above illustrate the use of the single byte string class, nsembedcstring. the double byte version, nsembedstring, has the same functionality but the constructor takes nsastring and the .get() method returns the
type prunichar*. note that prunichar is a two byte value. in the coming chapters, you'll see examples that use this version in the weblock component. smart pointers all of the interfaces that you've seen so far are reference counted. leaking a reference by not releasing an object, as the code below demonstrates, can be a major problem. { nsisupports* value = nsnull; object->method(&value); i...
Introduction to XPCOM for the DOM
erface keep the same name in c++ . however in idl we have to use the so-called "intercaps" model. that means that the first letter is lower-cased, and the other letters that begin a new word are upper-cased. for example, in idl we'd write getelementbyid, which in c++ would be translated to getelementbyid. ns_imethod is a macro that basically means "virtual nsresult". the argument list and return
type are turned into correct c++
types according to rules not described here. the attributes of the interface become two functions: a getter, and a setter. in our example, since the attribute is declared as read-only, only a getter is defined: getneat. the argument is a pointer to an object of
type prbool, automatically generated by xpidl. clever uh. note that the same intercaps model applies to idl ...
...al choice for us is in dom/public/idl/html, where all the html interfaces live. next, we have to add nsidomfabian.idl to all the makefiles of this directory. this includes, if needed, "manifest", "makefile.win", "makefile.in", etc... simply copy the existing entries for nsidomfabian. warning: in makefiles, there is a mix of tabs and whitespaces. make sure you copy exactly the other entries. then
type "make" in dom/ to build the interface. if all goes well, a file nsidomfabian.h should be in dom/public/idl/html/_xpidlgen/, and it should contain the c++ code for our interface. from my own experience unfortunately it sometimes necessary to build "distclean" before it works. interface implementation let's take a closer look at how interfaces are implemented. we already know that an interface ha...
...of nsidomfabian. theory let's assume we have the real class nsfoo which inherits from the real class nsbar. let's also assume that nsfoo implements the interface nsifoo. one possible way for nsfoo to implement nsifoo is to forward the methods on the interface to the implementation of those methods on the class nsbar. ...
...prop() { return nsbar::getprop(); } nsfoo::setprop() { return nsbar::setprop(); } nsfoo::meth() { return nsbar::meth(); } for such code to work, nsbar of course has to implement getprop, setprop, and meth. note that nsbar implements the methods of the interface nsifoo, but does not inherit from that interface. this is the only case where you would use interface forwarding. instead of having to
type the three methods and forward them to nsbar, we can use the "interface forwarding macro", ns_forward_nsifoo. #define ns_forward_nsifoo(_to) \ ns_imethod getprop() { return _to getprop(); } \ ns_imethod setprop() { return _to setprop(); } \ ns_imethod meth() { return _to meth(); } the meaning of this macro is easy to grasp. it will forward all the methods on...
Components.utils.Sandbox
without new. the created sandbox is simply an empty javascript object marked as having been created by the restricted privilege principal. you can then use it with evalinsandbox() to make it the global scope object for the specified script. principal the security principal defined for a sandbox determines what code running in that sandbox will be allowed to do. the principal may be one of four
types: the system principal, a content principal, an expanded principal, or a null principal. see security checks for more information on security principals. system principal to specify the system principal, you can create it using code like: cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); content principal you can specify a content principal for a particular origin in on...
...ullprincipal;1"].createinstance(ci.nsiprincipal); from firefox 37 onwards, you can also specify the null principal by simply passing null as the principal argument. options the constructor accepts an optional parameter. this parameter is an object with the following optional properties: freshzone if true creates a new gc region separate from both the calling context's and the sandbox proto
type's region. addons creating sandboxes whose expected lifetime is tied to that of a content window object will want to use samezoneas instead. samezoneas a javascript object in whose garbage collection region the sandbox should be created in. this helps to improve memory usage by allowing sandboxes to be discarded when that zone goes away. content scripts should pass the window they're running ...
...n 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 / seamonkey 2.10), if you don't specify a sandbox name it will default to the caller's filename. sandboxproto
type a proto
type 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 web apis (such as accessing the window's dom) can be executed without interference from untrusted conten...
...box to be freed immediately. example executing in current tab scope more ways to load scripts into a sandbox can be found on the loading scripts page. this example is to be run from scratchpad with environemnt set to browser. it alerts the dollar sign function. this code was tested on twitter.com and gets access to the jquery $. var sandboxscript = 'alert($)'; var options = { sandboxproto
type: content, wantxrays: false // only set this to false if you need direct access to the page's javascript. true provides a safer, isolated context. }; var sandbox = cu.sandbox(content, options); cu.evalinsandbox(sandboxscript, sandbox); cu.nukesandbox(sandbox); ...
mozIThirdPartyUtil
annel is an nsihttpchannel and has the 'forceallowthirdpartycookie' property set, then: if auri is null, return false. otherwise, find the uri of the channel, determine whether it is foreign with respect to auri, and return. find the uri of the channel and determine whether it is third party with respect to the uri of the channel. if so, return. obtain the bottommost nsidomwindow, and its same-
type parent if it exists, from the channel's notification callbacks. then: if the parent is the same as the bottommost window, and the channel has the load_document_uri flag set, return false. this represents the case where a toplevel load is occurring and the window's uri has not yet been updated. (we have already checked that auri is not foreign with respect to the channel uri.) otherwise, return t...
... uri of "http://mozilla.com", the result will be true. boolean isthirdpartychannel( in nsichannel achannel, in nsiuri auri optional ); parameters achannel the channel associated with the load. auri optional a uri to test against. if null, the uri of the channel will be used. return value true if auri is third party with respect to the channel uri or any of the uris associated with the same-
type window hierarchy of the channel. isthirdpartyuri() determine whether two uris are third party with respect to each other. this is determined by computing the base domain for both uris. if they can be determined, and the base domains match, the request is defined as first party. if it cannot be determined because one or both uris do not have a base domain (for instance, in the case of ip addresse...
...ssing description return value true if afirsturi is third party with respect to aseconduri. isthirdpartywindow() determine whether the given window hierarchy is third party. this is done as follows: obtain the uri of the principal associated with awindow. call this the 'bottom uri'. if auri is provided, determine if it is third party with respect to the bottom uri. if so, return. find the same-
type parent window, if there is one, and its uri. determine whether it is third party with respect to the bottom uri. if so, return. therefore, each level in the window hierarchy is tested. (this means that nested iframes with different base domains, even though the bottommost and topmost uris might be equal, will be considered third party.) for example, if auri is "http://mail.google.com/", 'awindow...
...lla.com", the result will be true. boolean isthirdpartywindow( in nsidomwindow awindow, in nsiuri auri optional ); parameters awindow the bottommost window in the hierarchy. auri optional a uri to test against. if null, the uri of the principal associated with awindow will be used. return value true if auri is third party with respect to any of the uris associated with awindow and its same-
type parents. ...
nsIAccessibleDocument
read only. domdocument nsidomdocument the nsidomdocument interface associated with this document. read only. note: renamed from document in gecko 2.0 iseditable boolean true if the d...
...read only. ...
...read only. ...
... nsidomdocument the nsidomdocument interface associated with this document. read only. note: renamed from document in gecko 2.0 iseditable boolean true if the document is live in an editor. false if the document is being displayed but not edited. if a <div> is contenteditable, then it has its own document, with iseditable == true. read only. obsolete since gecko 1.9 mime
type astring the mime
type of the document. read only. title astring the title of the document, as specified in the document. read only. url astring the url of the document read only. window nsidomwindow the nsidomwindow that the document resides in. read only. windowhandle voidptr the window handle for the os window the document is bei...
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 / seamonkey 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 w...
...ble 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 with the event. may return null if accessible for event has been shut down. read only. event
type unsigned long the
type of event, based on the enumerated event values defined in this interface. read only. isfromuserinput boolean returns true if the event was caused by explicit user input, as opposed to purely originating from a timer or mouse movement. constants constant gecko version description 1.7 - 1.8.1 1.9 - 1.9.2 2.0 event_show 0x8002 0x0001 an object has been created. ...
...y 0x0121 event_atk_window_maximize 0x0122 event_atk_window_minimize 0x0123 event_atk_window_resize 0x0124 event_atk_window_restore 0x0125 event_dom_create 0x0001 an object has been created. event_dom_destroy 0x0002 an object has been destroyed. event_dom_significant_change 0x0003 an object's properties or content have changed significantly so that the
type of object has really changed, and therefore the accessible should be destroyed or recreated. event_asynch_show 0x0004 a hidden object is shown -- this is a layout occurrence and is thus asynchronous. event_asynch_hide 0x0005 an object is hidden -- this is a layout occurrence and is thus asynchronous. event_asynch_significant_change 0x0006 an object had a significant layout chang...
...nged, and therefore the accessible should be destroyed or recreated. event_asynch_show 0x0004 a hidden object is shown -- this is a layout occurrence and is thus asynchronous. event_asynch_hide 0x0005 an object is hidden -- this is a layout occurrence and is thus asynchronous. event_asynch_significant_change 0x0006 an object had a significant layout change which could affect the
type of accessible object -- this is a layout occurrence and is thus asynchronous. event_document_load_start 0x002a event_internal_load 0x005b used internally in gecko. example to listen to in-process accessibility invents, make your object an nsiobserver, and listen for accessible-event by using code something like this: nscomptr<nsiobserverservice> observerservice = do_getservice("@...
nsIAccessibleProvider
see constants for details. read only. ...
...see constants for details. read only. ...
...see constants for details. read only. ...
...ecolumns 0x0000101e xultreecolumnitem 0x0000101f xultoolbar 0x00001020 xultoolbarseparator 0x00001021 xultooltip 0x00001022 xultoolbarbutton 0x00001023 xforms elements constants constant value description xformscontainer 0x00002000 used for xforms elements that provide accessible object for itself as well for anonymous content. this property is used for upload, input[
type="xsd:gday"] and input[
type="xsd:gmonth"] xformslabel 0x00002001 used for label element. xformsouput 0x00002002 used for output element. xformstrigger 0x00002003 used for trigger and submit elements. xformsinput 0x00002004 used for input and textarea elements. xformsinputboolean 0x00002005 used for input[xsd:boolean] element. xformsinputdate 0x00002006 used for input[xsd:date] element.
nsIBrowserSearchService
ted in reaction to a user interaction, as initialization is complete by then, but this is an issue if your code is executed during startup. if you need to write code that is executed during startup and makes use of nsibrowsersearchservice, you should make sure that this code is executed from the callback to init(). ...
...may be null if there are no visible search engines. defaultengine nsisearchengine the default search engine. returns the first visible engine if the default engine is hidden. may be null if there are no visible search engines. read only. origi...
...nly. methods addengine() adds a new search engine from the file at the supplied uri, optionally asking the user for confirmation first. if a confirmation dialog is shown, it will offer the option to begin using the newly added engine right away; if no confirmation dialog is shown, the new engine will be used right away automatically. void addengine( in astring engineurl, in long data
type, in astring iconurl, in boolean confirm, [optional] in nsisearchinstallcallback callback ); parameters engineurl the url to the search engine's description file. data
type an integer representing the plugin file format. must be one of the supported search engine data
types defined above. iconurl a url string to an icon file to be used as the search...
... is added to the list. if this value is false, the engine will be added to the list upon successful load, but it will not be selected as the current engine. callback a nsisearchinstallcallback that will be notified when the addition is complete, or if the addition fails. it will not be called if addengine throws an exception. exceptions thrown ns_error_failure if the
type is invalid, or if the description file cannot be successfully loaded. addenginewithdetails() adds a new search engine, without asking the user for confirmation and without starting to use it right away. void addenginewithdetails( in astring name, in astring iconurl, in astring alias, in astring description, in astring method, in astring url ); parameters name the sear...
nsIComponentManager
getservice, this returns a new instance each time it is called. (see also nsifactory.createinstance.) void createinstance( in nscidref aclass, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters aclass the classid of the object instance that is being requested. adelegate the outer object used for aggregation. aiid the interface
type to be returned. result the resulting interface pointer. exceptions thrown ns_error_factory_not_registered indicates that the specified class is not registered. createinstancebycontractid() creates an instance of the class specified by contractid. void createinstancebycontractid( in string acontractid, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqire...
...stancebycontractid() creates an instance of the class specified by contractid. void createinstancebycontractid( in string acontractid, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters acontractid the contractid of the object instance that is being requested. adelegate the outer object used for aggregation. aiid the interface
type to be returned. result the resulting interface pointer. exceptions thrown ns_error_factory_not_registered indicates that the specified class is not registered. getclassobject() returns the factory object for the class specified by classid. void getclassobject( in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters aclass the classid...
...xceptions thrown ns_error_factory_not_registered indicates that the specified class is not registered. getclassobject() returns the factory object for the class specified by classid. void getclassobject( in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters aclass the classid of the factory that is being requested. aiid the interface
type to be returned. result the resulting interface pointer. exceptions thrown ns_error_factory_not_registered indicates that the specified class is not registered. getclassobjectbycontractid() returns the factory object for the class specified by contractid. void getclassobjectbycontractid( in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); par...
...ot_registered indicates that the specified class is not registered. getclassobjectbycontractid() returns the factory object for the class specified by contractid. void getclassobjectbycontractid( in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters acontractid the contractid of the factory that is being requested. aiid the interface
type to be returned. result the resulting interface pointer. exceptions thrown ns_error_factory_not_registered indicates that the specified class is not registered. removebootstrappedmanifestlocation() unregisters the chrome.manifest file previously registered with the addbootstrappedmanifestlocation() method. see addbootstrappedmanifestlocation() for details. void removebootstrappedmanif...
nsIDBChangeListener
ull. onhdrdeleted() called when a header is deleted from the database. void onhdrdeleted(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was removed. aparentkey the key of the parent folder for deleted header. the
typedef of nsmsgkey is given in mailnews
types2.idl. aflags the flags on the message. flags are defined in nsmsgmessageflags. ainstigator the caller who deleted the header. this can be used to filter out events that you yourself started. ainstigator may also be null. onhdradded() called when a header is added to the database. void onhdradded(in nsimsgdbhdr ahdrchanged, in nsms...
...igator may also be null. onhdradded() called when a header is added to the database. void onhdradded(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was added. aparentkey the key of the parent folder for new header. the
typedef of nsmsgkey is given in mailnews
types2.idl. aflags the flags on the message. flags are defined in nsmsgmessageflags. ainstigator the caller who added the header. this can be used to filter out events that you yourself started. ainstigator may also be null. onparentchanged() called when a message's parent is changing (i.e. most likely it is being moved). void onparentchanged(in nsmsgke...
... ainstigator may also be null. onparentchanged() called when a message's parent is changing (i.e. most likely it is being moved). void onparentchanged(in nsmsgkey akeychanged, in nsmsgkey oldparent, in nsmsgkey newparent, in nsidbchangelistener ainstigator); parameters akeychanged the key of the message that changed. the
typedef of nsmsgkey is given in mailnews
types2.idl. oldparent the key of the old parent folder for the header. the
typedef of nsmsgkey is given in mailnews
types2.idl. newparent the key of the new parent folder for the header. the
typedef of nsmsgkey is given in mailnews
types2.idl. ainstigator the caller who changed the parent. this can be used to filter out events that you yourself started. ains...
... ...
nsIDOMStorageEventObsolete
event is received, the recipient can check its domain attribute to determine 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.
... canbubblearg true if the event is allowed to bubble, otherwise false. cancelablearg true if the event can be canceled, otherwise false. ...
... canbubblearg true if the event is allowed to bubble, otherwise false. cancelablearg true if the event can be canceled, otherwise false. domainarg the domain to which the event belongs, or "#session" if the event is associated with session storage. ...
... canbubblearg true if the event is allowed to bubble, otherwise false. ...
nsIDirIndex
unspecified for directories. ...
...unspecified for directories. ...
...unspecified for directories. ...
...ilename, which should be displayed by a viewer. lastmodified prtime last-modified time in seconds-since-epoch. if the last modified time is unknown, this value is -1. location string the fully qualified filename, expressed as a uri. this is encoded with the encoding specified in the nsidirindexparser, and is also escaped. size long long file size; if the size is unknown, this value is -1.
type unsigned long the
type of the entry; one of the
type_* constants. constants constant value description
type_unknown 0 the
type is unknown.
type_directory 1 the directory entry represents a directory.
type_file 2 the directory entry represents a file.
type_symlink 3 the directory entry represents a symlink. see also nsidirindexlistener nsidirindexparser ...
nsIExternalHelperAppService
uriloader/exthandler/nsiexternalhelperappservice.idlscriptable the external helper app service is used for finding and launching platform specific external applications for a given mime content
type. inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/uriloader/external-helper-app-service;1. ...
...ted by: @mozilla.org/uriloader/external-helper-app-service;1. to access this service, use: var externalhelperappservice = components.classes["@mozilla.org/uriloader/external-helper-app-service;1"] .getservice(components.interfaces.nsiexternalhelperappservice); method overview boolean applydecodingforextension(in autf8string aextension, in acstring aencoding
type); nsistreamlistener docontent(in acstring amimecontent
type, in nsirequest arequest, in nsiinterfacerequestor awindowcontext, in boolean aforcesave); methods applydecodingforextension() determines whether or not data whose filename has the specified extension should be decoded from the specified encoding
type before being saved or delivered to helper applications. boolean applydecod...
... in nsirequest arequest, in nsiinterfacerequestor awindowcontext, in boolean aforcesave); methods applydecodingforextension() determines whether or not data whose filename has the specified extension should be decoded from the specified encoding
type before being saved or delivered to helper applications. boolean applydecodingforextension( in autf8string aextension, in acstring aencoding
type ); parameters aextension the filename extension to check. aencoding
type the encoding
type to check. return value true if data from urls with the specified extension and encoding should be decoded prior to saving the file or delivering it to a helper application; otherwise false. docontent() binds an external helper application to a stream listener. the caller should pump data i...
...uld be decoded prior to saving the file or delivering it to a helper application; otherwise false. docontent() binds an external helper application to a stream listener. the caller should pump data into the returned stream listener. when the onstoprequest is issued, the stream listener implementation will launch the helper app with this data. nsistreamlistener docontent( in acstring amimecontent
type, in nsirequest arequest, in nsiinterfacerequestor awindowcontext, in boolean aforcesave ); parameters amimecontent
type the content
type of the incoming data. arequest the request corresponding to the incoming data. awindowcontext use nsiservicemanager.getinterface() to retrieve properties like the dom window or parent window; the service might need this in order to...
nsIFeed
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 / seamonkey 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 describes the software that produced a feed. ...
...e feed, based on its description, subtitle, and appropriate extensions. textinput nsiwritablepropertybag2 information about a text box that can be displayed along with the feed by aggregators that support it, to allow the reader to send a response back to the source of the feed. note: this field is almost never used, and is incompatible with many aggregators. ...
...tle, and appropriate extensions. textinput nsiwritablepropertybag2 information about a text box that can be displayed along with the feed by aggregators that support it, to allow the reader to send a response back to the source of the feed. note: this field is almost never used, and is incompatible with many aggregators.
type unsigned long indicates the
type of content presented by a feed. ...
... be displayed along with the feed by aggregators that support it, to allow the reader to send a response back to the source of the feed. note: this field is almost never used, and is incompatible with many aggregators.
type unsigned long indicates the
type of content presented by a feed. see constants. note: you should consider this a bit mask of values; at some point, the
type may include more than one of these values ored together. read only. constants constant value description
type_feed 0 a standard text-based feed.
type_audio 1 an audio feed, such as a podcast.
type_image 2 an image feed, such as a photocast.
type_video 4 a video feed, such as a videocast. see also nsifeedc...
nsIFilePicker
rfaces.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 afilepickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute
type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's platform). this attribute has no effect if private browsing mode is in effect. defaultextension astring the extension for the
type of files you want to work wit...
...note: only works with modeopenmultiple mode. fileurl nsiuri the uri of the currently selected file or directory. read only. filterindex long the (0-based) index of the filter which is currently selected in the file picker dialog. set this to choose a particular filter to be selected by default. constants mode constants these constants are used to specify the
type of file picker to create when calling init(). constant value description modeopen 0 load a file. modesave 1 save a file. modegetfolder 2 select a folder/directory. modeopenmultiple 3 load multiple files. return value constants these values are returned by show() or passed as an argument to open()'s callback, indic...
...for the most up to date list see filepicker.properties. constant value description filterall 0x001 corresponds to the *.* filter for file extensions. all files will pass through the filter. filterhtml 0x002 corresponds to the *.html, *.htm, *.shtml and *.xhtml filters for file extensions. filtertext 0x004 corresponds to the *.txt and ...
...widget. the file picker is not valid until this method is called. void init( in nsidomwindow parent, in astring title, in short mode ); parameters parent the nsidomwindow parent. this dialog will be dependent on this parent. must be non-null. title the file picker dialog title. if this is null, the dialog will have the default title. mode one of the mode constants, indicating the
type of 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 / se...
nsIJumpListBuilder
nsijumplistbuilder does not filter entries added that have been removed since the last commit. to prevent repeatedly adding entires users have removed, applications are encouraged to track removed items internally. each list is made up of an array of nsiwinjumplistitems representing items such as shortcuts, links, and separators. ...
... commit. to prevent repeatedly adding entires users have removed, applications are encouraged to track removed items internally. each list is made up of an array of nsiwinjumplistitems representing items such as shortcuts, links, and separators. see nsijumplistitem for information on adding additional jump list
types. method overview void abortlistbuild(); boolean addlisttobuild(in short acat
type, in nsiarray items optional, in astring catname optional); boolean commitlistbuild(); boolean deleteactivelist(); boolean initlistbuild(in nsimutablearray removeditems); attributes attribute
type description available short indicates whether jump list taskbar features are supported by the current host. read only. islistcommitted boolean jumplist management. indicates if a commit ...
...egory_customlist 3 custom lists can be made up of tasks, links, and separators. the title of of the list is passed through the optional string parameter of addbuildlist. methods abortlistbuild() aborts and clears the current jump list build. void abortlistbuild(); parameters none. addlisttobuild() adds a list and if required, a set of items for the list. boolean addlisttobuild( in short acat
type, in nsiarray items, optional in astring catname optional ); parameters acat
type the
type of list to add. items optional an array of nsijumplistitem items to add to the list. catname optional for custom lists, the title of the list. return value true if the operation completed successfully. exceptions thrown ns_error_unexpected on internal errors. ns_error_illegal_value if an item is added...
...rray of nsijumplistitem items to add to the list. catname optional for custom lists, the title of the list. return value true if the operation completed successfully. exceptions thrown ns_error_unexpected on internal errors. ns_error_illegal_value if an item is added that was removed since the last commit. ns_error_invalid_arg if incorrect parameters are passed for a particular category or item
type. commitlistbuild() commits the current jump list build to the taskbar. boolean commitlistbuild(); parameters none. return value true if the operation completed successfully. deleteactivelist() deletes any currently applied taskbar jump list for this application. common uses would be the enabling of a privacy mode and uninstallation. boolean deleteactivelist(); parameters none. return value tru...
nsIMsgDatabase
b/msgdb/public/nsimsgdatabase.idlscriptable please add a summary to this article. ...
... nextfakeofflinemsgkey nsmsgkey readonly: for saving "fake" offline msg hdrs.
...olderinfo readonly: firstnew nsmsgkey readonly: msgretentionsettings nsimsgretentionsettings msgdownloadsettings nsimsgdownloadsettings lowwaterarticlenum nsmsgkey readonly: highwaterarticlenum nsmsgkey readonly: nextpseudomsgkey nsmsgkey for undo-redo of move pop->imap. nextfakeofflinemsgkey nsmsgkey readonly: for saving "fake" offline msg hdrs. defaultviewflags nsmsgviewflags
typevalue readonly: defaultsort
type nsmsgviewsort
typevalue readonly: defaultsortorder nsmsgviewsortordervalue readonly: msghdrcachesize unsigned long folderstream nsioutputstream summaryvalid boolean methods open() opens a database folder. void open(in nsilocalfile afoldername, in boolean acreate, in boolean aleaveinvaliddb); parameters afoldername the name...
...atabase is present (and was opened), but the summary file is out of date. ns_msg_error_folder_summary_missing the database is present (and was opened), but the summary file is missing. forcefolderdbclosed() void forcefolderdbclosed(in nsimsgfolder afolder); parameters afolder close() void close(in boolean aforcecommit); parameters aforcecommit commit() void commit(in nsmsgdbcommit commit
type); parameters commit
type forceclosed() force closed is evil, and we should see if we can do without it. in 4.x, it was mainly used to remove corrupted databases. void forceclosed(); clearcachedhdrs() void clearcachedhdrs(); resethdrcachesize() void resethdrcachesize(in unsigned long size); getmsghdrforkey() nsimsgdbhdr getmsghdrforkey(in nsmsgkey key); parameters key getmsghdrformessa...
nsIMsgFolder
n nsmsgkey msgkey, out pruint32 offset, out pruint32 size); void downloadmessagesforoffline(in nsisupportsarray messages, in nsimsgwindow window); nsimsgfolder getchildwithuri(in acstring uri, in boolean deep, in boolean caseinsensitive); void downloadallforoffline(in nsiurllistener listener, in nsimsgwindow window); void enablenotifications(in long notification
type, in boolean enable, in boolean dbbatching); boolean iscommandenabled(in acstring command); boolean matchorchangefilterdestination(in nsimsgfolder folder,in boolean caseinsensitive); boolean confirmfolderdeletionforfilter(in nsimsgwindow msgwindow); void alertfilterchanged(in nsimsgwindow msgwindow); void throwalertmsg(in string msgname, in nsimsgwindow...
... ...
...s new mail waiting. nsmsgbiffstate_nomail 1 no new mail is waiting. nsmsgbiffstate_unknown 2 we dunno whether there is new mail. nsmsgdispositionstate_none -1 nsmsgdispositionstate_replied 0 nsmsgdispositionstate_forwarded 1 allmessagecountnotifications 0 turn notifications on/off for various notification
types. currently only supporting allmessagecountnotifications which refers to both total and unread message counts. methods startfolderloading() void startfolderloading(); endfolderloading() void endfolderloading(); updatefolder() get new headers for the database. void updatefolder(nsimsgwindow awindow); getfilterlist() get the filter list on folder's server (or in the case of ne...
...msgwindow window); getchildwithuri() nsimsgfolder getchildwithuri(in acstring uri, in boolean deep, in boolean caseinsensitive); downloadallforoffline() void downloadallforoffline(in nsiurllistener listener, in nsimsgwindow window); enablenotifications() void enablenotifications(in long notification
type, in boolean enable, in boolean dbbatching); iscommandenabled() boolean iscommandenabled(in acstring command); matchorchangefilterdestination() boolean matchorchangefilterdestination(in nsimsgfolder folder, in boolean caseinsensitive); confirmfolderdeletionforfilter() boolean confirmfolderdeleti...
nsIMsgProtocolInfo
the nsimsgprotocolinfo interface describes the capabilities of an account
type. inherits from: nsisupports implemented by: @mozilla.org/messenger/protocol/info;1?
type=acct, where acct is the account
type that are you are interested in. method overview long getdefaultserverport(in boolean issecure); attributes attribute
type description candelete boolean true if an account of this
type may be deleted. read only. canduplicate boolean unused. read only. cangetincomingmessages boolean true if junk ui actions should be enabled for the account
type. read only. cangetmessages boolean true if "get messages" ui actions should be enabled for the account
type. read only. canloginatstartup ...
...of this
type may be deleted. read only. canduplicate boolean unused. read only. cangetincomingmessages boolean true if junk ui actions should be enabled for the account
type. read only. cangetmessages boolean true if "get messages" ui actions should be enabled for the account
type. read only. canloginatstartup boolean true if the account
type can perform biff during startup. read only. defaultdobiff boolean true if the biff should be enabled by default for the account
type. read only. defaultlocalfilepath nsilocalfile the default path under which all server data for this account
type will be stored. folderscreateasync boolean new in thunderbird 24 (bug 832034) preflightprettynamewi...
... preflightprettynamewithemailaddress boolean unused. read only. requiresusername boolean true if the server requires a username to log on. read only. serveriid nsiidptr the iid of the server-specific interface, used during account creation. read only. showcomposemsglink boolean true if compose ui actions should be enabled for the account
type. read only. specialfoldersdeletionallowed boolean true if the user can delete folders like inbox, trash, etc. read only. methods getdefaultserverport() returns the default port for a connection to a server of this account
type. long getdefaultserverport( in boolean issecure ); parameters issecure whether or not the connection will be secure. return value the de...
...d boolean true if the user can delete folders like inbox, trash, etc. read only. methods getdefaultserverport() returns the default port for a connection to a server of this account
type. long getdefaultserverport( in boolean issecure ); parameters issecure whether or not the connection will be secure. return value the default port number for connections of this account
type. remarks this is one of the interfaces that is required to create a new account
type. see also nsimsgincomingserver ...
nsINavHistoryContainerResultNode
read only. childrenreadonly boolean false if the node's list of children can be modified (by adding or removing children, or rearranging them), or true if the user interface should not allow the list of children to be altered. read-only. this is ...
...etchild() or access childcount results in an error. when you're done reading the container's children, set this to false. for host and day groupings, doing this has no performance cost since the children have already been computed. for queries and bookmark folders, however, being open means they must keep themselves up-to-date by listening for updates and re-querying as needed. dynamiccontainer
type autf8string a string representing the dynamic container api service responsible for this container. accessing this throws an exception if the node isn't a dynamic container. read only. haschildren boolean indicates whether or not the node can have children, and may be used whether the container is open or closed. when the container is closed, the result is an exact answer if the node can be pop...
...answer if the node can be populated easily (for example, for bookmark folders). if it can't be populated easily (for complex history queries, for example), the result is always true. when the container is open, the result is always accurate. this value is intended to be used to see if the "+" should be drawn next to a tree item, indicating that the item can be opened. read-only. ...
...curate. this value is intended to be used to see if the "+" should be drawn next to a tree item, indicating that the item can be opened. read-only. remotecontainer
type obsolete since gecko 1.9 autf8string a string representing the remote container service api that is responsible for this container. if there is no such api, this value is an empty string. read only. the container may be a result_
type_remote_container node that has been dynamically generated by the remote container api, or a bookmark folder (result_
type_folder) for which some service (such as livemarks) has registered to provide certain operations. state unsigned short the current state of the container. this is one of the state constants. constants state constants constant value description state_closed 0 the co...
nsINavHistoryFullVisitResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable this interface describes a result from a result_
type_full_visit query on the places service. this includes more detailed information than the result_
type_visit query (which returns nsinavhistoryvisitresultnode, and as such takes more time to look up. 1.0 66 introduced gecko 1.9 inherits from: nsinavhistoryvisitresultnode last changed in gecko 1.9 (firefox 3) the information returned in this interface is not commonly used, hence its separation into a separate query
type for efficiency. attributes attribute
type description referringvisitid long long the referring visit id; the referrer should have the same session id as the visit described by this record. read only...
...read only. ...
...read only. visitid long long the visit id of the visit. read only. ...
...read only. visitid long long the visit id of the visit. read only. ...
nsINetworkLinkService
the link is only up when network connections can be established. for example, the link is down during dhcp configuration (unless there is another usable interface already configured). if the link status is not currently known, we generally assume that it...
... link is only up when network connections can be established. for example, the link is down during dhcp configuration (unless there is another usable interface already configured). if the link status is not currently known, we generally assume that it is up. read only. linkstatusknown boolean this is set to true when we believe that islinkup is accurate. read only. link
type unsigned long the
type of network connection, one of the link_
type_* constants. read only. note: as of gecko 8.0, all operating systems currently return link_
type_unknown. android support was backed out due to perceived security concerns, see bug 691054. as of gecko 28.0 android support is available again, see bug 939680. constants constant value ...
...e of network connection, one of the link_
type_* constants. read only. note: as of gecko 8.0, all operating systems currently return link_
type_unknown. android support was backed out due to perceived security concerns, see bug 691054. as of gecko 28.0 android support is available again, see bug 939680. constants constant value description link_
type_unknown 0 we were unable to determine the network connection
type. link_
type_ethernet 1 a standard wired ethernet connection. link_
type_usb 2 a connection via a usb port. link_
type_wifi 3 a connection via a wifi access point (ieee802.11). link_
type_wimax 4 a connection via wimax (ieee802.16). ...
...iption link_
type_unknown 0 we were unable to determine the network connection
type. link_
type_ethernet 1 a standard wired ethernet connection. link_
type_usb 2 a connection via a usb port. link_
type_wifi 3 a connection via a wifi access point (ieee802.11). link_
type_wimax 4 a connection via wimax (ieee802.16). link_
type_2g 5 a '2g' mobile connection (for example, gsm, gprs, edge). link_
type_3g 6 a '3g' mobile connection (for example, umts, cdma). link_
type_4g 7 a '4g' mobile connection (for example, lte, umb). ...
nsIPermission
rmission 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. ...
...e/public/nsipermission.idlscriptable please add a summary to this article. last changed in gecko 2 (firefox 4 / thunderbird 3.3 / seamonkey 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. expire
type pruint32 the expiration
type of the permission: on session termination, on a specified time, or never. constants are defined in nsipermissionmanager.permission_expiration_...
...this is a case-sensitive string. ...
...this is a case-sensitive string. ...
nsIProfile
shutdow...
... shutdown_cleanse 0x00000002 when shutting down ...
... shutdown_cleanse 0x00000002 when shutting down the profile, discard changes. ...
... in wstring newname ); parameters oldname the name of the profile to rename. newname the new name to assign to the profile. exceptions thrown ns_error_failure a profile already exists with the name newname. shutdowncurrentprofile() shuts down the current profile; this essentially "logs out" the current profile. void shutdowncurrentprofile( in unsigned long shutdown
type ); parameters shutdown
type the
type of shutdown to perform; see shutdown
type constants. see also nsitoolkitprofileservice ...
nsIPropertyBag
read only. methods getproperty() get a property value for the given name. ...
...t. examples get user agent information (operating system specifics. the window scope is not always accessible so the window.navigator cannot be accessed. ...
...les get user agent information (operating system specifics. the window scope is not always accessible so the window.navigator cannot be accessed. ...
...services.appinfo.os simply tells us winnt only, this is not helpful to differentiate between windows xp, vista, 7, etc. to do this use nsipropertybag: services.sysinfo.getproperty("version"); //output 5.1 services.sysinfo.getproperty("name"); //output windows_nt services.sysinfo.getproperty("arch"); //output x86 services.sysinfo.getprope...
nsIRadioInterfaceLayer
obsolete since gecko 13.0 microphonemuted bool radiostate jsval read only. speakerenabled bool constants call state ...
...obsolete since gecko 13.0 microphonemuted bool radiostate jsval read only. ...
...ge, in long requestid, in unsigned long long processid ); parameters number a domstring with a telephone number to send to. message the text message as a domstring. requestid missing description processid missing description setupdatacall() pdp apis. ...
...a domstring. requestid missing description processid missing description setupdatacall() pdp apis. void setupdatacall( in long radiotech, in domstring apn, in domstring user, in domstring passwd, in long chappap, in domstring pdp
type ); parameters radiotech missing description apn missing description user missing description passwd missing description chappap missing description pdp
type missing description exceptions thrown missing exception missing description starttone() void starttone( in domstring dtmfchar ); parameters dtmfchar missing description exceptions thrown missing exception missing description stoptone() void stoptone(); parameters none. exceptions thrown missing exception missing description unregistercallback() void unregistercallback( in nsiriltel...
nsIServiceManager
eturns a reference to a particular xpcom service given the classid of the service. unlike createinstance, this will always return the same object each time it is called with the same arguments. void getservice( in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters aclass the classid of the service that is being requested. aiid the interface
type to be returned. result the resulting interface pointer. exceptions thrown ns_error_factory_not_registered indicates that the specified class is not registered. getservicebycontractid() this method returns a reference to a particular xpcom service given the contractid of the service. void getservicebycontractid( in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out n...
...that the specified class is not registered. getservicebycontractid() this method returns a reference to a particular xpcom service given the contractid of the service. void getservicebycontractid( in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters acontractid the contractid of the service that is being requested. aiid the interface
type to be returned. result the resulting interface pointer. exceptions thrown ns_error_factory_not_registered indicates that the specified class is not registered. isserviceinstantiated() this method tests whether or not a xpcom service, identified by classid, has been instantiated. boolean isserviceinstantiated( in nscidref aclass, in nsiidref aiid ); parameters aclass the clas...
...xceptions thrown ns_error_factory_not_registered indicates that the specified class is not registered. isserviceinstantiated() this method tests whether or not a xpcom service, identified by classid, has been instantiated. boolean isserviceinstantiated( in nscidref aclass, in nsiidref aiid ); parameters aclass the classid of the service that is being tested. aiid the interface
type to be tested. return value true if the service has already been created. exceptions thrown ns_error_service_not_available indicates that the service hasn't been instantiated. ns_nointerface indicates that the iid given isn't supported. isserviceinstantiatedbycontractid() this method tests whether or not a xpcom service, identified by contractid, has been instantiated. boolean isserv...
...ated. ns_nointerface indicates that the iid given isn't supported. isserviceinstantiatedbycontractid() this method tests whether or not a xpcom service, identified by contractid, has been instantiated. boolean isserviceinstantiatedbycontractid( in string acontractid, in nsiidref aiid ); parameters acontractid the contractid of the service that is being tested. aiid the interface
type to be tested. return value true if the service has already been created. exceptions thrown ns_error_service_not_available indicates that the service hasn't been instantiated. ns_nointerface indicates that the iid given isn't supported. remarks the service manager depends on the repository to find and instantiate factories to obtain services. because services are instantiated lazily,...
nsIStandardURL
des some customization on how urls are normalized. inherits from: nsimutable last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/standard-url;1. to create an instance, use: var standardurl = components.classes["@mozilla.org/network/standard-url;1"] .createinstance(components.interfaces.nsistandardurl); method overview void init(in unsigned long aurl
type, in long adefaultport, in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute
type description mutable boolean control whether or not this url can be modified. protocol handlers can set this flag before handing out an url to ensure that it is not inadvertently modified. obsolete since gecko 1.9 constants these constants describe how to normalize an ur...
... aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute
type description mutable boolean control whether or not this url can be modified. protocol handlers can set this flag before handing out an url to ensure that it is not inadvertently modified. obsolete since gecko 1.9 constants these constants describe how to normalize an url. ...
...ed. protocol handlers can set this flag before handing out an url to ensure that it is not inadvertently modified. obsolete since gecko 1.9 constants these constants describe how to normalize an url. constant value description url
type_standard 1 blah:foo/bar => blah://foo/bar blah:/foo/bar => blah:///foo/bar blah://foo/bar => blah://foo/bar blah:///foo/bar => blah:///foo/bar url
type_authority 2 blah:foo/bar => blah://foo/bar blah:/foo/bar => blah://foo/bar blah://foo/bar => blah://foo/bar blah:///foo/bar => blah://foo/bar url
type_no_authority 3 blah:foo/bar => blah:///foo/bar blah:/foo/bar => blah:///foo/bar blah://foo/bar => blah://foo/bar blah:///foo/bar => blah:///foo/bar methods init() normalizes a given url to an standard url. void init( in unsi...
... blah:foo/bar => blah://foo/bar blah:/foo/bar => blah://foo/bar blah://foo/bar => blah://foo/bar blah:///foo/bar => blah://foo/bar url
type_no_authority 3 blah:foo/bar => blah:///foo/bar blah:/foo/bar => blah:///foo/bar blah://foo/bar => blah://foo/bar blah:///foo/bar => blah:///foo/bar methods init() normalizes a given url to an standard url. void init( in unsigned long aurl
type, in long adefaultport, in autf8string aspec, in string aorigincharset, in nsiuri abaseuri ); parameters aurl
type one of the constants listed above. adefaultport if the port parsed from the url string matches this port, then the port will be removed from the canonical form of the url. aspec url string. aorigincharset the charset from which this uri string originated. this corresponds to ...
nsISupportsPrimitive
xpcom/ds/nsisupportsprimitives.idlscriptable this interface serves as a base interface for all of the nsisupports* family of interfaces. inherits from: nsisupports last changed in gecko 1.7 attributes attribute
type description
type unsigned short this attribute provides access to the
type represented by the nsisupportsprimitive instance. constants constant value description
type_id 1 corresponding to nsisupportsid.
type_cstring 2 corresponding to nsisupportscstring.
type_string 3 corresponding to nsisupportsstring. ...
...ts from: nsisupports last changed in gecko 1.7 attributes attribute
type description
type unsigned short this attribute provides access to the
type represented by the nsisupportsprimitive instance. constants constant value description
type_id 1 corresponding to nsisupportsid.
type_cstring 2 corresponding to nsisupportscstring.
type_string 3 corresponding to nsisupportsstring.
type_prbool 4 corresponding to nsisupportsprbool.
type_pruint8 5 corresponding to nsisupportspruint8.
type_pruint16 6 corresponding to nsisupportspruint16.
type_pruint32 7 corresponding to nsisupportspruint32.
type_pruint64 8 corresponding to nsisupportspruint64.
type_prtime 9 corresponding to nsisupportsprtime. ...
...nsisupportscstring.
type_string 3 corresponding to nsisupportsstring.
type_prbool 4 corresponding to nsisupportsprbool.
type_pruint8 5 corresponding to nsisupportspruint8.
type_pruint16 6 corresponding to nsisupportspruint16.
type_pruint32 7 corresponding to nsisupportspruint32.
type_pruint64 8 corresponding to nsisupportspruint64.
type_prtime 9 corresponding to nsisupportsprtime.
type_char 10 corresponding to nsisupportschar.
type_print16 11 corresponding to nsisupportsprint16.
type_print32 12 corresponding to nsisupportsprint32.
type_print64 13 corresponding to nsisupportsprint64.
type_float 14 corresponding to nsisupportsfloat.
type_double 15 corresponding to nsisupportsdouble.
type_void 16 corresponding to nsisupportsvoid. ...
... remarks this interface was frozen for gecko 1.2. see bug 166426 for details. from gecko 2.0 interfaces are no longer frozen. ...
nsIUploadChannel
netwerk/base/public/nsiuploadchannel.idlscriptable a channel may optionally implement this interface if it supports the notion of uploading a data stream. the upload stream may only be set prior to the invocation of asyncopen on the channel. inherits from: nsisupports last changed in gecko 1.7 method overview void setuploadstream(in nsiinputstream astream, in acstring acontent
type, in long acontentlength); attributes attribute
type description uploadstream nsiinputstream get the stream (to be) uploaded by this channel. read only. methods setuploadstream() sets a stream to be uploaded by this channel. most implementations of this interface require that the stream: implement threadsafe addref and release implement nsiinputstream.readsegments() implement nsiseekable...
... be) uploaded by this channel. read only. methods setuploadstream() sets a stream to be uploaded by this channel. most implementations of this interface require that the stream: implement threadsafe addref and release implement nsiinputstream.readsegments() implement nsiseekablestream.seek(). ...
...nt nsiseekablestream.seek(). history here is that we need to support both streams that already have headers (for example, content-
type and content-length) information prepended to the stream (by plugins) as well as clients (composer, uploading application) that want to upload data streams without any knowledge of protocol specifications. for this reason, we have a special meaning for the acontent
type parameter. void setuploadstream( in nsiinputstream astream, in acstring acontent
type, in long acontentlength ); parameters astream the stream to be uploaded by this channel. acontent
type if acontent
type is empty, the protocol will assume that no content headers are to be added to the uploaded stream and that any required headers are already encoded in the stream. in the case of http, if t...
...in the case of ftp and file, this parameter is ignored. acontentlength a value of -1 indicates that the length of the stream should be determined by calling the stream's available method. ...
nsIWebBrowserPersist
s.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, in nsisupports adatapath, in string aoutputcontent
type, in unsigned long aencodingflags, in unsigned long awrapcolumn); void saveuri(in nsiuri auri, in nsisupports acachekey, 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 acachekey, in nsiuri areferrer, in long areferr...
...read only. persistflags unsigned long flags governing how data is fetched and saved from the network. it is best to set this value explicitly unless you are prepared to accept the default values. progresslistener nsiwebprogresslistener callback listener for progress notifi...
...his may be a nsilocalfile object or an nsiuri object with a file scheme. savedocument() save the specified dom document to file and optionally all linked files (for example images, css, js & subframes). do not call this method until the document has finished loading! void savedocument( in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aoutputcontent
type, in unsigned long aencodingflags, in unsigned long awrapcolumn ); parameters adocument document to save to file. some implementations of this interface may also support nsnull to imply the currently loaded document. afile target local file. this may be a nsilocalfile object or an nsiuri object with a file scheme or a scheme that supports uploading (for example ftp). adatapath path t...
...imply the currently loaded document. afile target local file. this may be a nsilocalfile object or an nsiuri object with a file scheme or a scheme that supports uploading (for example ftp). adatapath path to directory where uris linked to the document are saved or nsnull if no linked uris should be saved. this may be a nsilocalfile object or an nsiuri object with a file scheme. aoutputcontent
type the desired mime
type format to save the document and all sub-documents into or nsnull to use the default behavior. aencodingflags flags to pass to the encoder. awrapcolumn for text documents, indicates the desired width to wrap text at. parameter is ignored if wrapping is not specified by the encoding flags. exceptions thrown ns_error_invalid_arg one or more arguments was invalid. s...
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 / seamonkey 2.0) method overview void initmessageevent(in domstring a
typearg, 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 even...
... acanbubblearg whether or not the event can bubble. acancelablearg whether or not the event can be canceled. ...
... acanbubblearg whether or not the event can bubble. acancelablearg whether or not the event can be canceled. ...
... acanbubblearg whether or not the event can bubble. acancelablearg whether or not the event can be canceled. adataarg the data to place into the data attribute. ...
XPCOM category image-sniffing-services
note: this category was removed. ...
...note: this category was removed. ...
...note: this category was removed. ...
...ot be correctly displayed. in firefox 3, a new xpcom category was added in bug 391667 to allow "third-party" xpcom components to identify images based on their content. if mozilla's built-in image code cannot identify an image, then any xpcom components implementing the nsicontentsniffer interface may register under the "image-sniffing-services" category, and will be queried to determine the mime
type of the image being downloaded. note: this category was removed. see bug 813787 - remove support for image-sniffing-services. ...
nsCOMPtr versus RefPtr
this basic rule derives from the fact that some of the nscomptr<t> code is factored into the nscomptr_base base class, which stores the underlying mrawptr as an nsisupports*. ...
... this basic rule derives from the fact that some of the nscomptr<t> code is factored into the nscomptr_base base class, which stores the underlying mrawptr as an nsisupports*. ...
...be added to t that would then cause unrelated code to break, which would be very confusing. hence, the interface versus concrete class rule of thumb: interfaces will never multiply inherit from nsisupports, so they can always use be used with nscomptr without fear of breaking in the future. concrete classes should only be used with refptr. nscomptr<t> also requires that you can queryinterface to
type t. it does this so that it can assert that mrawptr is a canonical t pointer (i.e., that mrawptr->queryinterface(t_iid) == mrawptr). do_queryinterface versus do_queryobject the do_queryinterface helper is only available when assigning to nscomptr. it also requires that the argument singly inherit from nsisupports (since the
type of the argument is nsisupports*). for other cases, there is do_quer...
... is do_queryobject, which is essentially a more powerful form of do_queryinterface. it differs from do_queryinterface as follows: do_queryobject inherits from nscomptr_helper, so it can be assigned into both nscomptr and refptr. the downside of this inheritance is that do_queryobject requires an extra virtual call to operator() in the helper method. do_queryobject is templated on the argument
type, so it's possible to pass in objects that multiply inherit from nsisupports. however, when the destination
type is an xpcom interface, it's probably better to static_cast to a class that unambiguously inherits from nsisupports and use do_queryinterface in such cases. ...
nsIMsgCloudFileProvider
displayname acstring readonly: used for displaying the service name in the user interface. serviceurl acstring readonly: a link to the homepage of the ser...
... 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. ...
... 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...
... displayname acstring readonly: used for displaying the service name in the user interface. ...
LDAP Support
rage 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 seamonkey application suite. ...
... 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 seamonkey 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, the
type down window can be customized to show arbitrary ldap fields. this can be accomplished by settin...
...the commentformat preference is set on each directory. ...
...the extra ldap attribute which should be used in the comment field along with how the attribute should be formatted. it expects the following format: the desired ldap attribute should be wrapped in square brackets. in this example, we are setting the organization unit as the ldap attribute. you can also insert arbitrary text to clarify the ldap attribute. i.e. "department: [ou]" would yield a
type down entry that looks like "john smit department: client engineering". ldap schema the following table summarizes the schema used by thunderbird to map between ldap attributes and attributes within the the address book. some notes about the relationship: there is a many to one relationship between ldap attributes and its address book counterpart. there is a one to one relationship be...
The libmime module
warning: the content of this article may be out of date. it was imported from mozilla.org and last updated in 2002. by richard h. pizzarro <rhp@netscape.com> this module, libmime, implements a general-purpose mime parser. one of the methods provided by this parser is the ability to emit an html representation of the data stream. the parser is object-oriented. there is a class for each mime
type, and each class is responsible for parsing itself, and/or handing the input data off to one of its child objects. the definition of these classes is somewhat idiosyncratic and consists of an internally defined object system, instead of c++. there is one header file and one source file for each class (for example, the mimeinlinetext class is defined in "mimetext.h" and "mimetext.c".) each heade...
..., and/or handing the input data off to one of its child objects. the definition of these classes is somewhat idiosyncratic and consists of an internally defined object system, instead of c++. there is one header file and one source file for each class (for example, the mimeinlinetext class is defined in "mimetext.h" and "mimetext.c".) each header file follows the following boiler-plate form:
typedefs these come first to avoid circular dependencies.
typedef struct foobarclass foobarclass;
typedef struct foobar foobar; class declaration theis structure defines the callback routines and other per-class data of the class defined in this module. struct foobarclass { parentclass superclass; ...any callbacks or class-variables... }; class definition th...
...s declaration theis structure defines the callback routines and other per-class data of the class defined in this module. struct foobarclass { parentclass superclass; ...any callbacks or class-variables... }; class definition this variable holds an instance of the one-and-only class record; the various instances of this class point to this object. (one interrogates the
type of an instance by comparing the value of its class pointer with the address of this variable.) extern foobarclass foobarclass; instance declaration theis structure defines the per-instance data of an object, and a pointer to the corresponding class record. struct foobar { parent parent; ...any instance variables... }; then, in the corresponding .c file, the followi...
... | | | | | |--- mimemultipartalternative | | | | | |--- mimemultipartrelated | | | | | |--- mimemultipartappledouble | | | | | |--- mimesunattachment | | | | | |--- mimemultipartsigned (abstract) | | | |--- mimemessage | | | |--- mimeun
typedtext | |--- mimeleaf (abstract) | | | |--- mimeinlinetext (abstract) | | | | | |--- mimeinlinetextplain | | | | | |--- mimeinlinetexthtml | | | | | |--- mimeinlinetextrichtext | | | | | | | |--- mimeinlinetextenriched | | | | | |--- mime...
Theme Packaging
g is a 32x32 (max. 48x48) png (may contain alpha transparency) which will show up in the appearance section of the add-ons manager. ...
...2 (max. 48x48) png (may contain alpha transparency) which will show up in the appearance section of the add-ons manager. ...
...f 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:
type>4</em:
type> more properties </description> </rdf> required install.rdf properties your install.rdf file must have the following properties. see the install.rdf reference for more information: em:id em:version em:
type em:targetapplication em:name em:internalname optional install.rdf properties em:description em:creator em:contributor em:homepageurl em:updateurl note that if your theme will be made available on the https://addons.mozilla.org website, it may not include an updateurl. sample install.rdf file <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns...
...e available on the https://addons.mozilla.org website, it may not include an updateurl. sample install.rdf file <?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>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id> <em:version>1.0</em:version> <em:
type>4</em:
type> <!-- target application this extension can install into, with minimum and maximum supported versions. --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>0.9</em:maxversion> </description> </em:targetapplication> <!-- front end met...
Using the Multiple Accounts API
e any of the relevant objects because the account manager needs to keep track of all of these objects as they are created. to create accounts using the api, you should do the following: create a fresh identity with createidentity(); assign values to the various identity properties as necessary. create a fresh incoming server with createincomingserver(). you will need to pass it the server
type as a string, from the list above. assign values to the various server properties as necessary. the most important properties here are the username and the hostname. create a fresh account with createaccount(); assign the server to the account with the incomingserver attribute. assign the identity to the account with the addidentity() method. some sample code: (where accountmanager is t...
...k 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 accounts using the ui. relevant api calls: nsimsgaccount nsimsgaccountmanager.createaccount() nsimsgaccount nsimsgaccountmanager.getaccount(in string key) nsimsgincomingserver nsimsgaccountmanager.createincomingserver(in string
type) nsimsgincomingserver nsimsgaccountmanager.getincomingserver(in string key) smtp servers smtp servers are kept separately from all the other account management stuff. a user's smtp servers are not actually dependant on any of the account settings. the only thing that determines which smtp server a user should use is their physical connection to the internet. for instance, if a user is con...
... the incoming server associated with this account. the preference is the preference "key" used, such as "server1". preference: mail.account.account.identities idl: nsimsgaccount.identities the list of identites associated with this account. the preference is a comma-seperated list of preference "keys" such as "identity1,identity2". ...
...with this account. the preference is the preference "key" used, such as "server1". preference: mail.account.account.identities idl: nsimsgaccount.identities the list of identites associated with this account. the preference is a comma-seperated list of preference "keys" such as "identity1,identity2". ...
Working with windows in chrome code
w.openwindow(null, "chrome://myextension/content/about.xul", "aboutmyextension", "chrome,centerscreen", null); window object note the win variable in the above section, which is assigned the return value of window.open. it can be used to access the opened window. the return value of window.open (and similar methods) is a window object (usually chromewindow) – the same
type as the window variable. technically speaking, it implements a number of interfaces, including nsidomjswindow and nsidomwindow, but it also contains the user-defined properties for global variables and functions of the window. so, for example, to access the dom document corresponding to the window, you can use win.document. note however, that the open() call returns before the window is fully lo...
...s turned on (which is the default in firefox 1.5+), your extension can safely access the dom of the content document, but not the content javascript. bypassing xpcnativewrapper to work with content javascript directly can lead to security problems. see interaction between privileged and non-privileged pages if you need to interact with the content page. the content shortcut in case of <browser
type="content-primary" />, you can use the content shortcut property to accesss the window object of the content document. for example: // alerts the title of the document displayed in the content-primary widget alert(content.document.title); for example, you can use content.document in a browser.xul overlay to access the web page in the selected tab in a firefox window. some examples use _content...
...ess trivial . ...
... var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); return watcher.openwindow(parentwindow, url, windowname, features, array); } the function almost works the same as window.opendialog but accepts an optional parent window as first parameter. the parent window can be null. the only data
types that can be passed to the new window are primitives and arrays. javascript objects cannot be passed. all of the arguments are passed by value, that is to say that any changes made to the values in the new window will not affect the calling code. example 5: using nsiwindowwatcher for passing an arbritrary javascript object it is still possible to pass any javascript object using nsiwindowwatche...
Declaring and Calling Functions
functions are declared using the library object's declare() method. once declared, functions can be called using standard function syntax. prerequiste understanding see abi. example: no input parameters in this example, we declare the libc clock() function, which returns the elapsed time since system startup, then fetch and output that value. ...
...ons are declared using the library object's declare() method. once declared, functions can be called using standard function syntax. prerequiste understanding see abi. example: no input parameters in this example, we declare the libc clock() function, which returns the elapsed time since system startup, then fetch and output that value. ...
...alue. const clock = lib.declare("clock", c
types.default_abi, c
types.unsigned_long); console.log("clocks since startup: " + clock()); the clock() function requires no input parameters; it simply returns an unsigned long. example: multiple input parameters this example declares the libc asctime() function, which converts a time structure into a string. const asctime = lib.declare("asctime", c
types.default_abi, c
types.char.ptr, struct_tm.ptr); for a more complete version of this example (including the implementation of the struct_tm
type), see the structures example. returned values if the return
type can fit into a javascript number without loss (that is, it's a number 32 bits or smaller, or is a double or float), then the function just return a javascript number. for everything else i...
..., c
types.char.ptr, struct_tm.ptr); for a more complete version of this example (including the implementation of the struct_tm
type), see the structures example. returned values if the return
type can fit into a javascript number without loss (that is, it's a number 32 bits or smaller, or is a double or float), then the function just return a javascript number. for everything else it returns a c
types object representing the return value (including 64-bit integers). ...
Examine and edit HTML - Firefox Developer Tools
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 always be executed, independently of what you enter. that allows you to find css selectors and xpath expressions occurring within the text. css selector search you can search elements by entering a css selector. ...
...arches 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 always be executed, independently of what you enter. that allows you to find css selectors and xpath expressions occurring within the text. css selector search you can search elements by entering a css selector. as you
type, an autocomplete popup shows any class or id attributes that match the current search term: press up and down to cycle through suggestions, tab to choose the current suggestion, then enter to select the first node with that attribute. to cycle through matches, press enter. you can cycle backwards through matches using shift + enter. xpath search it is also possible to search via xpaths. ...
...de in just one line of text. they use white space such as spaces, returns, or tabs between their html elements because it makes markup more readable. usually this white space seems to have no effect and no visual output, but in fact, when a browser parses html it will automatically generate anonymous text nodes for elements not contained in a node. this includes white space (which is after all a
type of text). if these auto generated text nodes are inline level, browsers will give them a non-zero width and height. then you will find strange gaps between elements, even if you haven’t set any margin or padding on them. since firefox 52, the inspector displays these whitespace nodes, so you can see where the gaps in your markup come from. whitespace nodes are represented with a dot: and you...
...con at the top of the markup view: click this icon to insert an empty <div> into the document as the last child of the currently selected element. you can then edit the new node's content and styling just as you would any other node in the document. you can access the same functionality using the "create new node" popup menu item. note that this button is disabled if the selected element's
type is such that adding a last-child would have no effect (for example, if is is an <html> or <iframe> element). however, it is enabled in places where it is not valid to insert a <div>, such as <style> or <link>. in these cases the element is added as text. ...
Web Console Helpers - Firefox Developer Tools
looks up a css selector string selector, returning an array of dom nodes descended from element that match. if unspecified, element defaults to document. this is like for document.queryselectorall(), but returns an array instead of a nodelist. $0 the currently-inspected element in the page. $_ stores the result of the last expression executed in the console's command line. ...
...ment that match. if unspecified, element defaults to document. this is like for document.queryselectorall(), but returns an array instead of a nodelist. $0 the currently-inspected element in the page. $_ stores the result of the last expression executed in the console's command line. for example, if you
type "2+2 <enter>", then "$_ <enter>", the console will print 4. $x(xpath, element, result
type) evaluates the xpath xpath expression in the context of element and returns an array of matching nodes. if unspecified, element defaults to document. the result
type 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. :block (starting in firefox 80) foll...
...g the frame to switch to. you can supply any of the following: a selector string to be passed to document.queryselector to locate the iframe element the iframe element itself the content window inside the iframe see working with iframes. clear() clears the console output area. clearhistory() just like a normal command line, the console command line remembers the commands you've
typed. use this function to clear the console's command history. copy() copies the argument to the clipboard. if the argument is a string, it's copied as-is. if the argument is a dom node, its outerhtml 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 deligh...
...ats 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 filename, the image file will be named with the following format: screen shot yyy-mm-dd at hh.mm.ss.png the command has the following optional parameters: command
type description --clipboard boolean when present, this parameter will cause the screenshot to be copied to the clipboard. --delay number the number of seconds to delay before taking the screenshot. --dpr number the device pixel ratio to use when taking the screenshot. --file boolean when present, the screenshot will b...
BaseAudioContext - Web APIs
or 3d spatialization. baseaudiocontext.samplerate read only returns a float representing the sample rate (in samples per second) used by all nodes in this context. the sample-rate of an audiocontext cannot be changed. baseaudiocontext.state read only returns the current state of the audiocontext. event handlers baseaudiocontext.onstatechange an event handler that runs when an event of
type statechange has fired. this occurs when the audiocontext's state changes, due to the calling of one of the state change methods (audiocontext.suspend, audiocontext.resume, or audiocontext.close). methods also implements methods from the interface eventtarget. baseaudiocontext.createanalyser() creates an analysernode, which can be used to expose audio time and frequency data and for example...
...t.close). methods also implements methods from the interface eventtarget. baseaudiocontext.createanalyser() creates an analysernode, which can be used to expose audio time and frequency data and for example to create data visualisations. baseaudiocontext.createbiquadfilter() creates a biquadfilternode, which represents a second order filter configurable as several different common filter
types: high-pass, low-pass, band-pass, etc baseaudiocontext.createbuffer() creates a new, empty audiobuffer object, which can then be populated by data and played via an audiobuffersourcenode. baseaudiocontext.createbuffersource() creates an audiobuffersourcenode, which can be used to play and manipulate audio data contained within an audiobuffer object. audiobuffers are created using audiocont...
...createdynamicscompressor() creates a dynamicscompressornode, which can be used to apply acoustic compression to an audio signal. baseaudiocontext.creategain() creates a gainnode, which can be used to control the overall volume of the audio graph. baseaudiocontext.createiirfilter() creates an iirfilternode, which represents a second order filter configurable as several different common filter
types. baseaudiocontext.createoscillator() creates an oscillatornode, a source representing a periodic waveform. it basically generates a tone. baseaudiocontext.createpanner() creates a pannernode, which is used to spatialise an incoming audio stream in 3d space. baseaudiocontext.createperiodicwave() creates a periodicwave, used to define a periodic waveform that can be used to determine the out...
...an be used to apply stereo panning to an audio source. baseaudiocontext.createwaveshaper() creates a waveshapernode, which is used to implement non-linear distortion effects. baseaudiocontext.decodeaudiodata() asynchronously decodes audio file data contained in an arraybuffer. in this case, the arraybuffer is usually loaded from an xmlhttprequest's response attribute after setting the response
type to arraybuffer. this method only works on complete files, not fragments of audio files. examples basic audio context declaration: const audiocontext = new audiocontext(); cross browser variant: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audiocontext = new audiocontext(); const oscillatornode = audiocontext.createoscillator(); const gainnode = audiocontext.
CharacterData - Web APIs
the characterdata abstract interface represents a node object that contains characters. this is an abstract interface, meaning there aren't any object of
type characterdata: it is implemented by other interfaces, like text, comment, or processinginstruction which aren't abstract. <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/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,...
...#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode and nondocument
typechildnode interface. characterdata.data is a domstring representing the textual data contained in this object. characterdata.length read only returns an unsigned long representing the size of the string contained in characterdata.data. nondocument
typechildnode.nextelementsibling read only returns the element immediately following the specified one in its parent's children list, or null i...
...enting the textual data contained in this object. characterdata.length read only returns an unsigned long representing the size of the string contained in characterdata.data. nondocument
typechildnode.nextelementsibling read only returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list. nondocument
typechildnode.previouselementsibling read only returns the element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list. methods inherits methods from its parent, node, and implements the childnode and nondocument
typechildnode interface. characterdata.appenddata() appends the given domstring to the characterdata.da...
..., data contains the modified domstring. characterdata.substringdata() returns a domstring containing the part of characterdata.data of the specified length and starting at the specified offset. specifications specification status comment domthe definition of 'characterdata' in that specification. living standard added implemention of the childnode and nondocument
typechildnode interface. document object model (dom) level 3 core specificationthe definition of 'characterdata' in that specification. obsolete no change from document object model (dom) level 2 core specification. document object model (dom) level 2 core specificationthe definition of 'characterdata' in that specification. obsolete no change from document object model (...
ChildNode.remove() - Web APIs
living standard initial definition. ...
... living standard initial definition. ...
... living standard initial definition. ...
... living standard initial definition. ...
ClipboardItem - Web APIs
the clipboarditem interface of the clipboard api represents a single item format, used when reading or writing data via the clipboard api. that is clipboard.read() and clipboard.write() respectively. the benefit of having the clipboarditem interface to represent data, is that it enables developers to cope with the varying scope of file
types and data easily. access to the contents of the clipboard is gated behind the permissions api: the clipboard-write permission is granted automatically to pages when they are in the active tab. 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...
...the active tab. 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. get
type() 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 clipb...
... clipboarditem.clipboarditem() to the clipboard by requesting a png image using the fetch api, and in turn, the responses' blob() method, to create the new clipboarditem. async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.
type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } reading from the clipboard here we're returning all items on the clipboard via the clipboard.read() method. then utilizing the clipboarditem.
types property to set the get
type() argument and return the corresponding blob object. async function getclipboardcontents(...
...from the clipboard here we're returning all items on the clipboard via the clipboard.read() method. then utilizing the clipboarditem.
types property to set the get
type() argument and return the corresponding blob object. async function getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const
type of clipboarditem.
types) { const blob = await clipboarditem.get
type(
type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification. working draft initial definition. ...
DOMHighResTimeStamp - Web APIs
the time, given in milliseconds, should be accurate to 5 µs (microseconds), with the fractional part of the number indicating fractions of a millisecond. however, if the browser is unable to provide a time value accurate to 5 µs (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond. also note the section below on reduced time precision controlled by browser preferences to avoid timing attacks and fingerprinting. ...
... // 1519211810362 // 1519211811670 // ... // reduced time precision with `privacy.resistfingerprinting` enabled event.timestamp; // 1519129853500 // 1519129858900 // 1519129864400 // ... in firefox, you can also enable privacy.resistfingerprinting, the precision will be 100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger. properties this
type has no properties. it is a double-precision floating-point value. value the value of a domhighrestimestamp is a double-precision floating-point number which describes the number of milliseconds (accurate to within 5 microseconds if the device supports it) elapsed between two points in time. the starting time can be either a specific time determined by the script for a site or app, or the time o...
...he above determines the time origin, then the time origin is the time at which the navigation responsible for creating the window's current document took place. if the script's global object is a workerglobalscope (that is, the script is running as a web worker), the time origin is the moment at which the worker was created. in all other cases, the time origin is undefined. methods this
type has no methods. usage notes you can get the current timestamp value—the time that has elapsed since the context was created—by calling the performance method now(). this method is available in both window and worker contexts. example to determine how much time has elapsed since a particular point in your code, you can do something like this: let starttime = performance.now(); /* ... do ...
...e = performance.now() - starttime; upon completion, the value of elapsedtime is the number of milliseconds that have elapsed since you recorded the starting time in line 1. specifications specification status comment high resolution time level 2the definition of 'domhighrestimestamp' in that specification. recommendation stricter definitions of interfaces and
types. high resolution timethe definition of 'domhighrestimestamp' 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. desktopmobilechromeedgefirefoxi...
DOMImplementation.createDocument() - Web APIs
it defaults to null. ...
...it defaults to null. ...
...it defaults to null. ...
...r body = document.createelementns('http://www.w3.org/1999/xhtml', 'body'); body.setattribute('id', 'abc'); doc.documentelement.appendchild(body); alert(doc.getelementbyid('abc')); // [object htmlbodyelement] specifications specification status comment domthe definition of 'domimplementation.createdocument' in that specification. living standard modified the return
type of createdocument() from document to xmldocument. the third argument of createdocument(), doc
type, is now optional and default to null. document object model (dom) level 3 core specificationthe definition of 'domimplementation.createdocument' in that specification. obsolete no change from document object model (dom) level 2 core specification document object model (dom...
DataTransfer.clearData() - Web APIs
the datatransfer.cleardata() method removes the drag operation's drag data for the given
type. if data for the given
type does not exist, this method does nothing. if this method is called with no arguments or the format is an empty string, the data of all
types will be removed. this method does not remove files from the drag operation, so it's possible for there still to be an entry with the
type "files" left in the object's datatransfer.
types list if there are any files included in the drag. this method can only be used in the handler for the dragstart event, because that's the only time the drag operation's data store is writeable. syntax datatransfer.cleardata([format]); parameters format optional a string which specifies the
type of data to remove. if this parameter is an em...
...list if there are any files included in the drag. this method can only be used in the handler for the dragstart event, because that's the only time the drag operation's data store is writeable. syntax datatransfer.cleardata([format]); parameters format optional a string which specifies the
type of data to remove. if this parameter is an empty string or is not provided, the data for all
types is removed. example this example shows the use of the datatransfer object's getdata(), setdata() and cleardata() methods. html <span class="tweaked" id="source" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element. </span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></di...
... event.datatransfer.cleardata(); // set the drag's format and data (use event target's id for data) event.datatransfer.setdata('text/plain', event.target.id); data.innerhtml = event.datatransfer.getdata('text/plain'); } function dragendhandler (event) { if (!dropped) { status.innerhtml = 'drag canceled'; } data...
...'dragleave', dragleavehandler); dropable.addeventlistener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; // change target element's border to signify drag has started event.currenttarget.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all
types since we // don't give a specific
type. event.datatransfer.cleardata(); // set the drag's format and data (use event target's id for data) event.datatransfer.setdata('text/plain', event.target.id); data.innerhtml = event.datatransfer.getdata('text/plain'); } function dragendhandler (event) { if (!dropped) { status.innerhtml = 'drag canceled'; } data.innerhtml = event.datatransfer.getdata('tex...
Document - Web APIs
#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of document. depending on the document's
type (e.g. html, xml, svg, …), a larger api is available: html documents, served with the "text/html" content
type, also implement the htmldocument interface, whereas xml and svg documents implement the xmldocument interface. constructor document() creates a new document object. properties this interface also inherits from the node and eventtarget interfaces. document.anchorsread only r...
...and eventtarget interfaces. document.anchorsread only returns a list of all of the anchors in the document. document.body returns the <body> or <frameset> node of the current document. document.charactersetread only returns the character set being used by the document. document.compatmode read only indicates whether the document is rendered in quirks or strict mode. document.content
type read only returns the content-
type from the mime header of the current document. document.doc
typeread only returns the document
type definition (dtd) of the current document. document.documentelementread only returns the element that is a direct child of the document. for html documents, this is normally the htmlhtmlelement object representing the document's <html> element. document.doc...
...globaleventhandlers.onended is an eventhandler representing the code to be called when the ended event is raised. globaleventhandlers.onformdata is an eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed. globaleventhandlers.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.onkeydown is an eventhandler representing the code to be called when the keydown event is raised. globaleventhandlers.onkeypress ...
... globaleventhandlers.onmousedown is an eventhandler representing the code to be called when the mousedown event is raised. globaleventhandlers.onmouseenter is an eventhandler representing the code to be called when the mouseenter event is raised. globaleventhandlers.onmouseleave is an eventhandler representing the code to be called when the mouseleave event is raised. globalevent...
Element.attributes - Web APIs
sic 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. ...
...ment.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. ...
... living standard from document object model (dom) level 3 core specification, moved from n...
... living standard from document object model (dom) level 3 core specification, moved from node to element document object model (dom) level 3 core specificationthe definition of 'element.attributes'...
Element: compositionend event - Web APIs
stem such as an input method editor completes or cancels the current composition session. for example, this event could be fired after a user finishes entering a chinese character using a pinyin ime. ...
...s interface compositionevent event handler property none examples const inputelement = document.queryselector('input[
type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then
type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input
type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control...
...<label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[
type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[
type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(even...
...: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[
type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.
type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionstart event - Web APIs
a text composition system such as an input method editor starts a new composition session. for example, this event could be fired after a user starts entering a chinese character using a pinyin ime. ...
... interface compositionevent event handler property none examples const inputelement = document.queryselector('input[
type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then
type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input
type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control...
...<label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[
type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[
type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(even...
...: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[
type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.
type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionupdate event - Web APIs
f a text composition session controlled by a text composition system such as an input method editor. for example, this event could be fired while a user enters a chinese character using a pinyin ime. ...
... interface compositionevent event handler property none examples const inputelement = document.queryselector('input[
type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then
type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input
type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control...
...<label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[
type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[
type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(even...
...: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[
type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.
type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element.hasAttribute() - Web APIs
ethod returns a boolean value indicating whether the specified element has the specified attribute or not. syntax var result = element.hasattribute(name); result holds the return value true or false. name is a string representing the name of the attribute. ...
...oolean value indicating whether the specified element has the specified attribute or not. syntax var result = element.hasattribute(name); result holds the return value true or false. name is a string representing the name of the attribute. ...
...hether the specified element has the specified attribute or not. syntax var result = element.hasattribute(name); result holds the return value true or false. name is a string representing the name of the attribute. ...
...or false. name is a string representing the name of the attribute. ...
Frame Timing API - Web APIs
k a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc. a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common target for a good responsive user experience. this means the browser should process a frame in about 16.7 ms. an application can register a performanceobserver for "frame" performance entry
types. the observer (callback) will be notified when new "frame" events are added to the browser's performance timeline and the frame's duration (length of time) will be available. this data can be used to help identify areas that take too long to provide a good user experience. example code of the interfaces described in this document is included in using the frame timing api. performance frames t...
...nd the frame's duration (length of time) will be available. this data can be used to help identify areas that take too long to provide a good user experience. example code of the interfaces described in this document is included in using the frame timing api. performance frames the performanceframetiming interface extends the following performanceentry properties (for "frame" performance entry
types) by qualifying and constrainting the properties as follows: performanceentry.entry
type set to "frame". performanceentry.name set to the document's address. performanceentry.starttime set to the domhighrestimestamp when the frame was started. performanceentry.duration set to a timestamp indicating the difference between the starttimes of two successive frames. this data, particularly ...
...mhighrestimestamp when the frame was started. performanceentry.duration set to a timestamp indicating the difference between the starttimes of two successive frames. this data, particularly the duration timestamp, can be used to help identify performance problems. frame observers the performance observer interfaces allow an application to register an observer for specific performance event
types. when one of those event
types is recorded in the browser's performance timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created. to observe "frame" performance entry
types, the application first creates a performanceobserver object with a specific frame observer callback (function). next, performanceobserver.observ...
...notified of the event via the observer's callback function that was specified when the observer was created. to observe "frame" performance entry
types, the application first creates a performanceobserver object with a specific frame observer callback (function). next, performanceobserver.observe() is used to specify the set of performance events to observe - in this case, just the "frame" event
type. when the browser adds a new frame to the performance timeline, the specified observer callback will be invoked. accessing frame data when a frame observer is invoked, frame performance entries can be retrieved by calling performanceobserverentrylist.getentriesby
type() with an argument of "frame". this method returns a list of "frame" performanceentry objects. each frame object's duration prope...
msAudioCategory - Web APIs
edia, such as background audio or alerts. syntax <audio controls="controls" msaudiocategory="backgroundcapablemedia"> </audio> the msaudiocategory property offers a variety of values that can enhance the behavior of your audio-aware app. note that you must set the msaudiocategory before setting the src property in code. value include a description of the property's value, including data
type and what it represents. value description background capable? alert looping or longer running alert sounds: alarms ring tones ringing notification sounds that need to attenuate existing audio no backgroundcapablemedia for audio that needs to continue playing in the background. examples include the following local med...
...dio that needs to continue playing in the background. examples include the following local media playback scenarios: local playlist streaming radio streaming playlist music videos streaming audio/radio, youtube, netflix, etc. yes communications for streaming communication audio such as the following: voip real time chat or other
type of phone calls should not be used in non-real-time or non-communication scenarios, such as audio and/or video playback, as playback startup latency is affected. *note that if msaudiocategory is set to communications, msrealtime is automatically set to true. yes foregroundonlymedia games or other sounds designed only to work in the foreground, but will mute exist...
... for hardware audio offload to be automatically applied, the audio category must be set to foregroundonlymedia or backgroundcapablemedia. hardware audio offload optimizes audio rendering which can...
...no gamemedia background music played by a game no soundeffects game or other sound effects designed to mix with existing audio: characters talking beeps, dings, brief sounds no other default audio
type, and recommended for all audio media that does not need to continue playing in the background. no if msaudiodevice
type is not explicitly set, msaudiodevice
type will be set to communications. for hardware audio offload to be automatically applied, the audio category must be set to foregroundonlymedia or backgroundcapablemedia. hardware audio offload optimizes audio rendering which can improve functionality and battery life. example <audio msaudiocategory="backgroundcapablemedia" controls="controls"> <source src...
HTMLCanvasElement.toBlob() - Web APIs
the htmlcanvaselement.toblob() method creates a blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. if
type is not specified, the image
type is image/png. the created image is in a resolution of 96dpi. the third argument is used when creating images using lossy compression (namely, image/jpeg) to specify the quality of the output. syntax canvas.toblob(callback, mime
type, qualityargument); parameters callback a callback function with the resulting blob object as a single argument. ...
...if this argument is anything else, the default values 0.92 and 0.80 are used for image/jpeg and image/webp respectively. other arguments are ignored. return value none. ...
...image is in a resolution of 96dpi. the third argument is used when creating images using lossy compression (namely, image/jpeg) to specify the quality of the output. syntax canvas.toblob(callback, mime
type, qualityargument); parameters callback a callback function with the resulting blob object as a single argument. mime
type optional a domstring indicating the image format. the default
type is image/png. qualityargument optional a number between 0 and 1 indicating image quality if the requested
type is image/jpeg or image/webp. if this argument is anything else, the default values 0.92 and 0.80 are used for image/jpeg and image/webp respectively. other arguments are ignored. return value none. exceptions securityerror the canvas's bitmap is not origin clean; at least some ...
...blob) { var newimg = document.createelement('img'), url = url.createobjecturl(blob); newimg.onload = function() { // no longer need to read the blob so it's revoked url.revokeobjecturl(url); }; newimg.src = url; document.body.appendchild(newimg); }); note that here we're creating a png image; if you add a second parameter to the toblob() call, you can specify the image
type. for example, to get the image in jpeg format: canvas.toblob(function(blob){...}, 'image/jpeg', 0.95); // jpeg at 95% quality a way to convert a canvas to an ico (mozilla only) this uses -moz-parse to convert the canvas to ico. windows xp doesn't support converting from png to ico, so it uses bmp instead. a download link is created by setting the download attribute. the value of the download...
HTMLElement.focus() - Web APIs
ocument to bring the newly-focused element into view. a value of false for preventscroll (the default) means that the browser will scroll the element into view after focusing it. if preventscroll is set to true, no scrolling will occur. ...
...alse for preventscroll (the default) means that the browser will scroll the element into view after focusing it. if preventscroll is set to true, no scrolling will occur. ...
...nction getfocus() { document.getelementbyid("mytextfield").focus(); } html <input
type="text" id="mytextfield" value="text field."> <p></p> <button
type="button" onclick="focusmethod()">click me to focus on the text field!</button> result focus on a button javascript focusmethod = function getfocus() { document.getelementbyid("mybutton").focus(); } html <button
type="button" id="mybutton">click me!</button> <p></p> <button
type="button" onclick="focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelement...
...button" onclick="focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button
type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button
type="button" onclick="focusnoscrollmethod()">click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button
type="button" id="mybutton" style="margin-top: 500px;">click me!</button> </div> result specification specification ...
Headers() - Web APIs
te your headers object with. this can be a simple object literal with bytestring values; or an existing headers object. in the last case, the new headers object inherits its data from the existing headers object. ...
...mple object literal with bytestring values; or an existing headers object. in the last case, the new headers object inherits its data from the existing headers object. ...
...mpty you could add a header to this using headers.append: myheaders.append('content-
type', 'image/jpeg'); myheaders.get('content-
type'); // returns 'image/jpeg' or you can add the headers you want as the headers object is created. ...
... living standard ...
KeyboardEvent.key - Web APIs
the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the keyboardevent.repeat read only property is set to true. if the key produces a character key that would result in a character being inserted into possibly an <input>, <textarea> or an element with htmlelement.contenteditable set to true, the beforeinput and input event
types are fired in that order. note that some other implementations may fire keypress event if supported. the events will be fired repeatedly while the key is held down. a keyup event is fired once the key is released. this completes the process. in sequence 1 & 3, the keyboardevent.key attribute is defined and is set appropriately to a value according to the rules defined ealier. keyboardevent se...
...hen we do so using a uk keyboard layout. try experimenting using the following two test cases: press and hold the shift key, then press 2 and release it. next, release the shift key. press and hold the shift key, then press and hold 2. release the shift key. finally, release 2. ...
...ift key is pressed, a keydown event is first fired, and the key property value is set to the string shift. as we keep holding this key, the keydown event does not continue to fire repeatedly because it does not produce a character key. when key 2 is pressed, another keydown event is fired for this new key press, and the key property value for the event is set to the string @ for the u.s keyboard
type and " for the uk keyboard
type, because of the active modifier shift key. the beforeinput and input events are fired next because a character key has been produced. as we release the key 2, a keyup event is fired and the key property will maintain the string values @ and " for the different keyboard layouts respectively. as we finally release the shift key, another keyup event is fired for it, ...
...hift key is pressed, a keydown event is first fired, and the key property value is set to be the string shift. as we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key. when key 2 is pressed, another keydown event is fired for this new key press, and the key property value for the event is set to be the string @ for the u.s keyboard
type and " for the uk keyboard
type, because of the active modifier shift key. the beforeinput and inputbeforeinput and input events are fired next because a character key has been produced. as we keep holding the key, the keydown event continues to fire repeatedly and the keyboardevent.repeat property is set to true. the beforeinput and input events are fired repeatedly as well. as we release the sh...
KeyboardEvent - Web APIs
note: keyboardevent events just indicate what interaction the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction. when you need to handle text input, use the input event instead. ...
...ld version of dom level 3 events. keyboardevent.which read only returns a number representing a system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keycode. warning: this attribute is deprecated; you should use keyboardevent.key instead, if available. events the following events are based on the keyboardevent
type. they can be delivered to any object which implements globaleventhandlers, including element, document, and window. in the list below, each event links to the documentation for the document handler for the event, which applies generally to all of the recipients. keydown a key has been pressed. keyup a key has been released. obsolete events keypress a key that normally produces a cha...
...event links to the documentation for the document handler for the event, which applies generally to all of the recipients. keydown a key has been pressed. keyup a key has been released. obsolete events keypress a key that normally produces a character value has been pressed. this event was highly device-dependent and is obsolete. you should not use it. usage notes there are three
types of keyboard events: keydown, keypress, and keyup. for most keys, gecko dispatches a sequence of key events like this: when the key is first pressed, the keydown event is sent. if the key is not a modifier key, the keypress event is sent. when the user releases the key, the keyup event is sent. special cases some keys toggle the state of an indicator light; these include keys such as caps...
...e native event model does. note: manually firing an event does not generate the default action associated with that event. for example, manually firing a key event does not cause that letter to appear in a focused text input. in the case of ui events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself. example <!doc
type html> <html> <head> <script> 'use strict'; document.addeventlistener('keydown', (event) => { const keyname = event.key; if (keyname === 'control') { // do not alert when only control key is pressed. return; } if (event.ctrlkey) { // even though event.key is not 'control' (e.g., 'a' is pressed), // event.ctrlkey may be true if ctrl key is pressed at the same time. al...
MSManipulationEvent.initMSManipulationEvent() - Web APIs
entations and the behavior may change in the future. the initmsmanipulationevent method is used to create a msmanipulationevent that can be called from javascript. this proprietary method is specific to internet explorer. beginning with the microsoft edge browser, the initevent() constructor pattern for synthetic events is deprecated. ...
...s used to create a msmanipulationevent that can be called from javascript. this proprietary method is specific to internet explorer. beginning with the microsoft edge browser, the initevent() constructor pattern for synthetic events is deprecated. syntax msmanipulationevent.initmsmanipulationevent(
typearg, canbubblearg, cancelablearg, viewarg, detailarg, laststate, currentstate); parameters
typearg [in]
type: domstring the
type of the event being created. canbubblearg [in]
type: boolean indicates whether the event can bubble. when true the event should propagate upward. when false the event does not propagate upward. cancelablearg [in]
type: boolean indicates whether the event’s default action can be prevented. when true, the default action can be canceled. when false, the defa...
...nt being created. canbubblearg [in]
type: boolean indicates whether the event can bubble. when true the event should propagate upward. when false the event does not propagate upward. cancelablearg [in]
type: boolean indicates whether the event’s default action can be prevented. when true, the default action can be canceled. when false, the default action cannot be canceled. viewarg [in]
type: abstractview the view in which the event is taking place. detailarg [in]
type: integer specifies some detailed information depending upon the event. laststate [in]
type: integer indicates the last state of the manipulation event. currentstate [in]
type: integer indicates the current state of the manipulation event. return value this method does not return a value. example interface...
... manipulation event. currentstate [in]
type: integer indicates the current state of the manipulation event. return value this method does not return a value. ...
MediaCapabilities.decodingInfo() - Web APIs
n's mediacapabilitiesinfo; this contains the three boolean properties supported, smooth, and powerefficient, which describe whether decoding the media described would be supported, smooth, and powerefficient. ...
...meters mediadecodingconfiguration a valid mediadecodingconfiguration dictionary containing a valid media decoding
type of file or media-source and a valid media configuration: either an audioconfiguration or a videoconfiguration. ...
...ding
type of file or media-source and a valid media configuration: either an audioconfiguration or a videoconfiguration. return value a promise fulfilling with a mediacapabilitiesinfo interface containing three boolean attributes: supported smooth powerefficient exceptions a
typeerror is raised if the mediaconfiguration passed to the decodinginfo() method is invalid, either because the
type is not video or audio, the content
type is not a valid codec mime
type, the media decoding configuration is not a valid value for the media decoding
type, or any other error in the media configuration passed to the method, including omitting values required in the media decoding configuration. ...
...because the
type is not video or audio, the content
type is not a valid codec mime
type, the media decoding configuration is not a valid value for the media decoding
type, or any other error in the media configuration passed to the method, including omitting values required in the media decoding configuration. example //create media configuration to be tested const mediaconfig = {
type : 'file', // or 'media-source' audio : { content
type : "audio/ogg", // valid content
type channels : 2, // audio channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s. }, }; // check support and performance navigator.mediacapabilities.decodinginfo(med...
MediaKeyMessageEvent() - Web APIs
message: an array containing the message generated by the content decryption module. ...
... message: an array containing the message generated by the content decryption module. ...
... message: an array containing the message generated by the content decryption module. ...
... message: an array containing the message generated by the content decryption module. ...
MediaRecorder - Web APIs
the mediarecorder interface of the mediastream recording api provides functionality to easily record media. it is created using the mediarecorder() constructor. constructor mediarecorder() creates a new mediarecorder object, given a mediastream to record. options are available to do things like set the container's mime
type (such as "video/webm" or "video/mp4") and the bit rates of the audio and video tracks or a single overall bit rate. properties mediarecorder.mime
type read only returns the mime
type that was selected as the recording container for the mediarecorder object when it was created. mediarecorder.state read only returns the current state of the mediarecorder object (inactive, recording, or paused.) mediarecorder.stream read only returns the stream that was passe...
...lice argument with a value in milliseconds. if this is specified, the media will be captured in separate chunks of that duration, rather than the default behavior of recording the media in a single large chunk. mediarecorder.stop() stops recording, at which point a dataavailable event containing the final blob of saved data is fired. no more recording occurs. static methods mediarecorder.is
typesupported() a static method which returns a boolean value indicating if the given mime media
type is supported by the current user agent. event handlers mediarecorder.ondataavailable called to handle the dataavailable event, which is periodically triggered each time timeslice milliseconds of media have been recorded (or when the entire media has been recorded, if timeslice wasn't specified...
...you can then collect and act upon that recorded media data using this event handler. mediarecorder.onerror an eventhandler called to handle the error event, including reporting errors that arise with media recording. these are fatal errors that stop recording. ...
...ipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { '
type' : 'audio/ogg; codecs=opus' }); chunks = []; var audiourl = url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); deletebutton.onclick = function(e) { evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); ...
MediaSessionActionDetails.action - Web APIs
pause pauses playback of the media. play begins (or resumes) playback of the media. previoustrack moves back to the previous track. seekbackward seeks backward through the media from the current position. ...
... pause pauses playback of the media. play begins (or resumes) playback of the media. previoustrack moves back to the previous track. seekbackward seeks backward through the media from the current position. ...
... pause pauses playback of the media. play begins (or resumes) playback of the media. previoustrack moves back to the previous track. seekbackward seeks backward through the media from the current position. ...
... pause pauses playback of the media. play begins (or resumes) playback of the media. previoustrack moves back to the previous track. seekbackward seeks backward through the media from the current position. ...
MediaSource.addSourceBuffer() - Web APIs
the addsourcebuffer() method of the mediasource interface creates a new sourcebuffer of the given mime
type and adds it to the mediasource's sourcebuffers list. the new sourcebuffer is also returned. syntax var sourcebuffer = mediasource.addsourcebuffer(mime
type); parameters mime
type a domstring specifying the mime
type of the sourcebuffer to create and add to the mediasource. return value a sourcebuffer object representing the new source buffer that has been created and added to the media source. exceptions invalidaccesserror the value specified for mime
type is an empty string rather than a valid mime
type. invalidstateerror the mediasource is not in the "open" readystate. ...
...urcebuffer to create and add to the mediasource. return value a sourcebuffer object representing the new source buffer that has been created and added to the media source. exceptions invalidaccesserror the value specified for mime
type is an empty string rather than a valid mime
type. invalidstateerror the mediasource is not in the "open" readystate. notsupportederror the specified mime
type isn't supported by the user agent, or is not compatible with the mime
types of other sourcebuffer objects that are already included in the media source's sourcebuffers list. quotaexceedederror the user agent can't handle any more sourcebuffer objects, or creating a new sourcebuffer using the given mime
type would result in an unsupported configuration of sourcebuffers. example the following s...
...rs. ...
...rag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.is
typesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime
type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); ...
MediaSource - Web APIs
being presented. event handlers mediasource.onsourceclose the event handler for the sourceclose event. mediasource.onsourceended the event handler for the sourceended event. mediasource.onsourceopen the event handler for the sourceopen event. methods inherits methods from its parent interface, eventtarget. mediasource.addsourcebuffer() creates a new sourcebuffer of the given mime
type and adds it to the mediasource.sourcebuffers list. mediasource.clearliveseekablerange() clears a seekable range previously set with a call to setliveseekablerange(). mediasource.endofstream() signals the end of the stream. mediasource.removesourcebuffer() removes the given sourcebuffer from the mediasource.sourcebuffers list. mediasource.setliveseekablerange() sets the range that the user...
...rliveseekablerange() clears a seekable range previously set with a call to setliveseekablerange(). mediasource.endofstream() signals the end of the stream. mediasource.removesourcebuffer() removes the given sourcebuffer from the mediasource.sourcebuffers list. mediasource.setliveseekablerange() sets the range that the user can seek to in the media element. static methods mediasource.is
typesupported() returns a boolean value indicating if the given mime
type is supported by the current user agent — this is, if it can successfully create sourcebuffer objects for that mime
type. examples the following simple example loads a video with xmlhttprequest, playing it as soon as it can. this example was written by nick desaulniers and can be viewed live here (you can also download the ...
...as written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.is
typesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime
type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sour...
... recommendation initial definition. ...
MediaTrackConstraints.displaySurface - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.displaysurface as returned by a call to mediadevices.getsupportedconstraints(). ...
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.displaysurface as returned by a call to mediadevices.getsupportedconstraints(). ...
...he value of mediatracksupportedconstraints.displaysurface as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { displaysurface: constraint }; constraintsobject.displaysurface = constraint; value a constraindomstring which specifies the
type of display surface that's being captured. this value does not affect the list of display sources in the browser's user interface. see how constraints are defined in capabilities, constraints, and settings for an explanation of how to define constraints. usage notes you can check the setting selected by the user agent after the display media has been created by getdisplaymedia() by calling gets...
...later code can use this flag to determine whether or not to perform special processing, such as to remove or replace the backdrop, or to "cut" the individual display areas out of the received frames of video. examples here are some example constraints objects for getdisplaymedia() that make use of the displaysurface pr...
MutationRecord - Web APIs
for attributes, it is the element whose attribute changed. for characterdata, it is the characterdata node. ...
... for attributes, it is the element whose attribute changed. for characterdata, it is the characterdata node. ...
... for attributes, it is the element whose attribute changed. for characterdata, it is the characterdata node. for childlist, it is the node whose children changed. mutationrecord.addednodes nodelist return the nodes added. will be an empty nodelist if no nodes were added. ...
...ling node return the next sibling of the added or removed nodes, or null. mutationrecord.attributename string returns the local name of the changed attribute, or null. mutationrecord.attributenamespace string returns the namespace of the changed attribute, or null. mutationrecord.oldvalue string the return value depends on the mutationrecord.
type. for attributes, it is the value of the changed attribute before the change. for characterdata, it is the data of the changed node before the change. for childlist, it is null. note that for this to work as expected, attributeoldvalue or characterdataoldvalue must be set to true in the corresponding mutationobserverinit parameter of the mutationobserver observe method ...
NDEFReader.scan() - Web APIs
signal -- optional abortsignal that allows to cancell this scan() operation. ...
... signal -- optional abortsignal that allows to cancell this scan() operation. ...
... signal -- optional abortsignal that allows to cancell this scan() operation. ...
... signal -- optional abortsignal that allows to cancell this scan() operation. ...
Node.hasChildNodes() - Web APIs
() method returns a boolean value indicating whether the given node has child nodes or not. syntax bool = node.haschildnodes(); return value a boolean that is true if the node has child nodes, and false otherwise. ...
...ns a boolean value indicating whether the given node has child nodes or not. syntax bool = node.haschildnodes(); return value a boolean that is true if the node has child nodes, and false otherwise. ...
...ing whether the given node has child nodes or not. syntax bool = node.haschildnodes(); return value a boolean that is true if the node has child nodes, and false otherwise. ...
...des(); return value a boolean that is true if the node has child nodes, and false otherwise. example let foo = document.getelementbyid('foo'); if (foo.haschildnodes()) { // do something with 'foo.childnodes' } polyfill here is one possible polyfill: ;(function(proto
type) { proto
type.haschildnodes = proto
type.haschildnodes || function() { return !!this.firstchild; } })(node.proto
type); there are various ways to determine whether the node has a child node: node.haschildnodes() node.firstchild != null (or just node.firstchild) node.childnodes && node.childnodes.length (or node.childnodes.length > 0) specifications specification status comment domthe definition of 'node: haschildnodes' in that specification. living standard ...
Node.localName - Web APIs
the node.localname read-only property returns the local part of the qualified name of this node. in dom4 this api was moved from node to the element and attr interfaces. ...
... name of this node. in dom4 this api was moved from node to the element and attr interfaces. ...
... <textarea id="text" rows="4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon. qualified names are typically used in xml as part of the namespace(s) of the particular xml documents. for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop"
type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="1001">tony's syrup warehouse </ecomm:partner> </ecomm:partners> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms). in later versions, in compliance with...
...n of the local name for html elements in html doms (as opposed to xhtml elements in xml doms). in later versions, in compliance with html5, the property returns in the case of the internal dom storage, which is lower case for both html elements in html doms and xhtml elements in xml doms. the tagname property continues to return in the upper case for html elements in html doms. for nodes of any
type other than element_node and attribute_node localname is always null. specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'node.localname' in that specification. obsolete document object model (dom) level 2 core specificationthe definition of 'node.localname' in that specification. obso...
Node.nodeName - Web APIs
the nodename read-only property returns the name of the current node as a string. syntax var str = node.nodename; value a domstring. ...
...turns the name of the current node as a string. syntax var str = node.nodename; value a domstring. ...
... node as a string. syntax var str = node.nodename; value a domstring. ...
...e the value of document
type.name element the value of element.tagname entity the entity name entityreference the name of entity reference notation the notation name processinginstruction the value of processinginstruction.target text "#text" example given the following markup: <div id="d1">hello world</div> <input
type="text" id="t"> and the following script: var div1 = document.getelementbyid("d1"); var text_field = document.getelementbyid("t"); text_field.value = div1.nodename; in xhtml (or any other xml format), text_field's value would read "div". however, in html, text_field's value would read "div", because nodename and tagname return in upper case on html elements in doms flagged as html documents.
Performance - Web APIs
note: this interface and its members are available in web workers, except where indicated below. ...
...tamp of the start time of the performance measurement. methods the performance interface doesn't inherit any methods. performance.clearmarks() removes the given mark from the browser's performance entry buffer. performance.clearmeasures() removes the given measure from the browser's performance entry buffer. performance.clearresourcetimings() removes all performance entries with a entry
type of "resource" from the browser's performance data buffer. performance.getentries() returns a list of performanceentry objects based on the given filter. performance.getentriesbyname() returns a list of performanceentry objects based on the given name and entry
type. performance.getentriesby
type() returns a list of performanceentry objects of the given entry
type. performance.mark() create...
...tes a named timestamp in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively). performance.now() returns a domhighrestimestamp representing the number of milliseconds elapsed since a reference instant. performance.setresourcetimingbuffersize() sets the browser's resource timing buffer size to the specified number of "resource"
type performance entry objects. performance.tojson() is a jsonizer returning a json object representing the performance object. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. resourcetimingbufferfull fired when the browser's resource timing buffer is full. also available via the onresourcetimingbufferful...
... of 'performance' in that specification. recommendation defines now() method. performance timeline level 2the definition of 'performance extensions' in that specification. candidate recommendation changes getentries() interface. performance timelinethe definition of 'performance extensions' in that specification. recommendation defines getentries(), getentriesby
type() and getentriesbyname() methods. resource timing level 1the definition of 'performance extensions' in that specification. candidate recommendation defines clearresourcetimings() and setresourcetimingbuffersize() methods and the onresourcetimingbufferfull property. user timing level 2the definition of 'performance extensions' in that specification. working draft clar...
PerformanceEntry.duration - Web APIs
"mark" - returns "0" (a mark has no duration). "measure" - returns the timestamp that is the duration of the measure. ...
... difference between the resource's responseend timestamp and its starttime timestamp. this property is read only . syntax entry.duration; return value a domhighrestimestamp representing the duration of the performance entry. if the duration concept doesn't apply for a particular performance metric, the browser may choose to return a duration of 0. note: if the performance entry has an entry
type of "resource" (i.e. the entry is a performanceresourcetiming object), this property returns the difference between the performanceentry.responseend and performanceentry.starttime timestamps. example the following example shows the use of the duration property. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... performa...
...create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entry
type", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var s...
... candidate recommen...
PerformanceEntry.startTime - Web APIs
"mark" - returns the timestamp when the mark was created by a call to performance.mark(). "measure" - returns the timestamp when the measure was created by a call to performance.measure(). "navigation" - returns the timestamp with a value of "0". ...
...a call to performance.measure(). "navigation" - returns the timestamp with a value of "0". "resource" - returns the timestamp immediately before the browser starts fetching the resource. this property is read only . syntax entry.starttime; return value a domhighrestimestamp representing the first timestamp when the performance entry was created. note: if the performance entry has an entry
type of "resource" (i.e. the entry is a performanceresourcetiming object), this property returns the performanceentry.fetchstart timestamp. example the following example shows the use of the starttime property. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... performance.mark not supported"); return; } // create ...
...create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entry
type", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var s...
... candidate recomme...
PerformanceEventTiming - Web APIs
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. ...
...ation const inputduration = entry.duration; // input delay (before processing event) const inputdelay = entry.processingstart - entry.starttime; // synchronous event processing time (between start and end dispatch). const inputsyncprocessingtime = entry.processingend - entry.processingstart; }); }); // register observer for event. observer.observe({entry
types: ["event"]}); we can also directly query the first input delay. // keep track of whether (and when) the page was first hidden, see: // https://github.com/w3c/page-visibility/issues/29 // note: ideally this check would be performed in the document <head> // to avoid cases where the visibility state changes before this code runs. let firsthiddentime = document.visibilitystate === 'hidden' ? 0 :...
... sendtoanalytics(data) { const body = json.stringify(data); // use `navigator.sendbeacon()` if available, falling back to `fetch()`. (navigator.sendbeacon && navigator.sendbeacon('/analytics', body)) || fetch('/analytics', {body, method: 'post', keepalive: true}); } // use a try/catch instead of feature detecting `first-input` // support, since some browsers throw when using the new `
type` option. // https://bugs.webkit.org/show_bug.cgi?id=209216 try { function onfirstinputentry(entry) { // only report fid if the page wasn't hidden prior to // the entry being dispatched. this typically happens when a // page is loaded in a background tab. if (entry.starttime < firsthiddentime) { const fid = entry.processingstart - entry.starttime; // report the fid v...
... < firsthiddentime) { const fid = entry.processingstart - entry.starttime; // report the fid value to an analytics endpoint. sendtoanalytics({fid}); } } // create a performanceobserver that calls `onfirstinputentry` for each entry. const po = new performanceobserver((entrylist) => { entrylist.getentries().foreach(onfirstinputentry); }); // observe entries of
type `first-input`, including buffered entries, // i.e. entries that occurred before calling `observe()` below. po.observe({
type: 'first-input', buffered: true, }); } catch (e) { // do nothing if the browser doesn't support this api. } specifications specification status comment unknownthe definition of '[[member]]' in that specification. unknown initi...
PerformanceNavigationTiming.domComplete - Web APIs
current document readiness of the current document to complete. syntax perfentry.domcomplete; return value a timestamp representing a time value equal to the time immediately before the user agent sets the current document readiness of the current document to complete. example the following example illustrates this property's usage. ...
...complete; return value a timestamp representing a time value equal to the time immediately before the user agent sets the current document readiness of the current document to complete. example the following example illustrates this property's usage. ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
e time immediately after the current document's domcontentloaded event completes. syntax perfentry.domcontentloadedeventend; return value a timestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes. example the following example illustrates this property's usage. ...
...ax perfentry.domcontentloadedeventend; return value a timestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes. example the following example illustrates this property's usage. ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
gent fires the domcontentloaded event at the current document. syntax perfentry.domcontentloadedeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document. example the following example illustrates this property's usage. ...
...ntentloadedeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document. example the following example illustrates this property's usage. ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceNavigationTiming.domInteractive - Web APIs
cument readiness of the current document to interactive. syntax perfentry.dominteractive; return value a timestamp representing the time value equal to the time immediately before the user agent sets the current document readiness of the current document to interactive. example the following example illustrates this property's usage. ...
...ive; return value a timestamp representing the time value equal to the time immediately before the user agent sets the current document readiness of the current document to interactive. example the following example illustrates this property's usage. ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceNavigationTiming.loadEventEnd - Web APIs
adeventend read-only property returns a timestamp which is equal to the time when the load event of the current document is completed. syntax perfentry.loadeventend; return value a timestamp representing the time when the load event of the current document is completed. example the following example illustrates this property's usage. ...
...oad event of the current document is completed. syntax perfentry.loadeventend; return value a timestamp representing the time when the load event of the current document is completed. example the following example illustrates this property's usage. ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceNavigationTiming.loadEventStart - Web APIs
the time value equal to the time immediately before the load event of the current document is fired. syntax perfentry.loadeventstart; return value a timestamp representing a time value equal to the time immediately before the load event of the current document is fired. example the following example illustrates this property's usage. ...
...ent is fired. syntax perfentry.loadeventstart; return value a timestamp representing a time value equal to the time immediately before the load event of the current document is fired. example the following example illustrates this property's usage. ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceNavigationTiming.redirectCount - Web APIs
since the last non-redirect navigation under the current browsing context. this property is read only . syntax perfentry.redirectcount; return value a number representing the number of redirects since the last non-redirect navigation under the current browsing context. example the following example illustrates this property's usage. ...
...ty is read only . syntax perfentry.redirectcount; return value a number representing the number of redirects since the last non-redirect navigation under the current browsing context. example the following example illustrates this property's usage. ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceNavigationTiming.unloadEventEnd - Web APIs
the previous document. if there is no previous document, this property value is 0. syntax perfentry.unloadeventend; return value a timestamp representing a time value equal to the time immediately after the user agent finishes the unload event of the previous document. example the following example illustrates this property's usage. ...
...ntax perfentry.unloadeventend; return value a timestamp representing a time value equal to the time immediately after the user agent finishes the unload event of the previous document. example the following example illustrates this property's usage. ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceNavigationTiming.unloadEventStart - Web APIs
he previous document. if there is no previous document, this property returns 0. syntax perfentry.unloadeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent starts the unload event of the previous document. example the following example illustrates this property's usage. ...
...x perfentry.unloadeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent starts the unload event of the previous document. example the following example illustrates this property's usage. ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceNavigationTiming - Web APIs
performanceentry.name read only returns the document's address. performanceentry.starttime read only returns a domhighrestimestamp with a value of "0". performanceentry.duration read only returns a timestamp that is the difference between the performancenavigationtiming.loadev...
...las,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry
types by qualifying and constraining them as follows: performanceentry.entry
type read only returns "navigation". performanceentry.name read only returns the document's address. performanceentry.starttime read only returns a domhighrestimestamp with a value of "0". performanceentry.duration read only returns a timestamp that is the difference between the performancenavigationtiming.loadeventend and performanceentry.starttime properties. this interface also extends...
... document's address. performanceentry.starttime read only returns a domhighrestimestamp with a value of "0". performanceentry.duration read only returns a timestamp that is the difference between the performancenavigationtiming.loadeventend and performanceentry.starttime properties. this interface also extends following performanceresourcetiming properties for navigation performance entry
types by qualifying and constraining them as follows: performanceresourcetiming.initiator
typeread only returns "navigation". the interface also supports the following properties: performancenavigationtiming.domcomplete read only a domhighrestimestamp representing a time value equal to the time immediately before the browser sets the current document readiness of the current document to com...
...arts requesting the resource from the server, or from relevant application caches or from local resources. performancenavigationtiming.responsestart read only a domhighrestimestamp representing the time immediately after the user agent's http parser receives the first byte of the response from relevant application caches, or from local resources or from the server. performancenavigationtiming.
type read only a string representing the navigation
type. must be: "navigate", "reload", "back_forward" or "prerender". performancenavigationtiming.unloadeventend read only a domhighrestimestamp representing the time value equal to the time immediately after the user agent finishes the unload event of the previous document. performancenavigationtiming.unloadeventstart read only a domhighrestim...
PerformanceObserver.observe() - Web APIs
the observe() method of the performanceobserver interface is used to specify the set of performance entry
types to observe. the performance entry
types are specified as an array of domstring objects, each naming one entry
type; the
type names are documented in performance entry
type names in performanceentry.entry
type. when a matching performance entry is recorded, the performance observer's callback function—set when creating the performanceobserver—is invoked. ...
...entry
type; the
type names are documented in performance entry
type names in performanceentry.entry
type. when a matching performance entry is recorded, the performance observer's callback function—set when creating the performanceobserver—is invoked. syntax observer.observe(options); parameters options a performanceobserverinit dictionary with the following possible members: entry
types: an array of domstring objects, each specifying one performance entry
type to observe. may not be used together with the "
type" or "buffered" options.
type: a single domstring specifying exactly one performance entry
type to observe. may not be used together with the entry
types option. buffered: a boolean flag to indicate whether buffered entries should be queued into the observer's buffer...
...s, each specifying one performance entry
type to observe. may not be used together with the "
type" or "buffered" options.
type: a single domstring specifying exactly one performance entry
type to observe. may not be used together with the entry
types option. buffered: a boolean flag to indicate whether buffered entries should be queued into the observer's buffer. must be used only with the "
type" option. see performanceentry.entry
type for a list of valid performance entry
type names. unrecognized
types are ignored, though the browser may output a warning message to the console to help developers debug their code. if no valid
types are found, observe() has no effect. examples this example creates and configures two performanceobservers; one watches for "mark" and "frame" events, ...
...observe() has no effect. examples this example creates and configures two performanceobservers; one watches for "mark" and "frame" events, and the other watches for "measure" events. var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entry
types: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entry
types: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'observe()' in that specification. candidate recommendation initial defini...
PerformancePaintTiming - Web APIs
use this information to help identify areas that take too long to provide a good user experience. ...
... performanceentry.name returns either "first-paint" or "first-contentful-paint". performanceentry.starttime returns the timestamp when the paint ocurred. performanceentry.duration returns 0. methods this interface has no methods. example function showpainttimings() { if (window.
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry
types) by qualifying and constraining the properties as follows: performanceentry.entry
type returns "paint". performanceentry.name returns either "first-paint" or "first-contentful-paint". performanceentry.starttime returns the timestamp when the paint ocurred. performanceentry.duration returns 0. methods this interface has no methods. example function showpainttimings() { if (window.performance) { let performance = window.performance; let performanceentries = perf...
...performanceentry.name returns either "first-paint" or "first-contentful-paint". performanceentry.starttime returns the timestamp when the paint ocurred. performanceentry.duration returns 0. methods this interface has no methods. example function showpainttimings() { if (window.performance) { let performance = window.performance; let performanceentries = performance.getentriesby
type('paint'); performanceentries.foreach( (performanceentry, i, entries) => { console.log("the time to " + performanceentry.name + " was " + performanceentry.starttime + " milliseconds."); }); } else { console.log('performance timing isn\'t supported.'); } } the code above produces console output something like the following: the time to first-paint was 2785.915 milliseconds. ...
Pinch zoom gestures - Web APIs
adding gestures to an application can significantly improve the user experience. there are many
types of gestures, from the simple single-touch swipe gesture to the more complex multi-touch twist gesture, where the touch points (aka pointers) move in different directions. this example shows how to detect the pinch/zoom gesture, which uses pointer events to detect whether the user moves two pointers closer or farther apart from each other. a live version of this application is available on github. the source code is available on github; pull requests and bug reports are welcome. example in this example, you use the pointer events to simultaneously detect two pointing devices of any
type, including fingers, mice, and pens. the pinch in (zoom out) gesture, which moves the two pointers towar...
...f; } } pointer up the pointerup event is fired when a pointer is raised from the contact surface. when this occurs, the event is removed from the event cache and the target element's background color and border are restored to their original values. in this application, this handler is also used for pointercancel, pointerleave and pointerout events. ...
...on's window (to support debugging and learning about the event flow). ...
...rt debugging and learning about the event flow). ...
PublicKeyCredentialCreationOptions.excludeCredentials - Web APIs
options 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 = publickeycredentialcreationoptions.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 (publickeycredential.rawid). this identifier is generated during the creation of the publickeycredential instance. transports optional an array of strings describing the possible transports bet...
... the authenticator may be used over ble (bluetooth low energy) "internal": the authenticator is specifically bound to the client device (cannot be removed). if the authenticator already contains one of such a public key credential, the client will throw a domexception or asks the user if they want to create a new credential. ...
...ed). if the authenticator already contains one of such a public key credential, the client will throw a domexception or asks the user if they want to create a new credential. ...
...he id for john-doe@example.com id : new uint8array(26) /* another id */ } ], 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", }, pubkeycredparams: [ {
type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .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 authentica...
RTCIceCandidate.relatedAddress - Web APIs
the related address and port are set to the mapped address selected by the turn server. for host candidates, relatedaddress is null, meaning the field is not included in the candidate's a-line. usage notes the related address is included in ice candidates despite not being used by ice itself. relatedaddress can be used for diagnostic purposes; by observing the relationships between the various
types of candidates and their addresses and related addresses. relatedaddress can also be used by quality-of-service (qos) mechanisms. here's an sdp attribute line (a-line) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote address, relatedaddress, is the dotted quad (f...
...ine (a-line) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote address, relatedaddress, is the dotted quad (for ipv4) or colon-delineated 64-bit address (for ipv6) immediately following the text "raddr", or "192.168.2.77". ...
...date:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote address, relatedaddress, is the dotted quad (for ipv4) or colon-delineated 64-bit address (for ipv6) immediately following the text "raddr", or "192.168.2.77". example in this example, the candidate's
type is checked, and then debugging output is presented, based on the candidate
type, including the candidate's ip and relatedaddress. ...
...8.2.77 rport 32768 generation 0 the remote address, relatedaddress, is the dotted quad (for ipv4) or colon-delineated 64-bit address (for ipv6) immediately following the text "raddr", or "192.168.2.77". example in this example, the candidate's
type is checked, and then debugging output is presented, based on the candidate
type, including the candidate's ip and relatedaddress. ...
RTCIceCandidate.relatedPort - Web APIs
example, which shows a bit of this. here's an sdp attribute line (a-line) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote port, relatedport, is the number immediately following the "rport" label on the a-line, or 32768. ...
...ibing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote port, relatedport, is the number immediately following the "rport" label on the a-line, or 32768. ...
...d by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote port, relatedport, is the number immediately following the "rport" label on the a-line, or 32768. example in this example, the candidate's
type is checked, and then debugging output is presented, based on the candidate
type, including the candidate's
type, address (ip and port), and related address (relatedaddress and relatedport). ...
...his example, the candidate's
type is checked, and then debugging output is presented, based on the candidate
type, including the candidate's
type, address (ip and port), and related address (relatedaddress and relatedport). var ip = candidate.ip; var port = candidate.port; var relip = candidate.relatedaddress; var relport = candidate.relatedport; if (relip && relport) { console.log("candidate
type '" +
type + "' -- contact address: " + ip + " " + port + ", related address: " + relip + " " + relport); } else { console.log("host candidate address is " + ip + " " + port); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.relatedport' in that specification. candidate recommendatio...
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
of an rtcinboundrtpstreamstats object's remoteid property to see if the two represent statistics for each of the two sides of the same set of data received by the local peer. usage notes you can think of the local and remote views of the same rtp stream as pairs, each of which has a reference back to the other one. thus, if an rtcstatsreport includes an remote-outbound-rtp statistics object (of
type rtcremoteoutboundrtpstreamstats), it should also have a corresponding inbound-rtp object. both of these provide information about the same batch of packets being transmitted from the remote peer to the local device. the difference is that remote-outbound-rtp describes statistics about the transmission(s) from the perspective of the remote peer, while inbound-rtp offers statistics about the incom...
...onnection, pc, this calls its getstats() method to obtain a statistics report object, which it stores in startreport for use once the end-of-test data has been collected by networkteststop(). networkteststop() the networkteststop() function obtains a second report, endreport, then uses the two reports together 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. 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...
...lts it's looking for, outputting those results as appropriate to the user by appending appropriate html to the contents of the <div> element whose class is stats-box. ...
...tics for id ${endremoteoutbound.id}.</div>` } } statsbox.scrollto(0, statsbox.scrollheight); } } } here's what's going on in the networkteststop() function: after calling the rtcpeerconnection method getstats() to get the latest statistics report for the connection and storing it in endreport, this is an rtcstatsreport object, which maps strings taken from the rtcstats
type enumerated
type to objects of the corresponding rtcstats-based
type. now we can begin to process the results, starting with the ending statistics found in endreport. in this case, we're looking for statistics records whose
type is remote-outbound-rtp, so we iterate over the entries in the statistics report until we find an entry of that
type. this object is, specifically, of
type rtcremoteoutbou...
RTCRtpCapabilities - Web APIs
an rtcrtpcapabilities object contains an array of objects conforming to rtcrtpcodeccapability (each describing the capabilities of one codec) and an array of the supported rtp header extensions for that codec. properties codecs an array of rtcrtpcodeccapability objects, each describing one of the codecs supported by the rtcrtpsender or rtcrtpreceiver. there are some special entries in this array, described below in the section the codecs array. ...
...bjects conforming to the dictionary rtcrtpcodeccapability. each of these objects describes a single codec and its basic capabilities. its properties are: the browser will only report distinct capability combinations separately. if two sets of capabilities can be described as one, they will be. that means that, for instance, if there are two entries for the h.264 codec (as identified by the mime
type being "video/h264"), there are other values in the capabilities objects indicating how they're different in some way. the mime
type strings used by rtp differ from those used elsewhere. see rfc 3555, section 4 for the complete iana registry of these
types. there are three special entries that should always be present, representing underlying components of the transport. those components are: ...
...ues in the capabilities objects indicating how they're different in some way. the mime
type strings used by rtp differ from those used elsewhere. see rfc 3555, section 4 for the complete iana registry of these
types. there are three special entries that should always be present, representing underlying components of the transport. those components are: red (redundant audio data) the media
type of an red entry may vary due to there being several versions of it, but it will end with red, such as video/red or video/fwdred. the base red standard can be found in rfc 2198. there may be multiple entries for red if different forms are supported; each will have a unique media
type in that case. ...
...media
type of an red entry may vary due to there being several versions of it, but it will end with red, such as video/red or video/fwdred. the base red standard can be found in rfc 2198. there may be multiple entries for red if different forms are supported; each will have a unique media
type in that case. fec (forward error correction) an fec component handles error correction data; its media
type may also vary due to there being advanced versions of the standard available, but it will always end with fec. one possible value is video/ulpfec (a generic error connection model). there may also be multiple fec entries if more than one form is supported. rtx (retransmission) this component is responsible for retransmission of data; it's media
type should be video/rtx. there will only be one e...
ReadableStream.ReadableStream() - Web APIs
thod are defined by the developer, and should aim to get access to the stream source, and do anything else required to set up the stream fuctionality. if this process is to be done asynchronously, it can return a promise to signal success or failure. the controller parameter passed to this method is a readablestreamdefaultcontroller or a readablebytestreamcontroller, depending on the value of the
type property. this can be used by the developer to control the stream during set up. pull(controller) optional this method, also defined by the developer, will be called repeatedly when the stream's internal queue of chunks is not full, up until it reaches its high water mark. if pull() returns a promise, then it won't be called again until that promise fulfills; if the promise rejects, the strea...
...epeatedly when the stream's internal queue of chunks is not full, up until it reaches its high water mark. if pull() returns a promise, then it won't be called again until that promise fulfills; if the promise rejects, the stream will become errored. the controller parameter passed to this method is a readablestreamdefaultcontroller or a readablebytestreamcontroller, depending on the value of the
type property. this can be used by the developer to control the stream as more chunks are fetched. cancel(reason) optional this method, also defined by the developer, will be called if the app signals that the stream is to be cancelled (e.g. if readablestream.cancel() is called). the contents should do whatever is necessary to release access to the stream source. if this process is asynchronous, i...
...so defined by the developer, will be called if the app signals that the stream is to be cancelled (e.g. if readablestream.cancel() is called). the contents should do whatever is necessary to release access to the stream source. if this process is asynchronous, it can return a promise to signal success or failure. the reason parameter contains a domstring describing why the stream was cancelled.
type optional this property controls what
type of readable stream is being dealt with. if it is included with a value set to "bytes", the passed controller object will be a readablebytestreamcontroller capable of handling a byob (bring your own buffer)/byte stream. if it is not included, the passed controller will be a readablestreamdefaultcontroller. autoallocatechunksize optional for byte stre...
...each chunk, in bytes. note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrategy for this object value. if no queuingstrategy is supplied, the default used is the same as a countqueuingstrategy with a high water mark of 1. return value an instance of the readablestream object. exceptions rangeerror the supplied
type value is neither "bytes" nor undefined. examples in the following simple example, a custom readablestream is created using a constructor (see our simple random stream example for the full code). the start() function generates a random string of text every second and enqueues it into the stream. a cancel() fuction is also provided to stop the generation if readablestream.cancel() is called for ...
Request() - Web APIs
origin. cache: the cache mode you want to use for the request. redirect: the redirect mode to use: follow, error, or manual. the default is follow. referrer: a usvstring specifying no-referrer, client, or a url. the default is about:client. integrity: contains the subresource integrity value of the request (e.g., sha256-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=). errors
type description
typeerror since firefox 43, request() will throw a
typeerror if the url has credentials, such as http://user:password@example.com. example in our fetch request example (see fetch request live) we create a new request object using the constructor, then fetch it using a globalfetch.fetch call. since we are fetching an image, we run body.blob on the response to...
...
typeerror since firefox 43, request() will throw a
typeerror if the url has credentials, such as http://user:password@example.com. example in our fetch request example (see fetch request live) we create a new request object using the constructor, then fetch it using a globalfetch.fetch call. since we are fetching an image, we run body.blob on the response to give it the proper mime
type so it will be handled properly, then create an object url of it and display it in an <img> element. var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { return response.blob(); }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); in our fetch request with in...
...}); note that you could also pass the init object into the fetch call to get the same effect, e.g.: fetch(myrequest,myinit).then(function(response) ...
...myrequest = new request('flowers.jpg',myinit); fetch(myrequest).then(function(response) { ... }); note that you could also pass the init object into the fetch call to get the same effect, e.g.: fetch(myrequest,myinit).then(function(response) { ... }); you can also use an object literal as headers in init. ...
Request.destination - Web APIs
these destinations vary substantially in how they operate. some are simply data receptacles, where the received data is stored for processing later. ...
... these destinations vary substantially in how they operate. some are simply data receptacles, where the received data is stored for processing later. ...
... these destinations vary substantially in how they operate. some are simply data receptacles, where the received data is stored for processing later. others are script-based, in which case the received data is delivered to a script by calling it and passing the data along. ...
...d data is delivered to a script by calling it and passing the data along. script-based destinations include <script> elements, as well as any of the worklet-based destinations (including audioworklet and paintworklet), and the worker-based destinations, including serviceworker and sharedworker. syntax var destination = request.destination; value a string from the requestdestination enumerated
type which indicates the
type of content the request is asking for. this
type is much broader than the usual document
type values (such as "document" or "manifest"), and may include contextual cues such as "image" or "worker" or "audioworklet". example in the following snippet, we create a new request using the request() constructor (for an image file in the same directory as the script), then save ...
Resource Timing API - Web APIs
h as an xmlhttprequest, <svg>, image, or script. the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, dns lookup start and end times, request start, response start and end times, etc. the interface also includes other properties that provide data about the size of the fetched resource as well as the
type of resource that initiated the fetch. this document provides an overview of the resource timing interfaces. for more details about the interfaces including examples see each interface's reference page, using the resource timing api, and the references in the see also section. for a graphical representation of the resource timing processing model see the resource timing phases figure. the perfor...
...rfaces. for more details about the interfaces including examples see each interface's reference page, using the resource timing api, and the references in the see also section. for a graphical representation of the resource timing processing model see the resource timing phases figure. the performanceresourcetiming interface extends the performanceentry for performance entries which have an entry
type of "resource". high-resolution timestamps several of the resource timing properties return high-resolution timestamps. these timestamps have a domhighrestimestamp
type and as its name implies, they represent a high-resolution point in time. this
type is a double and its value is a discrete point in time or the difference in time between two discrete points in time. the unit of domhighrestimest...
...ns the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings. decodedbodysize returns the size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings. other properties the nexthopprotocol property returns the network protocol used to fetch the resource. the initiator
type property returns the
type of resource that initiated the performance entry such as "css" for a css resource, "xmlhttprequest" for an xmlhttprequest and "img" for an image (such as a jpeg). if the current context is a worker, the workerstart property can be used to obtain a domhighrestimestamp when the worker was started. methods the resource timing api includes two methods that extend the perf...
...such as "css" for a css resource, "xmlhttprequest" for an xmlhttprequest and "img" for an image (such as a jpeg). if the current context is a worker, the workerstart property can be used to obtain a domhighrestimestamp when the worker was started. methods the resource timing api includes two methods that extend the performance interface. the clearresourcetimings() method removes all "resource"
type performance entries from the browser's resource performance entry buffer. the setresourcetimingbuffersize() method sets the resource performance entry buffer size to the specified number of resource performance entries. the performanceresourcetiming interface's tojson() method returns a json serialization of a "resource"
type performance entry. implementation status as shown in the performance...
SVGFEColorMatrixElement - Web APIs
t="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecolormatrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecolormatrix_
type_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_fecolormatrix_
type_matrix 1 corresponds to the matrix value. svg_fecolormatrix_
type_saturate 2 corresponds to the saturate value. svg_fecolormatrix_
type_huerotate 3 corresponds ...
...ned
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_fecolormatrix_
type_matrix 1 corresponds to the matrix value. svg_fecolormatrix_
type_saturate 2 corresponds to the saturate value. svg_fecolormatrix_
type_huerotate 3 corresponds to huerotate value. svg_fecolormatrix_
type_luminancetoalpha 4 corresponds to luminancetoalpha value. properties this interface also inherits properties from its parent interface, svgelement , and also implements properties of svgfilterprimitivestandardattributes. svgfecolormatrixelement.in1 read only an svganimatedstring corresponding to the in attribute of the given element. ...
... svgfecolormatrixelement.values read only an svganimatednumberlist corresponding to the values attribute of the given element. ...
...nancetoalpha value. properties this interface also inherits properties from its parent interface, svgelement , and also implements properties of svgfilterprimitivestandardattributes. svgfecolormatrixelement.in1 read only an svganimatedstring corresponding to the in attribute of the given element. svgfecolormatrixelement.
type read only an svganimatedenumeration corresponding to the
type attribute of the given element. it takes one of the svg_fecolormatrix_
type_* constants defined on this interface. svgfecolormatrixelement.values read only an svganimatednumberlist corresponding to the values attribute of the given element. methods this interface does not provide any specific methods, but implements those of its parent, svgelement , and also implements methods of svgfilterpr...
SVGGradientElement - Web APIs
svg_spreadmethod_pad 1 corresponds to value pad. svg_spreadmethod_reflect 2 corresponds to value reflect. svg_spreadmethod_repeat 3 corresponds to value repeat. properties this interface also inheri...
...e-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_spreadmethod_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_spreadmethod_pad 1 corresponds to value pad. svg_spreadmethod_reflect 2 corresponds to value reflect. svg_spreadmethod_repeat 3 corresponds to value repeat. properties this interface also inherits properties from its parent,...
...flect. svg_spreadmethod_repeat 3 corresponds to value repeat. properties this interface also inherits properties from its parent, svgelement, and implements those of svgurireference. svggradientelement.gradientunits read only returns an svganimatedenumeration corresponding to the gradientunits attribute on the given element. takes one of the constants defined in svgunit
types. svggradientelement.gradienttransform read only returns an svganimatedtransformlist corresponding to attribute gradienttransform on the given element. svggradientelement.spreadmethod read only returns an svganimatedenumeration corresponding to attribute spreadmethod on the given element. one of the spread method
types defined on this interface. methods this interface does not provide an...
...his interface. methods this interface does not provide any specific methods, but implements those of its parent, svgelement. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggradientelement' in that specification. candidate recommendation removed inheritance of svgexternalresourcesrequired, svgstylable, and svgunit
types scalable vector graphics (svg) 1.1 (second edition)the definition of 'svggradientelement' in that specification. recommendation initial definition ...
SVGTransformList - Web APIs
length unsigned long the number of items in the list. methods name & arguments return description clear() void clears all existing current items from the list, with the result being an empty list. exceptions: a domexception...
... into this list. the inserted item is the item itself and not a copy. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. createsvgtransformfrommatrix(in svgmatrix) svgtransform creates an svgtransform object which is initialized to transform of
type svg_transform_matrix and whose values are the given matrix. the values from the parameter matrix are copied, the matrix parameter is not adopted as svgtransform::matrix. consolidate() svgtransform consolidates the list of separate svgtransform objects by multiplying the equivalent transformation matrices together to result in a list consisting of a single svgtransform object o...
...vg_transform_matrix and whose values are the given matrix. the values from the parameter matrix are copied, the matrix parameter is not adopted as svgtransform::matrix. consolidate() svgtransform consolidates the list of separate svgtransform objects by multiplying the equivalent transformation matrices together to result in a list consisting of a single svgtransform object of
type svg_transform_matrix. the consolidation operation creates new svgtransform object as the first and only item in the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the ob...
...nsform object for each transformation -- such as translate, rotate, and scale. we apply multiple transformation by appending the transform object to the svgtransformlist associated with an svg element. ...
Screen Capture API - Web APIs
owing dictionaries defined by other specifications. mediatrackconstraints mediatrackconstraints.cursor a constraindomstring indicating whether or not the cursor should be included in the captured display surface's stream, and if it should always be visible or if it should only be visible while the mouse is in motion. mediatrackconstraints.displaysurface a constraindomstring indicating what
type of display surface is to be captured. the value is one of application, browser, monitor, or window. mediatrackconstraints.logicalsurface indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen). a value of true indicates a logical display surface is to be captured. mediatrack...
...l display surface is to be captured. mediatracksettings mediatracksettings.cursor a string which indicates whether or not the display surface currently being captured includes the mouse cursor, and if so, whether it's only visible while the mouse is in motion or if it's always visible. the value is one of always, motion, or never. mediatracksettings.displaysurface a string indicating what
type of display surface is currently being captured. the value is one of application, browser, monitor, or window. mediatracksettings.logicalsurface a boolean value which is true if the video being captured doesn't directly correspond to a single onscreen display area. mediatracksupportedconstraints mediatracksupportedconstraints.cursor a boolean which is true if the user agent and device supp...
...lean which is true if the current environment supports the mediatrackconstraints.displaysurface constraint. mediatracksupportedconstraints.logicalsurface a boolean which is true if the current environment supports the constraint mediatrackconstraints.logicalsurface. dictionaries the following dictionaries are defined by the screen capture api. ...
...ean which is true if the current environment supports the constraint mediatrackconstraints.logicalsurface. dictionaries the following dictionaries are defined by the screen capture api. cursorcaptureconstraint an enumerated string
type used to provide the value for the cursor property for the settings and constraints. the possible values are always, motion, and never. displaycapturesurface
type an enumerated string
type which is used to identify the kind of display surface to capture. this
type is used for the displaysurface property in the constraints and settings objects, and has the possible values application, browser, monitor, and window. feature policy validation user agents that support feature policy (either using http's feature-policy header or the <iframe> attribute allow)...
Using readable streams - Web APIs
then(url => console.log(image.src = url)) .catch(err => console.error(err)); let’s look in detail at how read() is used. in the pump() function seen above we first invoke read(), which returns a promise containing a results object — this has the results of our read in it, in the form { done, value }: return reader.read().then(({ done, value }) => { the results can be one of three different
types: if a chunk is available to read, the promise will be fulfilled with an object of the form { value: thechunk, done: false }. if the stream becomes closed, the promise will be fulfilled with an object of the form { value: undefined, done: true }. if the stream becomes errored, the promise will be rejected with the relevant error. next, we check whether done is true. if so, there are no mor...
...u as in the case of fetch, but sometimes you need to create a custom stream and populate it with your own chunks. the readablestream() constructor allows you to do this via a syntax that looks complex at first, but actually isn’t too bad. the generic syntax skeleton looks like this: const stream = new readablestream({ start(controller) { }, pull(controller) { }, cancel() { },
type, autoallocatechunksize }, { highwatermark, size() }); the constructor takes two objects as parameters. the first object is required, and creates a model in javascript of the underlying source the data is being read from. the second object is optional, and allows you to specify a custom queuing strategy to use for your stream. you’ll rarely have to do this, so we’ll just concentrate on ...
... that, when included, is called repeatedly until the stream’s internal queue is full. this can be used to control the stream as more chunks are enqueued. cancel() — a method that, when included, will be called if the app signals that the stream is to be cancelled (e.g. if readablestream.cancel() is called). the contents should do whatever is necessary to release access to the stream source.
type and autoallocatechunksize — these are used — when included — to signify that the stream is to be a bytestream. bytestreams will be covered separately in a future tutorial, as they are somewhat different in purpose and use case to regular (default) streams. they are also not implemented anywhere as yet. looking at our simple example code again, you can see that our readablestream() constru...
...ce, meaning you can attach a reader to it. as an example, have a look at our simple random stream demo (see it live also), which creates a custom stream, enqueues some random strings into it, and then reads the data out of the stream again once the stop string generation button is pressed. note: in order to consume a stream using fetchevent.respondwith(), the enqueued stream contents must be of
type uint8array; for example, encoded using textencoder. the custom stream constructor has a start() method that uses a windowtimers.setinterval() call to generate a random string every second. readablestreamdefaultcontroller.enqueue() is then used to enqueue it into the stream. when the button is pressed, the interval is cancelled, and a function called readstream() is invoked to read the data back...
Using Touch Events - Web APIs
urface and optionally move across the touch surface. the interaction ends when the fingers are removed from the surface. during this interaction, an application receives touch events during the start, move, and end phases. the application may apply its own semantics to the touch inputs. interfaces touch events consist of three interfaces (touch, touchevent and touchlist) and the following event
types: touchstart - fired when a touch point is placed on the touch surface. touchmove - fired when a touch point is moved along the touch surface. touchend - fired when a touch point is removed from the touch surface. touchcancel - fired when a touch point has been disrupted in an implementation-specific manner (for example, too many touch points are created). the touch interface represents a...
...ch 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 event. for the touchmove event, it is a list of the touch points that have changed since the last event. for the touchend event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface...
...ouse events from being sent, use the preventdefault() method in the touch event handlers. for more information about the interaction between mouse and touch events, see supporting both touchevent and mouseevent. basic steps this section contains a basic usage of using the above interfaces. see the touch events overview for a more detailed example. register an event handler for each touch event
type. // register touch event handlers someelement.addeventlistener('touchstart', process_touchstart, false); someelement.addeventlistener('touchmove', process_touchmove, false); someelement.addeventlistener('touchcancel', process_touchcancel, false); someelement.addeventlistener('touchend', process_touchend, false); process an event in an event handler, implementing the application's gesture seman...
...tic 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 pointer events mdn article. the pointer event model can simplify an application's input processing since a pointer represents input from any input device. additionally, the pointer event
types are very similar to mouse event
types (for example, pointerdown pointerup) thus code to handle pointer events closely matches mouse handling code. the implementation status of pointer events in browsers is relatively high with chrome, firefox, ie11 and edge having complete implementations. examples and demos the following documents describe how to use touch events and include example code: ...
TrackDefault.TrackDefault() - Web APIs
can be audio, video, or text. language a domstring specifying a default language for the sourcebuffer to use when an initialization segment does not contain language information for a new track. ...
...can be audio, video, or text. language a domstring specifying a default language for the sourcebuffer to use when an initialization segment does not contain language information for a new track. ...
...can be audio, video, or text. language a domstring specifying a default language for the sourcebuffer to use when an initialization segment does not contain language information for a new track. ...
...array (sequence) of domstrings specifying default kinds for the sourcebuffer to use when an initialization segment does not contain kind information for a new track. bytestreamtrackid optional a domstring specifying the id of the specific track that the sourcebuffer should apply to. if not specified, this value will be an empty string and the sourcebuffer can contain any tracks of the specified
type. errors when this constructor is invoked, the following errors can occur: error explanation invalidaccesserror the supplied language is not a valid language code, e.g. en-us.
typeerror there are values specified in the kinds array that do not apply to the specified
type. example tbd ...
VideoConfiguration - Web APIs
media capabilities api is used to define the video file being tested when calling the mediacapabilities methods encodinginfo() and decodinginfo() to determine whether or not the described video configuration is supported, and how smoothly and how smoooth and power-efficient it can be handled. ...
...s used to define the video file being tested when calling the mediacapabilities methods encodinginfo() and decodinginfo() to determine whether or not the described video configuration is supported, and how smoothly and how smoooth and power-efficient it can be handled. properties the videoconfiguration dictionary is made up of five video properties, including: content
type: a valid video mime
type. ...
...sted when calling the mediacapabilities methods encodinginfo() and decodinginfo() to determine whether or not the described video configuration is supported, and how smoothly and how smoooth and power-efficient it can be handled. properties the videoconfiguration dictionary is made up of five video properties, including: content
type: a valid video mime
type. see our web video codec guide for
types which may be supported. width: the width of the video. ...
... content
type: a valid video mime
type. see our web video codec guide for
types which may be supported. width: the width of the video. height: the height of the video. bitrate: the number of bits used to encode one second of the video file. framerate: the number of frames making up one second of video playback. examples // create media configuration to be tested const mediaconfig = {
type : 'file', // see mediadecodingconfiguration and mediaencodingconfiguration video : { content
type : "video/webm;codecs=vp8", // valid content
type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s. } }; ...
WebGLRenderingContext.getActiveUniform() - Web APIs
the webglrenderingcontext.getactiveuniform() method of the webgl api returns a webglactiveinfo object containing size,
type, and name of a uniform attribute. it is generally used when querying unknown uniforms either for debugging or generic library creation. syntax webglactiveinfo webglrenderingcontext.getactiveuniform(program, index); parameters program a webglprogram specifying the webgl shader program from which to obtain the uniform variable's information. index a gluint specifying the index of the uniform attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.active_uniforms). ...
...niform(program, index); parameters program a webglprogram specifying the webgl shader program from which to obtain the uniform variable's information. index a gluint specifying the index of the uniform attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.active_uniforms). return value a webglactiveinfo object describing the uniform. ...
..._cube gl.int_sampler_2d_array gl.unsigned_int_sampler_2d gl.unsigned_int_sampler_3d gl.unsigned_int_sampler_cube gl.unsigned_int_sampler_2d_array when gl.linkprogram is called, webgl creates a list of active uniforms. these are possible values of the name attribute of return values of getactiveuniform. webgl generates one or more entries in the list depending on the declared
type of the uniform in the shader: single basic
type: one entry with the name of the uniform. e.g. uniform vec4 a; will result in a. array of basic
type: one entry with the name of the uniform suffixed with [0]. e.g. uniform vec4 b[]; will result in b[0]. struct
type: one entry for each member of the struct. e.g. uniform struct { float foo; vec4 bar; } c; will result in c.foo and c.bar. arrays...
...d if the program webglprogram is invalid (not linked, deleted, etc.). gl.invalid_value is generated if index is not in the range [0, gl.getprogramparameter(program, gl.active_uniforms) - 1]. examples const numuniforms = gl.getprogramparameter(program, gl.active_uniforms); for (let i = 0; i < numuniforms; ++i) { const info = gl.getactiveuniform(program, i); console.log('name:', info.name, '
type:', info.
type, 'size:', info.size); } specifications specification status comment webgl 1.0the definition of 'getactiveuniform' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glgetactiveuniform' in that specification. standard man page of the opengl api. ...
WebGLRenderingContext.getParameter() - Web APIs
r() method of the webgl api returns a value for the passed parameter name. syntax any gl.getparameter(pname); parameters pname a glenum specifying which parameter value to return. see below for possible values. return value depends on the parameter. parameter names webgl 1 you can query the following pname parameters when using a webglrenderingcontext. ...
...r null null corresponds to a binding to the default framebuffer. see also bindframebuffer. gl.front_face glenum gl.cw or gl.ccw. see also frontface. gl.generate_mipmap_hint glenum gl.fastest, gl.nicest or gl.dont_care. see also hint. ...
..._conversion_webgl glenum gl.unpack_flip_y_webgl glboolean gl.unpack_premultiply_alpha_webgl glboolean gl.vendor domstring gl.version domstring gl.viewport int32array (with 4 elements) webgl 2 you can query the following pname parameters when using a webgl2renderingcontext. constant returned
type description gl.copy_read_buffer_binding webglbuffer or null see bindbuffer. gl.copy_write_buffer_binding webglbuffer or null see bindbuffer. gl.draw_bufferi glenum gl.back, gl.none or gl.color_attachment{0-15}. see also drawbuffers. gl.draw_framebuffer_binding webglframebuffer or null null corresponds to a binding to the default f...
... gl.unpack_skip_images glint see pixelstorei. gl.unpack_skip_pixels glint see pixelstorei. gl.unpack_skip_rows glint see pixelstorei. gl.vertex_array_binding webglvertexarrayobject or null see bindvertexarray. webgl extensions you can query the following pname parameters when using webgl extensions: constant returned
type extension description ext.max_texture_max_anisotropy_ext glfloat ext_texture_filter_anisotropic maximum available anisotropy. ext.fragment_shader_derivative_hint_oes glenum oes_standard_derivatives accuracy of the derivative calculation for the glsl built-in functions: dfdx, dfdy, and fwidth. ext.max_color_attachments_webgl glint webgl_...
Matrix math for the web - Web APIs
matrices can be used to represent transformations of objects in space, and are used for performing many key
types of computation when constructing images and visualizing data on the web. 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. transformation matrices there are many
types of matrices, but the ones we are interested in are the 3d transformation matrices. these matrices consist of a set of...
...w using the function above we can multiply a point by the matrix. using the identity matrix it should return a matrix identical to the original, since a matrix multiplied by the identity matrix is always equal to itself: // sets identityresult to [4,3,2,1] let identityresult = multiplymatrixandpoint(identitymatrix, [4, 3, 2, 1]); returning the same point is not very useful, but there are other
types of matrices that can perform helpful operations on points. the next sections will demonstrate some of these matrices. multiplying two matrices in addition to multiplying a matrix and a point together, you can also multiply two matrices together. the function from above can be re-used to help out in this process: //matrixb • matrixa function multiplymatrices(matrixa, matrixb) { // slice th...
... a translation is like picking up a coffee cup. the coffee cup must be kept upright and oriented the same way so that no coffee is spilled. it can move up in the air off the table and around the air in space. you can't actually drink the coffee using only a translation matrix, because to drink it, you have to be able to tilt or rotate the cup to pour the coffee into your mouth. we'll look at the
type of matrix (cleverly called a rotation matrix) you use to do this later. let x = 50; let y = 100; let z = 0; let translationmatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1 ]; place the distances along the three axes in the corresponding positions in the translation matrix, then multiply it by the point or matrix you need to move through...
...below is the representation of a rotation about the x axis: let sin = math.sin; let cos = math.cos; // note: there is no perspective in these transformations, so a rotation // at this point will only appear to only shrink the div let a = math.pi * 0.3; //rotation amount in radians // rotate around z axis let rotat...
Using textures in WebGL - Web APIs
internet // they might take a moment until they are ready. // until then put a single pixel in the texture so we can // use it immediately. when the image has finished downloading // we'll update the texture with the contents of the image. ...
...pdate the texture with the contents of the image. const level = 0; const internalformat = gl.rgba; const width = 1; const height = 1; const border = 0; const srcformat = gl.rgba; const src
type = gl.unsigned_byte; const pixel = new uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, src
type, pixel); const image = new image(); image.onload = function() { gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, src
type, image); // webgl1 has different requirements for power of 2 images // vs non power of 2 images so check if the image is a // power of 2 in both dimensions. if ...
...ogram, 'umodelviewmatrix'), usampler: gl.getuniformlocation(shaderprogram, 'usampler'), }, }; drawing the textured cube the changes to the drawscene() function are simple. ...
...values const
type = gl.float; // the data in the buffer is 32 bit float const normalize = false; // don't normalize const stride = 0; // how many bytes to get from one set to the next const offset = 0; // how many bytes inside the buffer to start from gl.bindbuffer(gl.array_buffer, buffers.texturecoord); gl.vertexattribpointer(programinfo.attriblocations.texturecoord, num,
type, normalize, stride, offset); gl.enablevertexattribarray(programinfo.attriblocations.texturecoord); } then add code to specify the texture to map onto the faces, just before draw: // tell webgl we want to affect texture unit 0 gl.activetexture(gl.texture0); // bind the texture to texture unit 0 gl.bindtexture(gl.texture_2d, texture); // tell the shader we bound the texture to te...
WebSocket.send() - Web APIs
itted to the server over the websocket connection, increasing the value of bufferedamount by the number of bytes needed to contain the data. if the data can't be sent (for example, because it needs to be buffered but the buffer is full), the socket is closed automatically. syntax websocket.send("hello server!"); parameters data the data to send to the server. ...
...matically. syntax websocket.send("hello server!"); parameters data the data to send to the server. it may be one of the following
types: usvstring a text string. the string is added to the buffer in utf-8 format, and the value of bufferedamount is increased by the number of bytes required to represent the utf-8 string. arraybuffer you can send the underlying binary data used by a
typed array object; its binary data contents are queued in the buffer, increasing the value of bufferedamount by the requisite number of bytes. blob specifying a blob enqueues the blob's raw data to be transmitted in a binary frame. ...
... exceptions thrown invalid_state_err the connection is not currently open. syntax_err the data is a string that has unpaired surrogates. ...
... that has unpaired surrogates. note: gecko's implementation of the send() method differs somewhat from the specification in gecko 6.0; gecko returns a boolean indicating whether or not the connection is still open (and, by extension, that the data was successfully queued or transmitted); this is corrected in gecko 8.0. as of gecko 11.0, support for arraybuffer is implemented but not blob data
types. specifications specification status comment html living standardthe definition of 'websocket: send' in that specification. living standard initial definition ...
Writing WebSocket client applications - Web APIs
s should use the url scheme wss://, although some software may allow you to use the insecure ws:// for local connections. protocols optional either a single protocol string or an array of protocol strings. these strings are used to indicate sub-protocols, so that a single server can implement multiple websocket sub-protocols (for example, you might want one server to be able to handle different
types of interactions depending on the specified protocol). if you don't specify a protocol string, an empty string is assumed. the constructor will throw a securityerror if the destination doesn't allow access. this may happen if you attempt to use an insecure connection (most user agents now require a secure link for all websocket connections unless they're on the same device or possibly on the sa...
...dy thing you can do is use json to send reasonably complex data to the server. for example, a chat program can interact with a server using a protocol implemented using packets of json-encapsulated data: // send text to all users through the server function sendtext() { // construct a msg object containing the data the server needs to process the message from the chat client. var msg = {
type: "message", text: document.getelementbyid("text").value, id: clientid, date: date.now() }; // send the msg object as a json-formatted string. examplesocket.send(json.stringify(msg)); // blank the text input element, ready to receive the next line of text from the user. document.getelementbyid("text").value = ""; } receiving messages from the server websockets is an ev...
...t. to handle it, add an event listener for the message event, or use the onmessage event handler. to begin listening for incoming data, you can do something like this: examplesocket.onmessage = function (event) { console.log(event.data); } receiving and interpreting json objects let's consider the chat client application first alluded to in using json to transmit objects. ...
... might receive, such as: login handshake message text user list updates the code that interprets these incoming messages might look like this: examplesocket.onmessage = function(event) { var f = document.getelementbyid("chatbox").contentdocument; var text = ""; var msg = json.parse(event.data); var time = new date(msg.date); var timestr = time.tolocaletimestring(); switch(msg.
type) { case "id": clientid = msg.id; setusername(); break; case "username": text = "<b>user <em>" + msg.name + "</em> signed in at " + timestr + "</b><br>"; break; case "message": text = "(" + timestr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; break; case "rejectusername": text = "<b>your username has been set to <em>" + msg.na...
Lighting a WebXR setting - Web APIs
rror-like surfaces reflect most of the light in a direction whose angle of reflection, Θr, is equal to the angle of incidence, except it's on the opposite side of the normal vector. the reflected ray, then, departs along at that angle off the normal. this is the law of reflection. ...
... a sphere with only ambient lighting. note the total lack of any shading to indicate the depth of the sphere. ...
...like. specular lights tend to appear as bright spots or squares on a surface at the point where a light source strikes the surface most directly. every light source is represented by some combination of ambient, diffuse, and/or specular light. the webgl shader program takes the color, directionality, brightness, and other factors for each light source and computes the final color of each pixel.
types of light source there are four fundamental
types of light source. each one involves a source of virtual light whose distance from the object being drawn and the directionality of the light waves cause the light source to take on specific characteristics. for the most part, any real-world light source can be simulated using one or more of these light source
types. ambient light sources an ambi...
...e at all. computational costs of lighting to be visible, a scene must include lighting of some sort, so all or nearly all scenes will have at least one light source and may have a great many of them. each light source substantially increases the amount of calculation needed to determine the final color and brightness of each displayed pixel. performing the shading for each of these light source
types is more computationally demanding than the one before it; so ambient light is the least expensive to apply, followed by directional light sources, point lights, and finally spotlights. additionally, the more accurate the lighting is designed to be, the more computationally expensive it becomes. increased shadow detail, volumetric light (that is, lighting that you can see in the air, such as sun...
Using IIR filters - Web APIs
this article looks at how to implement one, and use it in a simple example. demo our simple example for this guide provides a play/pause button that starts and pauses audio play, and a toggle that turns an iir filter on and off, altering the tone of the sound. ...
...ell across modern browsers, although they have been implemented more recently than some of the more longstanding web audio api features, like biquad filters. the iirfilternode the web audio api now comes with an iirfilternode interface. but what is this and how does it differ from the biquadfilternode we have already? an iir filter is a infinite impulse response filter. it's one of two primary
types of filters used in audio and digital signal processing. the other
type is fir — finite impulse response filter. there's a really good overview to iif filters and fir filters here. a biquad filter is actually a specific
type of infinite impulse response filter. it's a commonly-used
type and we already have it as a node in the web audio api. if you choose this node the hard work is done for you...
...e impulse response filter. there's a really good overview to iif filters and fir filters here. a biquad filter is actually a specific
type of infinite impulse response filter. it's a commonly-used
type and we already have it as a node in the web audio api. if you choose this node the hard work is done for you. for instance, if you want to filter lower frequencies from your sound, you can set the
type to highpass and then set which frequency to filter from (or cut off). there's more information on how biquad filters work here. when you are using an iirfilternode instead of a biquadfilternode you are creating the filter yourself, rather than just choosing a pre-programmed
type. so you can create a highpass filter, or a lowpass filter, or a more bespoke one. and this is where the iir filter nod...
... us to see what is happening to the frequencies of the audio being passed into the filter. let's draw a frequency plot of the filter we've created with the data we get back from this method. we need to create three arrays. one of frequency values for which we want to receive the magnitude response and phase response for, and two empty arrays to receive the data. all three of these have to be of
type float32array and all be of the same size. // arrays for our frequency response const totalarrayitems = 30; let myfrequencyarray = new float32array(totalarrayitems); let magresponseoutput = new float32array(totalarrayitems); let phaseresponseoutput = new float32array(totalarrayitems); let's fill our first array with frequency values we want data to be returned on: myfrequencyarray = myfrequenc...
Web Audio API - Web APIs
to audio, create audio visualizations, apply spatial effects (such as panning) and much more. web audio concepts and usage the web audio api involves handling audio operations inside an audio context, and has been designed to allow modular routing. basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. several sources — with different
types of channel layout — are supported even within a single context. this modular design provides the flexibility to create complex audio functions with dynamic effects. audio nodes are linked into chains and simple webs by their inputs and outputs. they typically start with one or more sources. sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands...
...'t use baseaudiocontext directly — you'd use its features via one of these two inheriting interfaces. the ended event the ended event is fired when playback has stopped because the end of the media was reached. defining audio sources interfaces that define audio sources for use in the web audio api. audioscheduledsourcenode the audioscheduledsourcenode is a parent interface for several
types of audio source node interfaces. it is an audionode. oscillatornode the oscillatornode interface represents a periodic waveform, such as a sine or triangle wave. it is an audionode audio-processing module that causes a given frequency of wave to be created. audiobuffer the audiobuffer interface represents a short audio asset residing in memory, created from an audio file using the audioco...
...ode the mediastreamaudiosourcenode interface represents an audio source consisting of a mediastream (such as a webcam, microphone, or a stream being sent from a remote computer). if multiple audio tracks are present on the stream, the track whose id comes first lexicographically (alphabetically) is used. it is an audionode that acts as an audio source. mediastreamtrackaudiosourcenode a node of
type mediastreamtrackaudiosourcenode represents an audio source whose data comes from a mediastreamtrack. when creating the node using the createmediastreamtracksource() method to create the node, you specify which track to use. this provides more control than mediastreamaudiosourcenode. defining audio effects filters interfaces for defining effects that you want to apply to your audio sources. ...
...ace represents a non-linear distorter. it is an audionode that use a curve to apply a waveshaping distortion to the signal. beside obvious distortion effects, it is often used to add a warm feeling to the signal. periodicwave describes a periodic waveform that can be used to shape the output of an oscillatornode. iirfilternode implements a general infinite impulse response (iir) filter; this
type of filter can be used to implement tone control devices and graphic equalizers as well. defining audio destinations once you are done processing your audio, these interfaces define where to output it. audiodestinationnode the audiodestinationnode interface represents the end destination of an audio source in a given context — usually the speakers of your device. mediastreamaudiodestinat...
Using the Web Speech API - Web APIs
') + ' ;' the grammar format used is jspeech grammar format (jsgf) — you can find a lot more about it at the previous link to its spec. however, for now let's just run through it quickly: the lines are separated by semi-colons, just like in javascript. the first line — #jsgf v1.0; — states the format and version used. this always needs to be included first. the second line indicates a
type of term that we want to recognise. public declares that it is a public rule, the string in angle brackets defines the recognised name for this term (color), and the list of items that follow the equals sign are the alternative values that will be recognised and accepted as appropriate values for the term. note how each is separated by a pipe character. you can have as many terms defined as you w...
...ss the html and css are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. the <select> element is initially empty, but is populated with <option>s via javascript (see later on.) <h1>speech synthesiser</h1> <p>enter some text in the input below and press return to hear it. ...
...some instructions for use, and a form with some simple controls. the <select> element is initially empty, but is populated with <option>s via javascript (see later on.) <h1>speech synthesiser</h1> <p>enter some text in the input below and press return to hear it. ...
...</h1> <p>enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p> <form> <input
type="text" class="txt"> <div> <label for="rate">rate</label><input
type="range" min="0.5" max="2" value="1" step="0.1" id="rate"> <div class="rate-value">1</div> <div class="clearfix"></div> </div> <div> <label for="pitch">pitch</label><input
type="range" min="0" max="2" value="1" step="0.1" id="pitch"> <div class="pitch-value">1</div> <div class="clearfix"></div> </div> <select> </select> </form> javascript let's investigate the javascript that powers this app. setting variables first of all, we capture references to all the dom elements involved in the ui, but more interestingly, we capture a reference to window.speech...
Window - Web APIs
ge() constructor which creates a staticrange object. worker used for creating a web worker. xmlserializer converts a dom tree into xml or html source. properties this interface inherits properties from the eventtarget interface and implements properties from the windoworworkerglobalscope and windoweventhandlers mixins. note that properties which are objects (e.g.,. for overriding the proto
type of built-in elements) are listed in a separate section below. window.closed read only this property indicates whether the current window is closed or not. window.console read only returns a reference to the console object which provides access to the browser's debugging console. window.controllers read only returns the xul controller objects for the current chrome window. window.cus...
...indow.setresizable() toggles a user's ability to resize a window. window.sizetocontent() sizes the window according to its content. window.stop() this method stops window loading. window.updatecommands() updates the state of commands of the current chrome window (ui). methods implemented from elsewhere eventtarget.addeventlistener() register an event handler to a specific event
type on the window. eventtarget.dispatchevent() used to trigger an event. windoworworkerglobalscope.atob() decodes a string of data which has been encoded using base-64 encoding. windoworworkerglobalscope.btoa() creates a base-64 encoded ascii string from a string of binary data. windoworworkerglobalscope.clearinterval() cancels the repeated execution set using windoworworkerglobalscope.setint...
...ecute every time a given number of milliseconds elapses. windoworworkerglobalscope.settimeout() schedules a function to execute in a given amount of time. deprecated methods window.back() moves back one in the window history. this method is deprecated; you should instead use window.history.back(). window.captureevents() registers the window to capture all events of the specified
type. window.forward() moves the window one document forward in the history. this method is deprecated; you should instead use window.history.forward(). window.getattention() flashes the application icon. window.home() returns the browser to the home page. window.opendialog() opens a new dialog window. window.releaseevents() releases the window from trapping events of a s...
...w.forward() moves the window one document forward in the history. this method is deprecated; you should instead use window.history.forward(). window.getattention() flashes the application icon. window.home() returns the browser to the home page. window.opendialog() opens a new dialog window. window.releaseevents() releases the window from trapping events of a specific
type. window.showmodaldialog() displays a modal dialog. event handlers these are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest. this interface inherits event handlers from the eventtarget interface and implements event handlers from windoweventhandlers. window.onappinstalled calle...
WindowOrWorkerGlobalScope.fetch() - Web APIs
fetch with the keepalive flag is a replacement for the navigator.sendbeacon() api. signal an abortsignal object instance; allows you to communicate with a fetch request and abort it if desired via an abortcontroller. return value a promise that resolves to a response object. exceptions aborterror the request was aborted due to a call to the abortcontroller method abort() method. ...
....
typeerror the specified url string includes user credentials. this information should instead be provided using an authorization header. examples in our fetch request example (see fetch request live) we create a new request object using the relevant constructor, then fetch it using a fetch() call. since we are fetching an image, we run body.blob() on the response to give it the proper mime
type so it will be handled properly, then create an object url of it and display it in an <img> element. const myimage = document.queryselector('img'); let myrequest = new request('flowers.jpg'); fetch(myrequest) .then(function(response) { if (!response.ok) { throw new error(`http error! status: ${response.status}`); } return response.blob(); }) .then(function(response) { let objecturl ...
...}); you could also pass the init object in with the request constructor to get the same effect: let myrequest = new request('flowers.jpg', myinit); you can also use an object lit...
...rs', cache: 'default' }; let myrequest = new request('flowers.jpg'); fetch(myrequest, myinit).then(function(response) { // ... }); you could also pass the init object in with the request constructor to get the same effect: let myrequest = new request('flowers.jpg', myinit); you can also use an object literal as headers in init. const myinit = { method: 'get', headers: { 'content-
type': 'image/jpeg' }, mode: 'cors', cache: 'default' }; let myrequest = new request('flowers.jpg', myinit); specifications specification status comment fetchthe definition of 'fetch()' in that specification. living standard defined in a windoworworkerglobalscope partial in the newest spec. fetchthe definition of 'fetch()' in that specification. ...
XMLHttpRequest: abort event - Web APIs
the abort event is fired when a request has been aborted, for example because the program called xmlhttprequest.abort(). ...
...uest has been aborted, for example because the program called xmlhttprequest.abort(). ...
... bubbles no cancelable no interface progressevent event handler property onabort examples live example html <div class="controls"> <input class="xhr success"
type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error"
type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort"
type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.querys...
...argin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.
type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.t...
XMLHttpRequest: error event - Web APIs
the error event is fired when the request encountered an error. ...
... the error event is fired when the request encountered an error. ...
... bubbles no cancelable no interface progressevent event handler property onerror examples live example html <div class="controls"> <input class="xhr success"
type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error"
type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort"
type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.querys...
...argin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.
type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.t...
XMLHttpRequest: load event - Web APIs
the load event is fired when an xmlhttprequest transaction completes successfully. ...
... the load event is fired when an xmlhttprequest transaction completes successfully. ...
... bubbles no cancelable no interface progressevent event handler property onload examples live example html <div class="controls"> <input class="xhr success"
type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error"
type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort"
type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.querys...
...argin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.
type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.t...
XMLHttpRequest: loadend event - Web APIs
the loadend event is fired when a request has completed, whether successfully (after load) or unsuccessfully (after abort or error). ...
...pleted, whether successfully (after load) or unsuccessfully (after abort or error). ...
... bubbles no cancelable no interface progressevent event handler property onloadend examples live example html <div class="controls"> <input class="xhr success"
type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error"
type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort"
type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.querys...
...argin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.
type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.t...
XMLHttpRequest: loadstart event - Web APIs
the loadstart event is fired when a request has started to load data. ...
... the loadstart event is fired when a request has started to load data. ...
...bubbles no cancelable no interface progressevent event handler property onloadstart examples live example html <div class="controls"> <input class="xhr success"
type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error"
type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort"
type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.querys...
...argin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.
type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.t...
XMLHttpRequest: progress event - Web APIs
the progress event is fired periodically when a request receives more data. ...
... the progress event is fired periodically when a request receives more data. ...
... bubbles no cancelable no interface progressevent event handler property onprogress examples live example html <div class="controls"> <input class="xhr success"
type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error"
type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort"
type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.querys...
...argin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.
type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.t...
XMLHttpRequest.responseXML - Web APIs
he xmlhttprequest.responsexml read-only property returns a document containing the html or xml retrieved by the request; or null if the request was unsuccessful, has not yet been sent, or if the data can't be parsed as xml or html. note: the name responsexml is an artifact of this property's history; it works for both html and xml. usually, the response is parsed as "text/xml". if the response
type is set to "document" and the request was made asynchronously, instead the response is parsed as "text/html". responsexml is null for any other
types of data, as well as for data: urls. if the server doesn't specify the content-
type as "text/xml" or "application/xml", you can use xmlhttprequest.overridemime
type() to parse it as xml anyway. this property isn't available to workers. syntax var d...
...tent-
type as "text/xml" or "application/xml", you can use xmlhttprequest.overridemime
type() to parse it as xml anyway. this property isn't available to workers. syntax var data = xmlhttprequest.responsexml; value a document from parsing the xml or html received using xmlhttprequest, or null if no data was received or if the data is not xml/html. exceptions invalidstateerror the response
type isn't either "document" or an empty string. ...
...lable to workers. syntax var data = xmlhttprequest.responsexml; value a document from parsing the xml or html received using xmlhttprequest, or null if no data was received or if the data is not xml/html. exceptions invalidstateerror the response
type isn't either "document" or an empty string. ...
....responsexml; value a document from parsing the xml or html received using xmlhttprequest, or null if no data was received or if the data is not xml/html. exceptions invalidstateerror the response
type isn't either "document" or an empty string. example var xhr = new xmlhttprequest; xhr.open('get', '/server'); // if specified, response
type must be empty string or "document" xhr.response
type = 'document'; // force the response to be parsed as xml xhr.overridemime
type('text/xml'); xhr.onload = function () { if (xhr.readystate === xhr.done && xhr.status === 200) { console.log(xhr.response, xhr.responsexml); } }; xhr.send(); specifications specification status comment xmlhttprequestthe definition of 'responsexml' in that specification. living ...
XMLHttpRequest - Web APIs
if your communication needs to involve receiving event data or message data from a server, consider using server-sent events through the eventsource interface. for full-duplex communication, websockets may be a better choice. constructor xmlhttprequest() the constructor initializes an xmlhttprequest. it must be called before any other method calls. properties this ...
...esteventtarget and of eventtarget. xmlhttprequest.onreadystatechange an eventhandler that is called whenever the readystate attribute changes. xmlhttprequest.readystate read only returns an unsigned short, the state of the request. xmlhttprequest.response read only returns an arraybuffer, blob, document, javascript object, or a domstring, depending on the value of xmlhttprequest.response
type, that contains the response entity body. xmlhttprequest.responsetext read only returns a domstring that contains the response to the request as text, or null if the request was unsuccessful or has not yet been sent. xmlhttprequest.response
type is an enumerated value that defines the response
type. xmlhttprequest.responseurl read only returns the serialized url of the response or the empty...
...cation headers. xmlhttprequest.mozsystemread only is a boolean. if true, the same origin policy will not be enforced on the request. xmlhttprequest.mozbackgroundrequest is a boolean. it indicates whether or not the object represents a background service request. xmlhttprequest.mozresponsearraybuffer obsolete since gecko 6 read only arraybuffer. the response to the request, as a javascript
typed array. xmlhttprequest.multipartobsolete since gecko 22 this gecko-only feature, a boolean, was removed in firefox/gecko 22. please use server-sent events, web sockets, or responsetext from progress events instead. event handlers onreadystatechange as a property of the xmlhttprequest instance is supported in all browsers. since then, a number of additional event handlers have been implement...
...nseheaders() returns all the response headers, separated by crlf, as a string, or null if no response has been received. xmlhttprequest.getresponseheader() returns the string containing the text of the specified header, or null if either the response has not yet been received or the header doesn't exist in the response. xmlhttprequest.open() initializes a request. xmlhttprequest.overridemime
type() overrides the mime
type returned by the server. xmlhttprequest.send() sends the request. if the request is asynchronous (which is the default), this method returns as soon as the request is sent. xmlhttprequest.setrequestheader() sets the value of an http request header. you must call setrequestheader()after open(), but before send(). non-standard methods xmlhttprequest.init() initia...
XRInputSourcesChangeEvent() - Web APIs
the xrinputsourceschangeevent() constructor creates and returns a new xrinputsourceschangeevent object, representing an update to the list of available webxr input devices. you won't typically call this constructor yourself, as these events are created and sent to you by the webxr system. ...
... the xrinputsourceschangeevent() constructor creates and returns a new xrinputsourceschangeevent object, representing an update to the list of available webxr input devices. you won't typically call this constructor yourself, as these events are created and sent to you by the webxr system. ...
...t() constructor creates and returns a new xrinputsourceschangeevent object, representing an update to the list of available webxr input devices. you won't typically call this constructor yourself, as these events are created and sent to you by the webxr system. syntax newinputsourceschangeevent = new xrinputsourceschangeevent(
type, eventinitdict); parameters
type a domstring indicating the
type of event which has occurred. ...
... example the following snippet of code creates a new xrinputsourceschangeevent object indicating that a single new input source, described by an xrinputsource object named newinputsource, has been added to the system. ...
XRPermissionStatus.granted - Web APIs
bxr features for which permission has been granted as of the time at which the permission api's navigator.permissions.query() method was called. syntax grantedfeatures = xrpermissionstatus.granted; value an array of domstring objects, each identifying a single webxr feature which the app or site has been granted permission to use. ...
... which permission has been granted as of the time at which the permission api's navigator.permissions.query() method was called. syntax grantedfeatures = xrpermissionstatus.granted; value an array of domstring objects, each identifying a single webxr feature which the app or site has been granted permission to use. currently, all of these strings come from the xrreferencespace
type enumerated
type. the
types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them. xrreferencespace
type description interface bounded-floor similar to the local
type, except the user is not expected to move outside a predetermined boundary, given by the boundsgeometry in the returned object. ...
...on depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment. xrreferencespace local-floor similar to the local
type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter). xrreferencespace unbo...
...osition and orientation. this is used for environments in which the user can physically move around, and is supported by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions. it's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. otherwise, typically, one of the other reference space
types will be used more often. xrreferencespace usage notes examples specifications specification status comment webxr device apithe definition of 'xrpermissionstatus.granted' in that specification. working draft initial definition. ...
XRReferenceSpaceEvent() - Web APIs
currently, this is always reset. ...
...currently, this is always reset. ...
...currently, this is always reset. ...
...currently, this is always reset. ...
XRSessionInit - Web APIs
alling the navigator.xr.requestsession() method. properties the following parameters are all optional. if none are included, the device will use a default feature configuration for all options. optionalfeatures optional an array of values identifying features which the returned xrsession may optionally support. at this time, all features are identified using strings from the xrreferencespace
type enumeration, but future updates to the webxr standard may add more features. requiredfeatures optional an array of values which the returned xrsession must support. these values currently must come from the enumerated
type xrreferencespace
type. more features may be added in future updates to the webxr standard. default features immersive sessions all immersive (both immersive-vr and immersi...
...e-vr and immersive-ar) sessions support both the viewer and local reference spaces. because immersive sessions are required to support the local reference space, any request to open an immersive xrsession is required to obtain explicit or implicit user consent. inline sessions all inline webxr sessions support the viewer reference space. ...
... viewer and local reference spaces. because immersive sessions are required to support the local reference space, any request to open an immersive xrsession is required to obtain explicit or implicit user consent. inline sessions all inline webxr sessions support the viewer reference space. security requirements each reference space or feature
type has minimum safety requirements. ...
...e immersive sessions are required to support the local reference space, any request to open an immersive xrsession is required to obtain explicit or implicit user consent. inline sessions all inline webxr sessions support the viewer reference space. security requirements each reference space or feature
type has minimum safety requirements. ...
ARIA Test Cases - Accessibility
documenting and filing bugs review the information on how to file a bug on an aria implementation. when documenting an issue, please also list it in the relevant compatibility table below. when possible provide a link to the bug in the database so that its status can be reviewed. widget test cases alert simple alert complex alert real alert example with aria-required and aria-invalid --
type in a email address without an at sign to test the alert expected at behavior: a screen reader or screen magnifier must speak an alert when it becomes visible. a screen magnifier should move the current view to the alert or open a new panel with the alert information optional, but desired: if there are widgets within the alert, their role and any keyboard mnemonic (accesskey) should be spok...
... expected at behavior: when focus falls on a button, a screen reader speaks the text of the button plus alternative text of any images within the button (the accessible name of the button). the word "button" is also spoken before or after the accessible name. markup used: notes: results: at firefox ie opera safari jaws 9 - ...
...when pressing space, new state should be announced automatically. markup used: role="checkbox" aria-checked="true" or "false" notes: need testcase where aria-checked attribute is removed instead of set to false results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass f...
...pected at behavior: screen reader should announce the fact that this is a control supporting autocomplete. when suggestions appear, if the at supports it elsewhere in the operating system (e. g. the run dialog), suggestions should be supported inside the web app as well. screen magnifiers should indicate autocompletes as they do elsewhere in the operating system. optional: for each character
typed, screen readers may choose to indicate how many options are remaining in the autocomplete list (if that number has changed). alternatively, screen readers could make a sound when there is only 1 autocomplete option remaining. markup used: aria-autocomplete notes: results: at firefox ie opera safari jaws 9 fail fail n/a n/a jaws 10 fa...
Web accessibility for seizures and physical reactions - Accessibility
that can induce seizures or other incapacitating physical reactions. certain visual patterns, especially stripes, can also cause physical reactions even though they are not animated. photosensitive epilepsy is actually a kind of "reflex epilepsy"—seizures occurring in response to a trigger. in the case of photosensitive epilepsy, seizures are triggered specifically by flashing lights, but other
types of reflex epilepsies may be triggered by the act of reading, or by noises. patterns and images can also trigger epilepsy. the fact that static images may cause seizures and other disorders is documented in such articles as “gamma oscillations and photosensitive epilepsy”, where it is noted “certain visual images, even in the absence of motion or flicker, can trigger seizures in patients w...
...ive seizures, according to cedars-sinai. although static images are possible as triggers, they are less consistent. the trigger that is well established and strong is flashing/strobe lights. dr. selim benbadis of usf's comprehensive epilepsy program notes, "the only thing that is really documented is flashing lights, which can trigger seizures in patients with photosensitive epilepsy. only a few
types of epilepsies are photosensitive though, and the vast majority of epilepsies are not." in addition to seizures brought about by photosensitivity, listening to certain pieces of music can also trigger what are called musicogenic seizures, although these
types of seizures seem to be much more rare. for a great introduction on the topic of musicogenic seizures, visit epilepsy ontario's web page on ...
... cause real harm. and, flickering can occur everywhere. for example, "spinners" commonly used to display while pages load, can easily "flicker" while spinning. additional concerns exist for individuals with motor-skills problems. for example, the page for trace research & development center’s photosensitive epilepsy analysis tool notes that “photosensitive seizures can be provoked by certain
types of flashing in web or computer content, including mouse-overs that cause large areas of the screen to rapidly flash on and off repeatedly.” other physical reactions nausea, vertigo (or dizziness), and disorientation are very nonspecific symptoms associated with all kinds of diseases and not particularly suggestive of seizures (except maybe disorientation, which is seen in seizures). however,...
...ue dimension definitions #585 epilepsy and seizures shedding light on photosensitivity, one of epilepsy's most complex conditions epilepsy foundation certain individuals are born with special sensitivity to flashing lights or contrasting visual patterns, such as stripes, grids and checkerboards. because of this condition, their brain will produce seizure-like discharges when exposed to this
type of visual stimulation gamma oscillations and photosensitive epilepsy current biology volume 27, issue 9, 8 may 2017, pages r336-r338 certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy. photosensitive seizures. cedars-sinai "photosensitive seizures are triggered by flashing or flickering lights. these seizures can also b...
::-moz-focus-inner - CSS: Cascading Style Sheets
the ::-moz-focus-inner css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and color
types of the <input> element. note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect. ...
... the ::-moz-focus-inner css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and color
types of the <input> element. note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect. ...
... css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and color
types of the <input> element. note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect. ...
...ocus ring of the <button> element as well as the button, submit, reset, and color
types of the <input> element. note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect. syntax syntax not found in db! examples html <input
type="submit" value="input"/> <button
type="submit">button</button> css button::-moz-focus-inner, input[
type="color"]::-moz-focus-inner, input[
type="reset"]::-moz-focus-inner, input[
type="button"]::-moz-focus-inner, input[
type="submit"]::-moz-focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; } result specifications not part of any standard. ...
font-variation-settings - CSS: Cascading Style Sheets
each setting is always a <string> of 4 ascii characters, followed by a <number> indicating the axis value. ...
...each setting is always a <string> of 4 ascii characters, followed by a <number> indicating the axis value. ...
...each setting is always a <string> of 4 ascii characters, followed by a <number> indicating the axis value. ...
...re or fewer characters or contains characters outside the u+20 - u+7e codepoint range, the whole property is invalid. the <number> can be fractional or negative. formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'open
typefont'; src: url('open_
type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specification status comment css fonts module level 4the definition of 'font-variation-settings' in that specification. working draft initial definition ...
@font-face - CSS: Cascading Style Sheets
nge that is supported by a font-face, for example font-style: oblique 20deg 50deg; font-weight a font-weight value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400; font-variant a font-variant value. font-feature-settings allows control over advanced typographic features in open
type fonts. font-variation-settings allows low-level control over open
type or true
type font variations, by specifying the four letter axis names of the features to vary, along with their variation values. src specifies the resource containing the font data. this can be a url to a remote font file location or the name of a font on the user's computer. to provide the browser with a hint as to wh...
... specifying the four letter axis names of the features to vary, along with their variation values. src specifies the resource containing the font data. this can be a url to a remote font file location or the name of a font on the user's computer. to provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format
type inside a format() function: src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("true
type"); the available
types are: "woff", "woff2", "true
type", "open
type", "embedded-open
type", and "svg". unicode-range the range of unicode code points to be used from the font. description if the local() function is provided, specifying a font name to look for on the...
...sible to do so without relying on an internet connection. it's common to use both url() and local() together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device. the @font-face at-rule may be used not only at the top level of a css, but also inside any css conditional-group at-rule. font mime
types format mime
type true
type font/ttf open
type font/otf web open font format font/woff web open font format 2 font/woff2 notes web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless http access controls are used to relax this restriction. @font-face cannot...
...</body> </html> in this example, the user's local copy of "helvetica neue bold" is used; if the...
@font-feature-values - CSS: Cascading Style Sheets
this can help simplify your css when using multiple fonts. the @font-feature-values at-rule may be used either at the top level of your css or inside any css conditional-group at-rule. syntax feature value blocks @swash specifies a feature name that will work with the swash() functional notation of font-variant-alternates. a swash feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. ...
...k with the stylistic() functional notation of font-variant-alternates. a stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't. @styleset specifies a feature name that will work with the styleset() functional notation of font-variant-alternates. a stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1 maps to the open
type values ss02, ss04, ss12, and ss01. note that values higher than 99 are valid, but don't map to any open
type values and are ignored. @character-variant specifies a feature name that will work with the character-variant() functional notation of font-variant-alternates. a character-variant feature value definition allows either one or two values: ident1: 3 maps to cv03=1, and ident2: 2 4 maps to c...
...lternates. a character-variant feature value definition allows either one or two values: ident1: 3 maps to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid. ...
...s either one or two values: ident1: 3 maps to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid. ...
@import - CSS: Cascading Style Sheets
unicator/skin/). see here for more information. list-of-media-queries is a comma-separated list of media queries conditioning the application of the css rules defined in the linked url. if the browser does not support any these queries, it does not load the linked resource. supports-query is either a <supports-condition> or a <declaration>. description imported rules must precede all other
types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules. so that user agents can avoid retrieving resources for unsupported media
types, authors may specify media-dependent @import rules. these conditional imports specify comma-separated media queries after the url. in the absence of any media query, the import is unconditional.
...media-dependent @import rules. these conditional imports specify comma-separated media queries after the url. in the absence of any media query, the import is unconditional. specifying all for the medium has the same effect. ...
...dia query, the import is unconditional. specifying all for the medium has the same effect. ...
...that specification. candidate recommendation extended the syntax to support the @supports syntax. css cascading and inheritance level 3the definition of '@import' in that specification. candidate recommendation media queriesthe definition of '@import' in that specification. recommendation extended the syntax to support any media query and not only simple media
types. css level 2 (revision 1)the definition of '@import' in that specification. recommendation added support for <string> to denote the url of a stylesheet, and requirement to insert the @import rule at the beginning of the css document. css level 1the definition of '@import' in that specification. recommendation initial definition ...
any-pointer - CSS: Cascading Style Sheets
e value can match if the available devices have different characteristics, although none only matches when none of them are pointing devices. examples this example creates a small checkbox for users with at least one fine pointer and a large checkbox for users with at least one coarse pointer. the big checkbox takes precedence because it is declared after the small one. ...
...tics, although none only matches when none of them are pointing devices. examples this example creates a small checkbox for users with at least one fine pointer and a large checkbox for users with at least one coarse pointer. the big checkbox takes precedence because it is declared after the small one. ...
...is example creates a small checkbox for users with at least one fine pointer and a large checkbox for users with at least one coarse pointer. the big checkbox takes precedence because it is declared after the small one. ...
...e small one. html <input id="test"
type="checkbox" /> <label for="test">look at me!</label> css input[
type="checkbox"]:checked { background: gray; } @media (any-pointer: fine) { input[
type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid blue; } } @media (any-pointer: coarse) { input[
type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 2px solid red; } } result specifications specification status comment media queries level 4the definition of 'any-pointer' in that specification. candidate recommendation initial definition. ...
Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
of the specification, with the properties that are detailed in scroll snap points, you should update your code to use the new specification. this will ensure your scroll snapping works in all browsers which implement the specification, including firefox. if you do not do this your scroll snapping will no longer work in firefox 68 and up. ...
...ith the properties that are detailed in scroll snap points, you should update your code to use the new specification. this will ensure your scroll snapping works in all browsers which implement the specification, including firefox. if you do not do this your scroll snapping will no longer work in firefox 68 and up. ...
...oints, you should update your code to use the new specification. this will ensure your scroll snapping works in all browsers which implement the specification, including firefox. if you do not do this your scroll snapping will no longer work in firefox 68 and up. the main things to note are as follows: the scroll-snap-
type-x and scroll-snap-
type-y properties have been dropped the scroll-snap-
type property has become a longhand, so the old shorthand syntax like scroll-snap-
type:mandatory will stop working can i use the old implementation as a fallback? if you have already used the old implementation as a fallback, or feel you want to support users of old firefox (or -webkit prefixed safari), then you can continue to use the old specification as outlined in the example below. in this in...
...utlined in the example below. in this initial example we have used the old specification alongside the current specification in order to make scroll snapping work in all browsers which support some form of scroll snapping. the example adds the scroll-snap-points-y and scroll-snap-destination properties, which are deprecated, to make scroll snapping work in firefox. we also added the scroll-snap-
type property twice, once with the y axis value needed for browsers that support the new spec, and once for firefox pre-68, which supports the property but without the y value. do i need to use both specs? scroll snapping is one of those nice parts of css in which the fallback is that you don't get the enhanced functionality, but everything still works. i would suggest at this point you should imp...
Specificity - CSS: Cascading Style Sheets
specificity is the means by which browsers decide which css property values are the most relevant to an element and, therefore, will be applied. specificity is based on the matching rules which are composed of different sorts of css selectors. how is specificity calculated? specificity is a weight that is applied to a given css declaration, determined by the number of each selector
type in the matching selector. when multiple declarations have equal specificity, the last declaration found in the css is applied to the element. specificity only applies when the same element is targeted by multiple declarations. as per css rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor. note: proximity of elements in the document tree has ...
... have equal specificity, the last declaration found in the css is applied to the element. specificity only applies when the same element is targeted by multiple declarations. as per css rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor. note: proximity of elements in the document tree has no effect on the specificity. selector
types the following list of selector
types increases by specificity:
type selectors (e.g., h1) and pseudo-elements (e.g., ::before). class selectors (e.g., .example), attributes selectors (e.g., [
type="radio"]) and pseudo-classes (e.g., :hover). id selectors (e.g., #example). universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity...
...e-important https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css the :is() and :not() exceptions the matches-any pseudo-class :is() and the negation pseudo-class :not() are not considered a pseudo-class in the specificity calculation. but selectors placed into the pseudo-class count as normal selectors when determining the count of selector
types. this chunk of css ... div.outer p { color: orange; } div:not(.outer) p { color: blueviolet; } ... when used with the following html ... <div class="outer"> <p>this is in the outer div.</p> <div class="inner"> <p>this text is in the inner div.</p> </div> </div> ... appears on the screen like this: the :where() exception the specificity-adjustment pseudo-class :wh...
...orance the proximity of an element to other elements that are referenced in a given selector has no impact on specificity. the following style declaration ... body h1 { color: green; } html h1 { color: purple; } ... with the following html ... <html> <body> <h1>here is a title!</h1> </body> </html> ... will render as: this is because the two declarations have equal selector
type counts, but the html h1 selector is declared last. directly targeted elements vs. inherited styles styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule. this css ... #parent { color: green; } h1 { color: purple; } ... with the following html ... <html> <body id="parent"> <h1>here is a title!</...
content - CSS: Cascading Style Sheets
he pseudo-element is not generated. normal computes to none for the ::before and ::after pseudo-elements. <string> specifies the "alt text" for the element. this value can be any number of text characters. non-latin characters must be encoded using their unicode escape sequences: for example, \000a9 represents the copyright symbol. <image> an <image>, denoted by the <url> or <gradient> data
type, or part of the webpage, defined by the element() function, denoting the content to display. <counter>() the value of a css counter, generally a number. it can be displayed using either the counter() or counters() function. the counter() function has two forms: 'counter(name)' or 'counter(name, style)'. the generated text is the value of the innermost counter of the given name in scope at th...
...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. ...
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <co...
...ar-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )<leader-
type> = dotted | solid | space | <string>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient(...
cursor - 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. ...
...cifies 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. see using url values for the cursor property for more details. <x> <y> optional x- and y-coordinates. two unitless nonnegative numbers less than 32. keyword values move your mouse over values to see their live appearance in your browser: category css value ...
...tions for cursor, individual user agents may choose to do so. cursor changes using images which are outside the size range supported by the browser will generally just be ignored. check the browser compatibility table for any notes on cursor size limits. ...
... recommendation addition of several keywords and the positioning ...
<custom-ident> - CSS: Cascading Style Sheets
it is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity. syntax the syntax of <custom-ident> is similar to css identifiers (such as property names), except that it is case-sensitive. ...
...nor a hyphen (-) followed by a decimal digit or another hyphen. to prevent ambiguity, each property that uses <custom-ident> forbids the use of specific values: animation-name forbids the global css values (unset, initial, and inherit), as well as none. counter-reset counter-increment forbids the global css values (unset, initial, and inherit), as well as none. @counter-style list-style-
type forbids the global css values (unset, initial, and inherit), as well as the values none, inline, and outside. also, quite a few predefined values are implemented by the different browsers: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-eart...
... css values and units module level 4the definition of '<custom-ident>' in that specification. editor'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.
...e to the new counter-set property. css animationsthe definition of '<custom-ident> for animation-name' in that specification. working draft defines which values are excluded for animation-name. css values and units module level 3the definition of '<custom-ident>' in that specification. candidate recommendation renames <identifier> to <custom-ident>. makes it a pseudo-
type and forbids the use of excluded values. css level 2 (revision 1)the definition of '<identifier>' in that specification. recommendation initial definition. ...
font-family - CSS: Cascading Style Sheets
et 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 lino
type", palladio, "urw palladio", serif. sans-serif glyphs have stroke endings that are plain. e.g. "open sans", "fira sans", "lucida sans", "lucida sans unicode", "trebuchet ms", "liberation sans", "nimbus sans l", sans-serif. monospace all glyphs have the same fixed width. e.g. "fira mono", "dejavu sans mono", menlo, consolas, "liberation mono", monaco, "lucida console", monospace. curs...
...", "lucida sans", "lucida sans unicode", "trebuchet ms", "liberation sans", "nimbus sans l", sans-serif. monospace all glyphs have the same fixed width. e.g. "fira mono", "dejavu sans mono", menlo, consolas, "liberation mono", monaco, "lucida console", monospace. cursive glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic
typefaces. the glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork. e.g. "brush script mt", "brush script std", "lucida calligraphy", "lucida handwriting", "apple chancery", cursive. fantasy fantasy fonts are primarily decorative fonts that contain playful representations of characters. e.g. papyrus, herculanum, ...
... handwriting", "apple chancery", cursive. fantasy fantasy fonts are primarily decorative fonts that contain playful representations of characters. e.g. papyrus, herculanum, party let, curlz mt, harrington, fantasy. system-ui glyphs are taken from the default user interface font on a given platform. because typographic traditions vary widely across the world, this generic is provided for
typefaces that don't map cleanly into the other generics. this is example system-ui text. ui-serif the default user interface serif font. this is example ui-serif text. ui-sans-serif the default user interface sans-serif font. this is example ui-sans-serif text. ui-monospace the default user interface monospace font. this is example ui-monospace text. ui-rounded the default user interf...
...-serif; font-family: red/black, sans-serif; font-family: "lucida" grande, sans-serif; font-family: ahem!, sans-serif; font-family: test@foo, sans-serif; font-family: #pound, sans-serif; font-family: hawaii 5-0, sans-serif; formal definition initial valuedepends on user agentapplies toall elements. ...
font-variant-caps - CSS: Cascading Style Sheets
caps: all-small-caps; font-variant-caps: petite-caps; font-variant-caps: all-petite-caps; font-variant-caps: unicase; font-variant-caps: titling-caps; /* global values */ font-variant-caps: inherit; font-variant-caps: initial; font-variant-caps: unset; the font-variant-caps property is specified using a single keyword value from the list below. ...
...al values */ font-variant-caps: inherit; font-variant-caps: initial; font-variant-caps: unset; the font-variant-caps property is specified using a single keyword value from the list below. in each case, if the font doesn't support the open
type value, then it synthesizes the glyphs. values normal deactivates of the use of alternate glyphs. small-caps enables display of small capitals (open
type 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 display of small capitals for both upper and lowercase letters (open
type features: c2sc, smcp). petite-caps enables display of petite capitals (open
type feature: pcap). all-petite-caps enables display of petite capitals for both upper and low...
...ll-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters. all-small-caps enables display of small capitals for both upper and lowercase letters (open
type features: c2sc, smcp). petite-caps enables display of petite capitals (open
type feature: pcap). all-petite-caps enables display of petite capitals for both upper and lowercase letters (open
type features: c2pc, pcap). unicase enables display of mixture of small capitals for uppercase letters with normal lowercase letters (open
type feature: unic). titling-caps enables display of titling capitals (open
type feature: titl). uppercase letter glyphs are often designed for use with lowercase letters. when used in all uppercase titling sequences they can appear too strong. titling capitals a...
...s of text set with a font-variant value of all-small-caps or all-petite-caps may be difficult for people with cognitive concerns such as dyslexia to read. mdn understanding wcag, guideline 1.4 explanations w3c understanding wcag 2.1 formal definition initial valuenormalapplies toall elements. ...
font-variant-ligatures - CSS: Cascading Style Sheets
atures and contextual forms needed for correct rendering. the ligatures and forms activated depend on the font, language and kind of script. this is the default value. none this keyword specifies that all ligatures and contextual forms are disabled, even common ones. <common-lig-values> these values control the most common ligatures, like for fi, ffi, th or similar. they correspond to the open
type values liga and clig. two values are possible: common-ligatures activating these ligatures. note that the keyword normal activates these ligatures. no-common-ligatures deactivating these ligatures. <discretionary-lig-values> these values control specific ligatures, specific to the font and defined by the
type designer. they correspond to the open
type values dlig. two values are possib...
...e open
type values dlig. two values are possible: discretionary-ligatures activating these ligatures. no-discretionary-ligatures deactivating the ligatures. note that the keyword normal usually deactivates these ligatures. <historical-lig-values> these values control the ligatures used historically, in old books, like the german tz digraph being displayed ß. they correspond to the open
type values hlig. two values are possible: historical-ligatures activating these ligatures. no-historical-ligatures deactivating the ligatures. note that the keyword normal usually deactivates these ligatures. <contextual-alt-values> these values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. ...
...n
type values hlig. two values are possible: historical-ligatures activating these ligatures. no-historical-ligatures deactivating the ligatures. note that the keyword normal usually deactivates these ligatures. <contextual-alt-values> these values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. these values correspond to the open
type values calt. two values are possible: contextual specifies that the contextual alternates are to be used. note that the keyword normal usually activates these ligatures too. no-contextual prevents their use. formal definition initial valuenormalapplies toall elements. ...
...nd to the open
type values calt. two values are possible: contextual specifies that the contextual alternates are to be used. note that the keyword normal usually activates these ligatures too. no-contextual prevents their use. formal definition initial valuenormalapplies toall elements. ...
ime-mode - CSS: Cascading Style Sheets
ed through it unless the user specifically dismisses it. not supported on linux. inactive the input method editor is initially inactive, but the user may activate it if they wish. not supported on linux. disabled the input method editor is disabled and may not be activated by the user. ...
...activated by the user. description unlike internet explorer, firefox's implementation of ime-mode allows this property on <input
type="password">. however, this makes for a bad user experience, and password fields should not enable the ime. users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following css into their user stylesheet: input[
type=password] { ime-mode: auto !important; } the mac version of gecko 1.9 (firefox 3) can't recover the previous state of the ime when a field for which it is disabled loses focus, so mac users may get grumpy when you use the disabled value. ...
...following css into their user stylesheet: input[
type=password] { ime-mode: auto !important; } the mac version of gecko 1.9 (firefox 3) can't recover the previous state of the ime when a field for which it is disabled loses focus, so mac users may get grumpy when you use the disabled value. formal definition initial valueautoapplies totext fieldsinheritednocomputed valueas specifiedanimation
typediscrete formal syntax auto | normal | active | inactive | disabled examples disabling input method support this example disables input method support for a form field. in the past, this was commonly used on fields that entered data into databases which didn't support extended character sets. ...
...even with ime disabled, users can still paste extended characters into your form's fields. ...
<length> - CSS: Cascading Style Sheets
as with all css dimensions, there is no space between the unit literal and the number. the length unit is optional after the number 0. note: some properties allow negative <length>s, while others do not. ...
...as with all css dimensions, there is no space between the unit literal and the number. the length unit is optional after the number 0. note: some properties allow negative <length>s, while others do not. units relative length units relative lengths represent a measurement in terms of some other distance. ...
...54cm = 96px. pc one pica. 1pc = 12pt = 1/6th of 1in. pt one point. 1pt = 1/72nd of 1in. mozmm , removed in firefox 59 an experimental unit that attempts to render at exactly one millimeter regardless of the size or resolution of the display. this is rarely actually what you want, but may be useful in particular for mobile devices. interpolation when animated, values of the <length> data
type are interpolated as real, floating-point numbers. the interpolation happens on the calculated value. the speed of the interpolation is determined by the timing function associated with the animation. examples length unit comparison the following demo provides you with an input field in which you can enter a <length> value (e.g. 300px, 50%, 30vw) to set the width of a result bar that will appea...
...nit comparison the following demo provides you with an input field in which you can enter a <length> value (e.g. 300px, 50%, 30vw) to set the width of a result bar that will appear below it once you've pressed return. this allows you to compare and contrast the effect of different length units. ...
<shape> - CSS: Cascading Style Sheets
rect() rect(top, right, bottom, left) values top is a <length> representing the offset for the top of the rectangle relative to the top border of the element's box. right is a <length> representing the offset for the right of the rectangle relative to the left border of the element's box. ...
... rect() rect(top, right, bottom, left) values top is a <length> representing the offset for the top of the rectangle relative to the top border of the element's box. right is a <length> representing the offset for the right of the rectangle relative to the left border of the element's box. ...
... rect() rect(top, right, bottom, left) values top is a <length> representing the offset for the top of the rectangle relative to the top border of the element's box. right is a <length> representing the offset for the right of the rectangle relative to the left border of the element's box. ...
... for the right of the rectangle relative to the left border of the element's box. bottom is a <length> representing the offset for the bottom of the rectangle relative to the top border of the element's box. left is a <length> representing the offset for the left of the rectangle relative to the left border of the element's box. interpolation when animated, values of the <shape> data
type are interpolated over their top, right, bottom, and left components, each treated as a real, floating-point number. the speed of the interpolation is determined by the timing function associated with the animation. example img.clip04 { clip: rect(10px, 20px, 20px, 10px); } specifications specification status comment css level 2 (revision 1)the definition of '<sh...
The HTML autocomplete attribute - HTML: Hypertext Markup Language
the html autocomplete attribute is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements. autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the
type of information expected in the field. the source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. for instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. perhaps the browser offers the ability to save encrypted credit card information, for a...
...te: in most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. see the autocomplete attribute and login fields. "on" the browser is allowed to automatically complete the input. no guidance is provided as to the
type of data expected in the field, so the browser may use its own judgement. "name" the field expects the value to be a person's full name. using "name" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following autocomplete values if you do need to bre...
...yment method, such as an account number. "cc-exp" a payment method expiration date, typically in the form "mm/yy" or "mm/yyyy". "cc-exp-month" the month in which the payment method expires. "cc-exp-year" the year in which the payment method expires. "cc-csc" the security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card. "cc-
type" the
type of payment instrument (such as "visa" or "master card"). "transaction-currency" the currency in which the transaction is to take place. "transaction-amount" the amount, given in the currency specified by "transaction-currency", of the transaction, for a payment form. "language" a preferred language, given as a valid bcp 47 language tag. "bday" a birth date, as a full date. "bd...
... — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads. the persistence feature is enabled by default. setting the value of the autocomplete attribute to off disables this feature. this works even when the autocomplete attribute would normally not apply by virtue of its
type. see bug 654072. examples <div> <label for="cc-number">enter your credit card number</label> <input name="cc-number" id="cc-number" autocomplete="off"> </div> administrative levels in addresses the four administrative level fields (address-level1 through address-level4) describe the address in terms of increasing levels of precision within the country in which the address is located. eac...
<command>: The HTML Command element - HTML: Hypertext Markup Language
he use of an end tag is forbidden. permitted parent elements <colgroup> only, though it can be implicitly defined as its start tag is not mandatory. the <colgroup> must not have a <span> as child. dom interface htmlcommandelement attributes this element includes the global attributes. checked indicates whether the command is selected. ...
...this can be one of three values. ...
...nless the
type attribute is checkbox or radio. disabled indicates that the command is not available. icon gives a picture which represents the command. label the name of the command as shown to the user. radiogroup this attribute gives the name of the group of commands, with a
type of radio, that will be toggled when the command itself is toggled. this attribute must be omitted unless the
type attribute is radio.
type this attribute indicates the kind of command. this can be one of three values. command or empty which is the default state and indicates that this is a normal command. checkbox indicates that the command can be toggled using a checkbox. radio indicates that the command can be toggled using a radio button. ...
...ss the
type attribute is radio.
type this attribute indicates the kind of command. this can be one of three values. command or empty which is the default state and indicates that this is a normal command. checkbox indicates that the command can be toggled using a checkbox. radio indicates that the command can be toggled using a radio button. examples <command
type="command" label="save" icon="icons/save.png" onclick="save()"> specifications specification status comment html5the definition of '<command>' in that specification. recommendation ...
Data URLs - HTTP
data: scheme, allow content creators to embed small files inline in documents. they were formerly known as "data uris" until that name was retired by the whatwg. note: data urls are treated as unique opaque origins by modern browsers, rather than inheriting the origin of the settings object responsible for the navigation. ...
... content creators to embed small files inline in documents. they were formerly known as "data uris" until that name was retired by the whatwg. note: data urls are treated as unique opaque origins by modern browsers, rather than inheriting the origin of the settings object responsible for the navigation. syntax data urls are composed of four parts: a prefix (data:), a mime
type indicating the
type of data, an optional base64 token if non-textual, and the data itself: data:[<media
type>][;base64],<data> the media
type is a mime
type string, such as 'image/jpeg' for a jpeg image file. if omitted, defaults to text/plain;charset=us-ascii if the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's
type). otherwise, you can...
...a
type>][;base64],<data> the media
type is a mime
type string, such as 'image/jpeg' for a jpeg image file. if omitted, defaults to text/plain;charset=us-ascii if the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's
type). otherwise, you can specify base64 to embed base64-encoded binary data. you can find more info on mime
types here and here. a few examples: data:,hello%2c%20world! simple text/plain data. note the use of percent-encoding (url-encoding) for the quote and space characters. also, for csv data (mime
type "text/csv"), percent-encoding is needed to preserve the line endings that delimit rows of the spreadsheet. data:text/plain;base64,sgvsbg8sifdvcmxkiq== base64-encoded version of the above data:text/...
... limitations although firefox supports data urls of essentially unlimited length, browsers are not required to support any particular maximum length of data. for example, the opera 11 browser limited urls to 65535 characters long which limits data urls to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a mime
type). lack of error handling invalid parameters in media, or typos when specifying 'base64', are ignored, but no error is provided. no support for query strings, etc. the data portion of a data url is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <url>?parameter-data) with a data url will just include the query string in the data the url represents. s...
Content Security Policy (CSP) - HTTP
these attacks are used for everything from data theft to site defacement to distribution of malware. csp is designed to be fully backward compatible (except csp version 2 where there are some explicitly-mentioned inconsistencies in backward compatibility; more details here section 1.1). browsers that don't support it still work with servers that implement it, and vice-versa: browsers that don't support csp simply ignore it, functioning as usual, defaulting to the standard same-origin policy for web content. ...
...d provides examples. specifying your policy you can use the content-security-policy http header to specify your policy, like this: content-security-policy: policy the policy is a string containing the policy directives describing your content security policy. writing a policy a policy is described using a series of policy directives, each of which describes the policy for a certain resource
type or policy area. your policy should include a default-src policy directive, which is a fallback for other resource
types when they don't have policies of their own (for a complete list, see the description of the default-src directive). a policy needs to include a default-src or script-src directive to prevent inline scripts from running, as well as blocking the use of eval(). a policy needs to in...
... see the description of the default-src directive). a policy needs to include a default-src or script-src directive to prevent inline scripts from running, as well as blocking the use of eval(). a policy needs to include a default-src or style-src directive to restrict inline styles from being applied from a <style> element or a style attribute. there are specific directives for a wide variety of
types of items, so that each
type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers. examples: common use cases this section provides examples of some common security policy scenarios. example 1 a web site administrator wants all content to come from the site's own origin (this excludes subdomains.) content-security-policy: default-src 'self' e...
...olated-directive the name of the policy section that was violated. sample violation report let's consider a page located at http://example.com/signup.html. it uses the following policy, disallowing everything but stylesheets from cdn.example.com. content-security-policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doc
type html> <html> <head> <title>sign up</title> <link rel="stylesheet" href="css/style.css"> </head> <body> ... content ... </body> </html> can you spot the mistake? stylesheets are allowed to be loaded only from cdn.example.com, yet the website tries to load one from its own origin (http://example.com). a browser capable of enforcing csp would send the following violation report ...
CSP: style-src - HTTP
if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the style-src policy: content-security-policy: style-src <source>; content-security-policy: style-src <source> <source>; sources <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. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
...tespace. see unsafe inline script for an example. in csp 2.0, this applied only to inline scripts. csp 3.0 allows it in the case of script-src for external scripts. ...
... unsafe inline styles note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides. however, if you absolutely have to use it, there are a few mechanisms that will allow them. to allow inline styles, 'unsafe-inline', a nonce-source or a hash-source that matches...
Content-Security-Policy - HTTP
tent-security-policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. with a few exceptions, policies mostly involve specifying server origins and script endpoints. this helps guard against cross-site scripting attacks (xss). for more information, see the introductory article on content security policy (csp). header
type response header forbidden header name no syntax content-security-policy: <policy-directive>; <policy-directive> where <policy-directive> consists of: <directive> <value> with no internal punctuation. directives fetch directives fetch directives control the locations from which certain resource
types may be loaded. child-src defines the valid sources for web worke...
...le-src-attr specifies valid sources for inline styles applied to individual dom elements. worker-src specifies valid sources for worker, sharedworker, or serviceworker scripts. document directives document directives govern the properties of a document or worker environment to which a policy applies. base-uri restricts the urls which can be used in a document's <base> element. plugin-
types restricts the set of plugins that can be embedded into a document by limiting the
types of resources which can be loaded. sandbox enables a sandbox for the requested resource similar to the <iframe> sandbox attribute. navigation directives navigation directives govern to which locations a user can navigate or submit a form, for example. form-action restricts the urls which can be used ...
...t-to fires a securitypolicyviolationevent. other directives block-all-mixed-content prevents loading any assets using http when the page is loaded using https. referrer used to specify information in the referer (sic) header for links away from a page. use the referrer-policy header instead. require-sri-for requires the use of sri for scripts or styles on the page. require-trusted-
types-for enforces trusted
types at the dom xss injection sinks. trusted-
types used to specify an allow-list of trusted
types policies. trusted
types allows applications to lock down dom xss injection sinks to only accept non-spoofable,
typed values in place of strings. upgrade-insecure-requests instructs user agents to treat all of a site's insecure urls (those served over http) as thoug...
...avor if report-to. mixed content candidate recommendation adds block-all-mixed-content. subresource integrity recommendation adds require-sri-for. upgrade insecure requests candidate recommendation adds upgrade-insecure-requests. content security policy level 2 recommendation adds base-uri, child-src, form-action, frame-ancestors, plugin-
types, referrer, and report-uri. deprecates frame-src. content security policy 1.0 obsolete defines connect-src, default-src, font-src, frame-src, img-src, media-src, object-src, report-uri, sandbox, script-src, and style-src. ...
OPTIONS - HTTP
ceptable to send the request. in this example, we will request permission for these parameters: the access-control-request-method header sent in the preflight request tells the server that when the actual request is sent, it will have a post request method. ...
...st is sent, it will have the x-pingother and content-
type headers. options /resources/post-here/ http/1.1 host: bar.example accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-
type the server now can respond if it will accept a request under these circumstances. in this example, the server response says that: access-control-allow-origin the https://foo.example origin is permitted to request the bar.example/resources/post-here/ url via the following: access-control-allow-methods post, get, and options are permitted methods for the url. (this header is similar to the a...
...foo.example origin is permitted to request the bar.example/resources/post-here/ url via the following: access-control-allow-methods post, get, and options are permitted methods for the url. ...
...mitted to read the values of the x-pingother and content-
type headers. access-control-max-age the above permissions may be cached for 86,400 seconds (1 day). ...
Functions - JavaScript
program, if it is declared at the top level). note: this works only when defining the function using the above syntax (i.e. function funcname(){}). the code below will not work. this means that function hoisting only works with function declarations—not with function expressions. console.log(square) // square is hoisted with an initial value undefined. console.log(square(5)) // uncaught
typeerror: square is not a function const square = function(n) { return n * n; } the arguments of a function are not limited to strings and numbers. you can pass whole objects to a function. the show_props() function (defined in working with objects) is an example of a function that takes an object as an argument. a function can call itself. for example, here is a function that computes factoria...
...e complex than the code above. an object containing methods for manipulating the inner variables of the outer function can be returned. ...
...e general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are undefined. in the following example, if no value is provided for b, its value would be undefined when evaluating a*b, and a call to multiply would normally have returned nan. however, this is prevented by the second line in this example: function multiply(a, b) { b =
typeof b !== 'undefined' ? b : 1; return a * b; } multiply(5); // 5 with default parameters (post-ecmascript 2015) with default parameters, a manual check in the function body is no longer necessary. you can simply put 1 as the default value for b in the function head: function multiply(a, b = 1) { return a * b; } multiply(5); // 5 for more details, see default parameters in the reference...
.... isfinite() the global isfinite() function determines whether the passed value is a finite number. if needed, the parameter is first converted to a number. isnan() the isnan() function determines whether a value is nan or not. note: coercion inside the isnan function has interesting rules; you may alternatively want to use number.isnan(), as defined in ecmascript 2015, or you can use
typeof to determine if the value is not-a-number. parsefloat() the parsefloat() function parses a string argument and returns a floating point number. parseint() the parseint() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems). decodeuri() the decodeuri() function decodes a uniform resource identifier (uri) prev...
Iterators and generators - JavaScript
programming due to the need to explicitly maintain their internal state. generator functions provide a powerful alternative: they allow you to define an iterative algorithm 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 imple...
...ion is much easier to write and read. function* makerangeiterator(start = 0, end = 100, step = 1) { let iterationcount = 0; for (let i = start; i < end; i += step) { iterationcount++; yield i; } return iterationcount; } iterables an object is iterable if it defines its iteration 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 proto
type 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...
... syntaxes expecting iterables some statements and expressions expect iterables. for example: the for-of loops, yield*. for (let value of ['a', 'b', 'c']) { console.log(value); } // "a" // "b" // "c" [...'abc']; // ["a", "b", "c"] function* gen() { yield* ['a', 'b', 'c']; } ...
...1; }; user-defined iterables you can make your own iterables like this: const myiterable = { *[symbol.iterator]() { yield 1; yield 2; yield 3; } } for (let value of myiterable) { console.log(value); } // 1 // 2 // 3 or [...myiterable]; // [1, 2, 3] built-in iterables string, array,
typedarray, map and set are all built-in iterables, because their proto
type objects all have a symbol.iterator method. syntaxes expecting iterables some statements and expressions expect iterables. for example: the for-of loops, yield*. for (let value of ['a', 'b', 'c']) { console.log(value); } // "a" // "b" // "c" [...'abc']; // ["a", "b", "c"] function* gen() { yield* ['a', 'b', 'c']; } gen().next(); // { value: "a", done: false } [a, b, c] = new set(['a',...
Numbers and dates - JavaScript
riety of mathematical operations on numbers. numbers in javascript, numbers are implemented in double-precision 64-bit binary format ieee 754 (i.e., a number between ±2−1022 and ±2+1023, or about ±10−308 to ±10+308, with a numeric precision of 53 bits). integer values up to ±253 − 1 can be represented exactly. ...
...number
type has three symbolic values: +infinity, -infinity, and nan (not-a-number). a more recent addition to javascript is bigint which lets you represent integers that may be very large. there are caveats to using bigint, however; for example, you can't mix and match bigint and number values in the same operation, and you can't use the math object with bigint values. see also javascript data
types and structures for context with other primitive
types in javascript. you can use four
types of number literals: decimal, binary, octal, and hexadecimal. decimal numbers 1234567890 42 // caution when using leading zeros: 0888 // 888 parsed as decimal 0777 // parsed as octal in non-strict mode (511 in decimal) note that decimal literals can start with a zero (0) followed by another decimal ...
...e() determines whether the passed value is a finite number. number.isinteger() determines whether the passed value is an integer. number.isnan() determines whether the passed value is nan. more robust version of the original global isnan(). number.issafeinteger() determines whether the provided value is a number that is a safe integer. the number proto
type provides methods for retrieving information from number objects in various formats. the following table summarizes the methods of number.proto
type. methods of number.proto
type method description toexponential() returns a string representing the number in exponential notation. tofixed() returns a string representing the number in fixed-point notation. ...
...ndicating whether the number is positive, negative or zero. clz32(), imul() number of leading zero bits in the 32-bit binary representation. the result of the c-like 32-bit multiplication of the two arguments. unlike many other objects, you never create a math object of your own. you always use the built-in math object. date object javascript does not have a date data
type. however, you can use the date object and its methods to work with dates and times in your applications. the date object has a large number of methods for setting, getting, and manipulating dates. it does not have any properties. javascript handles dates similarly to java. the two languages have many of the same date methods, and both languages store dates as the number of milliseconds since jan...
Assertions - JavaScript
if the multiline flag is set to true, also matches immediately after a line break character. ...
...if the multiline flag is set to true, also matches immediately after a line break character. ...
...e "oon" is the end of the string, thus not followed by a word character. /\w\b\w/ will never match anything, because a word character can never be followed by both a non-word and a word character. to match a backspace character ([\b]), see character classes. \b matches a non-word boundary. this is a position where the previous and next character are of the same
type: either both must be words, or both must be non-words, for example between two letters or between two spaces. the beginning and end of a string are considered non-words. same as the matched word boundary, the matched non-word boundary is also not included in the match. for example, /\bon/ matches "on" in "at noon", and /ye\b/ matches "ye" in "possibly yesterday". other assertions not...
...nor "tom" is part of the match results. (?<!y)x negative lookbehind assertion: matches "x" only if "x" is not preceded by "y". for example, /(?<!-)\d+/ matches a number only if it is not preceded by a minus sign. /(?<!-)\d+/.exec('3') matches "3". /(?<!-)\d+/.exec('-3') match is not found because the number is preceded by the minus sign. examples general boundary-
type overview example // using regex boundaries to fix buggy string. buggymultiline = `tey, ihe light-greon apple tangs on ihe greon traa`; // 1) use ^ to fix the matching at the begining of the string, and right after newline. buggymultiline = buggymultiline.replace(/^t/gim,'h'); console.log(1, buggymultiline); // fix 'tey', 'tangs' => 'hey', 'hangs'. avoid 'traa'. // 2) use $ to fix matching at t...
Text formatting - JavaScript
it is a set of "elements" of 16-bit unsigned integer values (utf-16 code units). each element in the string occupies a position in the string. the first element is at index 0, the next at index 1, and so on. the length of a string is the number of elements in it. you can create strings using string literals or string objects. ...
...ing \u. '\u00a9' // "©" unicode code point escapes new in ecmascript 2015. with unicode code point escapes, any character can be escaped using hexadecimal numbers so that it is possible to use unicode code points up to 0x10ffff. with simple unicode escapes it is often necessary to write the surrogate halves separately to achieve the same result. ...
...that it is possible to use unicode code points up to 0x10ffff. with simple unicode escapes it is often necessary to write the surrogate halves separately to achieve the same result. see also string.fromcodepoint() or string.proto
type.codepointat(). '\u{2f804}' // the same with simple unicode escapes '\ud87e\udc04' string objects the string object is a wrapper around the string primitive data
type. const foo = new string('foo'); // creates a string object console.log(foo); // displays: [string: 'foo']
typeof foo; // returns 'object' you can call any of the methods of the string object on a string literal value—javascript automatically converts the string literal to a temporary string object, calls the method, then discards the temporary string object. you can also use the string.lengt...
... the single character u+1f600 "emoji grinning face" will have length 2. accessing the individual code units in such a string using brackets may have undesirable consequences such as the formation of strings with unmatched surrogate code units, in violation of the unicode standard. (examples should be added to this page after mdn bug 857438 is fixed.) see also string.fromcodepoint() or string.proto
type.codepointat(). a string object has a variety of methods: for example those that return a variation on the string itself, such as substring and touppercase. the following table summarizes the methods of string objects. methods of string method description charat, charcodeat, codepointat return the character or character code at the specified position in string. ...
constructor - JavaScript
he polygon's width and height super(length, length); // note: in derived classes, `super()` must be called before you // can use `this`. leaving this out will cause a referenceerror. ...
....5; this.width = value**0.5; } } another example here the proto
type of square class is changed—but the constructor of its base class polygon is still called when a new instance of a square is created. ...
...= value**0.5; } } another example here the proto
type of square class is changed—but the constructor of its base class polygon is still called when a new instance of a square is created. ...
...another example here the proto
type of square class is changed—but the constructor of its base class polygon is still called when a new instance of a square is created. class polygon { constructor() { this.name = "polygon"; } } class square extends polygon { constructor() { super(); } } class rectangle {} object.setproto
typeof(square.proto
type, rectangle.proto
type); console.log(object.getproto
typeof(square.proto
type) === polygon.proto
type); //false console.log(object.getproto
typeof(square.proto
type) === rectangle.proto
type); //true let newinstance = new square(); console.log(newinstance.name); //polygon specifications specification ecmascript (ecma-262)the definition of 'constructor method' in that specification. ...
RangeError: precision is out of range - JavaScript
ion. message rangeerror: the number of fractional digits is out of range (edge) rangeerror: the precision is out of range (edge) rangeerror: precision {0} out of range (firefox) rangeerror: toexponential() argument must be between 0 and 20 (chrome) rangeerror: tofixed() digits argument must be between 0 and 20 (chrome) rangeerror: toprecision() argument must be between 1 and 21 (chrome) error
type rangeerror what went wrong? there was an out of range precision argument in one of these methods: number.proto
type.toexponential() number.proto
type.tofixed() number.proto
type.toprecision() the allowed range for these methods is usually between 0 and 20 (or 21). however, the ecmascript specification allows to extend this range. method firefox (spidermonkey) chrome, opera ...
... there was an out of range precision argument in one of these methods: number.proto
type.toexponential() number.proto
type.tofixed() number.proto
type.toprecision() the allowed range for these methods is usually between 0 and 20 (or 21). however, the ecmascript specification allows to extend this range. ...
...thods: number.proto
type.toexponential() number.proto
type.tofixed() number.proto
type.toprecision() the allowed range for these methods is usually between 0 and 20 (or 21). however, the ecmascript specification allows to extend this range. ...
...tofixed() number.proto
type.toprecision() the allowed range for these methods is usually between 0 and 20 (or 21). however, the ecmascript specification allows to extend this range. ...
Array.isArray() - JavaScript
// false array.isarray(undefined); // false syntax array.isarray(value) parameters value the value to be checked. return value true if the value is an array; otherwise, false. description if the value is an array, true is returned; otherwise, false is. see the article “determining with absolute accuracy whether or not a javascript object is an array” for more details. ...
...therwise, false is. see the article “determining with absolute accuracy whether or not a javascript object is an array” for more details. given a
typedarray instance, false is always returned. polyfill running the following code before any other code will create array.isarray() if it's not natively available. ...
...not natively available. ...
...rray.isarray = function(arg) { return object.proto
type.tostring.call(arg) === '[object array]'; }; } examples using array.isarray // all following calls return true array.isarray([]); array.isarray([1]); array.isarray(new array()); array.isarray(new array('a', 'b', 'c', 'd')); array.isarray(new array(3)); // little known fact: array.proto
type itself is an array: array.isarray(array.proto
type); // all following calls return false array.isarray(); array.isarray({}); array.isarray(null); array.isarray(undefined); array.isarray(17); array.isarray('array'); array.isarray(true); array.isarray(false); array.isarray(new uint8array(32)); array.isarray({ __proto__: array.proto
type }); instanceof vs isarray when checking for array instance, array.isarray is preferred over instanceof because...
BigInt64Array() constructor - JavaScript
the bigint64array()
typed array constructor creates a new bigint64array object, which is, an array of 64-bit signed integers in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0n. once established, you can reference elements in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation). syntax new bigint64array(); new bigint64array(length); new bigint64array(
typedarray); new bigint64array(object); new bigint64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros. ...
...rray index syntax (that is, using bracket notation). syntax new bigint64array(); new bigint64array(length); new bigint64array(
typedarray); new bigint64array(object); new bigint64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object whe...
...gument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object when called with an object argument, a new
typed array is created as if by the
typedarray.from() method. buffer, byteoffset, length when called with a buffer, and optionally a byteoffset and a length argument, a new
typed array view is created that views the specified arraybuffer. the byteoffset and length parameters specify the memory range that will be exposed by the
typed array view. if both are omitted, all of buffer is viewed; if only l...
...y length is omitted, the remainder of buffer is viewed. ...
BigUint64Array() constructor - JavaScript
the biguint64array()
typed array constructor creates a new biguint64array object, which is, an array of 64-bit unsigned integers in the platform byte order. if control over byte order is needed, use dataview instead. the contents are initialized to 0n. once established, you can reference elements in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation). syntax new biguint64array(); new biguint64array(length); new biguint64array(
typedarray); new biguint64array(object); new biguint64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros. ...
...index syntax (that is, using bracket notation). syntax new biguint64array(); new biguint64array(length); new biguint64array(
typedarray); new biguint64array(object); new biguint64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_element bytes, containing zeros.
typedarray when called with a
typedarray argument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object whe...
...gument, which can be an object of any of the
typed array
types (such as int32array), the
typedarray gets copied into a new
typed array. each value in
typedarray is converted to the corresponding
type of the constructor before being copied into the new array. the length of the new
typed array will be same as the length of the
typedarray argument. object when called with an object argument, a new
typed array is created as if by the
typedarray.from() method. buffer, byteoffset, length when called with a buffer, and optionally a byteoffset and a length argument, a new
typed array view is created that views the specified arraybuffer. the byteoffset and length parameters specify the memory range that will be exposed by the
typed array view. if both are omitted, all of buffer is viewed; if only l...
... is omitted, the remainder of buffer is viewed. ...
Intl.DateTimeFormat - JavaScript
lone https://github.com/mdn/interactive-examples and send us a pull request. constructor intl.datetimeformat() creates a new datetimeformat object. static methods intl.datetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. ...
...static methods intl.datetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.datetimeformat.proto
type.format() getter function that formats a date according to the locale and formatting options of this datetimeformat object. intl.datetimeformat.proto
type.formattoparts() returns an array of objects representing the date string in parts that can be used for custom locale-aware formatting. ...
... the runtime's default locale. instance methods intl.datetimeformat.proto
type.format() getter function that formats a date according to the locale and formatting options of this datetimeformat object. intl.datetimeformat.proto
type.formattoparts() returns an array of objects representing the date string in parts that can be used for custom locale-aware formatting. intl.datetimeformat.proto
type.resolvedoptions() returns a new object with properties reflecting the locale and formatting options computed during initialization of the object. ...
... this datetimeformat object. intl.datetimeformat.proto
type.formattoparts() returns an array of objects representing the date string in parts that can be used for custom locale-aware formatting. intl.datetimeformat.proto
type.resolvedoptions() returns a new object with properties reflecting the locale and formatting options computed during initialization of the object. intl.datetimeformat.proto
type.formatrange() this method receives two dates and formats the date range in the most concise way based on the locale and options provided when instantiating datetimeformat. intl.datetimeformat.proto
type.formatrangetoparts() this method receives two dates and returns an array of objects containing the locale-specific tokens representing each part of the formatted date range. examples using da...
Intl.ListFormat() constructor - JavaScript
bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. options optional. an object with some or all of the following properties: localematcher the locale matching algorithm to use. possible values are "lookup" and "best fit"; the default is "best fit". for information about this option, see the intl page.
type the format of output message. possible values are "conjunction" that stands for "and"-based lists (default, e.g., a, b, and c), or "disjunction" that stands for "or"-based lists (e.g., a, b, or c). "unit" stands for lists of values with units (e.g., 5 pounds, 12 ounces). style the length of the formated message. possible values are: "long" (default, e.g., a, b, and c); "short" (e.g., a, b...
...default, e.g., a, b, and c), or "disjunction" that stands for "or"-based lists (e.g., a, b, or c). "unit" stands for lists of values with units (e.g., 5 pounds, 12 ounces). style the length of the formated message. possible values are: "long" (default, e.g., a, b, and c); "short" (e.g., a, b, c), or "narrow" (e.g., a b c). ...
...s are: "long" (default, e.g., a, b, and c); "short" (e.g., a, b, c), or "narrow" (e.g., a b c). when style is short or narrow, unit is the only allowed value for the
type option. examples using format the following example shows how to create a list formatter using the english language. ...
...nit is the only allowed value for the
type option. examples using format the following example shows how to create a list formatter using the english language. const list = ['motorcycle', 'bus', 'car']; console.log(new intl.listformat('en-gb', { style: 'long',
type: 'conjunction' }).format(list)); // > motorcycle, bus and car console.log(new intl.listformat('en-gb', { style: 'short',
type: 'disjunction' }).format(list)); // > motorcycle, bus or car console.log(new intl.listformat('en-gb', { style: 'narrow',
type: 'unit' }).format(list)); // > motorcycle bus car specifications specification intl.listformatthe definition of 'listformat()' in that specification. ...
Object.defineProperties() - JavaScript
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. a data descriptor also has the following optional keys: value the value associated with the property. can be any ...
...yfill assuming a pristine execution environment with all names and properties referring to their initial values, object.defineproperties is almost completely equivalent (note the comment in iscallable) to the following reimplementation in javascript: function defineproperties(obj, properties) { function converttodescriptor(desc) { function hasproperty(obj, prop) { return object.proto
type.hasownproperty.call(obj, prop); } function iscallable(v) { // nb: modify as necessary if other values than functions are callable. return
typeof v === 'function'; } if (
typeof desc !== 'object' || desc === null) throw new
typeerror('bad desc'); var d = {}; if (hasproperty(desc, 'enumerable')) d.enumerable = !!desc.enumerable; if (hasproperty...
...}; if (hasproperty(desc, 'enumerable')) d.enumerable = !!desc.enumerable; if (hasproperty(desc, 'configurable')) d.configurable = !!desc.configurable; if (hasproperty(desc, 'value')) d.value = desc.value; if (hasproperty(desc, 'writable')) d.writable = !!desc.writable; if (hasproperty(desc, 'get')) { var g = desc.get; if (!iscallable(g) &&
typeof g !== 'undefined') throw new
typeerror('bad get'); d.get = g; } if (hasproperty(desc, 'set')) { var s = desc.set; if (!iscallable(s) &&
typeof s !== 'undefined') throw new
typeerror('bad set'); d.set = s; } if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d)) throw new
typeerror('identity-confused descriptor'); ...
... throw new
typeerror('bad get'); d.get = g; } if (hasproperty(desc, 'set')) { var s = desc.set; if (!iscallable(s) &&
typeof s !== 'undefined') throw new
typeerror('bad set'); d.set = s; } if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d)) throw new
typeerror('identity-confused descriptor'); return d; } if (
typeof obj !== 'object' || obj === null) throw new
typeerror('bad obj'); properties = object(properties); var keys = object.keys(properties); var descs = []; for (var i = 0; i < keys.length; i++) descs.push([keys[i], converttodescriptor(properties[keys[i]])]); for (var i = 0; i < descs.length; i++) object.defineproperty(obj, descs[i][0], descs[i][1]); return obj; } examp...
Object.getOwnPropertyDescriptor() - JavaScript
the object returned is mutable but mutating it has no effect on the original property's configuration. 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. ...
...f the property whose description is to be retrieved. return value a property descriptor of the given property if it exists on the object, undefined otherwise. description this method permits examination of the precise description of a property. a property in javascript consists of either a string-valued name or a symbol and a property descriptor. further information about property descriptor
types and their attributes can be found in object.defineproperty(). a property descriptor is a record with some of the following attributes: value the value associated with the property (data descriptors only). writable true if and only if the value associated with the property may be changed (data descriptors only). get a function which serves as a getter for the property, or undefined if th...
...). writable true if and only if the value associated with the property may be changed (data descriptors only). get a function which serves as a getter for the property, or undefined if there is no getter (accessor descriptors only). set a function which serves as a setter for the property, or undefined if there is no setter (accessor descriptors only). 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. enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. examples using object.getownpropertydescriptor var o, d; o = { get foo() { return 17; } }; d = object.getownpropertydescriptor(o, 'foo'); // d is { // configurab...
... writable: true // } o = {}; object.defineproperty(o, 'qux', { value: 8675309, writable: false, enumerable: false }); d = object.getownpropertydescriptor(o, 'qux'); // d is { // value: 8675309, // writable: false, // enumerable: false, // configurable: false // } non-object coercion in es5, if the first argument to this method is not an object (a primitive), then it will cause a
typeerror. in es2015, a non-object first argument will be coerced to an object at first. object.getownpropertydescriptor('foo', 0); //
typeerror: "foo" is not an object // es5 code object.getownpropertydescriptor('foo', 0); // object returned by es2015 code: { // configurable: false, // enumerable: true, // value: "f", // writable: false // } specifications specification ...
handler.set() - JavaScript
rameters the following parameters are passed to the set() method. this is bound to the handler. target the target object. property the name or symbol of the property to set. value the new value of the property to set. receiver the object to which the assignment was originally directed. this is usually the proxy itself. but a set() handler can also be called indirectly, via the proto
type chain or various other ways. for example: suppose a script does obj.name = "jen", and obj is not a proxy, and has no own property .name, but it has a proxy on its proto
type chain. that proxy's set() handler will be called, and obj will be passed as the receiver. return value the set() method should return a boolean value. return true to indicate that assignment succeeded. if the se...
... = "jen", and obj is not a proxy, and has no own property .name, but it has a proxy on its proto
type chain. that proxy's set() handler will be called, and obj will be passed as the receiver. return value the set() method should return a boolean value. return true to indicate that assignment succeeded. if the set() method returns false, and the assignment happened in strict-mode code, a
typeerror will be thrown. description the handler.set() method is a trap for setting property value. ...
... cannot set the value of a property if the corresponding target object property is a non-configurable accessor property that has undefined as its [[set]] attribute. ...
...ferent from the value of the corresponding target object property if the corresponding target object property is a non-writable, non-configurable data property. cannot set the value of a property if the corresponding target object property is a non-configurable accessor property that has undefined as its [[set]] attribute. in strict mode, a false return value from the set() handler will throw a
typeerror exception. examples trap setting of a property value the following code traps setting a property value. const p = new proxy({}, { set: function(target, prop, value, receiver) { target[prop] = value; console.log('property set: ' + prop + ' = ' + value); return true; } }) console.log('a' in p); // false p.a = 10; // "property set: a = 10" console.log('a' i...
WeakMap - JavaScript
a symbol can't be a weakmap key). ...
...a symbol can't be a weakmap key). ...
... has not been garbage collected. because the references are weak, weakmap keys are not enumerable. there is no method to obtain a list of the keys. if they were, the list would depend on the state of garbage collection, introducing non-determinism. if you want to have a list of keys, you should use a map. constructor weakmap() creates a new weakmap object. ...
...ap keys are not enumerable. there is no method to obtain a list of the keys. if they were, the list would depend on the state of garbage collection, introducing non-determinism. if you want to have a list of keys, you should use a map. constructor weakmap() creates a new weakmap object. instance methods weakmap.proto
type.delete(key) removes any value associated to the key. weakmap.proto
type.has(key) will return false afterwards. weakmap.proto
type.get(key) returns the value associated to the key, or undefined if there is none. weakmap.proto
type.has(key) returns a boolean asserting whether a value has been associated to the key in the weakmap object or not. weakmap.proto
type.set(key, value) sets the value for the key in the weakmap object. returns the weakmap object. examples ...
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.proto
type.message error message. although ecma-262 specifies that urierror should provide its own message property, in spidermonkey, it inherits error.proto
type.message. webassembly.compileerror.proto
type.name error name. inherited from error. webassembly.compileerror.proto
type.filename path to file that raised this error. inherited from error. webassembly.compileerror.proto
type.linenumber line number in file that raised this error. inherited from error. webassembly.compileerror.proto
type.columnnumber column number in line that raised this error. in...
...inherited from error. ...
...inherited from error. ...
...inherited from error. ...
WebAssembly.Global - JavaScript
a webassembly.global object represents a global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances. this allows dynamic linking of multiple modules. constructor webassembly.global() creates a new global object. ...
...m both javascript and importable/exportable across one or more webassembly.module instances. this allows dynamic linking of multiple modules. constructor webassembly.global() creates a new global object. global instances all global instances inherit from the global() constructor's proto
type object — this can be modified to affect all global instances. instance properties global.proto
type.constructor returns the function that created this object's instance. by default this is the webassembly.global() constructor. global.proto
type[@@tostringtag] the initial value of the @@tostringtag property is the string value "webassembly.global". global.proto
type.value the value contained inside the global variable — this can be used to directly set and get the global's value. instance...
...e function that created this object's instance. by default this is the webassembly.global() constructor. global.proto
type[@@tostringtag] the initial value of the @@tostringtag property is the string value "webassembly.global". global.proto
type.value the value contained inside the global variable — this can be used to directly set and get the global's value. instance methods global.proto
type.valueof() old-style method that returns the value contained inside the global variable. examples creating a new global instance the following example shows a new global instance being created using the webassembly.global() constructor. it is being defined as a mutable i32
type, with a value of 0. the value of the global is then changed, first to 42 using the global.value property, and then ...
...ue is given to it and then returns the new value). ...
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.proto
type.message error message. although ecma-262 specifies that urierror should provide its own message property, in spidermonkey, it inherits error.proto
type.message. webassembly.linkerror.proto
type.name error name. inherited from error. webassembly.linkerror.proto
type.filename path to file that raised this error. inherited from error. webassembly.linkerror.proto
type.linenumber line number in file that raised this error. inherited from error. webassembly.linkerror.proto
type.columnnumber column number in line that raised this error. ...
...inherited from error. ...
...inherited from error. ...
...inherited from error. ...
WebAssembly.instantiate() - JavaScript
the returned promise resolves to both a compiled webassembly.module and its first webassembly.instance. the secondary overload takes an already-compiled webassembly.module and returns a promise that resolves to an instance of that module. this overload is useful if the module has already been compiled. ...
...l possible, you should use the newer webassembly.instantiatestreaming() method instead, which fetches, compiles, and instantiates a module all in one step, directly from the raw bytecode, so doesn't require conversion to an arraybuffer. syntax primary overload — taking wasm binary code promise<resultobject> webassembly.instantiate(buffersource, importobject); parameters buffersource a
typed array or arraybuffer containing the binary code of the .wasm module you want to compile. importobject optional an object containing the values to be imported into the newly-created instance, such as functions or webassembly.memory objects. there must be one matching property for each declared import of the compiled module or else a webassembly.linkerror is thrown. return value a promise tha...
...omise that resolves to a resultobject which contains two fields: module: a webassembly.module object representing the compiled webassembly module. this module can be instantiated again, shared via postmessage() or cached in indexeddb. instance: a webassembly.instance object that contains all the exported webassembly functions. exceptions if either of the parameters are not of the correct
type or structure, a
typeerror is thrown. if the operation fails, the promise rejects with a webassembly.compileerror, webassembly.linkerror, or webassembly.runtimeerror, depending on the cause of the failure. secondary overload — taking a module object instance promise<webassembly.instance> webassembly.instantiate(module, importobject); parameters module the webassembly.module object to b...
...bject optional an object containing the values to be imported into the newly-created instance, such as functions or webassembly.memory objects. there must be one matching property for each declared import of module or else a webassembly.linkerror is thrown. return value a promise that resolves to an webassembly.instance object. exceptions if either of the parameters are not of the correct
type or structure, a
typeerror is thrown. if the operation fails, the promise rejects with a webassembly.compileerror, webassembly.linkerror, or webassembly.runtimeerror, depending on the cause of the failure. examples note: you'll probably want to use webassembly.instantiatestreaming() in most cases, as it is more efficient than instantiate(). first overload example after fetching some webassem...
null - JavaScript
global object, like undefined can be. instead, null expresses a lack of identification, indicating that a variable points to no object. in apis, null is often retrieved in a place where an object can be expected but no object is relevant. // foo does not exist. ...
...evant. // foo does not exist. it is not defined and has never been initialized: foo; //referenceerror: foo is not defined // foo is known to exist now but it has no
type or value: var foo = null; foo; //null examples difference between null and undefined when checking for null or undefined, beware of the differences between equality (==) and identity (===) operators, as the former performs
type-conversion. ...
...es not exist. it is not defined and has never been initialized: foo; //referenceerror: foo is not defined // foo is known to exist now but it has no
type or value: var foo = null; foo; //null examples difference between null and undefined when checking for null or undefined, beware of the differences between equality (==) and identity (===) operators, as the former performs
type-conversion. ...
...oo; //referenceerror: foo is not defined // foo is known to exist now but it has no
type or value: var foo = null; foo; //null examples difference between null and undefined when checking for null or undefined, beware of the differences between equality (==) and identity (===) operators, as the former performs
type-conversion.
typeof null // "object" (not "null" for legacy reasons)
typeof undefined // "undefined" null === undefined // false null == undefined // true null === null // true null == null // true !null // true isnan(1 + null) // false isnan(1 + undefined) // true specifications specification ecmascript (ecma-262)the definition of 'null value' in that specification. ...
Strict inequality (!==) - 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 x !== y description the strict inequality operator checks whether its operands are not equal. ...
...rict inequality operator checks whether its operands are not equal. it is the negation of the strict equality operator so the following two lines will always give the same result: x !== y !(x === y) for details of the comparison algorithm, see the page for the strict equality operator. ...
...n of the strict equality operator so the following two lines will always give the same result: x !== y !(x === y) for details of the comparison algorithm, see the page for the strict equality operator. ...
...rue examples comparing operands of the same
type console.log("hello" !== "hello"); // false console.log("hello" !== "hola"); // true console.log(3 !== 3); // false console.log(3 !== 4); // true console.log(true !== true); // false console.log(true !== false); // true console.log(null !== null); // false comparing operands of different
types console.log("3" !== 3); // true console.log(true !== 1); // true console.log(null !== undefined); // true comparing objects const object1 = { name: "hello" } const object2 = { name: "hello" } console.log(object1 !== object2); // true console.log(object1 !== object1); // false specifications specification ecmascript (ecma-262)the definition...
this - JavaScript
to set the value of this to a particular value when calling a function, use call(), or apply() as in the examples below. class context the behavior of this in classes and functions is similar, since classes are functions under the hood. but there are some differences and caveats. within a class constructor, this is a regular object. all non-static methods within the class are added to the proto
type of this: class example { constructor() { const proto = object.getproto
typeof(this); console.log(object.getownpropertynames(proto)); } first(){} second(){} static third(){} } new example(); // ['constructor', 'first', 'second'] note: static methods are not properties of this. they are properties of the class itself. derived classes unlike base class constructors, derived ...
...is is not an object, an attempt will be made to convert it to an object. values null and undefined become the global object. primitives like 7 or 'foo' will be converted to an object using the related constructor, so the primitive number 7 is converted to an object as if by new number(7) and the string 'foo' to an object as if by new string('foo'), e.g. function bar() { console.log(object.proto
type.tostring.call(this)); } bar.call(7); // [object number] bar.call('foo'); // [object string] bar.call(undefined); // [object global] the bind method ecmascript 5 introduced function.proto
type.bind(). calling f.bind(someobject) creates a new function with the same body and scope as f, but where this occurs in the original function, in the new function it is permanently bound to the first ar...
... member reference. in the following example, when we invoke the function, we call it as a method g of the object o.b. this time during execution, this inside the function will refer to o.b. the fact that the object is itself a member of o has no consequence; the most immediate reference is all that matters. o.b = {g: independent, prop: 42}; console.log(o.b.g()); // 42 this on the object's proto
type chain the same notion holds true for methods defined somewhere on the object's proto
type chain. if the method is on an object's proto
type chain, this refers to the object the method was called on, as if the method were on the object. var o = {f: function() { return this.a + this.b; }}; var p = object.create(o); p.a = 1; p.b = 4; console.log(p.f()); // 5 in this example, the object assigned t...
...s proto
type chain. if the method is on an object's proto
type chain, this refers to the object the method was called on, as if the method were on the object. var o = {f: function() { return this.a + this.b; }}; var p = object.create(o); p.a = 1; p.b = 4; console.log(p.f()); // 5 in this example, the object assigned to the variable p doesn't have its own f property, it inherits it from its proto
type. but it doesn't matter that the lookup for f eventually finds a member with that name on o; the lookup began as a reference to p.f, so this inside the function takes the value of the object referred to as p. that is, since f is called as a method of p, its this refers to p. this is an interesting feature of javascript's proto
type inheritance. this with a getter or setter again, the same notion ...
var - JavaScript
bal object for global variables, is set to be non-configurable because the identifier is to be treated as a variable, rather than a straightforward property of the global object. javascript has automatic memory management, and it would make no sense to be able to use the delete operator on a global variable. 'use strict'; var x = 1; globalthis.hasownproperty('x'); // true delete globalthis.x; //
typeerror in strict mode. fails silently otherwise. delete x; // syntaxerror in strict mode. fails silently otherwise. note that in both nodejs commonjs modules and native ecmascript modules, top-level variable declarations are scoped to the module, and are not, therefore added as properties to the global object. unqualified identifier assignments the global object sits at the top of the scope ch...
...erefore added as properties to the global object. unqualified identifier assignments the global object sits at the top of the scope chain. when attempting to resolve a name to a value, the scope chain is searched. this means that properties on the global object are conveniently visible from every scope, without having to qualify the names with globalthis. or window. or global.. so you can just
type: function foo() { string('s') // note the function `string` is implicitly visible } ...because globalthis.hasownproperty('string') // true so the global object will ultimately be searched for unqualified identifiers. you don't have to
type globalthis.string, you can just
type the unqualified string. the corollary, in non-strict mode, is that assignment to unqualified identifiers will, if th...
...e as above but with a strict mode: 'use strict'; var x = 0; function f() { var x = y = 1; // throws a referenceerror in strict mode. } f(); console.log(x, y); implicit globals and outer function scope variables that appear to be implicit globals may be references to variables in an outer function scope: var x = 0; // declares x within file scope, then assigns it a value of 0. console.log(
typeof z); // "undefined", since z doesn't exist yet function a() { var y = 2; // declares y within scope of function a, then assigns it a value of 2. console.log(x, y); // 0 2 function b() { x = 3; // assigns 3 to existing file scoped x. y = 4; // assigns 4 to existing outer y. z = 5; // creates a new global variable z, and assigns it a value of 5. // (throws a referen...
...// 0 2 function b() { x = 3; // assigns 3 to existing file scoped x. y = 4; // assigns 4 to existing outer y. z = 5; // creates a new global variable z, and assigns it a value of 5. // (throws a referenceerror in strict mode.) } b(); // creates z as a global variable. console.log(x, y, z); // 3 4 5 } a(); // also calls b. console.log(x, z); // 3 5 console.log(
typeof y); // "undefined", as y is local to function a specifications specification ecmascript (ecma-262)the definition of 'variable statement' in that specification. ...
JavaScript
functional programming) styles. read more about javascript. ...
...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 want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. asynchronous javascript discusses asynchronous javascript, why it is import...
...overview of available data structures in javascript. equality comparisons and sameness javascript provides three different value-comparison operations: strict equality using ===, loose equality using ==, and the object.is() method. closures a closure is the combination of a function and the lexical environment within which that function was declared. advanced inheritance and the proto
type chain explanation of the widely misunderstood and under-estimated proto
type-based inheritance. strict mode strict mode defines that you can not use any variable before initializing it. it is a restricted variant of ecmascript 5, for faster performance and easier debugging. javascript
typed arrays javascript
typed arrays provide a mechanism for accessing raw binary data. memory management m...
... has a concurrency model based on an "event loop". reference browse the complete javascript reference documentation. standard objects get to know standard built-in objects array, boolean, date, 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 develop...
<maction> - MathML
the mathml <maction> element provides a possibility to bind actions to (sub-) expressions. the action itself is specified by the action
type attribute, which accepts several values. to specify which child elements are addressed by the action, you can make use of the selection attribute. attributes action
type the action which specifies what happens for this element. possible values are: statusline: if there is a click on the expression or the reader moves the pointer over it, the message is sent to the browser's status line. the syntax is: <maction action
type="statusline"> expression message </maction>. toggle: when there is a click on the subexpression, the rendering alternates the display of selected subexpressions. therefore each click increments the selection value. the synta...
... click on the expression or the reader moves the pointer over it, the message is sent to the browser's status line. the syntax is: <maction action
type="statusline"> expression message </maction>. toggle: when there is a click on the subexpression, the rendering alternates the display of selected subexpressions. therefore each click increments the selection value. the syntax is: <maction action
type="toggle" selection="positive-integer" > expression1 expression2 expressionn </maction>. tooltip: when the pointer moves over the expression, a tooltip box with a message is displayed near the expression. the syntax is: <maction action
type="tooltip"> expression message </maction>. class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. math...
...ink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color and also the fraction line color. you can use #rgb, #rrggbb and html color names. selection the child element which is addressed by the action. the default value is 1, which is the first child element. ...
...ackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color and also the fraction line color. you can use #rgb, #rrggbb and html color names. selection the child element which is addressed by the action. the default value is 1, which is the first child element. ...
Digital audio concepts - Web media technologies
decompressing audio is performed by encoding and decoding it using an audio codec (coder/decoder). over the years, a large variety of codecs have been developed, several of which are commonly used on the web. for details about the most important and useful ones for web developers to be familiar with, see the article guide to audio codecs used on the web. audio channels and frames there are two
types of audio channel. standard audio channels are used to present the majority of the audible sound. the sound for the left and right main channels, as well as all of your surround sound speakers (center, left and right rear, left and right sides, ceiling channels, and so forth) are all standard audio channels. special low frequency enhancement (lfe) channels provide the signal for special speakers ...
...ng the waveform to make it easier to compress, or by removing components of the sound that aren't really heard, the waveform becomes simpler, resulting in data which has more consistency and is therefore easier to compress. restricting the audio bandwidth to include only the frequencies most important to how the human ear will interpret the decoded sound can also improve compression factors. the
type of content being encoded can affect the choice of codec. in particular, the waveform for music is almost always more complex than that of an audio sample that contains only human voices. in addition, the human voice uses a small portion of the range of audio frequencies the human ear can detect. telephone networks, which were originally designed specifically to transmit human voices, can only ca...
...sily achieved with minimum impact to quality, the bit rate may be very low, while in areas where compression is more complex, the bit rate will be higher. audio frequency bandwidth some codecs allow you to configure the audio frequency bandwidth directly, either by specifying the range of frequencies to allow, by establishing upper and/or lower frequency limits, or by specifying an audio source
type that determines how to configure the algorithm based on the expected frequency use of the incoming signal. in addition, some codecs support special limited frequency bandwidth channels, such as the lfe channel, which inherently limit the frequency range available. in the case of lfe, the audio frequency bandwidth is limited to a frequency range suitable for use by a subwoofer or similar audio ex...
...ple stereo. joint stereo is a method of storing stereo audio samples in a more space-efficient manner by taking into account that usually the sound entering each ear is similar. thus, rather than storing every bit of each channel's sample, a base amplitude and a per-channel amplitude deviation value are stored, wherein the deviation value may use fewer bits than a complete sample. there are two
types of joint stereo: mid-side and intensity. over the duration of an audio file, the encoder may change which format is being used to represent the stereo signal over the course of the audio file. mid-side stereo coding mid-side stereo coding (ms) works by recording frames that contain a fundamental mid channel, which is the average amplitude of the original left and right audio channels. this is ...
Web Performance
ding 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 to hit a smooth frame rate.critical rendering paththe critical rendering path is the sequence of steps the browser goes through to convert the html, css, and javascript into pixels on the screen. optimizing the critical render...
.... since that's a universal issue, we won't be focusing on it too much here. instead, we're going to look at a more important issue when building web apps: starting up as asynchronously as possible. that means not running all your startup code in a single event handler on the app's main thread.performance budgetsa performance budget is a limit to prevent regressions. it can apply to a file, a file
type, all files loaded on a page, a specific metric (e.g. time to interactive), a custom metric (e.g. time to hero element), or a threshold over a period of time. performance fundamentalsperformance means efficiency. in the context of open web apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and i...
...oping with cors the performance timeline the performance timeline standard defines extensions to the performance interface to support client-side latency measurements within applications. together, these interfaces can be used to help identify an application's performance bottlenecks. user timing api create application specific timestamps using the user timing api's "mark" and "measure" entry
types - that are part of the browser's performance timeline. frame timing api the performanceframetiming interface provides frame timing data about the browser's event loop. beacon api the beacon interface schedules an asynchronous and non-blocking request to a web server. intersection observer api learn to time element visibility with the intersection observer api and be asynchronously notified...
... this section provides information on how to use and understand the performance features in your developer tools, including waterfall, call tree, and flame charts. profiling with the built-in profiler learn how to profile app performance with firefox's built-in profiler. ...
How to make PWAs installable - Progressive web apps (PWAs)
oned in the w3c manifest specification, so that's what we'll use here. ...
...s: { "name": "js13kgames progressive web app", "short_name": "js13kpwa", "description": "progressive web app that lists games submitted to the a-frame category in the js13kgames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "
type": "image/png" }, // ... { "src": "icons/icon-512.png", "sizes": "512x512", "
type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app. short_name: short name to be shown on the home screen. description: a sentence or two explaining what your...
...", "display": "fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app. short_name: short name to be shown on the home screen. description: a sentence or two explaining what your app does. icons: a bunch of icon information — source urls, sizes, and
types. be sure to include at least a few, so that one that fits best will be chosen for the user's device. start_url: the index document to launch when starting the app. display: how the app is displayed; can be fullscreen, standalone, minimal-ui, or browser. theme_color: a primary color for the ui, used by operating system. background_color: a color used as the app's default background, used duri...
... is displayed; can be fullscreen, standalone, minimal-ui, or browser. theme_color: a primary color for the ui, used by operating system. background_color: a color used as the app's default background, used during install and on the splash screen. a minimal web manifest must have at least a name and an icons field with at least one icon defined; that icon must have at least the src, sizes, and
type sub-fields as well. beyond that, everything is optional, though the description, short_name, and start_url fields are recommended. there are even more fields you can use than listed above — be sure to check the web app manifest reference for details. add to home screen "add to home screen" (or a2hs for short) is a feature implemented by mobile browsers that takes the information found in an a...
Media - Progressive web apps (PWAs)
css is to specify how content is presented to the user. this presentation can take more than one form. for example, you are probably reading this on a device with a display. but you might also want to project it to a big screen for a large audience, or you might want to print it. these different media have different characteristics. css has the capacity to present content according to the media
type. to specify rules that are specific to a
type of media, use @media followed by the media
type, followed by curly braces that enclose the rules. example a document on a website has a navigation area that contains the primary site menu. in the markup language, the navigation area's parent element has the id nav-area. (in html5, this can be marked up with the <nav> element instead of <div> with...
...y site menu. in the markup language, the navigation area's parent element has the id nav-area. (in html5, this can be marked up with the <nav> element instead of <div> with an id attribute.) when printing the document, the navigation area has no purpose. this css (below) removes the navigation area when printing the document: @media print { #nav-area {display: none;} } some common media
types are: screen color device display print printed paged media projection projected display all all media (the default) more details there are other ways to specify the media
type for a set of rules. the document's markup language might allow the media
type to be specified when the stylesheet is linked to the document. for example, in html, ...
...isplay print printed paged media projection projected display all all media (the default) more details there are other ways to specify the media
type for a set of rules. the document's markup language might allow the media
type to be specified when the stylesheet is linked to the document. for example, in html, you have the option to specify the media
type with a media attribute in the link element. in css, you can use @import at the start of a stylesheet to import another stylesheet from a url, optionally specifying the media
type. these are ways of separating styling rules for different media
types into different files. for full details of media
types, see media in the css specification. there are more examples of the display property in a la...
...on. 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 counter for fix-position elemnts. it shouldn not work in other browsers. see issue on css3-page. make a new html document, doc4.html. ...
class - SVG: Scalable Vector Graphics
or, for when an author assigns style information to a set of elements. for general use by the browser. you can use this class to style svg content using css. usage context categories none value <list-of-class-names> animatable yes normative document svg 1.1 (2nd edition): the class attribute list-of-ts <list-of-ts> (where t is some
type.) a list consists of a separated sequence of values. unless explicitly described differently, lists within svg's xml attributes can be either comma-separated (with optional white space before or after the comma), or white space-separated. white space in lists is defined as one or more of the following consecutive characters: "space" (u+0020), "tab" (u+0009), "line feed" (u+000a), "carriage retu...
...space-separated. white space in lists is defined as one or more of the following consecutive characters: "space" (u+0020), "tab" (u+0009), "line feed" (u+000a), "carriage return" (u+000d), and "form-feed" (u+000c). ...
... of the following consecutive characters: "space" (u+0020), "tab" (u+0009), "line feed" (u+000a), "carriage return" (u+000d), and "form-feed" (u+000c). the following is a template for an ebnf grammar describing the <list-of-ts> syntax: list-of-ts ::= t | t, list-of-ts within the svg dom, values of a <list-of-ts>
type are represented by an interface specific for the particular
type t. ...
... of a <list-of-ts>
type are represented by an interface specific for the particular
type t. for example, a <list-of-lengths> is represented in the svg dom using an svglengthlist or svganimatedlengthlist object. ...
end - SVG: Scalable Vector Graphics
x is based upon the syntax defined in iso 8601. indefinite the end of the animation will be determined by an svganimationelement.endelement() method call. ...
...0" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attribute
type="xml" attributename="width" to="100" begin="0s" end="8s" fill="freeze" /> </rect> <rect x="10" y="60" height="15" width="0"> <animate attribute
type="xml" attributename="width" to="75" begin="0s" end="6s" fill="freeze" /> </rect> <rect x="10" y="85" height="15" width="0"> <animate attribute
type="xml" attributename="width" to="50" begin="0s" end="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <lin...
...oke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> event 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 rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attribute
type="xml" attributename="width" from="0" to="100" begin="0s" end="endbutton.click" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> <rect id="endbutton" style="cursor:pointer;" x="19.5" y="62.5" rx="5" height="25" width="80" fill="#efefef" stroke="black" stroke-width="1" /> <text x="60" y="80" text-anch...
...="grey" stroke-width=".5" /> <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" /> </svg> accesskey 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 attribute
type="xml" attributename="width" from="0" to="100" begin="0s" end="accesskey(e)" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">hit the "s" key</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="2...
textLength - SVG: Scalable Vector Graphics
default value none animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute length or percentage. <number> a numeric value outlines a length referring to the units of the current coordinate system. example let's create a simple example that presents text you can resize using an <input> element of
type "range". css .controls { font: 16px "open sans", "arial", sans-serif; } svg let's start with the svg. it's pretty basic, with a 1000-by-300 pixel space mapped into a 10 centimeter by 3 centimeter box. <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"...
...y="150" font-family="sans-serif" font-size="60" fill="green"> hello world! </text> </svg> first, a <rect> element is used to create and stroke a rectangle to contain the text. then <text> is used to create the text element itself, with an id of "hello". html the html is also simple, with only two displayed elements contained inside a grouping <div>: <div class="controls"> <input
type="range" id="widthslider" min="80" max="978"> <span id="widthdisplay"></span> </div> the <input> element, of
type "range", is used to create the slider control the user will manipulate to change the width of the text. a <span> element of id "widthdisplay" is provided to display the current width value. javascript finally, let's have a look at the javascript code. it starts by stashing referen...
...these events will be sent any time the slider's value changes, even if the user hasn't stopped...
...istener() on the slider control, to receive any input events which occur. these events will be sent any time the slider's value changes, even if the user hasn't stopped moving it, so we can responsively adjust the text width. when an "input" event occurs, we call svglength.newvaluespecifiedunits() to set the value of textlength to the slider's new value, using the svglength interface's svg_length
type_px unit
type to indicate that the value represents pixels. note that we have to dive into textlength to get its baseval property; textlength is stored as an svglength object, so we can't treat it like a plain number. after updating the text width, the contents of the widthdisplay box are updated with the new value as well, and we're finished. result here's what the example looks like. try drag...
<feColorMatrix> - SVG: Scalable Vector Graphics
exactly 1 times its old value, with nothing else added. it is recommended to start manipulating the matrix from here. usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in
type values dom interface this element implements the svgfecolormatrixelement interface. example svg <svg width="100%" height="100%" viewbox="0 0 150 500" preserveaspectratio="xmidymid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /...
... <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic"
type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic"
type="matrix" ...
... <fecolormatrix in="sourcegraphic"
type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#colormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic"
type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic"
type="huerotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colormeh...
... working draft no change ...
<line> - SVG: Scalable Vector Graphics
n svg basic shape used to create a line connecting two points. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point. ...
...w.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point. value
type: <length>|<percentage>|<number> ; default value: 0; animatable: yes x2 defines the x-axis coordinate of the line ending point. value
type: <length>|<percentage>|<number> ; default value: 0; animatable: yes y1 defines the y-axis coordinate of the line starting point. ...
...ll not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point. value
type: <length>|<percentage>|<number> ; default value: 0; animatable: yes x2 defines the x-axis coordinate of the line ending point. value
type: <length>|<percentage>|<number> ; default value: 0; animatable: yes y1 defines the y-axis coordinate of the line starting point. value
type: <length>|<percentage>|<number> ; default value: 0; animatable: yes y2 defines the y-axis coordinate of the line ending point. value
type: <length>|<percentage>|<number> ; default value: 0; animatable: yes pathlength defines the total path length in user units. ...
...tage>|<number> ; default value: 0; animatable: yes y1 defines the y-axis coordinate of the line starting point. value
type: <length>|<percentage>|<number> ; default value: 0; animatable: yes y2 defines the y-axis coordinate of the line ending point. value
type: <length>|<percentage>|<number> ; default value: 0; animatable: yes pathlength defines the total path length in user units. ...
<rect> - SVG: Scalable Vector Graphics
y their position, width, and height. the rectangles may have their corners rounded. html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect. ...
...ight:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect. value
type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the rect. value
type: <length>|<percentage> ; default value: 0; animatable: yes width the width of the rect. ...
...-> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect. value
type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the rect. value
type: <length>|<percentage> ; default value: 0; animatable: yes width the width of the rect. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes height the height of the rect. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes rx the horizontal corner radius of the rect. defaults to ry if it is specified. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the vertical corner radius of the rect. defaults to rx...
... ; default value: auto; animatable: yes height the height of the rect. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes rx the horizontal corner radius of the rect. defaults to ry if it is specified. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the vertical corner radius of the rect. defaults to rx if it is specified. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes pathlength the total length of the rectangle's perimeter, in user units. value
type: <number> ; default value: none; animatable: yes note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attri...
<use> - SVG: Scalable Vector Graphics
s currently no defined way to set a cross-origin policy for use elements. since svg 2, the xlink:href attribute is deprecated in favor of href. see xlink:href page for more information. however, xlink:href can still be required in practice for cross-browser compatibility (see the compatibility table below). attributes href the url to an element/fragment that needs to be duplicated. ...
...f. see xlink:href page for more information. however, xlink:href can still be required in practice for cross-browser compatibility (see the compatibility table below). attributes href the url to an element/fragment that needs to be duplicated. value
type: <url> ; default value: none; animatable: yes xlink:href an <iri> reference to an element/fragment that needs to be duplicated. value
type: <iri> ; default value: none; animatable: yes x the x coordinate of the use element. ...
...for cross-browser compatibility (see the compatibility table below). attributes href the url to an element/fragment that needs to be duplicated. value
type: <url> ; default value: none; animatable: yes xlink:href an <iri> reference to an element/fragment that needs to be duplicated. value
type: <iri> ; default value: none; animatable: yes x the x coordinate of the use element. value
type: <coordinate> ; default value: 0; animatable: yes y the y coordinate of the use element. value
type: <coordinate> ; default value: 0; animatable: yes width the width of the use element. ...
...: yes xlink:href an <iri> reference to an element/fragment that needs to be duplicated. value
type: <iri> ; default value: none; animatable: yes x the x coordinate of the use element. value
type: <coordinate> ; default value: 0; animatable: yes y the y coordinate of the use element. value
type: <coordinate> ; default value: 0; animatable: yes width the width of the use element. value
type: <length> ; default value: 0; animatable: yes height the height of the use element. value
type: <length> ; default value: 0; animatable: yes note: width, and height have no effect on use elements, unless the element referenced has a viewbox - i.e. they only have an effect when use refers to a svg or symbol element. note: starting with svg2, x, y, width, and height are geometry propertie...
Namespaces crash course - SVG: Scalable Vector Graphics
or to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict. take some time to understand namespaces now and it will save you all sorts of headaches in the future. background it has been a long standing goal of the w3c to make it possible for different
types of xml based content to be mixed together in the same xml file. for example, svg and mathml might be incorporated directly into an xhtml based scientific document. being able to mix content
types like this has many advantages, but it also required a very real problem to be solved. naturally, each xml dialect defines the meaning of the markup element names described in its specification. the pro...
... elements defined by another. for example, both xhtml and svg have a <title> element. how should the user agent distinguish between the two? in fact how does the user agent tell when xml content is something it knows about, and not just a meaningless xml file containing arbitrary element names unknown to it? contrary to popular opinion, the answer to this question is not "it can tell from the doc
type declaration". dtds were never designed with mixed content in mind, and past attempts to create mixed content dtds are now considered to have failed. xml, and some xml dialects (svg included), don't require a doc
type declaration, and svg 1.2 won't even have one. the fact that doc
type declarations (usually) match the content in single content
type files is merely coincidental. dtds are for validati...
... the real answer to the question is that xml content tells the user agent which dialect the element names belong to by giving them explicit "namespace declarations". ...
...ef parameter defined by the xlink specification. this parameter is commonly used by other xml dialects as a means to link to external resources. but how do you tell the user agent which dialect the parameter belongs to, in this case xlink? consider the following example. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script xlink:href="cool-script.js"
type="text/ecmascript"/> </svg> this example has the rather unusual looking parameter xmlns:xlink. as you may guess from the first 'xmlns' part, this is another namespace declaration. however, instead of setting the default namespace, this namespace declaration sets the namespace for something called a "namespace prefix". in this case, we have chosen to use the prefix xlink (the second part) since t...
Fills and Strokes - SVG: Scalable Vector Graphics
fill and stroke attributes painting basic coloring can be done by setting two attributes on the node: fill and stroke. ...
...nts. the joint where the two meet is controlled by the stroke-linejoin attribute. there are three possible values for this attribute. miter extends the line slightly beyond its normal width to create a square corner where only one angle is used. round creates a rounded line segment. bevel creates a new angle to aid in the transition between the two segments. finally, you can also use dashed line
types on a stroke by specifying the stroke-dasharray attribute. <?xml version="1.0" standalone="no"?> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="m 10 75 q 50 10 100 75 t 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> <path d="m 10 75 l 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-...
...shoving such a section into a <head> section like you do in html, though, it's included in an area called <defs>. <defs> stands for definitions, and it is here that you can create elements that don't appear in the svg directly, but are used by other elements. <?xml version="1.0" standalone="no"?> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <style
type="text/css"><![cdata[ #myrect { stroke: black; fill: red; } ]]></style> </defs> <rect x="10" height="180" y="10" width="180" id="myrect"/> </svg> moving styles to an area like this can make it easier to adjust properties on large groups of elements. you can also use things like the :hover pseudo class to create rollover effects: #myrect:hover { stroke:...
... moving styles to an area like this can make it easier to adjust properties on large groups of elements. ...
Paths - SVG: Scalable Vector Graphics
m the current position to a new position. l x y (or) l dx dy there are two abbreviated forms for drawing horizontal and vertical lines. h draws a horizontal line, and v draws a vertical line. both commands only take one parameter since they only move in one direction. h x (or) h dx v y (or) v dy an easy place to start is by drawing a shape. we will start with a rectangle (the same
type that could be more easily made with a <rect> element). it's composed of horizontal and vertical lines only. <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 h 90 v 90 h 10 l 10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy="10" r="2" fill="red"/> <circle cx="10" cy="...
...rol point. several bézier curves can be stringed together to create extended, smooth shapes. often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. in this case, a shortcut version of the cubic bézier can be used, designated by the command s (or s). s x2 y2, x y (or) s dx2 dy2, dx dy s produces the same
type of curve as earlier—but if it follows another s command or a c command, the first control point is assumed to be a reflection of the one used previously. if the s command doesn't follow another s or c command, then the current position of the cursor is used as the first control point. in this case the result is the same as what the q command would have produced with the same parameters. an exa...
... q command would have produced with the same parameters. an example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue. <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 c 40 10, 65 10, 95 80 s 150 150, 180 80" stroke="black" fill="transparent"/> </svg> the other
type of bézier curve, the quadratic curve called with q, is actually a simpler curve than the cubic one. it requires one control point which determines the slope of the curve at both the start point and the end point. it takes two parameters: the control point and the end point of the curve. note: the co-ordinate deltas for q are both relative to the previous point (that is, dx and dy are not relat...
... drawn. <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 q 52.5 10, 95 80 t 180 80" stroke="black" fill="transparent"/> </svg> both curves produce similar results, although the cubic one allows greater freedom in exactly what the curve looks like. deciding which curve to use is situational and depends on the amount of symmetry the line has. arcs the other
type of curved line that can be created using svg is the arc, called with the a command. arcs are sections of circles or ellipses. for a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). along either of those circles, there are two possible paths that can be taken to connect the points—so in any situation, there...
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
es> elements within its scope. default-validation defines the default value of the validation attribute of all relevant instructions appearing within its scope. expand-text determines whether descendant text nodes of the element are treated as text value templates. id specifies an id for this stylesheet. this is most often used when the stylesheet is embedded in another xml document. input-
type-annotations specifies whether
type annotations are stripped from the element so the same results are produced whether the source documents have been validated against a schema or not. use-when determines whether the element and all the nodes that have it as ancestor are excluded from the stylesheet. xpath-default-namespace specifies the namespace that will be used if the element name is unpr...
... specifications specification status comment xslt 3.0the definition of '<xsl:stylesheet>' in that specification. recommendation added the attributes default-mode, expand-text, and use-when. ...
...om the element so the same results are produced whether the source documents have been validated against a schema or not. use-when determines whether the element and all the nodes that have it as ancestor are excluded from the stylesheet. xpath-default-namespace specifies the namespace that will be used if the element name is unprefixed or an unprefixed
type name within an xpath expression. ...
...ion.
type required outermost element of stylesheet. specifications specification status comment xslt 3.0the definition of '<xsl:stylesheet>' in that specification. recommendation added the attributes default-mode, expand-text, and use-when. xslt 2.0 added the attributes xpath-default-namespace, default-validation, default-collation, and input-
type-annotations and made all attributes except version optional. xslt 1.0 initial definition ...
An Overview - XSLT: Extensible Stylesheet Language Transformations
tion engine, called the processor, does not work directly on documents. before transformation can take place, the primary xml document(s) and the stylesheet document(s) must be run through a parser, which creates an abstract representation of the structure of the document in memory. this representation, called the tree, is what is actually manipulated by the processor. the tree is an abstract data
type, a conceptual model which can be implemented in various ways depending on the parser and the processor. :netscape's uses a structure similar to the w3c dom as its tree structure, but others are possible. the only requirements concern the disposition of objects in the tree, their properties, and their relationships. the tree consists of a hierarchical framework of nodes. it can be made up of sev...
...l model which can be implemented in various ways depending on the parser and the processor. :netscape's uses a structure similar to the w3c dom as its tree structure, but others are possible. the only requirements concern the disposition of objects in the tree, their properties, and their relationships. the tree consists of a hierarchical framework of nodes. it can be made up of seven different
types of nodes: the single root node, element nodes, text nodes, attribute nodes, comment nodes, processing instruction nodes, and namespace nodes. at the top of the tree is the root node. the root node does not correspond to any individual part of the xml document: it represents the document as whole. below the root node are its children, which can be elements, comments, processing instructions and...
... nodes. at the top of the tree is the root node. the root node does not correspond to any individual part of the xml document: it represents the document as whole. below the root node are its children, which can be elements, comments, processing instructions and so on. some of those children may also have children. and this can continue for several levels. there are certain constraints on which
type of nodes can occur where: for example, text nodes can have no children. the result of the processor's action is also a tree. netscape uses this tree to render the contents in the browser window. xslt is a high-level declarative language. in essence, an xslt stylesheet is a set of rules, called templates, which declare that any node that matches this specific pattern should be manipulated in...
...t via a processing instruction. the simplest way to indicate which xslt stylesheet should be used to process a particular xml document is to include a processing instruction in the xml document itself. for example, if the stylesheet is called inventory.xsl and resides in the same directory as the xml document, the processing instruction in the xml document would look like this: <?xml-stylesheet
type="text/xml" href="inventory.xsl"?> this must be placed in the prolog section of the xml document. to learn more about xslt and xpath, see the for further reading section at the end of this article. ...
Exported WebAssembly functions - WebAssembly
exported webassembly functions are how webassembly functions are represented in javascript. this article describes what they are in a little more detail. exported... what? exported webassembly functions are basically just javascript wrappers that represent webassembly functions in javascript. when you call them, you get some activity in the background to convert the arguments into
types that wasm can work with (for example converting javascript numbers to int32), the arguments are passed to the function inside your wasm module, the function is invoked, and the result is converted and passed back to javascript. you can retrieve exported webassembly functions in two ways: by calling table.proto
type.get() on an existing table. by accessing a function exported from a wasm module instance v...
...bl.get() and log the result of invoking each one to the console. next, we use set() to make the othertable table contain references to the same functions as the tbl table. to prove this, we then retrieve these references back from othertable and print their results to console too, which gives the same results. ...
... the return value of each table.proto
type.get() call is an exported webassembly function — exactly what we have been talking about. it is worth noting that these are real javascript functions, in addition to being wrappers for webassembly functions. if you load the above example in a webassembly-supporting browser, and run the following lines in your console: var testfunc = othertable.get(0);
typeof testfunc; you'll get the result function returned. you can then go on to do pretty much anything to this function that you can do to other functions in javascript — call(), bind(), etc. testfunc.tostring() returns an interesting result: function 0() { [native code] } this gives you more of an idea of its wrapper-
type nature. some other particulars to be aware of with exported webassem...
...ode] } this gives you more of an idea of its wrapper-
type nature. some other particulars to be aware of with exported webassembly functions: their length property is the number of declared arguments in the wasm function signature. their name property is the tostring() result of the function's index in the wasm module. if you try to call a exported wasm function that takes or returns an i64
type value, it currently throws an error because javascript currently has no precise way to represent an i64. this may well change in the future though — a new int64
type is being considered for future standards, which could then be used by wasm. ...
page-worker - Archive of obsolete content
script. so if your content script is saved under data as "my-script.js", you need a line like <script src="my-script.js"></script> in the page header. 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) ...
...ject is created and stays loaded until its destroy method is called or the add-on is unloaded. methods destroy() unloads the page worker. after you destroy a page worker, its memory is freed and you must create a new instance if you need to load another page. postmessage(message) sends a message to the content scripts. parameters message : value the message to send. must be json-able. ...
...e page worker. after you destroy a page worker, its memory is freed and you must create a new instance if you need to load another page. postmessage(message) sends a message to the content scripts. parameters message : value the message to send. must be json-able. on(
type, listener) registers an event listener with the page worker. see working with events for help with events. parameters
type : string the
type of event to listen for. listener : function the listener function that handles the event. removelistener(
type, listener) unregisters an event listener from the page worker. parameters
type : string the
type of event for which listener was registered. listener : function the listener function that was registered. properties port object that allows you to: send eve...
/loader - Archive of obsolete content
create commonjs module loaders. usage the code is intentionally authored so that it can be loaded in several ways. it can be loaded as a regular script tag in documents that have system principals (note: this does not appear to work as of 02.2016 due to "use strict" being added to the file): <script
type='application/javascript' src='resource://gre/modules/commonjs/toolkit/loader.js'></script> this will expose a single loader object containing all of the api functions described in this document. it can be loaded as a javascript code module: let { loader, require, unload } = components.utils.import('resource://gre/modules/commonjs/toolkit/loader.js'); it can be required as a commonjs module from a module loaded in the loader itself: let { loader...
...sandbox() function is a utility function for creating js sandboxes. it is used by the loader to create scopes into which modules are loaded. it takes the following set of configuration options: name: a string value which identifies the sandbox in about:memory. will throw exception if omitted. principal: string uri or nsiprincipal for the sandbox. if omitted defaults to system principal. ...
... nsiprincipal for the sandbox. if omitted defaults to system principal. proto
type: object that the returned sandbox will inherit from. defaults to {}. wantxrays: a boolean value indicating whether code outside the sandbox wants x-ray vision with respect to objects inside the sandbox. defaults to true. let sandbox = sandbox({ name: 'resource:///modules/foo/bar.js', wantxrays: false, proto
type: { console: { log: dump.bind(dump, 'log: '), info: dump.bind(dump, 'info: '), warn: dump.bind(dump, 'warn: '), error: dump.bind(dump, 'error: ') } } }); evaluate() evaluates code in the supplied sandbox. if options.source is provided then its value is evaluated, otherwise source is read from the supplied uri. either way, any exceptions will be reported as from ...
Developing for Firefox Mobile - Archive of obsolete content
t version of the android sdk for your device using the android sdk, install the android platform tools next, attach the device to the development machine via usb. now open up a command shell. android platform tools will have installed adb in the "platform-tools" directory under the directory in which you installed the android sdk. make sure the "platform-tools" directory is in your path. then
type: adb devices you should see some output like: list of devices attached 51800f220f01564 device (the long hex string will be different.) if you do, then adb has found your device and you can get started. running add-ons on android you can develop your add-on as normal, as long as you restrict yourself to the supported modules. when you need to run the add-on, first ensure that firefox is ...
...he lines relevant to you. running jpm-mobile test is identical: jpm-mobile test --adb /path/to/adb packaging mobile add-ons to package a mobile add-on as an xpi, use the command: jpm xpi actually installing the xpi on the device is a little tricky. the easiest way is probably to copy the signed xpi somewhere on the device: adb push my-addon.xpi /mnt/sdcard/ then open firefox mobile and
type this into the address bar: file:///mnt/sdcard/my-addon.xpi the browser should open the xpi and ask if you want to install it. afterwards you can delete it using adb as follows: adb shell cd /mnt/sdcard rm my-addon.xpi module compatibility modules not supported in firefox mobile are marked in the tables below. high-level apis addon-page not supported base64 supp...
...core/heritage supported core/namespace supported core/promise supported event/core supported event/target supported frame/hidden-frame supported frame/utils supported io/byte-streams supported io/file supported io/text-streams supported lang/functional supported lang/
type supported loader/cuddlefish supported loader/sandbox supported net/url supported net/xhr supported places/bookmarks not supported places/favicon not supported places/history not supported platform/xpcom supported preferences/service supported stylesheet/style supported ...
Using XPCOM without chrome - Archive of obsolete content
notice the small l var bmlistener = bmlistener(); placesutils.bookmarks.addobserver(bmlistener, false); ...
...notice the small l var bmlistener = bmlistener(); placesutils.bookmarks.addobserver(bmlistener, false); ...
...notice the small l var bmlistener = bmlistener(); placesutils.bookmarks.addobserver(bmlistener, false); ...
Bootstrapped extensions - Archive of obsolete content
addon_downgrade 8 the add-on is being downgraded. bootstrap data each of the entry points is passed a simple data structure containing some useful information about the add-on being bootstrapped. more information about the add-on can be obtained by calling addonmanager.getaddonbyid(). the data is a simple javascript object with the following properties: property
type description id string the id of the add-on being bootstrapped. version string the version of the add-on being bootstrapped. installpath nsifile the installation location of the add-on being bootstrapped. this may be a directory or an xpi file depending on whether the add-on is installed unpacked or not. resourceuri nsiuri a uri pointi...
...ent locale by going to about:config and changing preference of general.useragent.locale to en-us and then to en-gb and disabling then re-enabling the add-on. xul and html files - using entities from dtd files many times html pages are used, however they cannot be localized with dtd files. ...
...ent.locale to en-us and then to en-gb and disabling then re-enabling the add-on. xul and html files - using entities from dtd files many times html pages are used, however they cannot be localized with dtd files. ...
Embedding SVG - Archive of obsolete content
svg is an xml based makeup language and can be embedded into other markup languages, like xhtml and xul. embedding in xhtml make sure you use the right namespace when embedding. notice the template and example use xhtml to handle the namespacing. ...
...version="1.0" encoding="utf-8"?> <!doc
type html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <!-- html and svg go here --> </body> </html> example: <?xml version="1.0" encoding="utf-8"?> <!doc
type html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <p>hello</p> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="re...
...>hello</p> <svg:svg version="1.1" baseprofile="full" 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.
Miscellaneous - Archive of obsolete content
ht: 6em; width: 10em;"> this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. ...
...rl")) another similar alternative (using both getstringfromname and formatstringfromname), is: var fcbundle = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"); function getstr(msg, args){ //get localised message if (args){ args = array.proto
type.slice.call(arguments, 1); return fcbundle.formatstringfromname(msg,args,args.length); } else { return fcbundle.getstringfromname(msg); } } /* usage */ alert(getstr("invalid.url", "http://bad/url/", "3")); //for message with parameters alert(getstr("invalid.url")); //for message without parameters getting postdata of a webpage first, you need to get the browser you want, and its hi...
...in the components/certsservice.js file: const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); const gobserver = cc['@mozilla.org/observer-service;1'].getservice(ci.nsiobserverservice); const gioservice = cc["@mozilla.org/network/io-service;1"].getservice(ci.nsiioservice); function certsservice() {} certsservice.proto
type = { observe: function(asubject, atopic, adata) { switch(atopic) { case "app-startup": gobserver.addobserver(this,"xpcom-shutdown",false); gobserver.addobserver(this,"final-ui-startup",false); break; case "xpcom-shutdown": gobserver.removeobserver(this,"final-ui-startup"); gobserver.
Extension Packaging - Archive of obsolete content
an extension xpi an xpi (xpinstall) file is simply a zip file, containing the extension files, with the install.rdf file at the root of the zip. users can download xpi files from a website, or from a local file, and install by opening it, or dragging it into the extension manager window. the xpi file must contain only uncompressed files, or files compressed using the deflate algorithm. ...
...t of the zip. users can download xpi files from a website, or from a local file, and install by opening it, or dragging it into the extension manager window. the xpi file must contain only uncompressed files, or files compressed using the deflate algorithm. the mime
type recognized by firefox for xpi files is application/x-xpinstall. since most http servers are not configured to return this mime
type for the .xpi extension by default, you will probably need to configure your http server. ...
...s compressed using the deflate algorithm. the mime
type recognized by firefox for xpi files is application/x-xpinstall. since most http servers are not configured to return this mime
type for the .xpi extension by default, you will probably need to configure your http server. in the apache http server, this can be done by adding the following directive to the configuration file or .htaccess: add
type application/x-xpinstall .xpi install extension files directly if you know the location of the application (if you are installing an extension as part of the application installer, for example), you can install the extension files directly to <appdir>/extensions/<extensionid>. the extension will be found automatically by the extension manager the next time the application is launched. when usi...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
n-source software licenses draft this page is not complete. this document was authored by yutaka kachi and was originally published in japanese 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 sour...
...g used in warfare. the “no additional licensing can be required when redistributing” rule means that you cannot prohibit the software’s use from anyone who does not buy a separate license. because the oss license is intended to foster source-code reuse and mutual development, it avoids restrictions on source-code duplication, distribution, and modification to the greatest extent possible.
types of oss licenses and their characteristics the details of oss licenses vary from one license to the next. i’ll look at three representative licenses here, and explain some of their features and relevant points. most attempts at explaining open source start with the gpl. this is the longest, most complicated, and hardest to understand. so instead, i’m going to start with the simplest, the mo...
...lowing points whether you’re modifying existing source code or selecting a license for the first time. you cannot rewrite an existing license if you select any existing oss license and rewrite any part of it on your own, you should not use the same license name as the original. this would be a source of confusion for users and may be prohibited by the terms of the license. can you change the
type of license? depending on what
type of license you choose in the first place, you can change it as follows: gpl → gpl lgpl → gpl or lgpl mpl → mpl modified bsd → other license dual license → either one or both sides of a dual license beware of mixed licenses when using existing source code, check to see whether there is a different license mixed in the source. depending on the...
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
ighter color than the rest). it also makes sense from a usability perspective, since bookmarks should be very easy to access for the user. that's it for the basics. with this knowledge you should be able to create simple toolbars and toolbar buttons you can add to firefox. now we'll look deeper into the details of toolbars so that you can make great toolbars. toolbar buttons there are several
types of buttons and elements you can add to a toolbar depending on your needs. the toolbarbutton element has the
type attribute that allows you to change the behavior of the button in many ways. the menu and menu-button
types allow you to create buttons that open popup menus beneath them. see the back/forward buttons in the main firefox toolbar for an example. menu toolbar buttons are handy when you ...
... keep in mind some users have small screens with low resolution. ...
... keep in mind some users have small screens with low resolution. ...
Handling Preferences - Archive of obsolete content
ow should be as easy to use as possible. to access all other preferences, enter "about:config" into the location bar. this xul page lists all the preferences defined in the firefox installation, allowing you to change them as you please. as the warning message states, you should be very careful when changing preferences. incorrect values can make firefox behave oddly or break altogether. you can
type on the "filter" textbox to search for specific preferences. if you
type the word "homepage", it will filter all the preferences and display only the ones which include the word "homepage" in its name or value. right-clicking on the list reveals several options that allow you to modify preference values and add new ones. preferences with non-default values are highlighted in bold. all changes done...
...ile xulschoolhello.js. the contents of the file are fairly simple: // amount of messages shown to the user. pref("extensions.xulschoolhello.message.count", 0); this defines a preference we'll use to keep track of the amount of times we have displayed a greeting message to the user. its default value is 0. you'll see this preference appear in about:config after installing the extension. just
type "xulschool" in the filter box to see your new preference. note: always begin your preference names with "extensions", followed by some namespacing and finally the actual name of the preference. name parts are normally separated by dots. now let's look at how we actually manage the preference values. managing preferences with xpcom we use the preferences service in order to get and set prefere...
...litate preference handling. the preferences element is just a container, and you should have one per window, or one per prefpane if you have those. the element and its children are completely invisible, and their purpose is to list the preferences to be used in the window/pane. <preferences> <preference id="xulschoolhello-message-count-pref" name="extensions.xulschoolhello.message.count"
type="int" /> <!-- more preference elements. --> </preferences> after you define the preferences you need, you associate them with the form elements in your window or pane using the preference attribute: <textbox preference="xulschoolhello-message-count-pref"
type="number" min="0" max="100" /> in this case we use a numeric field to set the message count preference. changing the value in ...
Creating reusable content with CSS and XBL - Archive of obsolete content
ets content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse. more details for more information about xbl bindings, see the xbl page in this wiki. action: an xbl demonstration make a new html document, doc6.html. copy and paste the content from here: <!doc
type html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet"
type="text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">click me</div> </body> </html> make a new css file, style6.css. this stylesheet contains the document style. copy and paste the content from here: /*** xbl de...
...on</h1> <div id="square">click me</div> </body> </html> make a new css file, style6.css. this stylesheet contains the document style. copy and paste the content from here: /*** xbl demonstration ***/ #square { -moz-binding: url("square.xbl#square"); } make a new text file, square.xbl. this file contains the xbl binding. ...
...m here: <?xml version="1.0"?> <!doc
type bindings> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind6.css"/> </resources> <content> <html:div anonid="square"/> <xul:button anonid="button"
type="button"> <children/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "button") ]]></field> <method name="dodemo"> <body><![cdata[ this.s...
progress - Archive of obsolete content
read only. ...
...read only. canbubble boolean does the event normally bubble? read only. ...
...read only. canbubble boolean does the event normally bubble? read only. ...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
e such as the web page or the web application to control the navigation system. in other words, the page is the browsing device during the experience, and the user is "immersed" in that browsing device. what does this mean, practically speaking? what does it look like? good candidates for inner-browsing include a spell check application, in which the text entered in a web page is checked as it is
typed; a webmail application that uses the inner-browsing model to display the separate messages and message lists in an integrated way, much like a client mail app; and a stock ticker that spools the information across the web page. see the table below for a description of how applications like this exemplify inner-browsing and how they might be implemented using the inner-browsing approach. some exa...
...; for(i=0;i<articles.length;i++) { // acquiring the data from the dom... articletitle=article.getelementsbytagname("article").item(0).firstchild.nodevalue; // inserting the content into the container.. document.getelementbyid("container").innerhtml+=articletitle+"<br />"; } source code for the sample <html> <head> <title>inner-browsing example, with xmlhttprequest and dom</title> <script
type="text/javascript" language="javascript" src="xmlrequest.js"></script> <script> /* ***** begin license block ***** * version: mpl 1.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license. you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software dist...
...decoration:none;} .tab:hover { background-color:#ddeeff; } </style> </head> <body > <h2>latest headlines - inner-browsing example </h2> <p>click the tabbed menu to dynamically load the headlines into this web page.</p> <br /> <!-- ***** this code dynamically creates the tabbed menu if the browser has support to xmlhttprequest, since the mechanism used here is xmlhttprequest ***** --> <script
type="text/javascript" language="javascript"> //// /// object detection // var xcomp=null; var testxmlhttprequest=false; try { xcomp = new xmlhttprequest(); if(xcomp) testxmlhttprequest=true; } catch (e) { try { xcomp = new activexobject("microsoft.xmlhttp"); if(xcomp) testxmlhttprequest=true; } catch (e) { } } if(testxmlhttprequest&&document.getelementsbyta...
Install.js - Archive of obsolete content
install.initinstall(dispname, regname, this.extversion); // find directory to install into var installpath; if (this.profileinstall) installpath = profiledir; else installpath = install.getfolder('chrome'); // add jar file install.addfile(null, 'chrome/' + jarname, installpath, null); // register chrome var jarpath = install.getfolder(installpath, jarname); var install
type = this.profileinstall ? install.profile_chrome : install.delayed_chrome; // register content install.registerchrome(install.content | install
type, jarpath, 'content/' + this.extshortname + '/'); // register locales for (var locale in this.extlocalenames) { var regpath = 'locale/' + this.extlocalenames[locale] + '/' + this.extshortname + '/'; install.registerchrome(install.lo...
...einstall ? ...
...ocale in this.extlocalenames) { var regpath = 'locale/' + this.extlocalenames[locale] + '/' + this.extshortname + '/'; install.registerchrome(install.locale | install
type, jarpath, regpath); } // register skins for (var skin in this.extskinnames) { var regpath = 'skin/' + this.extskinnames[skin] + '/' + this.extshortname + '/'; install.registerchrome(install.skin | install
type, jarpath, regpath); } // perform install var err = install.performinstall(); if (err == install.success || err == install.reboot_needed) { if (!this.silentinstall && this.extpostinstallmessage) { install.alert(this.extpostinstallmessage); } } else { this.handleerror(err); return; } }, parsearguments: function() { // can't use string handling in insta...
MMgc - Archive of obsolete content
analogs for malloc and free. memory allocated with alloc doesn't need to be explicitly freed, although it can be freed with free if it is known that there are no other references to it. alloc is often used to allocate arrays and other objects of variable size that contain gc pointers or are otherwise desirable to have in managed memory. these flags may be passed to alloc to control the allocation
type. /** * flags to be passed as second argument to alloc */ enum allocflags { kzero=1, kcontainspointers=2, kfinalize=4, krcobject=8 }; kzero zeros out the memory. otherwise, the memory contains undefined values. kcontainspointers indicates to the gc that the memory will contain pointers to other gc objects, and thus needs to be scanned by the gc's mark phase. if you know for certain that t...
... showing the different classes of object in memory, along with object counts, byte counts, and percentage of total memory. it can also display stack traces for where every object was allocated. the report can be output to the console or to a file, and can be configured to be displayed pre/post sweep or via api call. ...
...r for items over 2k when you want to allocate something we figure out what size class it's in and then ask that allocator for the memory. each fixed size allocator maintains a doubly linked list of 4k blocks that it obtains from the gcheap. these 4k blocks are aligned on 4k boundaries so we can easily allocate everything on 8-byte boundaries (a necessary consequence of the 32-bit atom design-- 3
type bits and 29 pointer bits). also we store the gcalloc::gcblock structure at the beginning of the 4k block so each allocation doesn't need a pointer to its block (just zero the lower 12 bits of any gc-allocated thing to get the gcblock pointer). the gcblock contains bitmaps for marking and indicating if an item has a destructor that needs to be called (a gcfinalizedobject base class exists defining...
Notes on HTML Reflow - Archive of obsolete content
content model), a reflow command object is created and passed to the presentation shell via the nsipresshell::appendreflowcommand method. the presentation shell does not process the command immediately. instead, it queues the command, and processes it asynchronously along with other queued reflow commands en masse . coalescing. as described below, the reflow command has a
type and a target frame . multiple reflow commands with the same
type and target frame are coalesced : the presentation shell simply refuses to add subsequent commands of the same
type for the same frame to the queue. a caller may also cancel a reflow command that is in the queue; e.g., if the target frame is destroyed. dispatch. the presentation shell processes the reflow...
... next frame and dispatches the reflow downward. in order to correctly dispatch the reflow to the child frame, the frame may need to perform some state recovery ; for example, a block frame will traverse its line list to recover the space occupied by floated frames. at some point, the incremental reflow reaches the target frame , at which point the reflow command's
type becomes significant. contentchanged indicates that the content corresponding to the target frame has changed somehow; for example, the text associated with a text frame has been modified. in reality, the only frame that responds to this sort of reflow is the block frame. the block frame treats this sort of change as a `full reflow' (i.e., as a resize). this makes me believe that we could pro...
...ge 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 intelligently. ...
Source code directories overview - Archive of obsolete content
(e.g. forward, back, history). the [#seamonkey-webshell webshell] code wraps these interfaces according to the particular platform and way (e.g. activex) that is being supported. extensions contains c interfaces, c code, xul and javascript code for various add-ins that are related to browsing. these include: cookies, irc, wallet, dom inspector, p3p, schema validation, spellchecker, transformiix,
typeaheadfind, javascript debugger, xforms, etc. gfx contains c interfaces and code for platform independent drawing and imaging. it can be used to draw rectangles, lines, images, etc. essentially, it is a a set of interfaces for a platform-independent device (drawing) context. it does not handle widgets or specific drawing routines; it just provides the primitive operations for drawing. intl contai...
...iewer for the content contained at a certain url. for example, if this code determines that the content is a mail message, it looks up the appropriate listener (probably netscape messenger) and passes the mail message to it for display. it is generic and can hand the content off to internal components (like messenger), to plug-ins or helper apps. view contains c interfaces and code for different
types of views (e.g. scrolling view). a view contains content but does not contain the title bar, borders or other decorations (which are contained by frames). this code serves to manipulate the individual content that it contains. for example, a scrolling view will find out the scroll bar positions and tell its content where to draw according the scroll bar thumbs. webshell contains c interfaces, c ...
...ions contains code for making certain extensions work. installer contains the firefox installer code. locales contains the files that are translated for firefox. themes contains firefox themes. toolkit toolkit is used by the standalone products. components contains the alerts, autocomplete, command line interface, console, cookies, download manager, filepicker, history, password manager,
typeaheadfind, view source, etc. content contains xul specific to the toolkit. library contains libxul work. localescontains files that are translated. mozappscontains shared application stuff. obsoletecontains obsolete stuff. profilecontains the profile manager themescontains themes as they relate to toolkit things. xreis the xul runtime engine. this directory contains the code for initializi...
Enabling the behavior - updating the status periodically - Archive of obsolete content
nable its functionality, we have to add a reference to our javascript code into navigator.xul, just as we put a reference to our css code into that file back in specifying the appearance. put the javascript code into a file called tinderstatus.js in the same directory as navigator.xul and reference it in navigator.xul where other javascript scripts are referenced: ... ...
...xul, just as we put a reference to our css code into that file back in specifying the appearance. put the javascript code into a file called tinderstatus.js in the same directory as navigator.xul and reference it in navigator.xul where other javascript scripts are referenced: ... ...
...ance. put the javascript code into a file called tinderstatus.js in the same directory as navigator.xul and reference it in navigator.xul where other javascript scripts are referenced: ... <!-- navigator --> <script
type="application/javascript" src="chrome://navigator/content/browser.js"/> <script
type="application/javascript" src="chrome://navigator/content/navigator.js"/> <script
type="application/javascript" src="chrome://navigator/content/navigatordd.js"/> <script
type="application/javascript" src="chrome://navigator/content/sessionhistoryui.js"/> <script
type="application/javascript" src="chrome://navigator/content/tinderstatus.js"/> <!-- hook for stringbundle overlays --> ... with this code in place, restarting mozilla should cause the tinderbox stat...
Creating a Microsummary - Archive of obsolete content
rosummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> </transform> </template> </generator> note that while microsummary generators can include arbitrary xslt, including xslt that produces rich text output, firefox currently only displays the text version of the xslt output. ...
...maries, however, so to improve the experience for those users, we should check to see if the user is using a microsummaries-enabled browser and display an explanatory message if not. ...
... for those users, we should check to see if the user is using a microsummaries-enabled browser and display an explanatory message if not. ...
Creating a Help Content Pack - Archive of obsolete content
m, only the table of contents data source will be displayed. the glossary and index data sources will be hidden - information found only in them will not be displayed unless the user conducts a search of the help pack that would return glossary or index results.xxx this sentence is ugly - a little rewording help here would be nice a data source description is pretty much the same no matter which
type you're defining, and the syntax is pretty simple. each panel is specified by one rdf:description element with the following attributes: nc:panelid specifies the name of the panel, which may be any one of glossary, search, toc, or index. the data source specified by toc will always be displayed, while the other data sources may only be available by searching through the loaded content pack. nc...
...however, it is recommended you use a space-separated list of uris for nc:datasources instead of separate entries, as separate entries will require a slightly longer time to load. the glossary file the glossary file has the simplest format of all the dat...
...ing a table of contents file (and therefore exactly like creating an index file), so follow the instructions there to create additional data sources as you need them. viewing your content pack in the help viewer to launch the help viewer with your content pack, you need to have chrome://help/content/contexthelp.js loaded into the xul file that provides the ui to open the help viewer: <script
type="application/javascript" src="chrome://help/content/contexthelp.js"/> this will allow you to access all of the viewer functions. to open the help viewer, run the openhelp() function. it's exactly the same as any javascript command, you you can insert it in command elements, oncommand attributes, and other such places. the parameters are described below: openhelp(atopic, acontentpacks...
JavaScript OS.Shared - Archive of obsolete content
module os.shared contains tools to interact with the operating system (and, more generally, in c) in javascript. all these tools are designed to be used with js-c
types. for the moment, module os.shared is accessible only from chrome workers. ...
... module os.shared contains tools to interact with the operating system (and, more generally, in c) in javascript. all these tools are designed to be used with js-c
types. for the moment, module os.shared is accessible only from chrome workers. ...
...int64_t uint64_t long bool off_t size_t ssize_t fd (unix only) negativeone_or_fd (unix only) negativeone_or_nothing (unix only) string (unix only) null_or_string (unix only) handle (windows only) maybe_handle (windows only) dword (windows only) negative_or_dword (windows only) zero_or_dword (windows only) zero_or_nothing (windows only) declareffi() intn_t() uintn_t()instances of os.shared.
type convert_from_c() releasewith() attributes global object os.shared.hollowstructure in_ptr out_ptr inout_ptr ...
Java in Firefox Extensions - Archive of obsolete content
yobj.mymethod(arg1, arg2); // pass whatever arguments you need (they'll be auto-converted to java form, taking into account the liveconnect conversion rules) for more complex cases, in which you need to call a specific constructor with arguments, you will need reflection. ...
... for more complex cases, in which you need to call a specific constructor with arguments, you will need reflection. ...
... is a somewhat simplified snippet from xquseme: var reflect = java.lang.reflect; // build an array of the class
types which are expected by our constructor (in this case, java.io.file and a class from another jar we loaded, com.sleepycat.db.environmentconfig) var param
types = reflect.array.newinstance(java.lang.class, 2); // 2nd argument should indicate the number of items in following array param
types[0] = java.io.file; var envconfigclass = loader.loadclass('com.sleepycat.db.environmentconfig'); param
types[1] = envconfigclass; // get the constructor var constructor = envclass.getconstructor(param
types); // now that we have the constructor with the right parameter
types, we can build the specific arguments we wish to pass to it var arglist = reflect.array.newinstance(java.lang.object, 2); // 2...
Clipboard - Archive of obsolete content
the namespace associated with this api is jetpack.clipboard which provides both read and write access to the clipboard. the api is fairly straightforward; examples can be found here. the api lives in the future and must be imported for use. ...
...the namespace associated with this api is jetpack.clipboard which provides both read and write access to the clipboard. the api is fairly straightforward; examples can be found here. the api lives in the future and must be imported for use. ...
...he api lives in the future and must be imported for use. jetpack.future.import("clipboard"); methods set(contentstringflavorstring) stringwrites data from jetpack to the clipboard. this is the recommended method of copying data to the clipboard. contentthe content to be copied to the clipboard. if no other arguments are specified, the flavor of the content is assumed to 'plain'.string flavordata
type. this is an optional parameter. the only flavors currently implemented are 'plain' (text/unicode) and 'html' (which is html).string"text" here's an example of how to use the method to set the clipboard. jetpack.import.future("clipboard");// in text formatjetpack.clipboard.set("hello world");// in other clipboard get(flavor string)returns data to jetpack from the clipboard. if flavor is provided...
Clipboard Test - Archive of obsolete content
param>.name:after{content: " as "; font-weight: normal; } .method>.params{display: block; color:#555;} .method>.params>.param{display: block; margin-bottom:5px;} .method>.params>.param>.name{font-weight:bold; margin-right:.5em; min-width:80px; display:inline-block;} .method>.params>.param>.description{display:inline-block; width:300px; vertical-align:top;margin-right:30px} .method>.params>.param>.
type{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.
type:before{content: "
type "; color: #888; font-weight:normal;} .method>.params>.param>.default{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.default:before{content: "default "; color: #888;font-weight:normal;} ]]></style> clipboard jetpack's clipboar...
...weight:normal;} .method>.params>.param>.default{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.default:before{content: "default "; color: #888;font-weight:normal;} ]]></style> clipboard jetpack's clipboard support api provides a standardized way for features to access the clipboard. features can get and set the clipboard in various flavors of data
type. the namespace associated with this api is jetpack.clipboard which provides both read and write access to the clipboard. the api is fairly straightforward; examples can be found here. this api currently lives in the future and must be imported for use. jetpack.future.import("clipboard"); methods set(contentstringflavorstring)writes data from jetpack to the clipboard. this is the recommended metho...
...rently lives in the future and must be imported for use. jetpack.future.import("clipboard"); methods set(contentstringflavorstring)writes data from jetpack to the clipboard. this is the recommended method of copying data to the clipboard. string contentthe content to be copied to the clipboard. if no other arguments are specified, the flavor of the content is assumed to 'plain'.string flavordata
type. this is an optional parameter. the only flavors currently implemented are 'plain' (text/unicode) and 'html' (which is html).string"text" here's an example of how to use the method to set the clipboard. jetpack.import.future("clipboard");// in text formatjetpack.clipboard.set("hello world");// in other clipboard get(flavor string)returns data to jetpack from the clipboard. if flavor is provided...
Nanojit - Archive of obsolete content
xit *exit = (sideexit *)(guard + 1); guard->exit = exit; guard->exit->target = f; f->lastins = out.insguard(lir_loop, out.insimm(1), rec_ins); // compile the fragment. compile(assm, f, *alloc verbose_only(, fragmento->labels)); if (assm->error() != none) { fprintf(stderr, "error compiling fragment\n"); return 1; } printf("compilation successful.\n"); // call the compiled function.
typedef js_fastcall int32_t (*addtwofn)(int32_t); addtwofn fn = reinterpret_cast<addtwofn>(f->code()); printf("2 + 5 = %d\n", fn(5)); return 0; } code explanation interesting part are the lines 46-50: // write a few lir instructions to the buffer: add the first parameter // to the constant 2. out.ins0(lir_start); lins *two = out.insimm(2); lins *firstparam = out.insparam(0, 0); lins *result...
... a function, which takes an integer input, and adds it to two, and outputs the result. the function is created here on lines 57-69: // compile the fragment. compile(assm, f, *alloc verbose_only(, fragmento->labels)); if (assm->error() != none) { fprintf(stderr, "error compiling fragment\n"); return 1; } printf("compilation successful.\n"); // call the compiled function.
typedef js_fastcall int32_t (*addtwofn)(int32_t); addtwofn fn = reinterpret_cast<addtwofn>(f->code()); printf("2 + 5 = %d\n", fn(5)); return 0;</addtwofn> this upper half of this snippet includes code where the raw lir is first converted into machine code.(where compile(fragmento->assm(), f); is called basically). then a pointer to a function is used, which takes an int as input and returns the s...
...fn)(int32_t); addtwofn fn = reinterpret_cast<addtwofn>(f->code()); printf("2 + 5 = %d\n", fn(5)); return 0;</addtwofn> this upper half of this snippet includes code where the raw lir is first converted into machine code.(where compile(fragmento->assm(), f); is called basically). then a pointer to a function is used, which takes an int as input and returns the sum of that parameter with two. (
typedef js_fastcall int32_t (*addtwofn)(int32_t); ) then, printf is hardcoded to call it with a parameter 5, and on linking with nanojit library, the following program will display 2+5=7 now, what i need to do is generate output for this: start two = int 2 twoplustwo = add two, two ret twoplustwo this adds two and two in the most hardcoded way possible. the conversion from lir to a program lik...
PyDOM - Archive of obsolete content
ler and top-level script), the dom node needs to be explicitly specified - the globals are the window itself. the event handler could also have used getelementbyid - the point is that both the event handler and top-level script share the same namespace. using python ideally, you just tell mozilla you are using python, and magically you can use python instead of javascript. ...
...elf. the event handler could also have used getelementbyid - the point is that both the event handler and top-level script share the same namespace. using python ideally, you just tell mozilla you are using python, and magically you can use python instead of javascript. once you set the script
type for a node, it is the default for that node and all children. this means that if you set the script-
type to python for the window, python is the default script
type for all child elements in the window. ...
...pt share the same namespace. using python ideally, you just tell mozilla you are using python, and magically you can use python instead of javascript. once you set the script
type for a node, it is the default for that node and all children. this means that if you set the script-
type to python for the window, python is the default script
type for all child elements in the window. xul use a script-
type attribute on your elements. for example, <window script-
type="application/x-python" .../> html <meta http-equiv="content-script-
type" content="application/x-python" /> should work (but possibly doesn't - see bug 100924). but addeventlistener within a <script
type="application/x-python"> block does. almost python code can not be secured - so it will only run from trusted sources. this means you ...
Abc Assembler Tests - Archive of obsolete content
script that is used for the actionscript tests. when run, the assembler tests include the abcasm/abs_helper.as file which defines the following functions: start(summary:string):void - start a new test section described by summary end():void - test section finished compare_stricteq(name:string, expected:*, actual:*):void - compare the results of a testcase where name is the testcase name compare_
typeerror(name:string, expected:*, actual:*):void - special function for comparing
typeerrors (runtimeerrors) - will only compare the first 22 chars of expected and actual so that test can be run in release and releasedebugger configurations. compare_numbereq(name:string, expected:*, actual:*, fractiondigits:int=-1):void - compare 2 numbers up to fractiondigits this is to be used for high pr...
...ction .function_id(runtest) getlocal0 call 0 findproperty end callpropvoid end 0 returnvoid } function runtest() { // test null <= null == true findproperty compare_stricteq pushstring "null lessequals null" // testname pushtrue // expected pushnull pushnull lessequals // actual callpropvoid compare_stricteq 3 // use .try / .catch to catch
typeerror // convert_o null .try { pushnull convert_o pop findproperty fail pushstring "convert_o null" pushstring "exception should have been thrown:
typeerror: error #1009: cannot access a property or method of a null object reference." getlocal1 callpropvoid fail 3 jump finished_convert_o_null } .catch { ...
... convert_o pop findproperty fail pushstring "convert_o null" pushstring "exception should have been thrown:
typeerror: error #1009: cannot access a property or method of a null object reference." getlocal1 callpropvoid fail 3 jump finished_convert_o_null } .catch { getlocal0 pushscope setlocal2 // save
typeerror findproperty compare_
typeerror pushstring "convert_o null" // test name pushstring "
typeerror: error #1009" // expected getlocal2 // actual callpropvoid compare_
typeerror 3 } finished_convert_o_null: } ...
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. ...
...ox 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. ...
...gs: global values/functions i.e. ...
Attribute (XUL) - Archive of obsolete content
mandupdater 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 disablekeynavigation disablesecurity dlg
type dragging editable editor
type 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 hideseconds hidespinbuttons highlightn...
...1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parse
type persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties query
type readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex sel
type setfocus showcaret showcommentcolumn showpopup size sizemode siz...
...ectedindex sel
type setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top
type uri useraction validate value var visuallyselected wait-cursor width window
type wrap wraparound ...
Uploading and Downloading Files - Archive of obsolete content
updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. the io object and stream objects can be used to upload files to servers in various ways. the exact method depends on the
type of upload that you wish to perform. http file upload some web sites allow one to upload a file. this is done by using an html <input> element using the file
type from within a form. when the user selects a file, it can be uploaded to a server. this operation can also be performed via a script using the xmlhttprequest object. this is a common technique for uploading files as it is compatible wit...
...to add a file field to the data you use a file object that an extension can construct from file path. ...
...rt(event.target.responsetext); }; req.send(formdata); } http put you can also upload a file using an http put operation. this is simpler but it doesn't allow sending additional data and web servers usually need special configuration to support put operations. function uploadput(posturl, filepath) { var req = new xmlhttprequest(); req.open("put", posturl); req.setrequestheader("content-
type", "text/plain"); req.onload = function(event) { alert(event.target.responsetext); } req.send(new file(filepath)); } in this example, a new input stream is created for a file, and is passed to the xmlhttprequest's send method. fetch upload please refer to uploading a file section inside the fetch article. downloading files under construction... meanwhile you can read this. ...
List of commands - Archive of obsolete content
the following lists commands which might be usable by <command> or command dispatchers/controllers. ...
... cmd_scrollright cmd_selectcharprevious cmd_selectcharnext cmd_wordprevious cmd_wordnext cmd_selectwordprevious cmd_selectwordnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_selectlineprevious cmd_selectlinenext cmd_selectpageprevious cmd_selectpagenext cmd_selectmovetop cmd_selectmovebottom editor commands (legal when the focus is anywhere where you can
type text): cmd_paste - paste a selection from the clipboard cmd_pastequote cmd_delete cmd_deletecharbackward cmd_deletecharforward cmd_deletewordbackward cmd_deletewordforward cmd_deletetobeginningofline cmd_deletetoendofline cmd_scrolltop cmd_scrollbottom cmd_movetop cmd_movebottom cmd_selecttop cmd_selectbottom cmd_linenext cmd_lineprevious cmd_selectlinenext cmd_selectlineprev...
...ewseparator cmd_bm_open cmd_bm_openinnewtab cmd_bm_openinnewwindow cmd_bm_paste cmd_bm_properties cmd_bm_rename cmd_bm_selectall cmd_bm_setnewbookmarkfolder cmd_bm_setnewsearchfolder cmd_bm_setpersonaltoolbarfolder cmd_bm_sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_closewindow cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_find
typelinks cmd_find
typetext cmd_gotoline cmd_handlebackspace cmd_handleshiftbackspace cmd_minimizewindow cmd_neweditor cmd_neweditordraft cmd_neweditortemplate cmd_newnavigator cmd_newnavigatortab cmd_newtabwithtarget cmd_openhelp cmd_paste - paste a selection from the clipboard cmd_printsetup cmd_quit cmd_redo cmd_savepage cmd_scrollpagedown cmd_scrollpageup cmd_selectall cmd_swit...
Popup Guide - Archive of obsolete content
popups and menus there are various
types of popups and menus that may be created. a popup is a menu or floating window without a title bar, borders or other window decorations that may extend outside of the edge of the main window. popup
types xul provides a number of different
types of elements which may be used to create popup menus or other
types of popup widgets, which vary based on the manner in which they are attached to an element and the manner in which they are opened. a brief overview of each
type is listed here; more details for each
type can be found by following the corresponding links. a popup is not created as a separate window or file, instead it is included inside another window or dialog. ...
...dgets, which vary based on the manner in which they are attached to an element and the manner in which they are opened. a brief overview of each
type is listed here; more details for each
type can be found by following the corresponding links. a popup is not created as a separate window or file, instead it is included inside another window or dialog. in this guide, the term 'popup' refers to all
types of popups, whereas the term 'menu' refers to a specific
type of popup. specifically, the first two
types in the list below are menus. menus a menu is used when you wish to 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 comman...
...s, 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 is useful when you wish to display some controls temporarily over the existing ui. for example, a popup search field could be used to allow searching and will disappear when a search term has been entered. a panel is created using the panel element. floating panels a floating popup is a
type of panel with a titlebar and acts like an auxiliary window. usually it would contain too...
findMode - Archive of obsolete content
« xul reference findmode
type: integer read only. the find mode in use. ...
... « xul reference findmode
type: integer read only. the find mode in use. ...
... « xul reference findmode
type: integer read only. the find mode in use. ...
Building Trees - Archive of obsolete content
as a result, the builder only has a few pieces of information to keep track of. to use the tree builder, you need to add a flags attribute to the root node: <tree datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content"> the dont-build-content flag causes no content to be built for the template. but moreover, it uses a sub
type of the main builder called the tree builder. without this flag, the template will be handled by the content builder. note: while a tree builder can only be used with trees, a content builder can be used with any
type of content. if you wish, you can also use the content builder for a tree. there may be situations that call for this, typically when handling smaller amounts of data. however, the...
...ent builder generates content in the template body and substitutes data from the datasource right away. however, it will generate the same result on screen to the user as with the tree builder. compare the example with a tree builder and the same example using a content builder. ...
...ay be set to either “normal” for a normal progress meter or “undetermined” for an undetermined progress meter. the value attribute is used to set the current progress value for normal progress meters. the value attribute may also be used for checkbox columns by setting it to either true or false. whether a cell is a normal labeled value, a progress meter or a checkbox is determined by the
type attribute on the column the cell is in. for cells in normal columns, you can use the value attribute to store some other value and you can use the view’s getcellvalue() method to retrieve it. naturally, this will retrieve the value after any variables have been substituted. besides the attributes mentioned above, any other attributes specified on the tree rows and cells are ignored. since no el...
RDF Modifications - Archive of obsolete content
« previousnext » one of the most useful aspects of using templates with rdf datasources is that when the rdf datasource changes, for instance a new triple is added, or a triple is removed, the template updates accordingly, adding or removing result output as needed. no extra code needs to be written to do this; it happens automatically. this involves a third
type of observer involved in a template builder, an nsirdfobserver, used to listen for modifications to the rdf datasource. naturally, this only applies to rdf queries. when the datasource is modified, the datasource will notify any observers of the change. the template builder uses these notifcations to update the template as necessary based on the new or removed information. you don't need to implement this observer you...
...e template as necessary based on the new or removed information. you don't need to implement this observer yourself, although you may add an observer to the datasource if you want to be notified when the data changes. note that this automatic updating of the template does not occur for xml and sqlite sources, only for rdf datasources. however, as it is possible to use and/or implement other query
types with templates, these additional
types may support automatic updating. there are two main situations when the notifications are made. the first is when the modification functions on the datasource are called. there are four such functions: 'assert', to add a new triple (or arrow) to the rdf graph, 'unassert' to remove a triple, 'change' to adjust the target of a triple, and 'move' to adjust the ...
...y photos with both a title and a description to be displayed. assuming that the 'obelisk' photo doesn't have a description already, adding the triple listed above should cause a new result to be available for this photo. the builder scans through the query statements one by one. the content tag can safely be skipped at this part of the process, so the builder moves onto the member statement. this
type of statement can only cause a change when an item is being added or removed from a container. since this is a new rdf triple that isn't an addition or removal from a container, this statement can be skipped. effectively, if the result generation process was to evaluate this member statement, the same output would be supplied for the ?photo variable whether the new data is there or not. thus, the ...
Static Content - Archive of obsolete content
ate. ...
... it makes it easy to combine static results and template generated results into one list. the builder then switches where generated content would be generated to inside to existing menupopup and moves onto the next part of the action, the menuitem. this element has the uri attribute so this content will be duplicated for each result. the technique of looking for an existing element applies to any
type of content. the builder will treat the element as already present as long as some element with the same tag name exists. if you were to change the static content to be some other element besides a menupopup, it won't match, so the builder will create a new one when handling the action. this becomes useful when using multiple rules and we'll see some examples of this later. here is the example to ...
...ist of countries. ...
Adding HTML Elements - Archive of obsolete content
"http://www.w3.org/1999/xhtml" this is a declaration of html much like the one we used to declare xul. this must be entered exactly as shown or it won't work correctly. note that mozilla does not actually download this url, but it does recognize it as being html. ...
...st 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. this may be clearer from the examples below. using html elements you can use any html tag although some such as head and body are not really useful. some examples of using html elements are shown below. <html:img src="banner.jpg"/> <html:input
type="checkbox" value="true"/> <html:table> <html:tr> <html:td> a simple table </html:td> </html:tr> </html:table> these examples will create an image from the file banner.jpg, a checkbox and a single-cell table. you should always use xul features if they are available and you probably should not use tables for layout in xul. (there are xul elements for doing layout). notice that t...
...is (the description element, for example). the examples below may help. examples of html elements what follows are some examples of adding html elements to windows. in each case, the window and other common information has been left out for simplicity. a dialog with a check box example 2 : source view <html:p> click the box below to remember this decision. <html:p> <html:input id="rtd"
type="checkbox"/> <html:label for="rtd">remember this decision</html:label> </html:p> </html:p> in this case, one p tag was used to place the text in and another was used to break apart the text into multiple lines. text outside of html blocks example 3 : source view <html:div> would you like to save the following documents? <html:hr/> </html:div> expense report 1 what i did last su...
Adding more elements - Archive of obsolete content
« previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
...lso notice that the label was removed. if you resize the window vertically, the elements do not change size. this is because they are inside horizontal boxes. in might be more appropriate if the find and cancel buttons always stayed along the bottom of the window. this is easy to do by adding a spacer in between the two horizontal boxes. ...
...der property or we could use the groupbox element. this first method would require that we set the style on the box itself. we will use the latter method, however. a groupbox has the advantage that it draws a box with a nice beveled look, suitable for the current theme. let us change the box into a groupbox: <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="search
type"> . . . <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </groupbox> there are other cosmetic problems as well. we could also have the groupbox grow so that it extends vertically to the bottom of the box. also, we could modify some of the margins so that the elements are positioned better. we will see more examples of the box model and some ...
Creating a Wizard - Archive of obsolete content
buttons appear at the bottom of the dialog to allow navigation between pages. the wizards are often used to help the user perform a complex task. each page contains a single question or a set of related questions. after the last page, the operation is carried out. xul provides a wizard element which can be used to create wizards. ...
...cular os. a typical layout will include a title across the top, a set of navigation buttons across the bottom 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. ...
...ld use for regular windows. the navigation buttons are created automatically. ...
Document Object Model - Archive of obsolete content
nt property. since it is one of the most commonly referenced properties of the window, the document property is usually referenced without the 'window.' qualifier. mozilla provides several different document objects depending on the kind of document. the three main documents are htmldocument, xmldocument, and xuldocument, for html, xml and xul documents respectively. obviously, it is this latter
type of document used for xul. the three document
types are very similar, in fact they all share the same base implementation. however, there are a few functions that are specific to one document
type or the other. retrieving elements the most common method to retrieve an element in a document is to give the element an id attribute and the use the document's getelementbyid() method. we've added the ...
...you can use the syntax element.hidden where 'element' is a reference to the element. you might note that most of the properties listed in the reference correlate to common attributes on elements. there are differences, of course, for example, while getattribute("hidden") will return the string 'true' for a hidden element, whereas the hidden property returns a boolean true value. in this case, the
type conversion is done for you so the property is more convenient. as with each document, there is a different element object for xul elements as for html and xml elements. every xul element implements the xulelement (reference broken) interface. a xul element is any element declared with the xul namespace. so, xul elements will have that interface even if added to other xml documents, and non-xul e...
...le for an element. navigating the dom the dom is a tree structure with a single root node with children. you can get a reference to the root node using the document's documentelement property. the root node is always an element, but this is not the case for other nodes in the tree. an element corresponds to a tag is the xul source, but you may also find text nodes, comment nodes and a few other
types in a document tree. in the case of xul, the root element will be the window tag in the xul document. each node in the tree may have children and those children may have child nodes of their own. since the dom is a tree structure, you can navigate through the tree using a variety of properties. some common properties are listed below: firstchild reference to the first child node of an elemen...
Input Controls - Archive of obsolete content
box in which the user can enter text. textboxes accept many of the same attributes as html input controls. the following are some of them: id a unique identifier so that you can identify the textbox. class the style class of the textbox. value if you want the textbox to have default text, supply it with the value attribute. disabled set to true to have text entry disabled. textbox.
type you can set this attribute to the special value password to create a textbox that hides what it
types. this is usually used for password entry fields. maxlength the maximum number of characters that the textbox allows. note that while in html, several different kinds of fields can be created with the input element, in xul there are separate elements for each
type. the following example sh...
...html also has a textarea element for creating a larger text entry area. ...
...nt. <label value="search for:" control="find-text"/> <textbox id="find-text"/> <button id="find-button" label="find"/> add these lines before the buttons we created in the last section. if you open this window, you will see something much like that shown in the image. notice that the label and the text input field have now appeared in the window. the textbox is fully functional and you can
type into it and select text. note that the control attribute has been used so that the textbox is selected when the label is clicked. checkboxes and radio buttons two additional elements are used for creating check boxes and radio buttons. they are variations of buttons. the checkbox element is used for options that can be enabled or disabled. radio buttons can be used for a similar purpose when t...
Introduction to XBL - Archive of obsolete content
with the id 'binding1' in the file 'chrome://findfile/content/findfile.xml'. the '#binding1' syntax is used to point to a specific binding, much like how you would point to an anchor in an html file. you will usually put all of your bindings in a single file. the result in this example, is that all scrollbar elements will have 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 pro...
...t 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 can associate a binding to only those boxes that belong to that class. the following example demonstrates this. ...
...ate custom widgets (although you can use any element, even one 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. ...
More Event Handlers - Archive of obsolete content
been called in the box's listener, so the button's listener never gets called. if this call was removed, both listeners would be called and both alerts would appear. prevent default action if no event handlers have been registered for an event, then after completing the capturing and bubbling phases, the element will handle the event in a default way. ...
...note that preventing the default action is not the same as stopping event propagation with the stoppropagation method. ...
...note that preventing the default action is not the same as stopping event propagation with the stoppropagation method. ...
Trees - Archive of obsolete content
idual columns. some examples of trees include the list of messages in a mail application, or the bookmarks window in mozilla. in some ways, a tree has some similarities with the listbox. both can be used to create tables of data with multiple rows and columns, and both may contain column headers. the tree also supports nested rows, whereas the listbox does not. however, listboxes may contain any
type of content, whereas trees may only contain text and images. (using advanced features, progress meters or checkboxes also can be added to the tree) a tree consists of two parts, the set of columns, and the tree body. the set of columns is defined by a number of treecol elements, one for each column. each column will appear as a header at the top of the tree. the second part, the tree body, co...
...allows more flexibility when using trees. naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially for simple trees. fortunately, xul provides a couple of built-in view implementations which do most of the hard work for you. for most trees, especially when you first start to use trees, you will use one of these built-in
types. however, you can create a view entirely from scratch if necessary. if you do, you might store the data in an array or javascript data structure, or load the data from an xml file. since the entire body of the tree is a single widget, you can't change the style of individual rows or cells in the normal way. this is because there are no elements that display the individual cells, like there is w...
...ntent 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 sel
type attribute on the tree, set to the value single. with this, the user may only select a single row at a time. add a tree to our find files example let's add a tree to the find files window where the results of the search would be displayed. the tree will use a content tree view. the following code should be added in place of the iframe. <tree flex="1"> <treecols> <treecol id="name" label=...
XUL accessibility guidelines - Archive of obsolete content
introduction welcome to the xul accessibility guidelines. by following these principles and practices, you will be able to write your xul applications in such a way that all users, including those with physical, sensory, or communicative disabilities, with be able to use and enjoy them. accessibility is not difficult, but does require a basic understanding of the different
types of disabilities, commonly used assistive technologies, and special accessibility features built into the xul languages. most of all, accessibility requires a conscious effort on your part, and a desire to include everyone. it is hoped that these guidelines will be sufficiently clear and detailed that everyone—even someone with no previous background in accessibility—can understand them. in addition, there...
...tering a form field. for labels that may wrap to a second line, do not use the description element. instead, use the text of a label enclosed in the label tags, and do not use the value attribute, as shown below for the password field. <label control="login-username" value="username:"/> <textbox id="login-username"/> <label control="login-password">password:</label> <textbox id="login-password"
type="password"/> larger forms can be difficult to layout and structure. while there are many ways to visually structure forms, always provide a text label for every form element. form elements should not be used to label other form elements. when form elements are encapsulated in a groupbox with a caption, assistive technologies such as screen readers will read the caption along with the label t...
...ld be alerted to the problem and allowed to fix the error. response time when appropriate, alert the user to time limits and allow the user to adjust a time limit or request more time. one of the miracles of modern technology is that it allows people with even the most severe physical limitations to use computers. some users use mouth sticks or movement detection devices such as eye tracking to
type. this process can be slow. other users need time to cognitively process what is happening in the application. testing human computer interaction ensure that help documentation is up to date. verify that alerts are displayed through appropriate xul elements. ensure the user is informed of any user based errors and that instruction and opportunity for reperforming error causing actions is allowed...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
sections in bold are to draw attention to pieces that are often overlooked for visual layouts. underlined text may be read by the screen reader. element enabled usage comments description <description value="<!-- text -->" /> <description><!--label text--></description> use for non-label text. although tutorials claim label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. ...
... caption see g...
... jaws 7.10 issues to use a browser element with html, the
type="content" attribute should be specified. however, this attribute causes any xul loaded in the browser to have issues with jaws 7.10. we believe they are using the window class to determine that it is content rather than dialog, but does not support content mode for xul. therefore, with jaws 7.10, to use xul inside of a browser, the
type attribute cannot not be used. 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 - Archive of obsolete content
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 not be submitted. do not set the attribute to true, as this will sug...
...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. 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. this occurs when a user selects a menu item or presses a keyboard shortc...
... setting this attribute to "true" indicates that the command is reserved for chrome code and is not available for use in the content. ...
commandset - Archive of obsolete content
occur. a common use of the command updater is to update cut, copy, and paste menu items. more information is available in the xul tutorial. ...
...if this attribute is not specified, or you set it to the value '*', all events are valid. valid events are listed below, or you can use your own events. ...
...listed below, or you can use your own events. you can send a custom event by calling the updatecommands method of the command dispatcher. focus: occurs when the focused element changes. select: occurs when the selected text changed. clipboard: occurs when the clipboard is changed. undo: occurs when the undo buffer is changed. oncommandupdate
type: script code this event occurs when a command update occurs. you would use this to update the disabled status of items. targets
type: comma-separated list of element ids a comma-separated list of element ids that the command updater will update upon. if this attribute is not specified, or you set it to the value '*', all elements are valid. the command update will...
content - Archive of obsolete content
if set, the conditions will only match if the template builder is parsing content for an element directly inside this tag. for example, by using a value of treechildren, the condit...
...if set, the conditions will only match if the template builder is parsing content for an element directly inside this tag. ...
...he template builder is parsing content for an element directly inside this tag. for example, by using a value of treechildren, the condition will only match when placing elements directly inside a treechildren tag. thus, nested elements will not match because they are directly inside a treeitem. this attribute is useful to provide different rules for outer and inner elements. uri
type: ? used to specify the variable name for the content. when a rule is evaluated, it scans through each resource in the rdf datasource looking for a match. each resource is placed in the variable specified in the uri attribute in turn. then, the other rules are evaluated for a match. this attribute should always be present. métodos inherited methods addeventlistener(), appendchild(), b...
dialogheader - Archive of obsolete content
« xul reference home [ examples | attributes | properties | 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. ...
...an ellipsis will be used in place of the cropped text. ...
...opped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description
type: string descriptive text to appear in addition to the dialog title. title
type: string the text to appear in the title bar of the window. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheigh...
groupbox - Archive of obsolete content
ll be used as a caption which appears along the top of the groupbox. typically, the groupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, context...
...flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type type: integer a value indicating the
type of accessibility object for the element. 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, , p...
menubar - Archive of obsolete content
that usually contains menu elements. on the macintosh, the menubar is displayed along the top of the screen, and all non-menu related elements inside the menubar will be ignored. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...enuitem label="new"/> <menuitem label="save" disabled="true"/> <menuitem label="close"/> <menuseparator/> <menuitem label="quit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> attributes grippyhidden seamonkey only
type: boolean when set to true, the grippy will be hidden. 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 accessible
type type: integer a value ind...
...hen set to true, the grippy will be hidden. 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 accessible
type type: integer a value indicating the
type of accessibility object for the element. statusbar
type: id of statusbar element gets and sets the value of the statusbar attribute. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , ,...
rule - Archive of obsolete content
he conditions, content within the rule's action body is generated. the bindings element is optional and may specify additional variable bindings to be used. when no query element is used in a template, a default query is used and the simple query syntax may be used for rdf datasources. for more information about this, see the simple query syntax. attributes iscontainer, isempty, parent, parse
type examples (example needed) attributes iscontainer
type: boolean indicates whether rules match based on containment. if not specified, the rule may match regardless of whether a node is a container or not. true: the rule will only match nodes that are marked as containers. this would apply to nodes that represent folders. false: the rule will only match nodes that are not marked a...
... attributes iscontainer
type: boolean indicates whether rules match based on containment. if not specified, the rule may match regardless of whether a node is a container or not. true: the rule will only match nodes that are marked as containers. this would apply to nodes that represent folders. false: the rule will only match nodes that are not marked as containers. isempty
type: boolean indicates whether rules match based on emptyness. if not specified, the rule may match regardless of whether a node has children or not. true: the rule will only match nodes that contain no child elements. false: the rule will only match nodes that contain one or more child elements. parent
type: element tag name if set, the rule will only match the corresponding tag. this...
...regardless of whether a node has children or not. true: the rule will only match nodes that contain no child elements. false: the rule will only match nodes that contain one or more child elements. parent
type: element tag name if set, the rule will only match the corresponding tag. this may be used to have separate rules for leaf and container nodes with different tags. parse
type type: string if this attribute is set to integer, the rule will only match rdf nodes with a parse
type of integer. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , obser...
statusbar - Archive of obsolete content
i suggest using the add-on bar instead. « xul reference home [ examples | attributes | properties | methods | related ] an element used to create a status bar, usually placed along the bottom of a window. it is virtually equivalent to a standard box, but may be rendered differently. contains statusbarpanels. ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextme...
..., flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type type: integer a value indicating the
type of accessibility object for the element. 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, , p...
toolbarseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] creates a separator between groups of toolbar items. it is functionally equivalent to a normal separator but some themes may apply a different appearance. ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmen...
..., flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type type: integer a value indicating the
type of accessibility object for the element. 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, , pe...
toolbarspacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a space between toolbar items. ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, context...
...flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type type: integer a value indicating the
type of accessibility object for the element. 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, , p...
toolbarspring - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a flexible space between toolbar items. ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextme...
..., flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type type: integer a value indicating the
type of accessibility object for the element. 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, , p...
treecols - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a group of treecol elements. there should one and only one treecols element in a tree. more information is available in the xul tutorial. attributes pickertooltiptext properties accessible
type examples (example needed) attributes pickertooltiptext
type: string the text for the tooltip on the column picker. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, context...
...flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type type: integer a value indicating the
type of accessibility object for the element. 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, , p...
treeitem - Archive of obsolete content
that row's descendants. in a template condition, you should use a treeitem instead of a content element when the dont-build-content flag is specified. set the uri attribute to the variable name to bind to a content node during matching. more information is available in the xul tutorial. attributes container, empty, label, open, uri examples (example needed) attributes container
type: boolean set to true if the element is to act as a container which can have child elements. this would be used for folders. this will be set by the template builder as needed. empty
type: boolean set to true if the element is a container that contains no children. this will be set by the template builder as needed. label tipo: string (concatenación de caracteres) para un árb...
...thus, it should be placed on an element that is a descendant of a template. ...
...rue if the element is a container that contains no children. this will be set by the template builder as needed. label tipo: string (concatenación de caracteres) para un árbol tree con columnas simples, la etiqueta puede ser colocada directamnete sobre el elemeto "treeitem" sin la necesidad de una fila "row" y un elemento "treeitem" dentro. open
type: boolean for the menu
type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. uri
type: string for template-generated content, the attribute should be placed on the element where content generation should begin. thus, it should be placed on an element that is a descendant of a template. the value should be set to rdf:*. elements that appea...
wizardpage - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element defines a page in a wizard. the content in the pages should be placed inside the wizardpage element. more information is available in the xul tutorial. attributes description, label, next, pageid properties next, pageid attributes description
type: string descriptive text to appear in addition to the dialog title. 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. next
type: id set to the pageid of the next wizardpage after this one. when set, the page with this pageid is...
...st.value property upon user selection of the menuitem. next
type: id set to the pageid of the next wizardpage after this one. when set, the page with this pageid is displayed when the next button is pressed. this can be used to create wizards that do not have a linear sequence. if one of the pages has a next attribute, all of the pages should have one, except that last page. pageid
type: id this attribute should be set to a string that identifies the page's identifer in the wizard. this is used with the next attribute. the wizard always starts with the wizardpage that appears first in the wizard child list. properties next
type: string wizardpage id set to the pageid of the next page after this one. when set, the page with this pageid is displayed when the next butto...
...this is used with the next attribute. the wizard always starts with the wizardpage that appears first in the wizard child list. ...
Debugging a XULRunner Application - Archive of obsolete content
o 44, it is no longer possible to start the devtools server from xul apps. see bug 1244163. starting with xulrunner 24, you should use the firefox browser debugger to debug your xulrunner apps. ...
...ld use the firefox browser debugger to debug your xulrunner apps. add the following code to your xul app: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); // don't specify a window
type parameter below if "navigator:browser" // is suitable for your app. ...
...ocol" appears when trying to open *.js files in venkman, then add an empty file called .autoreg in the same directory as your xulrunner binary. if .autoreg already exists, then edit it to force the last modified time to be updated. xulrunner will then notice the new components file. when adding a component to a xulrunner application, change the buildid in application.ini. function toopenwindowby
type is not defined if you get an error that "function toopenwindowby
type is not defined" you may add the following function to your scripts (doesn't seem to be in the venkman overlay): function toopenwindowby
type(in
type, uri) { var winopts = "chrome,extrachrome,menubar,resizable,scrollbars,status,toolbar"; window.open(uri, "_blank", winopts); } i can't see my pages, functions ... if your pag...
Dialogs in XULRunner - Archive of obsolete content
file open and save dialogs are good examples of these. ...
...nt experience across applications. custom dialogs building dialogs in xul is very similar to creating 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. ...
...as each os has its own convention for where buttons should be placed on a dialog. here is a short list of the button attributes on dialog; see also creating dialogs at mozillazine knowledge base: buttons a comma separated list of buttons to show on dialog (accept, cancel, help, extra1, and extra2). buttonlabelaccept label for the accept button; similar attributes exist for the other button
types. buttonaccesskeyaccept access key for the accept button; similar attributes exist for the other button
types. ondialogaccept javascript to execute if the accept button is pressed; similar attributes exist for the other button
types. xul has a wide range of input controls you can use in a dialog. in the future, i will try to go into more detail on some of the existing and planned xul input ...
Getting started with XULRunner - Archive of obsolete content
ct", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); xulrunner specific preferences include: toolkit.defaultchromeuri specifies the default window to open when the application is launched. toolkit.defaultchromefeatures specifies the features passed to window.open() when the main application window is opened. toolkit.singletonwindow
type allows configuring the application to allow only one instance at a time. the toolkit preferences are described in further detail in xulrunner:specifying startup chrome window. the debugging preferences are discussed in debugging a xulrunner application 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 ...
...unner:specifying startup chrome window. the debugging preferences are discussed in debugging a xulrunner application 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. ...
...ed 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.</description> </window> note: make sure there is no ...
MacFAQ - Archive of obsolete content
ould copy or symlink the dist/xul.framework directory to /library/frameworks. note that in order to copy the framework while keeping the relative soft-links in the framework, do something like: % ( cd dist ; gnutar cf - xul.framework | ( cd /library/frameworks ; gnutar xf - )) installing your application your application must be installed as a xulrunner app before you can open it. to do this,
type: xulrunner-bin --install-app /path/to/appdir note the path to your application must end with the directory containing application.ini; you should not reference application.ini in this command. this command will place a copy of your application in /applications/(vendor)/(name) , where (vendor) is the vendor field in your application.ini and (name) is the name field. opening your application for or...
...s 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" window
type="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 = components.classes["@mozilla.org/consoleservice;1"] ...
...rome://global/content/nsusersettings.js" /> <script><![cdata[ function debug(alogstring) { var mconsoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) mconsoleservice.logstringmessage("myxul: " + alogstring + "\n"); } function checkotherwindows() { var singletonwindow
type = nspreferences.copyunicharpref("toolkit.singletonwindow
type"); var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var win = windowmediator.getmostrecentwindow(singletonwindow
type); if (win) { window.close(); win.focus(); } } if (win...
Windows and menus in XULRunner - Archive of obsolete content
for css and dtd, which i will discuss in a moment. <window> is the basic windowing element in xul. it has attributes to set the title/caption as well as 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"?> <!doc
type 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 st...
...e window icons. menus and toolbars most desktop applications are complex enough to require some sort of menu and/or toolbar to structure the application’s available commands. xul provides elements to support both menus and toolbars. ...
...nd toolbars most desktop applications are complex enough to require some sort of menu and/or toolbar to structure the application’s available commands. xul provides elements to support both menus and toolbars. ...
xbDesignMode.js - Archive of obsolete content
e initial developer. all rights reserved. ...
...esignmode a javascript wrapper for browsers that support designmode */ function xbdesignmode(aiframe){ this.meditordocument = null; this.miframeelement = null; // argument is a string, therefore an id if ( (
typeof(aiframe) == "string") && (document.getelementbyid(aiframe).tagname.tolowercase()=="iframe") ){ this.miframeelement = document.getelementbyid(aiframe); } else if( (
typeof(aiframe)=="object") && (aiframe.tagname.tolowercase() == "iframe") ){ this.miframeelement = aiframe; } else { throw "argument isn't an id of an iframe or an iframe reference"; } if (this.miframeelement.contentdocument){ // gecko this.meditordocument = this.miframeelement.contentdocument; this.meditordocument.designmode = "on"; } else { // ie this.meditordocu...
...itordocument = this.miframeelement.contentdocument; this.meditordocument.designmode = "on"; } else { // ie this.meditordocument = this.miframeelement.contentwindow.document; this.meditordocument.designmode = "on"; // ie needs to reget the document element after designmode was set this.meditordocument = this.miframeelement.contentwindow.document; } } xbdesignmode.proto
type.execcommand = function (acommandname, aparam){ if (this.meditordocument) this.meditordocument.execcommand(acommandname, false, aparam); else throw "no meditordocument found"; } xbdesignmode.proto
type.setcsscreation = function (ausecss){ if (this.meditordocument) this.meditordocument.execcommand("usecss", false, ausecss); else throw "no meditordocument found"; } ...
2006-10-27 - Archive of obsolete content
o build firefox 2 source on a solaris 10 x86 machine but was not successful with the build. he has already built firefox 1.5.0.7 on the same machine with no problems. the following is his configuration script that he used to build firefox 2 on solaris. ./configure --prefix=/export/home/alex/thunderbird --enable-application=browser --disable-tests --disable-debug -disable-auto-deps --disable-free
type2 -enable-official-branding --enable-default-toolkit=gtk2 --enable-optimize=-xo5 --enable-static --disable-shared --enable-xft --enable-svg the build tools that he used to build firefox 2 are listed in his posting along with the error that he receives when he tries to build it. alex is not sure if he is missing a library or if he needs to pass extra options to configure the build. peter weilb...
...ng along with the error that he receives when he tries to build it. alex is not sure if he is missing a library or if he needs to pass extra options to configure the build. peter weilbacher responded to alex's posting on the same day, stating that he is not sure what packaging system solaris 10 x86 uses but thinks that he might need to install the developer packages of x and/or xrender and free
type which should contain the libxrender.* and libfree
type.* files that are need for the linking. october 27: alex responded to peter weilbacher posting stating that he is going to look for a solaris newsgroup because he is not sure how to check if the library is installed or where to get the packages. october 26: masaki responded to alex's posting by providing a link to a similar bug that provi...
...ry is installed or where to get the packages. october 26: masaki responded to alex's posting by providing a link to a similar bug that provides a work around to the problem he was having. the solution that masaki suggested was to add "-l/usr/sfw/lib" into moz_cairo_libs of config/autoconf.mk. moz_cairo_libs = -l$(libxul_dist)/lib -lmozcairo -lmozlibpixman \ -l/usr/sfw/lib -lxrender -lfree
type -lfontconfig october 27: alex replied to masaki posting, stating that he was going to use the work around that he provided and would provide feedback if it was successful or not. later that day alex able to successful complete his firefox 2 build by using masaki'swork around that he had posted. update-packaging october 27: atachi.hayash wanted to know if you use msys would update-packaging ...
NPPrintCallbackStruct - Archive of obsolete content
fp pointer to the file to which the plug-in should write its postscript data. ...
... fp pointer to the file to which the plug-in should write its postscript data. ...
... fp pointer to the file to which the plug-in should write its postscript data. ...
NPAPI plugin reference - Archive of obsolete content
pter describes methods in the plug-in api that are provided by the browser; these allow call back to the browser to request information, tell the browser to repaint part of the window, and so forth. the names of all of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. np_getmimedescription np_getmimedescription returns a supported mime
type list for your plugin. it works on unix (linux) and macos. on windows you have to define supported mime
types in the dll resource file. np_getvalue allows the browser to query the plug-in for information. np_initialize provides global initialization for a plug-in. np_port contains information required by the window field of an npwindow structure. np_shutdown provides global deinitialization...
...nce of an npclass (i.e. an npobject). npembedprint substructure of npprint that contains platform-specific information used during embedded mode printing. npevent represents an event passed by npp_handleevent() to a windowless plug-in. npfullprint substructure of npprint that contains platform-specific information used during full-page mode printing. npidentifier npidentifier is an opaque
type used for method and property identifiers, such as strings or integers. npidentifiers are unique, in that for any given string or integer, there is only one npidentifier. the lifetime of npidentifiers is controlled by the browser. npn newstream requests the creation of a new data stream produced by the plug-in and consumed by the browser. npn_createobject allocates a new npobject. npn_destroy...
... npstring is a struct that holds a pointer to a sequence of 8-bit units (nputf8) making up a utf-8 string, and the number of 8-bit units in the utf-8 string. nputf8 nputf8 is a byte representing an 8-bit unit of a utf-8 character. this is not the same thing as an entire utf-8 character, which may be comprised of multiple nputf8 bytes. npvariant npvariant is a struct that holds a value and the
type of that value. the value is held in a union, and the
type is one of
types defined in the npvariant
type enumeration. npvariant
type npvariant
type is an enumeration that is used to identify the data
type of an npvariant structure. npwindow contains information about the target into which the plug-in instance can draw. ...
Syndicating content with RSS - Archive of obsolete content
dding a special <a> element to html page(s). we've already discussed the first step—creating rss feeds— so we'll focus on the other two steps here. adding the <link> often the data in an rss feed is also made available on an html web page. when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link rel="alternate"
type="application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden. to advertise the rss feed in a more direct way, the html <a> element can be used. this mimics the <link> element discussed above. linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <...
...xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden. to advertise the rss feed in a more direct way, the html <a> element can be used. this mimics the <link> element discussed above. linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a rel="alternate"
type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon. it is recommended that you too use this icon when creating the special <a> link to your feed. the icon looks like the following: you can get more icons like this from feed icons. (other sizes and colors, along with their source files, are available too.) advanced syndication...
... feed icons. (other sizes and colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not required, support of this is recommended, especially for web sites and applications with high performance needs. the http protocol, one of the core technologies behind the web, provides a way of prioritizing the content
type that an http client prefers to receive. this technique takes advantage by having the client prefer rss (over html or other formats). here's a simple example of it being done: accept: application/rss+xml, text/html with real production software, though, it would look more like this: accept: application/rss+xml, application/xhtml+xml, text/html here's a more complete example: get / http/1.1 ...
What is RSS - Archive of obsolete content
you want to.</description> <lastbuilddate>tue, 23 aug 2005 21:02:05 -0800</lastbuilddate> <link>http://katetv.example.com/</link> <item> <title>this is fun</title> <guid>http://katetv.example.com/show/4</guid> <pubdate>tue, 23 aug 2005 21:02:05 -0800</pubdate> <enclosure url="http://katetv.example.com/show/4" length="1911146"
type="application/ogg"/> </item> <item> <title>watch this</title> <guid>http://katetv.example.com/show/3</guid> <pubdate>tue, 16 aug 2005 16:11:57 -0400</pubdate> <enclosure url="http://katetv.example.com/show/3" length="1387442"
type="application/ogg"/> </item> <item> <title>it is me again</title> ...
...6:11:57 -0400</pubdate> <enclosure url="http://katetv.example.com/show/3" length="1387442"
type="application/ogg"/> </item> <item> <title>it is me again</title> <guid>http://katetv.example.com/show/2</guid> <pubdate>tue, 9 aug 2005 13:12:12 -0400</pubdate> <enclosure url="http://katetv.example.com/show/2" length="1894877"
type="video/mpeg"/> </item> <item> <title>hello</title> <guid>http://katetv.example.com/show/1</guid> <pubdate>tue, 2 aug 2005 18:22:14 -0400</pubdate> <enclosure url="http://katetv.example.com/show/1" length="17442215"
type="application/ogg"/> </item> </channel> </rss> the observant reader may have noticed that the news web...
...item> <title>hello</title> <guid>http://katetv.example.com/show/1</guid> <pubdate>tue, 2 aug 2005 18:22:14 -0400</pubdate> <enclosure url="http://katetv.example.com/show/1" length="17442215"
type="application/ogg"/> </item> </channel> </rss> the observant reader may have noticed that the news web site and blogger examples were the same
type of rss. and also that the internet radio and internet television examples were the same
type of rss. in fact, the only real difference between the news/blogger rss and the internet radio/internet television rss is that the news/blogger rss uses the <link> element and the internet radio/internet television rss uses the <enclosure> element. note: these rss examples are very very simple. and were ...
TCP/IP Security - Archive of obsolete content
s. data link layer. data link layer controls are applied to all communications on a specific physical link, such as a dedicated circuit between two buildings or a dial-up modem connection to an internet service provider (isp). data link layer controls for dedicated circuits are most often provided by specialized hardware devices known as data link encryptors; data link layer controls for other
types of connections, such as dial-up modem communications, are usually provided through software. because the data link layer is below the network layer, controls at this layer can protect both data and ip information. compared to controls at the other layers, data link layer controls are relatively simple, which makes them easier to implement; also, they support other network layer protocols besid...
...better suited to providing protection than network layer controls. for example, if only one or two applications need protection, a network layer control may be excessive. transport layer protocols such as ssl are most commonly used to provide security for communications with individual http-based applications, although they are also used to provide protection for communication sessions of other
types of applications such as smtp, point of presence (pop), internet message access protocol (imap), and file transfer protocol (ftp). because all major web browsers include support for tls, users who wish to use web-based applications that are protected by tls normally do not need to install any client software or reconfigure their systems. newer applications of transport layer security protocols ...
...security protocols protect both http and non-http application communications, including client/server applications and other network traffic. controls at each layer offer advantages and features 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 unintenti...
Table Reflow Internals - Archive of obsolete content
ll processes its queue of reflow commands. the reflower positions reflowee (if it can) before actually reflowing in case views are involved (e.g. absolutely positioned elements) reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out) review of reflow the reflow state: is a node in a tree structurally equivalent to the frame tree of reflow participants contains: reflow
type, avail size, various computed values, resolved style structs possible request for preferred size and more. review of reflow the reflow metrics contains: max element size (if requested) - the minimum size it can be preferred size (if requested) - the size it would like to be given no size constraints. desired size - the size it would like to be given the avail size. this is equivalent to pr...
...g some or all of its children which reflows it children, etc. the reflowee returns a reflow status which indicates if it is complete, and thus not have to continue (split) breaking status (in the case of some inline frames) if there is truncation (it can't fit in the space and can't split). this is just a convience mechanism. kinds of reflows initial - reflowee's first reflow must be of this
type (reflower's responsibility). resize - reflowee gets a change in available space only. similar to initial, except it can reoccur. incremental - has a reflow path (tree) where each node has a command with a target frame, reflow command
types are: dirty - something changed inside a target (e.g. it gains, loses children) style changed - a target changed stylisticly (recall, size is a style property)...
...nly used for fixed positioned frames kinds of reflows incremental reflow (continued) reflower not allowed to change available size of reflowee reflow commands get coalesced to streamline processing style change a target changed stylistic if there is a target, otherwise every frame may need to respond parent of target usually turns it into an incremental reflow with a style changed command
type table frames nstableouter frame ā ā nstable frame nstablecaption frame ā ā ↓ nstablecol groupframe nstablerow groupframe nsblockframe ↓ ↓ nstablecol frame nstablerow frame ↓ nstablecell frame ↓ nsblock frame table reflow outer table reflows tabl...
Using the W3C DOM - Archive of obsolete content
be read or set. reading the property returns the text of an element with all the element content removed. setting the property replaces all the element's content with a single text node with the assigned text. the following examples show how to modify the text of a span element that already exists in the html file. ...
...ode with the assigned text. the following examples show how to modify the text of a span element that already exists in the html file. ...
...n element that already exists in the html file. <body> <p>papa's got <span id="dynatext">a lot of nerve</span>!</p> <script
type="text/javascript"> // get a reference to the span element var spanel = document.getelementbyid("dynatext"); // detect whether the browser supports textcontent or innertext if (
typeof spanel.textcontent == 'string') { spanel.textcontent = 'some gall'; } else if (
typeof spanel.innertext == 'string') { spanel.innertext = 'some gall'; // if neither are supported, use other dom methods } else { while (spanel.firstchild) { spanel.removechild(spanel.firstchild); } spanel.appendchild(document.createtextnode('some gall')); } </script> </body> the first part of the code gets a reference to the element. it then tests for support for textcontent, then ...
-ms-scroll-snap-x - Archive of obsolete content
the -ms-scroll-snap-x css shorthand property is a microsoft extension that specifies values for the -ms-scroll-snap-
type and -ms-scroll-snap-points-x properties. initial valueas each of the properties of the shorthand:-ms-scroll-snap-
type: none-ms-scroll-snap-points-x: snapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-scroll-snap-
type: as specified-ms-scroll-snap-points-x: as specifiedanimation
typediscrete syntax values the -ms-scroll-snap-x shorthand property is specified as one or both of the following values, in order and separated by spaces. -ms-scroll-snap-
type the value of the -ms-scroll-snap-
type property. -ms-scroll-snap-points-x the...
...-scroll-snap-points-x: as specifiedanimation
typediscrete syntax values the -ms-scroll-snap-x shorthand property is specified as one or both of the following values, in order and separated by spaces. -ms-scroll-snap-
type the value of the -ms-scroll-snap-
type property. -ms-scroll-snap-points-x the value of the -ms-scroll-snap-points-x property. formal syntax <'-ms-scroll-snap-
type'> <'-ms-scroll-snap-points-x'> examples the -ms-scroll-snap-x property is a shorthand property. the two selectors in the following example have the same effect. ...
... remarks this property requires windows 8 or later. this property has no effect on non-scrollable elements. ...
::-ms-browse - Archive of obsolete content
permitted properties only the following css properties can be used in a rule with ::-ms-browse in its selector. other properties are ignored. ...
... browser compatibility historically supported in internet explorer and edge before version 79. ...
... browser compatibility historically supported in internet explorer and edge before version 79. ...
E4X - Archive of obsolete content
cma international in ecma-357 standard (currently in its second edition, december 2005). e4x is implemented (at least partially) in spidermonkey (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. ...
...ition, december 2005). e4x is implemented (at least partially) in spidermonkey (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"). ...
...ngine) 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 without the "e4x=1" mime
type, any statement-level xml/html comment literals (<!--...-->) are ignored for backwards compatibility with the comment hiding trick, and cdata sections (<![cdata[...]]>) are not parsed as cdata literals (which leads to a js syntax error in html since html's <script> element produces an implicit cdata section, and therefore cannot contain explicit cdata sections). someone verify the above known b...
VBArray.dimensions - Archive of obsolete content
sts of three parts. the first part is vbscript code to create a visual basic safe array. the second part is javascript code that determines the number of dimensions in the safe array and the upper bound of each dimension. both of these parts go into the <head> section of an html page. the third part is the javascript code that goes in the <body> section to run the other two parts. ...
...nto the <head> section of an html page. the third part is the javascript code that goes in the <body> section to run the other two parts. ...
... next next createvbarray = a end function --> </script> <script
type="text/javascript"> <!-- function vbarraytest(vba) { var i; var a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { s += "the upper bound of dimension "; s += i + " is "; s += a.ubound(i); s += ".<br />"; } return(s); } --> </script> </head> <body> <script
type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards. not supported in windows 8.x store apps. applies to: vbarray object ...
VBArray.getItem - Archive of obsolete content
ample consists of three parts. the first part is vbscript code to create a visual basic safe array. the second part is javascript code that iterates the visual basic safe array and prints out the contents of each element. both of these parts go into the <head> section of an html page. the third part is the javascript code that goes in the <body> section to run the other two parts. ...
...he javascript code that goes in the <body> section to run the other two parts. ...
...not supported in windows 8.x store apps. see version information. applies to: vbarray objec...
VBArray.lbound - Archive of obsolete content
javascript code that determines the number of dimensions in the safe array and the lower bound of each dimension. since the safe array is created in vbscript rather than visual basic, the lower bound will always be zero. both of these parts go into the <head> section of an html page. the third part is the javascript code that goes in the <body> section to run the other two parts. ...
...nto the <head> section of an html page. the third part is the javascript code that goes in the <body> section to run the other two parts. ...
... next next createvbarray = a end function --> </script> <script
type="text/javascript"> <!-- function vbarraytest(vba){ var i; var a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { s += "the lower bound of dimension "; s += i + " is "; s += a.lbound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script
type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards. not supported in windows 8.x store apps. applies to: vbarray object ...
VBArray.toArray - Archive of obsolete content
mple the following example consists of three parts. the first part is vbscript code to create a visual basic safe array. the second part is javascript code that converts the visual basic safe array to a javascript array. both of these parts go into the <head> section of an html page. the third part is the javascript code that goes in the <body> section to run the other two parts. ...
...e javascript code that goes in the <body> section to run the other two parts. ...
...not supported in windows 8.x store apps. applies to: vbarray object ...
VBArray.ubound - Archive of obsolete content
sts of three parts. the first part is vbscript code to create a visual basic safe array. the second part is javascript code that determines the number of dimensions in the safe array and the upper bound of each dimension. both of these parts go into the <head> section of an html page. the third part is the javascript code that goes in the <body> section to run the other two parts. ...
...nto the <head> section of an html page. the third part is the javascript code that goes in the <body> section to run the other two parts. ...
...next next createvbarray = a end function --> </script> <script
type="text/javascript"> <!-- function vbarraytest(vba) { var i; var a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { s += "the upper bound of dimension "; s += i + " is "; s += a.ubound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script
type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards. not supported in windows 8.x store apps. applies to: vbarray object ...
Object.unobserve() - Archive of obsolete content
his reference will be used to unset the previous observer. it's useless to call object.unobserve() with an anonymous function as callback, it will not remove any observer. ...
...strawman proposal specification. ...
...strawman proposal specification. ...
XForms Select Element - Archive of obsolete content
fined items can be specified by either item (see the spec) 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. accesskey - 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 propertie...
... 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 - see corresponding attribute
type restrictions the select element can be bound to a node containing simple content capable of holding a sequence. the data binding restriction to simple content may be relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms model. the relaxation happens when the itemset element specifies the item value using a copy (see spec) element. this is becau...
...entations the xforms select element can be represented by the following widgets for the specified appearance attribute values: list - default representation (xhtml/xul) check group- used when appearance = 'full' (xhtml/xul) list displaying a listbox is the default representation (xhtml/xul). characteristics analogous widgets are <html:select size="5" multiple="true"/> and <xul:listbox sel
type="multiple"/> visual grouping by choices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. loses focus), otherwise it is updated upon item selection check group the select is represented as group of checkboxes (xhtml/xul). characteristics appearance attribute contains the value full there are no analogue wi...
XForms Upload Element - Archive of obsolete content
introduction provides a means for the user to select a file (see the spec) from the file system. a filter can be specified to limit the
types of 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 media
type attribute directly on the upload element or by placing a media
type element (see the spec) as a direct child of the upload element. attributes ui common appearance - isn't supported. accesskey - used to specify the keyboard shortcut for focusing this control. ...
...des disallowed (filtered) file
types. the xforms author can set the filter by using the media
type attribute directly on the upload element or by placing a media
type element (see the spec) as a direct child of the upload element. attributes ui common appearance - isn't supported. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special media
type - 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 three widgets: a text field that shows the uri of the selected file, a button to open the file picker dialog whic...
...om one of these. ...
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
lating the behavior in some cases. fortunately, the behavior can be overcome in all cases with a single css2 rule. tables and inheritance in css terms, tables are like any other element when it comes to inheritance. if a css property can be inherited, then table elements and their components (tr, td, etc.) should inherit just as any other element would. for example, if an author writes: <style
type="text/css"> body {font-size: 11px;} </style> ...then the text inside table cells should also be 11 pixels in size. browsers from the version-four era, however, treated tables differently. in these browsers, a table's text would be the same size as the user's default settings, regardless of the css assigned to ancestor elements such as body. this represented a violation of css inheritance rules,...
...xt inside table cells should also be 11 pixels in size. browsers from the version-four era, however, treated tables differently. in these browsers, a table's text would be the same size as the user's default settings, regardless of the css assigned to ancestor elements such as body. this represented a violation of css inheritance rules, and led many authors to create workarounds such as: <style
type="text/css"> body, table, td {font-size: 11px;} </style> recreating legacy behavior to avoid "breaking" older pages that were authored with old-browser behaviors in mind, mozilla and related browsers will mimic old browsers when in "quirks" mode. to do this, the gecko rendering engine uses the following rule in the quirk.css user agent file: /* quirk: cut off all font inheritance in tables and ...
...e rule in quirk.css and thus allow the author to have reliable inheritance of font styles into tables when in "quirks" mode. it is also fully valid css2 and so will validate without incident. recommendations in situations where authors must put a document into "quirks" mode but wish to enforce correct font inheritance into tables, use the demonstrated rule. related resources mozilla's doc
type sniffing original document information author(s): eric a. meyer, netscape communications last updated date: published 26 nov 2002 copyright information: copyright © 2001-2003 netscape. all rights reserved. note: this reprinted article was originally part of the devedge site. ...
RDF in Mozilla FAQ - Archive of obsolete content
s". 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 datasources. the table is keyed ...
... <rule> <query>...</query> <binding>...</binding> <action> <text value="?some-variable" /> </action> </rule> </template> the above template will create a content model that runs a series of text nodes together. troubleshooting tricks and tips from the field. my rdf/xml file won't load. the most common cause for rdf/xml not to load from a web server is incorrect mime
type. make sure your server is delivering the file as text/xml (recommended) or text/rdf (bogus). note that the w3c rdf core wg are registering application/rdf+xml, though this isn't understood by any mozilla code yet. (do we have a bug registered to track this? -- danbri) another possible problem: for remotely-loaded xul and rdf, you might need to adjust mozilla's security restrictions (see belowfo...
...recommended) or text/rdf (bogus). note that the w3c rdf core wg are registering application/rdf+xml, though this isn't understood by any mozilla code yet. (do we have a bug registered to track this? -- danbri) another possible problem: for remotely-loaded xul and rdf, you might need to adjust mozilla's security restrictions (see belowfor example code). if xul isn't loading your rdf, and the mime
type is ok, this could well be your problem. you can use the rdfcat and rdfpoll utilities to verify that the rdf/xml is actually valid. both of these programs are built by default on windows, and on linux when the configure --enable-tests is specified. rdfcat url takes as a parameter a url from which to read an rdf/xml file, and will "cat" the file back to the console. you can use it to verify t...
bootstrap.js - Extensions
he extension is shut down. for more information, see bootstrapped extensions. the example below contains the required methods in vsdoc format. ...
... /// reason
types: /// app_startup /// addon_enable /// addon_install /// addon_upgrade /// addon_downgrade } function shutdown(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason
types: /// app_shutdown /// addon_disable /// addon_uninstall /// addon_upgrade /// addon_downgrade } function install(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason
types: /// ...
...llpath /// nsiuri resourceuri /// /// reason
types: /// addon_install /// addon_upgrade /// addon_downgrade } function uninstall(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason
types: /// addon_uninstall /// addon_upgrade /// addon_downgrade } ...
2D collision detection - Game development
rectangle to rectangle, rectangle to circle, circle to circle). generally you will have a simple generic shape that covers the entity known as a "hitbox" so even though collision may not be pixel perfect, it will look good enough and be performant across multiple entities. this article provides a review of the most common techniques used to provide collision detection in 2d games. axis-aligned bounding box one of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. the algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. ...
... 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! } rect code <div id="cr-stage"></div> <p>move the rectangle with arrow keys. ...
...raries. 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. ...
Tiles and tilemaps overview - Game development
handle tilemaps into the same data structure or object. these data objects (map object example) should include: tile size: the size of each tile in pixels across / pixels down. image atlas: the image atlas that will be used (one or many.) map dimensions: the dimensions of the map, either in tiles across / tiles down, or pixels across / pixels down. visual grid: includes indices showing what
type of tile should be placed on each position in the grid. logic grid: this can be a collision grid, a path-finding grid, etc., depending on the
type of game. note: for the visual grid, a special value (usually a negative number, 0 or null) is needed to represent empty tiles. square tiles square-based tilemaps are the most simple implementation. a more generic case would be rectangular-based t...
...rmance. you can read more about implementing scrolling tilemaps and see some example implementations in square tilemaps implementation: scrolling maps. layers the visual grid is often made up of several layers. this allows us to have a richer game world with less tiles, since the same image can be used with different backgrounds. for instance, a rock that could appear on top of several terrain
types (like grass, sand or brick) could be included on it's own separate tile which is then rendered on a new layer, instead of several rock tiles, each with a different background terrain. if characters or other game sprites are drawn in the middle of the layer stack, this allows for interesting effects such as having characters walking behind trees or buildings. the following screenshot shows an e...
...ackground terrain. if characters or other game sprites are drawn in the middle of the layer stack, this allows for interesting effects such as having characters walking behind trees or buildings. the following screenshot shows an example of both points: a character appearing behind a tile (the knight appearing behind the top of a tree) and a tile (the bush) being rendered over different terrain
types. the logic grid since tilemaps are an actual grid of visual tiles, it is common to create a mapping between this visual grid and a logic grid. the most common case is to use this logic grid to handle collisions, but other uses are possible as well: character spawning points, detecting whether some elements are placed together in the right way to trigger a certain action (like in tetris or be...
Dynamic typing - MDN Web Docs Glossary: Definitions of Web-related terms
dynamically-
typed languages are those (like javascript) where the interpreter assigns variables a
type at runtime based on the variable's value at the time. ...
... dynamically-
typed languages are those (like javascript) where the interpreter assigns variables a
type at runtime based on the variable's value at the time. ...
... dynamically-
typed languages are those (like javascript) where the interpreter assigns variables a
type at runtime based on the variable's value at the time. ...
Organizing your CSS - Learn web development
tions in your stylesheet it is a good idea to have all of the common styling first in the stylesheet. this means all of the styles which will generally apply unless you do something special with that element. you will typically have rules set up for: body p h1, h2, h3, h4, h5 ul and ol the table properties links in this section of the stylesheet we are providing default styling for the
type on the site, setting up a default style for data tables and lists and so on. /* || general styles */ body { ... } h1, h2, h3, h4 { ... } ul { ... } blockquote { ... } after this section we could define a few utility classes, for example a class that removes the default list style for lists we're going to display as flex items or in some other way. if you have a few things you know you will...
... the block it is in. a modifier is a flag on a block or element that changes the styling or behavior. you will be able to recognise code that uses bem due to the extensive use of dashes and underscores in the css classes. for example, look at the classes applied to this html from the page about bem naming conventions: <form class="form form--theme-xmas form--simple"> <input class="form__input"
type="text" /> <input class="form__submit form__submit--disabled"
type="submit" /> </form> the additional classes are similar to those used in the oocss example, however they use the strict naming conventions of bem. bem is widely used in larger web projects and many people write their css in this way. it is likely that you will come across examples, even in tutorials, that use bem syntax,...
...t in css, see the learn css layout section. you should also now have the skills to explore the rest of the mdn css material. you can look up properties and values, explore our css cookbook for patterns to use, and read more in some of the specific guides such as our guide to css grid layout. ...
Styling tables - Learn web development
make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer. next, create a new file called style.css and save it in the same directory as your other files. ...
...e for a table about punk bands. you can go there and find a different one if you like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones google fonts gives you. ...
...ething else to occupy our time. the next article explores debugging css — how to solve problems such as layouts not looking like they should, or properties not applying when you think they should. this includes information on using browser devtools to find solutions to your problems. ...
What is the difference between webpage, website, web server, and search engine? - Learn web development
tive learning there is no active learning available yet. deeper dive so, let's dig deeper into how those four terms are related and why they are sometimes confused with each other. web page a web page is a simple document displayable by a browser. such documents are written in the html language (which we look into in more detail in other articles). a web page can embed a variety of different
types of resources such as: style information — controlling a page's look-and-feel scripts — which add interactivity to the page media — images, sounds, and videos. note: browsers can also display other documents such as pdf files or images, but the term web page specifically refers to html documents. otherwise, we only use the term document. all web pages available on the web are reac...
...lling a page's look-and-feel scripts — which add interactivity to the page media — images, sounds, and videos. note: browsers can also display other documents such as pdf files or images, but the term web page specifically refers to html documents. otherwise, we only use the term document. all web pages available on the web are reachable through a unique address. ...
...such a website is sometimes called a single-page website. ...
How do I use GitHub Pages? - Learn web development
typical website, e.g. with the primary entry point being an html file called index.html. the other thing you need to do before moving on is to initialise your code directory as a git repository. to do this: point the command line to your test-site directory (or whatever you called the directory containing your website). for this, use the cd command (i.e. "change directory"). ...
...y as a git repository. to do this: point the command line to your test-site directory (or whatever you called the directory containing your website). for this, use the cd command (i.e. "change directory"). here's what you'd
type if you've put your website in a directory called test-site on your desktop: cd desktop/test-site when the command line is pointing inside your website directory,
type the following command, which tells the git tool to turn the directory into a git repository: git init an aside on command line interfaces the best way to upload your code to github is via the command line — this is a window where you
type in commands to do things like create files and run programs, rather than clicking inside a user interface. it will look something like this: note: ...
...es to github on the current page, you are interested in the section …or push an existing repository from the command line. you should see two lines of code listed in this section. copy the whole of the first line, paste it into the command line, and press enter. the command should look something like this: git remote add origin https://github.com/chrisdavidmills/my-repository.git next,
type the following two commands, pressing enter after each one. these prepare the code for uploading to github, and ask git to manage these files. git add --all git commit -m 'adding my files to my repository' finally, push the code up to github by going to the github web page you're on and entering into the terminal the second of the two commands we saw the …or push an existing repository from...
HTML basics - Learn web development
its purpose is to embed an image in the html page in the place it appears. anatomy of an html document that wraps up the basics of individual html elements, but they aren't handy on their own. now we'll look at how individual elements are combined to form an entire html page. ...
...ividual elements are combined to form an entire html page. let's revisit the code we put into our index.html example (which we first met in the dealing with files article): <!doc
type html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="images/firefox-icon.png" alt="my test image"> </body> </html> here, we have the following: <!doc
type html> — the doc
type. it is required preamble. in the mists of time, when html was young (around 1991/92), doc
types were meant to act as links to a set of rules that the html page had to follow to be considered good html, which could mean automatic error checking and other useful things. however these days, they don't do much, and are basically just needed to make sure your document behaves corr...
...equently when marking up regular text content: <p>this is a single paragraph</p> add your sample text (you should have it from what should your website look like?) into one or a few paragraphs, placed directly below your <img> element. lists a lot of the web's content is lists and html has special elements for these. marking up lists always consist of at least 2 elements. the most common list
types are ordered and unordered lists: unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. these are wrapped in a <ul> element. ordered lists are for lists where the order of the items does matter, such as a recipe. these are wrapped in an <ol> element. each item inside the lists is put inside an <li> (list item) element. for example, if we wanted...
Document and website structure - Learn web development
and <div> elements. sidebar: <aside>; often placed inside <main>. footer: <footer>. active learning: exploring the code for our example our example seen above is represented by the following code (you can also find the example in our github repository). we'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. ...
...ode (you can also find the example in our github repository). we'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. ...
... pages of our website --> <header> <h1>header</h1> </header> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">our team</a></li> <li><a href="#">projects</a></li> <li><a href="#">contact</a></li> </ul> <!-- a search form is another commmon non-linear way to navigate through a website. --> <form> <input
type="search" name="q" placeholder="search query"> <input
type="submit" value="go!"> </form> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. donec a diam lectus. set sit amet ipsum mauris. maecenas congue ligu...
Adding vector graphics to the Web - Learn web development
u how to include one in your webpage. prerequisites: you should know the basics of html and how to insert an image into your document. objective: learn how to embed an svg (vector) image into a webpage. note: this article doesn't intend to teach you svg; just what it is, and how to add it to web pages. what are vector graphics? on the web, you'll work with two
types of image — raster images, and vector images: raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be. popular web raster formats include bitmap (.bmp), png (.png), jpeg (.jpg), and gif (.gif.) vector images are defined using algorithms — a vector image file contains...
... <rect width="100%" height="100%" fill="red" /> <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> <polygon points="120,0 240,225 0,225" fill="green"/> <text x="50" y="100" font-family="verdana" font-size="55" fill="white" stroke="black" stroke-width="2"> hello! ...
... <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> <polygon points="120,0 240,225 0,225" fill="green"/> <text x="50" y="100" font-family="verdana" font-size="55" fill="white" stroke="black" stroke-width="2"> hello! ...
Making asynchronous programming easier with async and await - Learn web development
se.all() call to get all the results returned into a variable in a way that looks like simple synchronous code. again, let's return to an example we saw in our previous article. keep it open in a separate tab so you can compare and contrast with the new version shown below. ...
...vious article. keep it open in a separate tab so you can compare and contrast with the new version shown below. ...
...trast with the new version shown below. ...
What is JavaScript? - Learn web development
nt.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updatename() code block (lines 5–8) is run. the updatename() code block (these
types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display. if you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console —
typeerror: para is undefined. this means that the para object does not exist yet, so we can...
...ters actually use a technique called just-in-time compiling to improve performance; the javascript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. however, javascript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time. there are advantages to both
types of language, but we won't discuss them right now. server-side versus client-side code you might also hear the terms server-side and client-side code, especially in the context of web development. client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. in this module we are expli...
... html and css, it is possible to write comments into your javascript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). comments are very useful, and you should use them often, particularly for larger applications. there are two
types: a single line comment is written after a double forward slash (//), e.g. // i am a comment a multi-line comment is written between the strings /* and */, e.g. /* i am also a comment */ so for example, we could annotate our last demo's javascript with comments like so: // function: creates a new paragraph and appends it to the bottom of the html body. function createparagraph...
JavaScript object basics - Learn web development
ey are inside objects.) let's work through an example to understand what they look like. to begin with, make a local copy of our oojs.html file. this contains very little — a <script> element for us to write our source code into. we'll use this as a basis for exploring basic object syntax. while working with this example you should have your developer tools javascript console open and ready to
type in some commands. as with many things in javascript, creating an object often begins with defining and initializing a variable. try entering the following line below the javascript code that's already in your file, then saving and refreshing: const person = {}; now open your browser's javascript console, enter person into it, and press enter/return. you should get a result similar to one of th...
...e completely new members. try these in the js console: person['eyes'] = 'hazel'; person.farewell = function() { alert("bye everybody!"); } you can now test out your new members: person['eyes'] person.farewell() one useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. let's say we wanted users to be able to store custom value
types in their people data, by typing the member name and value into two text inputs. we could get those values like this: let mydataname = nameinput.value; let mydatavalue = namevalue.value; we could then add this new member name and value to the person object like this: person[mydataname] = mydatavalue; to test this, try adding the following lines into your code, just below the closing curly bra...
...riables and functions that have the same names. objects let us keep the information safely locked away in their own package, out of harm's way. ...
Aprender y obtener ayuda - Learn web development
d wanders, you suddenly make a connection between tool a and tool b, and realize that you can use them together to fix problem c! it isn't always this simple, but it is also surprising how many times this does happen. this also highlights the importance of taking regular breaks when you are studying in front of the computer. different learning materials it is also worth looking at the different
types of learning materials that are available, to see which ones are most effective for you to learn with. textual articles you'll find a lot of written articles on the web to teach you about web design. like most of this course, for example. some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "learn the css ...
... course, for example. some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "learn the css box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the css background property"?) mdn web docs is very good for both
types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember. there are also several other great resources on the web, some of which we'll mention below. note: the above text should have given you an important fact — you aren't expected to remember everything! professi...
... if you are a complete beginner to web development, you'll have to do some study and web searches and lookup solutions to such problems. if you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of the syntax that you forgot since then. when you find solutions to such problems, it ...
Web performance resources - Learn web development
absolute timing, but user perception. quick wins css web performance is all about user experience and perceived performance. as we learned in the critical rendering path document, linking css with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. optimize the rendering of your page by removing blocking css. to load css asynchronously one can simpy set the media
type to print and then change to all once loaded. the following snippet includes an onload attribute, requiring javascript, so it is important to include a noscript tag with a traditional fallback. <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of ...
...rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling. these styles will improve perceived performance as the css does not require a file request. <style
type="text/css"> // insert your css here </style> javascript avoid javascript blocking by using the async or defer attributes, or link javascript assets after the page's dom elements. javascript only block rendering for elements that appear after the script tag in the dom tree. web fonts eot and ttf formats are not compressed by default. apply compression such as gzip or brotli for these file typ...
...arkup to avoid http requests. tools learn to use the firefox dev tools to profile your site. pagespeed insights can analyze your page and give some general hints to improve performance. lighthouse can give you a detailed breakdown of many aspects of your site including performance, seo and accessibility. test your page's speed using webpagetest.org, where you can use different real device
types and locations. try the chrome user experience report which quantifies real user metrics. define a performance budget. apis gather user metrics using https://github.com/akamai/boomerang or directly gather with window.performance.timing things not to do (bad practices) download everything use uncompressed media files ...
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
st of incomplete todos. finally, we need to make use of this new functionality in our footer.hbs template. go to this file now. first of all, replace this line: <strong>0</strong> todos left with this, which populates the incomplete number with the length of the incomplete array: <strong>{{this.todos.incomplete.length}}</strong> todos left next, replace this: <button
type="button" class="clear-completed"> with this: <button
type="button" class="clear-completed" {{on 'click' this.todos.clearcompleted}}> so now when the button is clicked, the clearcompleted() action we added earlier is run. however, if you try to click the "clear completed" button now, it won't appear to do anything, because there is currently no way to "complete" a todo. we need to wire ...
...d on the todo service is invoked. in todo.hbs, first find the following line: <li> and replace it with this — you'll notice that here we're using some more conditional content to add the class value if appropriate: <li class="{{ if @todo.iscompleted 'completed' }}"> next, find the following line: <input aria-label="toggle the completion of this todo" class="toggle"
type="checkbox" > and replace it with this: <input class="toggle"
type="checkbox" aria-label="toggle the completion of this todo" checked={{ @todo.iscompleted }} {{ on 'change' (fn this.todos.togglecompletion @todo) }} > note: the above snippet uses a new ember-specific keyword — fn. fn allows for partial application, which is similar to bind, but it never changes the invocatio...
... vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores
typescript support in svelte deployment and next steps ...
Accessibility in React - Learn web development
editbuttonref = useref(null); these refs have a default value of null because they will not have value until we attach them to their respective elements. to do that, we'll add an attribute of ref to each element, and set their values to the appropriately named ref objects. ...
...to do that, we'll add an attribute of ref to each element, and set their values to the appropriately named ref objects. the textbox <input> in your editing template should be updated like this: <input id={props.id} classname="todo-text"
type="text" value={newname} onchange={handlechange} ref={editfieldref} /> the "edit" button in your view template should read like this: <button
type="button" classname="btn" onclick={() => setediting(true)} ref={editbuttonref} > edit <span classname="visually-hidden">{props.name}</span> </button> focusing on our refs with useeffect to use our refs for their intended purpose, we need to import another react hook: useeffect(). useeffect() is so named because it runs after react renders a given component, and will run any side-effects ...
... vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores
typescript support in svelte deployment and next steps ...
Focus management with Vue refs - Learn web development
ref in a component, you add a ref attribute to the element that you want to access, with a string identifier for the value of the attribute. it's important to note that a ref needs to be unique within a component. no two elements rendered at the same time should have the same ref. adding a ref to our app so, let's attach a ref to our "edit" button in todoitem.vue. update it like this: <button
type="button" class="btn" ref="editbutton" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> to access the value associated with our ref, we use the $refs property provided on our component instance. to see the value of the ref when we click our "edit" button, add a console.log() to our toggletoitemeditform() method, like so: toggletoitemeditform() { ...
... nice diagram for visualizing when these hooks happen. this article from the digital ocean community blog dives into the lifecycle methods more deeply. now that we’ve gone over the lifecycle methods, let's use one to trigger focus when our todoitemeditform component is mounted. in todoitemeditform.vue, attach ref="labelinput" to the <input> element, like so: <input :id="id" ref="labelinput"
type="text" autocomplete="off" v-model.lazy.trim="newname" /> next, add a mounted() property just inside your component object — note that this should not be put inside the methods property, but rather at the same hierarchy level as props, data(), and methods. lifecycle methods are special methods that sit on their own, not alongside the user-defined methods. this should take no inputs. note that y...
... vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores
typescript support in svelte deployment and next steps ...
Rendering a list of Vue components - Learn web development
tor there's one little bit of refactoring we can do here. instead of generating the id for the checkboxes inside your todoitem component, we can turn the id into a prop. while this isn't strictly necessary, it makes it easier for us to manage since we already need to create a unique id for each todo item anyway. add a new prop to your todoitem component — id. ...
...nd make its
type a string. to prevent name collisions, remove the id field from your data attribute. you are no longer using uniqueid, so you need to remove the import uniqueid from 'lodash.uniqueid'; line, otherwise your app will throw an error. the <script> contents in your todoitem component should now look something like this: export default { props: { label: {required: true,
type: string}, done: {default: false,
type: boolean}, id: {required: true,
type: string} }, data() { return { isdone : this.done, } }, } now, over in your app.vue component, pass item.id as a prop to the todoitem component. your app.vue template should now look like this: <template> <div id="app"> <h1>my to-do list</h1> <ul> <li ...
... vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores
typescript support in svelte deployment and next steps ...
Introduction to automated testing - Learn web development
est to make this directory an npm project, you just need to go inside your test directory and initialize it, with the following: cd node-test npm init this second command will ask you many questions to find out the information required to set up the project; you can just select the defaults for now. once all the questions have been asked, it will ask you if the information entered is ok.
type yes and press enter/return and npm will generate a package.json file in your directory. this file is basically a config file for the project. you can customize it later, but for now it'll look something like this: { "name": "node-test", "version": "1.0.0", "description": "test for npm projects", "main": "index.js", "scripts": { "test": "test" }, "author": "chris mills", "li...
...src/*.html', ['html']); gulp.watch('src/*.css', ['css']); gulp.watch('src/*.js', ['js']); }); now try entering the gulp watch command into your terminal. gulp will now watch your directory, and run the appropriate tasks whenever you save a change to an html, css, or javascript file. note: the * character is a wildcard character — here we're saying "run these tasks when any files of these
types are saved. you could also use wildcards in your main tasks, for example gulp.src('src/*.css') would grab all your css files and then run piped tasks on them. note: one problem with our watch command above is that our csslint/autoprefixer combination throws full-blown errors when a css error is encountered, which stops the watch working. you'll have to restart the watch once a css error is enc...
...bs getting started with sauce labs let's get started with a sauce labs trial. create a sauce labs trial account. sign in. this should happen automatically after you verify your e-mail address. the basics: manual tests the sauce labs dashboard has a lot of options available on it. for now, make sure you are on the manual tests tab. click start a new manual session. in the next screen,
type in the url of a page you want to test (use http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html, for example), then choose a browser/os combination you want to test by using the different buttons and lists. there is a lot of choice, as you'll see! when you click start session, a loading screen will then appear, which spins up a virtual machine running th...
Introducing a complete toolchain - Learn web development
ree stages of tools as we talked about in chapter 1, the toolchain will be structured into the following phases: safety net: making the software development experience stable and more efficient. we might also refer to this as our development environment. transformation: tooling that allows us to use the latest features of a language (e.g. javascript) or another language entirely (e.g. jsx or
typescript) in our development process, and then transforms our code so that the production version still runs on a wide variety of browsers, modern and older. post development: tooling that comes into play after you are done with the body of development to ensure that your software makes it to the web and continues to run. in this case study we'll look at adding tests to your code, and deploying you...
...in older browsers). you can find more about configuring prettier in its documentation. next up, we’ll configure eslint — create another file in the root of your will-it-miss directory called .eslintrc.json, and give it the following contents: { "env": { "es6": true, "browser": true }, "extends": "eslint:recommended", "parseroptions": { "ecmaversion": 6, "source
type": "module" }, "rules": { "no-console": 0 } } the above eslint configuration says that we want to use the "recommended" eslint settings, that we're going to allow usage of es6 features (such as map() or set()), that we can use module import statements, and that using console.log() is allowed. however, in the project's source files we are using react jsx syntax (for your real pro...
...h the current configuration, so we'll need to add a little more configuration to the eslint settings to get it to accept jsx features. the final config file should look like this — add in the bolded parts and save it: { "env": { "es6": true, "browser": true }, "extends": ["eslint:recommended", "plugin:react/recommended"], "parseroptions": { "ecmaversion": 6, "source
type": "module", "ecmafeatures": { "jsx": true } }, "plugins": ["react"], "rules": { "semi": "error", "no-console": 0, "react/jsx-uses-vars": "error" } } as the configuration now uses a plugin called "react", this development dependency also needs to be installed, so that the code is there to actually run that part of the linting process. run the following te...
Tools and testing - Learn web development
keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the web, and be usable by people with disabilities. working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what
types of tool are available, what they can do for you, and how to make use of the current industry favourites. note: we have referenced a number of tools in this topic, not because we endorse them or think they are the best, but because we know they work and have good industry support. in most cases there are other tools available, old ones will go out of fashion, and new ones will no doubt appear. ...
...ks, or writing tests and running them against your code using test runners. in addition, you should start with the first module in this topic, which gives a useful overview of the general area. modules understanding client-side web development tools client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool
types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. we finish up by providing a complete toolchain example showing you how to get productive. understanding client-side javascript frameworks javascript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools ...
...ng with them. this module aims to teach you what you need to know about both of them. cross browser testing this module looks specifically at the area of testing web projects across different browsers. here we look at identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about testing, the main issues that you'll face with different
types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing. ...
Mozilla accessibility architecture
for example, nshtmltablecellframe::getaccessible() will eventually call nsiaccessibilityservice::...
......
...s what accessible node the event occured on. table of gecko event to accessible event translation accessible documents listen for dom events on nodes within them, and consequently fire the appropriate accessible event. this happens in the handleevent() method. note: this chart is not complete, consult the handleevent() method to see the rest. ...
Creating a spell check dictionary add-on
f the install.rdf file. you can create and edit it with a plain text editor such as notepad. ...
...l.rdf file. you can create and edit it with a plain text editor such as notepad. ...
...u may need to choose another id, that follows the rules of em:id. if you update an existing dictionary add-on, you must keep the existing em:id, or your users will not be updated to the latest version. the em:version should follow the rules of mozilla add-on version numbers, and if you update an existing dictionary add-on, the new version number must be greater than the old one. don't change em:
type or em:unpack, and don't add a em:bootstrap element.
type = 64 indicates that the add-on is in the restartless format, and unpack is required for hunspell to read the dictionary. although the restartless format for dictionary add-ons were introduced in gecko 10, dictionary updates only works starting from gecko 18. the em:minversion should therefore be the same as in the example above (or greater...
Debugging on Mac OS X
the source files under the project directory rather than link to them (still the case in xcode 10?) which breaks debugging and the possibility to modify-rebuild-relaunch from inside xcode. these steps were last updated for xcode 10.3: open xcode, and create a new project with file > new project. select the "cross-platform" tab then under the "other" template group select the "empty" project
type. the click next. name the project and click next. create/select a temporary directory to contain the project and then click create. before going any further, close the project (file > close project) and open finder. find the *.xcodejproj directory in the temporary directory, move it into your mozilla source tree, and then double-click on it to reopen it. in the left-hand pane in xcode you shoul...
...mended to create a separate profile to debug with, whatever your task, so that you don't lose precious data like bookmarks, saved passwords, etc. so that you're not bothered with the profile manager every time you start to debug, expand the "executables" branch of the "groups & files" list and double click on the executable you added for mozilla. click the plus icon under the "arguments" list and
type "-p <profile name>" (e.g. "-p mozilladebug"). close the window when you're done. running a debug session make sure breakpoints are active (which implies running under the debugger) by opening the product menu and selecting "debug / activate breakpoints" (also shown by the "breakpoints" button in the top right section of the main window). then click the "run" button or select "run" from the prod...
... them. if you don't include the mozilla's .lldbinit, you must at least put settings set target.inline-breakpoint-strategy always in your $home/.lldbinit as recommended on debugging mozilla with lldb. using mozilla-specific lldb commands if you included the .lldbinit when setting up lldb, you can use mozilla-specific lldb commands in the console, located in the debug area of xcode. for example,
type js to see the javascript stack. for more information, see debugging mozilla with lldb. debugging e10s child processes using xcode to debug child processes created by an e10s-enabled browser is a little trickier than debugging a single-process browser, but it can be done. these directions were written using xcode 6.3.1 complete all the steps above under "creating the project" from the "produ...
How Mozilla's build system works
ology of the build system and how to do common tasks such as compiling components and creating jar files. for many developers, typing mach build to build the tree is sufficient to work with the source tree. this document explains how the build system works. note: this document is not intended for developers who just want to build mozilla. for that, see the build documentation. phases when you
type mach build to build the tree, three high-level phases occur within the build system: system detection and validation preparation of the build backend invocation of the build backend phase 1: configure phase 1 centers around the configure script. the configure script is a bash shell script. the file is generated from a file called configure.in, which is written in m4 and processed using au...
...components are not linked against by any other library. non-component shared libraries include libraries such as libxpcom and libmozjs. these libraries are installed to dist/bin and are linked against. you will probably not need to create a new librar...
...ries that are built in mozilla: components are shared libraries (except in static builds), which are installed to dist/bin/components. components are not linked against by any other library. non-component shared libraries include libraries such as libxpcom and libmozjs. these libraries are installed to dist/bin and are linked against. you will probably not need to create a new library of this
type. static libraries are often used as intermediate steps to building a shared library, if there are source files from several directories that are part of the shared library. static libraries may also be linked into an executable. non-component shared libraries a non-component shared library is useful when there is common code that several components need to share and sharing it through xpcom i...
Creating Custom Events That Can Pass Data
la/content/events/src/nseventdispatcher.cpp note: in the mozilla 1.8.x branch this code is actually in mozilla/content/events/src/nseventlistenermanager.cpp this is quite an important file since this holds the createevent method which acts as a factory method dom events. the change you want to make is in nseventdispatcher::createevent(). ...
...om events. the change you want to make is in nseventdispatcher::createevent(). ...
...your event in order for your event to work you must do the following: create a scriptable interface called nsidom{youreventname} inheriting from nsidomevent. a good place to put this .idl is in mozilla/dom/public/idl/events/. ...
Process scripts
.getservice(ci.nsiprocessscriptloader); ppmm.loadprocessscript("chrome://whatever/process-script.js", true); ppmm.addmessagelistener("hello", function(msg) { ... }); the process script's global is a child process message manager, which enables the process script to receive messages from the chrome side, and to send messages to the chrome side: // process-script.js if (services.appinfo.process
type == services.appinfo.process_
type_content) { dump("welcome to the process script in a content process"); } else { dump("welcome to the process script in the main process"); } // message is sent using contentprocessmessagemanager sendasyncmessage("hello"); in this example, the dump() statement will run once in each content process as well as in the main process. this example also figures out ...
...a content process"); } else { dump("welcome to the process script in the main process"); } // message is sent using contentprocessmessagemanager sendasyncmessage("hello"); in this example, the dump() statement will run once in each content process as well as in the main process. this example also figures out whether it is running in the chrome or in a content process by looking at the process
type in services.appinfo. in just about every respect, using process scripts is like using frame scripts: you can pass the allowdelayedload to loadprocessscript(). if you do, you must call removedelayedprocessscript() when your extension is disabled or removed the message-passing apis are the same: sendasyncmessage() is available in both directions, while sendsyncmessage() is available from conte...
... manager, e.g. if responses should be processed by a frame script instead of the process script. this can be achieved by traversing the docshell tree up to the top window and then retrieving its content message manager, as follows: function contentmmfromcontentwindow(window) { let tree = window.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidocshelltreeitem); let top = tree.same
typeroottreeitem; let iface = queryinterface(ci.nsidocshell).queryinterface(ci.nsiinterfacerequestor); return iface.getinterface(ci.nsicontentframemessagemanager); } this is intended for unprivileged pages running in a content process. chrome-privileged pages or things running in the parent process may require special treatment. if the above doesn't work try this: function contentmmfromconte...
mozbrowsermetachange
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 mozbrowsermetachange event is fired when a <meta> element related to web applications is added, removed or changed. see below for the applicable
types. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property
type description target read only eventtarget the browser iframe
type read only domstring the
type of event. bubbles read only boolean whether the event normally bubbl...
... details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: name a domstring representing the <meta> name attribute value. this can be viewmode, theme-color, theme-group, or application-name. content a domstring representing the <meta> content attribute value, i.e. the content of the meta tag.
type a domstring representing the
type of meta change that this event object represents. this can be added, changed, removed, or undefined. lang optional a domstring representing the <meta> name attribute value, if included. if not included, the value returned is undefined. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermetachange", function(event) {...
...t this event object represents. this can be added, changed, removed, or undefined. lang optional a domstring representing the <meta> name attribute value, if included. if not included, the value returned is undefined. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermetachange", function(event) { console.log("a meta tag has been " + event.details.
type + ". its name is " + event.details.name + ", and its content is " + event.details.content + "."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswo...
HTML parser threading
managed as follows: attribute holders (nshtml5htmlattributes objects) are allocated using new by the tokenizer. the tree builder either transfers an attribute holder to a tree op whose destructor explicitly deletes the attribute holder or if the tree builder ends up ignoring an attribute holder, the tree builder deletes the attribute holder explicitly. attribute values, public identifiers (in doc
type) and system identifiers (in doc
type) are heap-allocated nsstring objects (i.e. pointed to by nsstring*!). attribute values nsstrings are deleted by the attribute holder when it gets deleted. public identifiers and system identifiers are deleted by the tree op or by the portable parser core if they don't make it as far a tree op. the backing nsstringbuffers are thread-safely refcounted appropriate...
...nd system identifiers are deleted by the tree op or by the portable parser core if they don't make it as far a tree op. the backing nsstringbuffers are thread-safely refcounted appropriately when the nsstring goes away. (aside: it would make more sense to make the parser deal with nsstringbuffers directly without having heap-allocated nsstrings involved.) element names, attribute names and the doc
type name are represented as nsiatoms. pre-interned attribute and element names hold atoms that are actually app-wide nsstaticatoms. since nsstaticatoms are valid app-wide, these atoms work right app-wide on the main thread. for other atoms, the parser uses nshtml5atom objects that are atomic only within the scope of an nshtml5atomtable. there is one nshtml5atomtable per each nshtml5parser and one per...
...orresponding normal main-thread dynamically-allocated atom has to be obtained for the same string and used instead of the nshtml5atom. nshtml5atom objects are guaranteed to be immutable and to stay alive for the lifetime of the parser instance, so it's safe for the main thread to call their methods (as is necessary to find the corresponding normal atom). references to dom nodes in tree ops are of
type nsicontent** and are called content handles. a handle points to memory allocated by the tree builder and guaranteed to stick around for the life time of the parser. the tree builder never dereferences a content handle. in fact, a content handle won't have an actual node behind it initially. only when the tree op executor executes a node creation tree op, the nsicontent* that points to the node ge...
Getting Started with Chat
rc.mozilla.org and port 6697 or 6667 for your server settings) #qa a channel for qa discussion #developers a channel for mozilla development discussion #sumo a channel for support with firefox for more information about the mozilla irc network and more channels, go here. commands the following is a list of commands you should be familiar with. simply
type them into the message box at the bottom of the screen and press enter: /join #channel joins you to the specified channel until you quit your irc client or quit the channel /leave leave the current channel /mode #channel +k password sets a password for the channel. if #channel is not specified, the command is executed for the current channel. /mode #ch...
...e of the user who wants your attention) /query nickname opens a private chat with the specified user /quit message disconnects you from the current server displaying the message in all connected channels prior to quitting /reload styles some irc clients, colloquy on mac in particular, stop displaying your messages in the channel window. if this happens, you can
type this command to resolve this issue. /server server-name manually connect to a server /topic topic changes the topic of the channel. the topic is a message that displays first when you join a channel. /whois nickname display information about the specified user. this information displays in the server window. for more information about irc commands go her...
...u to register your nickname which prevents other users from using it. nickserv also automatically elevates all registered users to operators when they sign on.the following are some helpful commands which can be used by nickserv: /msg nickserv register password email this registers your nickname with the server. ...
Sqlite.jsm
se that is resolved with a boolean indicating whether the table exists. indexexists(name) this functions determines whether a named index exists in the current database. it returns a promise that is resolved with a boolean indicating whether the index exists. statement execution these apis facilitate execution of statements on the connection. these are arguably the most important apis in this
type. executecached(sql, params, onrow) execute(sql, params, onrow) these similar functions are used to execute a single sql statement on the connection. as you might have guessed by the name, there are 2 flavors: cached and non-cached. other than that, they behave identically. these functions receive the following arguments: sql (required) string sql statement to execute. the trailing semicol...
...be an array of objects describing individual errors. each object has the properties result and message. result is a numeric error code and message is a string description of the problem. if onrow is specified, the returned promise will be resolved with a boolean indicating whether the onrow handler was called. else, the resolved value will be an array of mozistoragerow. executetransaction(func,
type) this function is used to execute a database transaction. a transaction is a series of related statements treated as one functional unit. if the transaction succeeds, all the statements contained within it are committed as one unit. if the transaction fails, the database is rolled back to its state before the transaction started. this function receives the following arguments: func the func...
... database transaction. a transaction is a series of related statements treated as one functional unit. if the transaction succeeds, all the statements contained within it are committed as one unit. if the transaction fails, the database is rolled back to its state before the transaction started. this function receives the following arguments: func the function defining the transaction body.
type the
type of transaction to perform. this must be one of the transaction_* constants on the opened connection instance. valid values are transaction_deferred, transaction_immediate, transaction_exclusive. see the sqlite documentation for their meaning. the default is transaction_deferred. the passed function is a task.jsm compatible generator function. when called, the function receives as its ...
XPCOMUtils.jsm
fine 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 constructor is a simple method that handles any required initialization tasks. function mycomponent() { // initialize the component here } class declaration declare the class proto
type, using a form similar to this. mycomponent.proto
type = { // properties required for xpcom registration: classdescription: "unique text description", classid: components.id("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"), contractid: "@example.com/xxx;1", // [optional] custom factory (an object implementing nsifactory). if not // provided, the default factory is used, which ...
... methods definelazygetter() getter functions in javascript give you a way to define a property of an object, but not calculate the property's value until it is accessed. a getter defers the cost of calculating the value until the value is needed, and if it is never needed, you never...
...i( interfaces ); parameters interfaces an array of interfaces implemented by the component. return value a queryinterface() function implementation. remarks when you implement an interface that inherits from another one, you should generally list all the base interfaces explicitly, except for nsisupports. for example, if your component implements nsistreamconverter: mycomponent.proto
type = { queryinterface: xpcomutils.generateqi([ components.interfaces.nsirequestobserver, components.interfaces.nsistreamlistener, components.interfaces.nsistreamconverter, ]), // ...methods... } importrelative() imports a javascript code module given the calling javascript code module's global object (you should specify this) and a path relative to that module. this lets module...
Bootstrapping a new locale
the next step is to download a copy of the source code to your local system, using mercurial. you will need to "hg clone" the existing release branch for mozilla so you have all the files locally for you to begin localization. make sure to have the directory where you intend to work as the current path 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, seamonkey 2 or other mozilla projects based on gecko 1.9.1 you'll need to follow the instructions on get...
....9.x/toolkit/locales/ ab-cd/toolkit getting started change your directory to the new working directory so you are in the ~/[your working directory]/[ab-cd]/ path and can start localizing. ...
...browser/ ab-cd/dom/ ab-cd/netwerk/ ab-cd/other-licenses/branding/firefox/ ab-cd/security/manager/ ab-cd/toolkit/ translating to start editing, you will need a text editing application. you can choose to use: notepad++ or notepad2 on windows, vim, gedit or kate on gnu/linux, textwrangler on mac os x. (read more about tools at l10n:tools.) after you have downloaded your editor of choice,
type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l10n-drivers. localization notes will look like this: <!-- localization notes... --> after the localization notes, you will see a list of <!
Mozilla Framework Based on Templates (MFBT)
ity in well-named files, such that simply skimming the contents of mfbt/ will quickly suggest the relevant header to examine. therefore this document primarily attempts to direct readers to the correct file to read those comments. feel free to file a documentation bug if you think this approach could be improved, and feel free to make improvements to this document if you see them. functionality
types and
type manipulation standardinteger.h implements the <stdint.h> interface. (the <stdint.h> standard header is not available on all platforms and so cannot be used directly. this header also provides a useful "hook" for embeddings that must customize the
types underlying the fixed-size integer
types.)
types.h includes standardinteger.h and further provides size_t. checkedint.h implements che...
...ypes.h includes standardinteger.h and further provides size_t. checkedint.h implements checked integers. they behave like integers, but safely check for integer overflow and divide-by-zero. useful for input validation. floatingpoint.h provides various operations for examining and working upon double-precision floating point values, and for producing various special floating point values. core
types.h further provides macros to define imported and exported c symbols. attributes.h implements various function and class attribute macros. the function macros control inlining, note whether a function returns, and enforce various c++-related restrictions on inheritance and use. the class macros permit controlling the inheritability of a class. likely.h provides moz_likely and moz_unlikely macro...
...os in implementing runtime assertions and compile-time assertions. guardobjects.h provides macros which can be used to annotate an raii-style guard class, so that any attempt to create an unnamed temporary for it will assert. (an unnamed temporary lives for a shorter period of time than the scope where it's found, so it usually isn't what was desired.) data structures linkedlist.h implements a
type-safe doubly-linked list class. most new code should use this rather than prclist. rangedptr.h implements rangedptr, a smart pointer template whose value may be manipulated only within a range specified at construction time, and which may be dereferenced only at valid locations in that range. this pointer is a useful way to expose access to values within an array. refptr.h implements various sm...
Investigating leaks using DMD heap scan mode
_sandbox=t moz_cc_log_directory=$logdir moz_cc_log_process=content moz_cc_log_thread=main moz_dmd_shutdown_log=$logdir moz_dmd_log_process=tab ./mach run --dmd --mode=scan breaking this down: xpcom_mem_bloat_log=1: this reports a list of the counts of every object created and destroyed and tracked by the xpcom leak tracking system. from this chart, you can see how many objects of a particular
type were leaked through shutdown. this can come in handy during the manual analysis phase later, to get evidence to support your hunches. for instance, if you think that an nsfoo object might be holding your leaking object alive, you can use this to easily see if we leaked an nsfoo object. moz_cc_log_shutdown=1: this generates a cycle collector log during shutdown. creating this log during shutdown ...
...dmd log to be taken very late in xpcom shutdown, and the location for that log to be saved. like with the cc log, we want this log very late to avoid as many non-leaking things as possible. moz_dmd_log_process=tab: as with the cc, this means that we only want these logs in content processes, in order to make shutdown faster. the allowed values here are the same as those returned by xre_getprocess
type(), so adjust as needed. finally, the --dmd option need to be passed in so that dmd will be run. --mode=scan is needed so that when we get a dmd log the entire contents of each block of memory is saved for later analysis. with that command line in hand, you can start firefox. be aware that this may take multiple minutes if you have optimization disabled. once it has started, go through the ste...
... this may take a few seconds. it will eventually produce some output. you'll want to save a copy of this output for later. the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listener
type=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s). known edges: 0x7f08975a24c0 [fragmentorelement (xhtml) head https://www.example.com] --[mattrsandchildren[i]]--> 0x7f0882fe3230 0x7f08967e7b20 [js object (h...
JS::PerfMeasurement
3322) and osx (bug 583323) as well, and we welcome patches for other operating systems. the js::perfmeasurement class, found in jsperf.h, lets you take detailed performance measurements of your code. it is a stopwatch profiler -- that is, it counts events that occur while code of interest is running; it does not do call traces or sampling. ...
...tions of the profiled thread from one cpu core to another these events map directly to "generic events" in the linux 2.6.31+ <linux/perf_event.h> interface, and so unfortunately are a little vague in their specification; for instance, we can't tell you exactly which level of cache you get misses for if you measure cache_misses. we also can't guarantee that all platforms will support all event
types, once we have more than one back end for this interface. here is the complete c++-level api: perfmeasurement::eventmask this is an enumeration defining all of the bit mask values in the above table. you bitwise-or the ones you want together and pass them to the constructor. perfmeasurement::all in a constructor call, this special value means "measure everything that can possibly be measured." ...
...ut make the results available to javascript, you can declare a bare jsval argument in your .idl file and have javascript pass a perfmeasurement object that it created in that argument slot. the jsval you receive points to a javascript wrapper object. to extract the c++-level perfmeasurement object, call this function. it will return null if javascript passed in something with the wrong dynamic
type. jsobject* js::registerperfmeasurement(jscontext* cx, jsobject* global) you shouldn't need to use this function, but we mention it for completeness. it initializes the javascript wrapper interface for this api and pokes the constructor function into the global object you provide. ...
Logging
you can select events to be logged by module or level. a module is a user-defined class of log events. a level is a numeric value that indicates the seriousness of the event to be logged. you can combine module and level criteria to get highly selective logging. nspr also provides "assert"-style macros and functions to aid in application debugging. conditional compilation and execution log
types and variables logging functions and macros use example conditional compilation and execution nspr's logging facility is conditionally compiled in and enabled for applications using it. these controls are platform dependent. logging is not compiled in for the win16 platform. logging is compiled into the nspr debug builds; logging is not compiled into the nspr optimized builds. the compile ti...
... the debugging aids in your application, compile using the nspr debug build headers and runtime. set one of the compile-time defines when you build your application. execution-time control of nspr's logging uses two environment variables. these variables control which modules and levels are logged as well as the file name of the log file. by default, no logging is enabled at execution time. ...
...ur application, compile using the nspr debug build headers and runtime. set one of the compile-time defines when you build your application. execution-time control of nspr's logging uses two environment variables. these variables control which modules and levels are logged as well as the file name of the log file. by default, no logging is enabled at execution time. ...
PRFloat64
the nspr floating-point
type is always 64 bits. ...
... the nspr floating-point
type is always 64 bits. ...
... the nspr floating-point
type is always 64 bits. ...
PRHostEnt
a structure that defines a list of network addresses. this structure is output from pr_gethostbyname and pr_gethostbyaddr and passed to pr_enumeratehostent. clients should avoid directly accessing any of the structure's fields. syntax #include <prnetdb.h>
typedef struct prhostent { char *h_name; char **h_aliases; #if defined(_win32) print16 h_addr
type; print16 h_length; #else print32 h_addr
type; print32 h_length; #endif char **h_addr_list; } prhostent; fields the structure has the following fields: h_name pointer to the official name of host. h_aliases pointer to a pointer to list of aliases. the list is terminated with a null entry. h_addr
type host address
type. for valid nspr usage, this field must have a value indicating either an ipv4 or an ipv6 address. h_len...
... h_addr_list pointer to a pointer to a list of addresses from name server (in network byte order). the list is terminated with a null entry. ...
...ll entry. description this structure is used by many of the network address functions. all addresses are passed in host order and returned in network order (suitable for use in system calls). use the network address functions to manipulate the prhostent structure. to make the transition to ip version 6 easier, it's best to treat prhostent as an opaque structure. note winsock.h defines h_addr
type and h_length as a 16-bit field, whereas other platforms treat it as a 32-bit field. the #ifdef in the structure allows direct assignment of the prhostent structure. ...
PRIntn
this
type is one of the most appropriate for automatic variables. it is guaranteed to be at least 16 bits, though various architectures may define it to be wider (for example, 32 or even 64 bits). this
types is never valid for fields of a structure. ...
... this
type is one of the most appropriate for automatic variables. it is guaranteed to be at least 16 bits, though various architectures may define it to be wider (for example, 32 or even 64 bits). this
types is never valid for fields of a structure. ...
... this
type is one of the most appropriate for automatic variables. it is guaranteed to be at least 16 bits, though various architectures may define it to be wider (for example, 32 or even 64 bits). this
types is never valid for fields of a structure. ...
PRPtrdiff
signed pointer difference
type. ...
... signed pointer difference
type. ...
... signed pointer difference
type. ...
PRSize
a
type for representing the size of an object (not the size of a pointer). this is the same as the corresponding
type in libc. ...
... a
type for representing the size of an object (not the size of a pointer). this is the same as the corresponding
type in libc. ...
... a
type for representing the size of an object (not the size of a pointer). this is the same as the corresponding
type in libc. ...
PRSocketOptionData
type for structure used with pr_getsocketoption and pr_setsocketoption to specify options for file descriptors that represent sockets. syntax #include <prio.h>
typedef struct prsocketoptiondata { prsockoption option; union { pruintn ip_ttl; pruintn mcast_ttl; pruintn tos; prbool non_blocking; prbool reuse_addr; prbool keep_alive; prbool mcast_loopback; prbool no_delay; prsize max_segment; prsize recv_buffer_size; prsize send_buffer_size; prlinger linger; prmcastrequest add_member; prmcastrequest drop_member; prnetaddr mcast_if; } value; } prsocketoptiondata; fields the structure has the following fields: ip_ttl ip time-to-live. mcast_ttl ip multicast time-to-live. ...
...rbool mcast_loopback; prbool no_delay; prsize max_segment; prsize recv_buffer_size; prsize send_buffer_size; prlinger linger; prmcastrequest add_member; prmcastrequest drop_member; prnetaddr mcast_if; } value; } prsocketoptiondata; fields the structure has the following fields: ip_ttl ip time-to-live. mcast_ttl ip multicast time-to-live. tos ip
type-of-service and precedence. non_blocking nonblocking (network) i/o. reuse_addr allow local address reuse. keep_alive periodically test whether connection is still alive. mcast_loopback ip multicast loopback. no_delay disable nagle algorithm. don't delay send to coalesce packets. max_segment tcp maximum segment size. recv_buffer_size receive buffer size. send_buffer_size send buffer...
...ment size. recv_buffer_size receive buffer size. send_buffer_size send buffer size. linger time to linger on close if data are present in socket send buffer. add_member join an ip multicast group. drop_member leave an ip multicast group. mcast_if ip multicast interface address. description prsocketoptiondata is a name-value pair for a socket option. the option field (of enumeration
type prsockoption) specifies the name of the socket option, and the value field (a union of all possible values) specifies the value of the option. ...
PRStatus
type for status code returned by some functions. ...
...
type for status code returned by some functions. ...
...
type for status code returned by some functions. ...
PRUint8
guaranteed to be an unsigned 8-bit integer on all platforms. there is no
type equivalent to a plain char. ...
... guaranteed to be an unsigned 8-bit integer on all platforms. there is no
type equivalent to a plain char. ...
... guaranteed to be an unsigned 8-bit integer on all platforms. there is no
type equivalent to a plain char. ...
PRUintn
this (unsigned)
type is one of the most appropriate for automatic variables. it is guaranteed to be at least 16 bits, though various architectures may define it to be wider (for example, 32 or even 64 bits). this
types is never valid for fields of a structure. ...
... this (unsigned)
type is one of the most appropriate for automatic variables. it is guaranteed to be at least 16 bits, though various architectures may define it to be wider (for example, 32 or even 64 bits). this
types is never valid for fields of a structure. ...
... this (unsigned)
type is one of the most appropriate for automatic variables. it is guaranteed to be at least 16 bits, though various architectures may define it to be wider (for example, 32 or even 64 bits). this
types is never valid for fields of a structure. ...
PRUnichar
an unsigned 16-bit
type, like char in java or the "characters" of a javascript string defined in /mozilla/xpcom/base/nscore.h. ...
... an unsigned 16-bit
type, like char in java or the "characters" of a javascript string defined in /mozilla/xpcom/base/nscore.h. ...
... an unsigned 16-bit
type, like char in java or the "characters" of a javascript string defined in /mozilla/xpcom/base/nscore.h. ...
PRUptrdiff
unsigned pointer difference
type. ...
... unsigned pointer difference
type. ...
... unsigned pointer difference
type. ...
PR_GetSpecialFD
gets the file descriptor that represents the standard input, output, or error stream. syntax #include <prio.h> prfiledesc* pr_getspecialfd(prspecialfd id); parameter the function has the following parameter: id a pointer to an enumerator of
type prspecialfd, indicating the
type of i/o stream desired: pr_standardinput, pr_standardoutput, or pr_standarderror. returns if the id parameter is valid, pr_getspecialfd returns a file descriptor that represents the corresponding standard i/o stream. ...
...r: id a pointer to an enumerator of
type prspecialfd, indicating the
type of i/o stream desired: pr_standardinput, pr_standardoutput, or pr_standarderror. returns if the id parameter is valid, pr_getspecialfd returns a file descriptor that represents the corresponding standard i/o stream. otherwise, pr_getspecialfd returns null and sets the error to pr_invalid_argument_error. ...
...ype prspecialfd, indicating the
type of i/o stream desired: pr_standardinput, pr_standardoutput, or pr_standarderror. returns if the id parameter is valid, pr_getspecialfd returns a file descriptor that represents the corresponding standard i/o stream. otherwise, pr_getspecialfd returns null and sets the error to pr_invalid_argument_error. description
type prspecialfd is defined as follows:
typedef enum prspecialfd{ pr_standardinput, pr_standardoutput, pr_standarderror } prspecialfd; #define pr_stdin pr_getspecialfd(pr_standardinput) #define pr_stdout pr_getspecialfd(pr_standardoutput) #define pr_stderr pr_getspecialfd(pr_standarderror) file descriptors returned by pr_getspecialfd are owned by the runtime and should not be closed by the caller. ...
PR_NEW
call pr_geterror() to retrieve the error returned by the libc function. ...
...call pr_geterror() to retrieve the error returned by the libc function. ...
...call pr_geterror() to retrieve the error returned by the libc function. ...
NSS 3.12.6 release notes
bssl must send the "unrecognized_name" alert. ssl_snisocketconfighook ssl_reconfigfd ssl_configserversessionidcachewithopt ssl_settrustanchors ssl_getnegotiatedhostinfo new enum for sni: sslsniname
type (see sslt.h) new functions in cert.h certdistnames: duplicate distinguished name array. cert_distnamesfromcertlist: generate an array of distinguished names from a list of certs. in ocsp.h cert_cacheocsprespon...
... sslkeylogfile ...
... sslkeylogfile key log file. if set, nss logs rsa pre-master secrets to this file.
NSS 3.22 release notes
lgorithms 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_mapsignkey
type(). 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 data ...
..._mapsignkey
type(). 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. ...
...oid_tls_ecdhe_rsa sec_oid_tls_ecdh_ecdsa sec_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 sslextension
type. new macros in nss.h nss_rsa_min_key_size nss_dh_min_key_size nss_dsa_min_key_size nss_tls_version_min_policy nss_tls_version_max_policy nss_dtls_version_min_policy nss_dtls_version_max_policy in pkcs11t.h ckp_pkcs5_pbkd2_hmac_gostr3411 - prf based on hmac with gostr3411 for pbkdf (not supported) ckp_pkcs5_pbkd2_hmac_sha224 - prf based on hmac with...
NSS Developer Tutorial
d to size_t. unfortunately, this can be a source of integer overflow bugs on 64-bit systems. c features nss requires c99. however, not all features from c99 are equally available. variables can be declared, at the point they are first used. the inline keyword can be used. variadic macro arguments are permitted, but their use should be limited to using __va_args__. the exact-width integer
types in nspr should be used, in preference to those declared in <stdint.h> (which will be used by nspr in the future). universal character names are not permitted, as are wide character
types (char16_t and char32_t). nss source should only include ascii text. escape non-printing characters (with \x if there is no special escape such as \r, \n, and \t) and avoid defining string literals that use no...
...a c++ language features guide, and the chromium c++ usage guide, list c++ features that are known to be widely available and compatible. you should limit features to those that appear in both guides. ask on nss-dev@ if you think this is restrictive, or if you wish to prohibit a specific feature. nss c abi backward compatibility functions exported functions cannot be removed. ...
... under certain circumstances, it is safe to add new members to an exported struct at the end. opaque structs give us complete freedom to change them, but require applications to call nss functions, to allocate and free them. ...
NSS Sample Code sample2
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. ...
...ry, it *may not* return the optimal slot for the operation. for * des ops, internal slot is typically the best slot */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_geterror()); goto out; } /* nss passes blobs around as secitems. these contain a pointer to * data and a length. turn the raw key into a secitem. */ keyitem.
type = sibuffer; keyitem.data = gkey; keyitem.len = sizeof(gkey); /* turn the raw key into a key object. we use pk11_originunwrap * to indicate the key was unwrapped - which is what should be done * normally anyway - using raw keys isn't a good idea */ symkey = pk11_importsymkey(slot, ciphermech, pk11_originunwrap, cka_encrypt, &keyitem, null); if (symkey ...
..._encrypt, &keyitem, null); if (symkey == null) { fprintf(stderr, "failure to import key into nss (err %d)\n", pr_geterror()); goto out; } /* set up the pkcs11 encryption paramters. ...
PKCS11 Implement
ns over unsecured networks such as the internet. multipurpose tokens provide the full range of cryptographic services. they can be thought of as cryptographic accelerator cards. future releases of nss will also support multipurpose tokens that are fips-140 compliant. table 1.2 summarizes the pkcs #11 functions (in addition to the other functions described in this document) that nss expects each
type of token to support. pkcs #11 functions required for different kinds of tokens external key distribution tokens signing tokens signing and decryption tokens multipurpose tokens c_encrypt c_decrypt ckm_rsa_pkcs ckm_rsa_x_509 (ssl 2.0 server only) c_decrypt ckm_rsa_pkcs ckm_rsa_x_509 (ssl 2.0 server only) c_decrypt c_sign ckm_rsa_pkcs ckm_dsa c_sign ckm_rsa_pkcs ckm_dsa...
...apkey. multipurpose tokens should support all the functions listed in table 1.2, except that c_wrapkey and c_unwrapkey are optional. the nss always attempts to use these two functions but uses c_encrypt and c_decrypt instead if c_wrapkey and c_unwrapkey aren't implemented. installation you can install your module in any convenient location on the user's hard disk, but you must tell the user to
type the module name and location in the cryptographic modules portion of the communicator security info window. to do so, the user should follow these steps: click the security icon near the top of any communicator window. in the security info window, click cryptographic modules. in the cryptographic modules frame, click add. in the create a new security module dialog box, add the security modul...
.... to do so, the user should follow these steps: click the security icon near the top of any communicator window. in the security info window, click cryptographic modules. in the cryptographic modules frame, click add. in the create a new security module dialog box, add the security module name for your module and the full pathname for the security module file. to avoid requiring the user to
type long pathnames, make sure your module is not buried too deeply. semantics unique to nss these sections describe semantics required by nss but not specified by pkcs #11. supporting multiple sessions if you support multiple sessions simultaneously and if you wish to support c_initpin, c_setpin, or c_generatekeypair, you must support simultaneous read-only and read/write sessions. random-num...
FC_GetMechanismInfo
pinfo [output] . description fc_getmechanisminfo obtains information about a particular mechanism possibly supported by a token. ...
...pinfo [output] . description fc_getmechanisminfo obtains information about a particular mechanism possibly supported by a token. ...
...pinfo [output] . description fc_getmechanisminfo obtains information about a particular mechanism possibly supported by a token. ...
FC_GetMechanismList
a user may call fc_getmechanismlist without logging into the token (to assume the nss user role). ...
...a user may call fc_getmechanismlist without logging into the token (to assume the nss user role). ...
...a user may call fc_getmechanismlist without logging into the token (to assume the nss user role). ...
NSS cryptographic module
this chapter describes the data
types and functions that one can use to perform cryptographic operations with the nss cryptographic module. the nss cryptographic module uses the industry standard pkcs #11 v2.20 as its api with some extensions. therefore, an application that supports pkcs #11 cryptographic tokens can be easily modified to use the nss cryptographic module. the nss cryptographic module has two modes of operation: the non-fips (default) mode and fips mode. the fips mode is an approved mode of operation compliant to fips 140-2. both modes of operation use the same data
types but are implemented by different functions. the standard pkcs #11 function c_getfunctionlist or the equivalent nsc_getfunctionlist function returns pointers to the functions that implement the default mode...
...turns pointers to the functions that implement the default mode of operation. ...
...mplement the default mode of operation. to enable the fips mode of operation, use the function fc_getfunctionlist instead to get pointers to the functions that implement the fips mode of operation. ...
NSS environment variables
note: nss environment variables are subject to be changed and/or removed from nss. run-time environment variables these environment variables affect the run time behavior of nss shared libraries. there is a separate set of environment variables that affect how nss is built, documented below. variable
type description introduced in version nsrandcount integer (byte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below). makes nsrandfile usable with /dev/urandom. 3.12.3 nsrandfile string (file name) uses this file to seed the pseudo random number generator. before 3.0 nss_allow_weak_signature_alg boolean (any non-empty value to enable) enabl...
...e pseudo random number generator. before 3.0 nss_allow_weak_signature_alg boolean (any non-empty value to enable) enables the use of md2 and md4 inside signatures. this was allowed by default before nss 3.12.3. 3.12.3 nss_debug_pkcs11_module string (module name) name the pkcs#11 module to be traced. pkcs #11 module logger 3.6 nss_default_db_
type string ("dbm", "sql", or "extern") determines the default database
type to open if the app does not specify. nss_shared_db 3.12 nss_disable_arena_free_list string (any non-empty value) define this variable to get accurate leak allocation stacks when using leak reporting software. nss_memory_allocation 3.4 nss_disable_unload string (any non-empty ...
...iffers 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 affect the build (compilation) of nss. note: this section is a work in progress and is not yet complete. variable
type description introduced in version build_opt boolean (1 to enable) do an optimized (not debug) build. default is to do a debug build. before 3.0 moz_debug_symbols boolean (1 to enable) needed on windows to build with versions of msvc (such as vc8 and vc9) that do not understand /pdb:none 3.11 moz_debug_flags string when moz_debug_sym...
OLD SSL Reference
pkcs #11, and the default security databases setting up the certificate and key databases setting up the ca db and certificate setting up the server db and certificate setting up the client db and certificate verifying the server and client certificates building nss programs chapter 3 selected ssl
types and structures this chapter describes some of the most important
types 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.
types and structures certcertdbhandle certcerti...
... validating certificates cert_verifycertnow cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames manipulating certificates cer...
... seckey_getdefaultkeydb seckey_destroyprivatekey chapter 7 pkcs #11 functions ...
TLS Cipher Suite Discovery
the cipher suite number for which it wants information, the address of a block of memory allocated to receive that information, and the size in bytes of that block of memory. ssl_getciphersuiteinfo fills that caller-supplied memory with information from the sslciphersuiteinfo structure for that cipher suite. ...
...o structure for that cipher suite. ...
...lared in "sslt.h":
typedef struct sslciphersuiteinfostr { pruint16 length; pruint16 ciphersuite; /* cipher suite name */ const char * ciphersuitename; /* server authentication info */ const char * authalgorithmname; sslauth
type authalgorithm; /* key exchange algorithm info */ const char * kea
typename; sslkea
type kea
type; /* symmetric encryption info */ const char * symciphername; sslcipheralgorithm symcipher; pruint16 symkeybits; pruint16 symkeyspace; pruint16 effectivekeybits; /* mac info */ const char * macalgorithmname; sslmacalgorithm macalgorithm; pruint16 ...
NSS Tools certutil
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 module database management, see using the security module database tool. availability see the release notes for the platforms this tool is available on. syntax to run the certificate database tool,
type the command certutil 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. 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...
...h the string "internal". an internal slots is a virtual slot maintained in software, rather than a hardware device. internal slot 2 is used by key and certificate services. internal slot 1 is used by cryptographic services. -i cert|cert-request-file specify a specific certificate, or a certificate-request file. -k rsa|dsa|all specify the
type of a key: rsa, dsa or both. the default value is rsa. by specifying the
type of key you can avoid mistakes caused by duplicate nicknames. -l display detailed information when validating a certificate with the -v option. -m serial-number assign a unique serial number to a certificate being created. this operation should be performed by a ...
...ed to a database. this extension identifies the url of a certificate's associated certificate revocation list (crl). the certificate database tool prompts you to enter the url. crl distribution point extensions are described in standard x.509 v3 certificate extensions in appendix a.3 of thered hat certificate system administration guide. -5 add a netscape certificate
type extension to a certificate that is being created or added to the database. netscape certificate
type extensions are described in standard x.509 v3 certificate extensions in appendix a.3 of thered hat certificate system administration guide. -6 add an extended key usage extension to a certificate that is being created or added to the database. extended key usage exten...
Proxies in Necko
proxies are implemented transparently to necko users. this means that callers can just create an nsichannel, not needing to worry about whether the channel will use a proxy or not the basic interfaces for proxies are: nsiproxyinfo, nsiprotocolproxyservice, and nsiproxiedprotocolhandler nsiproxyinfo is a simple helper which stores information about the
type of the proxy, its host and its port. nsiioservice the decision whether to use a proxy is made in nsioservice::newchannelfromuri. it first asks the nsiprotocolproxyservice for an nsiproxyinfo. depending on the
type of the proxy info, it either asks the http protocol handler or the protocol handler for the requested uri for a new channel with the nsiproxyinfo - if the channel supports nsiproxiedprotocolhandler. otherwise, the proxy inf...
... no proxy should be used, null is also returned. if pac (proxy autoconfiguration) is enabled, it is asked for the proxy string for the given uri, which determines whether to use a proxy. note that the proxy method is only used when the protocol handler supports http proxies, as indicated by its protocol flags. finally, depending on the protocol, the proxy info will be created with the appropriate
type, host and port. socks and nsisockettransportservice the aforementioned methods work very well for application-level proxies. however, socks is transparent to upper-level protocols, and can transport any other tcp- or udp-based protocol. therefore, nsisockettransportservice supports creating socket transports using an nsiproxyinfo. this proxy info will only be used if it specifies a socks proxy, t...
...s, and can transport any other tcp- or udp-based protocol. therefore, nsisockettransportservice 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 / seamonkey 2.6) starting with gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 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...
Rhino serialization
s when rhino serializes objects. how rhino serialization works by default, java serialization of an object also serializes objects that are referred to by that object. upon deserialization the initial object and the objects it refers to are all created and the references between the objects are resolved. however, for javascript this creates a problem. ...
...re referred to by that object. upon deserialization the initial object and the objects it refers to are all created and the references between the objects are resolved. however, for javascript this creates a problem. javascript objects contain references to proto
types and to parent scopes. default serialization would serialize the object or function we desired but would also serialize object.proto
type or even possibly the entire top-level scope and everything it refers to! we want to be able to serialize a javascript object and then deserialize it into a new scope and have all of the references from the deserialized object to proto
types and parent scopes resolved correctly to refer to objects in the new scope. scriptableoutputstream takes a scope as a parameter to its constructor. if in the pr...
...use the addexcludedname method of scriptableoutputstream to add new names. by default, scriptableoutputstream excludes all the names defined using context.initstandardobjects. if you are using rhino serialization in an environment where you always define, say, a constructor foo, you should add the following code before calling writeobject: out.addexcludedname("foo"); out.addexcludedname("foo.proto
type"); this code will prevent foo and foo.proto
type from being serialized and will cause references to foo or foo.proto
type to be resolved to the objects in the new scope upon deserialization. exceptions will be thrown if foo or foo.proto
type cannot be found the scopes used in either scriptableoutputstream or scriptableinputstream. rhino serialization in compilation mode serialization works well wit...
Rebranding SpiderMonkey (1.8.5)
ing commands at the terminal: cd js/src autoconf-2.13 for the remainder of this document wherever you see the text $brand you will substitute that text with the name of your brand. for example the default brand for spidermonkey 1.8.5 is 'mozjs185'. mkdir build-$brand-release cd build-$brand-release configure this build of spidermonkey with the desired options. ...
...if you have failed to insert your brand name in any of the previous steps where it is called for, you must delete this build directory and restart this process from the beginning. ...
...any of the previous steps where it is called for, you must delete this build directory and restart this process from the beginning. this time paying careful attention to the commands you issue to your command shell. the above command has actually changed some information we need changed back so we will re-issue the recursive find and replace text in files command with some modifications. find ./ -
type f -exec sed -i "s/$brand.pc/mozjs185.pc/" {} \; the last recursive search and replace, changes the file name of the static library: find ./ -
type f -exec sed -i "s/js_static/$brand_static/" {} \; allright, almost there. now comes the manual editing. using your favorite editor open up the file named makefile for editing. search for this text: mozjs185.pc "scroll down" a few lines until you see t...
Garbage collection
o we barrier the read instead; if you ever read a weak reference in the middle of an ongoing incremental gc, then the target of the weak ref will be marked. implementation details write barriers have a runtime cost, so spidermonkey tries to skip them when an incremental gc cycle is not active. each zone has a flag needsincrementalbarrier() that indicates whether barriers are required. for each
type t such that fields of
type t* need a write barrier, there is a functiont::writebarrierpre(old). for example, fields of
type jsobject* need a write barrier, so there is a function jsobject::writebarrierpre(jsobject* old). if zone->needsincrementalbarrier(), then writebarrierpre() marks old. that's it. the class heap<t> is provided to make it easy to invoke write barriers. a heap<t> encapsulates a...
...the class heapvalue does the same thing for value. heapslot (and the related class heapslotarray) is the same, but for object slots. heapid is the same, but for jsid. object private fields must be handled specially. ...
...jsobject* need a write barrier, so there is a function jsobject::writebarrierpre(jsobject* old). if zone->needsincrementalbarrier(), then writebarrierpre() marks old. that's it. the class heap<t> is provided to make it easy to invoke write barriers. a heap<t> encapsulates a t* and invokes the write barrier whenever assigned to. thus, object fields of gc-pointer
type should normally be defined as
type heap<t>. the class heapvalue does the same thing for value. heapslot (and the related class heapslotarray) is the same, but for object slots. heapid is the same, but for jsid. object private fields must be handled specially. the private field itself is opaque to the engine, but it may point to things that need to be marked, e.g., an array of jsobject pointers. in this example, if the private fie...
Invariants
have it cleared. if an object is inextensible, its dslots will never again change. (we don't bother locking when accessing slots of a sealed object. the locking is going away regardless.) compartments suppose obj = js_getscopechain(cx) is not null. then cx->compartment == obj->compartment(). when a new object is created, it is automatically created in cx->compartment, but its parent and proto
type are often determined by examining the scope chain. the object and its proto and parent must be in the same compartment. so it is utterly crucially important that this invariant always be true if objects are being created. the public api for compartment-hopping, jsautoentercompartment, and the internal api, js::autocompartment, both make sure the invariant is maintained. however, there is another...
...ent-hopping, jsautoentercompartment, and the internal api, js::autocompartment, both make sure the invariant is maintained. however, there is another internal api, js::switchtocompartment, that lets you break this invariant, and of course in xpconnect we use that from time to time when we know we aren't going to be creating any new objects (other than global objects, which have no parent or proto
type) or doing anything that might call back into native code that could create objects. we do this in order to save some cpu cycles (in other words, for no good reason whatsoever). if !js_isrunning(cx) && cx->globalobject == null, then cx->compartment == cx->runtime->defaultcompartment. while executing a script, cx->compartment == script->compartment. but this is true only so long as we are actuall...
...dcontextpointer(ownercx) before dereferencing it. shape invariants the shape guarantees hold whenever the property cache is enabled. also, we never change the shape of the global object on trace. (here "the global object" refers to the object at the end of the scope chain of the function object we're executing.) requests many functions require a request. that is, they take a parameter cx of
type jscontext *, and require that cx is in a request on the current thread. see js_threadsafe. "are we in a request on cx?", where cx is any variable of
type jscontext *, is a static yes for most lines of code where such a variable exists. occasionally it's a static no; other times we don't care. almost all jsapi callbacks provide a request; that is, when we call a callback with a cx argument, we...
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. ...
...pointer to the first element. const t *end() const returns a pointer to the element next to the last element. t *end() returns a pointer to the element next to the last element. range all() returns the range of the array. const t &back() const returns the last element. ...
...end() const returns a pointer to the element next to the last element. t *end() returns a pointer to the element next to the last element. range all() returns the range of the array. const t &back() const returns the last element. description js::autovectorrooter<t> holds a variable-size rooted array of
type t. ...
JS::ToPrimitive
this article covers features introduced in spidermonkey 45 converts a javascript object to a primitive value, using the semantics of toprimitive. syntax bool js::toprimitive(jscontext *cx, js::handleobject obj, js
type hint, js::mutablehandlevalue vp); 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. obj js::handleobject the object to convert. hint js
type the hint to pass to the toprimitive and @@toprimitive method when converting the object. hint must be js
type_string or js
type_number to pass the corresponding
type as a hint, or js
type_void to pass no hint. do not pass any oth...
... vp js::mutablehandleobject out parameter. on success, *vp receives the converted value. description js::toprimitive converts a javascript object, obj, to a primitive value using ecmascript 6 toprimitive. ...
... success, *vp receives the converted value. ...
JSClass
this field is the bitwise or of one or more of the jsclass_* constants described in jsclass.flags. addproperty jspropertyop a hook called just after adding a new property. may modify the new property value. use null or js_propertystub (spidermonkey 31 or older) for defaul...
...propertystub, js_propertystub, js_enumeratestub, js_resolvestub, js_convertstub, null, jsclass_no_optional_members }; to expose this class to scripts, and to attach methods and properties to it, use js_initclass. private data custom classes very often need to store private c/c++ data that should not be visible to scripts. to do this, use the jsclass_has_private (jsclass_construct_proto
type wad removed) flags. implement a jsnative constructor function that allocates this private data and stores it in the new object using js_setprivate. implement a jsclass.finalize callback that frees the private data. each native getter, setter, or method can access the private data using js_getinstanceprivate. when initializing the class, pass the jsnative constructor function to js_initclass. (t...
..._set_rval(cx, vp, object_to_jsval(obj)); */ return true; } { js_initclass(cx, global, js::null(), &printer_class, printer_construct, 1, null, null, null, null); } see also mxr id search for jsclass jsclass.flags js_getclass js_initclass js_newobject js_newobjectforconstructor js_instanceof bug 638291 - added trace bug 702507 - removed jsclass_construct_proto
type bug 726944 - removed xdrobject, reserved0 and reserved1 bug 886829 - made finalize optional bug 957688 - removed checkaccess bug 1103368 - made most of members optional bug 1097267 - removed jsclass_new_enumerate bug 1054756 - removed convert bug 1261723 - class ops are moved to a sub-structure jsclassops ...
JSErrorReport
if null, the error is local to the script in the current html page. lineno unsigned line number in the source that caused the error. column unsigned zero-based column index in line in the source that caused the error. ...
...d do the right checks itself instead of using this flag. the constant jsreport_error is 0 and can be used to indicate an error report without any of the above flags. errornumber unsigned the error number. ucmessage const char16_t * the default unicode error message. messageargs const char16_t ** arguments for the error message. exn
type int16_t one of the jsexn
type constants. description jserrorreport describes a single error that occurs in the execution of script. in the event of an error, filename will either contain the name of the external source file or url containing the script (script src=) or null, indicating that a script embedded in the current html page caused the error. lineno indicates the line number of...
...problem within the offending line. uclinebuf is a pointer to a user-defined buffer into which js copies the unicode (original) version of the offending line of script. uctokenptr is a pointer into uclinebuf that identifies the precise location line of the problem within the offending unicode (original) version of the offending line. to use jserrorreport, your application must define a variable of
type jserrorreport and allocate a buffer to hold the text that generated the error condition. set linebuf to point at the buffer before your application executes a script. for unicode scripts, define a second buffer that holds the unicode version of the text the generated the error. for application that do not use unicode, set uclinebuf and uctokenptr to null. macros name description ...
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 spidermonkey 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. ...
...provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an active request on cx. ...
...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()). ...
JSGetObjectOps
cls jsclass * the class of the new object. ...
... cls jsclass * the class of the new object. ...
... cls jsclass * the class of the new object. ...
JSNewResolveOp
obsolete since jsapi 36this 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. jsnewresolveop is the
type of the jsclass.resolve callback when the jsclass_new_resolve bit is set in the jsclass.flags field. syntax
typedef bool (* jsnewresolveop)(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandleobject objp); name
type description cx jscontext * pointer to the js context in which the property access is taking place. obj js::handleobject pointer to the object whose properties are being accessed. id js::handleid name or index of the property being accessed. flags uint32_t ...
...dleobject out parameter. on success, the resolve hook must set *objp to the object in which the property has been defined, or null if it was not defined. description like jsresolveop, but flags provide contextual information about the property access. on success, the callback must set the *objp out parameter to null if id was not resolved; or non-null, referring to obj or one of its proto
types, if id was resolved; and return js_true. on failure, it must return js_false. this hook instead of jsresolveop is called via the jsclass.resolve member if jsclass_new_resolve is set in jsclass.flags. setting jsclass_new_resolve and jsclass_new_resolve_gets_start further extends this hook by passing in the starting object on the proto
type chain via *objp. thus a resolve hook implementation may de...
...when using jsclass_new_resolve_gets_start, the resolve hook must therefore null *objp to signify "not resolved". ...
JSObjectOp
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. jsobjectop is the
type of several jsapi callbacks that map an object to another object, or null if an error or exception occurred. ...
... 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. jsobjectop is the
type of several jsapi callbacks that map an object to another object, or null if an error or exception occurred. ...
...e 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. jsobjectop is the
type of several jsapi callbacks that map an object to another object, or null if an error or exception occurred. ...
JSObjectOps.setProto
s, its use is discouraged since it could be removed at any time. try to avoid using it. warning! jsobjectops is not a supported api. details of the api may change from one release to the next. this documentation should be considered spidermonkey internals documentation, not api documentation. see bug 408416 for details. the jsobjectops.setproto and setparent callbacks implement the js_setproto
type and js_setparent functions. these callbacks share the same
type, jssetobjectslotop. syntax
typedef jsbool (*jssetobjectslotop)(jscontext *cx, jsobject *obj, uint32 slot, jsobject *pobj); name
type description cx jscontext * pointer to the js context in which the object's proto
type or parent is being modified. obj jsobject * the object whose pr...
...d js_setparent functions. these callbacks share the same
type, jssetobjectslotop. syntax
typedef jsbool (*jssetobjectslotop)(jscontext *cx, jsobject *obj, uint32 slot, jsobject *pobj); name
type description cx jscontext * pointer to the js context in which the object's proto
type or parent is being modified. obj jsobject * the object whose proto
type or parent is being modified. slot uint32 the index of the slot being modified: jsslot_proto for the jsobjectops.setproto callback, and jsslot_parent for the jsobjectops.setparent callback. pobj jsobject * the new proto
type or parent object. ...
...
type or parent is being modified. slot uint32 the index of the slot being modified: jsslot_proto for the jsobjectops.setproto callback, and jsslot_parent for the jsobjectops.setparent callback. pobj jsobject * the new proto
type or parent object. description these hooks must check for cycles without deadlocking, and otherwise take special steps. see js_setproto
type or js_setparent in js/src/jsobj.cpp for an example. ...
JSReserveSlotsOp
obj jsobject * the new object. description warning: jsapi applications should not use this hook. ...
... obj jsobject * the new object. description warning: jsapi applications should not use this hook. ...
... obj jsobject * the new object. description warning: jsapi applications should not use this hook. ...
JSResolveOp
obj js::handleobject pointer to the object whose properties are being accessed. id js::handleid the name or index of the property being resolved. resolvedp bool * out parameter. receives the result of resolve operation. ...
... obj js::handleobject pointer to the object whose properties are being accessed. id js::handleid the name or index of the property being resolved. resolvedp bool * out parameter. receives the result of resolve operation. ...
...following hook: jsclass.resolve callback is called when a property is not found on an object. it can be used to implement lazy properties. js looks for a property in an object, and if not found, tries to resolve the given id. after calling resolve, the engine looks again to see if resolve defined obj[id]. if so, the property lookup succeeds. if not, the process is repeated with obj's proto
type. see also mxr id search for jsresolveop jsclass jsnewresolveop bug 993026 ...
JSXDRObjectOp
objp jsobject ** the object to be serialized or deserialized. description serialize or deserialize an object, given an xdr state record representing external data. ...
... objp jsobject ** the object to be serialized or deserialized. description serialize or deserialize an object, given an xdr state record representing external data. ...
... objp jsobject ** the object to be serialized or deserialized. description serialize or deserialize an object, given an xdr state record representing external data. ...
JS_AddExternalStringFinalizer
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. register a custom string memory manager. syntax int js_addexternalstringfinalizer(jsstringfinalizeop finalizer); name
type description finalizer jsstringfinalizeop pointer to a callback function, described below. ...
... register a custom string memory manager. syntax int js_addexternalstringfinalizer(jsstringfinalizeop finalizer); name
type description finalizer jsstringfinalizeop pointer to a callback function, described below. the js engine will automatically call this function each time a string created by js_newexternalstring is garbage-collected. callback syntax
typedef void (*jsstringfinalizeop)(jscontext *cx, jsstring *str); name
type description cx jscontext * pointer to a jscontext which the finalizer may use for certain very limited operations (not documented). since the jsstringfinalizeop callback is called during garbage collection, it must avoid most jsapi functions. (is cx guaranteed to be non-null?) str js...
...wexternalstring() when creating the string. it is the callback's responsibility to free the memory. after this callback, the js engine will not use that memory anymore and will not keep a pointer to it. the callback may not keep a reference to this jsstring, as its memory is about to be freed. description add a finalizer for external strings created by js_newexternalstring using a
type-code returned from this function, and that understands how to free or release the memory pointed at by js_getstringchars(str). returns a nonnegative
type index if there is room for finalizer in the global gc finalizers table, else returns -1. in a js_threadsafe build, this function must be invoked on the primordial thread only, at startup—or else the entire program must single-thread itself wh...
JS_CheckAccess
obsolete since jsapi 29this 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. check whether a running script may access a given object property. ...
...on success, *vp receives the property's stored value. attrsp unsigned int * out parameter. on success, *attrsp receives the property attributes. ...
... success, *attrsp receives the property attributes. description js_checkaccess determines whether the property of obj given by id can be accessed by the code currently running in the context cx. the mode parameter specifies what kind of access to check for. it is one of the following values: value description jsacc_proto check for permission to read to obj's proto
type. (this is redundant with passing the string id "__proto__" as id.) jsacc_parent check for permission to read obj's parent. (this is redundant with passing the string id "__parent__" as id.) jsacc_import check for permission to import the property. jsacc_watch check for permission to place a watchpoint on the property. jsacc_read check for permission...
JS_DoubleToInt32
obsolete since jsapi 38this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 17 convert a c floating-point number of
type double to 32-bit integer per ecma spec. ...
... be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 17 convert a c floating-point number of
type double to 32-bit integer per ecma spec. syntax int32_t js_doubletoint32(double d); uint32_t js_doubletouint32(double d); name
type description d double the numeric value to convert. ...
... int32_t js_doubletoint32(double d); uint32_t js_doubletouint32(double d); name
type description d double the numeric value to convert. description js_doubletoint32 converts a c floating-point number of
type double to int32, a signed 32-bit integer. js_doubletouint32 converts a c floating-point number of
type double to uint32, an unsigned 32-bit integer. see also mxr id search for js_doubletoint32 mxr id search for js_doubletouint32 bug 631132 bug 1112774 ...
JS_GetNaNValue
nan is typically used in javascript as the return value of a numeric operation when an argument is invalid or conversion fails. for example, 0/0 and math.sqrt(-1) both return nan. so do number("xyzzy") and math.sin("frank"). ...
... nan is typically used in javascript as the return value of a numeric operation when an argument is invalid or conversion fails. for example, 0/0 and math.sqrt(-1) both return nan. so do number("xyzzy") and math.sin("frank"). ...
... nan is typically used in javascript as the return value of a numeric operation when an argument is invalid or conversion fails. for example, 0/0 and math.sqrt(-1) both return nan. so do number("xyzzy") and math.sin("frank"). ...
JS_HasInstance
v js::handle<js::value> the value to test. bp bool * out parameter. ...
... v js::handle<js::value> the value to test. bp bool * out parameter. on success, *bp receives the result of the test. description js_hasinstance determines if a specified js value, v, is an instance of js object, obj. ...
...ives the result of the test. description js_hasinstance determines if a specified js value, v, is an instance of js object, obj. this function is equivalent to v instanceof obj test in javascript. on success, js_hasinstance stores the result of the instanceof test in *bp and returns true. on error or exception, it returns false, and the value left in *bp is undefined. when providing a proto
type as obj, the proto
type's jsclass must have its hasinstance method set. otherwise js_hasinstance returns false. see also mxr id search for js_hasinstance js_instanceof ...
JS_InstanceOf
determine if an object is an instance of a specified jsclass. syntax bool js_instanceof(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, js::callargs *args); // added in spidermonkey 38 bool js_instanceof(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, jsval *argv); // obsolete since jsapi 32 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. 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, re...
... 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. 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 spidermonkey 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 jscl...
...lass(obj) == clasp. js_instanceof can also be used in native functions to check the class of an argument when a particular 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 proto
type chain. js_hasinstance is similar to instanceof. see also mxr id search for js_instanceof js_hasinstance js_getclass bug 959787 ...
JS_IsConstructing_PossiblyWithGivenThisObject
uraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.5 determine if a special this object was supplied to the constructor. ...
...in such cases, the following example would provide the additional information of whether a special this was supplied. ...
... see also bug 702507 ...
JS_IterateCompartments
this article covers features introduced in spidermonkey 17 iterate over compartments and call the specified callback function on every compartment. syntax void js_iteratecompartments(jsruntime *rt, void *data, jsiteratecompartmentcallback compartmentcallback); name
type description cx jsruntime * the runtime of the compartments to iterate over. ...
... data void * data parameter passed to js_iteratecompartments. ...
... the runtime of the compartments to iterate over. data void * this will be passed as the data parameter of the jsiteratecompartmentcallback. compartmentcallback jsiteratecompartmentcallback callback function (see below). callback function
typedef void (*jsiteratecompartmentcallback)(jsruntime *rt, void *data, jscompartment *compartment); name
type description cx jsruntime * the runtime of the compartments. data void * data parameter passed to js_iteratecompartments. compartmentcallback jscompartment * the pointer to the compartment. description js_iteratecompartments calls compartmentcallback on every compartment. beware that there is no guarantee that the compartment will survive aft...
JS_LookupProperty
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. nam...
...ngth of name in characters; or -1 to indicate that name is null-terminated. flags unsigned (only in js_lookuppropertywithflags) a combination of bits requesting special search behavior. see flags below. objp js::mutablehandleobject out parameter. on success, *objp receives the object on which the property was found. this will be either obj or an element on obj's proto
type chain. vp js::mutablehandleobject out parameter. on success, *vp receives the stored value of the property, if any. description the functions js_lookupproperty, js_lookupucproperty, js_lookuppropertybyid, js_lookuppropertywithflags, and js_lookuppropertywithflagsbyid search a specified object, obj, for a property with the given name. these functions all have similar behavior:...
...meter. on success, *vp receives the stored value of the property, if any. description the functions js_lookupproperty, js_lookupucproperty, js_lookuppropertybyid, js_lookuppropertywithflags, and js_lookuppropertywithflagsbyid search a specified object, obj, for a property with the given name. these functions all have similar behavior: the search starts with obj and proceeds along the proto
type chain. if the property is found, *vp receives the property's stored value, or true if the property has no stored value; and the return value is true. if neither obj nor any of its proto
types have such a property, *vp receives undefined and the return value is true (to indicate no error occurred). on error or exception (such as running out of memory during the search), the return value is false...
JS_NewObjectForConstructor
r function would. syntax jsobject * js_newobjectforconstructor(jscontext *cx, const jsclass *clasp, const js::callargs& args); // added in jsapi 32 jsobject * js_newobjectforconstructor(jscontext *cx, jsclass *clasp, const jsval *vp); // added in jsapi 14, obsolete since jsapi 32 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 spidermonkey 17 vp jsval * pointer to a constructor. this must be an object that has a proto
type property. ...
...tructor as callee. added in spidermonkey 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 function--it just creates the object. if the constructor argument is not an object jsval, this function will assert (in debug builds). ...
...w. this function does not run the code of the constructor function--it just creates the object. if the constructor argument is not an object jsval, this function will assert (in debug builds). if the constructor does not have a proto
type property, this function will return null and set an exception on cx. the standard object creation api, js_newobject, takes explicit arguments for the class, proto
type, and parent of the new object. with js_newobjectforconstructor, the proto
type and parent are determined by the constructor, and class is still determined by the caller. the proto
type is the proto
type of the constructor if it is an object, otherwise null. the parent is the constructor's parent. see also mxr id search for js_newobjectforconstructor js_newobject object_to_jsval bug 581263 - added ...
JS_NumberValue
the result is an integer js::value if d can be stored that way. otherwise, a new floating-point js::value is created. ...
... the result is an integer js::value if d can be stored that way. otherwise, a new floating-point js::value is created. ...
...double to a js::value. replacement to js_newnumbervalue, js_newdoublevalue, js_newdouble. syntax // added in spidermonkey 42 js::value js_numbervalue(double d); // obsolete since spidermonkey 42 jsval js_numbervalue(double d); name
type description d double the numeric value to convert. 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. see also mxr id search for js_numbervalue bug 752223 bug 1184564 -- changed jsval to js::value ...
JS_SetErrorReporter
olete since jsapi 52this 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. get or specify the error reporting mechanism for an application. ...
... message const char * an error message. ...
... message const char * an error message. report jserrorreport * an error report record containing additional details about the error. description js_seterrorreporter enables you to define and use your own error reporting mechanism in your applications. ...
JS_TracerInit
s, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8 note: in jsapi 12, the macro js_tracer_init has been replaced by the function js_tracerinit initialize a jstracer for object graph tracing. ...
... thing void * a gc thing. ...
... trc jstracer * the tracer to be initialized. cx jscontext * the context in which to perform tracing. callback jstracecallback a callback, described below, which the tracing apis will call each time a pointer is found from one gc thing to another. callback syntax
typedef void (*jstracecallback)(jstracer *trc, void *thing, uint32 kind); name
type description trc jstracer * the tracer visiting obj. thing void * a gc thing. kind uint32 one of the constants jstrace_object, jstrace_double, jstrace_string; or a tag denoting an internal implementation-specific traversal kind. in the latter case, the only operations the callback may perform on thing are to call js_tracechildren or the debug-only js...
JS_ValueToECMAInt32
obsolete since jsapi 28this 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. convert a javascript value to an integer
type as specified by the ecmascript standard. syntax jsbool js_valuetoecmaint32(jscontext *cx, jsval v, int32 *ip); jsbool js_valuetoecmauint32(jscontext *cx, jsval v, uint32 *ip); jsbool js_valuetouint16(jscontext *cx, jsval v, uint16 *ip); 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. v jsval the javascript value to convert. ip int32 * or uint32 * or int16 * out parameter. ...
...version. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v jsval the javascript value to convert. ip int32 * or uint32 * or int16 * out parameter. on success, *ip receives the converted value. description js_valuetoecmaint32, js_valuetoecmauint32, and js_valuetouint16 convert a javascript value to various integer
types as specified in the ecmascript specification. js_valuetoecmaint32 implements the toint32 operator specified in ecma 262-3 9.5. js_valuetoecmauint32 implements the touint32 operator specified in ecma 262-3 9.6. js_valuetouint16 implements the touint16 operator specified in ecma 262-3 9.7. all three functions first convert v to a floating-point number as if by calling js_valuetonumber; n...
...ified in ecma 262-3 9.5. js_valuetoecmauint32 implements the touint32 operator specified in ecma 262-3 9.6. js_valuetouint16 implements the touint16 operator specified in ecma 262-3 9.7. all three functions first convert v to a floating-point number as if by calling js_valuetonumber; nan values are then converted to zero. if that succeeds, the result is then converted to the target integer
type. this second conversion cannot fail. on success, js_valuetoecmaint32 stores the converted value in *ip and returns js_true. on error or exception, it returns js_false, and the value left in *ip is undefined. see also js::touint16 js::toint32 js::touint32 js::toint64 js::touint64 js::tonumber bug 933810 bug 933946 ...
JS_ValueToFunction
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v js::handlevalue the value to convert. description js_valuetofunction converts a specified javascript value, v, to a function. ...
... represents only the compiled code and not the environment of the function. unless the function happens to be a native function, this means it isn't attached to any global or enclosing scope, and therefore must not be treated like a real function. instead, use jsval_is_object and js_objectisfunction() to check whether a value is already a function, or use js_convertvalue() to convert a value to js
type_function safely. if v is a function object, this returns the associated jsfunction. if v is null, undefined, a boolean, a number, or a string, a
typeerror is reported and js_valuetofunction returns null. otherwise, v is an object. the javascript engine attempts to convert it to a function. (implementation note: the actual conversion is performed by the object itself. the object's jsobjecto...
...if conversion fails with an error or exception, js_valuetofunction returns null. ...
Property attributes
an application can set property attributes when creating a property. ...
... mxr id search for jsprop_setter jsprop_shared the property is shared. this is usually the right thing for properties that have getters or setters. this has three effects: the javascript engine does not set aside any memory for the property's value. the value is determined entirely by the getter. (the property has no stored value.) assignment via the proto
type chain is affected. assigning to obj.x, where obj inherits a non-shared property from its proto
type, creates a new own data property on obj; the proto
type's .x is not shared with its children. if the inherited property is shared, the setter is called instead. if the property is also jsprop_permanent, then certain aspects of inheriting the property via the proto
type chain are affected. do not ...
...ee bug 575997. mxr id search for jsprop_shared jsprop_index the property's id is represented internally as an integer, not a string. obsolete since jsapi 39 this flag has an additional special meaning when used with js_defineproperty, js_fs, and other apis that define properties: 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. added in spidermonkey 38 mxr id search for jsprop_define_late jsfun_stub_gsops use js_p...
jschar
functions that use jschar will use char16_t directly. embedder code should use char16_t, too. (see bug 1063962.) as required by the ecmascript standard, ecma 262-3 §4.3.16", javascript strings are arbitrary sequences of 16-bit values. ...
...functions that use jschar will use char16_t directly. embedder code should use char16_t, too. (see bug 1063962.) as required by the ecmascript standard, ecma 262-3 §4.3.16", javascript strings are arbitrary sequences of 16-bit values. ...
...functions that use jschar will use char16_t directly. embedder code should use char16_t, too. (see bug 1063962.) as required by the ecmascript standard, ecma 262-3 §4.3.16", javascript strings are arbitrary sequences of 16-bit values. ...
SavedFrame
nt has (a -> c), or it can view all stack frames, including the frames from chrome compartments (a -> b -> c). to view everything, use an xraywrapper. this is the default wrapper. ...
...for example, if this frame’s children are calls to handlers for a promise this frame created, this frame’s asynccause would be "promise". if the asynchronous call was started in a descendant frame to which the requester of the property does not have access, this will be the generic string "async". ...
...here the promise was created. if the frame responsible for the call is not accessible to the caller, this points to the youngest accessible ancestor of the real frame, if any. in all other cases, this is null. parent this stack frame’s caller, or null if this is the oldest frame on the stack. in this case, there might be an asyncparent instead. function properties of the savedframe.proto
type object tostring return this frame and its parents formatted as a human readable stack trace string. source metadata generated from file: js/src/doc/savedframe/savedframe.md watermark: sha256:3475238d6704c659cb3e411b9c601d6ee836762dea14203f1f00ecf2c3b32452 changeset: 251fccc1f62b ...
A Web PKI x509 certificate primer
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 directed mostly at what
type of application the certificate was issued for. examples of extended key usages are: serverauth, clientauth, and ocspsigning. for end-entity certificates for pki this extension is required to exist with the serverauth bit asserted. name constraints this is an extension exclusive for ca and indicates limits on the name space for its children. this is one of the most powerful extensions for busine...
...using the certificate manager. some organizations make use of the set of cas included in mozilla's products. if you wish to do this, you should read the relevant part of the mozilla ca faq before doing so. running your own ca if you are going to have your own ca, we recommend building 3 certificates: a long term root cert, a medium term intermediate cert, and a short term end-entity cert. this
type of hierarchy allows for a relatively simple long term root to be distributed to clients, and some flexibility on the intermediate cert so that you can change parameters based on best practices and security research. generate your ca root update *.example.com and *.example.net below to match your domains. assumptions: you are the domain owner of *.example.com and *.example.net. your compute...
...e algorithm re-sign the certificate using a modern algorithm sec_error_expired_certificate a certificate is too old to be used re-generate the certificate sec_error_extension_value_invalid a certificate has an extension with an empty value re-generate the certificate without the extension, or re-generate it with a non-empty value sec_error_inadequate_cert_
type a certificate has an extended key usage extension that does not assert a required usage, or an end-entity certificate asserts the id-kp-ocspsigning usage when it shouldn't re-generate the certificate with the appropriate extended key usage values sec_error_inadequate_key_usage a certificate has a key usage extension that does not assert a required usage re-generate the certif...
Generic factory
rface that can be reused anytime a simple implementation of nsifactory is needed. here is the interface, and a description of its use. /** * provides a generic nsifactory implementation that can be used by * dlls with very simple factory needs. */ class nsigenericfactory : public nsifactory { public: static const nsiid& iid() { static nsiid iid = ns_igenericfactory_iid; return iid; }
typedef ns_callback(constructorprocptr) (nsisupports *aouter, refnsiid aiid, void **aresult); /** * establishes the generic factory's constructor function, which will be called * by createinstance. */ ns_imethod setconstructor(constructorprocptr constructor) = 0; }; using nsigenericfactory is simple. create a new instance from the repository with a cid of ns_genericfactory_ci...
...shes the generic factory's constructor function, which will be called * by createinstance. */ ns_imethod setconstructor(constructorprocptr constructor) = 0; }; using nsigenericfactory is simple. create a new instance from the repository with a cid of ns_genericfactory_cid, and and iid of ns_igenericfactory_iid. define a constructor function that matches the constructorprocptr proto
type, and call nsigenericfactory::setconstructor with a pointer to that function. you're done. you now have a fully functional factory object. examples class nsicomponent : public nsisupports { public: ns_imethod dosomething() = 0; }; class mycomponent : public nsicomponent { public: mycomponent(); virtual ~mycomponent(); static ns_method create(nsisupports *aouter, refnsiid aiid, void **a...
...face, addref, release implementations) if we just use the following class for all of the simple factories: // idea: why not create a generic factory facility so we can avoid // duplication of so much nsifactory code? all we need is an allocator // function, the rest of the implementation is exactly the same. ...
Packaging WebLock
the first section, component installation overview, describes the general installation process in mozilla. the following sections describe the steps you can take to organize the weblock component for distribution and installation. ...
...des such essential methods[essential-methods] as initinstall, registerchrome, addfile, and others. ...
...ancelinstall(err); the weblock trigger script the trigger script is the script placed on a web page that actually initiates an xpinstall installation and calls the installation script that appears in the xpi. the following html specifies a complete webpage in which the trigger script is defined as a javascript function, installweblock, that gets called when the user clicks the hyperlink. ...
Creating XPCOM components
at uses xpidl but you should use webidl instead. ...
...stead. ...
... who should read this book organization of the tutorial following along with the examples conventions acknowledgements an overview of xpcom the xpcom solution gecko components interfaces interfaces and encapsulation the nsisupports base interface xpcom identifiers cid contract id factories xpidl and
type libraries xpcom services xpcom
types method
types reference counting status codes variable mappings common xpcom error codes using xpcom components component examples cookie manager the webbrowserfind component the weblock component component use in mozilla finding mozilla components using xpcom components in your cpp xpconnect: using xpcom components from script component internals creating compo...
How to build a binary XPCOM component using Visual Studio
lue_s.lib create an xpcom component a full tutorial of xpcom is beyond the scope of this posting. check out the resources at the end of the tutorial for more information on the world of xpcom. ok then, on with the basic, oversimplified example. your xpcom component is made up of 3 parts: component interface described using idl. the interface defines the methods, including arguments and return
types, of the component. component implementation using c++. the implementation is where the methods actually do the work. component factory module, also in c++. the factory is in charge of creating instances of the implementations. let’s specify a simple interface: #include "nsisupports.idl" [scriptable, uuid(263ed1ba-5cc1-11db-9673-00e08161165f)] interface ispecialthing : nsisupports { attr...
... module, also in c++. the factory is in charge of creating instances of the implementations. let’s specify a simple interface: #include "nsisupports.idl" [scriptable, uuid(263ed1ba-5cc1-11db-9673-00e08161165f)] interface ispecialthing : nsisupports { attribute astring name; long add(in long a, in long b); }; remember to generate your own guid. ...
...you can take the code and create implementation h and cpp files. ...
nsACString
« xpcom api reference summary the nsacstring abstract class represents a character string composed of single-byte storage units. this class is typically used to represent ascii or utf-8 character arrays. #include "nsstringapi.h" class nsacstring { ... };
typedefs char_
type [char] storage unit for this class. self_
type [nsacstring] an alias for the
type of this class. size_
type [pruint32]
type used to represent the number of bytes stored in the string. ...
...ing composed of single-byte storage units. this class is typically used to represent ascii or utf-8 character arrays. #include "nsstringapi.h" class nsacstring { ... };
typedefs char_
type [char] storage unit for this class. self_
type [nsacstring] an alias for the
type of this class. size_
type [pruint32]
type used to represent the number of bytes stored in the string. index_
type [pruint32]
type used to represent an offset into the string. methods beginreading the beginreading function returns a const pointer to the first element of the string's internal buffer. endreading the endreading function returns a const char_
type pointer to the element just beyond the last element of the string's internal buffer. length the length function returns the number of s...
... the string's internal buffer. operators operator= this operator is a shortcut for the assign family of functions. operator+= this operator is a shortcut for the append family of functions. remarks the nsacstring class is never instantiated directly. it should be instantiated using a subclass, such as nsembedcstring. nsacstring corresponds to the acstring and autf8string xpidl data
types. nsacstring by itself does not imply a particular character encoding. that is, it may be used to store utf-8 characters, ascii characters, or any random binary data. the character encoding in use for a particular nsacstring instance depends on the context in which it is used. if used with xpidl, then the character encodings of the corresponding xpidl data
types applies. nsacstring may even hold...
nsACString_internal
a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
... appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar data members no public members. methods constructors void nsacstring_internal(const nscsubstringtuple&) - source this is public to support automatic conversion of tuple to string base
type, which helps avoid converting to nstastring. parameters nscsubstringtuple& tuple void nsacstring_internal(char*, pruint32, pruint32) - source parameters char* data pruint32 length pruint32 flags beginreading char* beginreading() const - source reading iterators nsreadingiterator<char>& beginreading(nsreadingiterator<char>&) const - source deprecated reading iterators parameter...
...data(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_
type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source stri...
nsAString
« xpcom api reference summary the nsastring abstract class represents a character string composed of double-byte storage units. this class is typically used to represent unicode character arrays. #include "nsstringapi.h" class nsastring { ... };
typedefs char_
type [prunichar] storage unit for this class. self_
type [nsastring] an alias for the
type of this class. size_
type [pruint32]
type used to represent the number of double-byte units stored in the string. ...
...ble-byte storage units. this class is typically used to represent unicode character arrays. #include "nsstringapi.h" class nsastring { ... };
typedefs char_
type [prunichar] storage unit for this class. self_
type [nsastring] an alias for the
type of this class. size_
type [pruint32]
type used to represent the number of double-byte units stored in the string. index_
type [pruint32]
type used to represent an offset into the string. methods beginreading the beginreading function returns a const pointer to the first element of the string's internal buffer. endreading the endreading function returns a const char_
type pointer to the element just beyond the last element of the string's internal buffer. length the length function returns th...
...f the string's internal buffer. operators operator= this operator is a shortcut for the assign family of functions. operator+= this operator is a shortcut for the append family of functions. remarks the nsastring class is never instantiated directly. it should be instantiated using a subclass, such as nsembedstring . nsastring corresponds to the astring and domstring xpidl data
types. nsastring by itself does not imply a particular character encoding. that is, it may be used to store utf-16 characters, ucs-2 characters, or any random double-byte data. the character encoding in use for a particular nsastring instance depends on the context in which it is used. if used with xpidl, then the character encodings of the corresponding xpidl data
types applies. nsastring may even ho...
nsAString_internal
a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...d appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar data members no public members. methods constructors void nsastring_internal(const nssubstringtuple&) - source this is public to support automatic conversion of tuple to string base
type, which helps avoid converting to nstastring. parameters nssubstringtuple& tuple void nsastring_internal(prunichar*, pruint32, pruint32) - source parameters prunichar* data pruint32 length pruint32 flags beginreading prunichar* beginreading() const - source reading iterators nsreadingiterator<short unsigned int>& beginreading(nsreadingiterator<short unsigned int>&) const - source...
...ichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_
type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
imgILoader
imgirequest loadimage( in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, ...
...imgirequest loadimage( in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx,...
...s method is called, and there must have been no ondataavailable calls for it yet. aobserver the observer (may be null) cx some random data. alistener a listener that you must send the channel's notifications and data to. can be null, in which case imagelib has found a cached image and is not interested in the data. achannel will be canceled for you in this case. return value supportimagewithmime
type() checks if a decoder for the an image with the given mime
type is available. boolean supportimagewithmime
type( in string mime
type ); parameters mime
type the
type to find a decoder for. return value true if a decoder is available, false otherwise. ...
nsIApplicationCacheNamespace
o 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) application caches can store a set of namespace entries that affect loads from the application cache. if a load from the cache fails to match on an exact cache entry, the namespace entries are searched for a substring match. ...
... 3.0 / seamonkey 2.0) application caches can store a set of namespace entries that affect loads from the application cache. if a load from the cache fails to match on an exact cache entry, the namespace entries are searched for a substring match. method overview void init(in unsigned long item
type, in acstring namespacespec, in acstring data); attributes attribute
type description data acstring data associated with the namespace, such as a fallback. how this attribute is used varies depending on the namespace
type. if the data is a uri, this attribute should be the uri's asciispec. read only. item
type unsigned long a bit field indicating one or more namespace
types. must be one or more of the constants defined under constants on...
...tstead. namespace_opportunistic 4 items matching this namespace should be cached opportunistically. successful top-level loads of resources in this namespace should be placed into the application cache. this can be combined with namespace_fallback to provide a fallback entry in the data attribute. methods init() initializes the namespace. void init( in unsigned long item
type, in acstring namespacespec, in acstring data ); parameters item
type the namespace
type. namespacespec the namespace's prefix. data the data to associate with the namespace. see also offline resources in firefox nsiapplicationcache nsiapplicationcachecontainer nsiapplicationcachechannel nsiapplicationcacheservice nsidomofflineresourcelist ...
nsIComponentRegistrar
registration lasts for this run only, and is not cached. note: formerly this method would register component files directly. this is no longer supported...
...entified by classid, and creates an association of class name and contractid with the class. however, unlike registerfactory(), the location of the component containing the factory implementation is specified instead of the factory instance. void registerfactorylocation( in nscidref aclass, in string aclassname, in string acontractid, in nsifile afile, in string aloaderstr, in string a
type ); parameters aclass the classid of the class being registered. aclassname the name of the class being registered. this value is intended as a human-readable name for the class and need not be globally unique. acontractid the contractid of the class being registered. afile a component file. this file must have an associated loader and export the required symbols, which the loader specifies. alo...
...need not be globally unique. acontractid the contractid of the class being registered. afile a component file. this file must have an associated loader and export the required symbols, which the loader specifies. aloaderstr opaque loader specific string. this value is passed into the nsimodule.registerself() callback and must be forwarded unmodified when registering factories via their location. a
type component
type of aclass. this value is passed into thensimodule.registerself() callback and must be forwarded unmodified when registering factories via their location. unregisterfactory() unregister a factory associated with a particular class identified by classid. void unregisterfactory( in nscidref aclass, in nsifactory afactory ); parameters aclass the classid of the class being unreg...
nsICookieService
cvs blame will tell you why it is here. it remains until we can find a better home for it. methods getcookiestring() get the complete cookie string associated with the uri. string getcookiestring( in nsiuri auri, in nsichannel achannel ); parameters auri the ur...
...terface. getcookiestring() will query the documenturi property off of nsihttpchannelinternal if supported, so getcookiestring() can be used in place of this method. string getcookiestringfromhttp( in nsiuri auri, in nsiuri afirsturi, in nsichannel achannel ); parameters auri the uri of the document for which cookies are being queried. afirsturi the uri that the user originally
typed in or clicked on to initiate the load of the document referenced by auri. achannel the channel used to load the document. this parameter may be null, but it is strongly recommended that a non-null value be provided to ensure that the cookie privacy preferences are honored. return value returns the resulting cookie string. setcookiestring() set the cookie string associated with the uri. n...
...ring() could also query the date header from the channel if achannel supports nsihttpchannel. void setcookiestringfromhttp( in nsiuri auri, in nsiuri afirsturi, in nsiprompt aprompt, in string acookie, in string aservertime, in nsichannel achannel ); parameters auri the uri of the document for which cookies are being queried. afirsturi the uri that the user originally
typed in or clicked on to initiate the load of the document referenced by auri. aprompt the prompt to use for all user-level cookie notifications. acookie the cookie string to set. aservertime the expiry information of the cookie (the date header from the http response). achannel the channel used to load the document. this parameter may be null, but it is strongly recommended that a non-null v...
nsICryptoHash
n the returned value is binary data. return value this method returns a hash of the data that was read by this object. this can be either binary data or a base-64 encoded string. exceptions thrown ns_error_not_initialized indicates that init() or initwithstring() has not been called. init() initialize the hashing object. ...
... called multiple times with different algorithm
types. note: this method or " .. manch("initwithstring") .. " must be called before any other method on this interface is called. void init( in unsigned long aalgorithm ); parameters aalgorithm the hash algorithm to use. must be one of the hash algorithms. exceptions thrown ns_error_invalid_arg indicates that an unsupported algorithm
type was passed initwithstring() initialize the hashing object. this method may be called multiple times with different algorithm
types. note: this method or " .. manch("init") .. " must be called before any other method on this interface is called. void initwithstring( in acstring aalgorithm ); parameters aalgorithm the hash algorithm
type to be used as a string, such as "sha256". exce...
...see computing the hash of a string for an example of using this method. void update( [const, array, size_is(alen)] in octet adata, in unsigned long alen ); parameters adata a buffer to calculate the hash over. alen the length of the buffer adata. ...
nsIDOMFontFace
s last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) this object describes a single font. it's returned in a list you can get using inidomutils.getusedfontfaces(). attributes font source attributes these attributes indicate how the font was found during the font matching process. note: the same physical font may have been found in multiple ways within a range. attribute
type description fromfontgroup boolean indicates whether or not the font was located in a font group. read only. fromlanguageprefs boolean indicates whether or not the font was located using language preferences. read only. fromsystemfallback boolean indicates whether or not the font is the system fallback font. read only. attributes available for all fonts these attributes are always availab...
...omfontgroup boolean indicates whether or not the font was located in a font group. read only. fromlanguageprefs boolean indicates whether or not the font was located using language preferences. read only. fromsystemfallback boolean indicates whether or not the font is the system fallback font. read only. attributes available for all fonts these attributes are always available. attribute
type description cssfamilyname domstring a family name that could be used in css font-family (not necessarily the actual name that was used, due to aliases, generics, localized names, and so on). read only. name domstring full font name as obtained from the font resource. read only. attributes only available when specified with @font-face these attributes only have meaningful values when the fo...
... could be used in css font-family (not necessarily the actual name that was used, due to aliases, generics, localized names, and so on). read only. name domstring full font name as obtained from the font resource. read only. attributes only available when specified with @font-face these attributes only have meaningful values when the font is a user font defined using @font-face. attribute
type description format domstring the font format. read only. localname domstring null if not a src:local(...) rule. read only. metadata domstring xml metadata from woff file(if any). read only. rule nsidomcssfontfacerule null if no associated @font-face rule. read only. srcindex long index in the rule's src list, -1 if no @font-face rule. read only. uri domstring null if not a downloaded ...
nsIDOMMozTouchEvent
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. ...
...this is a random number that is guaranteed to remain the same for each finger during all moztouchmove events between the corresponding moztouchdown and moztouchup events. methods initmoztouchevent() initializes the touch event. void initsimplegestureevent( in d...
...ion streamid unsigned long a unique identifier for each finger, so that each finger's movement can be tracked separately. this is a random number that is guaranteed to remain the same for each finger during all moztouchmove events between the corresponding moztouchdown and moztouchup events. methods initmoztouchevent() initializes the touch event. ...
nsIDOMNSHTMLDocument
efox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring getselection(); nsidomdocument open(in acstring acontent
type, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); boolean querycommandstate(in domstring commandid); boolean querycommandsupported(in domstring commandid); domstring querycommandtext(in domstring commandid); obsolete since gecko 14.0 domstring querycommandvalue(in ...
...read only. designmode domstring set to "on" or "off" to enable or disable editing for the ...
...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(); parameters none. return value the text of the current selection, the same as window.getselection.tostring(). open() nsidomdocument open( in acstring acontent
type, in boolean areplace ); parameters acontent
type the content
type of the new document. if the
type is not supported by the html content sink, trying to write to the document will probably throw. areplace whether the document should replace the existing document in session history. return value the new document. querycommandenabled() boolean querycommandenabled( in domstring ...
nsIDOMNode
dom/interfaces/core/nsidomnode.idlscriptable this interface is the primary data
type for the entire document object model. it represents a single node in the document tree. inherits from: nsisupports last changed in gecko 0.9.6 method overview nsidomnode appendchild(in nsidomnode newchild) nsidomnode clonenode(in boolean deep); boolean hasattributes(); boolean haschildnodes(); nsidomnode insertbefore(in nsidomnode newchild, in nsidomnode refchild) boolean issupported(in domstring feature, in domstring version); void normalize(); nsidomnode removechild(in nsidomnode oldchild) nsidomnode replacechild(in nsidomnode newchild, in nsidomnode oldchild) attributes attribute
type description attributes nsidomnamednodemap read only. childnodes nsidomnodelist r...
... nodevalue domstring ownerdocument nsidomdocument read only. parentnode nsidomnode read only. prefix domstring previoussibling nsidomnode read only. ...
...tring ownerdocument nsidomdocument read only. parentnode nsidomnode read only. prefix domstring previoussibling nsidomnode read only. constants constant value description element_node 1 attribute_node 2 text_node 3 cdata_section_node 4 entity_reference_node 5 entity_node 6 processing_instruction_node 7 comment_node 8 document_node 9 document_
type_node 10 document_fragment_node 11 notation_node 12 methods appendchild() nsidomnode appendchild( in nsidomnode newchild ); parameters newchild return value clonenode() nsidomnode clonenode( in boolean deep ); parameters deep return value hasattributes() boolean hasattributes(); parameters none. return value haschildnodes() boolean haschildnodes(); parameters none. re...
nsIDOMWindow
read only. note: prior to gecko 7.0 this attribute was part of nsidomwindow2. document nsidomdocument the document contained in the window. read only. frames nsidomwindowcollection the child windows for this window. read only. native code only! ...
...m the same origin that inserted the data into storage in the first place. read only. note: prior to gecko 8.0 this attribute was part of nsidomstoragewindow. name domstring get or set the name of this window. this attribute is "replaceable" in javascript. parent nsidomwindow the window's parent window. if there is no parent window, or if the parent is of a different
type, this is the current window. the window hierarchy does not cross chrome-content boundaries. read only. scrollx long the current horizontal (x) scroll position, in pixels. this attribute is "replaceable" in javascript. read only. scrolly long the current vertical (y) scroll position, in pixels. this attribute is "replaceable" in javascript. read only. scrollb...
...d error may be returned by implementations not supporting zoom. this attribute should always return 1.0 for implementations not supporting text zoom. 1.0 represents normal (unzoomed) size. native code only! top nsidomwindow the root window for the hierarchy of windows that contain this nsidomwindow. this is the window itself if there is no parent, or if the parent is of a different
type. the window hierarchy does not cross chrome-content boundaries. this attribute is "replaceable" in javascript. read only. windowroot nsidomeventtarget the window root for this window. this is useful for connecting event listeners to this window as well as every other window nested in that window root. read only. native code only! note: prior to gecko 7.0 this attribute was part of ...
nsIDOMXPathEvaluator
note: prior to gecko 1.9, you could call this method on documents other than the one you planned to run the xpath against; starting with gecko 1.9, however, you must call it on the same document. nsidomxpathexpression createexpression( in domstring ex...
...are used. nsidomxpathnsresolver creatensresolver( in nsidomnode noderesolver ); parameters noderesolver the node to be used as a context for name space resolution. return value a name space resolver. evaluate() evaluate the specified xpath expression. nsisupports evaluate( in domstring expression, in nsidomnode contextnode, in nsidomxpathnsresolver resolver, in unsigned short
type, in nsisupports result ); parameters expression a string representing the xpath to be evaluated. contextnode a dom node to evaluate the xpath expression against. to evaluate against a whole document, use the document.documentelement. resolver a name space resolver created by creatensresolver(), or a user defined name space resolver. read more on implementing a user def...
... representing the xpath to be evaluated. contextnode a dom node to evaluate the xpath expression against. to evaluate against a whole document, use the document.documentelement. resolver a name space resolver created by creatensresolver(), or a user defined name space resolver. read more on implementing a user defined namespace resolver if you wish to take the latter approach.
type a number that corresponds to one of the
type constants of nsixpathresult. result an existing nsixpathresult to use for the result. using null will create a new nsixpathresult. return value an xpath result. see also introduction to using xpath in javascript document.evaluate dom level 3 xpath specification xml path language (xpath)rec nsidomxpathresult nsidomxpathexception ...
nsIEventListenerInfo
returned by nsieventlistenerservice.getlistenerinfofor, which provides a list of all the listeners to a given event target. ...
...read only. methods getdebugobject() returns the debugger object if the debug service is active. nsisupports getdebugobject(); parameters none. return value if jsdidebuggerservice is active and the listener is implemented in js, this returns the listener as a jsdivalue. otherwise null. ...
... description allowsuntrusted boolean indicates whether or not the event listener allows untrusted events. read only. capturing boolean indicates whether or not the event listener is in capture mode. read only. insystemeventgroup boolean indicates whether or not the event listener is in the system event group. read only.
type astring the
type of the event for which the listener was added. read only. methods getdebugobject() returns the debugger object if the debug service is active. nsisupports getdebugobject(); parameters none. return value if jsdidebuggerservice is active and the listener is implemented in js, this returns the listener as a jsdivalue. otherwise null. this is the method you should use if you want to get access...
ExtensionManager (Toolkit)
the extensionmanager follows the nsiextensionmanager api. note: this api is obsolete starting in gecko 2.0, and has been replaced by the new add-on manager. ...
... the extensionmanager follows the nsiextensionmanager api. note: this api is obsolete starting in gecko 2.0, and has been replaced by the new add-on manager. ...
...iextensionmanager api. note: this api is obsolete starting in gecko 2.0, and has been replaced by the new add-on manager. ...
nsIFaviconDataCallback
nents/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 / seamonkey 2.1) method overview void oncomplete(in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amime
type); 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 some method we could not k...
...tation 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 some method we could not know the favicon's data (it could just be too expensive to get it, or the method does not require we actually have any data). it's up to the caller to check adatalen > 0 before using any data-related information like mime-
type or data itself. void oncomplete( in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amime
type ); parameters auri receives the "favicon uri" (not the "favicon link uri") associated to the requested page. this can be null if there is no associated favicon uri, or the callback is notifying a failure. adatalen ...
...receives the "favicon uri" (not the "favicon link uri") associated to the requested page. this can be null if there is no associated favicon uri, or the callback is notifying a failure. adatalen size of the icon data in bytes. notice that a value of 0 does not necessarily mean that we don't have an icon. adata icon data, or an empty array if adatalen is 0. amime
type mime
type of the icon, or an empty string if adatalen is 0. ...
nsIHttpChannel
this should be set to false, for example, if the application knows that the corresponding document is likely to be very large. this attribute is true by default, though other fa...
...avalue, in boolean amerge ); parameters aheader the case-insensitive name of the request header to query (for example "cookie"). avalue the request header value to set (for example "x=1"). amerge if true, the new header value will be merged with any existing values for the specified header. this flag is ignored if the specified header does not support merging (for example the "content-
type" header can only have one value). the list of headers for which this flag is ignored is an implementation detail. if this flag is false, then the header value will be replaced with the contents of avalue. exceptions thrown ns_error_in_progress if called after the channel has been opened. ns_error_failure if called during visitrequestheaders(). setresponseheader() set the value of a pa...
..., in boolean merge ); parameters header the case-insensitive name of the response header to set(for example "cache-cookie"). value the response header value to set (for example "no-cache"). merge if true, the new header value will be merged with any existing values for the specified header. this flag is ignored if the specified header does not support merging (for example the "content-
type" header can only have one value). the list of headers for which this flag is ignored is an implementation detail. if this flag is false, then the header value will be replaced with the contents of value. exceptions thrown ns_error_not_available if called before the response has been received (before onstartrequest()). ns_error_illegal_value if changing the value of this response header is...
nsIMarkupDocumentViewer
docshell/base/nsimarkupdocumentviewer.idlscriptable describes the properties of a content viewer for an html or xml markup document. inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) method overview void scrolltonode(in nsidomnode node); void sizetocontent(); attributes attribute
type description allowplugins boolean if true, plugins are allowed within the doc shell. default = true. obsolete since gecko 1.8 authorstyledisabled boolean disable entire author style level (including html presentation hints) bidicharacterset octet whether to force the user's character set 1 - use the document character set 2 - use the character set chosen by the user...
...) bidicharacterset octet whether to force the user's character set 1 - use the document character set 2 - use the character set chosen by the user. obsolete since gecko 6.0 bidicontrolstextmode octet the order of bidirectional text in form controls. 1 - logical 2 - visual 3 - like the containing document. obsolete since gecko 2.0 bidinumeral octet the
type of numerals to display. 1 - depending on context, default is arabic numerals 2 - depending on context, default is hindi numerals 3 - arabic numerals 4 - hindi numerals. bidioptions pruint32 use this attribute to access all the bidi options in one operation. bidisupport octet whether to use platform bidi support or mozilla's bidi support 1 - use mozilla's bidi support...
...use platform bidi support or mozilla's bidi support 1 - use mozilla's bidi support 2 - use the platform bidi support 3 - disable bidi support. biditextdirection octet options for bidi presentation. use these attributes to access the individual bidi options. the default direction for the layout of bidirectional text. 1 - left to right 2 - right to left. biditext
type octet the ordering of bidirectional text. this may be either "logical" or "visual". logical text will be reordered for presentation using the unicode bidi algorithm. visual text will be displayed without reordering. 1 - the default order for the charset 2 - logical order 3 - visual order. defaultcharacterset acstring forcecharacterset acstring full...
nsIMemoryReporter
porter 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 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 / seamonkey 2.4), and its
type was long long. description autf8string a human-readable description of this m...
...s reporter. each reporter starts with an empty string for this value, indicating that it applies to the current process; this is true even for reporters in a child process. when a reporter from a child process is copied into the main process, the copy's process field is set appropriately. read only. units print32 the units used by the amount attribute; this will be one of the unit
type constants. read only. constants memory reporter kind constants these allocation kind constants describe the
types of memory allocation described by memory use reporters. constant value description kind_mapped 0 this is deprecated synonym for kind_nonheap. deprecated since gecko 8.0 kind_nonheap 0 allocated directly by os calls e.g. mmap, virtua...
...ption kind_mapped 0 this is deprecated synonym for kind_nonheap. deprecated since gecko 8.0 kind_nonheap 0 allocated directly by os calls e.g. mmap, virtualalloc, vm_allocate etc. kind_heap 1 allocated by the heap allocator, e.g. 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 / seamonkey 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 ...
nsIMsgCompFields
« xpcom api reference summary the nsimsgcompfields interface provides properties for an composition of an outgoing message. ...
... when 'send anyway' is selected by a user. ...
...ents, in prbool emailaddressonly ); void convertbodytoplaintext ( ); attachment handling methods void addattachment ( in nsimsgattachment attachment ); void removeattachment ( in nsimsgattachment attachment ); void removeattachments ( ); header methods void setheader(char* name, char* value); references this interface is the
type of the following properties: nsimsgcompose.compfields, nsimsgcomposeparams.composefields this interface is passed as an argument to the following methods: nsimsgcomposesecure.begincryptoencapsulation, nsimsgcomposesecure.requirescryptoencapsulation, nsimsgsend.createandsendmessage, nsimsgsend.sendmessagefile, nsismimejshelper.getnocertaddresses, nsismimejshelper.getrecipientcertsinfo ...
nsIMsgRuleAction
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilter.idl [scriptable, uuid(190a2a18-d245-473a-a402-9f0814598c7f)] interface nsimsgruleaction : nsisupports { attribute nsmsgruleaction
type type; // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; // target label. ...
...action
type type; // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; // target label. ...
...smsgpriorityvalue priority; // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; // target label. ...
nsIParentalControlsService
n microsoft windows vista and newer as well as android 4.3 and newer. implemented by: @mozilla.org/parental-controls-service;1. ...
...read only. loggingenabled boolean true if the current user account has parental controls logging enabled. ...
...e if the current user account has parental controls logging enabled. if this is true, applications should log relevant events using log() method. read only. parentalcontrolsenabled boolean true if the current user account has parental controls restrictions enabled. read only. constants constant value description epclog_urivisit 1 this log entry
type represents an access to web content. epclog_filedownload 2 this log entry
type represents a file download. methods log() logs an application specific parental controls event. void log( in short aentry
type, in boolean aflag, in nsiuri asource, in nsifile atarget optional ); parameters aentry
type the
type of event to log. see the constants for allowed values. ...
nsIScriptableIO
invalid_arg auri was null. newinputstream() retrieves a stream from which data can be read. nsisupports newinputstream( in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize ); parameters abase the base object from which to read. this should be one of the following
types: nsifile: an object returned by getfile() or getfilewithpath(), or any object implementing the nsifile interface. nsitransport: a transport object such as a socket. nsiinputstream: a stream returned by a previous call to this method, or any other object that implements nsiinputstream. string: a string from which to read data. amode a space-delineated string of mode term...
...eam() retrieves a stream to which data can be written. nsisupports newoutputstream( in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize, [optional] in unsigned long apermissions ); parameters abase the base object to which to write. this should be one of the following
types: nsifile: an object returned by getfile() or getfilewithpath(), or any object implementing the nsifile interface. nsitransport: a transport object such as a socket. nsioutputstream: a stream returned by a previous call to this method, or any other object that implements nsioutputstream. amode a space-delineated string of mode terms controlling the manner in which the stre...
...e for this parameter. by default, the value 0664 is used. return value returns an nsioutputstream object to use for writing the stream. exceptions thrown ns_error_invalid_arg abase was null. ...
nsISelection2
read only. methods getrangesforinterval() return array of ranges intersecting with the given dom interval. void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjace...
...read only. methods getrangesforinterval() return array of ranges intersecting with the given dom interval. void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcoun...
...read only. methods getrangesforinterval() return array of ranges intersecting with the given dom interval. void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(...
nsISupports proxies
s, and compiled code can use compiled runnable to achieve the same effect in a much simpler manner. for more information about alternatives, see making cross-thread calls using runnables. the following interface is now obsolete: nsiproxyobjectmanager. about xpcom proxies a proxy, in this context, is a stub object which enables a method of any class which is derived from nsisupports and has a
typelib to be called on any in-process thread. the main reason for nsisupports proxies is that javascript and ui are on a single thread. when one is busy, the other is blocked. a good example of this is the old install.js scripts that were used in xpinstall in older mozilla versions. they from the majority of javascript code, which is small and can be quickly run. xpinstall installation scripts are ...
...oxy/public/nsiproxyobjectmanager.idl for the updated interface and its documentation. see also . from a users point of view, you need only to look at the nsiproxyobjectmanager. it has two entry points: ns_imethod getproxyforobject(nsieventqueue *destqueue, const nsiid & iid, nsisupports *object, print32 proxy
type, void * *result); ns_imethod getproxy(nsieventqueue *destqueue, const nsiid & cid, nsisupports *aouter, const nsiid & iid, print32 proxy
type, void * *result); the two apis are essentially the same. the only difference is that the first accepts a created object object...
...oid * *result); the two apis are essentially the same. the only difference is that the first accepts a created object object, and the latter will create an object for you. this creation will happen off the destination's event queue. for instance, if you need to not only use an object remotely, but also have it created remotely, use the second api. the iid that you are requesting must be in the
typelib. these means that you should have had to create and idl for it and have generated a
typelib. if you haven't, or you've never heard of these things, see http://www.mozilla.org/scriptable/ . the proxy
type parameter can be either two flags: proxy_sync or proxy_async. these two flags can also be ored with proxy_always. proxy_always will ensure that a proxy object is always created no matter what...
nsITextInputProcessor
{ key: "enter", // required. code: "enter", // optional. keycode: keyboardevent.dom_vk_return, // required if printable key, but optional if non-printable key. location: keyboardevent.dom_vk_standard, // optional, may be computed from code attribute value. repeat: false, ...
...true if it has composition. read only. constants constant value description attr_raw_clause 0x02 a clause attribute. this means that the clause is not converted, i.e., raw text of user input. attr_raw_selected_clause 0x03 a clause attribute...
...some methods of nsitextinputprocessor. you should/can specify following attribute values at creating a keyboardevent instance. other attributes are always ignored. especially, please note that modifier key states such as shiftkey are also ignored because each instance of nsitextinputprocessor manages modifier state which is modified when keydown() or keyup() is called with modifier key event.
type when you use the keyboardevent instance for a call of either keydown() or keyup(), this value should be empty string. otherwise, when you use the keyboardevent instance for a call of startcomposition(), flushpendingcomposition(), commitcomposition(), commitcompositionwith(), or cancelcomposition(), you can specify "keydown" or empty string. if "keydown" is specified, the methods don't dispatch ...
nsIUpdate
t 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 / seamonkey 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 to identify a particular build, down to the hour, minute, and second of its creation. this lets the system differentiate between several nightly builds with the s...
...no error. mem_error (1) a memory error occurred. usage_error (3) a usage error occurred; this needs to be described in more detail. crc_error (4) a checksum error occurred. parse_error (5) an error occurred while parsing the patch. read_error (6) an error occurred while reading the patch. write_error (7) an error occurred while writing the patched application. unexpected_error (8) an unanticipate
type of error occurred. extensionversion astring the add-on version of this update. used by the extension system to track compatibility of installed add-ons with this update. obsolete since gecko 2.0 installdate long long the date and time at which the update was installed. iscompleteupdate boolean true if the update is a complete replacement of the existing installation; false if the update i...
...e selected patch: "downloading" the update is being downloaded. "pending" the update is ready to be applied. "applying" the update is in the process of being applied. "succeeded" the update has been installed successfully. "download-failed" the update failed to be downloaded. "failed" installing the update failed. read only. statustext astring an optional message associated with the update.
type astring the
type of patch represented by the object: "major" a major new version of the application. "minor" a minor update, such as a security update. version astring the application version of the update.obsolete since gecko 2.0 methods getpatchat() retrieves a patch. nsiupdatepatch getpatchat( in unsigned long index ); parameters index the index of the patch to retrieve. return va...
nsIWindowWatcher
users must keep this attribute current, including after the topmost window is closed. this attribute will be null if the active window is not an nsidomwindow; for example, if the active win...
...users must keep this attribute current, including after the topmost window is closed. ...
...dow named aname. note: this method will try to set the default charset for the new window to the default charset of aparent. this is not guaranteed, however. note: this method may dispatch a "toplevel-window-ready" notification via nsiobserverservice if the window did not already exist. note: supported nsisupportsprimitive objects will be reflected into window.arguments as the base
type, however id, void and 64-bit primitive
types are not currently supported and will reflect into window.arguments as null. nsidomwindow openwindow( in nsidomwindow aparent, in string aurl, in string aname, in string afeatures, in nsisupports aarguments ); parameters aparent the parent window, if any. null if no parent. if it is impossible to get to an nsiwebbrowserchrome from apa...
nsIXULRuntime
rom: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/xre/app-info;1. to get an instance, use: var xulruntime = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime); method overview void invalidatecachesonrestart(); attributes attribute
type description accessibilityenabled boolean if true, the accessibility service is running. read only. browsertabsremoteautostart boolean if true, browser tabs may be opened by default in a different process from the main browser ui. read only. insafemode boolean whether the application was launched in safe mode. read only. is64bit ...
...counters startup errors that might prevent the app from showing proper ui, it should set this flag to true. os autf8string a string tag identifying the current operating system. this is taken from the os_target configure variable. it will always be available. read only. processid unsigned long the system process id of the caller's process. read only. process
type unsigned long the
type of the caller's process. returns one of process
type constants. read only. widgettoolkit autf8string a string tag identifying the target widget toolkit in use. this is taken from the moz_widget_toolkit configure variable. read only. xpcomabi autf8string a string tag identifying the binary abi of the current processor and compiler v...
...ble. this is taken from the target_xpcom_abi configure variable. it may not be available on all platforms, especially unusual processor or compiler combinations. the result takes the form <processor>-<compilerabi>, for example: x86-msvc ppc-gcc3. this value should almost always be used in combination with os. may throw ns_error_not_available. read only. constants process
type constants constant value description process_
type_default 0 the default (chrome) process. process_
type_plugin 1 a plugin subprocess. process_
type_content 2 a content subprocess. process_
type_ipdlunittest 3 ipdl unit testing subprocess. methods invalidatecachesonrestart() signal the apprunner to invalidate caches ...
Using the clipboard
gclipboardhelper = components.classes["@mozilla.org/widget/clipboardhelper;1"] .getservice(components.interfaces.nsiclipboardhelper); gclipboardhelper.copystring("put me on the clipboard, please."); this example will first create a clipboard helper and then copy a short string to the clipboard. this method only works to put strings on the clipboard. for other
types of data, such as urls or images, you will need to use a more complex method. a component @mozilla.org/widget/clipboard;1 and an interface nsiclipboard provide general access to the system clipboard. you can use them to copy and paste any
type of data from your application to the clipboard. three xpcom objects are needed to handle clipboard operations. the first is an object that holds the data ...
...iloadcontext obtained from the window that is the source of the clipboard data. this ensures that if the copied data comes from a window in private browsing mode, the clipboard will be cleared when private browsing mode ends. for reading from the clipboard you can call the init method of the transferable with null as nsiloadcontext, but you have to call it. tell the transferring object about the
type of data being copied. tell the transferring object about the data to copy. create a clipboard object which refers to the system clipboard. tell the clipboard object to copy the data using the transferring object. you might wonder why a transferring object is needed instead of just putting the object directly on the clipboard. one reason is that some systems do not copy the data right away. i...
...d. please note: the sourcewindow variable is a placeholder for whatever window owns the data being copied -- from any dom element you can obtain it via element.ownerdocument.defaultview. if, and only if, you are placing data on the clipboard that is unrelated to web content the user is viewing, you can pass a null privacy context to the init method. the next step is to tell the transferable what
type of data we want to use. the
type of data is referred to as a data flavor. the function adddataflavor is used to tell the transferable that it needs to transfer data of a certain flavor. in this case, we are transferring the flavor "text/unicode" which is a unicode string. then, the function settransferdata is called which copies the data from the string into the transferable. this function takes ...
wrappedJSObject
ample component to see how the wrappedjsobject property works, we need an example xpcom component implemented in js. see how to build an xpcom component in javascript for details on creating one. for simplicity we omit the component registration code. suppose we register the component below with the @myself.com/my-component;1 contract. // constructor function helloworld() { }; helloworld.proto
type = { hello: function() { return "hello world!"; }, queryinterface: function(aiid) { if (!aiid.equals(components.interfaces.nsisupports) && !aiid.equals(components.interfaces.nsihelloworld)) throw components.results.ns_error_no_interface; return this; } }; xpconnect wrapping now let's get a reference to our component. in this example we use getservice, but as...
...is; } }; xpconnect wrapping now let's get a reference to our component. in this example we use getservice, but as long as we get the reference from xpcom, our component gets wrapped by xpconnect in the same way: var comp = components.classes["@myself.com/my-component;1"].getservice(); if we try to call the hello() method we defined in our component implementation, we get: > comp.hello();
typeerror on line 1: comp.hello is not a function this happens because, as we mentioned earlier, comp is not the helloworld js object itself, but an xpconnect wrapper around it: > dump(comp); [xpconnect wrapped nsisupports] the idea of these wrappers is to make the javascript-implemented xpcom components look just like any other xpcom component to the user. this also makes the public interface of...
...r interface our component supports. assuming the nsihelloworld interface defines the hello method, we can now call it: > comp.hello() hello world! while this behavior is nice for production code as it forces you to clearly define the interfaces that should be used to access the component, it's inconvenient to write the interfaces (and recompile each time you change them) when working on a proto
type of the component. meet wrappedjsobject xpconnect lets you bypass its wrappers and access the underlying js object directly using the wrapper.wrappedjsobject property if the wrapped object allows this. more specifically, as xpconnect source comments say, you can get comp.wrappedjsobject if three conditions are met: comp really is an xpconnect wrapper around a js object. wrappers around non-j...
xptcall FAQ
rface without requiring additional per platform compiled code to be distributed. what does xptcall really do? the core invoke function has the declaration: xptc_public_api(nsresult) xptc_invokebyindex(nsisupports* that, pruint32 methodindex, pruint32 paramcount, nsxptcvariant* params); nsxptcvariant is a discriminated union of the
types that can be passed as parameters to the target function (including void* to represent arbitrary pointer
types). given the correct set of parameters, this function can call any method on any xpcom interface. xpconnect uses information from
typelib files to reflect arbitrary xpcom interfaces into javascript and to make calls from javascript to xpcom using xptc_invokebyindex. the information in th...
... the stubs (or impersonation) facility of xptcall allows for implementing a class which can, at runtime, pretend to be any xpcom interface. ...
...allows xpconnect to convert function parameters and build the nsxptcvariant array required to make this call. the stubs (or impersonation) facility of xptcall allows for implementing a class which can, at runtime, pretend to be any xpcom interface. this is done by providing a vtbl full of generic function stubs in xptcall. these stubs forward calls to a shared function whose job it is to use the
typelib information to extract the parameters from the platform specific calling convention to build an array of variants to hold the parameters and then call an inherited method which can then do whatever it wants with the call. this code also does the platform specific cleanup as the call returns. this all works and is being used in mozilla today on numerous platforms. why can't xptcall just be im...
XUL Overlays
file is loaded. since one of the main purposes of overlays is to provide ui for additions or components to the basic package, explicit loading can be somewhat problematic when the overlay defines optional ui elements. loading overlays explicitly a processing instruction is used to load overlay files explicitly into the master document. inserting the following processing instruction before the doc
type declaration in a base file tells the layout engine to load the named overlay file: <?xul-overlay href="chrome://component/content/componentoverlay.xul"?> where component is the name of the package being overlayed (e.g., chrome://navigator/content/navigatoroverlay.xul). the layout engine loads any overlay files and then flows the resulting xul document, so problems associated with incremental inse...
...he base file. for example, if only the last menuitem above had been in an overlay and the other items were defined in the base file, the overlayed menuitem would still appear at the top of the parent menu. attaching a script to an overlay to execute a script when an overlay is applied, use a <script> element: <script src="overlay.js"/> if you need to set the version of javascript, you can set the
type attribute: <script
type="application/x-javascript;version=1.8" src="overlay.js"/> ui reuse with overlays one of the biggest benefits of using overlays is that it allows you to reuse groups of elements that appear frequently in the ui. the overlay mechanism allows you to merge elements into existing subtrees, but it also allows you to store common ui elements in overlay files and merge them into a...
...s the overlay at the top: <?xul-overlay href="chrome://global/content/dialogoverlay.xul"?> and includes an empty box with an id of okcancelbuttons in the ui. the following snippet shows a dialog with custom ui elements at the top and a reference to the overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%" style="margin-bottom: 1em; width: 100%;"> <html:input
type="checkbox" id="dialog.newwindow"/> <html:label for="dialog.newwindow">&openwin.label;</html:label> <spring flex="100%"/> </box> <box id="okcancelbuttons"/> for more detail, see the ok and cancel button definitions being referenced here in the global component file platformdialogoverlay.xul. toolbars, submenus, boxes, and any other subtrees that appear in multiple places can be defined in overl...
Thunderbird Configuration Files
n mac os x, and on linux do edit > preferences on, select the advanced options panel, click on the general tab, and click on config editor. this will display a list of used preferences, as well as a search bar at the top. double-click on a preference to change its value. to do add a new preference, open the context menu (right-click) on any existing preference, go to the new menu, and select the
type of preference. some preferences may require that you restart thunderbird in order to take effect. configuration files some tips and tricks require that you edit configuration files manually. there are three files you should know about: userchrome.css used to change the appearance of the browser. usercontent.css used to change the appearance of web pages. user.js used to change various ...
...in your profile folder. the file does not exist by default, so you need to create it before you can start adding your preferences. in almost all cases, edits made using the user.js can be done via the config editor, which is the recommended method. windows users: if you know how to create a file, just skip this section. ...
...the config editor, which is the recommended method. windows users: if you know how to create a file, just skip this section. before you can create the file, you must make sure that you can see the file
type extensions in windows. start explorer (just click on the my computer icon on your desktop) and select tools > folder options. click the view tab and uncheck the hide extensions for known file
types option. now, go to your profile folder and select file > new > text document. the default name new text document.txt should be displayed. change the name to user.js (click yes on the file
type warning that appears). linux users: use your own preferred method to create user.js in the profile folder. if you don't already have one, consider running the following code in a terminal. $ cd $profile ...
Demo Addon
that keeps your code cleaner and simpler. it lets you iterate over any collection and transforms your collection elements in the given objects, to use fixiterator, you have to import it with cu.import("resource:///modules/iteratorutils.jsm");. demo 1 - iterate over all the accounts this demo is implemented in demo1.html in the content folder. ...
...ules/iteratorutils.jsm");. demo 1 - iterate over all the accounts this demo is implemented in demo1.html in the content folder. it lists all your email accounts with their account
type - either pop3 or imap - and the associated email addresses. let data = []; for each (let account in fixiterator(mailservices.accounts.accounts, ci.nsimsgaccount)) { let info = { server: null,
type: null, emails: [], name: null, }; let server = account.incomingserver; if (server) { info.server = server.prettyname; info.
type = server.
type; } for each (let id in fixiterator(account.identities, ci.nsimsgidentity)) { // we're only interested in identities that have a real email. if (id.email) info.emails.push(id.em...
... interested in identities that have a real email. if (id.email) info.emails.push(id.email); } data.push(info); } first, we use fixiterator() here to get all accounts in your profile. each account is a nsimsgaccount. to get the the server name, we access the incomingserver property of our account, which is a nsimsgincomingserver object. from this, we get its name and
type. because an account can have multiple identities of
type nsimsgidentity and therefore multiple associated email addresses, with use fixiterator() again to go over all identities and get every email address. demo 2 - find the inbox this demo shows various information: it lists all folders of an account (in this case the first one) and marks the inbox folder with a *. furthermore, it shows some ...
Using JS in Mozilla code
js language features that are implemented in the mozilla js engine are ordinarily safe to use in mozilla code. however, there are a few exceptions, listed here. js language features proper tail calls are not implemented. ...
... js language features that are implemented in the mozilla js engine are ordinarily safe to use in mozilla code. however, there are a few exceptions, listed here. js language features proper tail calls are not implemented. ...
... library features feature standard can be used in code new proxy(target, handler) es2015 yes, but getproto
typeof and setproto
typeof handlers are not yet implemented. ...
Zombie compartments
nts. roughly speaking, all memory used by javascript code that is from a particular origin (i.e. website) goes into its own compartment. firefox’s own javascript code also gets one or more compartments and so do add-on scripts. multiple compartments can share a zone, where a zone keeps track of things that can easily and securely be shared between related compartments such as string data and
type information. viewing live compartments if you want to see a list of live compartments,
type "about:memory" into the address bar and click on the measure button. in the results, you'll find a js-main-runtime-compartments tree (whcih you may need to expand further) that lists all system (firefox and add-ons) and user (website) compartments, these compartments are also listed in more detail in the...
...apes ā ā ā ā ā āāā1.47 mb (00.29%) ++ gc-heap ā ā ā ā ā āāā0.96 mb (00.19%) ++ malloc-heap ā ā ā ā āāā1.03 mb (00.21%) -- scripts ā ā ā ā ā āāā0.72 mb (00.14%) āā gc-heap [2] ā ā ā ā ā āāā0.31 mb (00.06%) āā malloc-heap/data [2] ā ā ā ā āāā0.80 mb (00.16%) --
type-inference ā ā ā ā ā āāā0.66 mb (00.13%) āā
type-scripts [2] ā ā ā ā ā āāā0.13 mb (00.03%) āā allocation-site-tables [2] ā ā ā ā ā āāā0.02 mb (00.00%) āā object-
type-tables [2] ā ā ā ā āāā0.01 mb (00.00%) -- sundries ā ā ā ā āāā0.01 mb (00.00%) āā malloc-heap [2] ā ā...
...0.00 mb (00.00%) āā property-tables ā ā āāāā5.93 mb (01.19%) -- js-zone(0x13ffa0000) ā ā āāā1.92 mb (00.39%) āā unused-gc-things ā ā āāā1.28 mb (00.26%) -- lazy-scripts ā ā ā āāā1.03 mb (00.21%) āā gc-heap ā ā ā āāā0.25 mb (00.05%) āā malloc-heap ā ā āāā1.24 mb (00.25%) āā
type-pool ā ā āāā1.07 mb (00.21%) --
type-objects ā ā ā āāā1.04 mb (00.21%) āā gc-heap ā ā ā āāā0.03 mb (00.01%) āā malloc-heap ā ā āāā0.23 mb (00.05%) ++ strings ā ā āāā0.18 mb (00.04%) āā gc-heap-arena-admin the first line says that the window from www.google.de is taking up 28.45 mb and futher b...
Accessibility Inspector - Firefox Developer Tools
currently selected item. the listed properties are as follows: name — the item's name, as described above. role — the item's role, as described above. actions — a list of actions that can be performed on the item, for example, a pushbutton would have "press" listed, while a link would have "jump" listed. value — the value of the item. this can mean different things depending on the
type of the item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the url in the corresponding <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"...
...n viewer: once opened, you can save or copy the data as necessary. the json viewer can also show you the raw json data on a separate tab in the viewer. check for accessibility issues you can check for accessibility issues by clicking the drop-down menu next to: check for issues. the available menu items include: none — don't show the possible list of issues all issues — check for all
types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the
type of issues you selected. depending on the size and complexity of your document, this may take a few seconds. when the scan is complete, the l...
...or issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the
type of issues you selected. depending on the size and complexity of your document, this may take a few seconds. when the scan is complete, the left side of the accessibility inspector panel displays only the items that have that
type of issue. in the right side of the panel, the checks subpanel lists the specific issue with the selected node. for each
type of issue, there is a learn more link to further information on mdn web docs about the issue. the menu items act as toggles. select the item to view that
type of issue; select the item again to clear the display of issues of that
type. issues with a particular item are a...
Waterfall - Firefox Developer Tools
so if you see a sign of a performance problem - a drop in the frame rate, for example - you can go to the waterfall to see what the browser was doing at that point in the recording. along the x-axis is time. ...
... doing at that point in the recording. along the x-axis is time. recorded operations, called markers, are shown as horizontal bars, laid out in a waterfall to reflect the serial nature of the browser's execution. when a marker is selected you'll see more information about it in a sidebar on the right. this includes the marker's duration and some more information that's specific to the marker
type. markers the markers for operations are color-coded and labeled. the following operations are recorded: name and description color detailed information dom event javascript code that's executed in response to a dom event. event
type for example, "click" or "message". event phase for example, "target" or "capt...
... appears, labeled "show allocation triggers". click the link to see the allocation profile leading up to this gc event. see allocations and garbage collection for more details. cycle collection reclaiming c++ reference-counted data structures. like garbage collection, but for c++ objects. see kyle huey's blog post about cycle collection.
type always "collect". cc graph reduction preparation/pre-optimization for cycle collection.
type always "forgetskippable". console the period between matching calls to console.time() and console.timeend(). timer name the argument passed to the console functions. stack at start ...
ANGLE_instanced_arrays.drawElementsInstancedANGLE() - Web APIs
the angle_instanced_arrays.drawelementsinstancedangle() method of the webgl api renders primitives from array data like the gl.drawelements() method. in addition, it can execute multiple instances of a set of elements. note: when using webgl2, this method is available as gl.drawelementsinstanced() by default. syntax void ext.drawelementsinstancedangle(mode, count,
type, offset, primcount); parameters mode a glenum specifying the
type primitive to render. possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws...
...e dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. count a glsizei specifying the number of elements to be rendered.
type a glenum specifying the
type of the values in the element array buffer. possible values are: gl.unsigned_byte gl.unsigned_short when using the oes_element_index_uint extension: gl.unsigned_int offset a glintptr specifying an offset in the element array buffer. must be a valid multiple of the size of the given
type. primcount a glsizei specifying the number of insta...
... if count or primcount are negative, a gl.invalid_value error is thrown. ...
AbstractRange - Web APIs
instead, you will use the range or staticrange interfaces. to understand the difference between those two interfaces, and how to choose which is appropriate for your needs. ...
...instead, you will use the range or staticrange interfaces. to understand the difference between those two interfaces, and how to choose which is appropriate for your needs. ...
...ified by the startoffset property, is located. startoffset read only an integer value indicating the offset, in characters, from the beginning of the node's contents to the last character of the contents referred to by the range object. this value must be less than the length of the node indicated in startcontainer. methods the abstractrange interface offers no methods. usage notes range
types all ranges of content within a document are described using instances of interfaces based on abstractrange. there are two such interfaces: range the range interface has been around for a long time and has only recently been redefined to be based upon abstractrange as the need arose to define other forms of range data. range provides methods that allow you to alter the range's endpoints, as ...
AnimationEvent() - Web APIs
it is case-sensitive and can be: 'animationstart', 'animationend', or 'animationiteration'. ...
...it is case-sensitive and can be: 'animationstart', 'animationend', or 'animationiteration'. ...
...it is case-sensitive and can be: 'animationstart', 'animationend', or 'animationiteration'. animationname optional a domstring containing the value of the animation-name css property associated with the transition. it defaults to "". ...
AudioConfiguration - Web APIs
the audioconfiguration dictionary of the media capabilities api defines the audio file being tested when calling mediacapabilities.encodinginfo() or mediacapabilities.decodinginfo() to query whether a specific audio configuration is supported, smooth, and/or power efficient. ...
...dioconfiguration dictionary of the media capabilities api defines the audio file being tested when calling mediacapabilities.encodinginfo() or mediacapabilities.decodinginfo() to query whether a specific audio configuration is supported, smooth, and/or power efficient. ...
... audio mime
type, for information on possible values and what they mean, see the web audio codec guide. channels: the number of channels used by the audio track. bitrate: the number of bits used to encode one second of the audio file. samplerate: the number of audio samples making up one second of the audio file. examples //create media configuration to be tested const mediaconfig = {
type : 'file', // 'record', 'transmission', or 'media-source' audio : { content
type : "audio/ogg", // valid content
type channels : 2, // audio channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s. } }; // check support and performance navigator.mediacapabil...
AudioContext.createMediaStreamDestination() - Web APIs
set up to record information from the mediastreamdestinationnode. when the button is clicked, the oscillator starts, and the mediarecorder is started. when the button is stopped, the oscillator and mediarecorder both stop. stopping the mediarecorder causes the dataavailable event to fire, and the event data is pushed into the chunks array. ...
...and mediarecorder both stop. stopping the mediarecorder causes the dataavailable event to fire, and the event data is pushed into the chunks array. after that, the stop event fires, a new blob is made of
type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a url created from the blob. from here, you can play and save the opus file. ...
... } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chunk (blobs) in an array chunks.push(evt.data); }; mediarecorder.onstop = function(evt) { // make blob out of our blobs, and open it. var blob = new blob(chunks, { '
type' : 'audio/ogg; codecs=opus' }); document.queryselector("audio").src = url.createobjecturl(blob); }; </script> </body> </html> note: you can view this example live, or study the source code, on github. specifications specification status comment web audio apithe definition of 'createmediastreamdestination()' in that specification. working draft ...
BiquadFilterNode() - Web APIs
he web audio api creates a new biquadfilternode object, which represents a simple low-order filter, and is created using the audiocontext.createbiquadfilter() method. syntax var biquadfilternode = new biquadfilternode(context, options) parameters inherits parameters from the audionodeoptions dictionary. context a reference to an audiocontext. options optional options are as follows:
type: one of "lowpass", "highpass", "bandpass", "lowshelf", "highshelf", "peaking", "notch", "allpass". the meaning of the other options depends on the value of this one. the defaults for all are as follows: q: 1 detune: 0 frequency: 350 gain: 0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff. th...
... frequency: 350 gain: 0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff. this is a standard second-order resonant lowpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter
type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. highpass: a highpass filter is the opposite of a lowpass filter. frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. it implements a standard second-order resonant highpass filter with 12db/octave rolloff. ...
...hpass filter is the opposite of a lowpass filter. frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. it implements a standard second-order resonant highpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter
type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. bandpass: a bandpass filter allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. it implements a second-order bandpass filter. q: controls the width of the band. the width becomes narrower as the q ...
BlobBuilder - Web APIs
blob() to retrieve a blob containing the data you sent into the blob builder. note: the blobbuilder interface has been deprecated in favor of the newly introduced blob constructor. method overview void append(in arraybuffer data); void append(in blob data); void append(in string data, [optional] in string endings); blob getblob([optional] in domstring content
type); file getfile(in domstring name, [optional] in domstring content
type); methods append() appends the contents of the specified javascript object to the blob being built. if the value you specify isn't a blob, arraybuffer, or string, the value is coerced to a string before being appended to the blob. void append( in arraybuffer data ); void append( in blob data ); void ap...
...o the blob being constructed. endings specifies how strings containing \n are to be written out. this can be "transparent" (endings unchanged) or "native" (endings changed to match host os filesystem convention). the default value is "transparent". getblob() returns the blob object that has been constructed using the data passed through calls to append(). blob getblob( in domstring content
type optional ); parameters content
type optional the mime
type of the data to be returned in the blob. this will be the value of the blob object's
type property. return value a blob object containing all of the data passed to any calls to append() made since the blobbuilder was created. this also resets the blobbuilder so that the next call to append() is starting a new, empty blob. getfile(...
...e blob. this will be the value of the blob object's
type property. return value a blob object containing all of the data passed to any calls to append() made since the blobbuilder was created. this also resets the blobbuilder so that the next call to append() is starting a new, empty blob. getfile() returns a file object. file getfile( in domstring name, [optional] in domstring content
type ); parameters name the file name. content
type optional the mime
type of the data to be returned in the file. this will be the value of the file object's
type property. return value a file object. ...
Body - Web APIs
properties body.body read only a simple getter used to expose a readablestream of the body contents. body.bodyused read only a boolean that indicates whether the body has been read. methods body.arraybuffer() takes a response stream and reads it to completion. ...
... properties body.body read only a simple getter used to expose a readablestream of the body contents. body.bodyused read only a boolean that indicates whether the body has been read. methods body.arraybuffer() takes a response stream and reads it to completion. ...
... a response stream and reads it to completion. it returns a promise that resolves with a usvstring (text). the response is always decoded using utf-8. examples the example below uses a simple fetch call to grab an image and display it in 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 specifi...
CSS.registerProperty() - Web APIs
syntax css.registerproperty(propertydefinition); parameters a propertydefinition dictionary object, which can contain the following members: name a domstring indicating the name of the property being defined. ...
... syntax css.registerproperty(propertydefinition); parameters a propertydefinition dictionary object, which can contain the following members: name a domstring indicating the name of the property being defined. ...
...ether the defined property should be inherited (true), or not (false). defaults to false. initialvalue optional a domstring representing the initial value of the defined property. return value undefined. exceptions invalidmodificationerror the given name has already been registered. syntaxerror the given name isn't a valid custom property name (starts with two dashes, e.g. --foo).
typeerror the required name and/or inherits dictionary members were not provided. examples the following will register a custom property, --my-color, using registerproperty(), as a color, give it a default value, and have it not inherit its value: window.css.registerproperty({ name: '--my-color', syntax: '<color>', inherits: false, initialvalue: '#c0ffee', }); in this example, the custo...
CSSMathValue.operator - Web APIs
syntax var astring = cssmathvalue.operator; value a string. ...
... syntax var astring = cssmathvalue.operator; value a string. ...
... working draft initial definition. ...
CSSMathValue - Web APIs
event handlers no methods none. examples we create an element with a width determined using a calc() function, then console.log() the operator. ...
... event handlers no methods none. examples we create an element with a width determined using a calc() function, then console.log() the operator. ...
... working draft initial definition. ...
CSSNumericValue - Web APIs
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 cssskeyx cssskeyw 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. ...
...ssnumericvalue.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. ...
...des the cssnumericvalue by the supplied value. cssnumericvalue.min returns the minimum value passed cssnumericvalue.max returns the maximum value passed cssnumericvalue.equals true if all the values are the exact same
type and value, in the same order. otherwise, false. cssnumericvalue.to converts value into another one with the specified unit. cssnumericvalue.tosum tbd cssnumericvalue.
type tbd cssnumericvalue.parse allows a cssnumericvalue to be constructed directly from a string containing css. specifications specification status comment css
typed om level 1the definition of 'cssnumericvalue' in that specification. working draft initial definition. ...
CSSRule - Web APIs
the cssrule interface represents a single css rule. there are several
types of rules, listed in the
type constants section below. the cssrule interface specifies the properties common to all rules, while properties unique to specific rule
types are specified in the more specialized interfaces for those rules' respective
types. references to a cssrule may be obtained by looking at a cssstylesheet's cssrules list. properties common to all cssrule instances cssrule.csstext represents the textual representation of the rule, e.g. "h1,h2 { font-size: 16pt }" or "@import 'url'". to access or modify parts of the rule (e.g. the value of "font-size" in the example) use the properties on the specialized interface for the rule's
type. cssrule.parentrule read only returns the containing rule, ot...
..."font-size" in the example) use the properties on the specialized interface for the rule's
type. cssrule.parentrule read only returns the containing rule, otherwise null. e.g. if this rule is a style rule inside an @media block, the parent rule would be that cssmediarule. cssrule.parentstylesheet read only returns the cssstylesheet object for the style sheet that contains this rule cssrule.
type read only one of the
type constants indicating the
type of css rule. constants
type constants the cssrule interface specifies integer constants that can be used in conjunction with a cssrule's
type property to discern the rule
type (and therefore, which specialized interface it implements). ...
...s this rule cssrule.
type read only one of the
type constants indicating the
type of css rule. constants
type constants the cssrule interface specifies integer constants that can be used in conjunction with a cssrule's
type property to discern the rule
type (and therefore, which specialized interface it implements). the relationships between these constants and the interfaces are:
type value rule-specific interface comments and examples cssrule.style_rule 1 cssstylerule the most common kind of rule: selector { prop1: val1; prop2: val2; } cssrule.import_rule 3 cssimportrule an @import rule. (until the documentation is completed, see the interface definition in the mozilla source code: nsidomcssimportrule.) cssrule.media_r...
CSS Painting API - Web APIs
static get inputproperties() { return ['--boxcolor']; } static get inputarguments() { return ['*','<length>']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, props, args) { const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const blockheight = size.height * 0.85; const thecolor = props.get( '--boxcolor' ); const stroke
type = args[0].tostring(); const strokewidth = parseint(args[1]); console.log(thecolor); if ( strokewidth ) { ctx.linewidth = strokewidth; } else { ctx.linewidth = 1.0; } if ( stroke
type === 'stroke' ) { ctx.fillstyle = 'transparent'; ctx.strokestyle = thecolor; } else if ( stroke
type === 'filled' ) { ctx.fillstyle = thecolor; ctx.strokestyle = thecolor; } else {...
...custom properties are accessible to the paintworklet. specifications speci...
...custom properties are accessible to the paintworklet. specifications specification status comment css painting api level 1 working draft initial definition. ...
Using the CSS properties and values API - Web APIs
there are two ways to register a property, in javascript or in css. note: the javascript option has working implementations. ...
...there are two ways to register a property, in javascript or in css. note: the javascript option has working implementations. ...
...ing to animate height. you cannot transition or animate from auto to a number because the browser doesn't know what the value of auto is until it's calculated. with an unregisterd property, the browser likewise doesn't know what the value may be until it's calculated, and because of that, it can't set up a transition from one value to another. when registered, though, you've told the browser what
type of value it should expect, and because it knows that, it can then set up the transitions properly. gotchas there are two gotchas when registering a property. the first is that, once a property is registered, there's no way to update it, and trying to re-register it with javascript will throw an error indicating it's already been defined. second, unlike standard properties, registered propertie...
CanvasRenderingContext2D.setTransform() - Web APIs
e), and skew the context. note: see also the transform() method; instead of overriding the current transform matrix, it multiplies it with a given one. syntax ctx.settransform(a, b, c, d, e, f); ctx.settransform(matrix); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters settransform() has two
types of parameter that it can accept. the older
type consists of several parameters representing the individual components of the transformation matrix to set: a (m11) horizontal scaling. a value of 1 results in no scaling. b (m12) vertical skewing. c (m21) horizontal skewing. d (m22) vertical scaling. a value of 1 results in no scaling. e (dx) horizontal translation (moving). f (dy) ve...
... examples skewing a shape this example skews a rectangle both vertically (.2) and horizontally (.8). scaling and translation remain unchanged. ...
...emain unchanged. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.settransform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result retrieving and passing a dommatrix object in the following example, we have two <canvas> elements. we apply a transform to the first one's context using the first
type of settransform() and draw a square on it, then retrieve the matrix from it using canvasrenderingcontext2d.gettransform(). we then apply the retrieved matrix directly to the second canvas context by passing the dommatrix object directly to settransform() (i.e. the second
type), and draw a circle on it. html <canvas width="240"></canvas> <canvas width="240"></canvas> css canvas { border: 1...
ChildNode.before() - Web APIs
following code: // from: https://github.com/jserz/js_piece/blob/master/dom/childnode/before()/before().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('before')) { return; } object.defineproperty(item, 'before', { configurable: true, enumerable: true, writable: true, value: function before() { var argarr = array.proto
type.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appendchild(isnode ? argitem : document.createtextnode(string(argitem))); }); this.parentnode.insertbefore(docfrag, this); } }); }); })([element.proto
type, characterdata.proto
type, ...
... living standard initial definition. ...
... living standard initial definition. ...
CompositionEvent.initCompositionEvent() - Web APIs
canbubblearg a boolean specifying whether or not the event can bubble. cancelablearg a boolean shether or not the event can be canceled. ...
... canbubblearg a boolean specifying whether or not the event can bubble. cancelablearg a boolean shether or not the event can be canceled. ...
... canbubblearg a boolean specifying whether or not the event can bubble. cancelablearg a boolean shether or not the event can be canceled. ...
ContentIndex.add() - Web APIs
ent service worker. category: optional a string defining the category of content. can be: '' an empty string, this is the default. homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image. sizes: optional a string representation of the image size.
type: optional the mime
type of the image. return value returns a promise that resolves with undefined exceptions
typeerror if the service worker's registration is not present or the service worker does not contain a fetchevent. if the id, title, description or url are missing, not of
type string, or an empty string. if icons images are not of image
type. examples here we're de...
...an item in the correct format and creating an asynchronous function which uses the add method to register it with the content index. ...
... console.log('failed to register content: ', e.message); } } the add method can also be used within the service worker scope. // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128',
type: 'image/png', }], category: 'article' }; self.registration.index.add(item); specifications specification status comment unknownthe definition of 'add' in that specification. unknown initial definition. ...
DOMImplementation - Web APIs
mimplementation interface represents an object providing methods which are not dependent on any particular document. such an object is returned by the document.implementation property. property this interface has no specific property and doesn't inherit any. methods no inherited method. domimplementation.createdocument() creates and returns an xmldocument. domimplementation.createdocument
type() creates and returns a document
type. domimplementation.createhtmldocument() creates and returns an html document. domimplementation.hasfeature() returns a boolean indicating if a given feature is supported or not. this function is unreliable and kept for compatibility purpose alone: except for svg-related queries, it always returns true. old browsers are very inconsistent in their behavior.
...for compatibility purpose alone: except for svg-related queries, it always returns true. old browsers are very inconsistent in their behavior. specifications specification status comment domthe definition of 'domimplementation' in that specification. living standard removed the getfeature() method. added the createhtmldocument() method. modified the return
type of createdocument() from document to xmldocument. document object model (dom) level 3 core specificationthe definition of 'domimplementation' in that specification. obsolete added the getfeature() method (never implemented by any user agent). document object model (dom) level 2 core specificationthe definition of 'domimplementation' in that specification. obsolete ad...
...cument. document object model (dom) level 3 core specificationthe definition of 'domimplementation' in that specification. obsolete added the getfeature() method (never implemented by any user agent). document object model (dom) level 2 core specificationthe definition of 'domimplementation' in that specification. obsolete added the createdocument() and createdocument
type() methods. document object model (dom) level 1 specificationthe definition of 'domimplementation' in that specification. obsolete initial definition. ...
DataTransfer.setData() - Web APIs
the datatransfer.setdata() method sets the drag operation's drag data to the specified data and
type. if data for the given
type does not exist, it is added at the end of the drag data store, such that the last item in the
types list will be the new
type. if data for the given
type already exists, the existing data is replaced in the same position. that is, the order of the
types list is not changed when replacing data of the same
type. example data
types are text/plain and text/uri-list. syntax void datatransfer.setdata(format, data); arguments format a domstring representing the
type of the drag data to add to the drag object. data a domstring representing the data to add to the drag object. return value void example this example shows the use of the datatransfer object's...
...ypes are text/plain and text/uri-list. syntax void datatransfer.setdata(format, data); arguments format a domstring representing the
type of the drag data to add to the drag object. data a domstring representing the data to add to the drag object. return value void example this example shows the use of the datatransfer object's getdata(), setdata() and cleardata() methods. ...
...sfer.setdata("text/plain", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // clear the drag data cache (for all formats/
types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdata()</code>, <code>getdata()</code>, <code>cleardata()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="dro...
DisplayMediaStreamConstraints.video - Web APIs
ary's video property is used to configure the video track in the stream returned by getdisplaymedia(). this value may simply be a boolean, where true specifies that a default selection of input source be made (typically the entire display area of the device in use, spanning every screen in a multiple screen configuration). since a video track must always be included, a value of false results in a
typeerror exception being thrown. more precise control over the format of the returned video track may be exercised by instead providing a mediatrackconstraints object, which is used to process the video data after obtaining it from the device but prior to adding it to the stream. syntax displaymediastreamconstraints.video = allowvideoflag; displaymediastreamconstraints.video = mediatrackconstraint...
...onstraints; displaymediastreamconstraints = { video: allowvideoflag | mediatrackconstraints; } value the value may be either a boolean or a mediatrackconstraints object. if a boolean is specified, a value of true (the default) indicates that the stream returned by getdisplaymedia() should be in whatever format the user agent feels is best. a value of false is not permitted and will throw a
typeerror. if a mediatrackconstraints object is given instead, the video track will be processed to match the settings given in the constraints object. constraints specific to screen sharing these constraints apply to mediatrackconstraints objects specified as part of the displaymediastreamconstraints object's video property when using getdisplaymedia() to obtain a stream for screen sharing. cur...
...always the mouse is always visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a constraindomstring which specifies the
types of display surface that may be selected by the user. this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the str...
Document.getElementById() - Web APIs
it may seem. unlike some other element-lookup methods such as document.queryselector() and document.queryselectorall(), getelementbyid() is only available as a method of the global document object, and not available as a method on all element objects in the dom. because id values must be unique throughout the entire document, there is no need for "local" versions of the function. ...
...note that the id parameter is case-sensitive, so document.getelementbyid("main") will return null instead of the element <div id="main"> because "m" and "m" are different for the purposes of this method. elements not in the document are not searche...
...ssigning it an id, you have to insert the element into the document tree with node.insertbefore() or a similar method before you can access it with getelementbyid(): var element = document.createelement('div'); element.id = 'testqq'; var el = document.getelementbyid('testqq'); // el will be null! non-html documents. the dom implementation must have information that says which attributes are of
type id. attributes with the name "id" are not of
type id unless so defined in the document's dtd. the id attribute is defined to be of id
type in the common cases of xhtml, xul, and other. implementations that do not know whether attributes are of
type id or not are expected to return null. specification specification status comment document object model (dom) level 1 sp...
Element.closest() - Web APIs
"); // returns the closest ancestor which is a div and has a parent article, here it is the div-01 var r4 = el.closest(":not(div)"); // returns the closest ancestor which is not a div, here it is the outmost article polyfill for browsers that do not support element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning ie9+), a polyfill exists: if (!element.proto
type.matches) { element.proto
type.matches = element.proto
type.msmatchesselector || element.proto
type.webkitmatchesselector; } if (!element.proto
type.closest) { element.proto
type.closest = function(s) { var el = this; do { if (element.proto
type.matches.call(el, s)) return el; el = el.parentelement || el.parentnode; } while (el !== null && el.node
type === 1); re...
...rn el; el = el.parentelement || el.parentnode; } while (el !== null && el.node
type === 1); return null; }; } however, if you really do require ie 8 support, then the following polyfill will do the job very slowly, but eventually. however, it will only support css 2.1 selectors in ie 8, and it can cause severe lag spikes in production websites. ...
...ent || el.parentnode; } while (el !== null && el.node
type === 1); return null; }; } however, if you really do require ie 8 support, then the following polyfill will do the job very slowly, but eventually. however, it will only support css 2.1 selectors in ie 8, and it can cause severe lag spikes in production websites. ...
Element.getAttributeNS() - Web APIs
eturn null for non-existent attributes. examples the following svg document reads the value of the foo attribute in a custom namespace. ...
..." test:foo="hello namespaced attribute!"/> <script
type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an html5 document the attribute has to be accessed with test:foo since namespaces are not supported. ...
...script> </svg> in an html5 document the attribute has to be accessed with test:foo since namespaces are not supported. <!doc
type html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="foo value"/> </svg> <script
type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log('attribute value: ' + circle.getattribute('test:foo')); </script> </body> </html> notes namespaces are only supported in xml documents. html5 documents have to use getattribute() instead. getattributens() differs from getattribute() in that it allows you to furth...
Element.localName - Web APIs
the element.localname read-only property returns the local part of the qualified name of an element. in previous dom specifications this api was defined within the node interface. syntax name = element.localname return value a domstring representing the local part of the element's qualified name. ...
...previous dom specifications this api was defined within the node interface. syntax name = element.localname return value a domstring representing the local part of the element's qualified name. ...
... <textarea id="text" rows="4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon. qualified names are typically used in xml as part of the namespace(s) of the particular xml documents. for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop"
type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="1001">tony's syrup warehouse </ecomm:partner> </ecomm:partner> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms). in later versions, in compliance with ...
EventSource - Web APIs
ewelement); } each received event causes our eventsource object's onmessage event handler to be run. it, in turn, creates a new <li> element and writes the message's data into it, then appends the new element to the list element already in the document. note: you can find a full example on github — see simple sse demo using php. to listen to named events, you'll require a listener for each
type of event sent. const sse = new eventsource('/api/v1/sse'); /* this will listen only for events * similar to the following: * * event: notice * data: useful data * id: someid * */ sse.addeventlistener("notice", function(e) { console.log(e.data) }) /* similarly, this will listen for events * with the field `event: update` */ sse.addeventlistener("update...
... */ sse.addeventlistener("message", function(e) { console.log(e.data) }) specifications specification status html living standardthe definition of 'eventsource' in that specification. living standard ...
... */ sse.addeventlistener("message", function(e) { console.log(e.data) }) specifications specification status html living standardthe definition of 'eventsource' in that specification. living standard ...
EventTarget.removeEventListener() - Web APIs
the eventtarget.removeeventlistener() method removes from the eventtarget an event listener previously registered with eventtarget.addeventlistener(). the event listener to be removed is identified using a combination of the event
type, the event listener function itself, and various optional options that may affect the matching process; see matching event listeners for removal syntax target.removeeventlistener(
type, listener[, options]); target.removeeventlistener(
type, listener[, usecapture]); parameters
type a string which specifies the
type of event for which to remove an event listener. listener the eventlistener function of the event handler to remove from the event target. options optional an options object that specifies characteristics about the event listener. the ava...
... mozsystemgroup: available only in code running in xbl or in firefox' chrome, it is a boolean defining if the listener is added to the system group. ...
... and one without, remove each one separately. removal of a capturing listener does not affect a non-capturing version of the same listener, and vice versa. return value undefined matching event listeners for removal given an event listener previously added by calling addeventlistener(), you may eventually come to a point at which you need to remove it. obviously, you need to specify the same
type and listener parameters to removeeventlistener(). but what about the options or usecapture parameters? while addeventlistener() will let you add the same listener more than once for the same
type if the options are different, the only option removeeventlistener() checks is the capture/usecapture flag. its value must match for removeeventlistener() to match, but the other values don't. for examp...
ExtendableMessageEvent() - Web APIs
origin: a domstring that defines the origin of the corresponding service worker's environment settings object. lasteventid: a domstring that defines the last event id of the event source. ...
... origin: a domstring that defines the origin of the corresponding service worker's environment settings object. lasteventid: a domstring that defines the last event id of the event source. ...
... origin: a domstring that defines the origin of the corresponding service worker's environment settings object. lasteventid: a domstring that defines the last event id of the event source. ...
FetchEvent.respondWith() - Web APIs
pondwith() method of fetchevent prevents the browser's default fetch handling, and allows you to provide a promise for a response yourself. in most cases you can provide any response that the receiver understands. for example, if an <img> initiates the request, the response body needs to be image data. for security reasons, there are a few global rules: you can only return response objects of
type "opaque" if the fetchevent.request object's mode is "no-cors". this prevents the leaking of private data. you can only return response objects of
type "opaqueredirect" if the fetchevent.request object's mode is "manual". you cannot return response objects of
type "cors" if the fetchevent.request object's mode is "same-origin". specifying the final url of a resource from firefox 59 onwards, ...
...ent.request.url is used as the final url. in the past the fetchevent.request.url was used as the final url in all cases. the provided response.url was effectively ignored. this means, for example, if a service worker intercepts a stylesheet or worker script, then the provided response.url will be used to resolve any relative @import or importscripts() subresource loads (bug 1222008). for most
types of network request this change has no impact because you can't observe the final url. there are a few, though, where it does matter: if a fetch() is intercepted, then you can observe the final url on the result's response.url. if a worker script is intercepted, then the final url is used to set self.location and used as the base url for relative urls in the worker script. if a stylesheet i...
...r-visible url. syntax fetchevent.respondwith( // promise that resolves to a response. ā); parameters a response or a promise that resolves to a response. otherwise, a network error is returned to fetch. return value undefined. exceptions exception notes networkerror a network error is triggered on certain combinations of fetchevent.request.mode and response.
type values, as hinted at in the "global rules" listed above. invalidstateerror the event has not been dispatched or respondwithwith() has already been invoked. examples this fetch event tries to return a response from the cache api, falling back to the network otherwise. addeventlistener('fetch', event => { // prevent the default, and handle the request ourselves. event.resp...
File.File() - Web APIs
[, options]); parameters bits an array of arraybuffer, arraybufferview, blob, usvstring objects, or a mix of any of such objects, that will be put inside the file. usvstring objects are encoded as utf-8. name a usvstring representing the file name or the path to the file. options optional an options object containing optional attributes for the file. ...
...ray of arraybuffer, arraybufferview, blob, usvstring objects, or a mix of any of such objects, that will be put inside the file. usvstring objects are encoded as utf-8. name a usvstring representing the file name or the path to the file. options optional an options object containing optional attributes for the file. ...
...utes for the file. available options are as follows:
type: a domstring representing the mime
type of the content that will be put into the file. defaults to a value of "". lastmodified: a number representing the number of milliseconds between the unix time epoch and when the file was last modified. defaults to a value of date.now(). ...
File.getAsBinary() - Web APIs
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. ...
...reader method readasbinarystring() or readasarraybuffer() instead. syntax var binary = instanceoffile.getasbinary(); returns a string. ...
...t" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media
types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file
type could be detected if (file !== null) { if (accept.binary.indexof(file.
type) > -1) { // file is a binary, which we accept var data = file.getasbinary(); } else if (accept.text.indexof(file.
type) > -1) { // file is of
type text, which we accept var data = file.getastext(); // modify data with string methods } } } specification not part of any specific...
File.getAsText() - Web APIs
olete; 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. ...
...ta. if this string is empty, utf-8 is assumed. returns a string containing the file's data interpreted as text in the specified encoding. ...
...t" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media
types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file
type could be detected if (file !== null) { if (accept.text.indexof(file.media
type) > -1) { // file is of
type text, which we accept // make sure it's encoded as utf-8 var data = file.getastext("utf-8"); // modify data with string methods } else if (accept.binary.indexof(file.media
type) > -1) { // binary } } } specification not part of any specification...
FileError - Web APIs
atest specification. use the new dom4 domerror interface instead. in the file system api, a fileerror represents error conditions that you might encounter while accessing the file system using the asynchronous api. it extends the fileerror interface described in file writer and adds several new error codes. fileerror objects are passed to error callbacks. the objects have a code that shows the
type of error that occurred. best practices most people don't read the page on errors and exceptions unless they're stumped. so the following are a few tips that could help you avoid some pitfalls. error callbacks are not optional for your sanity although error callbacks are optional, you should include them in the arguments of the methods for the sake of the sanity of your users. a web app could ...
...f the powerful storage apis (such as file system, blobbuilder, and filereader) throw errors if you run the app locally from file://. when you're just testing your app, and you don't want to set up a web server, you can bypass the security restriction on chrome. just start chrome with the --allow-file-access-from-files flag. use the flag only for testing purposes. attribute attribute
type description code unsigned short the most appropriate error code for the condition. see error codes for possible values. error codes note: do not rely on the numeric values of the constants, which might change as the specifications continue to change. use the constant names instead. constant value description encoding_err 5 the url is ma...
... give more space to the database. to ask for more storage, see managing html5 offline storage. security_err 2 access to the files were denied for one of the following reasons: the files might be unsafe for access within a web application. too many calls are being made on file resources. other unspecified security error code or situations.
type_mismatch_err 11 the app looked up an entry, but the entry found is of the wrong
type. for example, the app is asking for a directory, when the entry is really a file. ...
FileReader.readAsDataURL() - Web APIs
as a base64 encoded string. note: the blob's result cannot be directly decoded as base64 without first removing the data-url declaration preceding the base64-encoded data. to retrieve only the base64 encoded string, first remove data:*/*;base64, from the result. syntax instanceoffilereader.readasdataurl(blob); parameters blob the blob or file from which to read. ...
...t remove data:*/*;base64, from the result. syntax instanceoffilereader.readasdataurl(blob); parameters blob the blob or file from which to read. ...
...= document.queryselector('img'); const file = document.queryselector('input[
type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse"
type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[
type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new fi...
FileSystemDirectoryEntry.getDirectory() - Web APIs
enting the directory in question. errorcallback optional a method to be called if an error occurs. receives as its sole input parameter a fileerror object describing the error which occurred. return value undefined. errors if an error occurs and an errorcallback was specified, it gets called with a single parameter: a fileerror object describing the error. the fileerror.code specifies what
type of error occurred, as follows: fileerror.not_found_err the create option was not specified (or was specified as false), and the directory doesn't exist. fileerror.path_exists_err the create and exclusive options were both true, indicating that the directory should be created but must not already exist, but the directory does in fact already exist. fileerror.security_err the request to acc...
...e create option was not specified (or was specified as false), and the directory doesn't exist. fileerror.path_exists_err the create and exclusive options were both true, indicating that the directory should be created but must not already exist, but the directory does in fact already exist. fileerror.security_err the request to access the directory was denied for security reasons. fileerror.
type_mismatch_err the path specified is not a directory; it's probably a file, but might be an unsupported file descriptor such as a pipe; this depends on the user agent to some extent. filesystemflags the options parameter is an object which is based on the filesystemflags dictionary; it provides flags which make it possible to adjust the behavior of the getdirectory() method. create optional ...
... it to be created newly at call time. the default is false. values and results the table below describes the result of each possible combination of these flags depending on whether or not the target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired
type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called. false n/a[1] path exists but doesn't match the desired
type the errorcallback is called with an appropriate error code (if the callback was provided). true...
FileSystemDirectoryEntry.getFile() - Web APIs
e file in question. errorcallback optional a method to be called if an error occurs. receives as its sole input parameter a fileerror object describing the error which occurred. return value undefined. errors if an error occurs and an errorcallback was specified, it gets called with a single parameter: a fileerror object describing the error. the {domxref("fileerror.code")}} specifies what
type of error occurred, as follows: fileerror.not_found_err the create option was not specified (or was specified as false), and the file doesn't exist. fileerror.path_exists_err the create and exclusive options were both true, indicating that the file should be created but must not already exist, but the file does in fact already exist. fileerror.security_err the request to access the file wa...
...or.not_found_err the create option was not specified (or was specified as false), and the file doesn't exist. fileerror.path_exists_err the create and exclusive options were both true, indicating that the file should be created but must not already exist, but the file does in fact already exist. fileerror.security_err the request to access the file was denied for security reasons. fileerror.
type_mismatch_err the path specified is not a file; it's probably a directory, but might be an unsupported file descriptor such as a pipe; this depends on the user agent to some extent. filesystemflags the options parameter is an object which is based on the filesystemflags dictionary; it provides flags which make it possible to adjust the behavior of the getfile() method. create optional if t...
... it to be created newly at call time. the default is false. values and results the table below describes the result of each possible combination of these flags depending on whether or not the target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired
type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called. false n/a[1] path exists but doesn't match the desired
type the errorcallback is called with an appropriate error code (if the callback was provided). true...
Using the Gamepad API - Web APIs
data for that gamepad (e.g. gamepadconnected), a second event is dispatched to the focused window, gamepaddisconnected: window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controllers of the same
type are used. the index property also functions as the index into the array returned by navigator.getgamepads(). var gamepads = {}; function gamepadhandler(event, connecting) { var gamepad = event.gamepad; // note: // gamepad === navigator.getgamepads()[gamepad.index] if (connecting) { gamepads[gamepad.index] = gamepad; } else { delete gamepads[gamepad.index]; } } window.addev...
...e effect of moving the ball around the screen. in current versions of chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of gamepadbutton objects. this is fixed in development versions. after all this is done, we use our requestanimationframe() to request the next animation frame, running gameloop() again. ...
... (!haveevents) { scangamepads(); } var i = 0; var j; for (j in controllers) { var controller = controllers[j]; var d = document.getelementbyid("controller" + j); var buttons = d.getelementsbyclassname("button"); for (i = 0; i < controller.buttons.length; i++) { var b = buttons[i]; var val = controller.buttons[i]; var pressed = val == 1.0; if (
typeof(val) == "object") { pressed = val.pressed; val = val.value; } var pct = math.round(val * 100) + "%"; b.style.backgroundsize = pct + " " + pct; if (pressed) { b.classname = "button pressed"; } else { b.classname = "button"; } } var axes = d.getelementsbyclassname("axis"); for (i = 0; i < controller.axes.length; i+...
GlobalEventHandlers.onkeypress - Web APIs
ple 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.onkeypress = logkey; function logkey(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 = document.queryselector('input'); input.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number characters) input.onpaste ...
...y(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const input = document.queryselector('input'); input.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number characters) input.onpaste = event => false; result capture the typing of a hidden word the following javascript function will do something after the user
types the word "exit" in any point of a page. /*
type the word "exit" in any point of your page... */ (function () { const ssecret = /* choose your hidden word...: */ "exit"; let noffset = 0; document.onkeypress = function(opevt) { let oevent = opevt || window.event, nchr = oevent.charcode, snode
type = oevent.target.nodename.touppercase(); if (nchr === 0 || oe...
... any point of your page... */ (function () { const ssecret = /* choose your hidden word...: */ "exit"; let noffset = 0; document.onkeypress = function(opevt) { let oevent = opevt || window.event, nchr = oevent.charcode, snode
type = oevent.target.nodename.touppercase(); if (nchr === 0 || oevent.target.contenteditable.touppercase() === "true" || snode
type === "textarea" || snode
type === "input" && oevent.target.
type.touppercase() === "text") { return true; } if (nchr !== ssecret.charcodeat(noffset)) { noffset = nchr === ssecret.charcodeat(0) ? 1 : 0; } else if (noffset < ssecret.length - 1) { noffset++; } else { noffset = 0; /* do something here... */ alert("yesss!!!"); location.as...
GlobalEventHandlers.onpointerdown - Web APIs
example this example demonstrates how to watch for and act upon pointerdown events using onpointerdown. you could also use addeventlistener(), of course. javascript first, let's look at the javascript code that handles the pointerdown event. ...
...e "touch": action = "touching"; break; default: action = "interacting with"; break; } targetbox.innerhtml = "<strong>thanks for " + action + " me!</strong>"; evt.preventdefault(); } this simply uses onpointerdown to establish the function handledown() as the event handler for pointer down events. the handledown() function, in turn, looks at the value of pointer
type to determine what kind of pointing device was used, then uses that information to customize a string to replace the contents of the target box. then the event's preventdefault() method is called to ensure that the mousedown event isn't triggered, potentially causing events to be handled twice if we had a handler for those events in case pointer event support is missing. we also have a handler f...
... 16px "open sans", "helvetica", sans-serif; color: white; background-color: blue; border: 2px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } result the resulting output is shown below. try tapping, clicking, or touching the box and see what happens. for full effect, try it with a variety of pointer
types. specifications specification status comment pointer events – level 2the definition of 'onpointerdown' in that specification. recommendation non-stable version pointer eventsthe definition of 'onpointerdown' in that specification. obsolete initial definition ...
GlobalEventHandlers.onreset - Web APIs
the onreset property of the globaleventhandlers mixin is an eventhandler that processes reset events. the reset event fires when the user clicks a reset button in a form (<input
type="reset">). syntax target.onreset = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. example this example logs the current event.timestamp whenever you reset the form. ...
...nts. the reset event fires when the user clicks a reset button in a form (<input
type="reset">). syntax target.onreset = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. example this example logs the current event.timestamp whenever you reset the form. ...
...clicks a reset button in a form (<input
type="reset">). syntax target.onreset = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. example this example logs the current event.timestamp whenever you reset the form. ...
GlobalEventHandlers - Web APIs
properties this interface doesn't include any properties except for the event handlers listed below. ...
...globaleventhandlers.onended is an eventhandler representing the code to be called when the ended event is raised. globaleventhandlers.onformdata is an eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed. globaleventhandlers.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.onkeydown is an eventhandler representing the code to be called when the keydown event is raised. globaleventhandlers.onkeypress ...
... globaleventhandlers.onmousedown is an eventhandler representing the code to be called when the mousedown event is raised. globaleventhandlers.onmouseenter is an eventhandler representing the code to be called when the mouseenter event is raised. globaleventhandlers.onmouseleave is an eventhandler representing the code to be called when the mouseleave event is raised. globalevent...
HTMLElement - Web APIs
s, in-page text searches ("find in page"), and text selection. htmlelement.innertext represents the "rendered" text content of a node and its descendants. as a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard. htmlelement.itemscope is a boolean representing the item scope. htmlelement.item
type read only returns a domsettabletokenlist… htmlelement.itemid is a domstring representing the item id. htmlelement.itemref read only returns a domsettabletokenlist… htmlelement.itemprop read only returns a domsettabletokenlist… htmlelement.itemvalue returns a object representing the item value. htmlelement.lang is a domstring representing the language of an element's att...
... comment css object model (cssom) view modulethe definition of 'htmlelement' in that specification. working draft added the following properties: offsetparent, offsettop, offsetleft, offsetwidth, and offsetheight. html living standardthe definition of 'htmlelement' in that specification. living standard added the following properties: translate, itemscope, item
type, 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, accesskey, accesskeylabel, draggable, drop...
...owing 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, accesskey, accesskeylabel, draggable, dropzone, contenteditable, iscontenteditable, contextmenu, spellcheck, command
type, 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 specification. obsolete no change from document object model (dom) level 2 html specification docume...
HTMLFieldSetElement - Web APIs
le">htmlfieldsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlfieldsetelement.disabled a boolean reflecting the disabled html attribute, indicating whether the user can interact with the control. htmlfieldsetelement.elementsread only the elements belonging to this field set. the
type of this property depends on the version of the spec that is implemented by the browser. htmlfieldsetelement.formread only an htmlformcontrolscollection or htmlcollection referencing the containing form element, if this element is in a form. if the field set is not a descendant of a form element, then the attribute can be the id of any form element in the same document it is related to, or the...
...nt of a form element, then the attribute can be the id of any form element in the same document it is related to, or the null value if none matches. htmlfieldsetelement.name a domstring reflecting the name html attribute, containing the name of the field set. this can be used when accessing the field set in javascript. it is not part of the data which is sent to the server. htmlfieldsetelement.
typeread only the domstring "fieldset". htmlfieldsetelement.validationmessage a domstring representing a localized message that describes the validation constraints that the element does not satisfy (if any). this is the empty string if the element is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. htmlfieldsetelement.validity a validitystate r...
...s comment html living standardthe definition of 'htmlfieldsetelement' in that specification. living standard html 5.1the definition of 'htmlfieldsetelement' in that specification. recommendation html5the definition of 'htmlfieldsetelement' in that specification. recommendation the following properties have been added: disabled, elements, name,
type, valdiationmessage, validity, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(). document object model (dom) level 2 html specificationthe definition of 'htmlfieldsetelement' in that specification. obsolete no change document object model (dom) level 1 specificationthe definition of 'htmlfieldsetelement' in that specification...
HTMLFormElement: submit event - Web APIs
the submit event fires when a <form> is submitted. bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface submitevent event handler property globaleventhandlers.onsubmit note that the submit event fires on the <form> element itself, and not on any <button> or <input
type="submit"> inside it. however, the submitevent which is sent to indicate the form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request. the submit event fires when the user clicks a submit button (<button> or <input
type="submit">) or presses enter while editing a field (e.g. <input
type="text">) in a form. the event is not sent to the form when callin...
...t does not pass validation triggers an invalid event. in this case, the validation prevents form submission, and thus there is no submit event. examples this example uses eventtarget.addeventlistener() to listen for form submit, and logs the current event.timestamp whenever that occurs, then prevents the default action of submitting the form. ...
...alid event. in this case, the validation prevents form submission, and thus there is no submit event. examples this example uses eventtarget.addeventlistener() to listen for form submit, and logs the current event.timestamp whenever that occurs, then prevents the default action of submitting the form. ...
HTMLInputElement: search event - Web APIs
using this control also fires the search event. ...
... 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). ...
...t 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="search"]'); input.addeventlistener('search', () => { console.log("the term searched for was " + input.value); }) // onsearch version const input = document.queryselector('input[
type="search"]'); input.onsearch = () => { console.log("the term searched for was " + input.value); }) specifications this event is not part of any specification. ...
HTMLMediaElement: loadstart event - Web APIs
the loadstart event is fired when the browser has started to load a resource. ...
...gin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } js const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.
type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.c...
... living standard html5the definition of 'loadstart media event' in that specification. recommendation ...
HTMLMediaElement: progress event - Web APIs
the progress event is fired periodically as the browser loads a resource. ...
...em 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } javascript const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.
type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.c...
... living standard html5the definition of 'progress media event' in that specification. recommendation ...
HTMLMediaāElementā.textTracks - Web APIs
bjects representing the media element's text tracks, in the same order as in the list of text tracks. you can detect when tracks are added to and removed from an <audio> or <video> element using the addtrack and removetrack events. however, these events aren't sent directly to the media element itself. instead, they're sent to the track list object of the htmlmediaelement that corresponds to the
type of track that was added to the element the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically. once you have a reference to the list, you can monitor it for changes to detect when new text tracks are added or existing ones removed. see event handlers in texttracklist to learn more about watching for changes to a med...
...enting the list of text tracks included in the media element. the list of tracks can be accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. ...
...e media element. the list of tracks can be accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. ...
HTMLObjectElement - Web APIs
th of a border around the object. htmlobjectelement.code is a domstring representing the name of an applet class file, containing either the applet's subclass, or the path to get to the class, including the class file itself. htmlobjectelement.codebase is a domstring that reflects the codebase html attribute, specifying the base path to use to resolve relative uris. htmlobjectelement.code
type is a domstring that reflects the code
type html attribute, specifying the content
type of the data. htmlobjectelement.contentdocument read only returns a document representing the active document of the object element's nested browsing context, if any; otherwise null. htmlobjectelement.contentwindow read only returns a windowproxy representing the window proxy of the object element's nest...
...rns a domstring that reflects the name html attribute, specifying the name of the browsing context. htmlobjectelement.standby is a domstring that reflects the standby html attribute, specifying a message to display while the object loads. htmlobjectelement.tabindex is a long representing the position of the element in the tabbing navigation order for the current document. htmlobjectelement.
type is a domstring that reflects the
type html attribute, specifying the mime
type of the resource. htmlobjectelement.
typemustmatch is a boolean that reflects the
typemustmatch html attribute, indicating if the resource specified by data must only be played if it matches the
type attribute. htmlobjectelement.usemap is a domstring that reflects the usemap html attribute, specifying a <map> elemen...
...lobjectelement' in that specification. living standard html5the definition of 'htmlobjectelement' in that specification. recommendation the w3c specification is a latest of a previous version of html living standard technically, the property tabindex is now defined on htmlelement. the following properties are now obsolete: align, archive, border, code, codebase, code
type, declare, hspace, standby, and vspace. the following properties have been added:
typemustmatch, contentwindow, willvalidate, validity, and validationmessage. the following methods have been added: checkvalidity() and setcustomvalidity(). document object model (dom) level 2 html specificationthe definition of 'htmlobjectelement' in that specification. obsolete the contentdoc...
HTMLStyleElement.media - Web APIs
the htmlstyleelement.media property specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...
... the htmlstyleelement.media property specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...
...nt.media property specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...
In depth: Microtasks and the JavaScript runtime environment - Web APIs
g code. javascript execution contexts note: the details here are generally not important to most javascript programmers. this information is provided as a basis for why microtasks are useful and how they function; if you don't care, you can skip this and come back later if you find that you need to. when a fragment of javascript code runs, it runs inside an execution context. there are three
types of code that create a new execution context: the global context is the execution context created to run the main body of your code; that is, any code that exists outside of a javascript function. each function is run within its own execution context. this is frequently referred to as a "local context." using the ill-advised eval() function also creates a new execution context. each contex...
...e body, it handles receiving and dispatching user and other events, rendering and painting web content, and so forth. the event loop, then, drives everything that happens in the browser as it pertains to the interaction with the user, but more importantly for our purposes here, it is responsible for the scheduling and execution of every piece of code that runs within its thread. there are three
types of event loop: window event loop the window event loop is the one that drives all of the windows sharing a similar origin (though there are further limits to this as described elsewhere in this article xxxx ????). worker event loop a worker event loop is one which drives a worker; this includes all forms of workers, including basic web workers, shared workers, and service workers. workers ...
... further limits to this as described elsewhere in this article xxxx ????). worker event loop a worker event loop is one which drives a worker; this includes all forms of workers, including basic web workers, shared workers, and service workers. workers are kept in one or more agents that are separate from the "main" code; the browser may use a single event loop for all of the workers of a given
type or may use multiple event loops to handle them. worklet event loop a worklet event loop is the event loop used to drive agents which run the code for the workelets for a given agent. this includes worklets of
type worklet, audioworklet, and paintworklet. several windows loaded from the same origin may be running on the same event loop, each queueing tasks onto the event loop so that their tas...
Headers.get() - Web APIs
bject, it returns null. for security reasons, some headers can only be controlled by the user agent. these headers include the forbidden header names and forbidden response header names. syntax myheaders.get(name); parameters name the name of the http header whose values you want to retrieve from the headers object. if the given name is not the name of an http header, this method throws a
typeerror. the name is case-insensitive. returns a bytestring sequence representing the values of the retrieved header or null if this header is not set. example creating an empty headers object is simple: var myheaders = new headers(); // currently empty myheaders.get('not-set'); // returns null you could add a header to this using headers.append, then retrieve it using get(): myheaders.appe...
...ame is case-insensitive. returns a bytestring sequence representing the values of the retrieved header or null if this header is not set. ...
...ing sequence representing the values of the retrieved header or null if this header is not set. ...
Headers.getAll() - Web APIs
rns an empty array. for security reasons, some headers can only be controller by the user agent. these headers include the forbidden header names and forbidden response header names. syntax myheaders.getall(name); parameters name the name of the http header whose values you want to retrieve from the headers object. ...
... given name is not the name of an http header, this method throws a
typeerror. returns an array containing a bytestring sequence representing the values of the retrieved header. ...
...his method throws a
typeerror. returns an array containing a bytestring sequence representing the values of the retrieved header. ...
IDBKeyRange.includes() - Web APIs
the includes() method of the idbkeyrange 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 = mykeyrange.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 = idbkeyrange.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 spec...
...id key. example var keyrangevalue = idbkeyrange.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. ...
...ngevalue = idbkeyrange.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. ...
Browser storage limits and eviction criteria - Web APIs
still stored, but they are ephemeral — the data is deleted when you close the last private browsing window. the "last access time" of origins is updated when any of these are activated/deactivated — origin eviction will delete data for all these quota clients. in chrome/opera, the quota management api handles quota management for appcache, indexeddb, websql, and file system api. different
types of data storage even in the same browser, using the same storage method, there are different classes of data storage to understand. this section discusses the different ones you might find in different browsers. storage comes in two
types: persistent: this is data that is intended to be kept around for a long time. this will only be evicted if the user chooses to (for example, in firefox yo...
...tent storage is used, the user is given a ui popup to alert them that this data will persist, and asks if they are happy with that. temporary data storage does not elicit any user prompts. storage is temporary by default; developers can choose to use persistent storage for their sites using the storagemanager.persist() method available in the storage api. where is the data stored? each storage
type represents a separate repository. here's the actual mapping to directories under a user's firefox profile (other browsers may differ slightly): <profile>/storage — the main top-level directory for storages maintained by the quota manager (see below) <profile>/storage/permanent — persistent data storage repository <profile>/storage/temporary — temporary data storage repository <profile...
...it doesn't matter if box mode is "best-effort" or "persistent" — data is stored under <profile>/storage/default. note: in firefox, you can find your profile folder by entering about:support in the url bar, and pressing the show in... button (e.g., show in finder on mac os x) next to the profile folder title. note: if you are looking around in your profile at the data stored, y...
InputEvent() - Web APIs
data: (optional) a string containing characters to insert. this may be an empty string if the change doesn't insert text (such as when deleting characters, for example). ...
... data: (optional) a string containing characters to insert. this may be an empty string if the change doesn't insert text (such as when deleting characters, for example). ...
... data: (optional) a string containing characters to insert. this may be an empty string if the change doesn't insert text (such as when deleting characters, for example). ...
InstallEvent.InstallEvent() - Web APIs
init optional an options object containing any custom settings that you want to apply to the event object. ...
... init optional an options object containing any custom settings that you want to apply to the event object. ...
... init optional an options object containing any custom settings that you want to apply to the event object. ...
LocalFileSystemSync - Web APIs
l() methods are exposed to the worker's global scope. calling window.requestfilesystemsync() for creates new storage for your web app. for more concepts, see the counterpart article for the asynchronous api. example //taking care of the browser-specific prefix window.requestfilesystemsync = window.requestfilesystemsync || window.webkitrequestfilesystemsync; // the first parameter defines the
type of storage: persistent or temporary // next, set the size of space needed (in bytes) // initfs is the success callback // and the last one is the error callback // for denial of access and other errors. var fs = requestfilesystemsync(temporary, 1024*1024 /*1mb*/); because you are using a synchronous api, you don't need success and error callbacks. method overview filesystemsync reque...
... // next, set the size of space needed (in bytes) // initfs is the success callback // and the last one is the error callback // for denial of access and other errors. var fs = requestfilesystemsync(temporary, 1024*1024 /*1mb*/); because you are using a synchronous api, you don't need success and error callbacks. method overview filesystemsync requestfilesystemsync (in unsigned short
type, in long long size) raises fileexception; entrysync resolvelocalfilesystemsyncurl (in domstring url) raises fileexception; constants constant value description temporary 0 transient storage that can be be removed by the browser at its discretion. persistent 1 storage that stays in the browser unless the user or the app ex...
...storage that stays in the browser unless the user or the app expunges it. methods requestfilesystemsync() requests a file system where data should be stored. you access a sandboxed file system by requesting a localfilesystemsync object from within a web worker using this global method, window.requestfilesystemsync(). [ research ] filesystemsync requestfilesystemsync( in unsigned short
type, in unsigned long long size ); parameters
type the storage
type of the file system. the values can be either temporary or persistent. size the storage space—in bytes—that you need for your app. returns filesystemsync an object that represents the file system. exceptions this method can raise an fileexception with the following code: exception description ...
MediaCapabilities.encodingInfo() - Web APIs
the mediacapabilities.encodinginfo() method, part of the mediacapabilities interface of the media capabilities api, returns a promise with the tested media configuration's mediacapabilitiesinfo; this contains the three boolean properties supported, smooth, and powerefficient, which describe how compatible the device is with the
type of media. syntax mediacapabilities.encodinginfo(mediaencodingconfiguration) parameters mediaencodingconfiguration a valid mediaencodingconfiguration dictionary containing a valid media encoding
type of record or transmission and a valid media configuration: either an audioconfiguration or videoconfiguration dictionary. return value a promise fulfilling with a mediacapabilitiesinfo interface containing three boolean attributes: supported smooth power...
...ediaencodingconfiguration a valid mediaencodingconfiguration dictionary containing a valid media encoding
type of record or transmission and a valid media configuration: either an audioconfiguration or videoconfiguration dictionary. return value a promise fulfilling with a mediacapabilitiesinfo interface containing three boolean attributes: supported smooth powerefficient exceptions a
typeerror is raised if the mediaconfiguration passed to the encodinginfo() method is invalid, either because the
type is not video or audio, the content
type is not a valid codec mime
type, or any other error in the media configuration passed to the method, including omitting any of the media encoding configuration elements. example //create media configuration to be tested const mediaconf...
...ised if the mediaconfiguration passed to the encodinginfo() method is invalid, either because the
type is not video or audio, the content
type is not a valid codec mime
type, or any other error in the media configuration passed to the method, including omitting any of the media encoding configuration elements. example //create media configuration to be tested const mediaconfig = {
type : 'record', // or 'transmission' video : { content
type : "video/webm;codecs=vp8.0", // valid content
type width : 1920, // width of the video height : 1080, // height of the video bitrate : 120000, // number of bits used to encode 1s of video framerate : 48 // number of frames making up that 1s. } }; // check support and performance navig...
MediaCapabilitiesInfo - Web APIs
the mediacapabilitiesinfo interface of the media capabilities api is made available when the promise returned by the mediacapabilities.encodinginfo() or mediacapabilities.decodinginfo() methods of the mediacapabilities interface fulfills, providing information as to whether the media
type is supported, and whether encoding or decoding such media would be smooth and power efficient. properties the mediacapabilitiesinfo interface contains three boolean attribues: supported: given the properties defined in the mediaconfiguration, can the specified piece of media content be encoded (if mediaencodingconfiguration is set) or decode (if mediadecodingconfiguration is set) at all? if yes, supported is true. otherwise, it is false. smooth: given the properties defined in the mediaconfiguration, w...
... media be power efficient? if supported is true, and playback will be power efficient, powerefficient is true, otherwise, is it false. browsers will report a supported media configuration as smooth and powerefficient until stats on this device have been recorded. all supported audio codecs are reported to be power efficient. ...
...rue, and playback will be power efficient, powerefficient is true, otherwise, is it false. browsers will report a supported media configuration as smooth and powerefficient until stats on this device have been recorded. all supported audio codecs are reported to be power efficient. ...
MediaStreamAudioSourceNode - Web APIs
this media could be from a microphone (through getusermedia()) or from a remote peer on a webrtc call (using the rtcpeerconnection's audio tracks). a mediastreamaudiosourcenode has no inputs and exactly one output, and is created using the audiocontext.createmediastreamsource() method. the mediastreamaudiosourcenode takes the audio from the first mediastreamtrack whose kind attribute's value is audio. see track ordering for more information about the order of tracks. ...
...maudiosourcenode inherits the properties of its parent, audionode. mediastream read only the mediastream used when constructing this mediastreamaudiosourcenode. methods inherits methods from its parent, audionode. exceptions invalidstateerror the stream specified by the mediastream parameter does not contain any audio tracks. usage notes typically, you should probably not use this
type of node. it has been replaced with the more predictable mediastreamtrackaudiosourcenode, which has better-defined rules for how it chooses the track to output. if you do chooose to use mediastreamaudiosourcenode, you should keep the following in mind. track ordering for the purposes of the mediastreamtrackaudiosourcenode interface, the order of the audio tracks on the stream is determined by t...
...ta = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.
type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // ...
MediaStreamEvent() - Web APIs
"bubbles", optional and defaulting to false, inherited from eventinit, and indicating if the event must bubble or not. ...
... "bubbles", optional and defaulting to false, inherited from eventinit, and indicating if the event must bubble or not. ...
... "bubbles", optional and defaulting to false, inherited from eventinit, and indicating if the event must bubble or not. ...
MediaStreamTrackEvent() - Web APIs
it is case-sensitive and can be "addtrack" or "removetrack". ...
...it is case-sensitive and can be "addtrack" or "removetrack". ...
...it is case-sensitive and can be "addtrack" or "removetrack". ...
Recording a media element - Web APIs
audio: true }).then(stream => { preview.srcobject = stream; downloadbutton.href = stream; preview.capturestream = preview.capturestream || preview.mozcapturestream; return new promise(resolve => preview.onplaying = resolve); }).then(() => startrecording(preview.capturestream(), recordingtimems)) .then (recordedchunks => { let recordedblob = new blob(recordedchunks, {
type: "video/webm" }); recording.src = url.createobjecturl(recordedblob); downloadbutton.href = recording.src; downloadbutton.download = "recordedvideo.webm"; log("successfully recorded " + recordedblob.size + " bytes of " + recordedblob.
type + " media."); }) .catch(log); }, false); when a click event occurs, here's what happens: lines 2-4 navigator.mediadevices.getus...
...startrecording() returns a promise whose resolution handler is called (receiving as input an array of blob objects containing the chunks of recorded media data) once recording has completed. lines 11-15 the recording process's resolution handler receives as input an array of media data blobs locally known as recordedchunks. the first thing we do is merge the chunks into a single blob whose mime
type is "video/webm" by taking advantage of the fact that the blob() constructor concatenates arrays of objects into one object. then url.createobjecturl() is used to create an url that references the blob; this is then made the value of the recorded video playback element's src attribute (so that you can play the video from the blob) as well as the target of the download button's link. then the down...
...button's download attribute is set. while the download attribute can be a boolean, you can also set it to a string to use as the name for the downloaded file. so by setting the download link's download attribute to "recordedvideo.webm", we tell the browser that clicking the button should download a file named "recordedvideo.webm" whose contents are the recorded video. lines 17-18 the size and
type of the recorded media are output to the log area below the two videos and the download button. line 20 the catch() for all the promises outputs the error to the logging area by calling our log() function. handling the stop button the last bit of code adds a handler for the click event on the stop button using addeventlistener(): stopbutton.addeventlistener("click", function() { stop(previ...
Using the MediaStream Recording API - Web APIs
we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[
type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; ...
...we then use the mediarecorder api to record the stream, and output each recorded snippet into the source of a generated <audio> element so it can be played back. we'll declare some variables for the record and stop buttons, and the <article> that will co...
... first, we display a prompt asking the user to name their clip. next, we ...
Media Session API - Web APIs
e, or the like. mediapositionstate used to contain information about the current playback position, playback speed, and overall media duration when calling the mediasession method setpositionstate() to establish the media's length, playback position, and playback speed. mediasessionactiondetails provides information needed in order to perform the action which has been requested, including the
type of action to perform and any other information needed, such as seek distances or times. examples the following example shows feature detection for the media session api. it then instantiates a metadata object for the session, and adds event handlers for the user control actions: if ('mediasession' in navigator) { navigator.mediasession.metadata = new mediametadata({ title: 'unforgettabl...
...sion api. ...
...ers for the user control actions: if ('mediasession' in navigator) { navigator.mediasession.metadata = new mediametadata({ title: 'unforgettable', artist: 'nat king cole', album: 'the ultimate collection (remastered)', artwork: [ { src: 'https://dummyimage.com/96x96', sizes: '96x96',
type: 'image/png' }, { src: 'https://dummyimage.com/128x128', sizes: '128x128',
type: 'image/png' }, { src: 'https://dummyimage.com/192x192', sizes: '192x192',
type: 'image/png' }, { src: 'https://dummyimage.com/256x256', sizes: '256x256',
type: 'image/png' }, { src: 'https://dummyimage.com/384x384', sizes: '384x384',
type: 'image/png' }, { src: 'https://dummyimage.com/512x512', sizes: '512x512',
type: 'image/png' }, ] }); navigator.mediasession.s...
MouseEvent.initMouseEvent() - Web APIs
ethod. this method must be called to set the event before it is dispatched, using eventtarget.dispatchevent(). once dispatched, 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, ctrlkey, altkey, shiftkey, metakey, 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 b...
...t alt key was depressed during the event. sets the value of mouseevent.altkey. shiftkey whether or not shift key was depressed during the event. sets the value of mouseevent.shiftkey. metakey whether or not meta key was depressed during the event. sets the value of mouseevent.metakey. button the event's mouse button. relatedtarget the event's related eventtarget. ...
...vent.shiftkey. metakey whether or not meta key was depressed during the event. sets the value of mouseevent.metakey. 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. ...
MouseEvent - Web APIs
e 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 deprecated (and non-standard) property, you should instead use pointerevent and look at its pressure property. mouseevent.mozinputsource read only the
type of device that generated the event (one of the moz_source_* constants listed below). this lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). mouseevent.webkitforce read only the amount of pressure applied when clicking mouse...
...e 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. ...
...entdefault alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification. working draft redefines mouseevent from long to double. this means that a pointerevent whose pointer
type is mouse will be a double. pointer lockthe definition of 'mouseevent' in that specification. candidate recommendation from document object model (dom) level 3 events specification, added movementx and movementy properties. css object model (cssom) view modulethe definition of 'mouseevent' in that specification. working draft from document object model (dom) level 3 e...
NetworkInformation - Web APIs
the networkinformation interfaces cannot be instantiated. it is instead accessed through the connection property of the navigator interface. note: this feature is available in web workers. properties this interface also inherits properties of its parent, eventtarget. ...
...ts properties of its parent, eventtarget. networkinformation.downlink read only returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. networkinformation.downlinkmax read only returns the maximum downlink speed, in megabits per second (mbps), for the underlying connection technology. networkinformation.effective
type read only returns the effective
type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'. this value is determined using a combination of recently observed round-trip time and downlink values. networkinformation.rtt read only returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds. networkinformation.savedata ...
...lue is determined using a combination of recently observed round-trip time and downlink values. networkinformation.rtt read only returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds. networkinformation.savedata read only returns true if the user has set a reduced data usage option on the user agent. networkinformation.
type read only returns the
type of connection a device is using to communicate with the network. it will be one of the following values: bluetooth cellular ethernet none wifi wimax other unknown event handlers networkinformation.onchange the event that's fired when connection information changes and the change is fired on this object. methods this interface also inheri...
NodeIterator.whatToShow - Web APIs
nodefilter.show_attribute 2 shows attribute attr nodes. ...
... nodefilter.show_attribute 2 shows attribute attr nodes. ...
...n of other nodes, they do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_fragment 1024 shows documentfragment nodes. nodefilter.show_document_
type 512 shows document
type nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a nodeiterator or treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the documen...
NodeList - Web APIs
ions of nodes, usually returned by properties such as node.childnodes and methods such as document.queryselectorall(). although nodelist is not an array, it is possible to iterate over it with foreach(). it can also be converted to a real array using array.from(). however, some older browsers have not implemented nodelist.foreach() nor array.from(). this can be circumvented by using array.proto
type.foreach() — see this document's example. live vs. static nodelists although they are both considered nodelists, there are 2 varieties of nodelist: live and static. live nodelists in some cases, the nodelist is live, which means that changes in the dom automatically update the collection. for example, node.childnodes is live: const parent = document.getelementbyid('parent'); let child_nod...
...list[i]; } don't use for...in to enumerate the items in nodelists, since they will also enumerate its length and item properties and cause errors if your script assumes it only has to deal with element objects. also, for..in is not guaranteed to visit the properties in any particular order. ...
...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.proto
type.foreach for iteration: const list = document.queryselectorall('input[
type=checkbox]'); array.proto
type.foreach.call(list, function (checkbox) { checkbox.checked = true; }); specifications specification status comment domthe definition of 'nodelist' in that specification. living standard document object model (dom) level 3 core specificationthe defi...
OscillatorNode - Web APIs
presenting the frequency of oscillation in hertz (though the audioparam returned is read-only, the value it represents is not). the default value is 440 hz (a standard middle-a note). oscillatornode.detune an a-rate audioparam representing detuning of oscillation in cents (though the audioparam returned is read-only, the value it represents is not). the default value is 0. oscillatornode.
type a string which specifies the shape of waveform to play; this can be one of a number of standard values, or custom to use a periodicwave to describe a custom waveform. different waves will produce different tones. standard values are "sine", "square", "sawtooth", "triangle" and "custom". the default is "sine". event handlers oscillatornode.onended sets the event handler for the ended event,...
.... event handlers oscillatornode.onended sets the event handler for the ended event, which fires when the tone has stopped playing. methods inherits methods from its parent, audioscheduledsourcenode, and adds the following: oscillatornode.setperiodicwave() sets a periodicwave which describes a periodic waveform to be used instead of one of the standard waveforms; calling this sets the
type to custom. this replaces the now-obsolete oscillatornode.setwavetable() method. oscillatornode.start() specifies the exact time to start playing the tone. oscillatornode.stop() specifies the time to stop playing the tone. examples the following example shows basic usage of an audiocontext to create an oscillator node and to start playing a tone on it. for an applied example, check out our ...
...llowing example shows basic usage of an audiocontext to create an oscillator node and to start playing a tone on it. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.
type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specification status comment web audio apithe definition of 'oscillatornode' in that specification. working draft ...
Page Visibility API - Web APIs
pectedly closed. indexeddb processes are also left unthrottled in order to avoid timeouts. example view live example (video with sound). ...
...uses the video when you switch to another tab and plays again when you return to its tab, was created with the following code: // set the name of the hidden property and the change event for visibility var hidden, visibilitychange; if (
typeof document.hidden !== "undefined") { // opera 12.10 and firefox 18 and later support hidden = "hidden"; visibilitychange = "visibilitychange"; } else if (
typeof document.mshidden !== "undefined") { hidden = "mshidden"; visibilitychange = "msvisibilitychange"; } else if (
typeof document.webkithidden !== "undefined") { hidden = "webkithidden"; visibilitychange = "webkitvisibilitychange"; } var videoelement = document.getelementbyid("videoelement"); // if the page is hidden, pause the video; // if the page is shown, play the video function handl...
... // this shows the paused videoelement...
performance.getEntries() - Web APIs
note: this feature is available in web workers. ...
... note: this feature is available in web workers. ...
...gin"); do_work(50000); performance.mark("end"); performance.mark("begin"); do_work(100000); performance.mark("end"); do_work(200000); performance.mark("end"); // use getentries() to iterate through the each entry let p = performance.getentries(); for (var i=0; i < p.length; i++) { console.log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentriesby
type() to get all "mark" entries p = performance.getentriesby
type("mark"); for (let i=0; i < p.length; i++) { console.log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for ...
PerformanceEntry.name - Web APIs
the name property of the performanceentry interface returns a value that further specifies the value returned by the performanceentry.entry
type property. this property is read only. note: this feature is available in web workers. syntax var name = entry.name; return value the return value depends on the sub
type of the performanceentry object and the value of performanceentry.entry
type, as shown by the table below. value sub
type entry
type values description url performanceframetiming, performancenavigationtiming frame, navigation the document's address. url performanceresourcetiming resource the resolved url of the requested resource. this value doesn't change even if the request is redirected. domstring performancema...
...create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entry
type", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var s...
... candidate recommendati...
PerformanceFrameTiming - Web APIs
e amount of work a browser does in one event loop such as processing dom events, resizing, scrolling, rendering, css animations, etc.. a frame rate of 60fps (frames per second) for a 60hz refresh rate is the target for a good responsive user experience. this means the browser should process a frame in about 16.7ms. an application can register a performanceobserver for "frame" performance entry
types and the observer can retrieve data about the duration of each frame event. this information can be used to help identify areas that take too long to provide a good user experience. <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; positio...
... performanceentry.name returns the document's address. performanceentry.starttime returns the timestamp when the frame was started. performanceentry.duration returns a timestamp indicating the difference between the starttimes of two successive frames. methods this interface has no ...
... performanceentry.name returns the document's address. ...
PerformanceNavigation - Web APIs
this interface is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancenavigation interface represents information about how the navigation to the current document was done. an object of this
type can be obtained by calling the performance.navigation read-only attribute. properties the performancenavigation interface doesn't inherit any properties. ...
...on. please use the performancenavigationtiming interface instead. the legacy performancenavigation interface represents information about how the navigation to the current document was done. an object of this
type can be obtained by calling the performance.navigation read-only attribute. properties the performancenavigation interface doesn't inherit any properties. performancenavigation.
type read only an unsigned short which indicates how the navigation to this page was done. ...
...nts information about how the navigation to the current document was done. an object of this
type can be obtained by calling the performance.navigation read-only attribute. properties the performancenavigation interface doesn't inherit any properties. performancenavigation.
type read only an unsigned short which indicates how the navigation to this page was done. possible values are:
type_navigate (0) the page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the url in the address bar.
type_reload (1) the page was accessed by clicking the reload button or via the location.reload() method.
type_back_forward (2) the page was accessed by navigating into the history.
type_reserved (255) any other way. performancenavigation...
PerformanceResourceTiming.connectEnd - Web APIs
interval to establish the transport connection, as well as other time intervals such as ssl handshake and socks authentication. note: this feature is available in web workers. syntax resource.connectend; return value a domhighrestimestamp representing the time after a connection is established. ...
... as ssl handshake and socks authentication. note: this feature is available in web workers. syntax resource.connectend; return value a domhighrestimestamp representing the time after a connection is established. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...e in web workers. syntax resource.connectend; return value a domhighrestimestamp representing the time after a connection is established. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.connectStart - Web APIs
t starts establishing the connection to the server to retrieve the resource. note: this feature is available in web workers. syntax resource.connectstart; return value a domhighrestimestamp immediately before the browser starts to establish the connection to the server to retrieve the resource. ...
...this feature is available in web workers. syntax resource.connectstart; return value a domhighrestimestamp immediately before the browser starts to establish the connection to the server to retrieve the resource. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
... return value a domhighrestimestamp immediately before the browser starts to establish the connection to the server to retrieve the resource. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.decodedBodySize - Web APIs
resources, it returns the size of the payload after removing any applied content-codings. note: this feature is available in web workers. syntax resource.decodedbodysize; return value the size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings. example the following example, the value of the size properties of all "resource"
type events are logged. function log_sizes(perfentry){ // check for support of the *size properties and print their values // if supported. if ("decodedbodysize" in perfentry) console.log("decodedbodysize = " + perfentry.decodedbodysize); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encoded...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceResourceTiming.domainLookupEnd - Web APIs
when the user agent starts and ends the domain data retrieval from the cache. note: this feature is available in web workers. syntax resource.domainlookupend; return value a domhighrestimestamp representing the time immediately after the browser finishes the domain name lookup for the resource. ...
... this feature is available in web workers. syntax resource.domainlookupend; return value a domhighrestimestamp representing the time immediately after the browser finishes the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...d; return value a domhighrestimestamp representing the time immediately after the browser finishes the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.domainLookupStart - Web APIs
turns the timestamp immediately before the browser starts the domain name lookup for the resource. note: this feature is available in web workers. syntax resource.domainlookupstart; return value a domhighrestimestamp immediately before the browser starts the domain name lookup for the resource. ...
... the resource. note: this feature is available in web workers. syntax resource.domainlookupstart; return value a domhighrestimestamp immediately before the browser starts the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...source.domainlookupstart; return value a domhighrestimestamp immediately before the browser starts the domain name lookup for the resource. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.encodedBodySize - Web APIs
ache or a local resource, it must return the size of the payload body before removing any applied content-codings. syntax resource.encodedbodysize; return value a number representing the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings. example the following example, the value of the size properties of all "resource"
type events are logged. function log_sizes(perfentry){ // check for support of the performanceentry.*size properties and print their values // if supported. if ("decodedbodysize" in perfentry) console.log("decodedbodysize = " + perfentry.decodedbodysize); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceResourceTiming.fetchStart - Web APIs
ects the property returns the time immediately before the user agent starts to fetch the final resource in the redirection. note: this feature is available in web workers. syntax resource.fetchstart; return value a domhighrestimestamp immediately before the browser starts to fetch the resource. ...
... the final resource in the redirection. note: this feature is available in web workers. syntax resource.fetchstart; return value a domhighrestimestamp immediately before the browser starts to fetch the resource. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
... web workers. syntax resource.fetchstart; return value a domhighrestimestamp immediately before the browser starts to fetch the resource. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.redirectEnd - Web APIs
time immediately after receiving the last byte of the response of the last redirect; otherwise, zero is returned. note: this feature is available in web workers. syntax resource.redirectend; return value a timestamp immediately after receiving the last byte of the response of the last redirect. ...
... otherwise, zero is returned. note: this feature is available in web workers. syntax resource.redirectend; return value a timestamp immediately after receiving the last byte of the response of the last redirect. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...rs. syntax resource.redirectend; return value a timestamp immediately after receiving the last byte of the response of the last redirect. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.redirectStart - Web APIs
resource, this property returns the starting time of the fetch that initiates the redirect; otherwise, zero is returned. note: this feature is available in web workers. syntax resource.redirectstart; return value a timestamp representing the start time of the fetch which initiates the redirect. ...
...direct; otherwise, zero is returned. note: this feature is available in web workers. syntax resource.redirectstart; return value a timestamp representing the start time of the fetch which initiates the redirect. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...b workers. syntax resource.redirectstart; return value a timestamp representing the start time of the fetch which initiates the redirect. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.requestStart - Web APIs
ill be the start of the retry request. there is no end property for requeststart. note: this feature is available in web workers. ...
...note: this feature is available in web workers. syntax resource.requeststart; return value a domhighrestimestamp representing the time immediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...art; return value a domhighrestimestamp representing the time immediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.responseEnd - Web APIs
is closed, whichever comes first. note: this feature is available in web workers. syntax resource.responseend; return value a domhighrestimestamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first. ...
...syntax resource.responseend; return value a domhighrestimestamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...tely after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.responseStart - Web APIs
the browser receives the first byte of the response from the server, cache, or local resource. note: this feature is available in web workers. syntax resource.responsestart; return value a domhighrestimestamp immediately after the browser receives the first byte of the response from the server. ...
... resource. note: this feature is available in web workers. syntax resource.responsestart; return value a domhighrestimestamp immediately after the browser receives the first byte of the response from the server. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...ce.responsestart; return value a domhighrestimestamp immediately after the browser receives the first byte of the response from the server. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.secureConnectionStart - Web APIs
eb workers. syntax resource.secureconnectionstart; return value if the resource is fetched over a secure connection, a domhighrestimestamp immediately before the browser starts the handshake process to secure the current connection. if a secure connection is not used, this property returns zero. ...
... is fetched over a secure connection, a domhighrestimestamp immediately before the browser starts the handshake process to secure the current connection. if a secure connection is not used, this property returns zero. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...ore the browser starts the handshake process to secure the current connection. if a secure connection is not used, this property returns zero. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming.transferSize - Web APIs
rs. if the resource is fetched from a local cache, or if it is a cross-origin resource, this property returns zero. syntax resource.transfersize; return value a number representing the size (in octets) of the fetched resource. the size includes the response header fields plus the response payload body (rfc7230). example the following example, the value of size properties of all "resource"
type events are logged. function log_sizes(perfentry){ // check for support of the performanceentry.*size properties and print their values // if supported. if ("decodedbodysize" in perfentry) console.log("decodedbodysize = " + perfentry.decodedbodysize); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + ...
... working draft initial definition. ...
... working draft initial definition. ...
PerformanceResourceTiming.workerStart - Web APIs
ady running, or immediately before starting the service worker thread if it is not already running. if the resource is not intercepted by a service worker the property will always return 0. note: this feature is available in web workers. syntax resource.workerstart; value a domhighrestimestamp. ...
...lready running. if the resource is not intercepted by a service worker the property will always return 0. note: this feature is available in web workers. syntax resource.workerstart; value a domhighrestimestamp. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
...property will always return 0. note: this feature is available in web workers. syntax resource.workerstart; value a domhighrestimestamp. example in the following example, the value of the *start and *end properties of all "resource"
type events are logged. ...
PerformanceResourceTiming - Web APIs
image, or script. the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc.. additionally, the interface extends performanceentry with other properties which provide data about the size of the fetched resource as well as the
type of resource that initiated the fetch. <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/performanceentry" target=...
...ont-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this feature is available in web workers. properties this interface extends the following performanceentry properties for resource performance entry
types by qualifying and constraining them as follows: performanceentry.entry
typeread only returns "resource". performanceentry.nameread only returns the resources url. performanceentry.starttimeread only returns the timestamp for the time a resource fetch started. this value is equivalent to performanceentry.fetchstart. performanceentry.durationread only returns a timestamp that is the ...
...ry.fetchstart. performanceentry.durationread only returns a timestamp that is the difference between the responseend and the starttime properties. the interface also supports the following properties which are listed in the order in which they are recorded for the fetching of a single resource. an alphabetical listing is shown in the navigation, at left. performanceresourcetiming.initiator
typeread only a string representing the
type of resource that initiated the performance entry, as specified in performanceresourcetiming.initiator
type. performanceresourcetiming.nexthopprotocolread only a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7301). performanceresourcetiming.workerstartread only returns a domhighrestimest...
Using the Performance API - Web APIs
additionally, there must be a way to create a timestamp for a specific point in time; this is done with the now() method. web performance interfaces are defined in a suite of standards. the base interface for these standards is the performance interface and its methods and properties are extended by different standards. this guide describes how to use the performance interfaces that are defined in the high-resolution time standard. ...
... properties are extended by different standards. this guide describes how to use the performance interfaces that are defined in the high-resolution time standard. other web performance guides (listed in the see also section) describe how to use additional methods and properties of the performance interface. high precision timing high precision timing is achieved by using the domhighrestimestamp
type for time values. the unit is milliseconds and should be accurate to 5 µs (microseconds). however, if the browser is unable to provide a time value accurate to 5 microseconds (because of hardware or software constraints, for example), the browser can represent the value as a time in milliseconds accurate to a millisecond. the following code example shows the use of domhighrestimestamp and the pe...
... to 5 µs (microseconds). however, if the browser is unable to provide a time value accurate to 5 microseconds (because of hardware or software constraints, for example), the browser can represent the value as a time in milliseconds accurate to a millisecond. the following code example shows the use of domhighrestimestamp and the performance.now() method. the now() method returns a timestamp (of
type domhighrestimestamp) that is a discrete point in time. by calling this method before and after a task, the time it takes to do the task can be measured. function calculate_time() { var starttime; var endtime; starttime = performance.now(); do_task(); endtime = performance.now(); return (endtime - starttime); } serializing the performance object json serialization of the performa...
ProgressEvent() - Web APIs
it is case-sensitive. lengthcomputable optional is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. ...
...it is case-sensitive. lengthcomputable optional is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. ...
...it is case-sensitive. lengthcomputable optional is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. ...
PublicKeyCredential - Web APIs
ic 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 publickeycredential.
type read only secure context inherited from credential. always set to public-key for publickeycredential instances. publickeycredential.id read only secure context inherited from credential and overridden to be the base64url encoding of publickeycredential.rawid. publickeycredential.rawid read only secure context an arraybuffer that holds the globally unique identifier for this publickeycredenti...
...rl encoding of publickeycredential.rawid. publickeycredential.rawid read only secure context an arraybuffer that holds the globally unique identifier for this publickeycredential. this identifier can be used to look up credentials for future calls to credentialscontainer.get. publickeycredential.response read only secure context an instance of an authenticatorresponse object. it is either of
type authenticatorattestationresponse if the publickeycredential was the results of a navigator.credentials.create() call, or of
type authenticatorassertionresponse if the publickeycredential was the result of a navigator.credentials.get() call. methods publickeycredential.getclientextensionresults()secure context if any extensions were requested, this method will return the results of processin...
...ystem. examples creating a new instance of publickeycredential here, we use navigator.credentials.create() to generate a new credential. ...
PublicKeyCredentialCreationOptions.pubKeyCredParams - Web APIs
the pubkeycredparams property of the publickeycredentialcreationoptions 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 pubkeycredparams = publickeycredentialcreationoptions.pubkeycredparams 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 algor...
...efined 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. ...
...se 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. ...
PublicKeyCredentialCreationOptions - Web APIs
options.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. publickeycredentialcreationoptions.pubkeycredparams 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. publickeycredentialcreationoptions.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. publickeycredentialcreationoptions.excludecrede...
... icon: "https://login.example.com/login.ico" }, // cryptographic challenge from the server challenge: new uint8array(26), // user user: { id: new uint8array(16), name: "john.p.smith@example.com", displayname: "john p. ...
... uvm: true, exts: true }, // filter out authenticators which are bound to the device authenticatorselection:{ authenticatorattachment: "cross-platform", requireresidentkey: true, userverification: "preferred" }, // exclude already existing credentials for the user excludecredentials: [ {
type: "public-key", // the id for john.doe@example.com id : new uint8array(26) /* this actually is given by the server */ }, {
type: "public-key", // the id for john-doe@example.com id : new uint8array(26) /* another id */ } ] } }; // create the new credential with the options above navigator.creden...
PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
ns.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 = publickeycredentialrequestoptions.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 matching an existing public key credential identifier (publickeycredential.rawid). this identifier is generated during the creation of the publickeycredential instance. transports optional an array of strings describing the possible transports bet...
...cation) "ble": the authenticator may be used over ble (bluetooth low energy) "internal": the authenticator is specifically bound to the client device (cannot be removed). if the authenticator does not contain any of these public key credentials, the client will throw a domexception "notallowederror". ...
... the client device (cannot be removed). if the authenticator does not contain any of these public key credentials, the client will throw a domexception "notallowederror". ...
RTCDataChannel: error event - Web APIs
le for details. ...
... "invalid mandatory parameter", "unrecognized parameters", "no user data (sctp data chunk has no data)", "cookie received while shutting down", "restart of an association with new addresses", "user-initiated abort", "protocol violation" ]; dc.addeventlistener("error", ev => { const err = ev.error; console.error("webrtc error: ", err.message); // handle specific error detail
types switch(err.errordetail) { case "sdp-syntax-error": console.error(" sdp syntax error in line ", err.sdplinenumber); break; case "idp-load-failure": console.error(" identity provider load failure: http error ", err.httprequeststatuscode); break; case "sctp-failure": if (err.sctpcausecode < sctpcausecodes.length) { conso...
...s rtcerror and the message is an error string specified by the webrtc layer. error information is output to the console using console.error(). the message string is always output, as is information about the source file's name, line number, and column number at which the error occurred. in addition, however, depending on the value of errordetail, additional information may be output. each error
type has a different set of information output. for example, an sdp syntax error displays the line number of the error within the sdp, and an sctp error displays a message corresponding to the sctp cause code. other error
types similarly output appropriate information. you can also set up an event handler for error events using the rtcdatachannel interface's onerror event handler property: dc.onerro...
RTCDataChannel - Web APIs
a. every data channel is associated with an rtcpeerconnection, and each peer connection can have up to a theoretical maximum of 65,534 data channels (the actual limit may vary from browser to browser). to create a data channel and ask a remote peer to join you, call the rtcpeerconnection's createdatachannel() method. ...
...he actual limit may vary from browser to browser). to create a data channel and ask a remote peer to join you, call the rtcpeerconnection's createdatachannel() method. the peer being invited to exchange data receives a datachannel event (which has
type rtcdatachannelevent) to let it know the data channel has been added to the connection. propertiesalso inherits properties from: eventtargetbinary
type the property binary
type on the rtcdatachannel interface is a domstring which specifies the
type of javascript object which should be used to represent binary data received on the rtcdatachannel. values allowed by the websocket.binary
type property are also permitted here: "blob" if blob objects are being used or "arraybuffer" if arraybuffer objects are being used. the default is "blob".bufferedam...
..., which indicates that the data channel is indeed ordered.protocol read only the read-only rtcdatachannel property protocol returns a domstring containing the name of the subprotocol in use. ...
RTCIceCandidate.protocol - Web APIs
l rtcpeerconnection.addicecandidate(). the protocol property's value is set when the rtcicecandidate() constructor is used. the value is automatically extracted from the candidate a-line, if it's formatted properly. syntax var protocol = rtcicecandidate.protocol; value a domstring which indicates what network protocol the candidate uses, udp or tcp. these values are defined by the enumerated
type rtciceprotocol: tcp the candidate, if selected, would use tcp as the transport protocol for its data. the tcp
type property provides additional information about the kind of tcp candidate represented by the object. udp the candidate will use the udp transport protocol for its data. this is the preferred protocol for media interactions because of its better performance profile. note: if pr...
...ecause of its better performance profile. note: if protocol is null — and protocol is supported by the user agent — passing the candidate to addicecandidate() will fail, throwing an operationerror exception. ...
...owing an operationerror exception. usage notes here's an example candidate a-line from an ice transaction: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host the third field, "udp", is the protocol
type, indicating that the candidate would use the udp transport protocol. example this code snippet examines the value of protocol to decide if it should look at the value of tcp
type to see if it's a simultaneous-open (s-o) candidate. if (candidate.protocol == "tcp") { if (candidate.tcp
type == "so") { adjustforsimultaneousopen(candidate); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.protocol' in that specification. candidate recommendation initial de...
RTCIceCandidate - Web APIs
ute as defined in rfc 5245. this string is empty ("") if the rtcicecandidate is an "end of candidates" indicator. component read only a domstring which indicates whether the candidate is an rtp or an rtcp candidate; its value is either "rtp" or "rtcp", and is derived from the "component-id" field in the candidate a-line string. the permitted values are listed in the rtcicecomponent enumerated
type. foundation read only returns a domstring containing a unique identifier that is the same for any candidates of the same
type, share the same base (the address from which the ice agent sent the candidate), and come from the same stun server. this is used to help optimize ice performance while prioritizing and correlating candidates that appear on multiple rtcicetransport objects. ip read only...
...multiple rtcicetransport objects. ip read only a domstring containing the ip address of the candidate. port read only an integer value indicating the candidate's port number. priority read only a long integer value indicating the candidate's priority. protocol read only a string indicating whether the candidate's protocol is "tcp" or "udp". the string is one of those in the enumerated
type rtciceprotocol. relatedaddress read only if the candidate is derived from another candidate, relatedaddress is a domstring containing that host candidate's ip address. for host candidates, this value is null. relatedport read only for a candidate that is derived from another, such as a relay or reflexive candidate, the relatedport is a number indicating the port number of the candidate from...
... specifying the candidate's media stream identification tag which uniquely identifies the media stream within the component with which the candidate is associated, or null if no such association exists. sdpmlineindex read only if not null, sdpmlineindex indicates the zero-based index number of the media description (as defined in rfc 4566) in the sdp with which the candidate is associated. tcp
type read only if protocol is "tcp", tcp
type represents the
type of tcp candidate. otherwise, tcp
type is null.
type read only a domstring indicating the
type of candidate as one of the strings from the rtcicecandidate
type enumerated
type. usernamefragment read only a domstring containing a randomly-generated username fragment ("ice-ufrag") which ice uses for message integrity along with a rand...
RTCIceCandidatePairStats - Web APIs
properties rtcicecandidatepairstats is based upon rtcstats and inherits its properties. ...
...ble optional a boolean value indicating whether or not data can be received on the connection described by the candidate pair. non-standard properties selected optional a firefox-specific boolean value which is true if the candidate pair described by this object is the one currently in use. the spec-compliant way to determine the selected candidate pair is to look for a stats object of
type transport, which is an rtctransportstats object. that object's selectedcandidatepairid property indicates whether or not the specified transport is the one being used. usage notes the currently-active ice candidate pair—if any—can be obtained by calling the rtcicetransport method getselectedcandidatepair(), which returns an rtcicecandidatepair object, or null if there isn't a pair selected...
...if the rtcicetransport performs an ice restart, at which point the state of the ice transport returns to new and negotiation starts once again. for more information, see ice restart in lifetime of a webrtc session. example this example computes the average time elapsed between connectivity checks if the rtcstats object rtcstats is an rtcicecandidatepairstats object. if (rtcstats && rtcstats.
type === "candidate-pair") { let elapsed = (rtcstats.lastrequesttimestamp - rtcstats.firstrequesttimestamp) / rtcstats.requestssent; log("average time between ice connectivity checks: " + elapsed + " ms."); } the code begins by looking at rtcstats to see if its
type is candidate-pair. if it is, then we know that rtcstats is in fact an rtcicecandidatepairstats object. if so, we...
RTCIceCandidateStats.priority - Web APIs
indicating the priority of the rtcicecandidate described by the rtcicecandidatestats object. the value may be anywhere from 1 to 2,147,483,647. determining priority the ice specification describes how user agents and other software using webrtc should calculate the priority. ...
... calculate the priority. ...
... a candidate is calculated using the following variables as inputs: the preferability of the candidate
type (local, server reflexive, peer reflexive, or relayed) the preferability of the candidate's specific ip address (for multihomed agents) the candidate's component id (1 for rtp, 2 for rtcp) the candidate's priority is computed using the formula (p
type is the priority of the candidate's
type and plocal is the priority of the ip address): priority = 224×p
type + 28×plocal + (256 - componentid)priority\quad =\quad { 2 }^{ 24 }\times { p }_{
type }\quad +\quad { 2 }^{ 8 }\times { p }_{ local }\quad +\quad (256\quad -\quad componentid) this is equivalent to mapping the priorities of teh candidate
type, the local ip, and the component id into various bit ranges within the 32-bit priori...
RTCIceServer - Web APIs
the default is password. ...
...the default is password. ...
...the default is password. urls this required property is either a single domstring or an array of domstrings, each specifying a url which can be used to connect to the server. ...
RTCIceTransport - Web APIs
he data is being sent and received. this is particularly useful if you need to access state information about the connection. properties the rtcicetransport interface inherits properties from its parent, eventtarget. it also offers the following properties: component read only the ice component being used by the transport. ...
...rent, eventtarget. it also offers the following properties: component read only the ice component being used by the transport. the value is one of the strings from the rtcicetransport enumerated
type: "rtp" or "rtsp". gatheringstate read only a domstring indicating which gathering state the ice agent is currently in. the value is one of those included in the rtcicegathererstate enumerated
type: "new", "gathering", or "complete". role read only returns a domstring whose value is one of the members of the rtcicerole enumerated
type: "controlling" or "controlled"; this indicates whether the ice agent is the one that makes the final decision as to the candidate pair to use or not. state read only a domstring indicating what the current state of the ice agent is. the value of state ca...
...pair to use or not. state read only a domstring indicating what the current state of the ice agent is. the value of state can be used to determine whether the ice agent has made an initial connection using a viable candidate pair ("connected"), made its final selection of candidate pairs ("completed"), or in an error state ("failed"), among other states. see the rtcicetransportstate enumerated
type for a complete list of states. methods also includes methods from eventtarget, the parent interface. getlocalcandidates() returns an array of rtcicecandidate objects, each describing one of the ice candidates that have been gathered so far for the local device. these are the same candidates which have already been sent to the remote peer by sending an icecandidate event to the rtcpeerconne...
RTCPeerConnection.getStats() - Web APIs
e this example creates a periodic function using setinterval() that collects statistics for an rtcpeerconnection every second, generating an html-formatted report and inserting it into a specific element in the dom. ...
...output += `<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 rtcstats objects on the returned rtcstatsreport. a section is created for each report with a header and all of ...
...<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 rtcstats objects on the returned rtcstatsreport. a section is created for each report with a header and all of the statistics below, with the
type, id, and timestamp handled specially to place them at the top of the list. once the html for the report is generated, it is injected into the element whose class is "stats-box" by setting its innerhtml property. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.getstats()' in that specifi...
RTCPeerConnection.setRemoteDescription() - Web APIs
iguration take effect. syntax apromise = rtcpeerconnection.setremotedescription(sessiondescription); parameters sessiondescription an rtcsessiondescriptioninit or rtcsessiondescription which specifies the remote peer's current offer or answer. this value is an offer or answer received from the remote peer through your implementation of the sessiondescription parameter is technically of
type rtcsessiondescriptioninit, but because rtcsessiondescription serializes to be indistinguishable from rtcsessiondescriptioninit, you can also pass in an rtcsessiondescription. this lets you simplify code such as the following: mypeerconnection.setremotedescription(new rtcsessiondescription(description)) .then(function () { return createmystream(); }) to simply be: mypeerconnection.setremoted...
...urrent descriptions in webrtc connectivity for more details on this process. exceptions the following exceptions are reported to the rejection handler for the promise returned by setremotedescription(): invalidaccesserror the content of the description is invalid. invalidstateerror the rtcpeerconnection is closed, or it's in a state which isn't compatible with the specified description's
type. for example, if the
type is rollback and the signaling state is one of stable, have-local-pranswer, or have-remote-pranswer, this exception is thrown, because you can't roll back a connection that's either fully established or is in the final stage of becoming connected. operationerror any errors that occur which don't match the others specifeid here are reported as operationerror. this includ...
...ror any errors that occur which don't match the others specifeid here are reported as operationerror. this includes identity validation errors. rtcerror an rtcerror with the errordetail set to sdp-syntax-error is reported if the sdp specified by rtcsessiondescription.sdp. the error object's sdplinenumber property indicates the line number within the sdp on which the syntax error was detected.
typeerror the specified rtcsessiondescriptioninit or rtcsessiondescription object is missing the
type property, or no description parameter was provided at all. usage notes when you call setremotedescription(), the ice agent checks to make sure the rtcpeerconnection is in either the stable or have-remote-offer signalingstate. these states indicate that either an existing connection is being renego...
RTCRtpCodecParameters - Web APIs
the rtcrtpcodecparameters dictionary, part of the webrtc api, is used to describe the configuration parameters for a single media codec. in addition to being the
type of the rtcrtpparameters.codecs property, it's used when calling rtcrtptransceiver.setcodecpreferences() to configure a transceiver's codecs before beginning the offer/answer process to establish a webrtc peer connection. most of the fields in this property take values which are defined and maintained by the internet assigned numbers authority (iana). references to relevant iana documents are provided in the see also section at the end of this article. ...
...er.setcodecpreferences() to configure a transceiver's codecs before beginning the offer/answer process to establish a webrtc peer connection. most of the fields in this property take values which are defined and maintained by the internet assigned numbers authority (iana). references to relevant iana documents are provided in the see also section at the end of this article. properties payload
type optional the rtp payload
type used to identify this codec. mime
type optional the codec's mime media
type and sub
type specified as a domstring of the form "
type/sub
type". iana maintains a registry of valid mime
types. clockrate optional an unsigned long integer value specifying the codec's clock rate in hertz (hz). the clock rate is the rate at which the codec's rtp timestamp advances. most c...
... channels optional an unsigned short integer indicating the number of channels the codec should support. for example, for audio codecs, a value of 1 specifies monaural sound while 2 indicates stereo. ...
RTCRtpStreamStats - Web APIs
was called rtcrtpstreamstats until a specification update in the spring of 2017. check the browser compatibility table to know if and when the name change was implemented in specific browsers. properties the rtcrtpstreamstats dictionary is based on rtcstats, and inherits its properties. in addition, some or all of the following properties are available. standard fields included for all media
types codecid a domstring which uniquely identifies the object which was inspected to produce the rtccodecstats object associated with this rtp stream. kind a domstring whose value is "audio" if the associated mediastreamtrack is audio-only or "video" if the track contains video. this value will match that of the media
type indicated by rtccodecstats.codec, as well as the track's kind property. ...
...ng which uniquely identifies the object which was inspected to produce the rtccodecstats object associated with this rtp stream. kind a domstring whose value is "audio" if the associated mediastreamtrack is audio-only or "video" if the track contains video. this value will match that of the media
type indicated by rtccodecstats.codec, as well as the track's kind property. previously called media
type. ssrc the 32-bit integer which identifies the source of the rtp packets this rtcrtpstreamstats object covers. this value is generated per the rfc 3550 specification. trackid a domstring which uniquely identifies the rtcmediastreamtrackstats object representing the associated mediastreamtrack. this is not the same as the value of mediastreamtrack.id. transportid a domstring uniquely identify...
...d per the rfc 3550 specification. trackid a domstring which uniquely identifies the rtcmediastreamtrackstats object representing the associated mediastreamtrack. this is not the same as the value of mediastreamtrack.id. transportid a domstring uniquely identifying the object which was inspected to produce the rtctransportstats object associated with this rtp stream. obsolete fields media
type renamed to kind in the specification in february 2018. see browser compatibility in rtcrtpstreamstats.kind to determine when browsers made the transition. local-only measurements these properties are computed locally, and are only available to the device receiving the media stream. their primary purpose is to examine the error resiliency of the connection, as they provide information about lo...
RTCSessionDescription.toJSON() - Web APIs
"sdp", containing a domstring, or null, with the sdp message corresponding to rtcsessiondescription.sdp property. example // sd is a rtcsessiondescriptor alert(json.stringify(sd)); // this call the tojson() method behind the scene. ...
... "sdp", containing a domstring, or null, with the sdp message corresponding to rtcsessiondescription.sdp property. example // sd is a rtcsessiondescriptor alert(json.stringify(sd)); // this call the tojson() method behind the scene. ...
... "sdp", containing a domstring, or null, with the sdp message corresponding to rtcsessiondescription.sdp property. example // sd is a rtcsessiondescriptor alert(json.stringify(sd)); // this call the tojson() method behind the scene. ...
Range.setEnd() - Web APIs
and end points both set to the specified end position. syntax range.setend(endnode, endoffset); parameters endnode the node inside which the range should end. endoffset an integer greater than or equal to zero representing the offset for the end of the range from the start of endnode. return value undefined. ...
...set to the specified end position. syntax range.setend(endnode, endoffset); parameters endnode the node inside which the range should end. endoffset an integer greater than or equal to zero representing the offset for the end of the range from the start of endnode. return value undefined. exceptions exceptions are thrown as domexception objects of the following
types: invalidnode
typeerror the node specified by endnode is a doc
type node; range endpoints cannot be located inside a doc
type node. indexsizeerror the value specified by endoffset is either greater than or equal to the length of the node or is less than zero. usage notes if the endnode is a node of
type text, comment, or cdatasection, then endoffset is the number of characters from the start of endnode. for oth...
... example const range = document.createrange(); const endnode = document.getelementsbytagname('p').item(3); const endoffset = endnode.childnodes.length; range.setend(endnode, endoffset); setend() is commonly used in conjunction with setstart() to fully configure a range. ...
Report - Web APIs
n passed into the reportingobserver() constructor upon creation of a new observer instance. this contains the list of reports currently contained in the observer's report queue. by sending requests to the endpoints defined via the report-to http header. properties report.body read only the body of the report, which is a reportbody object containing the detailed report information. report.
type read only the
type of report generated, e.g. deprecation or intervention. report.url read only the url of the document that generated the report. methods this interface has no methods defined on it. events this interface has no events that fire on it. examples in our deprecation_report.html example, we create a simple reporting observer to observe usage of deprecated features on our w...
...ort generated, e.g. deprecation or intervention. report.url read only the url of the document that generated the report. methods this interface has no methods defined on it. events this interface has no events that fire on it. ...
...ch takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let 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.appendchi...
Reporting API - Web APIs
d using the reportingobserver() constructor, which is passed two parameters: a callback function that has available as parameters the reports available in the observer's report queue, and a copy of the same reportingobserver object, so observation can be controlled directly from inside the callback. the callback runs when observation starts an options dictionary that allows you to specify the
type of reports to collect, and whether the reports that were generated before the observer was able to be created should be observable (buffered: true). methods are then available on the observer to start collecting reports (reportingobserver.observe()), retrieve the reports currently in the report queue (reportingobserver.takerecords()), and disconnect the observer so it can no longer collect reco...
...(reportingobserver.disconnect()). reporting api interfaces reportingobserver create reportingobserver instances using its constructor, which can then be used to collect and access reports. report an object representing a single report. reporting api dictionaries reportingobserveroptions allows options to be set in the constructor when creating a reporting observer. available report
types the spec defines the following report
types: deprecation report indicates that a webapi or other browser feature being used in the website is expected to stop working in a future release. indicated by a report.body property with a deprecationreportbody return value. intervention report indicates that a request made by the website has been denied by the browser, e.g. for security or user a...
...ndicated by a report.body property with a interventionreportbody return value. crash report indicates that the website stopped running due to a browser crash. indicated by a report.body property with a crashreportbody return value. ...
Request.cache - Web APIs
le response; but update if it's too old. // abortcontroller and signal to allow better memory cleaning. ...
...is would be a function that takes a path and a // reference to the controller since it would need to change the value let controller = new abortcontroller(); fetch("some.json", {cache: "only-if-cached", mode: "same-origin", signal: controller.signal}) .catch(e => e instanceof
typeerror && e.message === "failed to fetch" ? ({status: 504}) : // workaround for chrome; which simply fails with a
typeerror promise.reject(e)) .then(res => { if (res.status === 504) { controller.abort() controller = new abortcontroller(); return fetch("some.json", {cache: "force-cache", mode: "same-origin", signal: controller.signal}) } const date = res.headers.get("date"), dt = date ? new date(date).gettime() : 0 if (dt < (date.now() - 86400000)) { // if older than 2...
... living standard initial definition ...
Request.headers - Web APIs
living standard initial ...
... living standard initial definition ...
... living standard initial definition ...
Request - Web APIs
cache). request.context read only contains the context of the request (e.g., audio, image, iframe, etc.) request.credentials read only contains the credentials of the request (e.g., omit, same-origin, include). the default is same-origin. request.destination read only returns a string from the requestdestination enum describing the request's destination. this is a string indicating the
type of content being requested. request.headers read only contains the associated headers object of the request. request.integrity read only contains the subresource integrity value of the request (e.g., sha256-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=). request.method read only contains the request's method (get, post, etc.) request.mode read only contains the mode of the request (e.g...
... you could then fetch this api request by passing the request object in as a parameter to a windoworworkerglobalscope.fetch() call, for example and get the response: fetch(request) .then(response => { if (response.stat...
... body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'post', body: '{"foo": "bar"}'}); const url = request.url; const method = request.method; const credentials = request.credentials; const bodyused = request.bodyused; note: the body
type can only be a blob, buffersource, formdata, urlsearchparams, usvstring or readablestream
type, so for adding a json object to the payload you need to stringify that object. you could then fetch this api request by passing the request object in as a parameter to a windoworworkerglobalscope.fetch() call, for example and get the response: fetch(request) .then(response => { if (response.status === 200) { return response.json(); } else { throw new error('something went...
SVGAnimatedPathData - Web APIs
seglist animatedpathseglist svgpathseglist normalizedpathseglist svgpathseglist pathseglist normative document svg 1.1 (2nd edition) properties this interface also inherits properties from its parent, svgpathelement. ...
...ies from its parent, svgpathelement. name
type description animatednormalizedpathseglist svgpathseglist provides access to the current animated contents of the 'd' attribute in a form where all path data commands are expressed in terms of the following subset of svgpathseg
types: svg_pathseg_moveto_abs (m), svg_pathseg_lineto_abs (l), svg_pathseg_curveto_cubic_abs (c) and svg_pathseg_closepath (z). animatedpathseglist svgpathseglist provides access to the current animated contents of the 'd' attribute in a form which matches one-for-one with svg's syntax. if the given attribute or property is being animated, contains the...
...eing animated, contains the current animated value of the attribute or property, and both the object itself and its contents are read only. normalizedpathseglist svgpathseglist provides access to the base (i.e., static) contents of the 'd' attribute in a form where all path data commands are expressed in terms of the following subset of svgpathseg
types: svg_pathseg_moveto_abs (m), svg_pathseg_lineto_abs (l), svg_pathseg_curveto_cubic_abs (c) and svg_pathseg_closepath (z). pathseglist svgpathseglist provides access to the base (i.e., static) contents of the 'd' attribute in a form which matches one-for-one with svg's syntax. thus, if the d attribute has an "absolute moveto (m)" and an "absolute ...
SVGComponentTransferFunctionElement - Web APIs
f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomponenttransfer_
type_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_fecomponenttransfer_
type_identity 1 corresponds to the value identity. svg_fecomponenttransfer_
type_table 2 corresponds to the value table. svg_fecomponenttransfer_
type_discrete 3 ...
... to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_fecomponenttransfer_
type_identity 1 corresponds to the value identity. svg_fecomponenttransfer_
type_table 2 corresponds to the value table. svg_fecomponenttransfer_
type_discrete 3 corresponds to the value discrete. svg_fecomponenttransfer_
type_linear 4 corresponds to the value linear. svg_fecomponenttransfer_
type_gamma 5 corresponds to the value gamma. properties this interface also inherits properties from its parent interface, svgelement. svgcomponenttransferfunctionelement.
type read only an svganimatedenumeration corresponding to the
type attribute of the given element. it takes one of the svg_fecom...
... svgcomponenttransferfunctionelement.tablevalues read only an svganimatednumberlist corresponding to the tablevalues attribute of the given element. svgcomponenttransferfunctionelement.slope read only an svganimatednumber corresponding to the slope attribute of the given element. ...
SVGFECompositeElement - Web APIs
svg_fecomposite_operator_over 1 corresponds to the over value. svg_fecomposite_operator_in 2 corresponds to the in value. svg_fecomposite_operator_out 3 corresponds to out value. svg_fecomposite_op...
...x" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecompositeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomposite_operator_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_fecomposite_operator_over 1 corresponds to the over value. svg_fecomposite_operator_in 2 corresponds to the in value. svg_fecomposite_operator_out 3 corresponds to out value. svg_fecomposite_operator_atop 4 correspond...
...e. svg_fecomposite_operator_arithmetic 6 corresponds to arithmetic value. properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes. svgfecompositeelement.in1 read only an svganimatedstring corresponding to the in attribute of the given element. svgfecompositeelement.
type read only an svganimatedenumeration corresponding to the
type attribute of the given element. it takes one of the svg_fecomposite_operator_* constants defined on this interface. svgfecompositeelement.values read only an svganimatednumberlist corresponding to the values attribute of the given element. methods this interface does not provide any specific methods, but implements those of its...
SVGFETurbulenceElement - Web APIs
t" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeturbulenceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants turbulence
types name value description svg_turbulence_
type_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_turbulence_
type_fractalnoise 1 corresponds to the fractalnoise value. svg_turbulence_
type_turbulence 2 corresponds to turbu...
...e is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_turbulence_
type_fractalnoise 1 corresponds to the fractalnoise value. svg_turbulence_
type_turbulence 2 corresponds to turbulence value. stitch options name value description svg_stitch
type_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_stitch
type_stitch 1 corresponds to the stitch value. svg_stitch
type_nostitch 2 corresponds to nostitch value. properties this interface also inherits properties from its parent interfa...
...t.numoctaves read only an svganimatedinteger corresponding to the numoctaves attribute of the given element. svgfeturbulenceelement.seed read only an svganimatednumber corresponding to the seed attribute of the given element. svgfeturbulenceelement.stitchtiles read only an svganimatedenumeration corresponding to the stitchtiles attribute of the given element. it takes one of the svg_stitch
type_* constants defined on this interface. svgfeturbulenceelement.
type read only an svganimatedenumeration corresponding to the
type attribute of the given element. it takes one of the svg_turbulence_
type_* constants defined on this interface. methods this interface does not provide any specific methods, but implements those of its parent, svgelement, and also implements methods of svgfilterpri...
ScreenOrientation - Web APIs
screenorientation.angleread only returns the document's current orientation angle. event handlers screenorientation.onchange the eventhandler called whenever the screen changes orientation. ...
... screenorientation.angleread only returns the document's current orientation angle. event handlers screenorientation.onchange the eventhandler called whenever the screen changes orientation. ...
... 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0
typechrome full support 38edge full support 79firefox full support 43ie no support noopera full support 25safari no support nowebview ...
Using the Screen Capture API - Web APIs
splaymediaoptions) .catch(err => { console.error("error:" + err); return null; }); } either way, the user agent responds by presenting a user interface that prompts the user to choose the screen area to share. both of these implementations of startcapture() return the mediastream containing the captured display imagery. see options and constraints, below, for more on both how to specify the
type of surface you want as well as other ways to adjust the resulting stream. example of a window allowing the user to select a display surface to capture you can then use the captured stream, capturestream, for anything that accepts a stream as input. the examples below show a few ways to make use of the stream. visible vs logical display surfaces for the purposes of the screen capture api, ...
...e vs logical display surfaces for the purposes of the screen capture api, a display surface is any content object that can be selected by the api for sharing purposes. sharing surfaces include the contents of a browser tab, a complete window, all of the applications of a window combined into a single surface, and a monitor (or group of monitors combined together into one surface). there are two
types of display surface. a visible display surface is a surface which is entirely visible on the screen, such as the frontmost window or tab, or the entire screen. a logical display surface is one which is in part or completely obscured, either by being overlapped by another object to some extent, or by being entirely hidden or offscreen. how these are handled by the screen capture api varies. gener...
...o which logged text is placed by the intercepted consolemethod. css the css is entirely cosmetic in this example. the video is given a border, and its width is set to occupy nearly the entire available horizontal space (width: 98%). max-width is set to 860px to set an absolute upper limit on the video's size, the error, warn, and info classes are used to style the corresponding console output
types. #video { border: 1px solid #999; width: 98%; max-width: 860px; } .error { color: red; } .warn { color: orange; } .info { color: darkgreen; } result the final product looks like this. if your browser supports screen capture api, clicking "start capture" will present the user agent's interface for selecting a screen, window, or tab to share. security in order to function whe...
SecurityPolicyViolationEvent.SecurityPolicyViolationEvent() - Web APIs
eventinitdict optional a dictionary object containing information about the properties of the securitypolicyviolationevent to be constructed. ...
... eventinitdict optional a dictionary object containing information about the properties of the securitypolicyviolationevent to be constructed. ...
... eventinitdict optional a dictionary object containing information about the properties of the securitypolicyviolationevent to be constructed. ...
ServiceWorkerRegistration.showNotification() - Web APIs
the notification itself such as for example, the android notification bar. on android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked. body: a string representing an extra content to display within the notification. data: arbitrary data that you want to be associated with the notification. this can be of any data
type. dir : the direction of the notification; it can be auto, ltr or rtl icon: a usvstring containing the url of an image to be used as an icon by the notification. image: a usvstring containing the url of an image to be displayed in the notification. lang: specify the lang used within the notification. this string must be a valid bcp 47 language tag. renotify: a boolean that indicates whe...
...y the notification. image: a usvstring containing the url of an image to be displayed in the notification. lang: specify the lang used within the notification. this string must be a valid bcp 47 language tag. renotify: a boolean that indicates whether to suppress vibrations and audible alerts when reusing a tag value. if options’s renotify is true and options’s tag is the empty string a
typeerror will be thrown. the default is false. requireinteraction: indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. if this value is absent or false, the desktop version of chrome will auto-minimize notifications after approximately twenty seconds. the default value is false. silent: when set indicates that no so...
...ciently large screens, a notification should remain active until the user clicks or dismisses it. if this value is absent or false, the desktop version of chrome will auto-minimize notifications after approximately twenty seconds. the default value is false. silent: when set indicates that no sounds or vibrations should be made. if options’s silent is true and options’s vibrate is present a
typeerror exception will be thrown. the default value is false. tag: an id for a given notification that allows you to find, replace, or remove the notification using a script if necessary. timestamp: a domtimestamp representing the time when the notification was created. it can be used to indicate the time at which a notification is actual. for example, this could be in the past when a notificat...
Using Service Workers - Web APIs
the source code, or look at it running live.) note: a real service worker implementation would use caching and onfetch rather than the xmlhttprequest api. those features are not used here so that you can focus on understanding promises. ...
...se() constructor allows you to create a custom response. in this case, we are just returning a simple text string: new response('hello from your friendly neighbourhood service worker!'); this more complex response below shows that you can optionally pass a set of headers in with your response, emulating standard http response headers. ...
...om your friendly neighbourhood service worker!'); this more complex response below shows that you can optionally pass a set of headers in with your response, emulating standard http response headers. ...
SourceBuffer - Web APIs
nt data from an arraybuffer or arraybufferview object to the sourcebuffer. sourcebuffer.appendbufferasync() starts the process of asynchronously appending the specified buffer to the sourcebuffer. returns a promise which is fulfilled once the buffer has been appended. sourcebuffer.appendstream() appends media segment data from a readablestream object to the sourcebuffer. sourcebuffer.change
type() changes the mime
type that future calls to appendbuffer() will expect the new data to conform to. sourcebuffer.remove() removes media segments within a specific time range from the sourcebuffer. sourcebuffer.removeasync() starts the process of asynchronously removing media segments in the specified range from the sourcebuffer. returns a promise which is fulfilled once all matching segmen...
...as written by nick desaulniers and can be viewed live here (you can also download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.is
typesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime
type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sour...
... recommendation initial definition. ...
SpeechRecognitionError.error - Web APIs
aborted speech input was aborted in some manner, perhaps by some user-agent-specific behavior like a button the user can press to cancel speech input. audio-capture audio capture failed. network network communication required for completing the recognition failed. ...
... aborted speech input was aborted in some manner, perhaps by some user-agent-specific behavior like a button the user can press to cancel speech input. audio-capture audio capture failed. network network communication required for completing the recognition failed. ...
... aborted speech input was aborted in some manner, perhaps by some user-agent-specific behavior like a button the user can press to cancel speech input. audio-capture audio capture failed. network network communication required for completing the recognition failed. ...
StorageEvent - Web APIs
the key attribute is null when the change is caused by the storage clear() method. read only. newvalue doms...
...the key attribute is null when the change is caused by the storage clear() method. read only. ...
...y previous value. read only. storagearea storage represents the storage object that was affected. read only. url usvstring the url of the document whose key changed. read only. methods initstorageevent() initializes the event in a manner analogous to the similarly-named initevent() method in the dom events interfaces. syntax storageevent.initstorageevent(
type[, canbubble[, cancelable[, key[, oldvalue[, newvalue[, url[, storagearea]]]]]]]) parameters
typearg the name of the event. canbubble optional a boolean indicating whether the event bubbles up through the dom or not. cancelable optional a boolean indicating whether the event is cancelable. key optional the key whose value is changing as a result of this event. oldvalue optional the k...
Streams API concepts - Web APIs
er. some of the concepts and terminology associated with streams might be new to you — this article explains all you need to know. readable streams a readable stream is a data source represented in javascript by a readablestream object that flows from an underlying source — this is a resource somewhere on the network or elsewhere on your domain that you want to get data from. there are two
types of underlying source: push sources constantly push data at you when you’ve accessed them, and it is up to you to start, pause, or cancel access to the stream. examples include video streams and tcp/web sockets. pull sources require you to explicitly request data from them once connected to. examples include a file access operation via a fetch or xhr call. the data is read sequentially in...
...d it is up to you to start, pause, or cancel access to the stream. examples include video streams and tcp/web sockets. pull sources require you to explicitly request data from them once connected to. examples include a file access operation via a fetch or xhr call. the data is read sequentially in small pieces called chunks. a chunk can be a single byte, or it can be something larger such as a
typed array of a certain size. a single stream can contain chunks of different sizes and
types. the chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. an internal queue keeps track of the chunks that have not yet been read (see the internal queues and queuing strategies section below). the chunks inside the stream are read by a reader —...
..., to cancel it if wished). only one reader can read a stream at a time; when a reader is created and starts reading a stream (an active reader), we say it is locked to it. if you want another reader to start reading your stream, you typically need to cancel the first reader before you do anything else (although you can tee streams, see the teeing section below) note that there are two different
types of readable stream. as well as the conventional readable stream there is a
type called a byte stream — this is an extended version of a conventional stream for reading underlying byte sources (otherwise known as byob, or “bring your own buffer”) sources. these allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required. which underlying stream...
StyleSheet.media - Web APIs
the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
... the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
... the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
SubmitEvent - Web APIs
properties in addition to the properties listed below, this interface inherits the properties of its parent interface, event. ...
... properties in addition to the properties listed below, this interface inherits the properties of its parent interface, event. ...
...y the payment processors. each of the submit elements' id is used to identify which payment processor the button corresponds to. let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment
type was selected. please try again.", "ok"); } }); the handler id is obtained by using the submit event's submitter property to get the submit button, from which we then get the id. with that in hand, we can call a processorder() function to handle the order, passing along the form and the handler id. specifications specification status comment html living standardt...
TextDecoder() - Web APIs
the textdecoder() constructor returns a newly created textdecoder object for the encoding specified in parameter. if the value for utflabel is unknown, or is one of the two values leading to a 'replacement' decoding algorithm ( "iso-2022-cn" or "iso-2022-cn-ext"), a domexception with the "
typeerror" value is thrown. syntax decoder = new textdecoder(utflabel, options); parameters utflabeloptional is a domstring, defaulting to "utf-8", containing the label of the encoder. ...
...flabel is unknown, or is one of the two values leading to a 'replacement' decoding algorithm ( "iso-2022-cn" or "iso-2022-cn-ext"), a domexception with the "
typeerror" value is thrown. syntax decoder = new textdecoder(utflabel, options); parameters utflabeloptional is a domstring, defaulting to "utf-8", containing the label of the encoder. ...
...e() method must throw a domexception with the "encodingerror" value when an coding error is found. it defaults to false. example var textdecoder1 = new textdecoder("iso-8859-2"); var textdecoder2 = new textdecoder(); var textdecoder3 = new textdecoder("csiso2022kr", {fatal: true}); // allows encodingerror exception to be thrown. var textdecoder4 = new textdecoder("iso-2022-cn"); // throw a
typeerror exception. specifications specification status comment encodingthe definition of 'textdecoder()' in that specification. living standard initial definition. ...
TextDecoder - Web APIs
the textdecoder interface represents a decoder for a specific text encoding, such as utf-8, iso-8859-2, koi8-r, gbk, etc. a decoder takes a stream of bytes as input and emits a stream of code points. examples representing text with
typed arrays this example shows how to decode a chinese/japanese character , as represented by five different
typed arrays: uint8array, int8array, uint16array, int16array, and int32array. let utf8decoder = new textdecoder(); // default 'utf-8' or 'utf8' let u8arr = new uint8array([240, 160, 174, 183]); let i8arr = new int8array([-16, -96, -82, -73]); let u16arr = new uint16array([41200, 47022]); let i16arr = new int16array([-24336, -18514]); let i32arr = new int32array([-1213292304]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8ar...
...s = new uint8array([207, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33]); console.log(win1251decoder.decode(bytes)); // ŠŃивеŃ, миŃ! constructor textdecoder() returns a newly constructed textdecoder that will generate a code point stream with the decoding method specified in parameters. properties the textdecoder interface doesn't inherit any properties. textdecoder.proto
type.encodingread only is a domstring containing the name of the decoder, that is a string describing the method the textdecoder will use. textdecoder.proto
type.fatalread only is a boolean indicating whether the error mode is fatal. textdecoder.proto
type.ignorebomread only is a boolean indicating whether the byte order marker is ignored. methods the textdecoder interface doesn't inherit any...
...string containing the name of the decoder, that is a string describing the method the textdecoder will use. textdecoder.proto
type.fatalread only is a boolean indicating whether the error mode is fatal. textdecoder.proto
type.ignorebomread only is a boolean indicating whether the byte order marker is ignored. methods the textdecoder interface doesn't inherit any method. textdecoder.proto
type.decode() returns a domstring containing the text decoded with the method of the specific textdecoder object. specifications specification status comment encodingthe definition of 'textdecoder' in that specification. living standard initial definition. ...
TouchEvent() - Web APIs
the touchevent() constructor creates a new touchevent. syntax event = new touchevent(
typearg, toucheventinit); values
typearg is a domstring representing the name of the event. toucheventinit optional is a toucheventinit dictionary, having the following fields: "touches", optional and defaulting to [], of
type touch[], that is a list of objects for every point of contact currently 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. ...
...ptional 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. "ctrlkey", optional and defaulting to false, of
type boolean, that indicates if the ctrl key was simultaneously pressed. "shiftkey", optional and defaulting to false, of
type boolean, that indicates if the shift key was simultaneously pressed. "altkey", optional and defaulting to false, of
type boolean, that indicates if the alt key was simultaneously pressed. ...
...al and defaulting to false, of
type boolean, that indicates if the ctrl key was simultaneously pressed. "shiftkey", optional and defaulting to false, of
type boolean, that indicates if the shift key was simultaneously pressed. "altkey", optional and defaulting to false, of
type boolean, that indicates if the alt key was simultaneously pressed. "metakey", optional and defaulting to false, of
type boolean, that indicates if the meta key was simultaneously pressed. the toucheventinit dictionary also accepts fields from uieventinit and from eventinit dictionaries. ...
TrackEvent - Web APIs
hich is part of the html dom specification, is used for events which represent changes to a set of available tracks on an html media element; these events are addtrack and removetrack. it's important not to confuse trackevent with the rtctrackevent interface, which is used for tracks which are part of an rtcpeerconnection. events based on trackevent are always sent to one of the media track list
types: events involving video tracks are always sent to the videotracklist found in htmlmediaelement.videotracks events involving audio tracks are always sent to the audiotracklist specified in htmlmediaelement.audiotracks events affecting text tracks are sent to the texttracklist object indicated by htmlmediaelement.texttracks. constructor trackevent() creates and initializes a new tra...
...tracks are always sent to the videotracklist found in htmlmediaelement.videotracks events involving audio tracks are always sent to the audiotracklist specified in htmlmediaelement.audiotracks events affecting text tracks are sent to the texttracklist object indicated by htmlmediaelement.texttracks. constructor trackevent() creates and initializes a new trackevent object with the event
type specified, as well as optional additional properties. properties trackevent is based on event, so properties of event are also available on trackevent objects. track read only the dom track object the event is in reference to. if not null, this is always an object of one of the media track
types: audiotrack, videotrack, or texttrack). methods trackevent has no methods of its own; howev...
...ventlistener("removetrack", handletrackevent, false); function handletrackevent(event) { var trackkind; if (event.target instanceof(videotracklist)) { trackkind = "video"; } else if (event.target instanceof(audiotracklist)) { trackkind = "audio"; } else if (event.target instanceof(texttracklist)) { trackkind = "text"; } else { trackkind = "unknown"; } switch(event.
type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the javascript instanceof operator to determine which
type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being ...
TransitionEvent() - Web APIs
it is case-sensitive and can only be: 'transitionend'. ...
...it is case-sensitive and can only be: 'transitionend'. propertyname optional is a domstring containing the value of the property-name css property associated with the transition. ...
...it is case-sensitive and can only be: 'transitionend'. propertyname optional is a domstring containing the value of the property-name css property associated with the transition. it defaults to "". ...
TreeWalker.whatToShow - Web APIs
non-matching nodes are skipped, but their children may be included, if relevant. the possible values are: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. ...
...n of other nodes, they do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_fragment 1024 shows documentfragment nodes. nodefilter.show_document_
type 512 shows document
type nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tree, they do ...
...otation node as its root; in this case, it means that the notation node will appear in the first position of the traversal. since entities are not part of the document tree, they do not appear when traversing over the document tree. nodefilter.show_processing_instruction 64 shows processinginstruction nodes. nodefilter.show_text 4 shows text nodes. ...
UIEvent() - Web APIs
sourcecapabilities: an instance of the inputdevicecapabilities interface which provides information about the physical device responsible for generating a touch event. ...
... sourcecapabilities: an instance of the inputdevicecapabilities interface which provides information about the physical device responsible for generating a touch event. ...
... sourcecapabilities: an instance of the inputdevicecapabilities interface which provides information about the physical device responsible for generating a touch event. the uieventinit dictionary also accepts fields from the eventinit dictionary. ...
UIEvent.layerX - Web APIs
relative to the whole of the document unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element. syntax var xpos = event.layerx xpos is an integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired. ...
...pagex\pagey & layerx\layery example</title> <script
type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style
type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse co...
...e scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input
type="text" name="parentid" size="7" /><br /> pagex:<input
type="text" name="pagexcoords" size="7" /> pagey:<input
type="text" name="pageycoords" size="7" /><br /> layerx:<input
type="text" name="layerxcoords" size="7" /> layery:<input
type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification. browser compatibility...
UIEvent.layerY - Web APIs
elative to the whole of the document, unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element. syntax var ypos = event.layery; ypos is an integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired. ...
...pagex\pagey & layerx\layery example</title> <script
type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style
type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse co...
...e scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input
type="text" name="parentid" size="7" /><br /> pagex:<input
type="text" name="pagexcoords" size="7" /> pagey:<input
type="text" name="pageycoords" size="7" /><br /> layerx:<input
type="text" name="layerxcoords" size="7" /> layery:<input
type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification. ...
UIEvent.pageY - Web APIs
ns the vertical coordinate of the event relative to the whole document. syntax var pagey = event.pagey; pagey is an integer value in pixels for the y-coordinate of the mouse pointer, relative to the whole document, when the mouse event fired. this property takes into account any vertical scrolling of the page. ...
...agex\pagey & layerx\layery example</title> <script
type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style
type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse co...
...ncluding page scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input
type="text" name="parentid" size="7" /><br /> pagex:<input
type="text" name="pagexcoords" size="7" /> pagey:<input
type="text" name="pageycoords" size="7" /><br /> layerx:<input
type="text" name="layerxcoords" size="7" /> layery:<input
type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification. ...
URL() - Web APIs
note: this feature is available in web workers. syntax const url = new url(url [, base]) parameters url a usvstring representing an absolute or relative url. if url is a relative url, base is required, and will be used as the base url. if url is an absolute url, a given base will be ignored. base optional a usvstring representing the base url to use in case url is a relative url. ...
...nd will be used as the base url. if url is an absolute url, a given base will be ignored. base optional a usvstring representing the base url to use in case url is a relative url. if not specified, it defaults to ''. note: you can still use an existing url object for the base, which stringifies itself to the object's href property. exceptions exception explanation
typeerror url (in the case of absolute urls) or base + url (in the case of relative urls) is not a valid url. examples // base urls let m = 'https://developer.mozilla.org'; let a = new url("/", m); // => 'https://developer.mozilla.org/' let b = new url(m); // => 'https://developer.mozilla.org/' new url('docs', b); ...
...lla.org/docs' new url('/docs', a); // => 'https://developer.mozilla.org/docs' new url('/docs', "https://developer.mozilla.org/fr-fr/toto"); // => 'https://developer.mozilla.org/docs' new url('/docs', ''); // raises a
typeerror exception as '' is not a valid url new url('/docs'); // raises a
typeerror exception as '/docs' is not a valid url new url('http://www.example.com', ); // => 'http://www.example.com/' new url('http://www.example.com', b); // => 'http://www.example.com/' new url("//foo.com", "https://example.com") // => 'https://foo...
USBEndpoint - Web APIs
to 15 extracted from the bendpointaddress field of the endpoint descriptor defining this endpoint. this value is used to identify the endpoint when calling methods on usbdevice. usbendpoint.direction returns the direction in which this endpoint transfers data, one of: "in" - data is transferred from device to host. "out" - data is transferred from host to device. usbendpoint.
type returns the
type of this endpoint, one of: "bulk" - provides reliable data transfer for large payloads. data sent through a bulk endpoint is guaranteed to be delivered or generate an error but may be preempted by other data traffic. "interrupt" - provides reliable data transfer for small payloads. data sent through an interrupt endpoint is guaranteed to be delivered or generate an err...
...ts there are cases where this must be discovered at runtime. for example, a usb serial device must provide bulk input and output endpoints but their endpoint numbers will depend on what other interfaces the device provides. this code identifies the correct endpoints by searching for the interface implementing the usb cdc interface class and then identifying the candidate endpoints based on their
type and direction. let inendpoint = undefined; let outendpoint = undefined; for (const interface of device.configuration.interfaces) { // only support devices with out multiple alternate interfaces. const alternate = interface.alternates[0]; // identify the interface implementing the usb cdc class. const usb_cdc_class = 10; if (alternate.interfaceclass != usb_cdc_class) { continue; ...
...ation.interfaces) { // only support devices with out multiple alternate interfaces. const alternate = interface.alternates[0]; // identify the interface implementing the usb cdc class. const usb_cdc_class = 10; if (alternate.interfaceclass != usb_cdc_class) { continue; } for (const endpoint of alternate.endpoints) { // identify the bulk transfer endpoints. if (endpoint.
type != "bulk") { continue; } if (endpoint.direction == "in") { inendpoint = endpoint.endpointnumber; } else if (endpoint.direction == "out") { outendpoint = endpoint.endpointnumber; } } } specifications specification status comment webusbthe definition of 'usbendpoint' in that specification. draft initial definition. ...
WebGL2RenderingContext.drawElementsInstanced() - Web APIs
the webgl2renderingcontext.drawelementsinstanced() method of the webgl 2 api renders primitives from array data like the gl.drawelements() method. in addition, it can execute multiple instances of a set of elements. note: when using webgl 1, the angle_instanced_arrays extension can provide this method, too. syntax void gl.drawelementsinstanced(mode, count,
type, offset, instancecount); parameters mode a glenum specifying the
type primitive to render. possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles:...
...e dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. count a glsizei specifying the number of elements to be rendered.
type a glenum specifying the
type of the values in the element array buffer. possible values are: gl.unsigned_byte gl.unsigned_short when using the oes_element_index_uint extension: gl.unsigned_int offset a glintptr specifying an offset in the element array buffer. must be a valid multiple of the size of the given
type. instancecount a glsizei specifying the number of i...
... if count or instancecount are negative, a gl.invalid_value error is thrown. ...
WebGL2RenderingContext.drawRangeElements() - Web APIs
possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. ...
...t vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. start a gluint specifying the minimum array index contained in offset. end a gluint specifying the maximum array index contained in offset. count a glsizei specifying the number of elements to be rendered.
type a glenum specifying the
type of the values in the element array buffer. possible values are: gl.unsigned_byte gl.unsigned_short gl.unsigned_int offset a glintptr specifying an offset in the element array buffer. must be a valid multiple of the size of the given
type. return value none. exceptions if mode is not one of the accepted values, a gl.invalid_enum error is thrown. ...
... if count is negative, a gl.invalid_value error is thrown. ...
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
the webgl2renderingcontext.vertexattribipointer() method of the webgl 2 api specifies integer data formats and locations of vertex attributes in a vertex attributes array. syntax void gl.vertexattribipointer(index, size,
type, stride, offset); parameters index a gluint specifying the index of the vertex attribute that is to be modified. size a glint specifying the number of components per vertex attribute. must be 1, 2, 3, or 4.
type a glenum specifying the data
type of each component in the array. must be one of: gl.byte, gl.unsigned_byte, gl.short, gl.unsigned_short, gl.int, or gl.unsigned_int. stride a glsizei specifying the offset in bytes between the beginning of consecutive vertex attributes. offset a glintptr specifying an offset in bytes of the first componen...
... return value none. description very similar to webglrenderingcontext.vertexattribpointer(). ...
... gl.enablevertexattribarray(1); //3. ...
WebGLRenderingContext.drawElements() - Web APIs
the webglrenderingcontext.drawelements() method of the webgl api renders primitives from array data. syntax void gl.drawelements(mode, count,
type, offset); parameters mode a glenum specifying the
type primitive to render. possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. count a glsizei specifying the number of elements to be rendered.
type a glenum specifying the
type of the values in the element array buffer. possible values are: gl.unsigned_byte g...
... if count is negative, a gl.invalid_value error is thrown. ...
... if count is negative, a gl.invalid_value error is thrown. ...
Scissor animation - Web APIs
olor : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares. var gl, color = getrandomcolor(), position; function setupanimation (evt) { window.removeeventlistener(evt.
type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1], color[2], 1.0); // unlike the browser window, vertical position in webgl is // measured from bottom to top. in here we set the initial // position of the square to be at the top left corner of the // drawing buffer. position = [0, gl.drawingbufferh...
...], color[2], 1.0); // unlike the browser window, vertical position in webgl is // measured from bottom to top. in here we set the initial // position of the square to be at the top left corner of the // drawing buffer. ...
...= document.queryselector("button"); var timer; function startanimation(evt) { button.removeeventlistener(evt.
type, startanimation, false); button.addeventlistener("click", stopanimation, false); document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.
type, stopanimation, false); button.addeventlistener("click", startanimation, false); document.queryselector("strong").innerhtml = "start"; clearinterval(timer); } stopanimation({
type: "click"}); } // variables to hold the size and velocity of the square. var size = [60, 60], velocity = 3.0; function drawanimation () { gl.scissor(position[0], position[1], size[0] , size[1]); gl.
Simple color animation - Web APIs
ion </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.
type, setupanimation, false); // a variable to hold a timer that drives the animation. var timer; // click event handlers. var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.removeeventlistener(evt.
type, startanimation, false); button.addeventlistener("click", stopanimation, false); verb.
..., startanimation, false); button.addeventlistener("click", stopanimation, false); verb.innerhtml="stop"; // setup animation loop by redrawing every second. timer = setinterval(drawanimation, 1000); // give immediate feedback to user after clicking, by // drawing one animation frame. ...
...e. drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.
type, stopanimation, false); button.addeventlistener("click", startanimation, false); verb.innerhtml="start"; // stop animation by clearing the timer. clearinterval(timer); } // call stopanimation() once to setup the initial event // handlers for canvas and button. ...
Textures from code - Web APIs
ure from code. ...
...t : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script
type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_pointsize = 128.0; } </script> <script
type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", set...
... vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.
type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.sh...
Animating textures in WebGL - Web APIs
re = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because video has to be download over the internet // they might take a moment until it's ready so // put a single pixel in the texture so we can // use it immediately. const level = 0; const internalformat = gl.rgba; const width = 1; const height = 1; const border = 0; const srcformat = gl.rgba; const src
type = gl.unsigned_byte; const pixel = new uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, src
type, pixel); // turn off mips and set wrapping to clamp to edge so it // will work regardless of the dimensions of the video. gl.texparameteri(gl.texture_2d, gl.texture_wrap_s, gl.c...
...it's nearly identical to the image onload function in the previous example — except when we call teximage2d(), instead of passing an image object, we pass in the <video> element. webgl knows how to pull ...
...return texture; } here's what the updatetexture() function looks like; this is where the real work is done: function updatetexture(gl, texture, video) { const level = 0; const internalformat = gl.rgba; const srcformat = gl.rgba; const src
type = gl.unsigned_byte; gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, src
type, video); } you've seen this code before. it's nearly identical to the image onload function in the previous example — except when we call teximage2d(), instead of passing an image object, we pass in the <video> element. webgl knows how to pull the current frame out and use it as a texture. then in main() in place of the call to loadtexture() in the previous example, we call inittexture() fo...
Lighting in WebGL - Web APIs
the theory behind simulated lighting in 3d graphics is far beyond the scope of this article, it's helpful to know a bit about how it works. instead of discussing it in depth here, take a look at the article on phong shading at wikipedia, which provides a good overview of the most commonly used lighting model or if you'd like to see a webgl based explanation see this artcle. there are three basic
types of lighting: ambient light is the light that permeates the scene; it's non-directional and affects every face in the scene equally, regardless of which direction it's facing. directional light is light that is emitted from a specific direction. this is light that's coming from so far away that every photon is moving parallel to every other photon. sunlight, for example, is considered direction...
...it to be the buffer we're working with, then send along our array of vertex normals into the buffer by calling bufferdata(). then we add the code to drawscene() to bind the normals array to a shader attribute so the shader code can get access to it: // tell webgl how to pull out the normals from // the normal buffer into the vertexnormal attribute. ...
... // tell webgl how to pull out the normals from // the normal buffer into the vertexnormal attribute. ...
WebGL: 2D and 3D graphics for the web - Web APIs
it is based on opengl es 3.0 and new features include: 3d textures, sampler objects, uniform buffer objects, sync objects, query objects, transform feedback objects, promoted extensions that are now core to webgl 2: vertex array objects, instancin...
...it is based on opengl es 3.0 and new features include: 3d textures, sampler objects, uniform buffer objects, sync objects, query objects, transform feedback objects, promoted extensions that are now core to webgl 2: vertex array objects, instancing, multiple render targets, frag...
...x array objects, instancing, multiple render targets, fragment depth. see also the blog post "webgl 2 lands in firefox" and webglsamples.org/webgl2samples for a few demos. guides and tutorials below, you'll find an assortment of guides to help you learn webgl concepts and tutorials that offer step-by-step lessons and examples. guides data in webgl a guide to variables, buffers, and other
types of data used when writing webgl code. webgl best practices tips and suggestions to help you improve the quality, performance, and reliability of your webgl content. using extensions a guide to using webgl extensions. tutorials webgl tutorial a beginner's guide to webgl core concepts. a good place to start if you don't have previous webgl experience. examples a basic 2d webgl anima...
WebRTC connectivity - Web APIs
ndidates as well. generally, ice candidates using tcp are only going to be used when udp is not available or is restricted in ways that make it not suitable for media streaming. not all browsers support ice over tcp, however. ice allows candidates to represent connections over either tcp or udp, with udp generally being preferred (and being more widely supported). each protocol supports a few
types of candidate, with the candidate
types defining how the data makes its way from peer to peer. udp candidate
types udp candidates (candidates with their protocol set to udp) can be one of these
types: host a host candidate is one for which its ip address is the actual, direct ip address of the remote peer. prflx a peer reflexive candidate is one whose ip address comes from a symmetric nat...
...ich forwards the request through the remote peer's nat, which creates and returns a candidate whose ip address is local to the remote peer. the stun server then replies to the initiator's request with a candidate whose ip address is unrelated to the remote peer. relay a relay candidate is generated just like a server reflexive candidate ("srflx"), but using turn instead of stun. tcp candidate
types tcp candidates (that is, candidates whose protocol is tcp) can be of these
types: active the transport will try to open an outbound connection but won't receive incoming connection requests. this is the most common
type, and the only one that most user agents will gather. passive the transport will receive incoming connection attempts but won't attempt a connection itself. so the transp...
...to otherwise make adaptations to an ongoing session. aborting the call would be an excessive reaction in that situation. instead, you can initiate an ice rollback. a rollback restores the sdp offer (and the connection configuration by extension) to the configuration it had the last time the connection's signalingstate was stable. to programmatically initiate a rollback, send a description whose
type is rollback. any other properties in the description object are ignored. in addition, the ice agent will automatically initiate a rollback when a peer that had previously created an offer receives an offer from the remote peer. in other words, if the local peer is in the state have-local-offer, indicating that the local peer had previously sent an offer, calling setremotedescription() with a rec...
Introduction to WebRTC protocols - Web APIs
escribing the content and not the media content itself. technically, then, sdp is not truly a protocol, but a data format used to describe connection that shares media between devices. documenting sdp is well outside the scope of this documentation; however, there are a few things worth noting here. ...
...describe connection that shares media between devices. documenting sdp is well outside the scope of this documentation; however, there are a few things worth noting here. structure sdp consists of one or more lines of utf-8 text, each beginning with a one-character
type, followed by an equals sign ("="), followed by structured text comprising a value or description, whose format depends on the
type. the lines of text that begin with a given letter are generally referred to as "letter-lines". ...
...h noting here. structure sdp consists of one or more lines of utf-8 text, each beginning with a one-character
type, followed by an equals sign ("="), followed by structured text comprising a value or description, whose format depends on the
type. the lines of text that begin with a given letter are generally referred to as "letter-lines". ...
A simple RTCDataChannel sample - Web APIs
there's nothing incredibly complicated here. ...
...ect </button> <button id="disconnectbutton" name="disconnectbutton" class="buttonright" disabled> disconnect </button> then there's a box which contains the text input box into which the user can
type a message to transmit, with a button to send the entered text. this <div> will be the first peer in the channel. <div class="messagebox"> <label for="message">enter a message: <input
type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages. this <div> block will be the second peer. <div class="messagebox" id="receiveb...
...ue; connectbutton.disabled = false; disconnectbutton.disabled = true; } } } if the channel's state has changed to "open", that indicates that we have finished establishing the link between the two peers. the user interface is updated correspondingly by enabling the text input box for the message to send, focusing the input box so that the user can immediately begin to
type, enabling the "send" and "disconnect" buttons, now that they're usable, and disabling the "connect" button, since it is not needed when the conneciton is open. if the state has changed to "closed", the opposite set of actions occurs: the input box and "send" button are disabled, the "connect" button is enabled so that the user can open a new connection if they wish to do so, and the "disconnect"...
Functions and classes available to Web Workers - Web APIs
ions available from the dom to workers. this article provides a list of those. workers run in another global context, dedicatedworkerglobalscope, different from the current window. by default, methods and properties of window are not available to them, but dedicatedworkerglobalscope, like window, implements windowtimers and windowbase64. ...
... a complex task better suited to be delegated to a web worker. 25 (25) no support no support no support indexeddb database to store records holding simple values and hierarchical objects. 37 (37), 42 (42) for idbcursorwithvalue. 10.0 (yes) 10.1 network information api provides information about the system's connection in terms of general connection
type (e.g., 'wifi', 'cellular', etc.). 53.0 (53) only on mobile (yes) only on mobile no support no support notifications allows web pages to control the display of system notifications to the end user 41 (41) ? ? ? performance the performance interface represents timing-related performance information for the given page. 34.0 (34.0) no support 3...
...nguage: (yes) appname, appversion, online, platform, useragent: 10.0 other: no support (yes) (yes) xmlhttprequest creates and returns a new xmlhttprequest object; this mimics the behavior of the standard xmlhttprequest() constructor. note that the responsexml and channel attributes on xmlhttprequest always return null. basic: 3.5 (1.9.1) response and response
type are available since 10 (10) timeout and ontimeout are available since 13 (13) (yes) (yes) (yes) ...
Web Workers API - Web APIs
age event's data property). the data is copied rather than shared. workers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page. in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null. in addition to dedicated workers, there are other
types of worker: shared workers are workers that can be utilized by multiple scripts running in different windows, iframes, etc., as long as they are in the same domain as the worker. they are a little more complex than dedicated workers — scripts must communicate via an active port. see sharedworker for more details. serviceworkers essentially act as proxy servers that sit between web applicati...
...ions, the browser, and the network (when available). they are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. they will also allow access to push notifications and background sync apis. chrome workers are a firefox-only
type of worker that you can use if you are developing add-ons and want to use workers in extensions and have access to js-c
types in your worker. see chromeworker for more details. audio workers provide the ability for direct scripted audio processing to be done inside a web worker context. note: as per the web workers spec, worker error events should not bubble (see bug 1188141. this has been imp...
... to the running worker code. workerlocation defines the absolute location of the script executed by the worker. sharedworker represents a specific kind of worker that can be accessed from several browsing contexts, being several windows, iframes or even workers. workerglobalscope represents the generic scope of any worker (doing the same job as window does for normal web content). different
types of worker have scope objects that inherit from this interface and add more specific features. dedicatedworkerglobalscope represents the scope of a dedicated worker, inheriting from workerglobalscope and adding some dedicated features. sharedworkerglobalscope represents the scope of a shared worker, inheriting from workerglobalscope and adding some dedicated features. workernavigator repres...
Window.open() - Web APIs
with the request's referrer set to noreferrer; this prevents the request from sending the url of the page that initiated the request to the server where the request is sent. in addition, setting this feature also automatically sets noopener. see rel="noreferrer" for additional details and compatibility information. firefox introduced support for noreferrer in firefox 68. ...
...motefirefoxwindowname", then the browser will create a new window and will name it "promotefirefoxwindowname". ...
...http://www.spreadfirefox.com/" target="promotefirefoxwindow" onclick="openrequestedpopup(this.href, this.target); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> you can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner: <script
type="text/javascript"> var windowobjectreference = null; // global variable var previousurl; /* global variable that will store the url currently in the secondary window */ function openrequestedsinglepopup(url) { if(windowobjectreference == null || windowobjectreference.closed) { windowobjectreference = window.open(url, "singlesecondarywindowname", "resizable,scro...
Window: pageshow event - Web APIs
he page using the browser's forward or back buttons during the initial page load, the pageshow event fires after the load event. bubbles no cancelable no interface pagetransitionevent event handler property onpageshow examples this example sets up event handlers for events listed in the array events. ...
...property onpageshow examples this example sets up event handlers for events listed in the array events. the handler, eventlogger(), logs the
type of event that occurred to the console, and includes the value of the persisted flag on pageshow and pagehide events. ...
...of event that occurred to the console, and includes the value of the persisted flag on pageshow and pagehide events. javascript const events = [ "pagehide", "pageshow", "unload", "load" ]; const eventlogger = event => { switch (event.
type) { case "pagehide": case "pageshow": let ispersisted = event.persisted ? "persisted" : "not persisted"; console.log('event:', event.
type, '-', ispersisted); break; default: console.log('event:', event.
type); break; } }; events.foreach(eventname => window.addeventlistener(eventname, eventlogger) ); html <p>open the console and watch the output as you navigate to and from this page. try loading new pages into this tab, then navigating forward and backward through history, noting the events’ output to t...
Worker - Web APIs
in as the parent page. (note: nested workers are not yet implemented in webkit). not all interfaces and functions are available to scripts inside a worker. workers may use xmlhttprequest for network communication, but its responsexml and channel attributes are always null. ...
...when a message is sent to the parent document from the worker via dedicatedworkerglobalscope.postmessage. the message is stored in the event's data property. ...
...when a message is sent to the parent document from the worker via dedicatedworkerglobalscope.postmessage. ...
WorkerGlobalScope.self - Web APIs
the self read-only property of the workerglobalscope interface returns a reference to the workerglobalscope itself. most of the time it is a specific scope like dedicatedworkerglobalscope, sharedworkerglobalscope, or serviceworkerglobalscope. syntax var selfref = self; value a global scope object (differs depending on the
type of worker you are dealing with, as indicated above). ...
...globalscope itself. most of the time it is a specific scope like dedicatedworkerglobalscope, sharedworkerglobalscope, or serviceworkerglobalscope. syntax var selfref = self; value a global scope object (differs depending on the
type of worker you are dealing with, as indicated above). ...
...e the following: dedicatedworkerglobalscope { undefined: undefined, infinity: infinity, math: mathconstructor, nan: nan, intl: object…} infinity: infinity array: function array() { [native code] } arguments: null caller: null isarray: function isarray() { [native code] } length: 1 name: "array" observe: function observe() { [native code] } proto
type: array[0] unobserve: function unobserve() { [native code] } __proto__: function empty() {} <function scope> arraybuffer: function arraybuffer() { [native code] } blob: function blob() { [native code] } boolean: function boolean() { [native code] } dataview: function dataview() { [native code] } date: function date() { [native code] } dedicatedworkerglobal...
XMLHttpRequest.getResponseHeader() - Web APIs
f. return value a bytestring representing the header's text value, or null if either the response has not yet been received or the header doesn't exist in the response. ...
...nting the header's text value, or null if either the response has not yet been received or the header doesn't exist in the response. example in this example, a request is created and sent, and a readystatechange handler is established to look for the readystate to indicate that the headers have been received; when that is the case, the value of the content-
type header is fetched. ...
...e been received; when that is the case, the value of the content-
type header is fetched. if the content-
type isn't the desired value, the xmlhttprequest is canceled by calling abort(). var client = new xmlhttprequest(); client.open("get", "unicorns-are-teh-awesome.txt", true); client.send(); client.onreadystatechange = function() { if(this.readystate == this.headers_received) { var content
type = client.getresponseheader("content-
type"); if (content
type != my_expected_
type) { client.abort(); } } } specifications specification status comment xmlhttprequestthe definition of 'getresponseheader()' in that specification. living standard whatwg living standard ...
XMLHttpRequest.responseText - Web APIs
le handling an asynchronous request, the value of responsetext always has the current content received from the server, even if it's incomplete because the data has not been completely received yet. you know the entire content has been received when the value of readystate becomes xmlhttprequest.done (4), and status becomes 200 ("ok"). ...
... of readystate becomes xmlhttprequest.done (4), and status becomes 200 ("ok"). exceptions invalidstateerror the xmlhttprequest.response
type is not set to either the empty string or "text". since the responsetext property is only valid for text content, any other value is an error condition. ...
...and status becomes 200 ("ok"). exceptions invalidstateerror the xmlhttprequest.response
type is not set to either the empty string or "text". since the responsetext property is only valid for text content, any other value is an error condition. ...
XMLHttpRequest.send() - Web APIs
is synchronous, this method doesn't return until the response has arrived. send() accepts an optional parameter which lets you specify the request's body; this is primarily used for requests such as put. if the request method is get or head, the body parameter is ignored and the request body is set to null. if no accept header has been set using the setrequestheader(), an accept header with the
type "*/*" (any
type) is sent. syntax xmlhttprequest.send(body) parameters body optional a body of data to be sent in the xhr request. this can be: a document, in which case it is serialized before being sent. an xmlhttprequestbodyinit, which per the fetch spec can be a blob, buffersource, formdata, urlsearchparams, or usvstring object. null if no value is specified for the body, a ...
..., a default value of null is used. the best way to send binary content (e.g. in file uploads) is by using an arraybufferview or blob in conjunction with the send() method. return value undefined. exceptions exception description invalidstateerror send() has already been invoked for the request, and/or the request is complete. networkerror the resource
type to be fetched is a blob, and the method is not get. example: get var xhr = new xmlhttprequest(); xhr.open('get', '/server', true); xhr.onload = function () { // request finished. do processing here. }; xhr.send(null); // xhr.send('string'); // xhr.send(new blob()); // xhr.send(new int8array()); // xhr.send(document); example: post var xhr = new xmlhttprequest(); xhr.open("post", '/...
...hr.open('get', '/server', true); xhr.onload = function () { // request finished. do processing here. }; xhr.send(null); // xhr.send('string'); // xhr.send(new blob()); // xhr.send(new int8array()); // xhr.send(document); example: post var xhr = new xmlhttprequest(); xhr.open("post", '/server', true); //send the proper header information along with the request xhr.setrequestheader("content-
type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { // call a function when the state changes. if (this.readystate === xmlhttprequest.done && this.status === 200) { // request finished. do processing here. } } xhr.send("foo=bar&lorem=ipsum"); // xhr.send(new int8array()); // xhr.send(document); specifications specification status commen...
XRInputSourceEvent() - Web APIs
the xrinputsourceevent() constructor creates and returns a new xrinputsourceevent object describing an event (state change) which has occurred on a webxr user input device represented by an xrinputsource. syntax newinputsourceevent = new xrinputsourceevent(
type, eventinitdict); parameters
type a domstring indicating which of the input source events the new object will represent. permitted values are listed under event
types below. ...
... selectend sent to an xrsession when an ongoing primary action ends, or when an input source with an ongoing primary action has been disconnected from the system. ...
... selectend sent to an xrsession when an ongoing primary action ends, or when an input source with an ongoing primary action has been disconnected from the system. ...
XRReferenceSpaceEvent - Web APIs
properties in addition to inheriting the properties available on the parent interface, event, xrreferencespaceevent objects include the following properties: referencespace read only an xrreferencespace indicating the reference space that generated the event. ...
... properties in addition to inheriting the properties available on the parent interface, event, xrreferencespaceevent objects include the following properties: referencespace read only an xrreferencespace indicating the reference space that generated the event. ...
...icating the reference space that generated the event. transform read only an xrrigidtransform object indicating the position and orientation of the specified referencespace's native origin after the event, defined relative to the coordinate system before the event. methods while xrreferencespaceevent does not define any methods, it inherits the methods of its parent interface, event. event
types reset the reset event is sent to a reference space when its native origin is changed due to a discontinuity, recalibration, or device reset. this is an opportunity for your app to update any stored transforms, position/orientation information, or the like—or to dump any cached values based on the reference's space's origin so you can recompute them as needed. specifications spe...
XRSessionEvent() - Web APIs
the webxr device api's xrsessionevent() constructor creates and returns a new xrsessionevent object. these objects represent events announcing state changes in an xrsession representing an augmented or virtual reality session. syntax newxrsessionevent = new xrsessionevent(
type, eventinitdict); parameters
type a domstring indicating which of the events represented by objects of
type xrsessionevent this particular object represents. see event
types for a list of the permitted values. eventinitdict an object conforming to the xrsessioneventinit dictionary which contains values to be applied to the newly-created event object. permitted values are: session the xrsession to which the event is to be delivered. return value a newly-created xrsessionevent object representing an...
... end fired at the session when it has ended, after being terminated by the application or the user agent. ...
...entinitdict an object conforming to the xrsessioneventinit dictionary which contains values to be applied to the newly-created event object. permitted values are: session the xrsession to which the event is to be delivered. return value a newly-created xrsessionevent object representing an object of the specfied
type and configured as described by the eventinitdict parameter. event
types the following events are represented using the xrsessionevent interface, and are permitted values for its
type property. end fired at the session when it has ended, after being terminated by the application or the user agent. visibilitychange fired at the session whenever its visibility state changes. examples this example creates a listiener that watches for the visibility state of th...
Generating HTML - Web APIs
e xsl:output in the xsl stylesheet will make sure the resulting document will be handled as html. for the xml elements, our own namespace is needed, http://devedge.netscape.com/2002/de, and it is given the prefix myns (xmlns:myns="http://devedge.netscape.com/2002/de"). figure 2 xml file :(example2.xml)view example | view source xml document (example2.xml): <?xml version="1.0"?> <?xml-stylesheet
type="text/xsl" href="example2.xsl"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr. foo</myns:author> <myns:author>mr. bar</myns:author> </myns:authors> <myns:body> the <b>rain</b> in <u>spain</u> stays mainly in the plains. </myns:body> </myns:article> ...
... ... </xsl:stylesheet version="1.0"> a template matching the root node of the xml document is created and used to create the basic structure of the html page. figure 4 : creating the basic html document xsl stylesheet (example2.xsl): ... ...
..."?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style
type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article...
msCapsLockWarningOff - Web APIs
it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mscapslockwarningoff read/write property turns automatic caps lock warning on or off for validated password input fields. this proprietary property is specific to internet explorer and microsoft edge. starting with internet explorer 10, input
type=password fields will automatically display a warning if the caps lock is on. this property enables this warning to be disabled. syntax document.mscapslockwarningoff = true; value
type: boolean false: default. automatic caps lock warning is turned on. true: automatic caps lock warning is turned off. example fiddle: http://jsfiddle.net/jonathansampson/mqcha/1/ example 2 <html> <head> ...
...the caps lock is on. this property enables this warning to be disabled. syntax document.mscapslockwarningoff = true; value
type: boolean false: default. automatic caps lock warning is turned on. true: automatic caps lock warning is turned off. ...
... if (document.mscapslockwarningoff == false) { document.mscapslockwarningoff = true; document.getelementbyid("caps").innerhtml = "warning off"; } else { document.mscapslockwarningoff = false; document.getelementbyid("caps").innerhtml = "warning on"; } } </script> </head> <body> <label>
type a password: <input
type="password" /></label><br /> <button id="caps" onclick="capsoff();">warning off</button> </body> </html> ...
ARIA live regions - Accessibility
only be announced for the planet finally chosen. here is a screenshot of voiceover on mac announcing the update (via subtitles) to the live region: preferring specialized live region roles in the following well-known predefined cases it is better to use a specific provided "live region role": role description compatibility notes log chat, error, game or other
type of log to maximize compatibility, add a redundant aria-live="polite" when using this role. status a status bar or area of the screen that provides an updated status of some kind. screen reader users have a special command to read the current status. to maximize compatibility, add a redundant aria-live="polite" when using this role. alert error or warning message that...
... has researched the support of aria-atomic and aria-relevant in particular. aria-atomic: the aria-atomic=boolean is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes. the possible settings are: false or true. the default setting is false. aria-relevant: the aria-relevant=[list_of_changes] is used to set what
types of changes are relevant to a live region. the possible settings are one or more of: additions, removals, text, all. the default setting is: additions text. aria-labelledby: the aria-labelledby=[idlist] is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region. and label identifiers are separated with a space. aria-describedby: the aria...
..."). <div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> note: as observed, setting/updating the innerhtml again would cause the whole text to be read again, whether or not you set aria-atomic="true", so the above clock example does not work as expected. ...
Using the aria-required attribute - Accessibility
uired. note that this attribute will not automatically change the presentation of the field. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. ...
...r on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. ...
...normative. ...
ARIA: search role - Accessibility
technology to quickly identify and navigate to large sections of the document. the search role is added to the container element that encompasses the items and objects that, as a whole, combine to create search functionality. when a <form> is a search form, use the search role instead of form. if a document includes more than one search, each should have a unique label. ...
..., as a whole, combine to create search functionality. when a <form> is a search form, use the search role instead of form. if a document includes more than one search, each should have a unique label. while there is a input of
type search, there is html element that defines a search landmark. examples <form id="search" role="search"> <label for="search-input">search this site</label> <input
type="search" id="search-input" name="search" spellcheck="false"> <input value="submit"
type="submit"> </form> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document. using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page. best practices prefer html...
...xample of this would be repeating the sitewide search at the top and bottom of the page. <header> <form id="site-search-top" role="search" aria-label="sitewide"> <!-- search input --> </form> </header> ... <footer> <form id="site-search-bottom" role="search" aria-label="sitewide"> <!-- search input --> </form> </footer> redundant descriptions screen readers will announce the
type of role the landmark is. because of this, you do not need to describe what the landmark is in its label. for example, a declaration of role="search" with an of aria-label="sitewide search" may be announced redundantly as, "sitewide search search". added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader...
Web applications and ARIA FAQ - Accessibility
he first potential solution to this problem is to avoid placing aria roles and states in your markup directly. instead, use javascript to dynamically add aria to your page, as shown in the answer to can you show me an example of aria in action? above. your page will still be theoretically invalid, but it will correctly pass all static validation checks. another alternative is to use the html5 doc
type, which includes built-in support for aria. the w3c's html5 validator will even find invalid uses of aria in html5 pages for you. how does html5 relate to aria? html5 introduces a number of useful new semantic tags to html. a few of these tags overlap directly with roles available in aria, such as the new <progress> element. in cases where the browser supports an html5 tag that also exists in ar...
...grading gracefully from html5 to aria when delivering content to browsers that aren't html5-aware, you may want to consider gracefully degrading to the use of aria where necessary. so, using the example of a progress bar, you can degrade gracefully to a role="progressbar" in cases where the <progressbar> tag isn't supported. here is an example of the markup used for an html5 progress bar: <!doc
type html> <html> <head><title>gracefully degrading progress bar</title></head> <body> <progress id="progress-bar" value="0" max="100">0% complete</progress> <button id="update-button">update</button> </body> </html> ... and here is the javascript code that will ensure the progress bar still works in older browsers: var progressbar = document.getelementbyid("progress-bar"); // check t...
...> <progress id="progress-bar" value="0" max="100">0% complete</progress> <button id="update-button">update</button> </body> </html> ... and here is the javascript code that will ensure the progress bar still works in older browsers: var progressbar = document.getelementbyid("progress-bar"); // check to see if the browser supports the html5 <progress> tag. var supportshtml5progress = (
typeof (htmlprogresselement) !== "undefined"); function setupprogress() { if (!supportshtml5progress) { // html5 <progress> isn't supported in this browser, so we need to add // aria roles and states to the element. progressbar.setattribute("role", "progressbar"); progressbar.setattribute("aria-valuemin", 0); progressbar.setattribute("aria-valuemax", 100); } } function update...
Alerts - Accessibility
each field has a set of criteria which must be met in order to pass validation. in order to simplify this example, we’ll check whet...
...each field has a set of criteria which must be met in order to pass validation. in order to simplify this example, we’ll check whether the e-mail address contains the “@” symbol, and if th...
...nstead of using the javascript ‘alert’ function, we’ll use a simple wai-aria widget for notification. this notifies the user of the error, but allows for them continue modifying the form without losing focus (caused by the “onblur” handler in javascript's default ‘alert’ function). ...
Accessibility and Spacial Patterns - Accessibility
n which he displays math. animation figures strongly in this arena. for example, "how" an object looks when it is rotated, from different angles, how they look sliced, and how they relate to each other in space all make a difference in an ability to understand math in spatial terms. braille modern technology enalbes non-experts to print braille. adobe illustrator, for example, allows one to
typeset ada braille for printing out. the ability to represent spatial patterns accurate to those who are blind is critical for accessibility. for example, knowing braille is not enough. the braille dots have to be spatially apart from one another so as to be readable in a "human" way. the human touch does distinguish with ease braille dots that are too close or too far apart from one another. ...
...sh with ease braille dots that are too close or too far apart from one another. space has to surround the braille character. a user of braille does not simply lay a finger on "top" of a braille character, the user has to move her finger over the character, in the way that a sighted person must move her eyes across text written on a page. the nature of space can change depending upon what mime
type is being used, and its version. for example, borders on svg can extend both inward and outward from its dimensions, or for newer versions of svg, entirely outward from it, thus reducing the space around the svg to enable perception. see also mdn accessibiltity: what users can do to browse more safely web accessibiltity for seizures and physical reactions web accessibility: understandin...
...xtend both inward and outward from its dimensions, or for newer versions of svg, entirely outward from it, thus reducing the space around the svg to enable perception. ...
HTML To MSAA - Accessibility
if @name attribute is presented state_system_ linked if @href attribute is presented or click event listener is registered state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @
type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @
type=image ro...
...n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @
type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible has children for each map item input @
type=button, submit, reset role_system_ pushbutton from @value attribute, @alt attribute, default label, @src attribute, @data attribute n/a state_system_ default if @
type attribute has value "submit" n/a "press" n/a input @
type=text, textarea role_system_ text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @
type=password...
... state_system_ default if @
type attribute has value "submit" n/a "press" n/a input @
type=text, textarea role_system_ text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @
type=password role_system_ text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a input
type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if intermediate property of dom element returns true state_system_ checked if checked property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state is changed input
type="radio" role_system_ radiobutton n/a n/a...
Accessibility documentation index - Accessibility
the state of aria technology has always depended on the community. if you notice an implementation issue, please take a little time and let the developers know. here's where to file bugs: 13 using aria: roles, states, and properties aria, accessibility, overview, reference aria defines semantics that can be applied to elements, with these divided into roles (defining a
type of user interface element) and states and properties that are supported by a role. authors must assign an aria role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate aria semantics (via use of an appropriate html element). addition of aria semantics only exposes extra information to a browser's accessibility api, and does not...
...n that requires the user's immediate attention, for example: 16 using the alertdialog role aria, accessibility, codingscripting, html, needscontent, role(2), web development, agent, alertdialog, alerts, modal, user, useragent the alertdialog role is used to notify the user of urgent information that demands the user's immediate attention. as the name implies, alertdialog is a
type of dialog. this means that most of the instructions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: 17 using the aria-activedescendant attribute attribute, document object model, needscontent, property, widget, aria-activedescendant this article describes the aria-activedescendant property. 18 using the aria-describ...
...talog the object. 23 using the aria-orientation attribute aria, accessibility, attribute the aria-orientation attribute is used to indicate whether an element is oriented horizontally or vertically. 24 using the aria-relevant attribute aria, accessibility, needsexample, arialive, attri the aria-relevant attribute is an optional value used to describe what
types of changes have occurred to an aria-live region, and which are relevant and should be announced. any change that is not relevant acts in the same manner it would if the aria-live attribute were set to off. 25 using the aria-required attribute aria, accessibility, needscontent the aria-required attribute is used to indicate that user input is required on an element before a f...
Web Accessibility: Understanding Colors and Luminance - Accessibility
hex, rgb and hsl color spaces all are measured differently. conversions between the color spaces are usually needed. because of the current domination of the rgb color space in measuring color output, most calculations in this document are presumed to be in the rgb color space, and very specifically, in the srgb color space. the srgb color space the mdn document, <color> notes "the css data
type represents a color in the srgb color space." color has many ways of being defined, including rgb, rgb decimal, rgb percent, hsl, cmyk among others. for digital concerns, much of the technology has historically resided in the rgb color space. this is because the companies behind the evolution of digital technology set the standards, and these standards still retain a powerful presence today. t...
... the browser. luminance and contrast contrast contrast between colors ("hues") is a critical component, but the use of color ("hues") alone is not enough to create accessible content. as mentioned before, any calculation of contrast must include luminance in the calculation. in addition, the "shape" of the text itself will matter. thin letters will be harder to read than thick ones; all
type faces need space to "breathe" for human perception. in general, for accessibility purposes, the more contrast the better. that changes with animation. "safer" animation means images with less contrast, not more. for more on color contrast in animation, see three flashes or below threshold understanding sc 2.3.1 icons also need sufficient contrast for perception. see wcag 2.1 technique g207 ...
...gregg vanderheiden, when testing the photosensitive epilepsy analysis tool, noted seizure rates were much higher than expected. they found that we are much more sensitive to saturated red flashing. (see the video, the photosensitive epilepsy analysis tool) measuring color & luminance methods that measures color exploring the rgb color space further, as it is the color space used by the data
type <color>, note that there are actually multiple "versions" of the rgb color space, such as srgb, scrgb, and rgba. there are also different ways to refrence rgb: rgb decimal reference: 153, 0, 0 and an rgb percent reference: 60, 0, 0. window.getcomputedstyle() returns values using rgb decimal reference scale. for example, calling window.getcomputedstyle() on a div with a background-color: #9900...
:enabled - CSS: Cascading Style Sheets
the :enabled css pseudo-class represents any enabled element. an element is enabled if it can be activated (selected, clicked on,
typed into, etc.) or accept focus. the element also has a disabled state, in which it can't be activated or accept focus. /* selects any enabled <input> */ input:enabled { color: blue; } syntax :enabled examples the following example makes the color of text and button <input>s green when enabled, and gray when disabled. this helps the user understand which elements can be interacted with. ...
...ated or accept focus. /* selects any enabled <input> */ input:enabled { color: blue; } syntax :enabled examples the following example makes the color of text and button <input>s green when enabled, and gray when disabled. this helps the user understand which elements can be interacted with. ...
... the following example makes the color of text and button <input>s green when enabled, and gray when disabled. this helps the user understand which elements can be interacted with. html <form action="url_of_form"> <label for="firstfield">first field (enabled):</label> <input
type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input
type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input
type="button" value="submit"> </form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; } result specifications specification status comment html living standardthe definition of ':enabled' in that specification. living standard no change. html5the defini...
:indeterminate - CSS: Cascading Style Sheets
any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements. /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input
type="checkbox"> elements whose indeterminate property is set to true by javascript <input
type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields. html <div> ...
...x"> elements whose indeterminate property is set to true by javascript <input
type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields. ...
...adio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields. ...
:invalid - CSS: Cascading Style Sheets
ail to validate. /* selects any invalid <input> */ input:invalid { background-color: pink; } this pseudo-class is useful for highlighting field errors for the user. syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
...ghlighting field errors for the user. syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
...ground-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the color red is commonly used to indicate invalid input. people who have certain
types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. typically, descriptive text and/or an icon are used. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 notes radio buttons if any one of the radio buttons in ...
:placeholder-shown - CSS: Cascading Style Sheets
he :placeholder-shown css pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text. /* selects any element with an active placeholder */ :placeholder-shown { border: 2px solid silver; } syntax :placeholder-shown examples basic example this example applies special font and border styles when the placeholder is shown. html <input placeholder="
type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way. you can use the text-overflow property to alter the way overflowing text is displayed. html <input id="input1" pl...
...llowing example highlights the branch and id code fields with a custom style. ...
... working draft initial definition. ...
aural - CSS: Cascading Style Sheets
examples basic example @media aural { body { voice-family: paul } } specifications specification status comment css level 2 (revision 2)the definition of 'aural' in that specification. ...
... examples basic example @media aural { body { voice-family: paul } } specifications specification status comment css level 2 (revision 2)the definition of 'aural' in that specification. ...
... examples basic example @media aural { body { voice-family: paul } } specifications specification status comment css level 2 (revision 2)the definition of 'aural' in that specification. ...
Alternative style sheets - CSS: Cascading Style Sheets
e style. chrome requires an extension to use the feature (as of version 48). the web page can also provide its own user interface to let the user switch styles. an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with rel="alternate stylesheet" and title="..." attributes. ...
... of version 48). the web page can also provide its own user interface to let the user switch styles. an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with rel="alternate stylesheet" and title="..." attributes. for example: <link href="reset.css" rel="stylesheet"
type="text/css"> <link href="default.css" rel="stylesheet"
type="text/css" title="default style"> <link href="fancy.css" rel="alternate stylesheet"
type="text/css" title="fancy"> <link href="basic.css" rel="alternate stylesheet"
type="text/css" title="basic"> in this example, the styles "default style", "fancy", and "basic" will be listed in the page style submenu, with "default style" pre-selected. when the user selects a different style, the page will imm...
...tylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets. this tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets. specifications specification status comment html living standardthe definition of 'link
type "alternate"' in that specification. living standard html living standardthe definition of 'alternative stylesheet' in that specification. living standard html living standardthe definition of 'the "title" attribute for the style element' in that specification. living standard html living standardthe definition of 'meta http-equiv="default-style")' i...
Coordinate systems - CSS: Cascading Style Sheets
his code will be called by the event handler for the various mouse events we watch. displaying the coordinates as we'll see in the html, the inner box (the one we're watching for events on) contains several paragraphs; one for each of the four coordinate systems we'll be reporting on. let inner = document.queryselector(".inner"); let log = document.queryselector(".log"); function setcoords(e,
type) { let idx =
type + "x"; let idy =
type + "y"; document.getelementbyid(idx).innertext = e[idx]; document.getelementbyid(idy).innertext = e[idy]; } a reference to the <div> inside the inner box which contains the paragraphs that will show the coordinate information is fetched into log. the setcoords() function is designed to accept as input a mouseevent and the name of the origin to us...
...ow the coordinate information is fetched into log. the setcoords() function is designed to accept as input a mouseevent and the name of the origin to use when obtaining the coordinates. the implementation is then quite simple. the variables idx and idy are set to strings with the names of the properties corresponding to the coordinates in the given coordinate system. for example, if the value of
type is "page", then idx is "pagex" and idy is "pagey". handling the mouse events setcoords() is called by the event handler for the various mouse events, named update(); this is shown below. function update(e) { setcoords(e, "offset"); setcoords(e, "client"); setcoords(e, "page"); setcoords(e, "screen"); } inner.addeventlistener("mouseenter", update, false); inner.addeventlistener("mousem...
...addeventlistener("mouseenter", update, false); inner.addeventlistener("mousemove", update, false); inner.addeventlistener("mouseleave", update, false); the event handler is in the update() method. it simply calls setcoords() once for each coordinate system, passing in the event that occurred. our main code sets up the event handlers on the inner box by calling addeventlistener() for each of the
types mouseenter, mousemove, and mouseleave. html the html for our example is below. note that within the <div> with the id "log", we have a paragraph for each coordinate system, with span used for each of the elements to receive and display the coordinates in each model. <div class="outer"> <div class="inner"> <div class="log"> <p> offset-relative: <span id="offsetx">0</span>, ...
CSS Color - CSS: Cascading Style Sheets
all color-related css properties are touched upon. tools color picker tool this tool makes it easy to create, adjust, and experiment with custom colors. ...
...all color-related css properties are touched upon. tools color picker tool this tool makes it easy to create, adjust, and experiment with custom colors. ...
...all color-related css properties are touched upon. tools color picker tool this tool makes it easy to create, adjust, and experiment with custom colors. ...
Using CSS gradients - CSS: Cascading Style Sheets
you can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions. gradients can be used anywhere you would use an <image>, such as in backgrounds. because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. ...
...ause gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. in addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly. we'll start by introducing linear gradients, then introduce features that are supported in all gradient
types using linear gradients as the example, then move on to radial, conic and repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line. a basic linear gradient to create the most basic
type of gradient, all you need is to specify two colors. these are called color stops. you must have at least two, but you can have as many as you want...
... { width: 120px; height: 120px; } .angled-gradient { background: linear-gradient(70deg, blue, pink); } when using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction. negative angles run in the counterclockwise direction. declaring colors & creating effects all css gradient
types are a range of position-dependent colors. the colors produced by css gradients can vary continuously with position, producing smooth color transitions. it is also possible to create bands of solid colors, and hard transitions between two colors. the following are valid for all gradient functions: using more than two colors you don't have to limit yourself to two colors—you may use as many a...
Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
the css scroll snap specification gives us a way to snap scrolling to certain points as the user scrolls through a document. this can be helpful in creating a more app-like experience on mobile or even on the desktop for some
types of applications. basics of scroll snap the key properties of the scroll snap specification are scroll-snap-
type and scroll-snap-align. the scroll-snap-
type property is used on the scroll container to state the
type and direction of scrolling. ...
...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. ...
...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. ...
border-image-slice - CSS: Cascading Style Sheets
ed 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 for both border-width and border-im...
... 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). ...
...somewhat pixellated (unless of course you use an svg image). ...
break-after - CSS: Cascading Style Sheets
reak-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-containing fragmentation context. if we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break. all forces a page break right after the principal box. breaking through all possible fragmentation contexts. so a break inside a multicol container, which was inside a page co...
... left left right right avoid avoid always page the always value of page-break-* was implemented by browsers as a page break, and not as a column break. therefore the aliasing is to page, rather than the always value in the level 4 spec. ...
....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' in that specification. w...
break-before - CSS: Cascading Style Sheets
k-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-containing fragmentation context. if we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break. all forces a page break right after the principal box. breaking through all possible fragmentation contexts. so a break inside a multicol container, which was inside a page co...
... left left right right avoid avoid always page the always value of page-break-* was implemented by browsers as a page break, and not as a column break. therefore the aliasing is to page, rather than the always value in the level 4 spec. ...
...rem; 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-before' in that specification. ...
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
— display: grid and display: flex. only when the value of display is changed do the children become flex or grid items and begin to respond to the other properties in the grid or flexbox specifications. changing an element's display value changes the formatting context of its direct children. what grid and flexbox demonstrate, however, is that an element has both an outer and an inner display
type. the outer display
type describes whether the element is block-level or inline-level. the inner display
type describes how the children of that box behave. as an example, when we use display: flex we create a block-level container, with flex children. the children are described as participating in a flex formatting context. you can see this if you take a <span> — normally an inline-level eleme...
...ain no benefit from using the two-value versions, as there is a direct mapping for each two-value version to a legacy version, as demonstrated in the table above. to deal with single values of display the specification explains what to do if only the outer value of block or inline is used: "if a <display-outside> value is specified but <display-inside> is omitted, the element’s inner display
type defaults to flow." this means that the behavior is exactly as it is in a single value world. if you specify display: block or display: inline, that changes the outer display value of the box but any children continue in normal flow. if only an inner value of flex, grid, or flow-root is specified then the specification explains that the outer value should be set to block: "if a <display-insid...
...ue world. if you specify display: block or display: inline, that changes the outer display value of the box but any children continue in normal flow. ...
<display-inside> - CSS: Cascading Style Sheets
otherwise it generates a block container box. ...
...otherwise it generates a block container box. ...
...ng it is a non-replaced element). these keywords are used as values of the display property, and can be used for legacy purposes as a single keyword, or as defined in the level 3 specification alongside a value from the <display-outside> keywords. 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. depending on the value of other properties (such as position, float, or overflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (bfc) for its con...
<easing-function> - CSS: Cascading Style Sheets
this lets you vary the animation's speed over the course of its duration. the easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation. they correlate a time ratio to an output ratio, both expressed as <number>s. for these values, 0.0 represents the initial state, and 1.0 represents the final state. depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. ...
...return. for some properties, such as left or right, this creates a kind of "bouncing" effect. however, certain properties will restrict the output if it goes outside an allowable range. for example, a color component greater than 255 or smaller than 0 will be clipped to the closest allowed value (255 and 0, respectively). some cubic-bezier() curves exhibit this property. syntax there are three
types of easing function: linear, cubic bézier curves, and staircase 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 allow...
... cubic-bezier(0.1, 0.7, 1.0, 0.1) /* using <integer> is valid as any <integer> is also a <number>. */ cubic-bezier(0, 0, 1, 1) /* negative values for ordinates are valid, leading to bouncing effects.*/ cubic-bezier(0.1, -0.6, 0.2, 0) /* values > 1.0 for ordinates are also valid. */ cubic-bezier(0, 1.1, 0.8, 4) these cubic bézier curves definitions are invalid: /* though the animated output
type may be a color, bézier curves work w/ numerical ratios.*/ cubic-bezier(0.1, red, 1.0, green) /* abscissas must be in the [0, 1] range or the curve is not a function of time. */ cubic-bezier(2.45, 0.6, 4, 0.1) /* the two points must be defined, there is no default value. */ cubic-bezier(0.3, 2.1) /* abscissas must be in the [0, 1] range or the curve is not a function of time. */ cubic...
<filter-function> - CSS: Cascading Style Sheets
each function requires an argument which, if invalid, results in no filter being applied. blur() blurs the image. brightness() makes the image brighter or darker. contrast() increases or decreases the image's contrast. drop-shadow() applies a drop shadow behind the image. grayscale() converts the image to grayscale. hue-rotate()āāāāāāāāāāāāāā changes the overall hue of the image. invert() inverts the colors of the image. ...
......
... <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input
type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { wi...
font-variation-settings - CSS: Cascading Style Sheets
res (e.g. font-weight, font-style). font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade. in some browsers, this is currently only true when the @font-face declaration includes a font-weight range. registered and custom axes variable font axes come in two
types: registered and custom. registered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. note that this doesn't mean that the author has to include all of these in their font. here are the registered axes along with their corresponding css properties: axis tag css property "wght" font-weig...
...s are identified using lower-case tags, whereas custom axes should be given upper-case tags. note that font designers aren't forced follow this practice in any way, and some won't. the important takeaway here is that axis tags are case-sensitive. in order to use variable fonts on your operating system, you need to make sure that it is up to date. ...
... weight (wght) the following live example's css can be edited to allow you to play with font weight values. ...
<image> - CSS: Cascading Style Sheets
a selection of images chosed based on resolution defined by the image-set() function. description css can handle the following kinds of images: images with intrinsic dimensions (a natural size), like a jpeg, png, or other raster format. images with multiple intrinsic dimensions, existing in multiple versions inside a single file, like some .ico formats. ...
...e concrete object size is calculated so that it matches the intrinsic aspect ratio of the image but without exceeding the default object size in any dimension. if the image has no intrinsic aspect ratio, the intrinsic aspect ratio of the object it applies to is used; if this object has none, the missing width or height are taken from the default object size. note: not all browsers support every
type of image on every property. see the browser compatibility section for details. accessibility concerns browsers do not provide any special information on background images to assistive technology. this is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. if the image contains information critical to understanding ...
... css images module level 4the definition of '<image>' in that specification. working draft adds element(), image(), image-set(), conic-gradient(), repeating-conic-gradient(), and image-resolution. css images module level 3the definition of '<image>' in that specification. candidate recommendation initial definition. before this, there was no explicitly defined <image> data
type. images could only be defined using the url() functional notation. ...
<integer> - CSS: Cascading Style Sheets
there is no unit associated with integers. note: there is no official range of valid <integer> values. opera 12.1 supports values up to 215-1, ie up to 220-1, and other browsers even higher. ...
...there is no unit associated with integers. note: there is no official range of valid <integer> values. opera 12.1 supports values up to 215-1, ie up to 220-1, and other browsers even higher. ...
... up to 220-1, and other browsers even higher. during the css3 values cycle there was a lot of discussion about setting a minimum range to support: the latest decision, in april 2012 during the lc phase, was [-227-1; 227-1], but other values like 224-1 and 230-1 were also proposed. however, the latest spec doesn't specify a range anymore. interpolation when animated, values of the <integer> data
type are interpolated using discrete, whole steps. the calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the floor function. the speed of the interpolation is determined by the timing function associated with the animation. examples valid integers 12 positive integer (without a leading + sign) +123 positive integer (with a leading...
<length-percentage> - CSS: Cascading Style Sheets
examples length-percentage examples the following simple example demonstrates several properties that use <length-percentage> values. ...
... examples length-percentage examples the following simple example demonstrates several properties that use <length-percentage> values. ...
...therefore, all of the following values are acceptable for width: width: 200px; width: 20%; width: calc(100% - 200px); specifications specification status comment css values and units module level 4the definition of '<length-percentage>' in that specification. e...
list-style-image - CSS: Cascading Style Sheets
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. ...
...mage: 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. formal definition initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation
typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-image' in that specification. work...
... css level 2 (revision 1)the definition of 'list-style-image' in that specification. recommendation initial definition ...
list-style-position - CSS: Cascading Style Sheets
st-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 principal block box. ...
... working dr...
... working draft no change. css level 2 (revision 1)the definition of 'lis...
<ratio> - CSS: Cascading Style Sheets
in addition a single <number> as a value is allowable. ...
...in addition a single <number> as a value is allowable. ...
...in addition a single <number> as a value is allowable. examples use in a media query @media screen and (min-aspect-ratio: 16/9) { ... ...
scroll-snap-stop - CSS: Cascading Style Sheets
the scroll-snap-stop css property defines whether the scroll container is allowed to "pass over" possible snap positions. /* keyword values */ scroll-snap-stop: normal; scroll-snap-stop: always; /* global values */ scroll-snap-
type: inherit; scroll-snap-
type: initial; scroll-snap-
type: unset; syntax values normal when the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions. ...
... unset; syntax values normal when the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions. always the scroll container must not "pass over" a possible snap position; and must snap to the first of this elements' snap positions. formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation
typediscrete formal syntax normal | always examples snapping in different axes this example is duplicated from scroll-snap-
type with minor variances. css /* setup */ :root, body { height: 100%; display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed l...
...ightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* definite scroll snap */ .mandatory-scroll-snapping > div { scroll-snap-stop: always; } .proximity-scroll-snapping > div { scroll-snap-stop: normal; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-
type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-
type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-
type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-
type: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; ...
text-justify - CSS: Cascading Style Sheets
the text-justify css property sets what
type of justification should be applied to text when text-align: justify; is set on an element. text-justify: none; text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: distribute; /* deprecated value */ syntax the text-justify property is specified as a single keyword chosen from the list of values below. values none the text justification is turned off. this has the same effect as not setting text-align at all, although it is useful if you need to turn justification on and off for some reason. ...
...haracter; text-justify: distribute; /* deprecated value */ syntax the text-justify property is specified as a single keyword chosen from the list of values below. values none the text justification is turned off. this has the same effect as not setting text-align at all, although it is useful if you need to turn justification on and off for some reason. auto the browser chooses the best
type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g., english, cjk languages, etc.). this is the default justification used if text-justify is not set at all. inter-word the text is justified by adding space between words (effectively varying word-spacing), which is most appropriate...
...acter the text is justified by adding space between characters (effectively varying letter-spacing), which is most appropriate for languages like japanese. distribute exhibits the same behaviour as inter-character; this value is kept for backwards compatibility. formal definition initial valueautoapplies toinline-level and table-cell elementsinheritedyescomputed valueas specifiedanimation
typediscrete formal syntax auto | inter-character | inter-word | none examples <p class="none"><code>text-justify: none</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, feugiat leo. cras eu elementum dui.</p> <p class="auto"><code>text-...
<url> - CSS: Cascading Style Sheets
this change was not only awkward but, debatably, unnecessary, since urns are almost never used in actual css. ...
...this change was not only awkward but, debatably, unnecessary, since urns are almost never used in actual css. ...
...simply identifies a resource. a url is a
type of uri, and describes the location of a resource. a uri can be either a url or a name (urn) of a resource. in css level 1, the url() functional notation described only true urls. in css level 2, the definition of url() was extended to describe any uri, whether a url or a urn. confusingly, this meant that url() could be used to create a <uri> css data
type. this change was not only awkward but, debatably, unnecessary, since urns are almost never used in actual css. to alleviate the confusion, css level 3 returned to the narrower, initial definition. now, url() denotes only true <url>s. syntax the <url> data
type is specified using the url() functional notation. it may be written without quotes, or surrounded by single or double quotes. relative ...
WAI ARIA Live Regions/API Support - Developer guides
aria-relevant on ancestor element container-busy "true" | "false" | "error" "false" the current changes are not yet complete. ...
... aria-relevant on ancestor element container-busy "true" | "false" | "error" "false" the current changes are not yet complete. a state change event for the a11y api's busy state will be fired on the container object currently marked as busy, once it ...
...formation 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 innovation in screen readers. most recent occurance user input? key presses yes mouse clicks yes mouse hovers no page load events no everything else, including focus changes, timer callbacks, xmlhttprequest callbacks, etc. are neutral. th...
Introduction to HTML5 - Developer guides
and work continues toward supporting more of its features. gecko began supporting some html5 features in version 1.8.1. you can find a list of all of the html5 features that gecko currently supports on the main html5 page. for detailed information about multiple browsers' support of html5 features, refer to the caniuse website. declaring that the document contains html5 mark-up with the html5 doc
type the doc
type for html5 is very simple. to indicate that your html content uses html5, simply use: <!doc
type html> doing so will cause even browsers that don't presently support html5 to enter into standards mode, which means that they'll interpret the long-established parts of html in an html5-compliant way while ignoring the new features of html5 they don't support. this is much simpler than...
... declaring the character set with the <meta charset> the first thing done on a page is usually indicating the character set that is used. ...
... the declared character set is different from what they had anticipated. also, if you are not currently using utf-8, it's recommended that you switch to it in your web pages, as it simplifies character handling in documents using different scripts. note that html5 restricts character sets to those compatible with ascii and using at least 8 bits. this was done to tighten security and prevent some
types of attacks. using the new html5 parser the parsing rules of html5, which analyze the meaning of mark-up, have been more precisely defined in html5. until the introduction of html5, only the meaning of valid mark-up was defined, meaning that as soon as one small error was made in the mark-up (most websites have at least one), the behavior was undefined. essentially, it meant that all browsers b...
HTML5 - Developer guides
ections and outlines in html5 a look at the new outlining and sectioning elements in html5: <section>, <article>, <nav>, <header>, <footer> and <aside>. using html5 audio and video the <audio> and <video> elements embed and allow the manipulation of new multimedia content. forms improvements a look at the constraint validation api, several new attributes, new values for the <input> attribute
type and the new <output> element. new semantic elements beside sections, media and forms elements, there are numerous new elements, like <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, or <meter> and <main>, increasing the number of valid html5 elements. improvement in <iframe> using the sandbox and srcdoc attributes, authors can now be precise about the level of security an...
...web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes. using files from web applications support for the new html5 file api has been added to gecko, making it possible for web applications to access local files selected by the user. this includes support for selecting multiple files using the <input> of
type file html element's new multiple attribute. there also is filereader. multimedia using html5 audio and video the <audio> and <video> elements embed and allow the manipulation of new multimedia content. webrtc this technology, where rtc stands for real-time communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plu...
...using css transitions to animate between different states or using css animations to animate parts of the page without a triggering event, you can now control mobile elements on your page. typography improvement authors have better control to reach better typography. they can control text-overflow and hyphenation, but also can add a shadow to it or control more precisely its decorations. custom
typefaces can be downloaded and applied thanks to the new @font-face at-rule. new presentational layouts in order to improve the flexibility of designs, two new layouts have been added: the css multi-column layouts and css flexible box layout. ...
HTML attribute: size - HTML: Hypertext Markup Language
the size attribute defines the width of the <input> and the height of the <select> element. for the input, if the
type attribute is text or password then it's the number of characters. this must be an integer value 0 or higher. if no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. if css targets the element with properties impacting the width, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input
types, the width of the input can be controlled. ...
...ser agent. if css targets the element with properties impacting the width, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input
types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
...dence. the size attribute has no impact on constraint validation. examples by adding size on some input
types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
<a>: The Anchor element - HTML: Hypertext Markup Language
equest. attributes this element's attributes include the global attributes. downloadhtml5 prompts the user to save the linked url instead of navigating to it. can be used with or without a value: without a value, the browser will suggest a filename/extension, generated from various sources: the content-disposition http header the final segment in the url path the media
type (from the (content-
type header, the start of a data: url, or blob.
type for a blob: url) defining a value suggests it as the filename. / and \ characters are converted to underscores (_). filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary. notes: download only works for same-origin urls, or the blob: and data: schemes. ...
...re the same as the global lang attribute. ping a space-separated list of urls. when the link is followed, the browser will send 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, be...
...st browsing context (the "highest" context that’s an ancestor of the current one). if no ancestors, behaves as _self. note: when using target, add rel="noreferrer noopener" to avoid exploitation of the window.opener api; note: in newer browser versions (e.g. firefox 79+) setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener".
type hints at the linked url’s format with a mime
type. no built-in functionality. obsolete attributes charsetobsolete since html5 hinted at the character encoding of the linked url. note: this attribute is obsolete and should not be used by authors. use the http content-
type header on the linked url. coordsobsolete since html5 used with the shape attribute. a comma-separated list of...
<html>: The HTML Document / Root element - HTML: Hypertext Markup Language
aria role no corresponding role permitted aria roles no role permitted dom interface htmlhtmlelement attributes this element includes the global attributes. manifest specifies the uri of a resource manifest indicating resources that should be cached locally. see using the application cache for details. ...
...s element includes the global attributes. manifest specifies the uri of a resource manifest indicating resources that should be cached locally. see using the application cache for details. version specifies the version of the html document
type definition that governs the current document. this attribute is not needed, because it is redundant with the version information in the document
type declaration. xmlns specifies the xml namespace of the document. default value is "http://www.w3.org/1999/xhtml". ...
...the identifying language tag should describe the language used by the majority of the content of the page. ...
<img>: The Image Embed element - HTML: Hypertext Markup Language
oesn't list what image formats to support, so each user agent supports different formats. a complete guide to image formats supported by web browsers is available. below is a list of the image formats that are most commonly used on the web, as well as some older formats that should no longer be used, despite existing content possibly still using them. ...
...tes. alt defines an alternative text description of the image. note: browsers do not always display images. there are a number of situations in which a browser might not display images, such as: non-visual browsers (such as those used 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...
... an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline. you can use the object-position property to position the image within the element's box, and the object-fit property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required). depending on its
type, an image may have an intrinsic width and height. for some image
types, however, intrinsic dimensions are unnecessary. svg images, for instance, have no intrinsic dimensions if their root <svg> element doesn't have a width or height set on it. examples alternative text the following example embeds an image into the page and includes alternative text for accessibility. <img src="https://udn.re...
<li> - HTML: Hypertext Markup Language
of the list item as defined by the <ol> element. the only allowed value for this attribute is a number, even if the list is displayed with roman numerals or letters. list items that follow this one continue numbering from the value set. the value attribute has no meaning for unordered lists (<ul>) or for menus (<menu>). note: this attribute was deprecated in html4, but reintroduced in html5.
type this character attribute indicates the numbering
type: a: lowercase letters a: uppercase letters i: lowercase roman numerals i: uppercase roman numerals 1: numbers this
type overrides the one used by its parent <ol> element, if any. note: this attribute has been deprecated; use the css list-style-
type property instead. examples for more detailed examples, see the <ol> and...
...man numerals 1: numbers this
type overrides the one used by its parent <ol> element, if any. note: this attribute has been deprecated; use the css list-style-
type property instead. examples for more detailed examples, see the <ol> and <ul> pages. ordered list <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> ordered list with a custom value <ol
type="i"> <li value="3">third item</li> <li>fourth item</li> <li>fifth item</li> </ol> unordered list <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> specifications specification status comment html living standardthe definition of '<li>' in that specification. living standard html5the definition of '...
... ...
<object> - HTML: Hypertext Markup Language
e width of a border around the control, in pixels. classidhtml 4 onlyobsolete since html5 the uri of the object's implementation. it can be used together with, or in place of, the data attribute. codebasehtml 4 onlyobsolete since html5 the base path used to resolve relative uris specified by classid, data, or archive. if not specified, the default is the base uri of the current document. code
typehtml 4 onlyobsolete since html5 the content
type of the data specified by classid. data the address of the resource as a valid url. at least one of data and
type must be defined. declarehtml 4 onlyobsolete since html5 the presence of this boolean attribute makes this element a declaration only. the object must be instantiated by a subsequent <object> element. in html5, repeat the <object> ele...
...css pixels. -- (absolute values only. no percentages) name the name of valid browsing context (html5), or the name of the control (html 4). standbyhtml 4 onlyobsolete since html5 a message that the browser can show while loading the object's implementation and data. tabindexhtml 4 onlyobsolete since html5 the position of the element in the tabbing navigation order for the current document.
type the content
type of the resource specified by data. at least one of data and
type must be defined.
typemustmatchhtml5 this boolean attribute indicates if the
type attribute and the actual content
type of the resource must match to be used. usemap a hash-name reference to a <map> element; that is a '#' followed by the value of a name of a map element. width the width of the display resource...
...icates if the
type attribute and the actual content
type of the resource must match to be used. usemap a hash-name reference to a <map> element; that is a '#' followed by the value of a name of a map element. width the width of the display resource, in css pixels. -- (absolute values only. no percentages) examples embed a flash movie <!-- embed a flash movie --> <object data="movie.swf"
type="application/x-shockwave-flash"></object> <!-- embed a flash movie with parameters --> <object data="movie.swf"
type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object> specifications specification status comment html living standardthe definition of '<object>' in that specification. living standard html5the definition of '<o...
<ul>: The Unordered List element - HTML: Hypertext Markup Language
compact this boolean attribute hints that the list should be rendered in a compact style. the interpretation of this attribute depends on the user agent, and it doesn't work in all browsers. warning: do not use this attribute, as it has been deprecated: use css instead. to give a similar effect as the compact attribute, the css property line-height can be used with a value of 80%. ...
...owsers. warning: do not use this attribute, as it has been deprecated: use css instead. to give a similar effect as the compact attribute, the css property line-height can be used with a value of 80%.
type this attribute sets the bullet style for the list. the values defined under html3.2 and the transitional version of html 4.0/4.01 are: circle disc square a fourth bullet
type has been defined in the webtv interface, but not all browsers support it: triangle. if not present and if no css list-style-
type property applies to the element, the user agent selects a bullet
type depending on the nesting level of the list. warning: do not use this attribute, as it has been deprecated; use the css list-style-
type property instead. usage notes the <ul> element is for ...
... usage notes the <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square. the bullet style is not defined in the html description of the page, but in its associated css, using the list-style-
type property. the <ul> and <ol> elements may be nested as deeply as desired. moreover, the nested lists may alternate between <ol> and <ul> without restriction. the <ol> and <ul> elements both represent a list of items. they differ in that, with the <ol> element, the order is meaningful. as a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is ch...
contextmenu - HTML: Hypertext Markup Language
e is obsolete and will be removed from all browsers the contextmenu global attribute is the id of a <menu> to use as the contextual menu for this element. a context menu is a menu that appears upon user interaction, such as a right-click. html5 now allows us to customize this menu. here are some implementation examples, including nested menus. example html <body contextmenu="share"> <menu
type="context" id="share"> <menu label="share"> <menuitem label="twitter" onclick="shareviatwitter()"></menuitem> <menuitem label="facebook" onclick="shareviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. </li> <li contextmenu="changefon...
...item> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. ...
...i am learning contextmenu from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" ...
inputmode - HTML: Hypertext Markup Language
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. ...
... 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 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. input...
...earch 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 typically use <input
type="email"> instead. url a keypad optimized for entering urls. this may have the / key more prominent, for example. 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. ...
itemid - HTML: Hypertext Markup Language
the itemid global attribute provides microdata in the form of a unique, global identifier of an item. an itemid attribute can only be specified for an element that has both itemscope and item
type attributes. also, itemid can only be specified on elements that possess an itemscope attribute whose corresponding item
type refers to or defines a vocabulary that supports global identifiers. the exact meaning of an item
type's global identifier is provided by the definition of that identifier within the specified vocabulary. the vocabulary defines whether several items with the same global identifier can coexist and, if so, how items with the same identifier are handled. note: the whatwg definition specifies that an itemid must be a url. however, the following example correctly illustrates that a u...
...whether several items with the same global identifier can coexist and, if so, how items with the same identifier are handled. note: the whatwg definition specifies that an itemid must be a url. however, the following example correctly illustrates that a urn may also be used. this inconsistency may reflect the incomplete nature of the microdata specification. ...
...ture of the microdata specification. example html <dl itemscope item
type="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8"> <dt>title <dd itemprop="title">the reality dysfunction <dt>author <dd itemprop="author">peter f. hamilton <dt>publication date <dd><time itemprop="pubdate" datetime="1996-01-26">26 january 1996</time> </dl> structured data itemscope item
type: itemid http://vocab.example.net/book: urn:isbn:0-330-34032-8 itemprop title the reality dysfunction itemprop author peter f. hamilton itemprop pubdate 1996-01-26 result specifications specification status comment html living standardthe definition of 'itemid' in that specification. living ...
Using the application cache - HTML: Hypertext Markup Language
object. this sets the application cache's state to obsolete. the cache manifest file referencing a cache manifest file the manifest attribute in a web application can specify either the relative path of a cache manifest file or an absolute url. (absolute urls must be from the same origin as the application). a cache manifest file can have any file extension, but it must be served with the mime
type text/cache-manifest. note: on apache servers, the mime
type for manifest (.appcache) files can be set by adding add
type text/cache-manifest .appcache to a .htaccess file within either the root directory, or the same directory as the application. entries in a cache manifest file the cache manifest file is a simple text file that lists the resources the browser should cache for offline access. r...
...llback: . fallback.html this example uses network and fallback sections to specify that the network.html page must always be retrieved from the network, and that the fallback.html page should be served as a fallback resource (e.g., in case a connection to the server cannot be established). structure of a cache manifest file cache manifest files must be served with the text/cache-manifest mime
type. all resources served using this mime
type must follow the syntax for an application cache manifest, as defined in this section. cache manifests are utf-8 format text files, and may optionally include a bom character. newlines may be represented by line feed (u+000a), carriage return (u+000d), or carriage return and line feed both. the first line of the cache manifest must consist of the string...
...that have already been loaded will not be affected. ...
HTTP authentication - HTTP
www-authenticate and proxy-authenticate headers the www-authenticate and proxy-authenticate response headers define the authentication method that should be used to gain access to a resource. they must specify which authentication scheme is used, so that the client that wishes to authorize knows how to provide the credentials. the syntax for these headers is the following: www-authenticate: <
type> realm=<realm> proxy-authenticate: <
type> realm=<realm> here, <
type> is the authentication scheme ("basic" is the most common scheme and introduced below). the realm is used to describe the protected area or to indicate the scope of protection. this could be a message like "access to the staging site" or similar, so that the user knows to which space they are trying to get access to. authoriza...
...cribe the protected area or to indicate the scope of protection. this could be a message like "access to the staging site" or similar, so that the user knows to which space they are trying to get access to. authorization and proxy-authorization headers the authorization and proxy-authorization request headers contain the credentials to authenticate a user agent with a (proxy) server. here, the <
type> is needed again followed by the credentials, which can be encoded or encrypted depending on which authentication scheme is used. authorization: <
type> <credentials> proxy-authorization: <
type> <credentials> authentication schemes the general http authentication framework is used by several authentication schemes. schemes can differ in security strength and in their availability in client or ...
...e. https/tls should be used with basic authentication. without these additional security enhancements, basic authentication should not be used to protect sensitive or valuable information. restricting access with apache and basic authentication to password-protect a directory on an apache server, you will need a .htaccess and a .htpasswd file. the .htaccess file typically looks like this: auth
type basic authname "access to the staging site" authuserfile /path/to/.htpasswd require valid-user the .htaccess file references a .htpasswd file in which each line consists of a username and a password separated by a colon (:). you cannot see the actual passwords as they are hashed (using md5-based hashing, in this case). note that you can name your .htpasswd file differently if you like, but keep ...
Configuring servers for Ogg media - HTTP
html <audio> and <video> elements allow media presentation without the need for the user to install any plug-ins or other software to do so. this guide covers a few server configuration changes that may be necessary for your web server to correctly serve ogg media files. this information may also be useful if you encounter other media
types your server isn't already configured to recognize. ...
...ents allow media presentation without the need for the user to install any plug-ins or other software to do so. this guide covers a few server configuration changes that may be necessary for your web server to correctly serve ogg media files. this information may also be useful if you encounter other media
types your server isn't already configured to recognize. serve media with the correct mime
type *.ogg and *.ogv files containing video (possibly with an audio track as well, of course), should be served with the video/ogg mime
type. *.oga and *.ogg files containing only audio should be served with the audio/ogg mime
type. if you don't know whether the ogg file contains audio or video, you can serve it with the mime
type application/ogg, and the browser will treat it as a video file. most...
... track as well, of course), should be served with the video/ogg mime
type. *.oga and *.ogg files containing only audio should be served with the audio/ogg mime
type. if you don't know whether the ogg file contains audio or video, you can serve it with the mime
type application/ogg, and the browser will treat it as a video file. most servers don't by default serve ogg media with the correct mime
types, so you'll likely need to add the appropriate configuration for this. for apache, you can add the following to your configuration: add
type audio/ogg .oga add
type video/ogg .ogv add
type application/ogg .ogg you can find specific information about possible media file
types and the codecs used within them in our comprehensive guide to media
types and formats on the web. in particular, the artic...
Accept-Charset - HTTP
browsers usually don't send this header, as the default value for each resource is usually correct and transmitting it would allow fingerprinting. ...
...d allow fingerprinting. if the server cannot serve any character encoding from this request header, it can theoretically send back a 406 not acceptable error code. but for a better user experience, this is rarely done and the accept-charset header is ignored. in early versions of http/1.1, a default character encoding was defined: iso-8859-1. ...
...iso-8859-1. this is no longer recommended, and now each content-
type may have its own default. utf-8 is now well-supported and the overwhelmingly preferred character encoding. to guarantee better privacy through less configuration-based entropy, all browsers omit the accept-charset header: internet explorer 8+, safari 5+, opera 11+, firefox 10+ and chrome 27+ no longer send it. header
type request header forbidden header name yes syntax accept-charset: <charset> // multiple
types, weighted with the quality value syntax: accept-charset: utf-8, iso-8859-1;q=0.5 directives <charset> a character encoding name, like utf-8 or iso-8859-15. * any charset not mentioned elsewhere in the header; * is used as a wildcard. ;q=<weight> any encoding is placed in an...
Accept-Language - HTTP
ternet cafe in a different country); the user may also want to visit a page in another language than the locale of their user interface. if the server cannot serve any matching language, it can theoretically send back a 406 (not acceptable) error code. but, for a better user experience, this is rarely done and more common way is to ignore the accept-language header in this case. ...
... user experience, this is rarely done and more common way is to ignore the accept-language header in this case. header
type request header forbidden header name no cors-safelisted request header yes, with the additional restriction that values can only be 0-9, a-z, a-z, space or *,-.;=. syntax accept-language: <language> accept-language: * // multiple
types, weighted with the quality value syntax: accept-language: fr-ch, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5 directives <language> a language tag (which is sometimes referred to as a "locale identifier"). this consists of a 2-3 letter base language tag representing the language, optionally followed by additional subtags separated by '-'. the most common extra information is the country or regio...
...accept-language: fr-ch, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5 directives <language> a language tag (which is sometimes referred to as a "locale identifier"). this consists of a 2-3 letter base language tag representing the language, optionally followed by additional subtags separated by '-'. the most common extra information is the country or region variant (like 'en-us' or 'fr-ca') or the
type of alphabet to use (like 'sr-latn'). other variants like the
type of orthography ('de-de-1996') are usually not used in the context of this header. * any language; '*' is used as a wildcard. ;q= (q-factor weighting) any value placed in an order of preference expressed using a relative quality value called weight. examples accept-language: de accept-language: de-ch accept-language: en-u...
Accept - HTTP
the accept request http header advertises which content
types, expressed as mime
types, the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-
type response header. browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script. header
type request header forbidden header name no cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del). syntax accept: <mime...
...et a different value is set for the request than when fetching an image, video or a script. header
type request header forbidden header name no cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del). syntax accept: <mime_
type>/<mime_sub
type> accept: <mime_
type>/* accept: */* // multiple
types, weighted with the quality value syntax: accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 directives <mime_
type>/<mime_sub
type> a single, precise mime
type, like text/html. <mime_
type>/* a mime
type, but without any sub
type. image/* will match image/png, image/svg, image/gif and any ...
...ype> accept: <mime_
type>/* accept: */* // multiple
types, weighted with the quality value syntax: accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 directives <mime_
type>/<mime_sub
type> a single, precise mime
type, like text/html. <mime_
type>/* a mime
type, but without any sub
type. image/* will match image/png, image/svg, image/gif and any other image
types. */* any mime
type ;q= (q-factor weighting) any value used is placed in an order of preference expressed using relative quality value called the weight. examples accept: text/html accept: image/* // general default accept: */* // default for navigation requests accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 specifications specification title ...
CSP: form-action - HTTP
t-security-policy (csp) form-action directive restricts the urls which can be used as the target of a form submissions from a given context. whether form-action should block redirects after a form submission is debated and browser implementations of this aspect are inconsistent (e.g. firefox 57 doesn't block the redirects whereas chrome 63 does). csp version 2 directive
type navigation directive default-src fallback no. not setting this allows anything. syntax one or more sources can be set for the form-action policy: content-security-policy: form-action <source>; content-security-policy: form-action <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an option...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
...et content-security-policy "form-action 'none'; </ifmodule> nginx configuration add_header content-security-policy "form-action 'none';" violation case using a <form> element with an action set to inline javascript will result in a csp violation. <meta http-equiv="content-security-policy" content="form-action 'none'"> <form action="javascript:alert('foo')" id="form1" method="post"> <input
type="text" name="fieldname" value="fieldvalue"> <input
type="submit" id="submit" value="submit"> </form> // error: refused to send form data because it violates the following // content security policy directive: "form-action 'none'". specifications specification status comment content security policy level 3the definition of 'form-action' in that specification. workin...
CSP: navigate-to - HTTP
any means including <form> (if form-action is not specified), <a>, window.location, window.open, etc. this is an enforcement on what navigations this document initiates not on what this document is allowed to navigate to. note: if the form-action directive is present, the navigate-to directive will not act on navigations that are form submissions. csp version 3 directive
type navigation directive default-src fallback no. not setting this allows anything. syntax one or more sources can be set for the navigate-to policy: content-security-policy: navigate-to <source>; content-security-policy: navigate-to <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an option...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
...ed in the violation report. examples meta tag configuration <meta http-equiv="content-security-policy" content="navigate-to 'none'"> violation case using a <form> element with an action set to inline javascript will result in a csp violation. <meta http-equiv="content-security-policy" content="navigate-to 'none'"> <form action="javascript:alert('foo')" id="form1" method="post"> <input
type="text" name="fieldname" value="fieldvalue"> <input
type="submit" id="submit" value="submit"> </form> specifications specification status comment content security policy level 3the definition of 'navigate-to' in that specification. working draft initial definition. ...
Trailer - HTTP
the trailer response header allows the sender to include additional fields at the end of chunked messages in order to supply metadata that might be dynamically generated while the message body is sent, such as a message integrity check, digital signature, or post-processing status. the te request header needs to be set to "trailers" to allow trailer fields. header
type response header forbidden header name yes syntax trailer: header-names directives header-names http header fields which will be present in the trailer part of chunked messages. these header fields are disallowed: message framing headers (e.g., transfer-encoding and content-length), routing headers (e.g., host), request modifiers (e.g., controls and conditionals, like cache-contro...
...elds which will be present in the trailer part of chunked messages. ...
...s and conditionals, like cache-control, max-forwards, or te), authentication headers (e.g., authorization or set-cookie), or content-encoding, content-
type, content-range, and trailer itself. examples chunked transfer encoding using a trailing header in this example, the expires header is used at the end of the chunked message and serves as a trailing header. ...
Link prefetching FAQ - HTTP
y prefetching specified documents and stores them in its cache. when the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache. does prefetching work with https? starting in gecko 1.9.1 (firefox 3.5), https content can be prefetched. what are the prefetching hints? the browser looks for either an html <link> or an http link: header with a relation
type of either next or prefetch. an example using the link tag follows: <link rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>; rel=prefetch the format for the link: header is described in rfc 5988 section 5. the browser observes all of these hints and queues up each unique request to be prefetched when the browser is idle. t...
... is idle. there can be multiple hints per page, as it might make sense to prefetch multiple documents. for example, the next document might contain several large images. some more examples follow: <link rel="prefetch alternate stylesheet" title="designed for mozilla" href="mozspecific.css"> <link rel="next" href="2.html"> are anchor (<a>) tags prefetched? no, only <link> tags with a relation
type of next or prefetch are prefetched. however, if there is sufficient interest, we may expand link prefetching support to include prefetching <a> tags, which include a relation
type of next or prefetch in the future. doing so would probably help content providers avoid the problem of stale prefetching links. is link prefetching standards compliant? yes, link prefetching as outlined in this docume...
...> tags, which include a relation
type of next or prefetch in the future. doing so would probably help content providers avoid the problem of stale prefetching links. is link prefetching standards compliant? yes, link prefetching as outlined in this document does not violate any existing web standards. in fact, the html 4.01 specification explicitly allows for the definition of new link relation
types (see section 6.12: link
types). however, the exact mechanism employed by mozilla is not yet standardized. an internet-draft is in the works. standardization of this technique is part of the scope of html 5, see the current working draft, section §5.11.3.13. link
type "prefetch". how is browser idle time determined? in the current implementation (mozilla 1.2), idle time is determined using th...
An overview of HTTP - HTTP
them impossible to read directly, but the principle remains the same. for example: get / http/1.1 host: developer.mozilla.org accept-language: fr read the response sent by the server, such as: http/1.1 200 ok date: sat, 09 oct 2010 14:28:02 gmt server: apache last-modified: tue, 01 dec 2009 20:18:22 gmt etag: "51142bc1-7449-479b075b2891b" accept-ranges: bytes content-length: 29769 content-
type: text/html <!doc
type html... (here comes the 29769 bytes of the requested web page) close or reuse the connection for further requests. if http pipelining is activated, several requests can be sent without waiting for the first response to be fully received. http pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with modern versions. htt...
... embedded into a binary structure, a frame, allowing optimizations like compression of headers and multiplexing. even if only part of the original http message is sent in this version of http, the semantics of each message is unchanged and the client reconstitutes (virtually) the original http/1.1 request. it is therefore useful to comprehend http/2 messages in the http/1.1 format. there are two
types of http messages, requests and responses, each with its own format. requests an example http request: requests consists of the following elements: an http method, usually a verb like get, post or a noun like options or head that defines the operation the client wants to perform. typically, a client wants to fetch a resource (using get) or post the value of an html form (using post), thou...
... a one-way service that allows a server to send events to the client, using http as a transport mechanism. using the eventsource interface, the client opens a connection and establishes event handlers. the client browser automatically converts the messages that arrive on the http stream into appropriate event objects, delivering them to the event handlers that have been registered for the events'
type if known, or to the onmessage event handler if no
type-specific event handler was established. conclusion http is an extensible protocol that is easy to use. the client-server structure, combined with the ability to simply add headers, allows http to advance along with the extended capabilities of the web. though http/2 adds some complexity, by embedding http messages in frames to improve perf...
206 Partial Content - HTTP
the http 206 partial content success status response code indicates that the request has succeeded and has the body contains the requested ranges of data, as described in the range header of the request. if there is only one range, the content-
type of the whole response is set to the
type of the document, and a content-range is provided. if several ranges are sent back, the content-
type is set to multipart/byteranges and each fragment covers one range, with content-range and content-
type describing it. status 206 partial content examples a response containing one single range: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-range: bytes 21010-47021/47022 content-length: 26012 content-
type: image/gif ... 26012 bytes ...
...ial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-range: bytes 21010-47021/47022 content-length: 26012 content-
type: image/gif ... 26012 bytes of partial image data ... a response containing several ranges: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-length: 1741 content-
type: multipart/byteranges; boundary=string_separator --string_separator content-
type: application/pdf content-range: bytes 234-639/8000 ...the first range... ...
... bytes of partial image data ... a response containing several ranges: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-length: 1741 content-
type: multipart/byteranges; boundary=string_separator --string_separator content-
type: application/pdf content-range: bytes 234-639/8000 ...the first range... ...
About JavaScript - JavaScript
what is javascript? javascript® (often shortened to js) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for web pages, but it's used in many non-browser environments as well. it is a proto
type-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles. javascript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. javascript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior. contrary to popular misconception, javascript is not "interpreted java". in a nutshell, javascript is a dynamic scripting language sup...
...cript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. javascript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior. contrary to popular misconception, javascript is not "interpreted java". in a nutshell, javascript is a dynamic scripting language supporting proto
type based object construction. the basic syntax is intentionally similar to both java and c++ to reduce the number of new concepts required to learn the language. language constructs, such as if statements, for and while loops, and switch and try ... catch blocks function the same as in these languages (or nearly so). javascript can function as both a procedural and an object oriented language. obje...
...nguages (or nearly so). javascript can function as both a procedural and an object oriented language. objects are created programmatically in javascript, by attaching methods and properties to otherwise empty objects at run time, as opposed to the syntactic class definitions common in compiled languages like c++ and java. once an object has been constructed it can be used as a blueprint (or proto
type) for creating similar objects. javascript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via eval), object introspection (via for ... in), and source code recovery (javascript programs can decompile function bodies back into their source text). for a more in depth discussion of javascript programming follow the ...
Keyed collections - JavaScript
nd 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 proto
type, so there are default keys in the map. (this can be bypassed using map = object.create(null).) these three tips can help you to decide whether to use a map or an object: use maps over objects when keys are unknown until run time, and when all keys are the same
type and all values are the same
type. use maps if there is a need to store primitive values as keys because object treats each key ...
... the weakmap reference page. one use case of weakmap objects is to store private data for an object, or to hide implementation details. the following example is from nick fitzgerald's blog post "hiding implementation details with ecmascript 6 weakmaps". the private data and methods belong inside the object and are stored in the privates weakmap object. everything exposed on the instance and proto
type is public; everything else is inaccessible from the outside world because privates is not exported from the module. const privates = new weakmap(); function public() { const me = { // private data goes here }; privates.set(this, me); } public.proto
type.method = function () { const me = privates.get(this); // do stuff with private data in `me`... }; module.exports = public; sets...
...ore unique values. you don't have to manually keep track of duplicates. weakset object weakset objects are collections of objects. an object in the weakset may only occur once. it is unique in the weakset's collection, and objects are not enumerable. the main differences to the set object are: in contrast to sets, weaksets are collections of objects only, and not of arbitrary values of any
type. the weakset is weak: references to objects in the collection are held weakly. if there is no other reference to an object stored in the weakset, they can be garbage collected. that also means that there is no list of current objects stored in the collection. weaksets are not enumerable. the use cases of weakset objects are limited. they will not leak memory, so it can be safe to use dom eleme...
Regular expression syntax cheatsheet - JavaScript
, these will cause an invalid identity escape error. this is done to ensure backward compatibility with existing code that uses new escape sequences like \p or \k. to match this character literally, escape it with itself. in other words to search for \ use /\\/. assertions if you are looking to contribute to this document, please also edit the original article boundary-
type assertions characters meaning ^ matches the beginning of input. if the multiline flag is set to true, also matches immediately after a line break character. for example, /^a/ does not match the "a" in "an a", but does match the first "a" in "an a". this character has a different meaning when it appears at the start of a group. $ ...
...e "oon" is the end of the string, thus not followed by a word character. /\w\b\w/ will never match anything, because a word character can never be followed by both a non-word and a word character. to match a backspace character ([\b]), see character classes. \b matches a non-word boundary. this is a position where the previous and next character are of the same
type: either both must be words, or both must be non-words, for example between two letters or between two spaces. the beginning and end of a string are considered non-words. same as the matched word boundary, the matched non-word boundary is also not included in the match. for example, /\bon/ matches "on" in "at noon", and /ye\b/ matches "ye" in "possibly yesterday". other assertions not...
...aliases.txt unicodepropertyvalue one of the tokens listed in the values section, below. many values have aliases or shorthand (e.g. the value decimal_number for the general_category property may be written nd, digit, or decimal_number). for most values, the unicodepropertyname part and equals sign may be omitted. if a unicodepropertyname is specified, the value must correspond to the property
type given. note: as there are many properties and values available, we will not describe them exhaustively here but rather provide various examples ...
JavaScript Guide - JavaScript
the javascript guide shows you how to use javascript and gives an overview of the language. if you need exhaustive information about a language feature, have a look at the javascript reference. ...
...if you need exhaustive information about a language feature, have a look at the javascript reference. ...
... functions expressions 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 proto
type-based oop creating object hierarchies inheritance promises guarantees chaining error propagation composition timing iterators and generators iterators...
JavaScript technologies overview - JavaScript
ecma tc39 committee as a language named ecmascript. this core language is also used in non-browser environments, for example in node.js. ...
...39 committee as a language named ecmascript. this core language is also used in non-browser environments, for example in node.js. ...
...rds, 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 proto
type-based inheritance mechanism built-in objects and functions (json, math, array.proto
type methods, object introspection methods, etc.) strict mode browser support as of october 2016, the current versions of the major web browsers implement ecmascript 5.1 and ecmascript 2015, but older versions (still in use) implement ecmascript 5 only. future the major 6th edition of ecmascript was official...
RangeError: repeat count must be non-negative - JavaScript
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, +∞). ...
...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, +∞). ...
...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, +∞). ...
RangeError: repeat count must be less than infinity - JavaScript
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, +∞). ...
...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, +∞). ...
...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, +∞). ...
getter - JavaScript
cally computed value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls. in javascript, this can be accomplished with the use of a getter. it is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a
type of pseudo-property. note the following when working with the get syntax: it can have an identifier which is either a number or a string; it must have exactly zero parameters (see incompatible es5 change: literal getter and setter functions must now have exactly zero or one arguments for more information); it must not appear in an object literal with another get or with a data entry for the ...
...t.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. ...
...defined on the instance's proto
type, 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.hello); // "world" console.log(object.getownpropertydescriptor(obj, 'hello')); // undefined console.log( object.getownpropertydescriptor( object.getproto
typeof(obj), 'hello' ) ); // { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined } specifications specification ecmascript (ecma-262)the definition of 'method definitions' in that specification. ...
ArrayBuffer - JavaScript
the arraybuffer() constructor creates a new arraybuffer of the given length in bytes. ...
...tes. you can also get an array buffer from existing data, for example from a base64 string or from a local file. constructor arraybuffer() creates a new arraybuffer object. static properties get arraybuffer[@@species] the constructor function that is used to create derived objects. ...
...ocal file. constructor arraybuffer() creates a new arraybuffer object. static properties get arraybuffer[@@species] the constructor function that is used to create derived objects. static methods arraybuffer.isview(arg) returns true if arg is one of the arraybuffer views, such as
typed array objects or a dataview. returns false otherwise. instance properties arraybuffer.proto
type.bytelength the read-only size, in bytes, of the arraybuffer. this is established when the array is constructed and cannot be changed. instance methods arraybuffer.proto
type.slice() returns a new arraybuffer whose contents are a copy of this arraybuffer's bytes from begin (inclusive) up to end (exclusive). if either begin or end is negative, it refers to an index from the end of the array, ...
Atomics.add() - JavaScript
rray and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. 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. ...
...ition. this atomic operation guarantees that no other write happens until the modified value is written back. 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 atomics.add(
typedarray, index, value) parameters
typedarray an integer
typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to add a value to. value the number to add. return value the old value at the given position (
typedarray[index]). exceptions throws a
typeerror, if
typedarray is not one of the allowed integer
types. throw...
... uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to add a value to. value the number to add. return value the old value at the given position (
typedarray[index]). exceptions throws a
typeerror, if
typedarray is not one of the allowed integer
types. throws a rangeerror, if index is out of bounds in the
typedarray. examples using add() const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); atomics.add(ta, 0, 12); // returns 0, the old value atomics.load(ta, 0); // 12 specifications specification ecmascript (ecma-262)the definition of 'atomics.add' in that specification. ...
Atomics.exchange() - JavaScript
e at that position. this atomic operation guarantees that no other write happens between the read of the old value and the write of the new 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. ...
...guarantees that no other write happens between the read of the old value and the write of the new 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. syntax atomics.exchange(
typedarray, index, value) parameters
typedarray an integer
typed array. ...
...ry. 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 atomics.exchange(
typedarray, index, value) parameters
typedarray an integer
typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to exchange a value. value the number to exchange. return value the old value at the given position (
typedarray[index]). exceptions throws a
typeerror, if
typedarray is not one of the allowed integer
types. throws a rangeerror, if index is out of bounds in the
typedarray. examples using exchange() const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); atomic...
Atomics.sub() - JavaScript
rray and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. 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. ...
...ition. this atomic operation guarantees that no other write happens until the modified value is written back. 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 atomics.sub(
typedarray, index, value) parameters
typedarray an integer
typed array. ...
...ository. 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 atomics.sub(
typedarray, index, value) parameters
typedarray an integer
typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to subtract a value from. value the number to subtract. return value the old value at the given position (
typedarray[index]). exceptions throws a
typeerror, if
typedarray is not one of the allowed integer
types. throws a rangeerror, if index is out of bounds in the
typedarray. examples using sub const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 4...
Intl.Collator - JavaScript
amples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constructor intl.collator() creates a new collator object. static methods intl.collator.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.collator.proto
type.compare getter function that compares two strings according to the sort order of this intl.collator object. intl.collator.proto
type.resolvedoptions() returns a new object with properties reflecting the locale and collation options computed during initialization of the object. examples using collator the following example demonstrates the different potential results for a string occurring b...
... 'a')); // → a positive value console.log(new intl.collator().compare('a', 'a')); // → 0 note that the results shown in the code above can vary between browsers and browser versions. this is because the values are implementation-specific. that is, the specification requires only that the before and after values are negative and positive. using locales the results provided by collator.proto
type.compare() vary between languages. in order to get the sort order of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: // in german, ä sorts with a console.log(new intl.collator('de').compare('ä', 'z')); // → a negative value // in swedish, ä sorts after z console.log(new intl.co...
...our application, make sure to specify that language (and possibly some fallback languages) using the locales argument: // in german, ä sorts with a console.log(new intl.collator('de').compare('ä', 'z')); // → a negative value // in swedish, ä sorts after z console.log(new intl.collator('sv').compare('ä', 'z')); // → a positive value using options the results provided by collator.proto
type.compare() can be customized using the options argument: // in german, ä has a as the base letter console.log(new intl.collator('de', { sensitivity: 'base' }).compare('ä', 'a')); // → 0 // in swedish, ä and a are separate base letters console.log(new intl.collator('sv', { sensitivity: 'base' }).compare('ä', 'a')); // → a positive value specifications specification ec...
Intl.PluralRules() constructor - JavaScript
cp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. options optional. an object with some or all of the following properties: localematcher the locale matching algorithm to use. possible values are "lookup" and "best fit"; the default is "best fit". for information about this option, see the intl page.
type the
type to use. possible values are: "cardinal" for cardinal numbers (refering to the quantity of things). this is the default value. "ordinal" for ordinal number (refering to the ordering or ranking of things, e.g. "1st", "2nd", "3rd" in english). the following properties fall into two groups: minimumintegerdigits, minimumfractiondigits, and maximumfractiondigits in one gro...
...is returned. this is useful to distinguish between singular and plural forms, e.g. "dog" and "dogs". ...
...ocale pr.select(1); // → 'one' if in us english locale pr.select(2); // → 'other' if in us english locale using options the results can be customized using the options argument, which has one property called
type which you can set to ordinal. this is useful to figure out the ordinal indicator, e.g. "1st", "2nd", "3rd", "4th", "42nd" and so forth. var pr = new intl.pluralrules('en-us', {
type: 'ordinal' }); pr.select(0); // → 'other' pr.select(1); // → 'one' pr.select(2); // → 'two' pr.select(3); // → 'few' pr.select(4); // → 'other' pr.select(42); // → 'two' specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.pluralrules() constructor' in that specification. ...
Intl.RelativeTimeFormat - JavaScript
examples and send us a pull request. constructor intl.relativetimeformat.relativetimeformat() creates a new intl.relativetimeformat object. static methods intl.relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. ...
... intl.relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.relativetimeformat.proto
type.format() formats a value and a unit according to the locale and formatting options of the given intl.relativetimeformat object. intl.relativetimeformat.proto
type.formattoparts() returns an array of objects representing the relative time format in parts that can be used for custom locale-aware formatting. intl.relativetimeformat.proto
type.resolvedoptions() returns a new object with properties reflecting the locale and formatting options computed during initialization of the object. examples basic format usage the following example shows how to use a...
.... rtf.format(-1, "day"); // > "1 day ago" // format relative time using positive value (1). rtf.format(1, "day"); // > "in 1 day" using formattoparts the following example shows how to create a relative time formatter returning formatted parts const rtf = new intl.relativetimeformat("en", { numeric: "auto" }); // format relative time using the day unit. rtf.formattoparts(-1, "day"); // > [{
type: "literal", value: "yesterday"}] rtf.formattoparts(100, "day"); // > [{
type: "literal", value: "in " }, // > {
type: "integer", value: "100", unit: "day" }, // > {
type: "literal", value: " days" }] specifications specification status comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat' in that specification. ...
Number.isNaN() - JavaScript
description due to both equality operators, == and ===, evaluating to false when checking if nan is nan, the function number.isnan() has become necessary. ...
...n of the original, global isnan(). 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 number.isnan(value) parameters value the value to be tested for nan. return value true if the given value is nan and its
type is number; otherwise, false. description due to both equality operators, == and ===, evaluating to false when checking if nan is nan, the function number.isnan() has become necessary. this situation is unlike all other possible value comparisons in javascript. in comparison to the global isnan() function, number.isnan() doesn't suffer the problem of forcefully converting the parameter to a num...
...has become necessary. this situation is unlike all other possible value comparisons in javascript. in comparison to the global isnan() function, number.isnan() doesn't suffer the problem of forcefully converting the parameter to a number. this means it is now safe to pass values that would normally convert to nan, but aren't actually the same value as nan. this also means that only values of the
type number, that are also nan, return true. polyfill the following works because nan is the only value in javascript which is not equal to itself. number.isnan = number.isnan || function isnan(input) { return
typeof input === 'number' && input !== input; } examples using isnan number.isnan(nan); // true number.isnan(number.nan); // true number.isnan(0 / 0); // true // e.g. the...
Object.getOwnPropertyNames() - JavaScript
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 object (es5 code) object.getownpropertynames('foo'); // ["0", "1", "2", "length"] (es2015 code) examples using object.getownpropertynames() var arr = ['a', 'b', 'c']; console.log(object.getownpropertynames(arr).sort()); // .sort() is an array method. // logs...
...numerable property var my_obj = object.create({}, { getfoo: { value: function() { return this.foo; }, enumerable: false } }); my_obj.foo = 1; console.log(object.getownpropertynames(my_obj).sort()); // logs ["foo", "getfoo"] if you want only the enumerable properties, see object.keys() or use a for...in loop (note that this will also return enumerable properties found along the proto
type chain for the object unless the latter is filtered with hasownproperty()). items on the proto
type chain are not listed: function parentclass() {} parentclass.proto
type.inheritedmethod = function() {}; function childclass() { this.prop = 5; this.method = function() {}; } childclass.proto
type = new parentclass; childclass.proto
type.proto
typemethod = function() {}; console.log( object.geto...
...n parentclass() {} parentclass.proto
type.inheritedmethod = function() {}; function childclass() { this.prop = 5; this.method = function() {}; } childclass.proto
type = new parentclass; childclass.proto
type.proto
typemethod = function() {}; console.log( object.getownpropertynames( new childclass() // ["prop", "method"] ) ); get non-enumerable properties only this uses the array.proto
type.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 = e...
Object.keys() - JavaScript
the properties is the same as that given by looping over the properties of the object manually. ...
...s/web/javascript/reference/global_objects/object/keys if (!object.keys) { object.keys = (function() { 'use strict'; var hasownproperty = object.proto
type.hasownproperty, hasdontenumbug = !({ tostring: null }).propertyisenumerable('tostring'), dontenums = [ 'tostring', 'tolocalestring', 'valueof', 'hasownproperty', 'isproto
typeof', 'propertyisenumerable', 'constructor' ], dontenumslength = dontenums.length; return function(obj) { if (
typeof obj !== 'function' && (
typeof obj !== 'object' || obj === null)) { throw new
typeerror('object.keys called on non-object'); } var result = [], prop, i; for (prop in obj) { if (hasownproperty.call(obj, ...
...rty which isn't enumerable const myobj = object.create({}, { getfoo: { value: function () { return this.foo; } } }); myobj.foo = 1; console.log(object.keys(myobj)); // console: ['foo'] if you want all properties—including non-enumerables—see object.getownpropertynames(). non-object coercion in es5, if the argument to this method is not an object (a primitive), then it will cause a
typeerror. from es2015 onwards, a non-object argument will be coerced to an object. // in es5 object.keys('foo'); //
typeerror: "foo" is not an object // in es2015+ object.keys('foo'); // ["0", "1", "2"] specifications specification ecmascript (ecma-262)the definition of 'object.keys' in that specification. ...
handler.construct() - JavaScript
the constructor. newtarget the constructor that was originally called, p above. return value the construct method must return an object. description the handler.construct() method is a trap for the new operator. interceptions this trap can intercept these operations: new proxy(...args) reflect.construct() invariants if the following invariants are violated, the proxy will throw a
typeerror: the result must be an object. examples trapping the new operator the following code traps the new operator. const p = new proxy(function() {}, { construct: function(target, argumentslist, newtarget) { console.log('called: ' + argumentslist.join(', ')); return { value: argumentslist[0] * 10 }; } }); console.log(new p(1).value); // "called: 1" ...
...arget, argumentslist, newtarget) { console.log('called: ' + argumentslist.join(', ')); return { value: argumentslist[0] * 10 }; } }); console.log(new p(1).value); // "called: 1" // 10 the following code violates the invariant. ...
...y(function() {}, { construct: function(target, argumentslist, newtarget) { return 1; } }); new p(); //
typeerror is thrown the following code improperly initializes the proxy. the target in proxy initialization must itself be a valid constructor for the new operator. const p = new proxy({}, { construct: function(target, argumentslist, newtarget) { return {}; } }); new p(); //
typeerror is thrown, "p" is not a constructor specifications specification ecmascript (ecma-262)the definition of '[[construct]]' in that specification. ...
handler.defineProperty() - JavaScript
the defineproperty() method must return a boolean indicating whether or not the property has been successfully defined. description the handler.defineproperty() method is a trap for object.defineproperty(). interceptions this trap can intercept these operations: object.defineproperty() reflect.defineproperty() invariants if the following invariants are violated, the proxy will throw a
typeerror: a property cannot be added, if the target object is not extensible. a property cannot be added as or modified to be non-configurable, if it does not exists as a non-configurable own property of the target object. a property may not be non-configurable, if a corresponding configurable property of the target object exists. if a property has a corresponding target object property then ob...
...exists as a non-configurable own property of the target object. a property may not be non-configurable, if a corresponding configurable property of the target object exists. if a property has a corresponding target object property then object.defineproperty(target, prop, descriptor) will not throw an exception. in strict mode, a false return value from the defineproperty() handler will throw a
typeerror exception. examples trapping of defineproperty the following code traps object.defineproperty(). const p = new proxy({}, { defineproperty: function(target, prop, descriptor) { console.log('called: ' + prop); return true; } }); const desc = { configurable: true, enumerable: true, value: 10 }; object.defineproperty(p, 'a', desc); // "called: a" when calling object.definepro...
... ...
RangeError - JavaScript
the rangeerror object indicates an error when a value is not in the set or range of allowed values. description a rangeerror is thrown when trying to pass a value as an argument to a function that does not allow a range that includes the value. this can be encountered when: passing a value that is not one of the allowed string values to string.proto
type.normalize(), or when attempting to create an array of an illegal length with the array constructor, or when passing bad values to the numeric methods number.proto
type.toexponential(), number.proto
type.tofixed() or number.proto
type.toprecision(). constructor rangeerror() creates a new rangeerror object. instance properties rangeerror.proto
type.message error message. although ecma-262 specifies that rangeerror should provide ...
...en passing bad values to the numeric methods number.proto
type.toexponential(), number.proto
type.tofixed() or number.proto
type.toprecision(). constructor rangeerror() creates a new rangeerror object. instance properties rangeerror.proto
type.message error message. although ecma-262 specifies that rangeerror should provide its own message property, in spidermonkey, it inherits error.proto
type.message. rangeerror.proto
type.name error name. inherited from error. rangeerror.proto
type.filename path to file that raised this error. inherited from error. rangeerror.proto
type.linenumber line number in file that raised this error. inherited from error. rangeerror.proto
type.columnnumber column number in line that raised this error. ...
...inherited from error. ...
Reflect.has() - JavaScript
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, propertykey) parameters target the target object in which to look for the property. propertykey the name of the property to check. return value a boolean indicating whether or not the target has the property. ...
...e 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. ...
...he proto
type chain reflect.has({x: 0}, 'tostring') // proxy with .has() handler method obj = new proxy({}, { has(t, k) { return k.startswith('door') } }); reflect.has(obj, 'doorbell') // true reflect.has(obj, 'dormitory') // false reflect.has returns true for any inherited properties, like the in operator: const a = {foo: 123} const b = {__proto__: a} const c = {__proto__: b} // the proto
type chain is: c -> b -> a reflect.has(c, 'foo') // true specifications specification ecmascript (ecma-262)the definition of 'reflect.has' in that specification. ...
Reflect - JavaScript
e following static functions which have the same names as the proxy handler methods. some of these methods are also the same as corresponding methods on object, although they do have some subtle differences between them. static methods reflect.apply(target, thisargument, argumentslist) calls a target function with arguments as specified by the argumentslist parameter. see also function.proto
type.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 proto
type. reflect.defineproperty(target, propertykey, attributes) similar to object.defineproperty(). returns a boolean that is true if the property was successfully defined. reflect.deleteproperty(...
...[propertykey]. reflect.get(target, propertykey[, receiver]) returns the value of the property. works like getting a property from an object (target[propertykey]) as a function. reflect.getownpropertydescriptor(target, propertykey) similar to object.getownpropertydescriptor(). returns a property descriptor of the given property if it exists on the object, undefined otherwise. reflect.getproto
typeof(target) same as object.getproto
typeof(). reflect.has(target, propertykey) 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.ownkeys(target) returns an array of the target objec...
...s(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, propertykey, value[, receiver]) a function that assigns values to properties. returns a boolean that is true if the update was successful. reflect.setproto
typeof(target, proto
type) a function that sets the proto
type 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, 'hairc...
SharedArrayBuffer - JavaScript
hared memory. unlike an arraybuffer, a sharedarraybuffer cannot become detached. description allocating and sharing memory to share memory using sharedarraybuffer objects from one agent in the cluster to another (an agent is either the web page’s main program or one of its web workers), postmessage and structured cloning is used. the structured clone algorithm accepts sharedarraybuffers and
typedarrays mapped onto sharedarraybuffers. in both cases, the sharedarraybuffer object is transmitted to the receiver resulting in a new, private sharedarraybuffer object in the receiving agent (just as for arraybuffer). however, the shared data block referenced by the two sharedarraybuffer objects is the same data block, and a side effect to the block in one agent will eventually become visible in t...
...) { // post sharedarraybuffer } else { // do something else } see also planned changes to shared memory which is starting to roll out to browsers (firefox 79, for example.) always use the new operator to create a sharedarraybuffer sharedarraybuffer constructors are required to be constructed with a new operator. calling a sharedarraybuffer constructor as a function without new will throw a
typeerror. var sab = sharedarraybuffer(1024); //
typeerror: calling a builtin sharedarraybuffer constructor // without new is forbidden var sab = new sharedarraybuffer(1024); constructor sharedarraybuffer() creates a new sharedarraybuffer object. instance properties sharedarraybuffer.proto
type.bytelength the size, in bytes, of the array. this is established when the array is constructed a...
...redarraybuffer constructor // without new is forbidden var sab = new sharedarraybuffer(1024); constructor sharedarraybuffer() creates a new sharedarraybuffer object. instance properties sharedarraybuffer.proto
type.bytelength the size, in bytes, of the array. this is established when the array is constructed and cannot be changed. read only. instance methods sharedarraybuffer.proto
type.slice(begin, end) returns a new sharedarraybuffer whose contents are a copy of this sharedarraybuffer's bytes from begin, inclusive, up to end, exclusive. if either begin or end is negative, it refers to an index from the end of the array, as opposed to from the beginning. examples creating a new sharedarraybuffer var sab = new sharedarraybuffer(1024); slicing the sharedarraybuffer sab.sli...
Symbol() constructor - JavaScript
it may be used as the value of an extends clause of a class definition but a super call to it will cause an exception. 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([description]) parameters description optional a string. a description of the symbol which can be used for debugging but not to access the symbol itself. ...
... write symbol() with an optional string as its description: let sym1 = symbol() let sym2 = symbol('foo') let sym3 = symbol('foo') the above code creates three new symbols. note that symbol("foo") does not coerce the string "foo" into a symbol. it creates a new symbol each time: symbol('foo') === symbol('foo') // false new symbol(...) the following syntax with the new operator will throw a
typeerror: let sym = new symbol() //
typeerror this prevents authors from creating an explicit symbol wrapper object instead of a new symbol value and might be surprising as creating explicit wrapper objects around primitive data
types is generally possible (for example, new boolean, new string and new number). if you really want to create a symbol wrapper object, you can use the object() functio...
...ts authors from creating an explicit symbol wrapper object instead of a new symbol value and might be surprising as creating explicit wrapper objects around primitive data
types is generally possible (for example, new boolean, new string and new number). if you really want to create a symbol wrapper object, you can use the object() function: let sym = symbol('foo'); let symobj = object(sym);
typeof sym // => "symbol"
typeof symobj // => "object" specifications specification ecmascript (ecma-262)the definition of 'symbol constructor' in that specification. ...
Symbol.matchAll - JavaScript
the symbol.matchall well-known symbol returns an iterator, that yields matches of the regular expression against a string. this function is called by the string.proto
type.matchall() method. 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. description this symbol is used for string.proto
type.matchall() and specifically in regexp.proto
type[@@matchall](). the following two examples return same result: 'abc'.matchall(/a/); /a/[symbol.matchall]('abc'); this method exists for customizing match behavior within regexp subclasses. property attributes of symbol.matchall writable ...
... specifications specification ecmascript (ecma-262)the definition of 'symbol.matchall' in that specification. ...
... specifications specification ecmascript (ecma-262)the definition of 'symbol.matchall' in that specification. ...
Symbol.search - 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. ...
... 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. ...
Symbol.split - 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. ...
... 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. ...
WeakSet - JavaScript
the weakset object lets you store weakly held objects in a collection. description weakset objects are collections of objects. just as with sets, each object in a weakset may occur only once; all objects in a weakset's collection are unique. the main differences to the set object are: weaksets are collections of objects only. they cannot contain arbitrary values of any
type, as sets can. the weakset is weak, meaning references to objects in a weakset are held weakly. if no other references to an object stored in the weakset exist, those objects can be garbage collected. note: this also means that there is no list of current objects stored in the collection. weaksets are not enumerable. use case: detecting circular references functions that call themsel...
...ly need a way of guarding against circular data structures 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 n...
... run, and passed along with every subsequent function call (using the internal _refs parameter). the number of objects or their traversal order is immaterial, so a weakset is more suitable (and performant) than a set for tracking object references, especially if a very large number of objects is involved. constructor weakset() creates a new weakset object. instance methods weakset.proto
type.add(value) appends value to the weakset object. weakset.proto
type.delete(value) removes value from the weakset. weakset.proto
type.has(value) will return false afterwards. weakset.proto
type.has(value) returns a boolean asserting whether value is present in the weakset object or not. examples using the weakset object const ws = new weakset(); const foo = {}; const bar = {}; ws.add(foo); ...
WebAssembly.Global() constructor - JavaScript
al object representing a global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances. this allows dynamic linking of multiple modules. syntax new webassembly.global(descriptor, value); parameters descriptor a globaldescriptor dictionary object, which contains two properties: value: a usvstring representing the data
type of the global. this can be one of i32, i64, f32, and f64. mutable: a boolean value that determines whether the global is mutable or not. by default, this is false. value the value the variable contains. this can be any value, as long as its
type matches the variable's data
type. if no value is specified, a
typed 0 value is used, as specified by the defaultvalue algorithm. examples ...
... the value of the global is then changed, first to 42 using the global.value property, and then to 43 using the incglobal() function exported out of the global.wasm module (this adds 1 to whatever value is given to it and then returns the new value). ...
...ue is given to it and then returns the new value). ...
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.proto
type.message error message. although ecma-262 specifies that urierror should provide its own message property, in spidermonkey, it inherits error.proto
type.message. webassembly.runtimeerror.proto
type.name error name. inherited from error. webassembly.runtimeerror.proto
type.filename path to file that raised this error. inherited from error. webassembly.runtimeerror.proto
type.linenumber line number in file that raised this error. inherited from error. ...
...n message property, in spidermonkey, it inherits error.proto
type.message. webassembly.runtimeerror.proto
type.name error name. inherited from error. webassembly.runtimeerror.proto
type.filename path to file that raised this error. inherited from error. webassembly.runtimeerror.proto
type.linenumber line number in file that raised this error. inherited from error. webassembly.runtimeerror.proto
type.columnnumber column number in line that raised this error. inherited from error. webassembly.runtimeerror.proto
type.stack stack trace. inherited from error. instance methods webassembly.runtimeerror.proto
type.tosource() returns code that could eval to the same error. inherited from error. ...
...inherited from error. ...
Operator precedence - JavaScript
` is `null` or `undefined` examples 3 > 2 && 2 > 1 // returns true 3 > 2 > 1 // returns false because 3 > 2 is true, then true is converted to 1 // in inequality operators, therefore true > 1 becomes 1 > 1, which // is false. adding parentheses makes things clear: (3 > 2) > 1. table the following table is ordered from highest (21) to lowest (1) precedence. precedence operator
type associativity individual operators 21 grouping n/a ( … ) 20 member access left-to-right … . … computed member access left-to-right … [ … ] new (with argument list) n/a new … ( … ) function call left-to-right … ( … ) optional chaining left-to-right ?. 19 new (without ...
...-to-right ?. ...
... ?. ...
class 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. ...
...ss expressions and class statements, however: class expressions may omit the class name ("binding identifier"), which is not possible with class statements. class expressions allow you to redefine (re-declare) classes without throwing a syntaxerror. this is not the case with class statements. the constructor method is optional. ...
...s. class expressions allow you to redefine (re-declare) classes without throwing a syntaxerror. this is not the case with class statements. the constructor method is optional. classes generated with class expressions will always respond to
typeof with the value "function". 'use strict'; let foo = class {}; // constructor property is optional foo = class {}; // re-declaration is allowed
typeof foo; // returns "function"
typeof class {}; // returns "function" foo instanceof object; // true foo instanceof function; // true class foo {} // throws syntaxerror (class declarations do not allow re-declaration) examples a simple class expression this is just a simple anonymous class expression which you can refer to using the variable foo. const foo = cl...
in operator - JavaScript
examples basic usage the following examples show some uses of the in operator. ...
...nteractive 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 prop in object parameters prop a string or symbol representing a property name or array index (non-symbols will be coerced to strings). object object to check if it (or its proto
type chain) contains the property with specified name (prop). examples basic usage the following examples show some uses of the in operator. // arrays let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'] 0 in trees // returns true 3 in trees // returns true 6 in trees // returns false 'bay' in trees // returns false (you must specify the index number, not the value at t...
...t directly returns undefined. let empties = new array(3) empties[2] // returns undefined 2 in empties // returns false to avoid this, make sure a new array is always filled with non-empty values or not write to indexes past the end of array. let empties = new array(3).fill(undefined) 2 in empties // returns true inherited properties the in operator returns true for properties in the proto
type chain. (if you want to check for only non-inherited properties, use object.proto
type.hasownproperty() instead.) 'tostring' in {} // returns true specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification. ...
super - JavaScript
e properties with e.g. object.defineproperty, super cannot overwrite the value of the property. class x { constructor() { object.defineproperty(this, 'prop', { configurable: true, writable: false, value: 1 }); } } class y extends x { constructor() { super(); } foo() { super.prop = 2; // cannot overwrite the value. ...
...super.prop = 2; // cannot overwrite the value. } } var y = new y(); y.foo(); //
typeerror: "prop" is read-only console.log(y.prop); // 1 using super.prop in object literals super can also be used in the object initializer / literal notation. in this example, two objects define a method. in the second object, super calls the first object's method. this works with the help of object.setproto
typeof() with which we are able to set the proto
type of obj2 to obj1, so that super is able to find method1 on obj1. ...
...n this example, two objects define a method. in the second object, super calls the first object's method. this works with the help of object.setproto
typeof() with which we are able to set the proto
type of obj2 to obj1, so that super is able to find method1 on obj1. var obj1 = { method1() { console.log('method 1'); } } var obj2 = { method2() { super.method1(); } } object.setproto
typeof(obj2, obj1); obj2.method2(); // logs "method 1" specifications specification ecmascript (ecma-262)the definition of 'super' in that specification. ...
const - JavaScript
about the "temporal dead zone" apply to both let and const. a constant cannot share its name with a function or a variable in the same scope. examples basic const usage constants can be declared with uppercase or lowercase, but a common convention is to use all-uppercase letters. // define my_fav as a constant and give it the value 7 const my_fav = 7; // this will throw an error - uncaught
typeerror: assignment to constant variable. my_fav = 20; // my_fav is 7 console.log('my favorite number is: ' + my_fav); // trying to redeclare a constant throws an error // uncaught syntaxerror: identifier 'my_fav' has already been declared const my_fav = 20; // the name my_fav is reserved for constant above, so this will fail too var my_fav = 20; // this throws an error too let my_fav = 20; b...
...ror 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. const my_object = {'key': 'value'}; // attempting to overwrite the object throws an error // uncaught
typeerror: assignment to constant variable. my_object = {'other_key': 'value'}; // however, object keys are not protected, // so the following statement is executed without problem my_object.key = 'othervalue'; // use object.freeze() to make object immutable // the same applies to arrays const my_array = []; // it's possible to push items into the array my_array.push('a'); // ["a"] // however, assig...
...my_array = ['b']; specifications specification ecmascript (ecma-262)the definition of 'let and const declarations' in that specification. ...
export - JavaScript
ed by other programs with the import statement. bindings that are exported can still be modified locally; when imported, although they can only be read by the importing module the value updates whenever it is updated by the exporting module. exported modules are in strict mode whether you declare them as such or not. the export statement cannot be used in embedded scripts. ...
...ating modules export * from …; // does not set the default export export * as name1 from …; // draft ecmascript® 2o21 export { name1, name2, …, namen } from …; export { import1 as name1, import2 as name2, …, namen } from …; export { default } from …; namen identifier to be exported (so that it can be imported via import in another script). description there are two different
types of export, named and default. you can have multiple named exports per module but only one default export. each
type corresponds to one of the above syntax: named exports: // export features declared earlier export { myfunction, myvariable }; // export individual features (can export var, let, // const, function, class) export let myvariable = math.sqrt(2); export function myfunction() { ... }...
... you can't run js modules via a file:// url — you'll get cors errors. you need to run it via an http server. using the default export if we want to export a single value or to have a fallback value for your module, you could use a default export: // module "my-module.js" export default function cube(x) { retur...
try...catch - JavaScript
pass exception object to error handler } the catch-block specifies an identifier (e in the example above) that holds the value of the exception; this value is only available in the scope of the catch-block. ...
...-block specifies an identifier (e in the example above) that holds the value of the exception; this value is only available in the scope of the catch-block. ...
...example above) that holds the value of the exception; this value is only available in the scope of the catch-block. ...
JavaScript reference - JavaScript
infinity nan undefined globalthis function properties eval() isfinite() isnan() parsefloat() parseint() decodeuri() decodeuricomponent() encodeuri() encodeuricomponent() fundamental objects object function boolean symbol error objects error aggregateerror 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 s...
... label with expressions and operators javascript expressions and operators. ...
... (condition ? ...
icons - Web app manifests
type array mandatory yes the icons member specifies an array of objects representing image files that can serve as application icons for different contexts. for example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an os's task switcher and/or system preferences. ...
...ns member specifies an array of objects representing image files that can serve as application icons for different contexts. for example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an os's task switcher and/or system preferences. examples "icons": [ { "src": "icon/lowres.webp", "sizes": "48x48", "
type": "image/webp" }, { "src": "icon/lowres", "sizes": "48x48" }, { "src": "icon/hd_hi.ico", "sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.svg", "sizes": "72x72" } ] values image objects may contain the following values: member description sizes a string containing space-separated image dimensions. src t...
..., "sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.svg", "sizes": "72x72" } ] values image objects may contain the following values: member description sizes a string containing space-separated image dimensions. src the path to the image file. if src is a relative url, the base url will be the url of the manifest.
type a hint as to the media
type of the image. the purpose of this member is to allow a user agent to quickly ignore images with media
types it does not support. purpose defines the purpose of the image, for example if the image is intended to serve some special purpose in the context of the host os (i.e., for better integration). purpose can have one or more of the following ...
Web app manifests
_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "
type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "
type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "
type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "
type": "image/png" }, { "src": "images/touch/homescreen168.png", "sizes": "168x168", "
type": "im...
... "
type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "
type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "
type": "image/png" }, { "src": "images/touch/homescreen168.png", "sizes": "168x168", "
type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "
type": "image/png" }], "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media
type...
...oogle.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media
type registration section of the specification (the response of the manifest file should return content-
type: application/manifest+json). browsers generally support manifests with other appropriate extensions like .json (content-
type: application/json). note: if the manifest requires credentials to fetch - the crossorigin attribute must be set to use-credentials, even if the manifest file is in the same origin as the current page. splash screens in chrome 47 and later, a splash screen is displayed...
<math> - MathML
if not present, its default value is inline. mode deprecated in favor of the display attribute. possible values are: display (which has the same effect as display="block") and inline. overflow specifies how an expression behaves if it is too long to fit in the allowed width. possible values are: linebreak (default), scroll, elide, truncate, scale. ...
...> <math> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html> xhtml notation <?xml version="1.0" encoding="utf-8"?> <!doc
type html public "-//w3c//dtd xhtml 1.1 plus mathml 2.0//en" "http://www.w3.org/math/dtd/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>mathml in xhtml</title> </head> <body> <math xmlns="http://www.w3.org/1998/math/mathml"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> ...
... </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html> notes: xhtml documents with mathml must be served as application/xhtml+xml. you can achieve that easily by adding the .xhtml extension to your local files. for apache servers you can configure your .htaccess file to map extensions to the correct mime
type. since you notate your mathml in an xml document, also be sure you write a well-formed xml document. specifications specification status comment mathml 3.0the definition of 'the top-level math element' in that specification. recommendation current specification mathml 2.0the definition of 'the top-level math element' in that specification. recommend...
Add to Home screen - Progressive web apps (PWAs)
line). manifest the web manifest is written in standard json format and should be placed somewhere inside your app directory (in the root is probably best) with the name somefilename.webmanifest (we've chosen manifest.webmanifest). it contains multiple fields that define certain information about the web app and how it should behave. note: the .webmanifest extension is specified in the media
type registration section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. .json. the fields needed for a2hs are as follows: background_color: specifies a background color to be used in some app contexts. the most relevant one to a2hs is the splash screen displayed when the app icon on the home screen is tapped and it first starts to load...
...es this before it will display the install banner, whereas firefox doesn't require it for showing the home-with-a-plus icon. the manifest for our sample app looks like this: { "background_color": "purple", "description": "shows random fox pictures. hey, at least it isn't cats.", "display": "fullscreen", "icons": [ { "src": "icon/fox-icon.png", "sizes": "192x192", "
type": "image/png" } ], "name": "awesome fox pictures", "short_name": "foxes", "start_url": "/pwa-examples/a2hs/index.html" } appropriate icon as shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app. you can include more sizes if you want; android will choose the most appropriate size for each different use case. you could also decide to include di...
...e/png" } ], "name": "awesome fox pictures", "short_name": "foxes", "start_url": "/pwa-examples/a2hs/index.html" } appropriate icon as shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app. you can include more sizes if you want; android will choose the most appropriate size for each different use case. you could also decide to include different
types of icons so devices can use the best one they are able to (e.g., chrome already supports the webp format). note that the
type member in each icon's object specifies the icon's mime
type, so the browser can quickly read what
type the icon is, and then ignore it and move to a different icon if it doesn't support it. in terms of how to design the icon, you should follow the same best practices you...
to - SVG: Scalable Vector Graphics
during the animation. the value of the attribute will change between the from attribute value and this value. ...
... attribute
type="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation. value <value> default value none animatable no the exact value
type for this attribute depend on the value of the attribute that will be animated. if a list of values is defined via the values attribute, the to attribute is ignored. set for the <set> element, to specifies the value for the attribute during the duration of the element. ...
... specifications specification status comment svg animations level 2the definition of 'to for <set>' in that specification. ...
<animateMotion> - SVG: Scalable Vector Graphics
ount="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. ...
...itted 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. ...
...eytimes 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. ...
<animateTransform> - SVG: Scalable Vector Graphics
scaling, rotation, and/or skewing. ...
...usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attribute
type="xml"
type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute target attributes ...
... specifications specification status comment svg animations level 2the definition of '<animatetransform>' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '<animatetransform>' in that specification. re...
<circle> - SVG: Scalable Vector Graphics
the <circle> svg element is an svg basic shape, used to draw circles based on a center point and a radius. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle. value
type: <length>|<percentage> ; default value: 0; animatable: yes cy the y-axis coordinate of the center of the circle. ...
...o draw circles based on a center point and a radius. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle. value
type: <length>|<percentage> ; default value: 0; animatable: yes cy the y-axis coordinate of the center of the circle. value
type: <length>|<percentage> ; default value: 0; animatable: yes r the radius of the circle. ...
...0" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle. value
type: <length>|<percentage> ; default value: 0; animatable: yes cy the y-axis coordinate of the center of the circle. value
type: <length>|<percentage> ; default value: 0; animatable: yes r the radius of the circle. a value lower or equal to zero disables rendering of the circle. value
type: <length> ; default value: 0; animatable: yes pathlength the total length for the circle's circumference, in user units. value
type: <number> ; default value: none; animatable: yes note: starting with svg2, cx, cy, and r are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attributes most notably: id, tabindex s...
<ellipse> - SVG: Scalable Vector Graphics
ble to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. ...
...at a 45 degree angle), but it can be rotated by using the transform attribute. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. value
type: <length>|<percentage> ; default value: 0; animatable: yes cy the y position of the ellipse. value
type: <length>|<percentage> ; default value: 0; animatable: yes rx the radius of the ellipse on the x axis. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the radius of the ellipse on the y axis. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. va...
...ength>|<percentage> ; default value: 0; animatable: yes rx the radius of the ellipse on the x axis. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the radius of the ellipse on the y axis. value
type: auto|<length>|<percentage> ; default value: auto; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. value
type: <number> ; default value: none; animatable: yes note: starting with svg2 cx, cy, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attribut...
<feDropShadow> - SVG: Scalable Vector Graphics
lor="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);"/> <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);"/> <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset of the drop shadow. ...
...er:url(#shadow);"/> <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);"/> <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset of the drop shadow. value
type: <number>; default value: 2; animatable: yes dy this attribute defines the y offset of the drop shadow. ...
...nk; filter:url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset of the drop shadow. value
type: <number>; default value: 2; animatable: yes dy this attribute defines the y offset of the drop shadow. value
type: <number>; default value: 2; animatable: yes stddeviation this attribute defines the standard deviation for the blur operation in the drop shadow. ...
<foreignObject> - SVG: Scalable Vector Graphics
e context of an svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing elit. sed mollis mollis mi ut ultricies. nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. aliquam erat volutpat. </div> </foreignobject> </svg> attributes height the height of the foreignobject. ...
...sit amet, consectetur adipiscing elit. sed mollis mollis mi ut ultricies. nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. aliquam erat volutpat. </div> </foreignobject> </svg> attributes height the height of the foreignobject. value
type: <length>|<percentage> ; default value: auto; animatable: yes width the width of the foreignobject. value
type: <length>|<percentage> ; default value: auto; animatable: yes x the x coordinate of the foreignobject. ...
...ui convallis, rutrum imperdiet eros. aliquam erat volutpat. </div> </foreignobject> </svg> attributes height the height of the foreignobject. value
type: <length>|<percentage> ; default value: auto; animatable: yes width the width of the foreignobject. value
type: <length>|<percentage> ; default value: auto; animatable: yes x the x coordinate of the foreignobject. value
type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the foreignobject. value
type: <length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attributes most notably: id, tabindex st...
<stop> - SVG: Scalable Vector Graphics
radient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector. ...
.../defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector. value
type: <number>|<percentage>; default value: 0; animatable: yes stop-color this attribute defines the color of the gradient stop. it can be used as a css property. value
type: currentcolor|<color>|<icccolor>; default value: black; animatable: yes stop-opacity this attribute defines the opacity of the gradient stop. ...
...ced along the gradient vector. value
type: <number>|<percentage>; default value: 0; animatable: yes stop-color this attribute defines the color of the gradient stop. it can be used as a css property. value
type: currentcolor|<color>|<icccolor>; default value: black; animatable: yes stop-opacity this attribute defines the opacity of the gradient stop. it can be used as a css property. ...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <input
type="text"> <span id="err">incorrect value!</span></p> <p><input
type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offs...
...h and then cutting off any overflow. the style attribute pins the svg element to the background of the form. ...
...t works in both mozilla and in internet explorer with adobe's svg viewer installed. (for inline svg to work in both firefox and internet explorer it is necessary to serve documents with a different content-
type to each browser. ...
Same-origin policy - Web security
for example, about:blank is often used as a url of new, empty popup windows into which the parent script writes content (e.g. via the window.open() mechanism). if this popup also contains javascript, that script would inherit the same origin as the script that created it. data: urls get a new, empty, security context. exceptions i...
...n embedded script, or the availability of an embedded resource. here are some examples of resources which may be embedded cross-origin: javascript with <script src="…"></script>. error details for syntax errors are only available for same-origin scripts. css applied with <link rel="stylesheet" href="…">. due to the relaxed syntax rules of css, cross-origin css requires a correct content-
type header. restrictions vary by browser: internet explorer, firefox, chrome, safari (scroll down to cve-2010-0051) and opera. images displayed by <img>. media played by <video> and <audio>. external resources embedded with <object> and <embed>. fonts applied with @font-face. some browsers allow cross-origin fonts, others require same-origin. anything embedded by <iframe>. sites can use the x-fr...
...in reads of pages that require this token. to prevent cross-origin reads of a resource, ensure that it is not embeddable. it is often necessary to prevent embedding because embedding a resource always leaks some information about it. to prevent cross-origin embeds, ensure that your resource cannot be interpreted as one of the embeddable formats listed above. browsers may not respect the content-
type header. for example, if you point a <script> tag at an html document, the browser will try to parse the html as javascript. when your resource is not an entry point to your site, you can also use a csrf token to prevent embedding. cross-origin script api access javascript apis like iframe.contentwindow, window.parent, window.open, and window.opener allow documents to directly reference each ot...
Securing your site - Web security
useful information. note: this article is a work in progress, and is neither complete nor does following its suggestions guarantee your site will be fully secure. user information security how to turn off form autocompletion form fields support autocompletion in gecko; that is, their values can be remembered and automatically brought back the next time the user visits your site. for certain
types of data, you may wish to disable this feature. privacy and the :visited selector this article discusses changes made to the getcomputedstyle() method that eliminates the ability for malicious sites to figure out the user's browsing history. hash passwords using a secure algorithm (owasp) storing passwords in plain text can lead to attackers knowing and leaking the exact password of your site...
...putting the users at risk. the same issues can arise if you use an old or insecure algorithm for hashing (such as md5). you should use a password-specific hashing algorithm (such as argon2, pbkdf2, scrypt or bcrypt) instead of message digest algorithms (such as md5 and sha). this article showcases best practices to use when storing passwords. content security properly configuring server mime
types there are several ways incorrect mime
types can cause potential security problems with your site. this article explains some of those and shows how to configure your server to serve files with the correct mime
types. http strict transport security the strict-transport-security: http header lets a website specify that it may only be accessed using https. http access control the cross-origin ...
... http access control the cross-origin resource sharing standard provides a way to specify what content may be loaded from other domains. you can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use. content security policy an added layer of security that helps to detect and mitigate certain
types of attacks, including cross site scripting (xss) and data injection attacks. these attacks are used for everything from data theft to site defacement or distribution of malware. code is executed by the victims and lets the attackers bypass access controls and impersonate users. according to the open web application security project, xss was the seventh most common web app vulnerability in 2017. ...
Web security
in private information being leaked, and bad people are out there trying to find ways to steal data. the web security-oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft. content security content security policy (csp) content security policy (csp) is an added layer of security that helps to detect and mitigate certain
types of attacks, including cross-site scripting (xss) and data injection attacks. these attacks are used for everything from data theft to site defacement to the distribution of malware. connection security transport security layer (tls) the transport layer security (tls) protocol is the standard for enabling two networked applications or devices to exchange information privately and robustly. ...
...ers and man-in-the-middle attackers. how to fix a website with blocked mixed content if your website delivers https pages, all active mixed content delivered via http on these pages will be blocked by default. consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). passive mixed content is displayed by default, but users can set a preference to block this
type of content, as well. this page explains what you should be aware of as a web developer. secure contexts a secure context is a window or worker for which there is reasonable confidence that the content has been delivered securely (via https/tls), and for which the potential for communication with contexts that are not secure is limited. many web apis and features are accessible only in a secure ...
... browsers to verify that resources they fetch (for example, from a cdn) are delivered without unexpected manipulation. it works by allowing you to provide a cryptographic hash that a fetched resource must match. http access-control-allow-origin the access-control-allow-origin response header indicates whether the response can be shared with requesting code from the given origin. http x-content-
type-options the x-content-
type-options response http header is a marker used by the server to indicate that the mime
types advertised in the content-
type headers should not be changed and be followed. this is a way to opt out of mime
type sniffing, or, in other words, to say that the mime
types are deliberately configured. clickjacking protection in clickjacking, a user is fooled into clickin...
Tutorials
ics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this module looks at the cascade and inheritance, all the selector
types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more. the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. styling text here we look at text styling fundamentals, including setting font, boldness, and ita...
...dvanced level using css transforms apply rotation, skewing, scaling, and translation using css. css transitions css transitions, part of the draft css3 specification, provide a way to animate changes to css properties, instead of having the changes take effect instantly. quick guide to implement web fonts (with @font-face) the @font-face feature from css3 allows you to use custom
typefaces on the web in an accessible, manipulatable, and scalable way. starting to write css an introduction to tools and methodologies to write more succinct, maintainable, and scalable css. canvas tutorial learn how to draw graphics using scripting using the canvas element. html5 doctor articles about using html5 right now. javascript tutorials introductory level javascript fi...
...k 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 we'll discuss it all explicitly. getting started with javascript what is javascript and how can it help you? codecademy codecademy is an easy way to learn how to code javascript. it's interactive and you can do it with your friends. fre...
Using custom elements - Web Components
he class, which run at specific points in the element's lifecycle. for example, connectedcallback is invoked each time the custom element is appended into a document-connected element, while attributechangedcallback is invoked when one of the custom element's attributes is added, removed, or changed. you'll learn more about these in the using the lifecycle callbacks section below. there are two
types of custom elements: autonomous custom elements are standalone — they don't inherit from standard html elements. you use these on a page by literally writing them out as an html element. for example <popup-info>, or document.createelement("popup-info"). customized built-in elements inherit from basic html elements. to create one of these, you have to specify which element they extend (as im...
... defines a class called popupinfo, which extends the generic htmlelement class. class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // write element functionality in here ... } } the preceding code snippet contains the constructor() definition for the class, which always starts by calling super() so that the correct proto
type chain is established. inside the constructor, we define all the functionality the element will have when an instance of it is instantiated. in this case we attach a shadow root to the custom element, use some dom manipulation to create the element's internal shadow dom structure — which is then attached to the shadow root — and finally attach some css to the shadow root to style it. // crea...
...in here // self.addeventlistener(...) // return the right context return self; } } if you don't need to perform any operation in the constructor, you can simply omit it so that its native behavior (see following) will be preserved. constructor(...args) { return super(...args); } transpilers vs. classes please note that es2015 classes cannot reliably be transpiled in babel 6 or
typescript targeting legacy browsers. you can either use babel 7 or the babel-plugin-transform-builtin-classes for babel 6, and target es2015 in
typescript instead of legacy. libraries there are several libraries that are built on web components with the aim of increasing the level of abstraction when creating custom elements. some of these libraries are snuggsi ć, x-tag, slim.js, litelement, smar...
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
an lre also appears in a template. it consists of any non-instruction element that should be copied as-is to the result document, for example, an <hr> element in an html conversion stylesheet. ...
...an lre also appears in a template. it consists of any non-instruction element that should be copied as-is to the result document, for example, an <hr> element in an html conversion stylesheet. ...
... use the {{listsubpages}} macro once 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. <xsl:apply-imports><xsl:apply-templates><xsl:attribute-set><xsl:attribute><xsl:call-templat...
Loading and running WebAssembly code - WebAssembly
to use webassembly in javascript, you first need to pull your module into memory before compilation/instantiation. this article provides a reference for the different mechanisms that can be used to fetch webassembly bytecode, as well as how to compile/instantiate then run it. what are the options? webassembly is not yet integrated with <script
type='module'> or es2015 import statements, thus there is not a path to have the browser fetch modules for you using imports. the older webassembly.compile/webassembly.instantiate methods require you to create an arraybuffer containing your webassembly module binary after fetching the raw bytes, and then compile/instantiate it. this is analogous to new function(string), except that we are substituting a string of characters (javascript source code) w...
...ccess the elements of an exported table: var table = obj.instance.exports.table; console.log(table.get(0)()); }) note: for more information on how exporting from a webassembly module works, have a read of using the webassembly javascript api, and understanding webassembly text format. using xmlhttprequest xmlhttprequest is somewhat older than fetch, but can still be happily used to get a
typed array. again, assuming our module is called simple.wasm: create a new xmlhttprequest() instance, and use its open() method to open a request, setting the request method to get, and declaring the path to the file we want to fetch. the key part of this is to set the response
type to 'arraybuffer' using the response
type property. next, send the request using xmlhttprequest.send(). we then use...
...xmlhttprequest.send(). we then use the onload event handler to invoke a function when the response has finished downloading — in this function we get the array buffer from the response property, and then feed that into our webassembly.instantiate() method as we did with fetch. the final code looks like this: request = new xmlhttprequest(); request.open('get', 'simple.wasm'); request.response
type = 'arraybuffer'; request.send(); request.onload = function() { var bytes = request.response; webassembly.instantiate(bytes, importobject).then(results => { results.instance.exports.exported_func(); }); }; note: you can see an example of this in action in xhr-wasm.html. ...
Compiling an Existing C Module to WebAssembly - WebAssembly
webpencodergba seems like a perfect fit. the function takes a pointer to the input image and its dimensions, as well as a quality option between 0 and 100. it also allocates an output buffer for us that we need to free using webpfree() once we are done with the webp image. the result of the encoding operation is an output buffer and its length. because functions in c can't have arrays as return
types (unless you allocate memory dynamically), this example resorts to a static global array. this may not be clean c. in fact, it relies on wasm pointers being 32 bits wide. but this is a fair shortuct for keeping things simple: int result[2]; emscripten_keepalive void encode(uint8_t* img_in, int width, int height, float quality) { uint8_t* img_out; size_t size; size = webpencodergba(img_in,...
... depending on the size of your image, you might run into an error where wasm can't grow the memory enough to accommodate both the input and the output image: luckily, the solution to this problem is in the error message. you just need to add -s allow_memory_growth=1 to your compilation command. and there you have it. you have compiled a webp encoder and transcoded ...
... both the input and the output image: luckily, the solution to this problem is in the error message. you just need to add -s allow_memory_growth=1 to your compilation command. and there you have it. you have compiled a webp encoder and transcoded a jpeg image to webp. to prove that it worked, turn your result buffer into a blob and use it on an <img> element: const blob = new blob([result], {
type: 'image/webp'}); const bloburl = url.createobjecturl(blob); const img = document.createelement('img'); img.src = bloburl; document.body.appendchild(img) behold, the glory of a new webp image. demo | original article ...
Cross-domain Content Scripts - Archive of obsolete content
ript, and logs the payload. ...
...panel.html"), contentscriptfile: data.url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just includes a <div> block for the forecast: <!doc
type html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxfcs/regionalforecast/json/500?key=your-api-key"; self.port.on("show", function () { var request = new xmlhttprequest(); r...
Guides - Archive of obsolete content
ng a patch, getting reviews, and getting help. modules learn about the module system used by the sdk (which is based on the commonjs specification), how sandboxes and compartments can be used to improve security, and about the built-in sdk module loader, known as cuddlefish. classes and inheritance learn how classes and inheritance can be implemented in javascript, using constructors and proto
types, and about the helper functions provided by the sdk to simplify this. private properties learn how private properties can be implemented in javascript using prefixes, closures, and weakmaps, and how the sdk supports private properties by using namespaces (which are a generalization of weakmaps). content processes the sdk was designed to work in an environment where the code to manipulat...
...ompatibility working out which firefox releases a given sdk release is compatible with, and dealing with compatibility problems. sdk idioms working with events write event-driven code using the the sdk's event emitting framework. content scripts guide an overview of content scripts, including: what they are, what they can do, how to load them, how to communicate with them. two
types of scripts this article explains the differences between the apis available to your main add-on code and those available to content scripts. xul migration xul migration guide techniques to help port a xul add-on to the sdk. xul versus the sdk a comparison of the strengths and weaknesses of the sdk, compared to traditional xul-based add-ons. porting example a walkthrough of p...
system - Archive of obsolete content
stem = require("sdk/system"); if ('path' in system.env) { console.log("path is set"); } you can set a variable by setting the property: var system = require("sdk/system"); system.env.foo = "bar"; console.log(system.env.foo); you can unset a variable by deleting the property: var system = require("sdk/system"); delete system.env.foo; you can't enumerate environment variables. platform the
type of operating system you're running on. this will be one of the values listed as os_target, converted to lower case. var system = require("sdk/system"); console.log("platform = " + system.platform); architecture the
type of processor architecture you're running on. this will be one of: "arm"``,"ia32", or"x64"`. var system = require("sdk/system"); console.log("architecture = " + system.architec...
...ou're running on. this will be one of the values listed as os_target, converted to lower case. var system = require("sdk/system"); console.log("platform = " + system.platform); architecture the
type of processor architecture you're running on. this will be one of: "arm"``,"ia32", or"x64"`. var system = require("sdk/system"); console.log("architecture = " + system.architecture); compiler the
type of compiler used to build the host application. for example: "msvc", "n32", "gcc2", "gcc3", "sunc", "ibmc" var system = require("sdk/system"); console.log("compiler = " + system.compiler); build an identifier for the specific build, derived from the build date. this is useful if you're trying to target individual nightly builds. see nsixulappinfo's appbuildid. var system = require("sdk/system...
windows - Archive of obsolete content
"sdk/windows").browserwindows; var example = windows.open("http://www.example.com"); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { example.close(); } }); this example uses the action button api, which is only available from firefox 29 onwards. parameters options : object required options: name
type url string string url to be opened in the new window. this is a required property. isprivate boolean boolean which will determine whether the new window should be private or not. if your add-on does not support private browsing this will have no effect. see the private-browsing documentation for more information. optional options: ...
... url string string url to be opened in the new window. this is a required property. isprivate boolean boolean which will determine whether the new window should be private or not. if your add-on does not support private browsing this will have no effect. see the private-browsing documentation for more information. optional options: name
type onopen function a callback function that is called when the window has opened. this does not mean that the url content has loaded, only that the window itself is fully functional and its properties can be accessed. this is an optional property. onclose function a callback function that is called when the window will be called. this is an option...
platform/xpcom - Archive of obsolete content
users of xpcom can use this value to retrieve the f...
...y); globals constructors factory(options) parameters options : object required options: name
type component constructor constructor for the component this factory creates. this will typically return a descendant of unknown, although it may return a custom object that satisfies the nsisupports interface. optional options: name
type contract string a contract id. users of xpcom can use this value to retrieve the factory from components.classes: var factory = components.classes['@me.org/request'] var component = factory.createinstance(ci.nsirequest); this parameter is formally optional, but if you don't specify it, users won't be able to retrieve your factory using a contract id. if spec...
stylesheet/utils - Archive of obsolete content
experimental helper functions for working with stylesheets. globals functions loadsheet(window, uri,
type) synchronously loads a style sheet from uri and adds it to the list of additional style sheets of the document. the sheets added takes effect immediately, and only on the document of the window given. parameters window : nsidomwindow uri : string, nsiuri}
type : string the
type of the sheet. it accepts the following values: "agent", "user" and "author". if not provided, the default value is "author". removesheet(window, uri,
type) remove the document style sheet at sheeturi from the list of additional style sheets of the document. the removal takes effect immediately. parameters window : nsidomwindow uri : string, nsiuri}
type : string the
type of the sheet. it accept...
...e is "author". removesheet(window, uri,
type) remove the document style sheet at sheeturi from the list of additional style sheets of the document. the removal takes effect immediately. parameters window : nsidomwindow uri : string, nsiuri}
type : string the
type of the sheet. it accepts the following values: "agent", "user" and "author". if not provided, the default value is "author". is
typevalid(
type) verifies that the
type given is a valid stylesheet's
type. the values considered valid are: "agent", "user" and "author". parameters
type : string the
type of the sheet. returns boolean : true if the
type given is valid, otherwise false. ...
tabs/utils - Archive of obsolete content
wnerwindow(tab) get the browser window that owns the specified tab. parameters tab : tab a browser tab. returns window : a browser window. opentab(window, url, options) open a new tab in the specified browser window. parameters window : window the browser window in which to open the tab. url : string url for the document to load. options : object optional options: name
type inbackground boolean if true, open the new tab, but keep the currently selected tab selected. if false, make the new tab the selected tab. optional, defaults to false. pinned boolean pin this tab. optional, defaults to false. returns tab : the new tab. istabopen(tab) test whether the specified tab is open. parameters tab : tab ...
...y of windows. gettabforcontentwindow(window) get the tab element that hosts the specified content window. parameters window : window returns tab : gettaburl(tab) get the specified tab's url. parameters tab : tab a xul tab element. returns string : the current uri. settaburl(tab, url) set the specified tab's url. parameters tab : tab a xul tab element. url : string gettabcontent
type(tab) get the content
type of the document hosted by the specified tab. parameters tab : tab a xul tab element. returns string : getselectedtab(window) get the selected tab for the specified browser window. parameters window : window returns tab : a xul tab element. gettabforbrowser(browser) get the tab linked to the specified browser. parameters browser : browser the browser whose...
cfx - Archive of obsolete content
cfx run uses firefox as the host application. this option enables you to select a different host. you can specify "firefox", "xulrunner", "fennec", or "thunderbird". but note that at present only firefox is supported. --no-run with this option cfx will not execute the command, but will print out the command that it would have used to execute the command. for example, if you
type: cfx run ---no-run you will see something like: to launch the application, enter the following command: /path/to/firefox/firefox-bin -profile /path/to/profile/tmpjdnlp6.mozrunner -foreground -no-remote this enables you to run the add-on without going through cfx, which might be useful if you want to run it inside a debugger like gdb. -o, --overload-modules ...
...ifferent host. you can specify "firefox", "xulrunner", "fennec", or "thunderbird". but note that at present only firefox is supported. --check-memory attempts to detect leaked compartments after a test run. --no-run with this option cfx will not execute the command, but will print out the command that it would have used to execute the command. for example, if you
type: cfx run ---no-run you will see something like: to launch the application, enter the following command: /path/to/firefox/firefox-bin -profile /path/to/profile/tmpjdnlp6.mozrunner -foreground -no-remote this enables you to run the add-on without going through cfx, which might be useful if you want to run it inside a debugger like gdb. -o, --overload-modules ...
Creating annotations - Archive of obsolete content
tor panel, which enables the user to enter an annotation associated with the selected element. we will supply the panel's content as an html file, and will also supply a content script to execute in the panel's context. so create a subdirectory under data called editor. this will contain two files: the html content, and the content script. ...
...l's context. so create a subdirectory under data called editor. this will contain two files: the html content, and the content script. annotation editor html the html is very simple: <!doc
type html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style
type="text/css" media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 180px; height: 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. annotation editor content sc...
Displaying annotations - Archive of obsolete content
tations.push(newannotation); updatematchers(); } annotation panel the annotation panel just shows the content of an annotation. there are two files associated with the annotation panel: a simple html file to use as a template a simple content script to build the panel's content these files will live in a new subdirectory of data which we'll call annotation. ...
...plate a simple content script to build the panel's content these files will live in a new subdirectory of data which we'll call annotation. annotation panel html <!doc
type html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style media="all"
type="text/css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="annotation"> </div> </body> </html> save this in data/annotation as annotation.html. annotation panel content script the annotation panel has a minimal content script that sets the text: self.on('message', fun...
Storing annotations - Archive of obsolete content
is given. the user will be able to click links in the panel, but we want to open them in the main browser window rather than the panel. so the content script binds a click handler to the links which will send the url to the add-on. save this file in data/list as annotation-list.js. ...
...er window rather than the panel. so the content script binds a click handler to the links which will send the url to the add-on. save this file in data/list as annotation-list.js. ...
Display a Popup - Archive of obsolete content
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 // just start typing. ...
... if you use a toggle button, you can attach the panel to the button. learning more to learn more about the panel module, see the panel api reference. to learn more about buttons, see the action button and toggle button api reference. ...
Getting Started (jpm) - Archive of obsolete content
earlier versions of firefox, you'll need to use the old cfx tool. see instructions for getting started with cfx. the command-line jpm tool. see the instructions for installing jpm. once you've done that, you'll be looking at a command prompt. install firefox developer version for testing your add-on. initializing an empty add-on in the command prompt, create a new directory. navigate to it,
type jpm init, and hit enter: mkdir my-addon cd my-addon jpm init you'll then be asked to supply some information about your add-on: this will be used to create your add-on's package.json file. for now, just press enter to accept the default for each property. for more information on jpm init, see the jpm command reference. once you've supplied a value or accepted the default for these properties,...
...tly in your add-on's root. in cfx, the entry point defaults to "main.js", and is located in the "lib" directory under the add-on's root. save the file. next, create a directory called "data" in your add-on's root, mkdir data and save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png back at the command prompt,
type: jpm run this is the jpm command to run a new instance of firefox with your add-on installed. if firefox can not be located, or you have installed firefox developer as an alternate browser, you may need to provide the path to it. for example, in ubuntu: jpm run -b /usr/bin/firefox when firefox launches, in the top-right corner of the browser you'll see an icon with the firefox logo. click th...
Getting started (cfx) - Archive of obsolete content
cfx to jpm prerequisites to create add-ons for firefox using the sdk, you'll first need to follow the instructions to install and activate the sdk. once you've done that, you'll be looking at a command prompt. initializing an empty add-on in the command prompt, create a new directory. the directory doesn't have to be under the sdk root: you can create it anywhere you like. navigate to it,
type cfx init, and hit enter: mkdir my-addon cd my-addon cfx init you'll see some output like this: * lib directory created * data directory created * test directory created * doc directory created * readme.md written * package.json written * test/test-main.js written * lib/main.js written * doc/main.md written your sample add-on is now ready for testing: try "cfx test" and then "cfx run". have fu...
...visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file. next, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png back at the command prompt,
type: cfx run this is the sdk command to run a new instance of firefox with your add-on installed. when firefox launches, in the top-right corner of the browser you'll see an icon with the firefox logo. click the icon, and a new tab will open with https://www.mozilla.org/ loaded into it. that's all this add-on does. it uses two sdk modules: the action button module, which enables you to add button...
Localization - Archive of obsolete content
lowed by _title, and whose value is the localized title. to provide the localized form of the preference description, include an entry in your "properties" file whose identifier is the preference name followed by _description, and whose value is the localized description. ...
...the label attribute of each option is displayed to the user. if the locale file has a entry with the value of the label attribute prefixed with "{name}_options." as its key, where {name} is the name of the preference, its value is used as a localized label. using identifiers if the localization system can't find an entry for a particular identifier using the current locale, then ...
Boxes - Archive of obsolete content
n use a div as a container and when the div changes size, the contents will 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. ...
...el value="ttt"/> <label value="uuu"/> <label value="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. ...
Customizing the download progress bar - Archive of obsolete content
n add a new stylesheet. in your jar.mn file, add the following (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css"
type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed. this is required since it contains platform-specific directives, as we will see. the myextension.css file will look something like this: richlistitem ...
...xels wide seems about right, though you might have to experiment with this a bit. changing the progress bar for specific downloads this is all you need to change the progress bar appearance for all downloads. if you want to change it for certain specific downloads only, things get a bit trickier. ...
Drag & Drop - Archive of obsolete content
the _dragdrop function retrieves the file uri data from the drag session and creates an array of file uris that the xul application can use. ...
...the _dragdrop function retrieves the file uri data from the drag session and creates an array of file uris that the xul application can use. ...
IsDefaultNamespace - Archive of obsolete content
on will quickly return the standard value for mozilla browsers). ...
...ay have to be skipped to get to it return isdefaultnamespace(node.parentnode, namespaceuri); } else { return false; // unknown; } case 9: // document_node return isdefaultnamespace(node.documentelement, namespaceuri); case 6: // entity_node case 12: // notation_node case 10: // document_
type_node case 11: // document_fragment_node return false; // unknown case 2: // attribute_node: if (node.ownerelement ) { return isdefaultnamespace(node.ownerelement , namespaceuri); } else { return false; // unknown } default: if (node.parentnode) { // entityref...
LookupPrefix - Archive of obsolete content
here is an implementation of lookupprefix which should work cross-browser. note that all gecko-based browsers (including firefox) support node.lookupprefix. this function is not necessary for gecko-based browsers when used in xhtml. ...
...re/namespaces-algorithms.html#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code which were corrected here) if (node.lookupprefix && htmlmode !== 'text/html') { // shouldn't use this in text/html for mozilla as will return null return node.lookupprefix(namespaceuri); } if (namespaceuri === null || namespaceuri === '') { return null; } switch (node.node
type) { case 1: // node.element_node return _lookupnamespaceprefix(namespaceuri, node); case 9: // node.document_node return _lookupnamespaceprefix(namespaceuri, node.documentelement); case 6: // node.entity_node case 12: // node.notation_node case 11: // node.document_fragment_node case 10: // node.document_
type_node return null; //
type is unknown case 2: // node.attribute_no...
Progress Listeners - Archive of obsolete content
instead, you receive those events that the tabbrowser is interested in, except that the onlinkiconavailable a...
...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. ...
Scrollbar - Archive of obsolete content
re used for windows xp, and nativescrollbars.css on osx. ...
... 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. ...
XPath - Archive of obsolete content
notes and sample code for xpath and ajax (the following was moved from document.evaluate) obj.evaluate(xpathexpression,contextnode,namespaceresolver,result
type,result); //obj and contextnode should be the same object, if context is a ajax xml object (example: returnedxml) this should be used as : returnedxml.evaluate(xpathexpression,returnedxml,namespaceresolver,return
type,result); //contextnode should be used in the one in which it was created //add by mooring 2008-11-15 16:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your browser does't support this script!"); return;...
... if(!obj.documentelement) { alert("your browser does't support this script!"); return; } var fields = [];//store the results if(window.activexobject) { var tobj = obj.documentelement.selectnodes("/root/field/item"); for(var i=0;i<tobj.length; i++) { fields.push(tobj[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.documentelement,null, xpathresult.any_
type, null); var tmp = tobj.iteratenext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <field> <item>art_id</item> <item>psection</item> <item>qkind</item> <item>qtitle</item> <item>question</item> <item>pic</item> <item>answer1</item> <item>answer2</i...
Code snippets - Archive of obsolete content
as-related code signing a xpi how to sign an xpi with pki delayed execution performing background operations. miscellaneous miscellaneous useful code fragments html to dom using a hidden browser element to parse html to a window's dom javascript libraries here are some javascript libraries that may come in handy. stringview a library that implements a stringview view for javascript
typed arrays. this lets you access data in
typed arrays using c-like string functions. rosetta by default, the only possible standardized scripting language for html is ecmascript. hence, if you are going to use another scripting language you might expect that most of the browsers will not recognize it. nevertheless, the increasing computational power of modern browsers together with the introductio...
...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. ...
Extension Etiquette - Archive of obsolete content
ferent themes. extension icons unique icons are usually worth their download weight. they allow for easy identification among other extensions in the extensions manager. coding practices namespace conflicts there are many namespaces which extensions often must share with other consumers, be they other add-ons, web code, or the browser itself. these often include areas such as: object proto
types, such as string.proto
type, which are often extended to add methods to native objects. global variables, such as top-level declarations on scripts loaded into shared windows or web pages. expando properties of shared objects, such as document objects, or dom nodes. ids and class names in html and xul documents, when extensions add elements to web pages or browser windows. chrome: or resource:...
...neral, care must be taken whenever defining a name anywhere that other code might do likewise. strategies to avoid such conflicts include: avoid shared namespaces where possible many naming conflicts are best avoided by simply not sharing namespaces. scripts can be loaded into their own globals, such as commonjs modules, javascript modules, or sandboxes, to avoid most global variable and proto
type conflicts. expando properties are best avoided using tools such as weakmaps. prefix names in shared namespaces when shared namespaces can't be avoided, the simplest solution to prevent conflicts is to use a distinct prefix for all of your names. class names for html elements created by the cool beans extension, for instance, might all be prefixed with cool-beans-. global variables might all b...
Interaction between privileged and non-privileged pages - Archive of obsolete content
something.send_request({firefox: 4}, something.callback)">send {firefox: 4} with callback</button> </body> </html> overlay on browser.xul in your extension: var something = { listen_request: function(callback) { // analogue of chrome.extension.onrequest.addlistener document.addeventlistener("something-query", function(event) { var node = event.target; if (!node || node.node
type != node.text_node) return; var doc = node.ownerdocument; callback(json.parse(node.nodevalue), doc, function(response) { node.nodevalue = json.stringify(response); var event = doc.createevent("htmlevents"); event.initevent("something-response", true, false); return node.dispatchevent(event); }); }, false, true); }, callback: func...
...rm of e4x xml var stuff = {}; stuff.id = sanitize.integer(uc.@id); stuff.name = sanitize.label(uc.@name); } function sendsomethingtopage (something) { var somethingxml = <something/>; // |something| object as e4x xml somethingxml.@id = something.id; somethingxml.@weight = something.weight; sendmsg("sendsomething", somethingxml); } /** * send msgs from chrome to the page * @param
type {string} the event
type. the receiver needs to use that * when doing addeventlistener(
type, ...) * @param dataxml {e4x} the data or detail */ function sendmsg(
type, dataxml) { var el = targetdoc.body; el.setattribute("eventdatatopage", dataxml ? dataxml.tostring() : ""); var event = targetdoc.createevent("event") event.initevent(
type, true, true); el.dispatchevent(event); } /** * v...
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
rvices like google maps, which used javascript and asynchronous communications, created an awareness of a set of technologies nicknamed ajax (asynchronous javascript and xml); that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluation of javascript as a programming language. javascript is a proto
type-based object-oriented language, and as shown in listing 3, also permits independent class definitions. it does not have strict typing like java, making it extremely flexible and giving it qualities that in some senses could be considered similar to lisp. firefox 3.5 includes a number of extensions to the specification standardized in ecmascript 3rd edition, and can use javascript 1.7 and javascr...
...t does not have strict typing like java, making it extremely flexible and giving it qualities that in some senses could be considered similar to lisp. firefox 3.5 includes a number of extensions to the specification standardized in ecmascript 3rd edition, and can use javascript 1.7 and javascript 1.8. listing 3: an example of a class definition in javascript function myclass() { } myclass.proto
type = { property1 : true, property2 : 'string', method : function() { alert('hello, world!'); } }; var obj = new myclass(); obj.method(); dom: an api for manipulating xml documents the document object model (dom) is a technical standard promulgated by the w3c, and is an api for manipulating the contents of xml documents as objects. in earlier dynamic html approaches, the typical method...
Adding sidebars - Archive of obsolete content
hortcuts to open or close them using the keyboard. the code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. <menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;"
type="checkbox" autocheck="false" group="sidebar" sidebarurl="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. keyboard shortcuts are an essential feature of firefox, and you can add your...
...hbox> <!-- some content here. --> </hbox> </stack> this workaround is necessary because you can't have an background image stretch using css. a less common use for the stack element is to use the left and top attributes on its children in order to have absolute positioning for the content on the layers. this kind of positioning can be useful for various artistic effects, as well as some
type of desktop-like or dashboard-like interface, where items are located in positions determined by the user, and they can overlap with each other. this can become complicated very easily, though. remember that you can't have flexibility and absolute positioning at the same time. trees the bookmarks and history sidebars in firefox use the « xul reference « element to show their content. trees ar...
Adding windows and dialogs - Archive of obsolete content
parameter named returnvalue is an object that the dialog will modify to reflect what the user did in it. this is the simplest way to have the dialog return something to its opener. note that the opener will wait until the dialog is closed. this means the opendialog function call will not return until the dialog has been closed by the user. common dialogs and the prompt service there are several
types of dialogs that are fairly common, so there are ways to create them easily without having to reinvent the wheel and write all their xul and js code all over again. whenever you need a new dialog, you should ask yourself if it can be implemented using these common dialogs, and use them whenever it is possible. they have been thoroughly tested for os integration, accessbility and localization, so ...
... do something else } the method returns a boolean value indicating the user's response. others unprivileged javascript can also use the window.prompt function to receive text input from the user. the prompt service has a very rich set of functions that allow different kinds of inputs, such as text, passwords, usernames and passwords, and checkboxes that can be used for "never ask this again"-
type dialogs. the confirmex and prompt methods are the most customizable, allowing a great deal of options that cover most common dialog cases. using the prompt service will save you a lot of xul coding, and you'll be at ease knowing that you're using mozilla's tried and tested code. the dialog element when the prompt service is not enough, you'll have to create you own xul dialogs. luckily, you st...
Intercepting Page Loads - Archive of obsolete content
we register and unregister the progress listeners for the first tab manually, and then add tab open and close event listeners so we can keep tra...
...le values. the context parameter gives you access to the window loading the content. as with all other solutions, you need to be efficient, and a good way to do this is to filter out unneeded cases right from the start. shouldload is called for every load operation firefox tries to do, including images, scripts and xul documents. a good filter would look like this: shouldload : function(acontent
type, acontentlocation, arequestorigin, acontext, amime
typeguess, aextra) { let result = components.interfaces.nsicontentpolicy.accept; // we should check for
type_subdocument as well if we want frames. if ((components.interfaces.nsicontentpolicy.
type_document == acontent
type) && some_regular_expression.test(acontentlocation.spec)) { // do stuff here, possibly changing result. } ...
Setting Up a Development Environment - Archive of obsolete content
file in the bin directory is up to date, and nothing needs to be done. making changes on source files will make make run the necessary steps to build the xpi again. you can clean up the bin directory by just running the following command (again, from the src directory): make clean you can also run these commands from komodo. click on tools > run command.... in the "run" textbox you should
type this: bash -c "make" or replace "make" with "make clean" for the clean command. the "bash -c" part forces komodo to use bash, which for some reason can't be set properly as the default command shell. it isn't necessary to add this, but it's better so that it is consistent with the make command we'll see next. in the "start in" textbox you should choose %p (directory path of active projec...
...ay need to alter the profile location in your makefile. in order to set the profile location to the right value, you should read the support article on profiles, at the mozilla support site. we'll also delve deeper in this topic later on in this section. to make "make install" work on non-windows systems, you need an extra step. the install process requires using an environment variable called os
type, which is not exported. long story short, if you want to run it from a command line, you need to run: export os
type; make install and in the command in komodo, you should enter the following: bash -c "export os
type; make install" the export command won't work correctly unless you use "bash -c". the file makefile specifies which profile folder the add-on will be reinstalled to. this i...
The Box Model - Archive of obsolete content
« previousnext » in order to master xul, you'll need to have a fairly good understanding of its box model. this is the system that determines how all elements are laid out visually in a xul document. it is important to know how it works in order to make interfaces that are easy to localize, skin and use in different
types of operating systems, screen sizes and resolutions. the xul box model is a significant improvement over the html layout model, which is mostly vertical. with xul you can define vertically oriented as well as horizontally oriented interfaces, providing greater flexibility in interface design. any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus, to...
...lly used for displaying text: label and description. their behavior is nearly identical, but they are meant to be used in different situations. the label element should be used mainly for text in xul forms, such as the ones you see in the firefox options / preferences window. here's a typical usage of the label element: <label control="xulschoolhello-greeting-textbox" value="&xulschoolhello.
typegreeting.label;" /> <textbox id="xulschoolhello-greeting-textbox" /> the label says something like "
type a greeting message", and the textbox next to it allows the user to
type the message. the control attribute links the label to the textbox. if the user clicks on the label, the textbox will be focused. also, if the user has a screen reader, the label will be read when the focus is placed on t...
Extensions support in SeaMonkey 2 - Archive of obsolete content
the basics to support seamonkey 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> <!-- seamonkey --> <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. ...
...ordinary popups are fine of course. the sta...
Security best practices in extensions - Archive of obsolete content
form of web pages. these web pages can come from a server, or come from local html files bundled with the extension. for pages coming from the server, you need to take steps to ensure that the content can not call back into the web browser and run malicious code. the main way to do this is by creating an iframe or browser element in the sidebar, and loading your content there. give the element a
type="content" attribute, which essentially sandboxes the code there and blocks callback rights into chrome. using eval() in an extension using the built-in javascript eval function is frowned upon in the context of extensions. while there are some legitimate use-cases, most of the time there are safer alternatives. this blog post offers some excellent reasons not to use eval(). sandboxed http conn...
...eb services. be sure to read using native json to find out the correct way to handle it. apis can't be used with self-signed certificates. remote javascript and content there are a number of ways of remote scripts being used in extensions. they can be included in content, or downloaded at intervals. non-chrome urls in chrome xul or html such as the following example are not allowed: <script
type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome context are not acceptable, as many times the source of the script can never be 100% guaranteed, 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...
Session store API - Archive of obsolete content
'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. the session store api is implemented using the nsisessionstore interface. knowing when to restore each time firefox is about to restore a tab, an event of
type sstabrestoring is sent. if your extension wants to be able to restore data when tabs are restored, you can install a listener like this: function myextensionhandlerestore(aevent) { var tab = event.originaltarget; /* the tab being restored */ var uri = tab.linkedbrowser.contentdocument.location; /* the tab's uri */ components.classes["@mozilla.org/consoleservice;1"] .ge...
... .logstringmessage("restoring tab: " + uri); }; document.addeventlistener("sstabrestoring", myextensionhandlerestore, false); simply replace the contents of the function myextensionhandlerestore() with whatever you need to do when the tab is restored. in this example, nsiconsoleservice is used to display a message to the console. this event is sent just before a tab is restored. an event of
type sstabrestored fires each time a tab has finished restoring. it's worth noting that this event is sent even if tab loading at startup is deferred until the user selects the tab. firefox 3 note in firefox 3 and later, if you need to detect when a tab is about to be closed so that you can update data associated with the tab before it is closed, you can watch for the "sstabclosing" event, which is...
Creating a dynamic status bar extension - Archive of obsolete content
from the previous sample; simply replace the id of the first sample, "status-bar-sample-1", with the name of the new sample, "stockwatcher". if you need to brush up, visit the chrome manifest section. ...
...watcher". if you need to brush up, visit the chrome manifest section. ...
Monitoring WiFi access points - Archive of obsolete content
ccess points to obtain information about them including their ssid, mac address, and signal strength. this capability was introduced primarily to allow wifi-based location services to be used by geolocation services. example this example simply displays a list of the available access points. ...
...this object is described in lines 11 through 40 in the code above. the onchange() method (lines 13 through 27) begins by enabling universalxpconnect privileges, then clearing out the div (d) that will receive the updated list of access points. then the loop in lines 19-22 iterates over the list of access...
Source Navigator - Archive of obsolete content
ator's build system to automatically generate a makefile. source-navigator works with the insight gui interface for gdb. more information can be found here --> http://sourcenav.sourceforge.net/ why worth a try? it's quite fast as compared to mxr. (i think.) you can specify whether it's the declaration/definition of a method/function to look up... but on the other hand mxr can only allow you to
type in the name for it to generate a long list of occurances. (as i understand. let me know if this is wrong..) it can generate a class hierarchy quite easily (unfortunately, not for classnames which are defined by macro.) installing source navigator in ubuntu execute the following line in a terminal window: sudo apt-get install sourcenav this should install source-navigator. one can check whe...
...a</tt> (because i saved my source at ~/moz1.9/mozilla.) remember to ensure that "include subdirectories" and "build cross-reference database" are checked. then click "ok". the snavigator then begins to scan your source directories. this takes a few minutes. now you can enjoy searching the mozilla code in a faster speed. using source navigator (more later) opening a project open a terminal.
type <tt>snavigator</tt> followed by striking enter. this shows the "source-navigator projects" dialog. choose the project file that you've just created and then click "open...". source navigator then loads the database and then display the following symbols window: searching a method by typing in the method name viewing the definition/declaration by highlighting the method in the code ... displayin...
Visualizing an audio spectrum - Archive of obsolete content
spectrum data for the playing audio. the function handling the loadedmetadata event stores the metadata of the audio element in global variables; the function for the mozaudioavailable event does an fft of the samples and displays them in a canvas. note: you can use the audionode called analysernode to perform real-time fft analysis on an audio stream, rather than the code shown below. ...
...< buffersize ) { for ( var i = 0; i < limit; i++ ) { this.reversetable[i + limit] = this.reversetable[i] + bit; } limit = limit << 1; bit = bit >> 1; } for ( var i = 0; i < buffersize; i++ ) { this.sintable[i] = math.sin(-math.pi/i); this.costable[i] = math.cos(-math.pi/i); } }; fft.proto
type.forward = function(buffer) { var buffersize = this.buffersize, costable = this.costable, sintable = this.sintable, reversetable = this.reversetable, real = this.real, imag = this.imag, spectrum = this.spectrum; if ( buffersize !== buffer.length ) { throw "supplied buffe...
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
inderstatus.css tb-busted.png tb-nostatus.png tb-success.png tb-testfailed.png these are the files we're going to put into the xpi. ...
...e need to change some urls in the copy of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css"
type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script
type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in the copy of tinderstatus.css: statusbarpanel#tinderbox-status { list-st...
Specifying the appearance - Archive of obsolete content
there is one rule for each possible tinderbox state. make your own icons for the four states or use the fol...
...there is one rule for each possible tinderbox state. make your own icons for the four states or use the following icons: no status , success , test failed and busted . if you restart mozilla now you shoul...
Creating a hybrid CD - Archive of obsolete content
~/party.iso -r -j -hfs -v mozilla.party -map ~/hfsmapping ~/party/ cdrecord -v speed=2 dev=0,6,0 ~/party.iso its also handy to be able to mount an image file to test it. mount ~/party.iso /mnt/cdrom -t iso9660 -o loop=/dev/loop3,blocksize=1024 umount /mnt/cdrom here is the hfs mapping that i used. the creator "moss" is for netscape 4.x and "mozz" is used for mozilla. ...
...drom -t iso9660 -o loop=/dev/loop3,blocksize=1024 umount /mnt/cdrom here is the hfs mapping that i used. the creator "moss" is for netscape 4.x and "mozz" is used for mozilla. it is used as the creator
type for readme and other text files because it can handle unix and windows linebreaks, but teachtext cannot. ...
Helper Apps (and a bit of Save As) - Archive of obsolete content
warning: the content of this article may be out of date. it was last updated in 2002. bird's eye view flow of control uriloader tries to find a content listener for the mime
type in question. when this fails, uriloader asks an nsiexternalhelperappservice to handle the load. the nsexternalhelperappservice looks up the nsimimeinfo for the load and creates an nsihelperapplauncher to manage the load. the nsexternalapphandler (which implements nsihelperapplauncher) uses the nsimimeinfo and an nsihelperapplauncherdialog to decide what to do with the data. the nsexternalapphandler does whatever it decided to do. nsimimeinfo lookup look in built-in list which the user cannot override (
types we handle internally). look in user preferences. ask the os: registry on window...
... look in second built-in list, which the user can override. nsexternalapphandler details implements nsistreamlistener. ...
Twitter - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! jetpack's twitter library, jetpack.lib.twitter, is a very simple, lightweight layer on top of twitter's rest api. in fact it's hardly more than syntactic sugar for doing xmlhttprequests. to use this library, you therefore need to be familiar with twitter's own api. (it's easy!) methods each method in twitter's api maps to a method here. for example, the twitter method for tweeting, statuses/update, maps to jetpack.lib.twitter.statuses.update(). to call trends/current, use jetpack.lib.twitter.trends.current(). ...
... error is a function called when it fails to complete. the library simply passes them to jquery.ajax(), and so they are called like so: success(data, textstatus) data is twitter's decoded json response. textstatus is a simple string describing the status. error(xmlhttprequest, textstatus, errorthrown) xmlhttprequest is the xhr used in the request. textstatus is a simple string describing the
type of error. errorthrown is an exception object, if one was thrown. the examples below all use this first, simpler style. the second style will be familiar if you have used jquery.ajax() -- in fact the object is passed as-is (almost) to it. in other words, define a data property that is itself an object whose properties correspond to the parameters of the twitter method. with this style you can u...
Modularization techniques - Archive of obsolete content
directly. in debug builds, these macros provide useful reference counting logs. use them wherever possible. /* * the nsisupports interface */ class nsisupports { public: ns_imethod queryinterface(const nsiid &aiid, void **aresult) = 0; ns_imethod_(nsrefcnt) addref(void) = 0; ns_imethod_(nsrefcnt) release(void) = 0; }; the ns_imethod and ns_imethod_(
type) macros are basically shorthand for virtual nsresult and virtual
type. on windows they expand to virtual nsresult __stdcall and virtual
type __stdcall for com compatibility reasons. you don't have to use them in your interfaces unless you're concerned with com compatibility. all mozilla interfaces inherit from nsisupports. inheriting from nsisupports allows any interface to be interrogated about ...
...com is scarce. why not com on windows? because it's not a cross platform solution, and that's what we need. we're going to make every effort to make our interfaces compatible with com on platforms that support it, so it may not matter. but no promises, yet. what are the major differences? instead of microsoft's midl compiler, we are using a corba-compliant idl compiler, xpidl. it outputs nspr
types when generating c++ headers. it also generates
typelibraries that are not compatible with microsoft's .tlb format. xpcom uses these
typelibraries to allow other languages, such as javascript, to implement and call xpcom objects. we also do cross-thread proxying calls using the
typelib and nspr's event queues. microsoft provides an extensive support infrastructure for com. this technology is bui...
Remote debugging - Archive of obsolete content
t: not only the names of the functions on the stack, but also the values they were passed. core dump a core dump includes all of the memory of a crashed program. it allows you to see the crash in a debugger even after the program has long exited. transferring a core dump is tricky, because it is large and can contain private information. core dumps on mac and linux to generate a core dump on mac,
type "ulimit -c unlimited", run firefox from the command line, and make firefox crash. when firefox crashes, a core will be placed in /cores. you can then load the core file into gdb (gdb firefox-bin corefile), and it will be as if you caught the crash while running firefox under gdb! when transferring a mac or linux core dump, you'll also have to transfer the firefox executable (and maybe more). core...
...x core dump, you'll also have to transfer the firefox executable (and maybe more). core dumps on windows on windows you can produce a "minidump". see here for instructions on how to do so with microsoft's free debugger, windbg. debugging over bugzilla explain in the bug that you have a core file or can reproduce the crash as many times as needed. the developer can give you appropriate commands to
type into the debugger. examples: 367650, 374356, 393325, 418139 debugging over irc find the developer on irc and explain that you've caught the bug in a debugger. since debugging usually requires printing many objects, this is much faster than debugging over bugzilla. use pastebin.mozilla.org for anything too long to paste into irc. examples: 391851 share your computer with remote desktop offer to l...
SpiderMonkey coding conventions - Archive of obsolete content
y-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). ...
..._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). scalar
type names are lowercase and js-prefixed: jsdouble. aggregate
type names are js-prefixed and mixed-case: jsobject. macros are generally all_caps and underscored, to call out potential side effects, multiple uses of a formal argument, etc. linkage dll entry points have their return
type expanded within a js_public_api() macro call, to get the right windows secret
type qualifiers in the right places for all build variants. dll entry points that are not publ...
open - Archive of obsolete content
warning: this section describes the file component of the spidermonkey javascript interpreter. 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. other methods, such as remove may not be used when the file is open. valid file ...
...n 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. other methods, such as remove may not be used when the file is open. valid file
types are text, binary and unicode. text indicates ascii text without nul characters. binary indicates utf-8 files. unicode indicates ucs-2 files. for all file
types, carriage returns and linefeeds are treated in a platform-agnostic way. examples example: using open in the following example, myfile is a file object: myfile.open("read", "text"); see also ...
File object - Archive of obsolete content
name of the file. file.isdirectory true if the file is a directory. file.isfile true if the file is a file. file.exists true if the file exists. file.canread true if the file can be read. file.canwrite true if the file can be written. file.canappend true if the file is in append mode. file.canreplace true if the file is in replace mode. file.isopen true if the file is open. file.
type a string specifying the
type of data or encoding contained in the file. currently "ascii" (ascii), "binary" (utf-8) or "unicode" (ucs-2). (xxx note -- ascii might imply asciiz) file.mode a string describing the mode used to open the file. file.creationtime a date object representing the time when the file was created. file.lastmodified a date object representing the time when the file was ...
...(including file.intput) do not support random access. file.hasautoflush force a flush on each line break? (readonly) file.position the file position. writing to the property moves the file pointer. file.isnative true if the file is backed by a native stdio file stream. (i.e. file.input, file.output, file.error or a pipeline) methods file.open() opens the file, specifying file mode and
type. file.close() closes the file. file.remove() removes the file, provided it is not open. file.copyto() creates a verbatim copy of the file at a new location. file.renameto() removes the file. file.flush() flushes the operating system's write buffers for the file and blocks until any pending data has been committed to disk. file.seek() moves the file position pointer forward or backward...
String Quick Reference - Archive of obsolete content
note: may involve changing existing apis old way: wrap with nscautostring() // foo is a prunichar* string // call // void handlestring(const nsstring& str); handlestring(nsautostring(foo)); new way: wrap with nsdependentstring // foo is a prunichar* string // fix caller to be // void handlestring(const nsastring& str); h...
...ng); // use widestring again, but need a const prunichar* callwidewithflatstring(widestring.get()); // inline the string with ns_literal_string callwidefunction(ns_literal_string("another string")); converting literal strings to string objects what: converting from const prunichar*/const char* to the appropriate string
type why: avoid making extra copies of strings, just to convert between
types! note: may involve changing existing apis old way: wrap with nscautostring() // foo is a prunichar* string // call // void handlestring(const nsstring& str); handlestring(nsautostring(foo)); new way: wrap with nsdependentstring // foo is a prunichar* string // fix caller to be // void handlestring(const nsastring& str); handlestring(nsdependentstring(foo)); stack-based strings what: use of...
Running Tamarin performance tests - Archive of obsolete content
..latest/asc.jar. also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk. - set the asc environment variable, as described above. - set the shellabc environment variable to the path of the /generated/shell_toplevel.abc. adb 'adb' stands for android debug bridge. adb is used to access your android device and can run both direct and shell-
type commands. if you've correctly edited and run the android-vars.sh script mentioned on the tamarin build documentation page you should already be pathed to the adb executable in the public sdk/ndk, but if not it exists at /android-public/android-sdk-mac_86/platform-tools. adb supports ssh-like commands to an android device. adb automatically connects to a phone if connected by usb. adb shell "ls /"...
...nner.s $ adb shell chmod 777 /data/app/android_runner.sh test it out with a simple .abc or no args for usage (should return exitcode=0) $ tamarin-redux/platform/android/android_shell.h hello.abc hello exitcode=0 running performance tests to run performance tests on android you don't need to pass --androidthreads or --threads=1 as with the acceptance tests; in fact, a usage error will result. just
type the following commands after making sure you've set the environment variables correctly. $ cd /test/performance $ ./runtests.py note on using an emulator: the emulator does seem to support hardware floating point but gives a buserror when running avmshell -darm_vfp. it's unreliable, losing its adb connection frequently. an emulator is ok for testing a few abc files but for any consistency a rea...
The Download Manager schema - Archive of obsolete content
the table is kept in a database file named "downloads.sqlite", in a table called "moz_downloads". the 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...
...ity id from the nsiresumablechannel used to implement the download channel. this information is used to resume the download after it's been paused. currbytes integer the current number of bytes that have been downloaded. defaults to 0, may not be null. maxbytes integer the total number of bytes that need to be downloaded. defaults to -1, may not be null. mime
type text the mime
type of the file. preferredapplication text the preferred application to use to open the file after the download is complete. preferredaction integer the action constant from nsimimeinfo representing the action to take upon completing the download. default 0 (save to disk); may not be null. autoresume integer 0 if the file should no...
The life of an HTML HTTP request - Archive of obsolete content
art of the url, http: in this case) and locates the correct nsiprotocolhandler (in this case nshttphandler) and asks it for a nsichannel (nshttpchannel). the channel represents the connection to the server, and is the source of the html data stream. (3) when data is starting to come from the webserver the nsichannel calls the onstartrequest in the documenloader. now the channel knows the content
type of the incoming data, so the documentloader can find an nsidocumentloaderfactory for the "text/html" content
type (in this case an nslayoutdlf). this factory is then told to create a nsicontentviewer. the factory creates a contentviewer. in most cases (including this) it also creates a nsidocument (nshtmldocument) and binds it to the contentviewer. the contentviewer is then embed():ed into the co...
...it also gets notified of changes in the document/content tree. this is used to create and update the nsiframe hierarchy. this is done by the nscssframeconstructor, which creates frames for each content node according to the rules specified in the user agent stylesheet (ua.css) and the document specific style sheets. each content node corresponds to one or more nsiframe, except content with display
type "none". if there are several frames created from a content node, then the first of these are called the "primary" node, and the following frames can be found by using the getnextinflow() method of nsiframe. the initial reflow is done by the nshtmlcontentsink::startlayout(), startlayout() calls presshell::initialreflow(). startlayout is called quite early in the parsing process, for html it's call...
The new nsString class implementation (1999) - Archive of obsolete content
static void ensurecapacity(nsstrimpl& astring,pruint32 anewlength); static void growcapacity(nsstrimpl& astring,pruint32 anewlength); static void append(nsstrimpl& adest,const n...
...though there is a performance penalty for doing so. since i have to acknowledge the idiom, i have made nscstring available but note that it should be used sparingly. memory management a principal enhancement of the new architecture is pluggable memory allocators. all nsstring subclasses provide their own default allocator implementations, but programmers are free to use their own. in the new proto
type nsstrimpl and nsstring classes, the allocator is an intrinsic member installed during construction of the string (by default they share a global allocator). note: the com rules imply that everyone needs to use the same allocators, that they acquire via a global com service called cogetmalloc(). our nsstrimpl uses an allocator pattern so that programmers can install their own policy, but this may ...
URIs and URLs - Archive of obsolete content
warning: the content of this article may be out of date. it was last updated in 2002. overview handling network and locally retrievable resources is a central part of necko. ...
...rt of necko. resources are identified by uri "uniform resource identifier" (taken from rfc 2396): uniform uniformity provides several benefits: it allows different
types of resource identifiers to be used in the same context, even when the mechanisms used to access those resources may differ; it allows uniform semantic interpretation of common syntactic conventions across different
types of resource identifiers; it allows introduction of new
types of resource identifiers without interfering with the way that existing identifiers are used; and, it allows the identifiers to be reused in many different contexts, thus permitting new applications or protocols to leverage a pre-existing, large, and widely-used set of resource identifiers. resource a resource can be anythin...
Venkman Internals - Archive of obsolete content
here |pc| is the program counter location to set the breakpoint, and |parentbp| is an optional "future breakpoint" object to use as the parent for this breakpoint. if you set the breakpoint right from the jsdscript instead, you wouldn't see it in the venkman ui, and you might confuse venkman when the actual breakpoint was hit and it couldn't find a matching breakpoint object. you can see the proto
type for this object at http://lxr.mozilla.org/mozilla/sourc...ebugger.js#914 scriptwrapper.jsdscript is the reference to the jsdiscript object for the function. sourcecontext is the 5 lines of source text before the last instance of the word "function" on the line where this function starts. (not in 2006, seems to be computed on the fly in getsourcecontext()). the full text of the file can be found i...
...all of the loaded instances of a particular url in the scriptmanager.instances array, in the order that they were loaded. from here, you can set and clear breakpoints in all instances. scriptmanager.transients is a hash of all of the "transient" scripts from this url, where a transient script is something compiled as a the result of an eval, settimeout, or setinterval. try starting up venkman and
type "/watch-expr client.scriptmanagers", make sure to turn on "include functions". this tree should give you a pretty good idea of how it all fits together. ...
DOM Interfaces - Archive of obsolete content
sed to synchronously obtain the specified binding document for use within a particular document (the one on which the loadbindingdocument method was invoked). the binding document can then be modified programmatically using the dom. any subsequent bindings that are attached to elements within the document will be constructed from the modified binding document. parameters documenturl of
type domstring - the url of a binding document. no return value example the following snippet checks to see if any anonymous child of "element" is itself an element. if (element.ownerdocument instanceof ci.nsidomdocumentxbl) { var anonchildren = element.ownerdocument.getanonymousnodes(element); if (anonchildren) { for (var i = 0; i < anonchildren.length; i++) { ...
...document. ...
Example Sticky Notes - Archive of obsolete content
notes.html all parts are made and commented by vk [schools_ring@yahoo.com]. all rights are given to the world. view this example <!doc
type html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-
type" content="text/html; charset=iso-8859-1"> <style
type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme, inc. fax - respond today.</p></div> <div class="sticker"><p>don't forget ...
...actored, so event.target / event.relatedtarget always points to the bound element, even if it was originated to/from a child. ...
Creating XPI Installer Modules - Archive of obsolete content
rces described in this article are in the xpi archive and can be adapted for use in your own development. developing the resources needless to say, one of the first things you will have to create is the actual software you wish to make redistributable. ...
...note also the use of resource attributes specified in the contents.rdf file in the jar. it is the correspond...
Unix stub installer - Archive of obsolete content
nstaller-bin binary with the appropriate flags. if you need to use gdb to debug the installer run it by typing "gdb mozilla-installer-bin" on the shell prompt. how we get setup to debug the xpinstall engine from the unix stub installer? build your entire mozilla tree (which should build the installer in the src2 directory as well). go to mozilla/xpinstall/packager/unix. on the shell prompt
type "perl deliver.pl". now you will find an installer *and* the xpcom.xpi and other debug xpis delivered to mozilla/installer/raw. debug using "gdb mozilla-installer-bin" and set a breakpoint at xpi_init(). you can step into the xpinstall engine through the xpistub once the xpistub dll is loaded. how do i add an installer package to the unix installer? adding a package involves a few steps: ...
...version$ which is replaced at packages time with the browser version. $spacerequired$ which is replaced at package time with the amount of space in kb required for the package when it is fully extracted. add a [componentx] section to the config.ini template file named config.it found at: <http://lxr.mozilla.org/seamonkey/sou...unix/config.it>. then add the componentx into the appropriate setup
types so the installer module installs it when users select the setup
types you choose it to be in. finally add a call to generate the xpi at package time by adding a makexpifile("<component>"); call at: <http://lxr.mozilla.org/seamonkey/sou.../makeall.pl#75> you can test it by changing your current working directory to mozilla/xpinstall/packager/unix and running "perl deliver.pl" on the shell promp...
Windows stub installer - Archive of obsolete content
s the windows stub installer code reside? the windows stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...windows/setup/> how do we get setup to debug the windows stub installer? build your entire mozilla tree, which should build the stub installer in the setup directory as well. (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. run the stub installer setup.exe from the install directory. if you need to use vc++ to debug the installer: under project | settings | debug set "executable f...
...$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. add a [component <component>]</component> section to the config.ini template file named config.it found at: <http://lxr.mozilla.org/seamonkey/sou...dows/config.it>. then add the component <component> into the appropriate setup
types so the installer module installs it when users select the setup
types you choose it to be in. finally add <component> to the component list array @gcomponentlist at: <http://lxr.mozilla.org/seamonkey/sou...makeall.pl#125> you can test it by changing your current working directory to mozilla/xpinstall/wizard/windows/builder and running "perl build.pl" on the shell prompt. the resulting stub ins...
WinRegValue - Archive of obsolete content
winregvalue constructor (windows only) creates a winregvalue object. syntax winregvalue ( int data
type, byte[] regdata); parameters the winregvalue constructor takes the following parameter: data
type an integer indicating the
type of the data encapsulated by this object. the possible values are: winregvalue.reg_sz = 1 winregvalue.reg_expand_sz = 2 winregvalue.reg_binary = 3 winregvalue.reg_dword = 4 winregvalue.reg_dword_little_endian = 4 winregvalue.reg_dword_big_endian = 5 winregvalue.reg_link = 6 winregvalue.reg_multi_sz = 7 winregvalue.reg_resource_list = 8 winregvalue.reg_full_resource_descriptor = 9 ...
..._big_endian = 5 winregvalue.reg_link = 6 winregvalue.reg_multi_sz = 7 winregvalue.reg_resource_list = 8 winregvalue.reg_full_resource_descriptor = 9 winregvalue.reg_resource_requirements_list = 10 regdata a java byte array containing the data. returns a new winregvalue object, with the data members
type and data set to the values passed to this constructor. description advanced windows developers can use this object to manipulate non-string values for the windows registry. an object of this
type has two fields: the
type of the data and the value. for information on the possible data
types for a registry value, see your windows api documentation. you supply the value for these fields to the const...
A XUL Bestiary - Archive of obsolete content
content is just the xul. the chrome url this concept of a chrome as an integrated, dynamic thing in some way divorced from the "appcore" is realized in the use of the chrome url to point to chunks of xul and their related files. the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/"
type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine. in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/content/help.xul', ...
...esentation of a document as a series of scriptable objects. when a scripting language like javascript accesses various parts of an html document, it does so by means of the dom. the parts of the document, such as the head, the links, the body, any tags, are available as nodes whose attributes can be got and set. there are, unfortunately, different document object models corresponding to different
types of documents and also to different proprietary notions about what in a document should be exposed programmatically. the w3c has standardized on a particular dom and already has a candidate recommendation for an updated version. this is the dom that is reflected in xul and in the mozilla browser. at the highest level in the tree of nodes that is the dom sits the window object itself. the window h...
textbox.autoFill - Archive of obsolete content
if false, the default, the value will not be filled in until the user selects an item. ...
...if false, the default, the value will not be filled in until the user selects an item. ...
open - Archive of obsolete content
if you don't pass a mode, the last-used mode for the same findbar is used. ...
... if you don't pass a mode, the last-used mode for the same findbar is used. ...
startFind - Archive of obsolete content
if you don't pass a mode, the last-used mode for the same findbar is used. if the findbar hasn't been used before, find_normal is the default. ...
... if you don't pass a mode, the last-used mode for the same findbar is used. if the findbar hasn't been used before, find_normal is the default. ...
openPopup - Archive of obsolete content
anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. ...
...set the popup from its anchored position by some number, measured in css pixels. an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node. in this case, the position and attributesoverride arguments are ignored. iscontextmenu the iscontextmenu argument should be true for context menus and false for all other
types of popups. it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items. attributesoverride if the attributesoverride argument is true, the position attribute on the popup node overrides the position value argument. if attributesoverride is false, the attribute is only used if the position argument is empty. ...
showPopup - Archive of obsolete content
there are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the window. if either x or y are set to values, the popup will appear at the screen coordinate (x,y). if x and y are -1, the popup will be positioned relative to the element specified as the first argument. this is what you might do to show a popup below a button, for example. ...
...te on the element. the anchor and align arguments are ignored if either x or y are not -1. to have a popup appear relative to another element yet still offset by some number of pixels, determine the actual screen position of the element using the boxobject.screenx and boxobject.screeny properties of the element, and use those as the x and y arguments offset by the desired values. the popup
type should be one of the strings popup, context, or tooltip. each
type of popup is intended to be displayed only temporarily; they are not expected to be displayed permanently. ...
Node - Archive of obsolete content
summary this is a scriptable interface corresponding to the nsidomnode xpcom interface. constants the nsidomnode interface is the primary data
type for the entire document object model. it represents a single node in the document tree. ...
...ntire document object model. it represents a single node in the document tree. ...
ContextMenus - Archive of obsolete content
="copy"/> <menuitem id="enlarge" label="enlarge image"/> <menuitem id="details" label="image details"/> </menupopup> <browser src="http://www.mozilla.org" context="contentareacontextmenu"/> when the popupshowing event is fired, the showhideitems function is called. the triggernode is retrieved and examined to see if it is an image. ...
... by all
types of images. this is useful instead of comparing the tag, as several different tags support images. the test also checks to ensure that the element has a uri set. finally, the hidden state of two menuitems are adjusted based on whether the context is an image or not. the result is that context clicking on images will show a menu with three items, but will only show one item for other
types of elements. ...
OpenClose - Archive of obsolete content
g 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 programatically. to do this, use the popup's openpopup method. this method may be used for any
type of popup, either a menupopup, a panel, or a tooltip, including ones that can be opened via other means, for instance, a popup attached via the context attribute. the openpopup method takes six arguments which are used to specify how and where the popup shou...
...ere 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 menu is open. for other
types of popups, the state property may be examined to determine whether a popup is open or not. this property is available for all
types of popups, including menus, panels and tooltips. when a popup is closed, the state property has the value closed, whereas a popup that is visible has a value for the state property of open. this property is readonly and applies to the menupopup, panel or tooltip ele...
Positioning - Archive of obsolete content
as opened via the keyboard only, the menu will appear at the top left corner of the document, or underneath the currently selected item if a list is focused. context menus will always appear in this location, and not respect any position attribute value. tooltips will always appear near the current mouse position, offset vertically by a small amount. the position attribute the position of all
types of popups can be controlled in two ways. first, the position can be specified when using the popup's openpopup method. this is used when a popup is opened by a script. second, the position can be specified using several attributes placed on the menupopup, panel or tooltip element. these attributes are described below and function the same for all three elements. the position attribute specifies...
... openpopup method provides an example of this. if a menupopup, panel or tooltip has a margin specified in a style sheet or using the inline style attribute, this margin will be applied around the outside of the popup. in the following example, the menupopup has a 2ex margin above it, so when opened, the popup will be placed a distance of 2ex below the bottom of the button. <button label="popup"
type="menu"> <menupopup style="margin-top: 2ex;"> <menuitem label="cat"/> <menuitem label="dog"/> </menupopup> </button> this technique is used internally for tooltips. if you notice in the firefox browser when a tooltip is opened it appears not at the mouse position, but slightly below it. this is because the default theme has a 21 pixel top margin on tooltips that moves them down by th...
currentIndex - Archive of obsolete content
« xul reference currentindex
type: integer set to the row index of the tree caret in the tree. for trees with focus, the caret's position is indicated by the focus ring, but unfocused trees won't show a focus ring, naturally. for unfocused trees, the (undrawn) caret's position can still be obtained by this property. if the caret isn't present for any row (for example, because the tree has never been focused), the value will be -1. you cannot rely on this property to change or determine a tree selection, except for trees with sel
type="single". (all trees have sel
type="multiple" by default.) to reliably change or determine a selection, instead use the nsitreeselection interface methods available via tree.view.selection. example // one way of retrie...
...thods available via tree.view.selection. example // one way of retrieving the text of a cell. ...
Additional Navigation - Archive of obsolete content
s used so far have all had variables in both the subject and object. however, a string value may be used instead. since the subject of an rdf arc is always a resource, the subject may be a resource uri. the object attribute may be a resource uri or a literal value. using a literal as the object of a triple is a common way to filter out specific items. for instance, if items were identified with a
type, the data could be filtered to include only items of a particular
type. here is an example triple that we could use in the photos example: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> this new triple has a static value for the object attri...
... (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) here is the example. naturally, we will need to add a binding for the ?title variable if we wish to display it, or we could just hardcode it since we know the value will be 'canal'. usually you won't be filtering on a title though--you would instead filter on a value that acts like a
type. there has to be at least one variable used in a triple in either the subject or the object attributes, or both. you can't have a triple with no variables. that's not an issue though, since it wouldn't be particularly useful. also, you cannot use a variable in the predicate. only the subject and object attributes may have variables. another thing that you cannot have is a triple where both varia...
Building Hierarchical Trees - Archive of obsolete content
he streets datasource: <tree flex="1" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <treecols> <treecol id="address" primary="true" label="address" flex="1"/> <treecol id="floors" label="floors" flex="1"/> </treecols> <template> <rule rdf:
type="http://www.xulplanet.com/rdf/house"> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.xulplanet.com/rdf/address"/> <treecell label="rdf:http://www.xulplanet.com/rdf/floors"/> </treerow> </treeitem> </treechildren> </rule> <rule> <treechildren> <treeitem uri="rdf:*"> ...
...on street"> the result is a two level tree with two columns. for an xml source, a container is a node in the xml document that has children. in this example, the two group elements are displayed at the first level. the individual people are displayed at the next level of the tree as the builder recurses. in this example, we only need to use one rule. ...
Result Generation - Archive of obsolete content
ated in this case. in xul template terminology, the starting point is called the container or reference point and the endpoint is called the member. it is so called because it is most common to gather the list of the members, or children, of a container. but this doesn't have to be the case. any starting point and ending points will do. nodes in rdf are identified by a string value. there are two
types of nodes in rdf, resources which usually represent 'things', and literals which are values like the names, dates or sizes of those things, and so on. a literal's value is, for example, the name of the thing, such as 'fred'. a resource's value is a uri which for your own rdf data you can just make up (though if you plan to use your model with others, it should be unique, preferably a url for a si...
...d literals which are values like the names, dates or sizes of those things, and so on. a literal's value is, for example, the name of the thing, such as 'fred'. a resource's value is a uri which for your own rdf data you can just make up (though if you plan to use your model with others, it should be unique, preferably a url for a site you own, so as to avoid future conflicts with mixing of other
types). we'll use the uri of the resource nodes in a template. in the image, the resource uri's are the blue labels of each node. there are no literals in this example, but we'll see some later. let's say we want the starting point to be a from the above example graph. we will use a's uri (http://www.xulplanet.com/rdf/a) as the reference starting point. in a xul template, you specify the starting poin...
Template Logging - Archive of obsolete content
esult for query 2 (active query is 1) a result no longer matches, but it is inactive and doesn't have any content. this is because the first query overrides it. removed inactive result for query 2 (no new active query) a result no longer matches, but it is inactive and doesn't have any content. however, no other query overrides it. no changes to the content will occur. ...
...ause the first query overrides it. removed inactive result for query 2 (no new active query) a result no longer matches, but it is inactive and doesn't have any content. however, no other query overrides it. no changes to the content will occur. template errors the second
type of template error is a syntax error is the template rules, for example, a missing attribute or a tag out of place. these
types of errors are also logged to the console, however, these
types of errors are logged whether the logging flag is set or not. the following lists the errors that can occur and an explanation of what the problem is. query
type attribute doesn't specify a valid query processor this error indicates that the query
type attribute is set to an unrecognized value. only the 'rdf', 'xml' and 'storage' value...
Template and Tree Listeners - Archive of obsolete content
you will need a chrome url to test it.) you might also guess that the builder's root property, which is used above, refers to the tree. in a content builder, it will return the element with the datasources attribute, which in the template builder is referred to as the root element. finally, you can remove a listener using the builder's removelistener method. listening for tree changes the second
type of listener is used to handle particular actions related to trees. the tree builder implements the nsitreeview interface, so handles the gathering of data and passing it on to the tree. the tree widget informs the view when certain operations are performed that might affect the data. the tree view handles all of these operations, but allows an observer to be attached which is invoked during these...
... this makes handling dragging onto a tree fairly simple. all you need to do is implement three methods, candropon, candropbeforeafter and ondrop. the tree observer receives drag related events in three places: over a container row, before a row, and after a row. this allows you to handle dragging with more flexibility. for example, in some situations you may want to require dragging onto a folder
type of row. in other situations, you may wish to allow items to be dragged between (before or after) rows. this would be the situation if you were dragging items from that tree around, for instance dragging a bookmark from one location to another. the tree widget will draw a small line between the rows while dragging. all you need to do is add a tree builder observer which returns true for the candro...
Complete - Archive of obsolete content
ices in seamonkey'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 default file name throughout. where you see a url in the code with no file name, the application uses this default file name and an extension appropriate for the
type of file expected. the extension is supplied as a xpi, which is compressed to reduce download times. the xpi contains: install.rdf information about the extension chrome.manifest registration data for firefox etc. install.js installation script for seamonkey chrome directory containing the extension code ...
... locale is fr-fr, it loads: locale/fr-fr/allcustom/allcustom.dtd from inside the jar file. when you restart after installing the extension, the locales en-us and fr-fr are both registered for the component allcustom. you can see the registration details in chrome.manifest (firefox, etc.) or in installed-chrome.txt and chrome.rdf (seamonkey). when the xul file, allcustom.xul is loaded, the doc
type declaration near the top loads a dtd from chrome://allcustom/locale/. the application's chrome registry converts this url to the correct dtd file for the locale you are using. the xul toolbarbutton tag contains an entity &allcustom.alert.1;. the dtd resolves this into a text string in the appropriate language. when you press the button, the code in the xul element sends the text string to the...
Adding Methods to XBL-defined Elements - Archive of obsolete content
syntax of methods is as follows: <implementation> <method name="method-name"> <parameter name="parameter-name1"/> <parameter name="parameter-name2"/> . . . <body> <-- method script goes here --> </body> </method> </implementation> a method declaration goes inside the implementation element, like the fields and properties do. the method element contains two
type of child elements, parameter elements which describe the parameters to the method and body which contains the script for the method. the value of the name attribute becomes the name of the method. similarly, the name attributes on the parameter elements become the names of each parameter. each parameter element is used to declare one parameter for the method. for example, if the method had three...
...n also use a cdata section to escape the entire block of code. you can call the method by using code such as element.getmaximum(5, 10) where element is a reference to an element defined by the xbl containing the getmaximum method. (the bound element.) the parameter tag allows you to define parameters for a method. because mozilla uses javascript as its scripting language, and javascript is a non-
typed language, you do not need to specify the
types of the parameters. however, in the future, other languages may be used with xbl. methods are only available to call after the page is rendered, which may cause problems if using createelement. for example, the following code will probably fail: var element = document.createelement("my_element"); element.getmaximum() // this will fail by the way, ...
Creating Dialogs - Archive of obsolete content
log forok,cancel, and so on. you do not need to include the xul for each button; however, you do need to 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. ...
...he accept button egsave buttonaccesskeyaccept - access key to use for the accept button egs defaultbutton - button is activated when the enter key is pressed note: the label attributes are required by remote sites and are probably missing in the above examples due to bug 224996. ...
Grids - Archive of obsolete content
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 vertically. you can do this by putting a flex attribute on both a row and a column. the following example demonstrates this: example 4 : source view <grid flex="1"> <columns> <column flex="5"/> <column/> <column/> </columns...
...d only grow in one direction. column spanning there is no means of making a cell span a particular number of multiple columns or rows (see discussion for a way of achieving the same effect). however, it is possible to make a row or column that spans the entire width or height of the grid. to do this, just add an element inside the rows element that isn't inside a row element. you can use a box
type for example, and put other elements inside it if you want to use several elements. here is a simple example: example 5 : source view <grid> <columns> <column flex="1"/> <column flex="1"/> </columns> <rows> <row> <label value="northwest"/> <label value="northeast"/> </row> <button label="equator"/> <row> <label value="southwest"/> <label val...
Groupboxes - Archive of obsolete content
however, there are several differences between groupboxes and regular boxes: the groupbox can be labeled using the caption element. ...
... a label and textbox. both the textbox and groupbox have been made flexible so the textbox expands when the window is expanded. the additional checkbox appears below the textbox because of the vertical orientation of the groupbox. we'll add a groupbox to the find files dialog in the next section. radio groups you can use the radiogroup element to group radio elements together. the radiogroup is a
type of box. you can put any element you want inside it, and apart from its special handling of radio buttons, it works like any other box. any radio buttons placed inside the radio group will be grouped together, even if they are inside nested boxes. this could be used to add extra elements within the structure, such as in the following example: example 3 : source view <radiogroup> <radio id="no" v...
List Controls - Archive of obsolete content
they work similar to the html select element, which performs both functions, but the xul elements have additional features. the simplest list box uses the listbox element for the box itself, and the listitem element for each item. for example, this list box will have four rows, one for each item. ...
...cted, it appears as the choice in the menulist. the selected attribute is used to indicate the value that is selected by default. editable menulist by default, you can only select choices from the list. you cannot enter your own text by typing it in. a variant of the menulist allows editing the text in the field. for example, the url field in the browser has a drop-down for selecting previously
typed urls, but you can also
type them in yourself. to create an editable menulist, add the editable attribute as follows: example 6 : source view <menulist editable="true"> <menupopup> <menuitem label="www.mozilla.org" /> <menuitem label="www.xulplanet.com" /> <menuitem label="www.dmoz.org" /> </menupopup> </menulist> the url field created here has three pre-populated choices that t...
Manifest Files - Archive of obsolete content
ur own theme or locale for the browser, all you need to do is create a manifest file with one of these two lines in it, modified to suit your theme or locale. for more information about themes, see themes. for more information about locales, see localization. our example find files dialog let's create a manifest file for the find files dialog we'll be creating. you can combine all of the three
types into a single file if you wish. this may be done when creating an extension such that all of the parts are in one file. we will do this for the find files dialog. create a file findfile.manifest in the chrome directory. add the following to the file: content findfile file:///findfile/content/ skin findfile classic/1.0 file:///findfile/skin/ locale findfile en-us file:///findfile/locale/ creat...
...a yellow background. if you are using a debug build of mozilla, some info will be printed to the terminal when starting up indicating what chrome applications are being checked. check if your application is listed. the error message "xml parsing error: undefined entity" in your xul file can be caused by an error in the manifest or in the jar file referenced by the manifest. for example, in <!doc
type window system "chrome://fireclipse/locale/fireclipse.dtd"> the dtd file must exist and its directory must be correctly addressed in the "locale" manifest or xml parsing will fail. for more information about manifest files, see chrome registration. in the next section, we will start looking into the xul language. « previousnext » ...
Modifying a XUL Interface - Archive of obsolete content
on is attached to a visible box, so it becomes visible as well. the button with the label "add" can be pressed multiple times and it will continue to add new buttons, each of which will have the label "a new button", and will only be distinguishable by their place as children in the box element with the id "abox". the createelement() function will create the default
type of element for the document. for xul documents, this generally means that a xul element will be created. for an html document, an html element will be created, so it will have the features and functions of an html element instead. the createelementns() function may be used to create elements in a different namespace. the appendchild() function is used to add an element as a child of another eleme...
...y may be used to retrieve the index of the selected radio button in the group and well as change it. changing a element disabled or enabled it is common to disable particular fields that don't apply in a given situation. for example, in a preferences dialog, one might have the choice of several possibilities, but one choice allows additional customization. here is an example of how to create this
type of interface. example 7 : source view <script> function updatestate(){ var name = document.getelementbyid("name"); var sindex = document.getelementbyid("group").selectedindex; name.disabled = sindex == 0; } </script> <radiogroup id="group" onselect="updatestate();"> <radio label="random name" selected="true"/> <hbox> <radio label="specify a name:"/> <textbox id="name" value="ji...
More Wizards - Archive of obsolete content
call this method in the onpageadvanced or onwizardnext handlers. remember to return false in this case, because you have already changed the page yourself. note that the goto() method, because it causes a page change, will fire the events again, so you'll have to make sure you handle that case. for example, here are a set of wizard pages (the inner content has been omitted): <wizardpage pageid="
type" next="font"> <wizardpage pageid="font" next="done"> <wizardpage pageid="color" next="done"> <wizardpage pageid="done"> the wizard always starts at the first page, which in this case has the page id
type. the next page is the one with the page id font, so the wizard will navigate to that page next. on the page with the page id font, we can see that the next page is done, so that page will b...
...er 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. it is also called whenever a key is pressed in the textbox, to determine whether the next button should be enabled again. ...
Progress Meters - Archive of obsolete content
« previousnext » in this section, we'll look at creating progress meters. adding a progress meter a progress meter is a bar that indicates how much of a task has been completed. you typically see it when downloading files or when performing a lengthy operation. xul has a progressmeter element which can be used to create these. there are two
types of progress meters: determinate and indeterminate. determinate progress meters are used when you know the length of time that an operation will take. the progress meter will fill up and, once full, the operation should be finished. this can be used for the download file dialog as the size of the file is known. indeterminate progress meters are used when you do not know the length of time of an operation. the progress meter will h...
...have an animation such as a spinning barber pole or a sliding box, depending on the platform and theme used. determinate progress meter: indeterminate progress meter: the progress meter has the following syntax: <html:progress id="identifier" mode="determined" value="50" max="100"/> the attributes are as follows: id the unique identifer of the progress meter mode the
type of the progress meter. if this is set to determined, the progress meter is a determinate progress meter where it fills up as the task completes. if this is set to undetermined, the progress meter is indeterminate where you do not know the length of time. the value determined is the default if you do not specify this attribute. value the current value of the progress meter. you should only use t...
RDF Datasources - Archive of obsolete content
wish. there are several others for mail, address books and searching and so on. however, you might want to use your own rdf datasource stored in an rdf file. the file can be either a local file or a remote file. just put the url of the rdf file in the datasources attribute. using rdf files provides just as much functionality as any of the internal datasources. you can use rules to match specific
types of content. the attributes on the rule element will match if they match the attributes on an rdf description element. you can also create rdf files that are hierarchical. using rdf file example the following is an example of how an rdf file can be used as a datasource. the rdf file is fairly large and can be viewed separately: source rdf example 2 : source view <tree flex="1" width="200" height=...
...e ref attribute example the example below shows how to display a particular piece of an rdf datasource by setting the ref attribute. ...
Simple Menu Bars - Archive of obsolete content
mands themselves are created using the menuitem element. each one represents a single command on the menu popup. you can also create separators on the menus using the menuseparator element. this is used to separate groups of menuitems. menubar element the menubar is a box containing menus. note that it has been placed inside a flexible toolbox. the menubar has no special attributes but it is a
type of box. this means that you could create a vertical menubar by setting the orient attribute to vertical. menu element the menu element works much like the button element. it accepts some of the same attributes 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 det...
...acter that exists in the text (although the key will still work if it doesn't). the menu element is normally placed on a menubar, although it does not have to be. however, it will be given a different look. the image here shows what the earlier example would look like without the menu bar. menupopup element the menupopup element creates the popup window containing the menu commands. it is a
type of box which defaults to a vertical orientation. you could change it to horizontal if you wanted to and the menuitems would be placed in a row. normally only menuitems and menuseparators would be placed on a menupopup. you can place any element on a menupopup, however they will be ignored on a macintosh. menuitem element the menuitem element is much like the menu element and has some of the sam...
Stacks and Decks - Archive of obsolete content
« previousnext » there may be need to display elements as a set of overlapping cards. the stack and deck elements can be used for this purpose. containers each xul box is a container that can contain any other element. there are a number of elements that are specialized
types of boxes, such as toolbars and tabbed panels. the box tag creates the simplest box with no special properties. however, the specialized
types of boxes work just like regular boxes in the way they orient the elements inside them, but they have additional features. in fact, many components can contain other elements. we've already seen that buttons may contain other things besides the default. a scroll bar is just a special
type of box that creates its own elements if you don't provide them. it also han...
... stacks the stack element is a simple box. it works like any other box but has the special property that its children are laid out all on top of each other. ...
Styling a Tree - Archive of obsolete content
the background color of a row. ::-moz-tree-indentation: the indentation to the left of rows that are children of other rows. ::-moz-tree-column: a column. ::-moz-tree-line: the lines that are drawn to connect child rows to parent rows. ::-moz-tree-separator: a separator in a tree. ::-moz-tree-progressmeter: content for progressmeter cells. you can create a progressmeter column by setting the
type attribute on the column to progressmeter. ::-moz-tree-drop-feedback: the drag and drop feedback. ::-moz-tree-checkbox: the image to use for checkbox columns. you can check for multiple properties by separating them with commas. the example below sets the background color to grey for rows that have the 'readonly' and 'unread' properties. for properties that are 'readonly', it adds a red border...
...nread) { background-color: rgb(80%, 80%, 80%); } default properties the properties list for tree elements contain a small number of default properties, which you can also use in a style sheet. you 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. conta...
The Chrome URL - Archive of obsolete content
« previousnext » the following section will describe how to refer to xul documents and other chrome files. the chrome url xul files can be referenced with a regular http url (or any
type of url) just like html files. however, packages that are installed into mozilla's chrome system can be referenced with special chrome urls. the packages included with mozilla will already be installed but you can register your own. installed packages have the advantage that they don't have security restrictions placed on them, which is necessary for many applications. another advantage over other url
types is that they automatically handle multiple themes and locales. for example, a chrome url lets you refer to a file in the theme such as an image without needing to know which theme the user i...
...at window appear like a web page might do and for the most part will function as if it was a separate window. some dialog boxes may not work right, however, as they may be expecting arguments to be supplied from the window that opened them. you will also see chrome urls without specified filenames, such as: chrome://browser/content/ in this case, only the package name and part is specified. this
type of reference will automatically select an appropriate file from that right directory. for content, a file with the same name of the package and a xul extension is selected. in the above example, the file browser.xul is selected. for messenger, messenger.xul would be selected. when creating your own applications, you will want to create a file for your main window with the same name as the package...
Tree View Details - Archive of obsolete content
wcount should be three, even though six rows are hidden. also note the use of the javascript get operator to bind a property to a function, so to have the value of the rowcount property that can change dynamically over time, as rowcount has to be a read-only attribute as defined in nsitreeview. the settree function will be called to set the tree's box object. the tree box object is a specialized
type of box object specific to trees and will be examined in detail in the next section. it is used to aid in drawing the tree. in this example, we will only need one function of the box object, to be able to redraw the tree when items are added or removed. the getcelltext, iscontainer and iscontaineropen functions just return the corresponding element from the visibledata array. finally, the remaini...
...nt the twisty in the new state. the easiest way to do this is to invalidate the row. 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. ...
Using Visual Studio as your XUL IDE - Archive of obsolete content
utocompletion-support and validation for 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: hkey_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 ...
...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 localization using dtd you will get validation errors in visual studio, if you are localizing your xul files. that has to do with the way mozilla implemented localization: < !doc
type window system "chrome://loomo/locale/main.dtd"> visual studio doesn't recognize the chrome uri prefix, what will give you an error at the previous line ("the uri prefix is not recognized"). as vs doesn't know how the chrome protocol works it can't detect where 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 prepr...
Using multiple DTDs - Archive of obsolete content
normally you have a single dtd (document
type definition) to localize a specific xul file. but there are situations where you want to use multiple dtds, for example to localize common widgets used in all your xul files, additionally to the ones specific to the file. single dtd to make strings in your xul file localizable, you normally add a dtd declaration at the beginning of the file like this: <!doc
type window system "chrome://myextension/locale/mainwindow.dtd"> where "window" is the local name of the document (root) element. assuming you have an entity called somebutton.label defined in mainwindow.dtd, you can access the entity like this: <button id="somebutton" label="&somebutton.label"> multiple dtds if you want to use multiple dtds with your xul file, you can simply list all o...
...ocale/mainwindow.dtd"> where "window" is the local name of the document (root) element. assuming you have an entity called somebutton.label defined in mainwindow.dtd, you can access the entity like this: <button id="somebutton" label="&somebutton.label"> multiple dtds if you want to use multiple dtds with your xul file, you can simply list all of the dtds inside your dtd declaration: <!doc
type window [ <!entity % commondtd system "chrome://myextensions/locale/common.dtd"> %commondtd; <!entity % mainwindowdtd system "chrome://myextension/locale/mainwindow.dtd"> %mainwindowdtd; ]> you can now access the entities declared in the dtds as shown above. assume you have an entity okbutton.label defined in file common.dtd. then accessing entities from both dtds would look like this: ...
assign - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] for xml templates, specifies an additional variable to assign a value to. for more information, see xml_assignments attributes expr, var examples (example needed) attributes expr
type: string for xml queries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. var
type: string for the xul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name". inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, e...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
binding - Archive of obsolete content
this must be a uri of the property. sub...
...ualsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties object
type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate
type: uri the predicate or property to match. this must be a uri of the property. subject
type: string the subject of the element. it can be a variable reference or an rdf resource uri. inherited properties align, , allowevents, , boxobject, builder, , , ...
bindings - Archive of obsolete content
this must be a uri of the property. subject ...
... empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width object
type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate
type: uri the predicate or property to match. this must be a uri of the property. subject
type: string the subject of the element. it can be a variable reference or an rdf resource uri. properties inherited properties align, , allowevents, , boxobje...
grid - Archive of obsolete content
the grid is expected to contain both a columns element as a child which defines the structure of the columns and a rows element as child to define the rows. ...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
keyset - Archive of obsolete content
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 acti...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. ...
member - Archive of obsolete content
a variable reference to a node that is expected to ...
...gs, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties child
type: ? a variable reference to a node that is expected to be a child of the element that is referred to by the container element. container
type: ? a variable reference to a node that is expected to be a container. if the variable is the same as the uri attribute on the content element, the resource must be a container element in order to match. inherited properties align, , allow...
observes - Archive of obsolete content
utes from it. the observes element should be placed inside the element that wants to observe the broadcaster. when an observed attribute is modified on the broadcaster, the attribute's value will be forwarded and set on the parent element of the observer. more information is available in the xul tutorial. attributes attribute, element examples (example needed) attributes attribute
type: attribute name the attribute that the observer is observing. when the value of the attribute changes, the broadcast event is called on the observer. use the value * to observe all attribute of the broadcasters. the id, ref, and persist attributes are not observed. element
type: id the id of the broadcaster element that the observer is observing. inherited from xul element align, ...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
preferences - Archive of obsolete content
es | properties | methods | related ] overview <preferences> is a container for <preference> elements. it's supposed to be a child of <prefpane> element. <preferences> element should contain one or more <preference> elements. note: it's not clear which of the following methods and properties are public. examples <preferences> <preference id="pref_one" name="extensions.myextension.one"
type="bool"/> <preference id="pref_two" name="extensions.myextension.two"
type="string"/> ... etc ... </preferences> attributes these ought to be readonly; three of these could be merged into a single member attribute nsiprefservice service; the preferences service. attribute nsiprefbranch rootbranch; the root prefs branch. attribute nsiprefbranch defaultbranch; the root branch of t...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
query - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to specify the query for a template. the attributes and content of the query are dependent on the
type of datasource being used. for rdf datasources, the query should contain one content element as well as member and/or triple elements. for xml datasources, the query should have an expr attribute and may optionally contain assign elements. for sql datasources, the query should contain an sql statement as text. attributes expr examples (example needed) attributes expr
type: string for xml queries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. inherited from xul element align, allowevents, allown...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
script - Archive of obsolete content
xamples | attributes | properties | methods | related ] much like the html script element, this is used to declare a script to be used by the xul window. you should usually put scripts in a separate file pointed to by the src attribute, but you may also place the script inline inside the opening and closing script tags. more information is available in the xul tutorial. attributes src,
type examples <script src="test.js"/> <script src="http://example.com/js/test.js"/> <script> function foo(){ // code } </script> attributes src
type: uri the uri of the script.
type type: language content
type the language of the script. usually, you would set this to application/javascript. note: if the javascript file is in chrome://, setting this attribute to applica...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
separator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] creates a small separating gap between elements. this
type of separator should be used to separate parts of a dialog. it doesn't draw a bar visually, but is just a small space. it is functionally equivalent to a spacer except it defaults to a small size (usually 1.5 ems). attributes orient style classes groove, groove-thin, thin examples <separator class="groove-thin"/> attributes orient
type: one of the values below used to specify whether the separator is a horizontal or vertical separator. note that the values are the reverse of what seems more likely. horizontal the separator separates vertically placed elements. vertical the separator separates horizontall...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
spinbuttons - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] spin buttons are two arrows, one to increase a value and one to decrease a value. spin buttons are not used as separate elements, but are used in combination with other elements to create a control that can be increased and decreased. for instance, spinbuttons are used for the number
type textbox, and with the timepicker and datepicker. attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pac...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
template - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to declare a template for rule-based construction of elements. elements are constructed from a datasource. for more information see the rule element. more information is available in the xul tutorial. attributes container, member examples (example needed) attributes container
type: string may optionally be set to the variable to use as the container or reference variable. if not specified, the variable specified in the uri attribute of the content tag in the template's first rule is used. member
type: string may optionally be set to the variable to use as the member variable. if not specified, the variable specified in the uri attribute in the action body of the t...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
textnode - Archive of obsolete content
eceded with rdf:. in the case of the textnode element, the entire node is replaced with text corresponding to the result of the value attribute. this is useful if you want to use the html element or other elements that have text content inside them instead of in attributes. this element does nothing outside of a template. attributes value examples (example needed) attributes value
type: uri the text value to display. this value should be an rdf property (predicate). inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth,...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
toolbargrippy - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers,...
...lex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible
type: nsiaccessible returns the accessibility object for the element. 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, resourc...
treechildren - Archive of obsolete content
examples | attributes | properties | methods | related ] this element is the body of the tree. for content trees, the content will be placed inside this element. this element is also used to define container rows in the tree. more information is available in the xul tutorial. attributes alternatingbackground attributes alternatingbackground obsolete since gecko 2.0
type: boolean if true, the background of the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafte...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
treerow - Archive of obsolete content
perties | methods | related ] a single row in a tree. it should be placed inside a treeitem element. children of the treerow should be treecell elements. if child rows are necessary, they should be placed in a treechildren element inside the parent treeitem. more information is available in the xul tutorial. attributes properties examples (example needed) attributes properties
type: space-separated list of property names sets the properties of the element, which can be used to style the element. for more information, see styling a tree. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insert...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
treeseparator - Archive of obsolete content
for more information, see styling a tree. ...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
triple - Archive of obsolete content
an rdf description element. the predicate would be a child element or property. for example, for a bookmark resource, the name and url would be predicates. they should be specified in their full uri form. the object is the value of the rdf property. more information is available in the xul tutorial. attributes object, predicate, subject examples (example needed) attributes object
type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate
type: uri the predicate or property to match. this must be a uri of the property. subject
type: string the subject of the element. it can be a variable reference or an rdf resource uri. inherited from xul element align, allowevents, allownegativeasser...
... from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
Building XULRunner with Python - Archive of obsolete content
instructions in the hope of eliminating much trial and error. you should also read the the developer documentation on source code and building as wells as pyxpcom xulrunner with python promises to be a good platform for accessibility projects and both jambu alternative input and the iaccessible2 test tool are using it. of particular interested is access to msaa and iaccessible2 via the python com
types package. development machine setup first a word of warning that zonealarm has exhibited memory leaks that cause build machines to crash with rather spurious errors. you may want to uninstall it if you suspect this to be a problem. you will also want to disable any virus scanner resident monitoring as that will slow builds. ensure the pc is running xp with all the latest service packs and pa...
...ist\bin\xulrunner.exe. using python in xul applications add the following to yourprefs.js during development pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); html <script> tags specify that python is used with
type="application/x-python" attribute. dom scripting is pretty much as with java script. for example def onload(): btntest = document.getelementbyid("btntest") btntest.addeventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that arei...
Deploying XULRunner - Archive of obsolete content
you should copy this file from /library/frameworks/xul.framework/versions/1.8/xulrunner.) when deploying with 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. ...
...<key>cfbundleexecutable</key> <string>xulrunner</string> <key>cfbundlegetinfostring</key> <string>1.0</string> <key>cfbundleiconfile</key> <string>app_icon.icns</string> <key>cfbundleidentifier</key> <string>net.yourcompany.yourapplication</string> <key>cfbundleinfodictionaryversion</key> <string>6.0</string> <key>cfbundlename</key> <string>applicationname</string> <key>cfbundlepackage
type</key> <string>appl</string> <key>cfbundleshortversionstring</key> <string>1.0</string> <key>cfbundlesignature</key> <string>????</string> <!--only useful if your app handle urls--> <key>cfbundleurl
types</key> <array> <dict> <key>cfbundleurliconfile</key> <string>app_icon.icns</string> <key>cfbundleurlname</key> <string>yourapp entity</string> <key>cfbundleurlscheme...
XULRunner Hall of Fame - Archive of obsolete content
r photos to flickr. source google adwords editor adwords editor is google's free, downloadable account management application for your computer. latest release 7.6.1 january 2010 - xulrunner patches lotus notes / sametime the latest version of ibm lotus notes and sametime can embed xul application. mockery mockery is a gui design tool for creating and editing mockups, proto
types, and wireframes for web and desktop software. latest release august 2010 plain old webserver google warns that this link is unsafe. a fully-functioning webserver that runs server-side javascript. latest release june 2009 prism (formerly known as webrunner) a simple, minimal web browser shell or "single site browser." useful for running web applications such as gmail in a separate...
..., minimal web browser shell or "single site browser." useful for running web applications such as gmail in a separate browser process. songbird songbird™ is a desktop web player, a digital jukebox and web browser mashup. build instructions spicebird a collaboration suite - e-mail, calendaring and instant messaging. latest release: june 2010 - build instructions utilities / proto
types ajax toolkit framework (atf) a part of the eclipse web tools platform (wtp) aliwal geocoder geocode addresses onto a map benjamin's xulrunner examples "mybrowser is a very simple example browser", xulmine. an updated version of "mybrowser" that works with firefox 25.0.1+ is available in matthew kastor's xulrunner examples at https://github.com/matthewkastor/xulrunner-exa...
Using SOAP in XULRunner 1.9 - Archive of obsolete content
; for (var k in params) { body.appendchild(new soapobject(k).val(params[k])); } var req = new soaprequest(url, body); req.action = ns + '#' + method; soapclient.sendrequest(req, callback); diff between jqsoapclient.js and sasoapclient.js 42c42 < var jsout = $.xmltojson(xdata.responsexml); --- > var jsout = xmlobjectifier.xmltojson(xdata.responsexml); 46,60c46,62 < $.ajax({ <
type: "post", < url: soapclient.proxy, < data
type: "xml", < processdata: false, < data: content, < complete: getresponse, < content
type: soapclient.content
type + "; charset=\"" + soapclient.charset + "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < ...
...lient.soapserver); < req.setrequestheader("soapaction", soapreq.action); < } < }); --- > var xhr = new xmlhttprequest(); > xhr.mozbackgroundrequest = true; > xhr.open('post', soapclient.proxy, true); > xhr.onreadystatechange = function() { > if (4 != xhr.readystate) { return; } > getresponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-
type': soapclient.content
type + '; charset="' + > soapclient.charset + '"', > 'content-length': soapclient.contentlength, > 'soapserver': soapclient.soapserver, > 'soapaction': soapreq.action > }; > for (var h in headers) { xhr.setrequestheader(h, headers[h]); } > xhr.send(content); ...
Mozilla release FAQ - Archive of obsolete content
me, but this will depend quite a bit on your system. ram will probably be the bottleneck in most cases, at least until you are well over 128m ram. here are a few representative systems (please send your specs in to me) removed because the tree has changed enough that we'll probably need new times for all the builds. please send stats to me in the following format: cpu/mhz, architecture, ram, disk
type, os version, compiler version, build
type, tree date -- build time example: 21164/533, alpha, 512m edo, ultra2 scsi, linux kernel 2.2.11, gcc 2.95, non-debug, 19 august 1999 cvs -- 25 minutes how do i run the binary on unix? i get library errors in dist/bin there's a script called mozilla. use that to launch mozilla for you -- it sets ld_library_path automatically. to launch other binaries from d...
...eel is a poor use of volunteers. why don't we make a way to compress all the components of a webpage into one big file, and send that across? this breaks a lot of things that work currently. it is very difficult to determine what components of the webpage actually needs -- certain images may be shared between several pages, the user may have images turned off or lack capabilities to use a certain
type of media. dynamically generated pages make this nearly impossible. devising a system that would handle all of these situations would make web servers more complex, slower, and likely hurt the transfer time that this proposal is attempting to save. also, progressive display of the webpage would be completely gone with this idea. for these reasons, this is generally considered a bad idea. i'd like ...
2006-11-24 - Archive of obsolete content
proposal for an event summary dialog discussions about design for an event summary dialog. ...
... proposal for an event summary dialog discussions about design for an event summary dialog. ...
NPAPI plugin developer guide - Archive of obsolete content
npapi, the cross-browser api for plugins. the main source of documentation for npapi is the npapi plugin api reference. to make your plugin scriptable from web pages, use npruntime. ...
...overview writing plug-ins registering plug-ins ms windows unix mac os x drawing a plug-in instance handling memory sending and receiving streams working with urls getting version and ui information displaying messages on the status line making plug-ins scriptable building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x
type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initialization instance creation instance destruction shutdown initialize and shutdown example drawing and event handling the npwindow structure drawing plug-ins printing the plug-in setting the window ...
NPAnyCallbackStruct - Archive of obsolete content
description callback structures are used to pass platform-specific information. the npanycallbackstruct structure contains information required by the platformprint field of the npembedprint structure during embedded mode printing. ...
... description callback structures are used to pass platform-specific information. the npanycallbackstruct structure contains information required by the platformprint field of the npembedprint structure during embedded mode printing. ...
NPByteRange - Archive of obsolete content
this value may be either positive or negative: positive value: offset from the beginning of the stream. negative value: offset from the end of the stream. length number of bytes to fetch from the specified offset. ...
...nd of the stream. length number of bytes to fetch from the specified offset. next points to the next npbyterange request in the list of requests, or null if this is the last request. description the plug-in seeks within a stream by building a linked list of one or more npbyterange objects, which represents a set of discontiguous byte ranges. the only plug-in api call that uses the npbyterange
type is npn_requestread(), which lets the plug-in read specified parts of a file without downloading it. the plug-in is responsible for deleting npbyterange objects when finished with them. the browser makes a copy if it needs to keep the objects beyond the call to npn_requestread(). see also npn_requestread() ...
NPIdentifier - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary npidentifier is an opaque
type used for method and property identifiers, such as strings or integers. npidentifiers are unique, in that for any given string or integer, there is only one npidentifier. ...
... « gecko plugin api reference « plug-in side plug-in api summary npidentifier is an opaque
type used for method and property identifiers, such as strings or integers. npidentifiers are unique, in that for any given string or integer, there is only one npidentifier. ...
NPN_RequestRead - Archive of obsolete content
side plug-in api summary requests a range of bytes from a seekable stream. this initiates a read operation; the actual data is received through subsequent calls to npp_writeready() and npp_write(). syntax #include <npapi.h> nperror npn_requestread(npstream* stream, npbyterange* rangelist); parameters the function has the following parameters: stream stream of
type np_seek from which to read bytes. rangelist range of bytes in the form of a linked list of npbyterange objects, each of which specifies a request for a range of bytes. returns if successful, the function returns nperr_no_error. if unsuccessful, the function returns an error code. for possible values, see error codes. description for a seekable stream, the browser sends data only in...
... to npn_requestread(), or multiple calls to npn_requestread()), the browser can write individual ranges in any order, and with any number of npp_writeready() and npp_write() calls. the plug-in must allocate npbyterange objects, which the browser copies if necessary. the plug-in can free these as soon as the call returns. seekable streams are created by calling npp_newstream() with np_seek as the s
type mode. the plug-in can call npn_requestread() on streams that were not initially in np_seek mode as long as the stream is inherently seekable; npn_requestread() automatically changes the mode to np_seek. if the stream is not inherently seekable, the stream must have been put in np_seek mode initially (since the browser must cache all the stream data on disk in order to access it randomly). if ...
NPN_SetValueForURL - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary allows a plugin to change the stored information associated with a url, in particular its cookies. (while the api theoretically allows the preferred proxy for a given url to be changed, doing so does not have much meaning given how proxies are configured, and is not supported.) syntax #include <npapi.h>
typedef enum { npnurlvcookie = 501, npnurlvproxy } npnurlvariable; nperror npn_setvalueforurl(npp instance, npnurlvariable variable, const char *url, const char *value, uint32_t len); parameters this function has the following parameters: instance pointer to the current plug-in instance. variable selects the typ...
...n_setvalueforurl(npp instance, npnurlvariable variable, const char *url, const char *value, uint32_t len); parameters this function has the following parameters: instance pointer to the current plug-in instance. variable selects the
type of information to be changed. the only supported
type is npnurlvcookie. url the url for which to change information. value the new associated information for the url. note: the value may have internal null bytes and may not be null-terminated. len the length of the value buffer. returns if successful, the function returns nperr_no_error. if unsuccessful, the function returns an error code. for possible values, see error codes. description t...
NPObject - Archive of obsolete content
the browsers are expected to expose their window objects and everything reachable from it through this api. ...
... counting and ownership management in general, the functions npn_createobject(), npn_retainobject(), npn_releaseobject(), and npn_releasevariantvalue() are provided as part of this api. npobject behavior is implemented using the set of callback functions defined in npclass. syntax struct npobject { npclass *_class; uint32_t referencecount; /* * additional space may be allocated here by
types of npobjects */ }; fields _class a pointer to the npclass of which the object is a member. referencecount the reference count for the object. warning: do not manipulate the _class and referencecount fields directly; use the functions below to manipulate the object. functions npn_createobject() npn_retainobject() npn_releaseobject() npn_invoke() ...
NPStream - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary represents a stream of data either produced by the browser and consumed by the plug-in, or produced by the plug-in and consumed by the browser. syntax
typedef struct _npstream { void* pdata; /* plug-in private data */ void* ndata; /* netscape private data */ const char* url; uint32 end; uint32 lastmodified; void* notifydata; const char *headers; } npstream; fields the data structure has the following fields: plug-in-private value that the plug-in can use to store a pointer to private data associated with the instance; not modified by the browser. ndata browser-private value that can store data associated with the instance; should not be modified by the plug-in. url ...
...ify or npn_posturlnotify request. for these streams, notifydata is set to the value of the notifydata parameter to npn_geturlnotify or npn_posturlnotify. for other streams, notifydata is null. headers the response headers from the host. this field is only available if the np version is greater than or equal to npvers_has_response_headers. this field is used only for http and is null for other
types of streams. the plug-in should copy this data before making use of it. the headers include the http status line and all headers, verbatim as received from the server. lines are terminated by newline characters ("\n"), and the headers are terminated by a newline followed by null ("\n\0"). description the browser allocates and initializes the npstream object and passes it to the plug-in in as a p...
Security Controls - Archive of obsolete content
that the vulnerability is removed or mitigated. second, the system should offer only the required functionality to each authorized user, so that no one can use functions that are not necessary. this principle is known as least privilege. limiting functionality and resolving security weaknesses have a common goal: give attackers as few opportunities as possible to breach a system. there are three
types of security controls, as follows: management controls: the security controls that focus on the management of risk and the management of information system security. operational controls: the security controls that are primarily implemented and executed by people (as opposed to systems). technical controls: the security controls that are primarily implemented and executed by the system throu...
...he security controls that focus on the management of risk and the management of information system security. operational controls: the security controls that are primarily implemented and executed by people (as opposed to systems). technical controls: the security controls that are primarily implemented and executed by the system through the system's hardware, software, or firmware. all three
types of controls are necessary for robust security. for example, a security policy is a management control, but its security requirements are implemented by people (operational controls) and systems (technical controls). think of phishing attacks. an organization may have an acceptable use policy that specifies the conduct of users, including not visiting malicious websites. security controls to help...
Scratchpad - Archive of obsolete content
r if you like. code completion scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. to list autocomplete suggestions, press ctrl + space. for example, try typing d, then pressing ctrl + space. ...
... executing once you've written your code, select the code you want to run. ...
Developing cross-browser and cross-platform pages - Archive of obsolete content
rom the web author to make assumptions about what will happen with future browsers or to decide to provide future browsers a safe fallback service. it assumes that web authors are able to correctly identify browsers and browser versions in the first place... which is far from being a reliable and easy task to achieve. the browser identification approach relies on functions that check the browser
type string value and browser version string value and that search for certains characters or sub-strings in the navigator.useragent property string. once "detected", the web author then uses different functions (aka code branching) or points the user to different pages (aka site branching) or web content. site branching can be particularly dangerous as people may enter a page through a link, bookmark...
...are supported in the visiting browser. let's see a basic, simple object support detection example. function hideelement(id_attribute_value) { if (document.getelementbyid && document.getelementbyid(id_attribute_value) && document.getelementbyid(id_attribute_value).style ) { document.getelementbyid(id_attribute_value).style.visibility = "hidden"; }; } // example: // <button
type="button" onclick="hideelement('d1');">hide div</button> // <div id="d1">some text</div> these repeated calls to document.getelementbyid are not the most efficient way to check for the existence of particular objects or features in the browser's dom implementation, but they serve to illustrate clearly how object support detection works. the top-level if clause looks to see if there is support fo...
-ms-accelerator - Archive of obsolete content
true the object is a keyboard shortcut. ...
...ute 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 accesskey attribute value of "n" receives the focus. <!doc
type 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" accesskey="n" value="your name here" /> </body> </html> specifications not part of any specification. remarks this property is supported by windows 2000 and ...
-ms-content-zoom-snap-points - Archive of obsolete content
the first percentage specifies where the first snap-point will be placed. ...
... than that specified by the -ms-content-zoom-limit-min property, the value of -ms-content-zoom-limit-min is used. if any value specified is greater than that specified by the -ms-content-zoom-limit-max property, the value of -ms-content-zoom-limit-max is used. formal syntax snapinterval( <percentage>, <percentage> ) | snaplist( <percentage># ) examples this example demonstrates both
types of values for the -ms-content-zoom-snap-points property. in the first selector, the first snap-point is at 0%, and the interval is set to 100%. in the second selector, each snap-point is listed separately—100%, 200%, 300%, and so on. .snappy1 { -ms-content-zoom-snap-points: snapinterval(0%, 100%); ... } .snappy2 { -ms-content-zoom-snap-points: snaplist(100%, 200%, 300%, 400%, 500%);...
-ms-scroll-chaining - Archive of obsolete content
the -ms-scroll-chaining css property is a microsoft extension that specifies the scrolling behavior that occurs when a user hits the scroll limit during a manipulation. initial valuechainedapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation
typediscrete syntax values chained initial value. the nearest scrollable parent element begins scrolling when the user hits a scroll limit during any manipulation. no bounce effect is shown. none a bounce effect is shown when the user hits a scroll limit during any manipulation. formal syntax chained | none examples the following example illustrates the -ms-scroll-chaining property in use. in this case the image container has its -ms-scroll-chaining p...
...e nested element reaches its boundary. for more information, see html scrolling, panning and zooming sample or internet explorer 10 scrolling, panning, and zooming with touch. .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-
type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification. remarks this property only applies to touch and touchpad input. for keyboard input the scroll does not chain regardless of the –ms-scroll-chaining value, and for mouse input the scroll ...
-ms-scroll-snap-y - Archive of obsolete content
the -ms-scroll-snap-x css shorthand property is a microsoft extension that specifies values for the -ms-scroll-snap-
type and -ms-scroll-snap-points-y properties. initial valueas each of the properties of the shorthand:-ms-scroll-snap-
type: none-ms-scroll-snap-points-y: snapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-scroll-snap-
type: as specified-ms-scroll-snap-points-y: as specifiedanimation
typediscrete syntax values the -ms-scroll-snap-y shorthand property is specified as one or both of the following values, in order and separated by spaces. -ms-scroll-snap-
type the value of the -ms-scroll-snap-
type property. -ms-scroll-snap-points-y the...
...-scroll-snap-points-y: as specifiedanimation
typediscrete syntax values the -ms-scroll-snap-y shorthand property is specified as one or both of the following values, in order and separated by spaces. -ms-scroll-snap-
type the value of the -ms-scroll-snap-
type property. -ms-scroll-snap-points-y the value of the -ms-scroll-snap-points-y property. formal syntax <'-ms-scroll-snap-
type'> <'-ms-scroll-snap-points-y'> examples the -ms-scroll-snap-y property is a shorthand property. the two selectors in the following example have the same effect. .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 pro...
-ms-scrollbar-3dlight-color - Archive of obsolete content
the -ms-scrollbar-3dlight-color css property is a microsoft extension specifying the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. initial valuedepends on user agentapplies toall elementsinheritedyescomputed valueas specifiedanimation
typediscrete syntax values <color> the color of the top and left edges of the scroll box and scroll arrows of the scroll bar. formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ...
...ha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to create a style rule that sets the -ms-scrollbar-3dlight-color property for a <textarea> element. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarcolor.htm <!doc
type html> <html> <head> <title>scrollbar-3dlight-color</title> <style> .blue3dlight { -ms-scrollbar-3dlight-color: blue; scrollbar-3dlight-color: blue; /* use the standard when available. */ } </style> </head> <body> <textarea class="blue3dlight">the top and left edges of the thumb and button-face elements in the scroll bar for this element will be blue.</text...
-ms-scrollbar-darkshadow-color - Archive of obsolete content
the -ms-scrollbar-darkshadow-color css property is a microsoft extension that specifies the color of a scroll bar's gutter. initial valuethreeddarkshadowapplies toall elementsinheritedyescomputed valueas specifiedanimation
typediscrete syntax values <color> the color of the scroll bar's gutter. formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number...
...value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to create a style rule that sets the -ms-scrollbar-darkshadow-color property for a <textarea> element. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarcolor.htm <!doc
type html> <html> <head> <title>scrollbar-darkshadow-color</title> <style> .blueshadow { scrollbar-darkshadow-color: blue; } </style> </head> <body> <textarea class="blueshadow">the gutter elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification. ...
-ms-scrollbar-shadow-color - Archive of obsolete content
the -ms-scrollbar-shadow-color css property is a microsoft extension that specifies the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. initial valuethreeddarkshadowapplies toall elementsinheritedyescomputed valueas specifiedanimation
typediscrete syntax values <color> the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value>...
... ...
::-ms-check - Archive of obsolete content
this pseudo-element is supported only in internet explorer and microsoft edge. allowable properties only the following css properties can be used in a rule with ::-ms-check in its selector. other properties are ignored. ...
...ay (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input
type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input
type="checkbox" id="greencheckbox"> </form> css input, label { display: inline; } input[
type=radio]::-ms-check { border-color: red; /* this will make the border red when the button is checked. */ color: red; /* this will make the circle red when the button is checked. */ } input[
type=checkbox]::-ms-check { ...
Accessing XML children - Archive of obsolete content
can also be used to replace particular child nodes var elem1 = <foo> <bar/> </foo>; var elem2 = <red> <blue/> </red>; elem1.bar = elem2; replaces the <bar/> element with all of the content in elem2, giving: <foo> <red> <blue/> </red> <foo> xml lists many times, however, a single element will have two or more children of the same
type. in this case, accessing foo.bar will return an xml list object, of all child elements of the
type "bar". important it is your responsibility to determine whether you have an xml list or a single element when using the . operator. e4x behaves no differently when returning these properties. the xml list behaves much like an array. var element = <foo> <bar baz="1">red</bar> ...
... list = element.bar; list.length(); // returns 2 list[0]; // the first bar element list[1]; // the second bar element notice further that this list is "live" in the sense that changes made to the list are reflected back in the element that the list originally came from. list[1] = "green"; changes the xml document to read <foo> <bar baz="1">red</bar> <bar baz="2">green</bar> </foo> special
types of nodes xml objects have methods for accessing xml lists of certain common
types of nodes as well. var a = <foo> some text <bar>not text</bar> more text </foo>; var list = a.text(); list.length(); // returns 2 list[0]; // returns " some text " list[1]; // returns " more text " you can similarly access comment nodes: xml.ignorecomments = false; var a = <foo> some <!-- abc --> text </foo>; var ...
The global XML object - Archive of obsolete content
« previous the global xml object e4x-capable javascript engines put a new property on the global object. the xml object has several properties that allow you to customize parsing and serialization of e4x. xml elements will remember the settings of the xml object from the time of their creation. extending xml.proto
type xml.proto
type and xmllist.proto
type (xmllist.proto
type is actually just xml.proto
type) cannot be extended in the same conventional way as other constructors such as object. you can only define methods in xml.proto
type and not fields. to add a method to xml.proto
type, define xml.proto
type.function::methodname or xml.proto
type.function::[methodnamestring]. the following example defines the foocount() method, which returns the amount of <foo> elements in the xml: xml.
...this property tells e4x to ignore comment nodes when serializing and filtering. this means that if ignorecomments is true, the list returned by .comments() will be empty. ...
Iterator - Archive of obsolete content
nd 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.proto
type.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 instance or generator instance, it returns object itself. properties iterator.protot...
... 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 instance or generator instance, it returns object itself. properties iterator.proto
type[@@iterator] returns a function that returns iterator object. methods iterator.proto
type.next returns next item in the [property_name, property_value] format or property_name only. it throws stopiteration if there are no more items. examples iterating over properties of an object var a = { x: 10, y: 20, }; var iter = iterator(a); console.log(iter.next()); // ["x", 10] console.log(iter.next()); // ["y", 20] console.log(iter.next()); // throws stopiteration iterating over pr...
Array.unobserve() - Archive of obsolete content
rence to a function and not an anonymous function, because this reference will be used to unset the previous observer. it's useless to call array.unobserve() with an anonymous function as callback, it will not remove any observer. ...
...) { console.log(changes); } array.observe(arr, observer); ā arr.push(4); // [{
type: "splice", object: <arr>, index: 3, removed:[], addedcount: 1}] array.unobserve(arr, observer); arr.pop(); // the callback wasn't called using an anonymous function var persons = ['khalid', 'ahmed', 'mohammed']; array.observe(persons, function (changes) { console.log(changes); }); persons.shift(); // [{
type: "splice", object: <arr>, index: 0, removed: [ "khalid" ], addedcount: 0 }] array.unobserve(persons, function (changes) { console.log(changes); }); persons.push('abdullah'); // [{
type: "splice", object: <arr>, index: 2, removed: [], addedcount: 1 }] // the callback will always be called ...
ArrayBuffer.transfer() - Archive of obsolete content
e length of the memory and only copies it to a new location as-needed as opposed to the following pollyfill which always copies the whole thing to a new space of memory, but this function transfers data from one arraybuffer to another arraybuffer. ...
...st be an instance of arraybuffer'); if (length <= source.bytelength) return source.slice(0, length); var sourceview = new uint8array(source), destview = new uint8array(new arraybuffer(length)); destview.set(sourceview); return destview.buffer; }; } specifications specification status comment arraybuffer.proto
type.transfer proposal draft stage 2 draft ...
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
the debug.msupdateasynccallbackrelation function updates the relationship status between a synchronous work item and the associated asynchronous operation. syntax debug.msupdateasynccallbackrelation(relatedasyncoperationid, relation
type) parameters relatedasyncoperationid the id associated with the asynchronous operation. relation
type optional the value that specifies the relationship status. remarks the synchronous work item is typically the callback function for the asynchronous operation. ...
...operationid the id associated with the asynchronous operation. relation
type optional the value that specifies the relationship status. remarks the synchronous work item is typically the callback function for the asynchronous operation. this function may be called when an asynchronous operation is aborted, when a join operation is used, or in other scenarios. the possible values for relation
type include: debug.ms_async_callback_status_assign_delegate debug.ms_async_callback_status_join debug.ms_async_callback_status_chooseany debug.ms_async_callback_status_cancel debug.ms_async_callback_status_error for more information, see debug constants. note: some debugging tools do not display the information sent to the debugger by this function. requirement...
VBArray - Archive of obsolete content
mple the following example consists of three parts. the first part is vbscript code to create a visual basic safe array. the second part is javascript code that converts the visual basic safe array to a javascript array. both of these parts go into the <head> section of an html page. the third part is the javascript code that goes in the <body> section to run the other two parts. ...
...javascript code that goes in the <body> section to run the other two parts. <head> <script
type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(j, i) = k document.writeln(k) k = k + 1 next document.writeln("<br />") next createvbarray = a end function --> </script> <script
type="text/javascript"> <!-- function vbarraytest(vbarray){ var a = new vbarray(vbarray); var b = a.toarray(); var i; for (i = 0; i < 9; i++) { document.writeln(b[i]); } } --> </script> </head> <body> <script
type="text/javascript"> <!-- vbarraytest(createvbarray()); --> </script> </body> properties the vbarray object has no properties. methods vbarray.dimensions ret...
New in JavaScript 1.8.5 - Archive of obsolete content
the following is a changelog for javascript 1.8.5. this version was included in firefox 4. new features in javascript 1.8.5 new functions function description object.create() creates a new object with the specified proto
type object and properties. bug 492840 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.getownpropertydescriptor() returns a property descriptor for a n...
... object.freeze() freezes an object: other code can't delete or change any properties. bug 492844 object.isfrozen() determines if an object was frozen. bug 492844 array.isarray() checks if a variable is an array. bug 510537 date.proto
type.tojson() returns a json format string for a date object. function.proto
type.bind() creates a new function that, when called, itself calls this function in the context provided (with a given sequence of arguments). bug 429507 new ecmascript5 features get and set operators ...
New in JavaScript 1.8 - Archive of obsolete content
your code ... </script> another way (not recommended) to do this is to use the deprecated <script> language attribute and define it as "javascript1.8". ...
...ng the javascript version. new features in javascript 1.8 expression closures. generator expressions. allowing you to simply create generators (which were introduced in javascript 1.7). typically you would 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.proto
type.reduce() array.proto
type.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 mad...
handler.enumerate() - Archive of obsolete content
. this is bound to the handler. target the target object. return value an iterator object. description the handler.enumerate method is a trap for for...in statements. interceptions this trap can intercept these operations: property enumeration / for...in: for (var name in proxy) {...} reflect.enumerate() invariants if the following invariants are violated, the proxy will throw a
typeerror: the enumerate method must return an object. examples the following code traps for...in statements. var p = new proxy({}, { enumerate(target) { console.log('called'); return ['a', 'b', 'c'][symbol.iterator](); } }); for (var x in p) { // "called" console.log(x); // "a" } // "b" // "c" the following code violates the invariant. var...
...s for...in statements. var p = new proxy({}, { enumerate(target) { console.log('called'); return ['a', 'b', 'c'][symbol.iterator](); } }); for (var x in p) { // "called" console.log(x); // "a" } // "b" // "c" the following code violates the invariant. var p = new proxy({}, { enumerate(target) { return 1; } }); for (var x in p) {} //
typeerror is thrown note: both examples make use of the shorthand syntax for method definitions. specifications not part of any standard. ...
JSObject - Archive of obsolete content
mary the public final class netscape.javascript.jsobject extends object. java.lang.object | +----netscape.javascript.jsobject description javascript objects are wrapped in an instance of the class netscape.javascript.jsobject and passed to java. jsobject allows java to manipulate javascript objects. when a javascript object is sent to java, the runtime engine creates a java wrapper of
type jsobject; when a jsobject is sent from java to javascript, the runtime engine unwraps it to its original javascript object
type. the jsobject class provides a way to invoke javascript methods and examine javascript properties. any javascript data brought into java is converted to java data
types. when the jsobject is passed back to javascript, the object is unwrapped and can be used by javascrip...
... method summary the netscape.javascript.jsobject class has the following methods: call calls a javascript method. equals determines if two jsobject objects refer to the same instance. (what's the problem with == ?) eval evaluates a javascript expression. ...
JavaObject - Archive of obsolete content
summary core object the
type of a wrapped java object accessed from within javascript code. created by any java method which returns an object
type. in addition, you can explicitly construct a javaobject using the object's java constructor with the packages keyword: new packages.javaclass(parameterlist) javaclassis the fully-specified name of the object's java class. parameters parameterlist an optional list of parameters, specified by the constructor of the java class. description the javaobject object is an instance of a java class that is created in or passed to javascript. javaobject is a wrapper for the instance; all references to the class instance are made through the javaobject. any java data brought into javascript is converted to javascript data
types. when the java...
... properties inherits public data members from the java class of which it is an instance as properties. ...
XForms Select1 Element - Archive of obsolete content
ined items can be specified by either item (see the spec) 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 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. accesskey - 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 represent...
... 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 properties selection - see corresponding attribute incremental - see corresponding attribute
type restrictions the select1 element can be bound to a node containing simple content. the data binding restriction to simple content may be relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms model. the relaxation happens when the itemset element specifies the item value using a copy (see spec) element. this is because a copy element can be used...
XForms Submit Element - Archive of obsolete content
t of an instance document being sent to a target destination, which 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. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special submission - required reference to element submission.
type restrictions the submit element can be bound to a node containing data of any
type. actually, the submit element doesn't interact with the data in th...
... the submit will be hidden. representations the xforms submit element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul). characteristics analogous widgets are <html:input
type="submit"/> and <xul:button/> link/clickable text xforms authors can use this representation if they want to have a widget like a xhtml anchor (xhtml only). characteristics appearance attribute contains the value minimal analogue widget is <html:a onclick="form.submit();"/>. ...
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 accesskey - 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 ...
...rigger will be hidden. representations the xforms trigger element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul). characteristics analogous widgets are <html:input
type="button"/> and <xul:button/> link/clickable text xforms authors can use this representation if they want to have a widget like a xhtml anchor (xhtml only). characteristics appearance attribute contains the value minimal analogue widget is <xhtml:a/>. ...
Using XForms and PHP - Archive of obsolete content
introduction a few tips on using xforms and php together. returning xml data to either serve a page (with xforms in it) or to generate data used as instance data for xforms, the page needs to be served as xml, for example application/xhtml+xml. to do that, you need to use the header() php function: <?php header("content-
type: application/xhtml+xml; charset=utf-8"); ... ?> but remember this (quote from php documentation): remember that header() must be called before any actual output is sent, either by normal html tags, blank lines in a file, or from php. it is a very common error to read code with include(), or require(), functions, or another file access function, and have spaces or empty lines that are output before header() is called. the same problem exists when using a single...
... before any actual output is sent, either by normal html tags, blank lines in a file, or from php. it is a very common error to read code with include(), or require(), functions, or another file access function, and have spaces or empty lines that are output before header() is called. the same problem exists when using a single php/html file. parsing submitted data depending on the submission
type, you might get different data formats on the server side. to really use the power of xforms (/xml) you would probably submit xml. there is some help in getting to the raw xml on the php documentation site. how to actually parse and use the xml data depends heavily on what you want to achieve and on the php version. to get a dom document on php 4 i usually do something like this: $data = $http_ra...
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
technical (what do we follow). organizations implement internal procedural standards so they are able to operate efficiently. they may also incorporate external procedural and/or technical standards. technical standards have traditionally been pioneered through consortiums or standards bodies. the technical standards can be either public, standards-based or a proprietary de facto standard. ...
... process and forget why organizations have these processes in place. bottom line, organizations have them because they save money, time, and resources. sure, there are other reasons -– accountability, checkpoints, and scheduling, for example. the end result, however, is having a process in place that maximizes the organization's investment. other standards it is also important to follow other
types of standards across an organization. there are numerous standards organizations that affect how and why we do what we do. for example, in the accounting arena there is fasb (financial accounting standards board) and iasb (international accounting standards board). all businesses are expected and required to follow the guidelines set forth by the fasb. when auditors evaluate an organizations fina...
Anatomy of a video game - Game development
games are constantly looping through these stages, over and over, until some end condition occurs (such as winning, losing, or exiting to go to bed). not surprisingly, this pattern corresponds to how a game engine is programmed. the specifics depend on the game. some games drive this cycle by user input. imagine that you are developing a "find the differences between these two similar pictures"-
type game. these games present two images to the user; they accept their click (or touch); they interpret the input as a success, failure, pause, menu interaction, etc.; finally, they calculate an updated scene resulting from that input. the game loop is advanced by the user's input and sleeps until they provide it. this is more of a turn-based approach that doesn't demand a constant update every fram...
...nt, we can stop the main loop by telling the browser to cancel the request that corresponds to our token. window.cancelanimationframe( mygame.stopmain ); the key to programming a main loop, in javascript, is to attach it to whatever event should be driving your action and pay attention to how the different systems involved interplay. you may have multiple components driven by multiple different
types of events. this feels like unnecessary complexity but it might just be good optimization (not necessarily, of course). the problem is that you are not programming a typical main loop. in javascript, you are using the browser's main loop and you are trying to do so effectively. building a more optimized main loop in javascript ultimately, in javascript, the browser is running its own main loop ...
Game distribution - Game development
ttract. some of these take your files and host them on their server, whereas others only link to your website or embed your game on their site. such exposure may just provide promotion for your game, or if you have adverts shown beside your game (or other money making options) it may also provide monetization. web and native stores you can also upload and publish your game directly to different
types of stores, or marketplaces. to do that you'll have to prepare and package it to a build format specific for every app ecosystem you want to target it at. see marketplaces — distribution platforms for more details of what marketplace
types are available. marketplaces — distribution platforms let's see what the available options are regarding the marketplaces/stores available for different p...
...e published as free games on android, with monetization coming from in-app purchases (iaps) or ads. other stores for native mobile platforms like windows phone or blackberry are working hard to get a piece of the cake, and are way behind the competition. it can be good to submit your game there as it will be a lot easier to be noticed. if you're looking for more information about the different
types of app stores you can check the list of mobile software distribution platforms article on wikipedia. native desktop to broaden your audience you can hit the desktop ecosystem with your html5 games too — just remember all the popular aaa games that take most of the market share, and think carefully about whether this suits your strategy. to do the desktop thing properly you should support all...
Explaining basic 3D theory - Game development
l to know when you are getting started working with 3d. coordinate system 3d essentially is all about representations of shapes in a 3d space, with a coordinate system used to calculate their position. webgl uses the right-hand coordinate system — the x axis points to the right, the y axis points up, and the z axis points out of the screen, as seen in the above diagram. objects different
types of objects are built using vertices. a vertex is a point in space having its own 3d position in the coordinate system and usually some additional information that defines it. every vertex is described by these attributes: position: identifies it in a 3d space (x, y, z). color: holds an rgba value (r, g and b for the red, green, and blue channels, alpha for transparency — all values range f...
...ng is applied when the original resolution or the texture image is different from the displayed fragment — it will be minified or magnified accordingly. lighting the colors we see on the screen is a result of the light source interacting with the surface colors of the object's material. light might be absorbed or reflected. the standard phong lighting model implemented in webgl has four basic
types of lighting: diffuse: a distant directional light, like the sun. specular: a point of light, just like a light bulb in a room or a flash light. ambient: the constant light applied to everything on the scene. emissive: the light emitted directly by the object. output merging during the output manipulation stage all the fragments of the primitives from the 3d space are transformed into a ...
Building up a basic demo with Babylon.js - Game development
ould start off by: making sure you are using a modern browser with good webgl support, such as the latest firefox or chrome. creating a directory to store your experiments in. saving a copy of the latest babylon.js engine inside your directory. opening the babylon.js documentation in a separate tab — it is useful to refer to. ...
...e — again, add these lines below the previous one: box.rotation.x = -0.2; box.rotation.y = -0.4; the box looks black at the moment, because we haven't defined any material to apply to its faces. let's deal with that next. material material is that thing covering the object — the colors or texture on its surface. in our case we will use a simple blue color to paint our box. there are many
types of materials that can be used, but for now the standard one should be enough for us. add these lines below the previous ones: var boxmaterial = new babylon.standardmaterial("material", scene); boxmaterial.emissivecolor = new babylon.color3(0, 0.58, 0.86); box.material = boxmaterial; the standardmaterial takes two parameters: a name, and the scene you want to add it to. the second line defines...
Audio for Web games - Game development
ough we can use the <audio> element to deliver linear background music that doesn't change in reaction to the game environment, the web audio api is ideal for implementing a more dynamic musical experience. you may want music to change depending on whether you are trying to build suspense or encourage the player in some way. music is an important part of the gaming experience and depending on the
type of game you are making you may wish to invest significant effort into getting it right. element to deliver linear background music that doesn't change in reaction to the game environment, the web audio api is ideal for implementing a more dynamic musical experience. you may want music to change depending on whether you are trying to build suspense or encourage the player in some way. music is a...
...rt into getting it right. element to deliver linear background music that doesn't change in reaction to the game environment, the web audio api is ideal for implementing a more dynamic musical experience. you may want music to change depending on whether you are trying to build suspense or encourage the player in some way. music is an important part of the gaming experience and depending on the
type of game you are making you may wish to invest significant effort into getting it right. one way you can make your music soundtrack more dynamic is by splitting it up into component loops or tracks. this is often the way that musicians compose music anyway, and the web audio api is extremely good at keeping these parts in sync. once you have the various tracks that make up your piece you can bri...
Gecko FAQ - Gecko Redirect 1
ading style sheets, presentational html tags, etc.) and displays the formatted content on the screen. it paints the browser's content area, which is the blank area inside the browser window's chrome. formally, a layout engine defines the placement policy for a document and places content on a page. gecko's core is a very fast layout engine. gecko also offers the ability to parse various document
types (html, xml, svg, etc), advanced rendering capabilities including compositing and transformations, and support for embedded javascript and plugins. gecko is so fast and so powerful that it's being used to create the user interface of some applications ("chrome") as well. in other words, gecko will not only be displaying the document's content, but it will also be painting the scrollbars, toolbar...
...e information, see the dom in mozilla level 1 html dom 2 - most of it has already been implemented in gecko, including support for dom 2 events, the dom 2 style, and the dom2 core. dom 3 support is also planned for a future release. ...
BigInt - MDN Web Docs Glossary: Definitions of Web-related terms
in javascript, bigint is a numeric data
type that can represent integers in the arbitrary precision format. in other programming languages different numeric
types can exist, for examples: integers, floats, doubles, or bignums. ...
... in javascript, bigint is a numeric data
type that can represent integers in the arbitrary precision format. in other programming languages different numeric
types can exist, for examples: integers, floats, doubles, or bignums. ...
Boolean - MDN Web Docs Glossary: Definitions of Web-related terms
for example, in javascript, boolean conditionals are often used to decide which sections of code to execute (such as in if statements) or repeat (such as in for loops). below is some javascript pseudocode (it's not truly executable code) demonstrating this concept. ...
...execute repeatedly if the conditional is true } for (var i=0; i < 4; i++) { console.log("i print only when the boolean conditional is true"); } the boolean value is named after english mathematician george boole, who pioneered the field of mathematical logic. learn more general knowledge boolean on wikipedia technical reference the javascript global object: boolean javascript data
types and data structures ...
CORS-safelisted request header - MDN Web Docs Glossary: Definitions of Web-related terms
a cors-safelisted request header is one of the following http headers: accept, accept-language, content-language, content-
type. when containing only these headers (and values that meet the additional requirements laid out below), a requests doesn't need to send a preflight request in the context of cors. ...
...control-allow-headers header and also list the above headers there to circumvent the following additional restrictions: additional restrictions cors-safelisted headers must also fulfill the following requirements in order to be a cors-safelisted request header: for accept-language and content-language: can only have values consisting of 0-9, a-z, a-z, space or *,-.;=. for accept and content-
type: can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del). for content-
type: needs to have a mime
type of its parsed value (ignoring parameters) of either application/x-www-form-urlencoded, multipart/form-data, or text/plain. for any header: the value’s length can't be greater than 128. learn more cors-safelisted response header forbid...
DoS attack - MDN Web Docs Glossary: Definitions of Web-related terms
he program can freeze or crash, making it unavailable. a dos attack consists of various techniques to exhaust these resources and make a server or a network unavailable to legitimate users, or at least make the server perform sluggishly. there are also distributed denial of service (ddos) attacks in which a multitude of servers are used to exhaust the computing capacity of an attacked computer. ...
... a server or a network unavailable to legitimate users, or at least make the server perform sluggishly. there are also distributed denial of service (ddos) attacks in which a multitude of servers are used to exhaust the computing capacity of an attacked computer.
types of dos attack dos attacks are more of a category than a particular kind of attack. ...
Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
he program can freeze or crash, making it unavailable. a dos attack consists of various techniques to exhaust these resources and make a server or a network unavailable to legitimate users, or at least make the server perform sluggishly. there are also distributed denial of service (ddos) attacks in which a multitude of servers are used to exhaust the computing capacity of an attacked computer. ...
... a server or a network unavailable to legitimate users, or at least make the server perform sluggishly. there are also distributed denial of service (ddos) attacks in which a multitude of servers are used to exhaust the computing capacity of an attacked computer.
types of dos attack dos attacks are more of a category than a particular kind of attack. ...
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
orks and cpu resource management. in a typical ddos attack, the assailant begins by exploiting a vulnerability in one computer system and making it the ddos master. the attack master, also known as the botmaster, identifies and infects other vulnerable systems with malware. eventually, the assailant instructs the controlled machines to launch an attack against a specified target. there are two
types of ddos attacks: a network-centric attack (which overloads a service by using up bandwidth) and an application-layer attack (which overloads a service or database with application calls). the overflow of data to the target causes saturation in the target machine so that it cannot respond or responds very slowly to legitimate traffic (hence the name "denial of service"). the infected computers' o...
...viruses, or worms -- as the biggest threat to internet security. ...
Function - MDN Web Docs Glossary: Definitions of Web-related terms
at refers to the function. when a function is called, arguments are passed to the function as input, and the function can optionally return a value. a function in javascript is also an object. a function name is an identifier included as part of a function declaration or function expression. the function name's scope depends on whether the function name is a declaration or expression. ...
... a named function is a function with a function name: // function declaration function foo() {}; // named function expression (function bar() {}); // or using the ecmascript 2015 arrow notation const foo = () => {}; an inner function is a function inside another function (square in this case). ...
Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms
phases) work in javascript. however, the concept can be a little confusing at first. conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you
typed them in your code. learn more technical example one of the advantages of javascript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code. for example: function catname(name) { console.log("my cat's name is " + name); } catname("tiger"); /* the result of the code above is: "my cat's name is...
... call the function before we write it: catname("chloe"); function catname(name) { console.log("my cat's name is " + name); } /* the result of the code above is: "my cat's name is chloe" */ even though we call the function in our code first, before the function is written, the code still works. this is because of how context execution works in javascript. hoisting works well with other data
types and variables. the variables can be initialized and used before they are declared. only declarations are hoisted javascript only hoists declarations, not initializations. if a variable is declared and initialized after using it, the value will be undefined. for example: console.log(num); // returns undefined, as only declaration was hoisted, no initialization has happened at this stage var nu...
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
nt.foo. the idl attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. in other words, the idl attributes, in essence, reflect the content attributes. most of the time, idl attributes will return their values as they are really used. for example, the default
type for <input> elements is "text", so if you set input.
type="foobar", the <input> element will be of
type text (in the appearance and the behavior) but the "
type" content attribute's value will be "foobar". however, the
type idl attribute will return the string "text". idl attributes are not always strings; for example, input.maxlength is a number (a signed long). when using idl attributes, you rea...
..., so if you set input.
type="foobar", the <input> element will be of
type text (in the appearance and the behavior) but the "
type" content attribute's value will be "foobar". however, the
type idl attribute will return the string "text". idl attributes are not always strings; for example, input.maxlength is a number (a signed long). when using idl attributes, you read or set values of the desired
type, so input.maxlength is always going to return a number and when you set input.maxlength ,it wants a number. if you pass another
type, it is automatically converted to a number as specified by the standard javascript rules for
type conversion. idl attributes can reflect other
types such as unsigned long, urls, booleans, etc. unfortunately, there are no clear rules and the way idl attributes behav...
mime - MDN Web Docs Glossary: Definitions of Web-related terms
mime "multipurpose internet mail extensions" is a standard to describe documents in other forms beside ascii text, e.g. ...
... mime "multipurpose internet mail extensions" is a standard to describe documents in other forms beside ascii text, e.g. ...
Number - MDN Web Docs Glossary: Definitions of Web-related terms
in javascript, number is a numeric data
type in the double-precision 64-bit floating point format (ieee 754). in other programming languages different numeric
types exist; for example, integers, floats, doubles, or bignums. ...
... in javascript, number is a numeric data
type in the double-precision 64-bit floating point format (ieee 754). in other programming languages different numeric
types exist; for example, integers, floats, doubles, or bignums. ...
Response header - MDN Web Docs Glossary: Definitions of Web-related terms
nse. not all headers appearing in a response are response headers. for example, the content-length header is an entity header referring to the size of the body of the response message. however, these entity requests are usually called responses headers in such a context. the following shows a few response headers after a get request. ...
...r referring to the size of the body of the response message. however, these entity requests are usually called responses headers in such a context. the following shows a few response headers after a get request. ...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
look like?".) semantics in javascript in javascript, consider a function that takes a string parameter, and returns an <li> element with that string as its textcontent. would you need to look at the code to understand what the function did if it was called build('peach'), or createliwithcontent('peach')? semantics in css in css, consider styling a list with li elements representing different
types of fruits. would you know what part of the dom is being selected with div > ul > li, or .fruits__item? semantics in html in html, for example, the <h1> element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, most browser's user agent stylesheet will style an <h1> with a l...
...arkup are as follows: search engines will consider its contents as important keywords to influence the page's search rankings (see seo) screen readers can use it as a signpost to help visually impaired users navigate a page finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes suggests to the developer the
type of data that will be populated semantic naming mirrors proper custom element/component naming when approaching which markup to use, ask yourself, "what element(s) best describe/represent the data that i'm going to populate?" for example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure...
Static typing - MDN Web Docs Glossary: Definitions of Web-related terms
a statically-
typed language is a language (such as java, c, or c++) where variable
types are known at compile time. in most of these languages,
types must be expressly indicated by the programmer; in other cases (such as ocaml),
type inference allows the programmer to not indicate their variable
types. ...
... a statically-
typed language is a language (such as java, c, or c++) where variable
types are known at compile time. in most of these languages,
types must be expressly indicated by the programmer; in other cases (such as ocaml),
type inference allows the programmer to not indicate their variable
types. ...
CSS and JavaScript accessibility best practices - Learn web development
g 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 neat and tidy. you shouldn't however deviate too much from the expected visual feedback form elements receive when they are focused, which is basicall...
...he server and a page reload. this is a definite usability advantage. note: server-side validation has not been implemented in this simple demo. we've made this form validation pretty accessible too. ...
Backgrounds and borders - Learn web development
and move the star around inside the box. note: background-position is a shorthand for background-position-x and background-position-y, which allow you to set the different axis position values individually. gradient backgrounds a gradient — when used for a background — acts just like an image and is also set by using the background-image property. you can read more about the different
types of gradients and things you can do with them on the mdn page for the <gradient> data
type. a fun way to play with gradients is to use one of the many css gradient generators available on the web, such as this one. you can create a gradient then copy and paste out the source code that generates it. try some different gradients in the example below. in the two boxes respectively, we have a linear...
...the features we have discussed. each page on mdn has more examples of usage for you to play with and enhance your knowledge. in the next lesson, we will find out how the writing mode of your document interacts with your css. ...
CSS building blocks - Learn web development
this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this module looks at the cascade and inheritance, all the selector
types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more. the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. 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: ...
... your understanding of some of the most fundamental concepts of css — the cascade, specificity, and inheritance — which control how css is applied to html and how conflicts are resolved. css selectors there are a wide variety of css selectors available, allowing for fine-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...
Responsive design - Learn web development
operty 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 a separate technology — it is a term used to describe an a...
...bo heading on larger screen sizes, therefore we first create a smaller heading then use media queries to overwrite it with the larger size if we know that the user has a screen size of at least 1200px. html { font-size: 1em; } h1 { font-size: 2rem; } @media (min-width: 1200px) { h1 { font-size: 4rem; } } we have edited our responsive grid example above to also include responsive
type using the method outlined. you can see how the heading switches sizes as the layout goes to the two column version. on mobile the heading is smaller: on desktop, however, we see the larger heading size: note: see this example in action: example, source code. as this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. they ...
Supporting older browsers - Learn web development
ng to your site using older browsers. this is straightforward if you have an existing website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using. if you have no analytics or this is a brand new site, then there are sites such as statcounter that can provide statistics filtered by location. you should also consider the
type of devices and the way people use your site, for example, you may expect a higher than an average number of mobile devices. accessibility and people using assistive technology should always be considered, but for some sites that may be even more critical. in my experience, developers are often very worried about the experience of 1% of users in an old version of internet explorer, while not consi...
...e of writing, this is mostly an issue with internet explorer 10, which uses the -ms- prefix for flexbox. this also means that there are some outdated articles and tutorials in existence; this useful guide helps you check what you are looking at and can also help if you need flex support in very old browsers. the ie10 and 11 prefixed version of grid the css grid specification was initially proto
typed in internet explorer 10; this means that while ie10 and ie11 do not have modern grid support, they do have a version of grid layout that is very usable, although different to the modern specification documented on this site. the ie10 and 11 implementations is -ms- prefixed, which means you can use it for these browsers and it will be ignored by non-microsoft browsers. edge does still understand...
What are hyperlinks? - Learn web development
iginal purpose was to provide an easy way to reach, read, and navigate through text documents. since then, the web has evolved to provide access to images, videos, and binary data, but these improvements have hardly changed the three pillars. before the web, it was quite hard to access documents and move from one to another. being human-readable, urls already made things 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 li...
...er 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, there are some nuances worth considering:
types of links internal link a link between two webpages, where both webpages belong to the same website, is called an internal link. without internal lin...
What is a URL? - Learn web development
handled by the web server, it is up to the owner of the web server to carefully manage that resource and its associated url. active learning there is no active learning available yet. deeper dive basics: anatomy of a url here are some examples of urls: https://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 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 brow...
...ts the postal service you want to use, the domain name is the city or town, and the port is like the zip code; the path represents the building where your mail should be delivered; the parameters represent extra information such as the number of the apartment in the building; and, finally, the anchor represents the actual person to whom you've addressed your mail. how to use urls any url can be
typed right inside the browser's address bar to get to the resource behind it. but this is only the tip of the iceberg! the html language — which will be discussed later on — makes extensive use of urls: to create links to other documents with the <a> element; to link a document with its related resources through various elements such as <link> or <script>; to display media such as images (w...
What is a Domain Name? - Learn web development
registrar which is in charge of keeping track. for instance, every domain name under .fire is managed by amazon. finding an available domain name to find out whether a given domain name is available, go to a domain name registrar's website. most of them provide a “whois” service that tells you whether a domain name is available. alternatively, if you use a system with a built-in shell,
type a whois command into it, as shown here for mozilla.org: $ whois mozilla.org domain name:mozilla.org domain id: d1409563-lror creation date: 1998-01-24t05:00:00z updated date: 2013-12-08t01:16:57z registry expiry date: 2015-01-23t05:00:00z sponsoring registrar:markmonitor inc. (r37-lror) sponsoring registrar iana id: 292 whois server: referral url: domain status: clientdeleteprohibited domain st...
...ormation for some time before it is automatically invalidated and then refreshed (the dns server queries an authoritative server and fetches the updated information from it). thus, it takes some time for dns servers that know about this domain name to get the up-to-date information. how does a dns request work? as we already saw, when you want to display a webpage in your browser it's easier to
type a domain name than an ip address. let's take a look at the process:
type mozilla.org in your browser's location bar. your browser asks your computer if it already recognizes the ip address identified by this domain name (using a local dns cache). if it does, the name is translated to the ip address and the browser negotiates contents with the web server. end of story. if your computer does n...
CSS basics - Learn web development
h declaration from the next one. to modify multiple property values in one ruleset, write them separated by semicolons, like this: p { color: red; width: 500px; border: 1px solid black; } selecting multiple elements you can also select multiple elements and apply a single ruleset to all of them. separate multiple selectors by commas. ...
...multiple property values in one ruleset, write them separated by semicolons, like this: p { color: red; width: 500px; border: 1px solid black; } selecting multiple elements you can also select multiple elements and apply a single ruleset to all of them. separate multiple selectors by commas. for example: p, li, h1 { color: red; } different
types of selectors there are many different
types of selectors. the examples above use element selectors, which select all elements of a given
type. but we can make more specific selections as well. here are some of the more common
types of selectors: selector name what does it select example element selector (sometimes called a tag or
type selector) all html elements of the specified
type. p selects <p> ...
Dealing with files - Learn web development
, inside your test-site folder. scripts folder: this folder will contain all the javascript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). create a folder called scripts, inside your test-site folder. note: on windows computers, you might have trouble seeing the file names, because windows has an option called hide extensions for known file
types turned on by default. generally, you can turn this off by going to windows explorer, selecting the folder options... option, unchecking the hide extensions for known file
types check box, then clicking ok. for more specific information covering your version of windows, you can search on the web. file paths to make files talk to one another, you have to provide a file path between them — ba...
... of html into our index.html file, and make it display the image you chose in the article "what will your website look like?" copy the image you chose earlier into your images folder. open up your index.html file, and insert the following code into the file exactly as shown. don't worry about what it all means for now — we'll look at the structures in more detail later in the series. <!doc
type html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="" alt="my test image"> </body> </html> the line <img src="" alt="my test image"> is the html code that inserts an image into the page. we need to tell the html where the image is. the image is inside the images directory, which is in the same directory as index.html. to walk dow...
JavaScript basics - Learn web development
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 specia...
...variable === 3); "does-not-equal" gives basically the same result with different syntax. here we are testing "is myvariable not equal to 3". this returns false because myvariable is equal to 3: let myvariable = 3; myvariable !== 3; there are a lot more operators to explore, but this is enough for now. see expressions and operators for a complete list. note: mixing data
types can lead to some strange results when performing calculations. be careful that you are referring to your variables correctly, and getting the results you expect. for example, enter '35' + '25' into your console. why don't you get the result you expected? because the quote marks turn the numbers into strings, so you've ended up concatenating strings rather than adding numbers. if you enter, 35 + ...
Debugging HTML - Learn web development
led). and html's element syntax is arguably a lot easier to understand than a "real programming language" like rust, javascript, or python. the way that browsers parse html is a lot more permissive than how programming languages are run, which is both a good and a bad thing. permissive code so what do we mean by permissive? well, generally when you do something wrong in code, there are two main
types of error that you'll come across: syntax errors: these are spelling errors in your code that actually cause the program not to run, like the rust error shown above. these are usually easy to fix as long as you are familiar with the language's syntax and know what the error messages mean. logic errors: these are errors where the syntax is actually correct, but the code is not what you intende...
...er error will also get rid of other error messages — several errors can often be caused by a single problem, in a domino effect. you will know when all your errors are fixed when you see the following banner in your output: summary so there we have it, an introduction to debugging html, which should give you some useful skills to count on when you start to debug css, javascript, and other
types of code later on in your career. this also marks the end of the introduction to html module learning articles — now you can go on to testing yourself with our assessments: the first one is linked below. previous overview: introduction to html next in this module getting started with html what’s in the head? metadata in html html text fundamentals creating hyperlinks advanced...
Multimedia and Embedding - Learn web development
back! note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles which will take you through all the fundamentals of embedding multimedia on webpages. images in html there are other
types of multimedia to consider, but it is logical to start with the humble <img> element used to embed a simple image in a webpage. in this article we'll look at how to use it in more depth, including basics, annotating it with captions using <figure>, and how it relates to css background images. video and audio content next, we'll look at how to use the html5 <video> and <audio> elements to embed ...
...embed video and audio on our pages, including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers. from <object> to <iframe> — other embedding technologies at this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content
types into your webpages: the <iframe>, <embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology on its way out, but which you may still see semi-regularly. adding vector graphics to the web vector graphics can be very useful in certain situations. unlike regular formats like png/jpg, they don't distor...
HTML table basics - Learn web development
cells in a column for styling purposes. prerequisites: the basics of html (see introduction to html). objective: to gain basic familiarity with html tables. what is a table ? a table is a structured set of data made up of rows and columns (tabular data). a table allows you to quickly and easily look up values that indicate some kind of connection between different
types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool. tables are very commonly used in human society, and have been for a long time, as evidenced by this us census document from 1800: it is therefore no wonder that the creators of html provided a means by which to structure and present tabular data on the web. how does a table wor...
...our first cell. i'm your second cell. i'm your third cell. i'm your fourth cell. second row, first cell. cell 2. cell 3. cell 4. note: you can also find this on github as simple-table.html (see it live also). adding headers with <th> elements now let's turn our attention to table headers — special cells that go at the start of a row or column and define the
type of data that row or column contains (as an example, see the "person" and "age" cells in the first example shown in this article). to illustrate why they are useful, have a look at the following table example. first the source code: <table> <tr> <td> </td> <td>knocky</td> <td>flor</td> <td>ella</td> <td>juan</td> </tr> <tr> <td>breed</td> <td>jack russell</t...
Test your skills: Loops - Learn web development
finds the name, outputs the name and phone number into the paragraph (para) and then exits the loop before it has run its course. you are given three variables to begin with: i — starts off with a value of 0; intended to be used as an iterator. name — contains a name to search for para — contains a reference to a paragraph, which will be used to report the results. you should use a
type of loop that you've not used in the previous task. download the starting point for this task to work in your own editor or in an online editor. loops 3 in this final task, you are provided with the following: i — starts off with a value of 500; intended to be used as an iterator. para — contains a reference to a paragraph, which will be used to report the results. isprime() — a fu...
...prime number, and false if not. you need to use a loop to go through the numbers 2 to 500 backwards (1 is not counted as a prime number), and run the provided isprime() function on them. for each number that isn't a prime number, continue on to the next loop iteration. for each one that is a prime number, add it to the paragraph's textcontent along with some kind of separator. you should use a
type of loop that you've not used in the previous two tasks. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle...
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. ...
...list of names. in programming, loops perform this job very well. here we will look at loop structures in javascript. functions — reusable blocks of code another essential concept in coding is functions. functions allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to
type out the same code multiple times. in this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define functions, scope, and parameters. build your own function with most of the essential theory dealt with previously, this article provides a practical experience. here you'll get some practice with building up your own custom function. along the way,...
Test your skills: Object-oriented JavaScript - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...on at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). oojs 1 in this task we provide you with a constructor. we want you to: add a new method to the shape class's proto
type, calcperimeter(), which calculates its perimeter (the length of the shape's outer edge) and logs the result to the console. create a new instance of the shape class called square. give it a name of square and a sidelength of 5. call your calcperimeter() method on the instance, to see whether it logs the calculation result to the browser devtools' console as expected. create a new instance of s...
Routing in Ember - Learn web development
ute index ember generate route completed ember generate route active the second and third commands should have not only generated new files, but also updated an existing file, app/router.js. it contains the following contents: import emberrouter from '@ember/routing/router'; import config from './config/environment'; export default class router extends emberrouter { location = config.location
type; rooturl = config.rooturl; } router.map(function() { this.route('completed'); this.route('active'); }); the highlighted lines were added when the 2nd and 3rd commands above were run. router.js behaves as a "sitemap" for developers to be able to quickly see how the entire app is structured. it also tells ember how to interact with your route, such as when loading arbitrary data, handling...
... vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores
typescript support in svelte deployment and next steps ...
Working with Svelte stores - Learn web development
s. we also saw how to auto-subscribe to stores to seamlessly integrate them with the svelte reactivity system. then we saw how to implement our own store from scratch, and also how to extend svelte's writable store to persist data to web storage. at the end we had a look at using the svelte transition directive to implement animations on dom elements. in the next article we will learn how add
typescript support to our svelte application. to take advantage of all its features, we will also port our entire application to
typescript. 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...
... vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores
typescript support in svelte deployment and next steps ...
Using Vue computed properties - Learn web development
data in any fashion, so the number of completed items does not change. tracking changes to "done" we can use events to capture the checkbox update and manage our list accordingly. since we're not relying on a button press to trigger the change, we can attach a @change event handler to each checkbox instead of using v-model. update the <input> element in todoitem.vue to look like this. <input
type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> since all we need to do is emit that the checkbox was checked, we can include the $emit() inline. in app.vue, add a new method called updatedonestatus(), below your addtodo() method. this method should take one parameter: the todo item id. we want to find the item with the matching id and update...
... vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores
typescript support in svelte deployment and next steps ...
Cross browser testing - Learn web development
this module focuses on testing web projects across different browsers. we look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different
types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here. guides introduction to cross browser testing this ...
...tarted prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here. guides introduction to cross browser testing this article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common
types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" strategies for carrying out testing next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual ...
Accessibility Features in Firefox
lps keyboard users by putting all of the browsed documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation within the entire windows os much simpler. both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which can be
typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances this even further by allowing custom searches from the command line such as "word punditry" to look up the word "punditry" in an online dictionary. these smart keywords can be setup via the context menu for the search field on the desired website. integrated web search via ctrl+k is much faster to use than first ...
...bility extension may be installed on top of firefox, allowing keyboard access to document structure. the find bar allows for quick navigation to links and text searching without opening a separate dialog -- this allows more convenient use by screen magnification users because there is a single point of regard for the search. it also assists users of input aids because there are far fewer keys to
type to get the desired location. for example, it is possible to navigate to the desired link by pressing 2 letter keys rather than tabbing through many links to get there. caret browsing allows you to move through web content one letter a time. you can even select web content and copy it to the clipboard. -- all with the keyboard detailed advanced javascript control: mozilla gives you the ability t...
CSUN Firefox Materials
keyboard support in the industry via gok, the gnome onscreen keyboard. basic screen reader accessibility is available via gnopernicus or the fire vox extension. keyboard support "mozilla firefox is a web-browser with superior keyboard support. " - alan cantor, cantor access consulting (http://www.cantoraccess.com) firefox includes keyboard access to all of its amazing features: find as you
type allows for quick navigation to links and text searching without opening a separate dialog -- this allows more convenient use by screen magnification users because there is a single point of regard for the search. it also assists users of input aids because there are far fewer keys to
type to get the desired location. for example, it is possible to navigate to the desired link by pressing 2 letter...
...s keyboard users by putting all of the browsed documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation within the entire windows os much simpler. both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which can be
typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances this even further by allowing custom searches from the command line such as "word punditry" to look up the word "punditry" in an online dictionary. these smart keywords can be setup via the context menu for the search field on the desired website. integrated web search via ctrl+k is much faster to use than first...
Mozillaās UAAG evaluation report
(p2) vg html 4.01: vg css 1: vg css 2: vg dom 1.0: vg guideline 9. provide navigation mechanisms. checkpoint title status notes/plans 9.1 provide content focus. (p1) c provides a content focus 9.2 provide user interface...
...links, similar to the way opera does it. 10.4 highlight special elements. (p2) g use system colors by default (classic theme) underlines links by default does not have ui to highlight non-link and non-form elements that have event handlers can have user css for user styling of elements with event handlers 10.5 outline view. (p2) p dom inspector provides a
type of outline view, although it is not intended for end users page info (ctrl+i) gives lists of links, media, forms/elements can use a user style sheet to implement an outline bug 127030 has been filed for an outline view. 10.6 provide link information. (p3) g only uses color to indicate whether a link has been visted by default context menu properties provides link in...
Theme concepts
in one package, such as including a theme to complement an extension. you can, however, programmatically include a theme in an extension using the theme api. see dynamic themes. defining a theme to create a theme (in this example a simple, single image theme): create a folder in a suitable location on your computer. ...
... single image theme): create a folder in a suitable location on your computer. add the theme image file to the folder: <mytheme> <your_header_image>.<
type> create a file called manifest.json in the folder and edit its content as follows: { "manifest_version": 2, "version": "1.0", "name": "<your_theme_name>", "theme": { "images": { "theme_frame": "<your_header_image>.<
type>" }, "colors": { "frame": "#ffffff", "tab_background_text": "#000" } } } where: "frame": is the heading area background color for your theme. "tab_background_text": the color of the text in the heading area. package your theme and submit it to amo, following these instructions. themes can be submitted to amo for hosting or for self-distribution. stat...
Add-ons
add-ons allow developers to extend and modify the functionality of firefox. they are written using standard web technologies - javascript, html, and css - plus some dedicated javascript apis. among other things, an add-on could: change the appearance or content of particular websites modify the firefox user interface add new features to firefox there are several
types of add-ons, but the most common
type are extensions. developing extensions in the past, there were several toolsets for developing firefox extensions, but as of november 2017, extensions must be built using webextensions apis. other toolsets, such as overlay add-ons, bootstrapped add-ons, and the add-on sdk, are no longer supported. extensions written using webextensions apis for firefox are designed to be cross-brows...
...or users to discover them. by uploading your add-on to amo, you can participate in our community of users and creators and find an audience for your add-on. you are not required to list your add-on on amo, but your add-on must be signed by mozilla else users will not be able to install it. for an overview for the process of publishing your add-on see signing and distributing your add-on. other
types of add-ons in addition to extensions, there are a few other add-on
types that allow users to customize firefox. those add-ons include: user dictionaries let you spell-check in different languages. language packs let you have more languages available for the user interface of firefox. ...
Adding a new CSS property
ond to this concept, or inheritance won't work as described by the specification. so first, you need to add a member variable (or variables) to the chosen style struct in nsstylestruct.h and fix the default constructor and the copy constructor of that struct in nsstylestruct.cpp. if this variable needs to be a tagged union, use nsstylecoord. but don't use nsstylecoord if you only need a single
type that nsstylecoord provides. the default constructor must initialize the variable to match the initial value of the property, as described in the "initial value:" line in the specification's definition of the property. you then need to add code to nsrulenode::compute*data (where the * is for the style struct) to transform a specified value of the property into a computed value of the property. ...
...create the simplest structure of primitive values that will produce the right string. (we should also make this part of adding properties much more automated and make the code smaller.) animation if the existing animation behaviors in nsstyleanimation aren't sufficient for how this new property is interpolated (as its specification should describe), then you'll need to implement a new behavior
type in nsstyleanimation and reference it from nscssproplist.h. this should probably be in a separate patch from the basic addition of the property. finishing up then you'll need to rebuild and run the mochitests in layout/style (./mach mochitest -f plain layout/style/). if you've done everything right, they should pass; if they don't, you need to fix something. then you should get review on the ...
Continuous Integration
this document will help you understand all the pieces that comprise mozilla's continuous integration systems. taskcluster and treeherder taskcluster, mozilla's continuous integration (ci) system picks up changes pushed to hg. taskcluster generate binary builds for firefox and firefox for android across a variety of operating sytems. after the builds are completed, they are used to run a series of correctness and performance tests. ...
... empowered to take one of several actions, including backing out a patch which caused the problem and closing the tree (i.e., preventing any additional commits). results in treeherder are ordered by mercurial pushes. each taskcluster job is represented by a colored label; green means a job has succeeded, while other colors represent different kinds of problems. the label text indicates the job
type. for a full list of job
types, see the help menu in treeherder's upper-right corner. below is a list of the most common. builds b - normal build jobs; these jobs perform compilation and some compiled-code tests (e.g., 'make check'). be - b2g build jobs for engineering builds; user builds are denoted with b, the same as for desktop and android builds. n and ne - nightly build jobs; these j...
Creating MozSearch plugins
h plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url
type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" /> <url
type="text/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/</s...
...this is actually the preferred way to do things whe...
Debugging Frame Reflow
d, saving stdout to a file. on mac this is accomplished with: $ env dyld_library_path="`pwd`/obj-ff-dbg/dist/nightlydebug.app/contents/macos" \ ./obj-ff-dbg/dist/nightlydebug.app/contents/macos/firefox-bin > logfile.txt after loading your testcase, the log file will contain the promised information. ...
...ath="`pwd`/obj-ff-dbg/dist/nightlydebug.app/contents/macos" \ ./obj-ff-dbg/dist/nightlydebug.app/contents/macos/firefox-bin > logfile.txt after loading your testcase, the log file will contain the promised information. ...
Configuring Build Options
path: export mozconfig=$home/mozilla/mozconfig-firefox calling the file .mozconfig (with a leading dot) is also supported, but this is not recommended because it may make the file harder to find. this will also help when troubleshooting because people will want to know which build options you have selected and will assume that you have put them in your mozconfig file. mozconfig contains two
types of options: options prefixed with mk_add_options are passed to client.mk. the most important of these is moz_objdir, which controls where your application gets built (also known as the object directory). options prefixed with ac_add_options are passed to configure, and affect the build process. building with an objdir this means that the source code and object files are not intermingled ...
...xt2,-skipext3 there are many optional pieces of code that live in extensions/. many of these extensions are now considered an integral part of the browsing experience. there is a default list of extensions for the suite, and each app-specific mozconfig specifies a different default set. some extensions are not compatible with all apps, for example: cookie is not compatible with thunderbird
typeaheadfind is not compatible with any toolkit app (firefox, thunderbird) unless you know which extensions are compatible with which apps, do not use the --enable-extensions option; the build system will automatically select the proper default set of extensions. tests ac_add_options --disable-tests by default, many auxiliary test applications are built, which can help debug and patch the...
Commenting IDL for better documentation
nd to the point. writers will expand upon your documentation if necessary. keep in mind that people for whom english is not their native language will be reading your comments (as well as the generated documentation), so try to avoid slang and abbreviations when possible. if possible, avoid putting comments in the middle of the definitions of apis. if an interface is used as a parameter or as the
type of the value returned by a method, please use the full name of the interface in the description of the method. this will help the tools generate proper links to help make the documentation easier to read and browse through. special commands you can use special commands in your doxygen comments; the ones listed below are interpreted by our tools. using these will help generate much higher quality...
... nsicookiefan { // cookie flavor constants /** * simple sugar cookie. */ const integer cookie_flavor_sugar = 1; /** * chocolate chip cookie. */ const integer cookie_flavor_chocolate_chip = 2; /** * peanut butter cookie. */ const integer cookie_flavor_peanut_butter = 3; /** * chocolate cookie with chocolate chips. */ const integer cookie_flavor_double_chocolate = 4; /** * an unknown
type of cookie. */ const integer cookie_flavor_other = 0; // yumminess constants /** * the cookie is disgusting. */ const integer cookie_not_yummy = 1; /** * the cookie is good but not awesome. */ const integer cookie_sort_of_yummy = 2; /** * the cookie is really, really yummy. */ const integer cookie_extremely_yummy = 3; /** * omg this is the best cookie evar!1!!1. */ const integer cook...
Obsolete Build Caveats and Tips
do this, since that code is very obsolete. this note below seems redundant as this is true by default https://msdn.microsoft.com/en-us/library/dh8che7s%28v=vs.110%29.aspx note: starting with gecko 7.0, you should no longer include "-zc:wchar_t-" in the command line when building on windows. if you're using visual studio, go to project properties > c/c++ > language > treat wchar_t as built-in
type and set it to "yes". from source_code/mercurial mozilla-2.0 (firefox 4.0) code for the firefox 4.0 (gecko 2.0) release lives in releases/mozilla-2.0. to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-2.0/ 20src cd 20src mozilla-1.
...s), you want to build something other than firefox, or you want to build pre-gecko 5.0 source. if you are building mozilla source code from before firefox 5, then you must first select the mozilla application that you want to build (see below), and you will probably also need to set at least some of the other basic configuration options (such as whether to build a debug build or not) to get the
type of build that you need. if you are building from an older project branch that still uses cvs, you will need to set moz_co_project to the appropriate value or values, using a comma-separated list, such as "mk_add_options moz_co_project=browser,mail,calendar,suite,xulrunner". this setting is ignored by most mozilla project branches, which now use mercurial instead of cvs for source control. ...
SVG Guidelines
r metadata, standard compliant metadata also exists. typical examples of this are <title> and <desc> tags. although this kind of data is supported by the browser, it can only be displayed when the svg is opened in a new tab. plus, in most of the cases, the filename is quite descriptive so it's recommended to remove that kind of metadata since it doesn't bring much value. you shouldn't include doc
types in your svgs either; they are a source of many issues, and the svg wg recommends not to include them. see svg authoring guidelines. avoid the use of cdata sections cdata sections are used to avoid parsing some text as html. most of time, cdata isn't needed, for example, the content in <style> tags doesn't need to be wrapped in a cdata section as the content inside the tag is already correctly ...
...svg grouping to avoid duplicating those attributes avoid introducing variants of the same file (color/style variants), and use sprites instead (with class names) default style values there's usually no need to set the default style value unless you're overriding a style. here are some commonly seen examples: style="display: none;" on <defs> elements (a <defs> element is hidden by default)
type="text/css" on <style> elements stroke: none or stroke-width: 0 svg grouping style grouping group similarly styled shapes under one <g> tag; this avoids having to set the same class/styles on many shapes. avoid excessive grouping editors can sometimes do excessive grouping while exporting svgs. this is due to the way editors work. nested groups avoid multiple-level nesting of groups, thes...
Message manager overview
also called the parent process, runs the browser ui (chrome) code and code inserted by extensions one or more content processes, also called child processes. these processes run web content. message managers are designed to enable chrome-privileged javascript code in one process to communicate with chrome-privileged javascript code in a different process. this article describes the different
types of message manager, how to access them, and at a high level, what sorts of things you can use them for. at the top level, there are two different sorts of message managers: frame message managers: these enable chrome process code to load a script into a browser frame (essentially, a single browser tab) in the content process. these scripts are called frame scripts, and as the name suggests,...
... this usage is deprecated because the add-on sdk uses "content script" to refer to a similar but different kind of script. so fundamentally, frame message managers enable chrome code to: load a script into a frame (essentially, a single browser tab) in the content process. these scripts are called "frame scripts". communicate with frame scripts using message-passing apis there are various
types of frame message managers, as depicted in this diagram: this diagram shows the setup when there are 2 browser windows open, one with 2 tabs open and one with 1 tab open. chrome process in the chrome process, there's a hierarchy of frame message managers: the global frame message manager, window message managers, and browser message managers. global frame message manager descripti...
Performance
ript evaluation. delaying the script registration until the session is restored my provide some middle ground for some addons. it does not provide the same memory footprint reductions but it improves application startup. beam down information in advance to avoid synchronous calls to the parent bad: // processscript.js function contentpolicy() { // ... ...
...emory footprint reductions but it improves application startup. beam down information in advance to avoid synchronous calls to the parent bad: // processscript.js function contentpolicy() { // ... ...
HTMLIFrameElement.getScreenshot()
will be cropped if necessary but will not be distorted vertically or horizontally. note: getscreenshot() waits for the event loop to go idle before it takes the screenshot. it won't wait more than 2000ms (this delay is defined by the gecko dom.browserelement.maxscreenshotdelayms preference). syntax var instanceofdomrequest = instanceofhtmliframeelement.getscreenshot(maxwidth, maxheight, mime
type); returns a domrequest for handling the screenshot request. its request.onsuccess handler handles the success case (the screenshot is contained in request.result as a blob object), and its request.onerror handler handles the failure case. parameters maxwidth a number representing the maximum width of the screenshot in device pixels. maxheight a number representing the maximum height of t...
...g the screenshot request. its request.onsuccess handler handles the success case (the screenshot is contained in request.result as a blob object), and its request.onerror handler handles the failure case. parameters maxwidth a number representing the maximum width of the screenshot in device pixels. maxheight a number representing the maximum height of the screenshot in device pixels. mime
type optional a mime
type specifying the format of the image to be returned; if not specified, the default used is image/jpeg. use image/png to capture the alpha channel of the rendered result by returning a png-format image. this lets you get a transparent background for the content <iframe>. examples var browser = document.queryselector('iframe'); var request = browser.getscreenshot(100, 100); ...
mozbrowsercontextmenu
nd the behavior may change in the future. the mozbrowsercontextmenu event is fired when the user tried to access a context menu over a browser <iframe>. this event can be used to control what will appear in the menu. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property
type description target read only eventtarget the browser iframe
type read only domstring the
type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details...
...tring representing the method of a form, in the case of a form context menu. name a domstring representing the name of a form, in the case of a form context menu. the menu object an object representing a custom menu defined via <menu> / <menuitem> elements and pointed to via a contextmenu attribute on the dom element clicked on, which contains the menu's id. its properties are as follows:
type a domstring representing the
type of context menu displayed. it can be menu (a full menu) or menuitem (a single menu item.) label a domstring equal to the label attribute of the dom node the context menu is accessed on. icon the menu item's icon, if the context menu being accessed is a menu item. id the menu item's id, if the context menu being accessed is a menu item. this is passed to th...
ChromeWorker
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. summary if you're developing privileged code, and would like to create a worker that can use js-c
types to perform calls to native code, 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-c
types via a global c
types object available in the global scope of the worker. examples of chromeworker's using js-c
types are availabe on github and are linked to from the see also section below. to use a postmessage with...
...orker from javascript code modules. see using workers in javascript code modules for details. you can use chromeworker modules in chromeworkers. see using web workers for examples and details. see also using web workers using workers in javascript code modules worker sharedworker web workers specification workerglobalscope github :: chromeworker - a fully working demo addon using js-c
types from a chrome worker. uses winapi example. promiseworker github :: promiseworker - shows how to uses promises as an twist on postmessage feature of chromeworker ...
overflow-clip-box
low-clip-box-block properties. ...
... content-box this keyword makes the clipping be related to the content box. ...
Embedding the editor
embedded directly in the native application; this is equivalent to embedding the browser via nsiwebbrowser, but instead having an editable document. the composer chrome (toolbars etc) may be implemented by the embedder using native widgets, or using some amount of xul. that chrome needs to be configurable - dockable floating toolbars, toolbar shared between composer widgets, or 1 per widget. this
type of embedding requires that the composer code is agnostic to where its ui is coming from; communication between the core editor and the ui needs to go through one or more interfaces that insulate the editor from its host application. (the current nseditorshell makes assumptions about the hosting xul document, which need to be broken.) composer embedded in a web page (<htmlarea>) ie 5 supports the ...
...s that insulate the editor from its host application. (the current nseditorshell makes assumptions about the hosting xul document, which need to be broken.) composer embedded in a web page (<htmlarea>) ie 5 supports the <htmlarea> element; if mozilla is to support something similar, editor needs to be embeddable to the extent that this can be done. it is likely that we'd use xbl to implement this
type of widget, as is the plan for other form controls. as is the case for composer embedded in a native application, there is a requirement here that the composer ui be configurable, such that it can be displayed either as a toolbar at the top of the <htmlarea>, a floating palette, or a top-level toolbar. current problems the current composer architecture was created while other parts of mozilla were...
How to add a build-time test
tatus and don't print the string "fail" (bonus points for printing "pass" :) ) write the test so that you expect it to pass on all platforms, since if the test fails, the tree will go orange (once we've set this up - see bug 352240 for status). for example, to add an xpcshell test to a module, do the following: copy tools/test-harness/xpcshell-simple/example to yourmoduledir/tests_
type, wheretests_
type is something that describes your tests. you can of course use unit or test if you're not feeling creative. in <tt>yourmoduledir/tests_
type/makefile.in</tt> change depth, module, and xpcshell_tests appropriately: depth should be a relative path pointing to <tt>mozilla/</tt>, e.g. if you're in <tt>netwerk/test</tt>, set depth = ../.. module should be defined to test_yourm...
...ule, and xpcshell_tests appropriately: depth should be a relative path pointing to <tt>mozilla/</tt>, e.g. if you're in <tt>netwerk/test</tt>, set depth = ../.. module should be defined to test_yourmodule or just yourmodule -- either will work fine. xpcshell_tests be a list of subdirectories of the current directory which contain xpcshell tests. you can of course just use the onetests_
type directory here, but if you want to subdivide your tests by functionality, separate directories is the way to go. reference the test dir in a parent makefile (<tt>yourmoduledir/makefile.in</tt>): ifdef enable_tests dirs += tests_
type endif (optional, but recommended) add the new makefile to allmakefiles.sh (todo: need more details about this) reconfigure (e.g. with <tt>make -f client.
Internationalized Domain Names (IDN) Support in Mozilla Browsers
paration of internationalized strings ("stringprep")). ascii-compatible encoding (ace) the next step is to convert the 8-bit characters in unicode to 7-bit ones using only restricted ascii characters. during the discussion phase of the idn protocols development, there were some competing ascii-compatible encoding (ace) schemes proposed but an agreement was reached eventually to standardize on a
type of ace called "punycode". this is defined in rfc 3492 (punycode: a bootstring encoding of unicode for internationalized domain names in applications (idna)). the punycode proposal uses only restricted ascii characters and numbers (a-z0-9) and a hyphen (-). it was shown to be language independent, superior in compression, compact in code size, round-trip safe, and superior for encoding chinese/ja...
...ently use the ascii-compatible encoding known as race or row-based ascii compatible encoding, which was not accepted as a standard by ietf. if you find idn test sites under the .com and .net top domains, and if you cannot successfully access these sites, you can use the following workaround until the conversion to punycode is completed for these top domains: using netscape 7.1 or mozilla 1.4:
type about:config into the location/url bar. this will list all the preferences for your current profile. these preferences can be modified or new ones can be created without quitting the browser using the steps described below. create a new preference item using the menu new > string via a right-mouse click. the name of the preference is: network.idn_prefix. the value should be "bq--". this will cha...
Add-on Manager
many functions in the add-on manager interface operate asynchronously returning results through callbacks passed to the functions. ...
...you can pass the url to a page in the add-on manager tab to load that page. read more about it at this topic here on mozilla add-ons forum :: how to open an add-on's preference panel? and also here mdn :: inline options - opening inline options in add-on manager. these pages show you how to load pages such as services page etc. ...
Add-on Repository
issearching boolean true if a search is currently in progress; otherwise false. methods getrecommendedurl() returns the url that can be visited to see recommended add-ons. string getrecommendedurl(); parameters none. return value an url indicating the repository's page of reco...
...callback the searchcallback callback to which results will be delivered. searchaddons() begins a search for add-ons in this repository. results will be passed to the given callback. string searchaddons( in string searchterms, in integer maxresults, in searchcallback callback ); parameters searchterms the search terms to pass to amo. the results will match what you would get if you
typed this string in the search box on the amo web site. maxresults the maximum number of results to return. callback the searchcallback callback to pass results to. ...
Dict.jsm
ource://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 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. method ove...
... items iterator returns an iterator over all of the items in the dictionary; each item is returned as a pair (a two-element array) with the first element being the key and the second being the value. note: the order in which items are returned is arbitrary, and may change without notice. in a...
NetUtil.jsm
methods asynccopy() the asynccopy() method performs a simple asynchronous copy of data from a source input stream to a destination output stream. both streams are automatically closed when the copy operation is completed. nsiasyncstreamcopier asynccopy( asource, asink, acallback ); paramete...
...eption with the message "must have a source and a sink" if either asource or asink is null. example this example writes a string to a file; it comes from the test suite for the netutil module. var file = cc["@mozilla.org/file/directory_service;1"]. getservice(ci.nsiproperties). get("tmpd", ci.nsifile); file.append("test-file.tmp"); file.createunique(ci.nsifile.normal_file_
type, 0666); // then, we need an output stream to our output file. var ostream = cc["@mozilla.org/network/file-output-stream;1"]. createinstance(ci.nsifileoutputstream); ostream.init(file, -1, -1, 0); // finally, we need an input stream to take data from. const test_data = "this is a test string"; let istream = cc["@mozilla.org/io/string-input-stream;1"]. createinstance(c...
PopupNotifications.jsm
s. note: this code module is imported by firefox chrome windows, so you don't have to do it yourself in most extensions. method overview void locationchange(); notification getnotification(id, browser); void remove(notification); notification show(browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute
type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not. methods locationchange() the consumer can call this method to let the popup notification module know that the current browser's location has changed. this lets the notification service update the active notifications as appropriate. note: you shouldn't need ...
...up notification, displaying it to the user. notification show( browser, id, message, anchorid, mainaction, secondaryactions, options ); parameters browser the xul <xul:browser> element with which the notification is associated. this must not be null; you can, however, simply specify gbrowser.selectedbrowser to associate it with the current tab. id a unique id string for the
type of notification being displayed. for example, geolocation related notifications have the id "geolocation". only one notification for each id can be visible at a time; if one with the specified id already exists, it will be replaced with the newer notification. message a string to display in the notification panel. anchorid the id of the element that should serve as the anchor for the notifica...
Task.jsm
rguments, and the yield operator returns the return value of the function. this comes in handy when iterating over function lists where some items have been converted to tasks and some not. if you specify anything else, the yield operator returns exactly what you specified. method overview function async(atask); promise spawn(atask); properties attribute
type description result read only constructor constructs a special exception that, when thrown inside a legacy generator function, allows the associated task to be resolved with a specific value. example: task.spawn( function() { yield ... ; throw new task.result("value"); } note: if you want to exit early from a generator function, without returning a value for the task, ...
... let greeter = { message: "hello, name!", greet: task.async(function* (name) { return yield sendgreeting(this.message.replace(/name/, name)); }) }; while maintaining identical semantics: greeter.greet("mitchell").then((reply) => { ... }); // behaves the same spawn() creates and starts a new task. promise spawn( atask ); parameters atask this parameter accepts different data
types: if you specify a generator function, it is called with no arguments to retrieve the associated iterator. the generator function is a task, that is can yield promise objects to wait upon. the promise returned by the task either fulfills with the returned value if generator returns or rejects with the thrown error if the generator throws. if you specify the iterator returned by a generator ...
Using JavaScript code modules
components.utils.import() or components.utils["import"](). creating a javascript code module a very simple javascript module looks like this: var exported_symbols = ["foo", "bar"]; function foo() { return "foo"; } var bar = { name : "bar", size : 3 }; var dummy = "dummy"; notice that the module uses normal javascript to create functions, objects, constants, and any other javascript
type. the module also defines a special array named exported_symbols. any javascript item named in exported_symbols will be exported from the module and injected into the importing scope. for example: components.utils.import("resource://app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.size + 3); // displays "6" alert(dummy); // displays "dummy is not defined" because '...
...ate to other scopes (though an object's properties will be manipulated by reference). scope 1: components.utils.import("resource://app/my_module.jsm"); bar = "foo"; alert(bar); // displays "foo" scope 2: components.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 / seamonkey 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 ...
Using workers in JavaScript code modules
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. ...
...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. ...
JavaScript code modules
a search of add-ons in the repository. assert.jsm implements the commonjs unit testing specification version 1.1, which provides a basic standardized interface for performing in-code logical assertions with optional, customizable error reporting. bookmarkhtmlutils.jsm provides utility functions for importing and exporting bookmarks from the old-school "bookmarks.html" style bookmark files. c
types.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 ...
...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 a wrapper for xmlhttprequest that provides convenient and simplified api for dealing with http requests. jni.jsm abstracts the js-c
types to provide an interface that allows javascript code to call code running in native jvms. iso8601dateutils.jsm provides routines to convert between javascript date objects and iso 8601 date strings. log.jsm (formerly log4moz) provides a log4j style api for logging, log messages to various endpoints, such as the browser console or a file on disk. netutil.jsm provides helpful networking...
Index
ributions. along the way, we'll point out some sweet features that will make you more efficient and make your l10n contributions easier. 27 localizing without a specialized tool from the create a new localization document, an interested localizer can follow a technical step-by-step process that starts the localization process by focusing on how to localize two of the primary
types of localization files (dtd and properties) used in the mozilla source code. with that document, users can see immediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation. repeating the process allows a localizer to create a testable package to see his or her work as they progress to...
...le web content internationalization, localizability, localization, web development no summary! ...
Localization content best practices
at renders them unlocalizable. for example, in english all the following begin with the same clause: the url of this feed is invalid; the url of this feed cannot be reached; the url of this feed cannot be parsed. it might be tempting to 'save time' by presenting this as the url of this feed %s and then is invalid; cannot be reached and cannot be parsed. however, linguistically these are different
types of sentences and will be handled differently in other languages. this is usually not a case of translator choice but obligatory in the language. for example, in gaelic these sentences must be translated as tha url an inbhir seo mì-dhligheach;cha ruig sinn url an inbhir seo and cha ghabh url an inbhir seo a pharsadh. unless there are significant savings of translation volume involved, it is us...
...ion note. design for +50% bear in mind that english strings will likely be a lot shorter than their international equivalents, so you need to leave some space in your ui to allow for this. some examples: ok in english becomes ceart ma-thà in gaelic. save document? in english becomes a bheil thu airson an sgrìobhainn a shàbhaladh in gaelic. another good example is yes/no. there are two
types of languages, those that have yes/no as a single word, and those that don't and work on mirroring the verb. for example, a do you want to open the page? > yes/no dialog works in english, but in gaelic/irish/welsh and several other languages the equivalent answer is want/not want. w3c has a good guide on the length ratios a developer should be prepared for. test localizability as a developer, ...
Localizing with Mercurial
as been updated correctly." alternatively, you can edit the %path% variable manually. in order to do so, right-click on your computer icon, choose properties > advanced > environmental variables, select path and click edit. if you don't see path among the options, you'll have to click add and edit it within the add dialog. see the screenshot for an example. did it work? go to start > run...
type cmd.exe and click ok. a new shell window should appear.
type hg --version in the new shell window. if you see a message about the version of mercurial (e.g. mercurial distributed scm (version 1.3.1)), you have installed mercurial successfully! more details for more details on installing hg on windows, refer to the instructions on mercurial's download page. mercurial on mac osx installing h...
...osx is super easy. you can install mercurial via macports through the terminal, like so: $ sudo port install mercurial you can also install it by downloading the dmg package from the hg download page. it has an install dialog that will walk you through the process. if you prefer a graphical interface, you can download and install mercurialeclipse here. did it work? open a terminal window and
type hg --version. if you see a message about the version of mercurial (e.g. mercurial distributed scm (version 1.3.1)), you have installed mercurial successfully! more details for more details on installing hg on mac osx, refer to the instructions on mercurial's download page. configuring mercurial once you've installed mercurial, you'll need to configure it before you can use it successfully. y...
Localization formats
warning: this document pertains to the development of mozilla web sites and not to the development of gecko-based extensions or applications. ...
... from unintended changes disadvantage of gettext .po file needs to be compiled into a .mo file for localizer to see changes using regular diff to see changes to a file is sometimes impossible because the editing tool can save the .po file using a completely different structure or order of entities. read more about gettext on wikipedia and on mdc. wiki blogging, documentation, and other
types of mozilla content often surface as wikis. case study: download day in the above gettext example, notice how the web developer used "certificate_intro" as the value of the msgid. this is not the actual 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 ver...
Fonts for Mozilla 2.0's MathML engine
e of mathml fonts. the fonts may be installed by extracting the font files (which have the .otf extension) from the zip archive, then following instructions for microsoft windows, or copying the files to a ~/library/fonts folder on mac os x, or to a ~/.fonts/ directory (which may need to be created) on unix/linux systems. alternatively, follow dafont's "how to install a font". these fonts are open
type postscript fonts, which are supported by most modern operating systems. however some operating systems may not support these fonts. on such systems, it will be necessary to convert the fonts to a supported format. for example asana math is available in true
type format and there is an unofficial true
type conversion for stix fonts. the following fonts are not necessary when the above fonts are inst...
...s add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command: wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -o mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts then copy the mathml-fonts/resource/ directory somewhere on your web site and ensure that the woff files are served with the correct mime
type. finally, include the mathml-fonts/resource/mathml.css style sheet in your web pages, for example by adding the following rule to the default style sheet of your web site: @import url('/path/to/resource/mathml.css'); browsers have default font-families in their user agent stylesheets. if necessary, you might want to modify the font-family on the <math> elements and, for gecko, the on ::-moz-math-...
Mozilla Development Strategies
r code before checking in. when you land your bug-free code, it's qa's job to assure others that it's really bug free. make sure you appreciate anyone who finds a bug in your code. appreciate it even more if they find it before you ship. they're giving you a second chance to get it right before it becomes a bug that affects users. minimize how you are affected by regressions unless you are the
type to go out and tackle daily regressions, you need to find a way to not let them affect you. you don't want to have one tree, update it every morning, and then be stuck waiting for blockers to clear. have multiple trees. at least one of them should be updated every day. you'll need this one for regressions that require your immediate attention (a new crasher, a blocker, or problem in your area, fo...
... something massive, start a branch if you are working on something big, and you want to be able to check in incrementally without getting reviews, create a branch. but having a branch means dealing with conflicts when you land, and waiting a long time for reviews. here's how to create a branch: from your linux or mac os x box: # start from your trunk tree on your local disk cd mozilla find . -
type d \! -name cvs | xargs -l -p10 cvs tag -l my_base_tag > & ../taglog1.txt find . -
type d \! -name cvs | xargs -l -p10 cvs tag -b -l my_branch_tag > & ../taglog2.txt from your windows box: cvs co -r my_branch_tag mozilla/client.mak cd mozilla edit client.mak, putting my_branch_tag in the right places. cvs commit client.mak nmake -f client.mak original document information author(s): seth...
DMD
ry/replace/dmd/dmd.cpp:1286) #02: malloc (/home/njn/moz/mi5/go64dmd/memory/build/../../../memory/build/replace_malloc.c:153) #03: moz_xmalloc (/home/njn/moz/mi5/memory/mozalloc/mozalloc.cpp:84) #04: nscyclecollectingautorefcnt::incr(void*, nscyclecollectionparticipant*) (/home/njn/moz/mi5/go64dmd/dom/xul/../../dist/include/nsisupportsimpl.h:250) #05: nsxulelement::create(nsxulproto
typeelement*, nsidocument*, bool, bool,mozilla::dom::element**) (/home/njn/moz/mi5/dom/xul/nsxulelement.cpp:287) #06: nsxblcontentsink::createelement(char16_t const**, unsigned int, mozilla::dom::nodeinfo*, unsigned int, nsicontent**, bool*, mozilla::dom::fromparser) (/home/njn/moz/mi5/dom/xbl/nsxblcontentsink.cpp:874) #07: nscomptr<nsicontent>::startassignment() (/home/njn/moz/mi5/go64dmd/dom...
...t (/home/njn/moz/mi5/dom/base/nsattrandchildarray.cpp:880) #04: mozilla::dom::fragmentorelement::sizeofexcludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/fragmentorelement.cpp:2337) #05: nsinode::sizeofincludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/go64dmd/parser/html/../../../dom/base/nsinode.h:307) #06: mozilla::dom::nodeinfo::node
type() const (/home/njn/moz/mi5/go64dmd/dom/base/../../dist/include/mozilla/dom/nodeinfo.h:127) #07: nshtmldocument::docaddsizeofexcludingthis(nswindowsizes*) const (/home/njn/moz/mi5/dom/html/nshtmldocument.cpp:3710) #08: nsidocument::docaddsizeofincludingthis(nswindowsizes*) const (/home/njn/moz/mi5/dom/base/nsdocument.cpp:12820) } } the choice of whether to record an allocation stack tra...
Leak-hunting strategies and tips
xing leaks is to start with a task that you want not to leak (for example, reading email). start finding and fixing leaks by running part of the task under nstracerefcnt logging, gradually building up from as little as possible to the complete task, and fixing most of the leaks in the first steps before adding additional steps. (by most of the leaks, i mean the leaks of large numbers of different
types of objects or leaks of objects that are known to entrain many non-logged objects such as js objects. seeing a leaked globalwindowimpl, nsxulpdglobalobject, nsxbldocglobalobject, or nsxpcwrappedjs is a sign that there could be significant numbers of js objects leaked.) for example, start with bringing up the mail window and closing the window without doing anything. then go on to selecting a fol...
...pt object is garbage-collected. this means that if there are leaked gc roots from which the wrapper is reachable, the wrapper will never release its reference on the native object. while this can be debugged in detail, the quickest way to solve these problems is often to simply debug the leaked js roots. these roots are printed on shutdown in debug builds, and the name of the root should give the
type of object it is associated with. one of the most common ways one could leak a js root is by leaking an nsxpcwrappedjs object. this is the wrapper object in the reverse direction -- when a js object is used to implement an xpcom interface and be used transparently by native code. the nsxpcwrappedjs object creates a gc root that exists as long as the wrapper does. the wrapper itself is just a norm...
Memory reporting
amallocsizeof(this) + sizeofexcludingthis(amallocsizeof); } (note that sizeofexcludingthis and sizeofincludingthis aren't overrides of methods on a global base class that is common to all reporters. these names are just a convention that is commonly followed. that said, note that for some classes these methods may be virtual.) mfbt/memoryreporting.h defines mozilla::mallocsizeof as follows:
typedef size_t (*mallocsizeof)(const void* p); functions with this signature measure the size of p by asking the heap allocator how big it is (via moz_malloc_usable_size). all this is probably not what you'd expect, but the above functions have the following crucial features. they let you measure the mystring object itself or not as necessary. this is important because sometimes an object might...
...tw: if gmystring wasn't a pointer, you'd use // |gmystring.sizeofexcludingthis(mallocsizeof)| instead. return moz_collect_report( "explicit/mystring", kind_heap, units_bytes, gmystring->sizeofincludingthis(mallocsizeof), "memory used for mystring."); } }; ns_impl_isupports1(mystringreporter, nsimemoryreporter) note that moz_define_malloc_size_of defines a function of
type mozilla::mallocsizeof that is specific to this memory reporter (and will be identified as such in dmd's output). and moz_collect_report is a macro that makes things a bit shorter. an example involving inheritance things are a little trickier when inheritance is involved. an example: class b { virtual foo() { ... } virtual size_t sizeofexcludingthis(nsmallocsizeoffun amallocsizeof) const ...
A guide to searching crash reports
easy to understand, but the grouping capabilities are easy to overlook. searching the search form you can get to the search page by clicking on the "super search" link near the toolbar at the top right of any page in crash-stats. this brings up a search form like the one in the following screenshot. fields are provided for four common search criteria: product, version, platform, and process
type. the product field is pre-populated with "firefox" because that is a common case. as the fine print says, the default date range is the past week. the default search: signature facet if you click on the "search" button, you will get results like the ones in the following screenshot. by default, the "signature facet" tab is selected. ("facet" is a term that means "group".) in these results, t...
...ower search you can add criteria to perform a narrower search. for example, to perform a search for all mac crash reports that occurred while javascript garbage collection was running, do the following. add "mac os x" to the "platform" field. select "new line", and then choose a field ("is garbage collecting") and an operator ("is true"). the operators available for each field depends on its
type. with these criteria added the search form looks like the following screenshot. after clicking on "search" we get results like those in the following screenshot. the number of crash reports matching this search is in the thousands, i.e. much smaller than the previous search. proto signature the "proto signature" field is just the raw unprocessed crash stack concatenated together. you c...
L20n Javascript API
.l20n'; }); the resource is added to all registered locales. if there are no registered locales (see registerlocales), the default i-default locale is used. in this case, addresource(string) and linkresource(string) might be better suited for adding resources. ctx.addeventlistener(event: string, callback: function) register an event handler on the context instance. currently available event
types: ready - fired when all resources are available and the context instance is ready to be used. this event is also fired after each change to locale order (retranslation). error - fired when an error occurs which prevents the context instance from working correctly or when the existing translations are buggy. the error object is passed as the first argument to callback. these errors in...
... 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 ...
Leak And Bloat Tests
eremail", "tinderbox@invalid.com"); user_pref("mail.identity.id1.valid", true); user_pref("mail.root.none-rel", "[profd]mail"); user_pref("mail.root.pop3-rel", "[profd]mail"); user_pref("mail.server.server1.directory-rel", "[profd]mail/local folders"); user_pref("mail.server.server1.hostname", "local folders"); user_pref("mail.server.server1.name", "local folders"); user_pref("mail.server.server1.
type", "none"); user_pref("mail.server.server1.username", "nobody"); user_pref("mail.server.server2.check_new_mail", false); user_pref("mail.server.server2.directory-rel", "[profd]mail/tinderbox"); user_pref("mail.server.server2.download_on_biff", true); user_pref("mail.server.server2.hostname", "tinderbox"); user_pref("mail.server.server2.login_at_startup", false); user_pref("mail.server.server2.name...
...y"); user_pref("mail.server.server2.check_new_mail", false); user_pref("mail.server.server2.directory-rel", "[profd]mail/tinderbox"); user_pref("mail.server.server2.download_on_biff", true); user_pref("mail.server.server2.hostname", "tinderbox"); user_pref("mail.server.server2.login_at_startup", false); user_pref("mail.server.server2.name", "tinderbox@invalid.com"); user_pref("mail.server.server2.
type", "pop3"); user_pref("mail.server.server2.username", "tinderbox"); user_pref("mail.smtp.defaultserver", "smtp1"); user_pref("mail.smtpserver.smtp1.hostname", "tinderbox"); user_pref("mail.smtpserver.smtp1.username", "tinderbox"); user_pref("mail.smtpservers", "smtp1"); user_pref("mail.startup.enabledmailcheckonce", true); user_pref("mailnews.start_page_override.mstone", "1.9pre"); user_pref("mail...
NSPR Contributor Guide
for acceptance. general guidelines downward compatibility because many different applications, besides the mozilla client, use the nspr api, the api must remain downward compatible across even major releases. this means that the behavior of an existing public api item in nspr cannot change. should you need to have a similar api, with some slightly different behavior or different function proto
type, then suggest a new api with a different name. c language api the nspr api is a c language api. please do not contribute java, c or other language wrappers. coding style nspr does not have a documented coding style guide. look at the extant code. make yours look like that. some guidelines concerning naming conventions can be found in nspr naming conventions in the nspr reference. see also: ...
...d make it more generalized, hence a good candidate for inclusion in nspr. use bugzilla to track your work. be verbose. nspr wants you to document your work. if we accept it, we are going to have to answer questions about it and/or maintain it. these are some guidelines for new apis that you may add to nspr. header file descriptions. provide header file descriptions that fully document your public
typedefs, enums, macros and functions. see: prshm.h as an example of how your header file(s) should be documented. source file descriptions. provide descriptive documentation in your source (*.c) files. alas, we have no source files documented as we think they should be. the following are some general guidelines to use when implementing new features: don't export global variables your code must be ...
Optimizing Applications For NSPR
is presented in the macro <tt>pr_callback</tt>. for any function made available to any shared library (most likely passed in as a function pointer), that function must have the <tt>pr_callback</tt> qualifier. nspr functions are normally declared <tt>__cdecl</tt>. these declarations are hidden in the <tt>pr_extern()</tt> declarations in nspr's header files. nspr functions returning floating point
types and structs by value, including the derived
types print64, are declared <tt>__pascal</tt>. these different declarations are to accommodate restrictions in watcom's c/c++ version 11.0 and 11.0a compiler. windows 3.1 does not provide a non-blocking file i/o interface. nspr's file i/o is done using windows 3.1's synchronous file i/o api. the nspr file i/o apis may cause a thread switch even though...
...ll be left with an invalid pointer to the child. the problem has a solution that will be available soon. digital unix digital unix (aka, osf1) requires the latest patches for the pthreads library. the changes are not evident until one tries to do thread suspension (<tt>pr_suspendall()</tt>) which is in preparation for garbage collection. digital unix is the main platform used for nspr's proto
type use of ipv6. there are some conflicts between the patches needed to use ipv6 and those needed for pthreads. the ipv6 kit needs to be applied on a baseline configuration of digital unix v4.0b. linux the pthreads version of linux (which is not the default) uses the same signals that nspr uses to suspend threads in preparation for garbage collection. no solution in hand. os/2 the os/2 port i...
Hash Tables
this chapter describes the hash table functions in the plds (portable library — data structures) library of nspr. the hash table library functions are declared in the header file plhash.h. warning: the nspr hash table library functions are not thread safe. a hash table lookup may change the internal organization of the hash table (to speed up future lookups). ...
... functions in the plds (portable library — data structures) library of nspr. the hash table library functions are declared in the header file plhash.h. warning: the nspr hash table library functions are not thread safe. a hash table lookup may change the internal organization of the hash table (to speed up future lookups). ...
Locks
this chapter describes the nspr api for creation and manipulation of a mutex of
type prlock. lock
type lock functions in nspr, a mutex of
type prlock controls locking, and associated condition variables communicate changes in state among threads. when a programmer associates a mutex with an arbitrary collection of data, the mutex provides a protective monitor around the data. in general, a monitor is a conceptual entity composed of a mutex, one or more condition variables, and the monitored data. monitors in this generic sense should not be confused with monitors used in java programming. in addition to prlock, nspr provides another mutex
type, prmonitor, which is reentrant and can have only one associated condition variable. prmonitor is intended for use with java and reflects the jav...
... pr_destroylock destroys a specified lock object. pr_lock locks a specified lock object. pr_unlock unlocks a specified lock object. ...
Network Addresses
this chapter describes the nspr
types and functions used to manipulate network addresses. network address
types and constants network address functions the api described in this chapter recognizes the emergence of internet protocol version 6 (ipv6). to facilitate the transition to ipv6, it is recommended that clients treat all structures containing network addresses as transparent objects and use the functions documented here to manipulate the information. if used consistently, this api also eliminates the need to deal with the byte ordering of network addresses. typically, the only numeric declarations required are the well-known port numbers that are part of the prnetaddr structure. ...
...lients treat all structures containing network addresses as transparent objects and use the functions documented here to manipulate the information. if used consistently, this api also eliminates the need to deal with the byte ordering of network addresses. typically, the only numeric declarations required are the well-known port numbers that are part of the prnetaddr structure. network address
types and constants prhostent prprotoent pr_netdb_buf_size network address functions initializing a network address pr_initializenetaddr facilitates the use of prnetaddr, the basic network address structure, in a polymorphic manner. by using these functions with other network address functions, clients can support either version 4 or version 6 of the internet protocol transparently. all nspr...
PLHashTable
the number of buckets in a hash table may be changed by the library functions during the lifetime of the table to optimize speed and space. ...
...the number of buckets in a hash table may be changed by the library functions during the lifetime of the table to optimize speed and space. ...
PRFileDesc
see priomethods. ...
...this particular layer. see prdescidentity. description the fields of this structure are significant only if you are implementing a layer on top of nspr, such as ssl. otherwise, you use functions such as pr_open and pr_newtcpsocket to obtain a file descriptor, which you should treat as an opaque structure. for more details about the use of prfiledesc and related structures, see file descriptor
types. ...
PRLinger
structure used with the pr_sockopt_linger socket option to specify the time interval (in printervaltime units) to linger on closing a socket if any data remain in the socket send buffer. syntax #include <prio.h>
typedef struct prlinger { prbool polarity; printervaltime linger; } prlinger; fields the structure has the following fields: polarity polarity of the option's setting: pr_false means the option is off, in which case the value of linger is ignored. pr_true means the option is on, and the value of linger will be used to determine how long pr_close waits before returning. linger time (in printervaltime units) to linger before closing if any data remain in the socket send buffer. description by default, pr_close returns immediately, but if there are any data remain...
...long pr_close waits before returning. linger time (in printervaltime units) to linger before closing if any data remain in the socket send buffer. description by default, pr_close returns immediately, but if there are any data remaining in the socket send buffer, the system attempts to deliver the data to the peer. the pr_sockopt_linger socket option, with a value represented by a structure of
type prlinger, makes it possible to change this default as follows: if polarity is set to pr_false, pr_close returns immediately, but if there are any data remaining in the socket send buffer, the runtime attempts to deliver the data to the peer. if polarity is set to pr_true and linger is set to 0 (pr_interval_no_wait), the runtime aborts the connection when it is closed and discards any data rema...
PRLogModuleLevel
the enumerated
type prlogmodulelevel defines levels of logging available to application programs. ...
... the enumerated
type prlogmodulelevel defines levels of logging available to application programs. ...
PRNetAddr
data raw address data. port port number of tcp or udp, in network byte order. ...
...specify a network address. syntax #include <prio.h> union prnetaddr { struct { pruint16 family; char data[14]; } raw; struct { pruint16 family; pruint16 port; pruint32 ip; char pad[8]; } inet; #if defined(_pr_inet6) struct { pruint16 family; pruint16 port; pruint32 flowinfo; pripv6addr ip; } ipv6; #endif /* defined(_pr_inet6) */ };
typedef union prnetaddr prnetaddr; fields the structure has the following fields: family address family: pr_af_inet|pr_af_inet6 for raw.family, pr_af_inet for inet.family, pr_af_inet6 for ipv6.family. data raw address data. port port number of tcp or udp, in network byte order. ip the actual 32 (for inet.ip) or 128 (for ipv6.ip) bits of ip address. the inet.ip field is in network byte ord...
PRThread
this pointer is a required parameter for most of the functions that operate on threads. a prthread* is the successful result of creating a new thread. ...
...this pointer is a required parameter for most of the functions that operate on threads. a prthread* is the successful result of creating a new thread. ...
PR_FindSymbol
if the lib parameter is null, all libraries known to the runtime and the main program are searched in an unspecified order. ...
...ibrary given the identity of the library and a textual representation of the symbol in question. syntax #include <prlink.h> void* pr_findsymbol ( prlibrary *lib, const char *name); parameters the function has these parameters: lib a valid reference to a loaded library, as returned by pr_loadlibrary, or null. name a textual representation of the symbol to resolve. returns an un
typed pointer. description this function finds and returns an un
typed reference to the specified symbol in the specified library. if the lib parameter is null, all libraries known to the runtime and the main program are searched in an unspecified order. use this function to look up functions or data symbols in a shared library. getting a pointer to a symbol in a library does indicate that the libra...
PR_ReadDir
den" attribute set. on unix platform, this value identifies files whose names begin with a period ("."). returns a pointer to the next entry in the directory. if the end of the directory is reached or an error occurs, null. the reason can be retrieved via pr_geterror. ...
... if the end of the directory is reached or an error occurs, null. the reason can be retrieved via pr_geterror. description pr_readdir returns a pointer to a directory entry structure: struct prdirentry { const char *name; };
typedef struct prdirentry prdirentry; the structure has the following field: name name of entry, relative to directory name. the flags parameter is an enum of
type prdirflags:
typedef enum prdirflags { pr_skip_none = 0x0, pr_skip_dot = 0x1, pr_skip_dot_dot = 0x2, pr_skip_both = 0x3, pr_skip_hidden = 0x4 } prdirflags; the memory associated with the returned prdirentry structure is managed by nspr. the caller must not free the prdirentry structure. moreover, the prdirentry structure returned by each pr_readdir call is valid only until ...
PR_Writev
has the following parameters: fd a pointer to a prfiledesc object for a socket. iov an array of priovec structures that describe the buffers to write from. size number of priovec structures in the iov array. the value of this parameter must not be greater than pr_max_iovector_size. if it is, the function will fail and the error will be set to pr_buffer_overflow_error. timeout a value of
type printervaltime describing the time limit for completion of the entire write operation. returns one of the following values: a positive number indicates the number of bytes successfully written. the value -1 indicates that the operation failed. the reason for the failure can be obtained by calling pr_geterror. description the thread calling pr_writev blocks until all the data is written ...
...ore, the return value is equal to either the sum of all the buffer lengths (on success) or -1 (on failure). note that if pr_writev returns -1, part of the data may have been written before an error occurred. if the timeout parameter is not pr_interval_no_timeout and all the data cannot be written in the specified interval, pr_writev returns -1 with the error code pr_io_timeout_error. this is the
type definition for priovec:
typedef struct priovec { char *iov_base; int iov_len; } priovec; the priovec structure has the following fields: iov_base a pointer to the beginning of the buffer. iov_len the size of the buffer. ...
Process Management and Interprocess Communication
equivalent of the unix fork(). the newly-created process executes its program from the beginning. a new process can inherit specified file descriptors from its parent, and the parent can redirect the standard i/o streams of the child process to specified file descriptors. note that the functions described in this chapter are not available for macos or win16 operating systems. ...
...rk(). the newly-created process executes its program from the beginning. a new process can inherit specified file descriptors from its parent, and the parent can redirect the standard i/o streams of the child process to specified file descriptors. note that the functions described in this chapter are not available for macos or win16 operating systems. ...
Thread Pools
this chapter describes the nspr api thread pools. note: this api is a preliminary version in nspr 4.0 and is subject to change. thread pools create and manage threads to provide support for scheduling work (jobs) onto one or more threads. nspr's thread pool is modeled on the thread pools described by david r. ...
...ead pools. note: this api is a preliminary version in nspr 4.0 and is subject to change. thread pools create and manage threads to provide support for scheduling work (jobs) onto one or more threads. nspr's thread pool is modeled on the thread pools described by david r. ...
Threads
nspr provides an execution environment that promotes the use of lightweight threads. each thread is an execution entity that is scheduled independently from other threads in the same process. this chapter describes the basic nspr threading api. threading
types and constants threading functions a thread has a limited number of resources that it truly owns. these resources include a stack and the cpu registers (including pc). to an nspr client, a thread is represented by a pointer to an opaque structure of
type prthread. a thread is created by an explicit client request and remains a valid, independent execution entity until it returns from its root function or the process abnormally terminates. threads are critical resources and therefore require some management. to synchronize the termi...
...rovides definitive proof that the target thread has terminated and has finished with both the resources to which the thread has access and the resources of the thread itself. for an overview of the nspr threading model and sample code that illustrates its use, see introduction to nspr. for api reference information related to thread synchronization, see locks and condition variables. threading
types and constants prthread prthread
type prthreadscope prthreadstate prthreadpriority prthreadprivatedtor threading functions most of the functions described here accept a pointer to the thread as an argument. nspr does not check for the validity of the thread. it is the caller's responsibility to ensure that the thread is valid. the effects of these functions on invalid threads are undefi...
Certificate functions
the public functions listed here are used to interact with certificate databases. if documentation is available for a function listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference. the mozilla cross reference (mxr) link for each function provides access to the function definition, proto
type definition, and source code references. the nss version column indicates which versions of nss support the function. function name/documentation source code nss versions cert_addcerttolisttail mxr 3.2 and later cert_addextension mxr 3.5 and later cert_addocspacceptableresponses mxr 3.6 and later cert_addokdomainname mxr 3.4 and later cert_addrdn mxr 3.2.1 a...
...verify for multiple usages use cert_verifycertificatenow cert_verifyocspresponsesignature mxr 3.6 and later cert_verifysigneddata mxr 3.4 and later cert_verifysigneddatawithpublickey mxr 3.7 and later cert_verifysigneddatawithpublickeyinfo mxr 3.7 and later nss_cmpcertchainwcanames mxr 3.2 and later nss_findcertkea
type mxr 3.2 and later ...
Introduction to Network Security Services
of trusted root certificates. support for ilp32 in nss 3.2 and later versions, there are two new shared libraries for the platforms hp-ux for parisc cpus and solaris for (ultra)sparc (not x86) cpus. these hp and solaris platforms allow programs that use the ilp32 program model to run on both 32-bit cpus and 64-bit cpus. the two libraries exist to provide optimal performance on each of the two
types of cpus. these two extra shared libraries are not supplied on any other platforms. the names of these libraries are platform-dependent, as shown in the following table. platform for 32-bit cpus for 64-bit cpus solaris/sparc libfreebl_pure32_3.so libfreebl_hybrid_3.so hpux/parisc libfreebl_pure32_3.sl libfreebl_hybrid_3.sl aix (planned for a...
...sc libfreebl_pure32_3.sl libfreebl_hybrid_3.sl aix (planned for a future release) libfreebl_pure32_3_shr.a libfreebl_hybrid_3_shr.a an application should not link against these libraries, because they are dynamically loaded by nss at run time. linking the application against one or the other of these libraries may produce an application program that can only run on one
type of cpu (e.g. only on 64-bit cpus, not on 32-bit cpus) or that doesn't use the more efficient 64-bit code on 64-bit cpus, which defeats the purpose of having these shared libraries. on platforms for which these shared libraries exist, nss 3.2 will fail if these shared libs are not present. so, an application must include these files in its distribution of nss shared libraries. these shared librar...
NSS 3.12.4 release notes
few remaining issues with nss's new revocation flags bug 489710: byteswap optimize for msvc++ bug 490154: cryptokey framework requires module to implement generatekey when they support keypairgeneration bug 491044: remove support for vms (a.k.a., openvms) from nss bug 491174: cert_pkixverifycert reports wrong error code when ee cert is expired bug 491919: cert.h doesn't have valid functions proto
types bug 492131: a failure to import a cert from a p12 file leaves error code set to zero bug 492385: crash freeing named crl entry on shutdown bug 493135: bltest crashes if it can't open the input file bug 493364: can't build with --disable-dbm option when not cross-compiling bug 493693: sse2 instructions for bignum are not implemented on os/2 bug 493912: sqlite3_reset should be invoked in sdb_findo...
...bug 505561: need a generic function a la secmod_openuserdb() that can be used on non-softoken modules. bug 505858: nss_registershutdown can return without unlocking nssshutdownlist.lock bug 507041: invali...
NSS 3.14 release notes
per-application security policies, a new callback has been added for applications that use libpkix to verify certificates. applications may use this callback to inform libpkix whether or not candidate certificate chains meet application-specific security policies, allowing libpkix to continue discovering certificate paths until it can find a chain that satisfies the policies. ...
...ertificate chains meet application-specific security policies, allowing libpkix to continue discovering certificate paths until it can find a chain that satisfies the policies. ...
NSS 3.15.1 release notes
. hmac-sha256 cipher suites (rfc 5246 and rfc 5289) are supported, allowing tls to be used without md5 and sha-1. note the following limitations. the hash function used in the signature for tls 1.2 client authentication must be the hash function of the tls 1.2 prf, which is always sha-256 in nss 3.15.1. aes gcm cipher suites are not yet supported. new functions none. new
types in sslprot.h ssl_library_version_tls_1_2 - the protocol version of tls 1.2 on the wire, value 0x0303. tls_dhe_rsa_with_aes_256_cbc_sha256, tls_rsa_with_aes_256_cbc_sha256, tls_ecdhe_ecdsa_with_aes_128_cbc_sha256, tls_ecdhe_rsa_with_aes_128_cbc_sha256, tls_dhe_rsa_with_aes_128_cbc_sha256, tls_rsa_with_aes_128_cbc_sha256, tls_rsa_with_null_sha256 - new tls 1.2 only hmac-sha256 ...
..., tls_dhe_rsa_with_aes_128_cbc_sha256, tls_rsa_with_aes_128_cbc_sha256, tls_rsa_with_null_sha256 - new tls 1.2 only hmac-sha256 cipher suites. in sslerr.h ssl_error_unsupported_hash_algorithm, ssl_error_digest_failure, ssl_error_incorrect_signature_algorithm - new error codes for tls 1.2. in sslt.h ssl_hmac_sha256 - a new value in the sslmacalgorithm enum
type. ssl_signature_algorithms_xtn - a new value in the sslextension
type enum
type. new pkcs #11 mechanisms none. notable changes in nss 3.15.1 bug 856060 - enforce name constraints on the common name in libpkix when no subjectaltname is present. bug 875156 - add const to the function arguments of sec_certnicknameconflict. bug 877798 - fix ssltap to print the certificate_status ...
NSS 3.15.5 release notes
pub/mozilla.org/security/nss/releases/nss_3_15_5_rtm/src/ new in nss 3.15.5 new functionality added support for the tls application layer protocol negotiation (alpn) extension. two ssl socket options, ssl_enable_npn and ssl_enable_alpn, can be used to control whether npn or alpn (or both) should be used for application layer protocol negotiation. added the tls padding extension. the extension
type value is 35655, which may change when an official extension
type value is assigned by iana. nss automatically adds the padding extension to clienthello when necessary. added a new macro cert_list_tail, defined in certt.h, for getting the tail of a certcertlist. notable changes in nss 3.15.5 bug 950129: improve the ocsp fetching policy when verifying ocsp responses bug 949060: validate the io...
... getting the tail of a certcertlist. notable changes in nss 3.15.5 bug 950129: improve the ocsp fetching policy when verifying ocsp responses bug 949060: validate the iov input argument (an array of priovec structures) of ssl_writev (called via pr_writev). applications should still take care when converting struct iov to priovec because the iov_len members of the two structures have different
types (size_t vs. int). size_t is unsigned and may be larger than int. bugs fixed in nss 3.15.5 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.5&product=nss compatibility nss 3.15.5 shared libraries are backward compatible with all older nss 3.x shar...
NSS 3.16.2 release notes
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_protocol - an ssl error code that means the server support...
...ol_no_protocol - an ssl error code that means the server supports no protocols that the client advertises in the alpn extension. notable changes in nss 3.16.2 the btoa command has a new command-line option -w suffix, which causes the output to be wrapped in begin/end lines with the given suffix. use "c" as a shorthand for the suffix certificate. the certutil commands supports additionals
types of subject alt name extensions: --extsan
type:name[,
type:name]... the certutil commands supports generic certificate extensions, by loading binary data from files, which have been prepared using external tools, or which have been extracted and dumped to file from other existing certificates: --dump-ext-val oid --extgeneric oid:critical-flag:filename[,oid:critical-flag:filena...
NSS 3.20 release notes
ity the tls library has been extended to support dhe ciphersuites in server applications. new functions in ssl.h ssl_dhegroupprefset - configure the set of allowed/enabled dhe group parameters that can be used by nss for a server socket. ssl_enableweakdheprimegroup - enable the use of weak dhe group parameters that are smaller than default minimum size of the library. ...
...ded to support dhe ciphersuites in server applications. new functions in ssl.h ssl_dhegroupprefset - configure the set of allowed/enabled dhe group parameters that can be used by nss for a server socket. ssl_enableweakdheprimegroup - enable the use of weak dhe group parameters that are smaller than default minimum size of the library. new
types in sslt.h ssldhegroup
type - enumerates the set of dhe parameters embedded in nss that can be used with function ssl_dhegroupprefset new macros in ssl.h ssl_enable_server_dhe - a socket option user to enable or disable dhe ciphersuites for a server socket notable changes in nss 3.20 the tls library has been extended to support dhe ciphersuites in server applications. for backward compatibility r...
NSS 3.21 release notes
es nss configuration parameter strings. nssutil_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. ...
...s. ...
NSS Sample Code Sample1
mmackey = pk11_pubunwrapsymkey(p...
...on key from the "file" // this function uses a mechanism rather than a key
type // does this need to be "withflags"?? menckey = pk11_pubunwrapsymkey(prvkey, mwrappedenckey, ckm_aes_cbc_pad, cka_encrypt, 0); if (!menckey) { rv = 1; goto done; } } if (!mmackey) { // unwrap the mac key from the "file" // this function uses a mechanism rather than a key
type // does this need to be "withflags"?? mmackey = pk11_pubunwrapsymkey(prvkey, mwrappedmackey, ckm_md5_hmac, cka_sign, 0); if (!mmackey) { rv = 1; goto done; } } done: if (prvkey) seckey_destroyprivatekey(prvkey); return rv; } int server::shutdown() { if (menckey) pk11_freesymkey(menckey); if (mmackey) pk11_freesymkey(mmackey); menckey = 0; mmackey = 0...
NSS Sample Code sample6
* error code: token is read-only. ?? */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_geterror()); return; } keyid[0] = id; keyi...
...rmech; /* using ckm_aes_cbc_pad mechanism for example */ ciphermech = ckm_aes_cbc_pad; slot = pk11_getinternalkeyslot(); /* slot = pk11_getbestslot(ciphermech, null); didn't work. * error code: token is read-only. ?? */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_geterror()); return; } keyid[0] = id; keyiditem.
type = sibuffer; keyiditem.data = (void *)keyid; keyiditem.len = sizeof(keyid[0]); /* note: keysize must be 0 for fixed key-length algorithms like des. * since we're using aes in this example, we're specifying * one of the valid keysizes (16, 24, 32) */ key = pk11_tokenkeygen(slot, ciphermech, 0, 32 /*keysize*/, &keyiditem, pr_true, 0); if (key ...
PKCS 7 functions
the nss version column indicates which versions of nss support the function. ...
...and later sec_pkcs7addrecipient mxr 3.2 and later sec_pkcs7addsigningtime mxr 3.2 and later sec_pkcs7containscertsorcrls mxr 3.4 and later sec_pkcs7contentisencrypted mxr 3.4 and later sec_pkcs7contentissigned mxr 3.4 and later sec_pkcs7content
type mxr 3.2 and later sec_pkcs7copycontentinfo mxr 3.4 and later sec_pkcs7createcertsonly mxr 3.3 and later sec_pkcs7createdata mxr 3.2 and later sec_pkcs7createencrypteddata mxr 3.2 and later sec_pkcs7createenvelopeddata mxr 3.2 and later ...
NSS tools : cmsutil
name cmsutil — performs basic cryptograpic operations, such as encryption and decryption, on cryptographic message syntax (cms) messages. synopsis cmsutil [options] arguments description the cmsutil command-line uses the s/mime toolkit to perform basic operations, such as encryption and decryption, on cryptographic message syntax (cms) messages. to run cmsutil,
type the command cmsutil option [arguments] where option 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. to see a usage string, issue the command without options. options and arguments options options specify an action. option arguments modify an action. the options and arguments for the cmsutil command are ...
...tfile 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 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] ...
NSS reference
e categories of functions in nss public functions. should a particular page require the use of an underscore, please see the documentation for the title override extension. building and installing nss overview of an nss application based on "overview of an ssl application" in the ssl reference. getting started with nss based on "getting started with ssl" in the ssl reference. data
types based on "selected ssl
types and structures" in the ssl reference. nss initialization and shutdown nss_init nss_initreadwrite nss_nodb_init nss_initialize nss_shutdown utility functions based on "utility functions" in nss public functions. certificate functions based on certificate functions in the ssl reference and "certificate functions" in nss public functions. validating cer...
... encryption/decryption hashing key generation generate keys, key pairs, and domain parameters. rand...
S/MIME functions
the public functions listed here perform s/mime operations using the s/mime toolkit. the mozilla cross reference (mxr) link for each function provides access to the function definition, proto
type definition, and source code references. the nss version column indicates which versions of nss support the function. ...
... source code nss versions nss_cmscontentinfo_getbulkkey mxr 3.2 and later nss_cmscontentinfo_getbulkkeysize mxr 3.2 and later nss_cmscontentinfo_getcontent mxr 3.2 and later nss_cmscontentinfo_getcontentencalgtag mxr 3.2 and later nss_cmscontentinfo_getcontent
typetag mxr 3.2 and later nss_cmscontentinfo_setbulkkey 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_diges...
Utility functions
the public functions listed here perform initialization tasks and other services. if documentation is available for a function listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference. the mozilla cross reference (mxr) link for each function provides access to the function definition, proto
type definition, and source code references. the nss version column indicates which versions of nss support the function. function name/documentation source code nss versions atob_asciitodata mxr deprecated 3.2 use nssbase64_decodebuffer atob_convertasciitoitem mxr deprecated 3.2 use nssbase64_decodebuffer btoa_convertitemtoascii mxr depreca...
...ter hash_clone mxr 3.10 and later hash_create mxr 3.4 and later hash_destroy mxr 3.4 and later hash_end mxr 3.4 and later hash_gethashobject mxr 3.2 and later hash_gethashobjectbyoidtag mxr 3.8 and later hash_gethash
typebyoidtag mxr 3.8 and later hash_get
type mxr 3.12 and later hash_hashbuf mxr 3.10 and later hash_resultlen mxr 3.4 and later hash_resultlenbyoidtag mxr 3.10 and later hash_resultlencontext mxr 3.10 and later hash_update mxr ...
NSS Tools cmsutil
each command takes one option. each option may take zero or more arguments. to see a usage string, issue the command without options. ...
... 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 <tt>certusageemailsigner)</tt>. <-y ekprefnick specify an encryption key preference by nickname. 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...
NSS tools : cmsutil
name cmsutil — performs basic cryptograpic operations, such as encryption and decryption, on cryptographic message syntax (cms) messages. synopsis cmsutil [options] arguments description the cmsutil command-line uses the s/mime toolkit to perform basic operations, such as encryption and decryption, on cryptographic message syntax (cms) messages. to run cmsutil,
type the command cmsutil option [arguments] where option 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. to see a usage string, issue the command without options. options and arguments options options specify an action. option arguments modify an action. the opt...
...apabilities 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 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 c...
NSS tools : vfychain
ct signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose mode. prints root cert subject(double the argument for whole root cert info) -w password database password -w pwfile password file revocation options for pkix api (invoked with -pp options) is a collection of the following flags: [-g
type [-h flags] [-m
type [-s flags]] ...] ... where: -g test-
type sets status checking test
type. possible values are "leaf" or "chain" -g test
type sets status checking test
type. possible values are "leaf" or "chain". -h test flags sets revocation flags for the test
type it follows. possible flags: "...
... where: -g test-
type sets status checking test
type. possible values are "leaf" or "chain" -g test
type sets status checking test
type. possible values are "leaf" or "chain". -h test flags sets revocation flags for the test
type it follows. possible flags: "testlocalinfofirst" and "requirefreshinfo". -m method
type sets method
type for the test
type it follows. possible
types are "crl" and "ocsp". -s method flags sets revocation flags for the method it follows. possible
types are "donotuse", "forbidfetching", "ignoredefaultsrc", "requireinfo" and "failifnoinfo". additional resources for information about nss and other tools related to nss (like...
Necko Architecture
out of date. it was last updated in 1999. necko is a modular networking library developed as part of the mozilla project. necko has been designed 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. mime
type - mime <-> file extension mapping nkabout - about: protocol nkdata - data: protocol nkfile - file: protocol nkftp - ftp: protocol nkkeyword - 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...
...lback, you are handed an nsiinputsteam which you can read the data from (you will more than likely need to be able to handle multiple ondataavailable() callbacks, buffering the data you receive as necessary). the transaction is not complete until you receive an "stopped" notification. transports underlying i/o functionality has been consolidated into "transports." there is a transport for each
type of i/o. necko implements a file transport and a socket transport that the protocol implementations (channels) use to actually move bytes to and from. how do i add my own protocol handler? adding your own protocol handler is a straightforward process in necko. there are a minimum of two interfaces you need to implement in order to fit into the necko architecture: nsiprotocolhandler, and nsichan...
Rhino shell
n object to the specified file. spawn(functionorscript) run the given function or script in a different thread. sync(function) creates a synchronized function (in the sense of a java synchronized method) from an existing function. the new function synchronizes on the this object of its invocation. quit() quit shell. the shell will also quit in interactive mode if an end-of-file character is
typed at the prompt. version([number]) get or set javascript version number. if no argument is supplied, the current version number is returned. if an argument is supplied, it is expected to be one of 100, 110, 120, 130, 140, 150, 160 or 170 to indicate javascript version 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 or 1.7 respectively. examples invocation here the shell is invoked three times from the comm...
... javascript version 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 or 1.7 respectively. examples invocation here the shell is invoked three times from the command line. (the system command prompt is shown as $.) the first invocation executes a script specified on the command line itself. the next invocation has no arguments, so the shell goes into interactive mode, reading and evaluating each line as it is
typed in. finally, the last invocation executes a script from a file and accesses arguments to the script itself. $ java org.mozilla.javascript.tools.shell.main -e "print('hi')" hi $ java org.mozilla.javascript.tools.shell.main js> print('hi') hi js> 6*7 42 js> function f() { return a; } js> var a = 34; js> f() 34 js> quit() $ cat echo.js for (i in arguments) { print(arguments[i]) } $ java org.mo...
SpiderMonkey Build Documentation
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++ ../configure it is also possible that baldrdash may fail to compile with /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/int
types.h:30:15: fatal error: 'int
types.h' file not found /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/int
types.h:30:15: fatal error: 'int
types.h' file not found, err: true this is because, starting from mohave, headers are no longer installed in /usr/include. refer the release notes under command line tools -> new features the release notes also states that this compatibility package will n...
...re.in --enable-debug --disable-optimize # use "mozmake" on windows make you can also build debug builds of spidermonkey with the js_gc_zeal option, which adds a new built-in function to spidermonkey that lets you configure zealous garbage collection. this can help debug memory leaks and other memory-related problems. see js_setgczeal() for details. ...
Creating JavaScript jstest reftests
n by the jstest harness in the shell and the reftest harness in the browser. this directory contains tests of spidermonkey conformance to ecmascript as well as spidermonkey 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 spidermonkey non-standard spidermonkey 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. ...
...ic features, like gc(), either: make the test silently pass if those features aren't present; or make it a jit-test (so that it never runs in the browser); or at the top of the test, add the comment // skip-if(!xulruntime.shell), so that it only runs in the shell. it is easy to make a test silently pass; anyone who has written js code for the web has written this kind of if-statement: if (
typeof gc === 'function') { var arr = []; arr[10000] = 'item'; gc(); asserteq(arr[10000], 'item', 'gc must not wipe out sparse array elements'); } else { print('test skipped: no gc function'); } reportcompare(0, 0, 'ok'); handling abnormal test terminations some tests can terminate abnormally even though the test has technically passed. earlier we discussed the deprecated approa...
Tracing JIT
gured. the architecture-specific methods found in these files are the only functions within nanojit or tracemonkey that emit raw bytes of machine-code into memory. spidermonkey-specific high level component: jstracer.* the files jstracer.cpp and jstracer.h contain a the mechanisms of monitoring and recording the activity of the interpreter. each spidermonkey jscontext holds a trace monitor of
type jstracemonitor. the trace monitor maintains some book-keeping information, as well as the collection of recorded fragments, held in a hashtable keyed by the interpreter's program counter and global object shape at the time of recording. at any moment, the trace monitor is in one of three major states: monitoring, recording, or executing. the transitions between these states are somewhat complex...
...shold value, the target is considered hot. when the monitor decides a target pc is hot, it looks in a hashtable of fragments to see if there is a fragment holding native code for that target pc. if it finds such a fragment, it transitions to executing mode. otherwise it transitions to recording mode. recording when the trace monitor enters recording mode, it constructs a new trace recorder, of
type tracerecorder. it then passes control back to the spidermonkey interpreter. the interpreter continues interpreting bytecode, but with an important difference: each bytecode it interprets is also sent to the trace monitor and recorded in the monitor's trace recorder. recording mode is temporary -- ideally it only lasts as long as it takes to record a single iteration of a loop in the interpreter ...
Introduction to the JavaScript shell
see javascript shells. note: starting with spidermonkey 44 (firefox 44 / thunderbird 44 / seamonkey 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 the javascript shell the shell offers two modes of operation. you can use it as an interactive shell, in which you
type javascript code at a prompt and get instant gratification, which is handy for experimenting or testing new features. you can also pass in, on the command line, a javascript program file to run, in which case the program is run automatically. after following the build documentation and installing the built shell using make install, you can run the shell in interactive mode using the command: js ...
...unction, the line number of the line of code containing that offset is returned. print([expression ...]) evaluates the expression(s) and displays the result(s) on stdout, separated by spaces (" ") and terminated by a newline ("\n"). putstr(expression) evaluates the expression and displays the result on stdout. quit([status]) exits the shell. status defaults to 0 if omitted. read(filename[,
type]) reads and returns the contents of file. if
type is "binary" returns an uint8array, otherwise returns an utf-8 decoded string. readline() reads a single line of input from stdin, returning it to the caller. you can use this to create interactive shell programs in javascript. reflect.parse() see parser api. note: this function is intended only for use when testing the javascript engine. se...
INT_FITS_IN_JSVAL
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. determines if a specified c integer is safe to pass to int_to_jsval. syntax #define int_fits_in_jsval(i) /* ... */ name
type description i jsint the c integer value to check. ...
... i jsint the c integer value to check. description determines if a specified c integer value, i, lies within the range allowed for integer jsvals. if so, int_fits_in_jsval returns true, and i can 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 spidermonkey 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 conditiona...
JS::Add*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 new root. vp js::heap<js::value> the address of the js::value variable to root. rp js::heap<jsstring *> the address of the js...
... variable to the garbage collector's root set, the set of variables used as starting points each time the collector checks to see what memory is reachable. the garbage collector aggressively collects and recycles memory that it deems unreachable, so roots are often necessary to protect data from being prematurely collected. vp/rp is the address of a c/c++ variable (or field, or array element) of
type js::value, jsstring *, jsobject *, or jsscript *. this variable must already be initialized. (for example, it must not be an uninitialized local variable. that could cause sporadic crashes during garbage collection, which can be hard to debug.) the variable must remain in memory until the balancing call to js::remove*root. note that this means that if the root is meant to live past the end of a f...
JS::CloneFunctionObject
this article covers features introduced in spidermonkey 38 create a new function object from an existing jsfunction. 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. description js::clonefunctionobject creates a new function object from funobj.
...ates a new function object from funobj. the new object has the same code and argument list as funobj. if scopechain is supplied, it uses scopechain as its enclosing scope. if scopechain is omitted, it creates a new function object in cx's global. this can be helpful if funobj is an extant function that you wish to use as if it were enclosed by a newly-created global object. the new object's proto
type is function.proto
type; js_newobject : choosing a default proto
type explains exactly how this is computed. js::clonefunctionobject takes care to choose a proto
type that shares a global object with the given parent whenever possible. funobj must be a pointer to a javascript function object (see js_objectisfunction). on success, js::clonefunctionobject returns a pointer to the newly created object...
JS::CompileOffThread
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. rt jsruntime * pointer to a js runtime. options js::readonly...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. rt jsruntime * pointer to a js runtime. options js::readonlycompileoptions & compile options. chars const char16_t * string containing t...
JS::HandleValueArray
values js::autovaluevector & elements of newly created array. values js::autovaluearray & elements of newly created array. args js::callargs & elements of newly created array. len size_t (frommarkedlocation only) length of el...
...ods method description size_t length() const returns the length of the array. const value *begin() const returns the pointer to the first element of the array. js::handlevalue operator[](size_t i) const returns i-th element of the array. description js::handlevaluearray is a handle to an array of rooted values. this is useful as a parameter
type, or a temporal local variable for it. see also mxr id search for js::handlevaluearray js::rootedvalue js::autovaluevector js::autovaluearray bug 965830 ...
JS::OrdinaryToPrimitive
this article covers features introduced in spidermonkey 38 convert an ordinary object to a primitive value. syntax bool js::ordinarytoprimitive(jscontext *cx, js::handleobject obj, js
type type, js::mutablehandlevalue vp); 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. obj js::handleobject the object to convert.
type js
type the
type of converted value. ...
... most users should not call this -- use js::tonumber, js::toboolean, or js::tostring instead. ...
JS::SetLargeAllocationFailureCallback
this article covers features introduced in spidermonkey 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. ...
... 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. added in spidermonkey 38 callback syntax
typedef void (* js::largeallocationfailurecallback)(void *data); name
type description data void * data parameter passed to js::setlargeallocationfailurecallback. added in spidermonkey 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...
JSCheckAccessOp
obsolete since jsapi 29this 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. jscheckaccessop is the
type for jsclass.checkaccess. (it is also the
type of the callback set by js_setcheckobjectaccesscallback.) syntax
typedef jsbool (* jscheckaccessop)(jscontext *cx, jsobject *obj, jsval id, jsaccessmode mode, jsval *vp); name
type description cx jscontext * the js context in which the property access attempt is occurring. ...
... vp jsval * out parameter. on success, the callback must set *vp to the stored value of the property. description check whether obj[id] may be accessed per mode, returning js_false on error/exception, js_true on success with obj[id]'s stored value in *vp. ...
JSDeletePropertyOp
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 being deleted. id js::handleid the name or index of the property being deleted. ...
...ed during most property deletions, even when obj has no property named id. if an error occurred, return false as per normal jsapi error practice. if no error occurred, but the deletion attempt wasn't allowed (perhaps because the property was non-configurable), set *succeeded to false and return true. this will cause delete obj[id] to evaluate to false in non-strict mode code, and to throw a
typeerror in strict mode code. if no error occurred and the deletion wasn't disallowed (this is *not* the same as saying that a deletion actually occurred -- deleting a non-existent property, or an inherited property, is allowed -- it's just pointless), set *succeeded to true and return true. this hook is not called when the target property is jsprop_permanent and is an own property of the targe...
JSErrorFormatString
this article covers features introduced in spidermonkey 17 represent error message and
type. syntax
typedef struct jserrorformatstring { const char *format; uint16_t argcount; int16_t exn
type; } jserrorformatstring; name
type description format const char * the error format string in ascii. argcount uint16_t the number of arguments to expand in the formatted error message. exn
type int16_t one of the jsexn
type constants. description jserrorformatstring is a struct to represent error message and
type, returned by js_reporterrornumber function. ...
...onst char * the error format string in ascii. argcount uint16_t the number of arguments to expand in the formatted error message. exn
type int16_t one of the jsexn
type constants. ...
JSFunctionSpec
call jsnativewrapper the built-in js call wrapped by this function. ...
... call jsnativewrapper the built-in js call wrapped by this function. ...
JSID_EMPTY
jsid_emptyhandle is the handle to the jsid with the value of jsid_empty. ...
... jsid_emptyhandle is the handle to the jsid with the value of jsid_empty. ...
JSObjectOps.defaultValue
try to avoid using it. warning! jsobjectops is not a supported api. details of the api may change from one release to the next. this documentation should be considered spidermonkey internals documentation, not api documentation. see bug 408416 for details. the javascript engine calls the jsobjectops.defaultvalue and jsclass.convert callbacks to convert objects to primitive values. syntax
typedef jsbool (*jsconvertop)(jscontext *cx, jsobject *obj, js
type type, jsval *vp); name
type description cx jscontext * pointer to the js context in which the conversion is needed. obj jsobject * the object to be converted.
type js
type the target
type. vp jsval * out parameter. on success, the callback must store the co...
... a+b, involve implicit conversion of the operands using [[defaultvalue]]. the default [[defaultvalue]] behavior for ordinary objects is as described in es5 §8.12.8. it calls the javascript methods obj.valueof() and/or obj.tostring(). provide a custom jsobjectops.defaultvalue callback to implement customized [[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 spidermonkey will assert if a convert callback is successful but leaves *vp holding a primitive value. js_con...
JSObjectOps.lookupProperty
of the api may change from one release to the next. this documentation should be considered spidermonkey internals documentation, not api documentation. see bug 408416 for details. the jsobjectops.lookupproperty callback is called for every property access (except when a higher-level callback, such as jsobjectops.getproperty, is overloaded in a way that does not call lookupproperty). syntax
typedef jsbool (*jslookuppropop)(jscontext *cx, jsobject *obj, jsid id, jsobject **objp, jsproperty **propp); name
type description cx jscontext * pointer to the js context in which the property lookup is happening. obj jsobject * the object whose properties are being searched. id jsid the name or index of the property to look up. ...
...the name or index of the property to look up. objp jsobject ** out parameter. if the property is found, the callback stores the object on which the property was found in *objp. propp jsproperty ** out parameter. on success, the callback stores in *propp a pointer to the property, if it exists, or null if it doesn't. description look for id in obj and its proto
type chain, returning js_false on error or exception, js_true on success. on success, return null in *propp if id was not found. if id was found, return the first object searching from obj along its proto
type chain in which id names a direct property in *objp, and return a non-null, opaque property pointer in *propp. if jslookuppropop succeeds and returns with *propp non-null, that pointer may be pas...
JSPrincipals
use js_holdprincipals and js_dropprincipals. codebase char * pointer to the codebase for the principal. obsolete since jsapi 13 getprincipalarray void * (*)(jscontext *, jsprincipals *) pointer to the function that returns an array of principal definitions. obsolete since jsapi 12 globalprivilegesenabled jsbool (*)(jscontext *, jsprincipals *) flag indicating whether principals are enabled globally. ...
...destroyed. ...
JSPrincipalsTranscoder
principalsp jsprincipals ** if xdr->mode == jsxdr_decode, this is an out parameter: on success, *principalsp receives the deserialized principals. otherwise xdr->mode == jsxdr_encode, and *principalsp points to the jsprincipals object to be serialized. ...
... principalsp jsprincipals ** if xdr->mode == jsxdr_decode, this is an out parameter: on success, *principalsp receives the deserialized principals. otherwise xdr->mode == jsxdr_encode, and *principalsp points to the jsprincipals object to be serialized. ...
JSPropertySpec
tinyid int8 obsolete since jsapi 31 unique id number for the property to aid in resolving getproperty and setproperty method calls. this value should be zero if you are not using tinyids (i.e. the getter/setter function is only used by one property). flags uint8_t the bitwise or of any numbe...
...o js_defineproperties or js_initclass to create the properties and assign them to an object. to define an array of jspropertyspec, use js_psg, js_psgs, js_self_hosted_get, js_self_hosted_getset, and js_ps_end see also mxr id search for jspropertyspec jsfunctionspec jsnativewrapper js_defineproperties js_psg js_psgs js_self_hosted_get js_self_hosted_getset js_ps_end bug 766448 - changed
type of getter and setter to wrapper bug 938728 - added selfhostedgetter and selfhostedsetter bug 958262 - changed
type of getter and setter to union, and removed selfhostedgetter and selfhostedsetter. ...
JSTraceOp
for each such thing, a trace implementation must call one of the js_call*tracer variants on the thing. jstraceop implementation can assume that no other threads mutates object state. it must not change state of the object or corresponding native structures. ...
...for each such thing, a trace implementation must call one of the js_call*tracer variants on the thing. jstraceop implementation can assume that no other threads mutates object state. it must not change state of the object or corresponding native structures. ...
JSVAL_TO_GCTHING
v must be either jsval_null or a reference to a gc thing. otherwise the resulting pointer is undefined. jsval_is_gcthing may be used to check this. this macro is exposed in jsapi.h because other jsapi macros make use of it. ...
...v must be either jsval_null or a reference to a gc thing. otherwise the resulting pointer is undefined. jsval_is_gcthing may be used to check this. this macro is exposed in jsapi.h because other jsapi macros make use of it. ...
JSVAL_TO_STRING
obsolete since jsapi 32this 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 jsval to
type jsstring * without a
type check. syntax jsstring * jsval_to_string(jsval v); description jsval_to_string casts the argument, v, to
type jsstring *. as a precondition, jsval_is_string(v) must be true. this function is not
type-safe: if v is not a string, the behavior is undefined. to coerce any value to a string, use the js_valuetostring function instead. ...
...ng(jsval v); description jsval_to_string casts the argument, v, to
type jsstring *. as a precondition, jsval_is_string(v) must be true. this function is not
type-safe: if v is not a string, the behavior is undefined. to coerce any value to a string, use the js_valuetostring function instead. (the difference is that the latter will convert an object, array, number, or other value to a string in a
type-safe way, creating a new string if needed.) to convert the return
type of this macro (jsstring *) to a char pointer, use js_getstringbytes. see also bug 952650 ...
JSVersion
each version has a name, which is a string used by js_stringtoversion and js_versiontostring. ...
...each version has a name, which is a string used by js_stringtoversion and js_versiontostring. ...
JS_AddArgumentFormatter
could be removed at any time. try to avoid using it. add or remove a format string handler for js_convertarguments, js_pusharguments, js_convertargumentsva, and js_pushargumentsva. syntax jsbool js_addargumentformatter(jscontext *cx, const char *format, jsargumentformatter formatter); void js_removeargumentformatter(jscontext *cx, const char *format); name
type description cx jscontext * the context in which to install the formatter. format const char * the format string prefix that should be handled by formatter, or whose handler should be removed. formatter jsargumentformatter the function to be used to convert arguments described by the given format. this function is described in more detail below. ...
...ich is typically a string constant. if format is in dynamic storage, the caller must keep the string alive until js_removeargumentformatter is called. js_removeargumentformatter removes any conversion functions associated with format. callback syntax jsbool (*jsargumentformatter)(jscontext *cx, const char *format, jsbool fromjs, jsval **vpp, va_list *app); name
type description cx jscontext * the context in which the conversion is being performed. format const char * the tail of the format string whose prefix is associated with this formatting function. fromjs jsbool js_true if the conversion function should convert from jsval values to c values; js_false if the conversion function should convert from c values ...
JS_AddFinalizeCallback
add/remove callback function for finalization. ...
...d js_setfinalizecallback(jsruntime *rt, jsfinalizecallback cb); // obsolete since jsapi 32 name
type description rt jsruntime * the jsruntime for which to set the finalization callback. cb jsfinalizecallback pointer to the new callback function to use. data void * passed to data parameter for jsfinalizecallback. callback syntax
typedef enum jsfinalizestatus { jsfinalize_group_start, jsfinalize_group_end, jsfinalize_collection_end } jsfinalizestatus;
typedef void (* jsfinalizecallback)(jsfreeop *fop, jsfinalizestatus status, bool iscompartment, void *data); name
type description fop jsfreeop * a pointer to an instance of jsfreeop. status jsfinalizestatus one of the j...
JS_Add*Root
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. vp jsval * (in js_addvalueroot and js_addnamedvalueroot) the address of the jsval variable to root spp jsstring ** (in js_addstringroot and js_addnamedstringroot) the address of the jsstr...
...e to the garbage collector's root set, the set of variables used as starting points each time the collector checks to see what memory is reachable. the garbage collector aggressively collects and recycles memory that it deems unreachable, so roots are often necessary to protect data from being prematurely collected. vp/spp/opp/rp is the address of a c/c++ variable (or field, or array element) of
type jsstring *, jsobject *, or jsval. this variable must already be initialized. (for example, it must not be an uninitialized local variable. that could cause sporadic crashes during garbage collection, which can be hard to debug.) the variable must remain in memory until the balancing call to js_removeroot. note that this means that if the root is meant to live past the end of a function, the addre...
JS_AlreadyHasOwnProperty
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the object to be searched. name or id const char * or const char16_t *or js::handleid (in js_alreadyhasownproperty, alreadyhasownucproperty, and js_alreadyhasownpropertybyid) the name of th...
...n, 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 spidermonkey—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 proto
type 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 spidermonkey. they are meant to be a transparent optimization; ...
JS_BeginRequest
description when your multithreaded application wants to use a jscontext, it must use js_beginrequest and js_endrequest to bracket maximal non-blocking hunks of native code that call the jsapi. ...
... js_endrequest to bracket maximal non-blocking hunks of native code that call the jsapi. this "request model" is necessary to interlock with the global garbage collector. in a js_threadsafe build, many jsapi functions must only be called from within a request. in this reference, the cx parameter of such functions is documented with the phrase “requires request”, like this: name
type description cx jscontext * the context to use. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. in a debug build, this is enforced with assertions. requests constrain garbage collection. if any thread is in a requests, garbage collection can happen only when that thread calls into the jsapi. if one thread needs garbage colle...
JS_ClearNewbornRoots
obsolete since jsapi 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. clear a context's newborn roots, which temporarily protect newly allocated values from garbage collection. syntax void js_clearnewbornroots(jscontext *cx); name
type description cx jscontext * the context to clear. description the last gc thing of each
type (object, string, double, external string
types) created on a given context is kept alive until another thing of the same
type is created, using a newborn root in the context. these newborn roots help native code protect newly-created gc-things from gc invocations activated before those things can be rooted using local or glo...
... embeddings may need to do likewise for all contexts. see js_enterlocalrootscope for a better way to manage newborns in cases where native hooks (functions, getters, setters, etc.) create many gc-things, potentially without connecting them to predefined local roots such as *rval or argv[i] in an active jsnative function. using js_enterlocalrootscope disables updating of the context's per-gc-thing-
type newborn roots, until control flow unwinds and leaves the outermost nesting local root scope. see also bug 572057 bug 659462 ...
JS_ClearNonGlobalObject
obsolete since jsapi 34this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 24 remove all properties associated with an object. syntax void js_clearnonglobalobject(jscontext *cx, jsobject *obj); name
type description cx jscontext * the context in which to clear the object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object from which to delete all properties. description js_clearnonglobalobject removes all of obj's own properties, except the special __proto__ and __parent__ properties, in a single op...
...which to clear the object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object from which to delete all properties. description js_clearnonglobalobject removes all of obj's own properties, except the special __proto__ and __parent__ properties, in a single operation. properties belonging to objects on obj's proto
type chain are not affected. to remove a single property from an object, use js_deleteproperty. to remove a single array object element, use js_deleteelement. see also js_deleteproperty js_deleteelement bug 1043281 ...
JS_CloneFunctionObject
obsolete since jsapi 36this 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. create a new function object from an existing jsfunction. syntax jsobject * js_clonefunctionobject(jscontext *cx, jsobject *funobj, jsobject *parent); 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 jsobject * the function to clone. parent jsobject * the new function's parent. description js_clonefunctionobject creates a new function object from funobj. the new object has the same co...
.... parent jsobject * the new function's parent. description js_clonefunctionobject creates a new function object from funobj. the new object has the same code and argument list as funobj, but uses parent as its enclosing scope. this can be helpful if funobj is an extant function that you wish to use as if it were enclosed by a newly-created global object. the new object's proto
type is function.proto
type; js_newobject: choosing a default proto
type explains exactly how this is computed. js_clonefunctionobject takes care to choose a proto
type that shares a global object with the given parent whenever possible. funobj must be a pointer to a javascript function object (see js_objectisfunction). on success, js_clonefunctionobject returns a pointer to the newly created object. if ...
JS_ContextIterator
obsolete since jsapi 52this 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. cycles through the js contexts associated with a particular jsruntime. syntax jscontext * js_contextiterator(jsruntime *rt, jscontext **iterp); name
type description rt jsruntime * the runtime to walk. iterp jscontext * in-out parameter. on input, *iterp must be null or point to a context in rt. on success, the value of *iterp is modified so that repeated calls cycle through all the contexts in rt. description js_contextiterator steps through the set of contexts associated with the runtime rt. each call to js_contextiterator returns the next context in the...
...t * in-out parameter. on input, *iterp must be null or point to a context in rt. on success, the value of *iterp is modified so that repeated calls cycle through all the contexts in rt. description js_contextiterator steps through the set of contexts associated with the runtime rt. each call to js_contextiterator returns the next context in the cycle. iterp must point to a variable of
type jscontext *. if *iterp is null, js_contextiterator modifies it to point to the first jscontext in the list. otherwise *iterp must point to an existing context in rt, and js_contextiterator modifies it to point to the next context in the list, if any, and null otherwise. js_contextiterator returns the new value of *iterp. example the following code snippet illustrates how to cycle through the c...
JS_ConvertArgumentsVA
obsolete since jsapi 38this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. converts a series of js values, passed in a va_list, to their corresponding jsapi
types. syntax bool js_convertargumentsva(jscontext *cx, const js::callargs &args, const char *format, va_list ap); bool js_convertargumentsva(jscontext *cx, unsigned argc, jsval *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::callarg...
...ed in spidermonkey 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 should be one pointer for each converted value. the
type va_list is a standard feature of the c programming language. it is defined in <stdarg.h>. description js_convertargumentsva is to js_convertarguments as vprintf is to printf. see js_convertarguments for further information. if js_convertargumentsva successfully converts all arguments, it returns true. otherwise it returns f...
JS_DefineElement
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject or jsobject * the object on which to create the new property. index uint32_t the index of the property to define. value js::handlevalue or js::hand...
..._readonly, the setter method will not be called on this property. see also mxr id search for js_defineelement js_defineconstdoubles js_definefunction js_definefunctions js_defineobject js_defineproperties js_defineproperty js_definepropertywithtinyid js_deleteelement js_getarraylength js_getelement js_isarrayobject js_lookupelement js_newarrayobject js_setelement bug 959787 - changed parameter
types ...
JS_DefineFunctions
requires request. ...
...ties with jsprop_define_late flag should be defined on the object. ...
JS_DefineProperty
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object on which to create the new property. name or id const char * or const char16_t *or js::handleid the name of the new property. namelen size_t...
...ne a property without calling its getter.) if getter (or setter) is null, the new property will use the jsclass.getproperty (or jsclass.setproperty) callback from obj's class. if attrs contains the jsprop_getter (or jsprop_setter) flag, then getter (or setter) must point to a javascript function, not a c/c++ function. that is, it must be a jsobject * that points to a javascript function, cast to
type jspropertyop. for more about javascript getters and setters, see defining getters and setters. on success, js_defineproperty returns true. on error or exception, it returns false. see also mxr id search for js_defineproperty mxr id search for js_defineucproperty mxr id search for js_definepropertybyid js_defineelement bug 461163 bug 1113369 -- added desc and result parameters ...
JS_DeleteElement
requires request. ...
... js::handleobject object from which to delete an element. index uint32_t index number of the element to delete. result js::objectopresult & (out parameter) receives the result of the operation. description js_deleteelement removes a specified element or numeric property, index, from an object, obj. if an object references an element belonging to a proto
type, the element reference is removed from the object, but the proto
type's element is not deleted. if deletion is successful, js_deleteelement returns true. otherwise it returns false. for javascript 1.2 and earlier, if failure occurs because you attempt to delete a permanent or read-only element, js_deleteelement reports the error before returning false. for javascript 1.3 and later, the attempt is...
JS_DeleteElement2
eature 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. removes a specified element or numeric property from an object. renamed to js_deleteelement in jsapi 39 syntax bool js_deleteelement2(jscontext *cx, js::handleobject obj, uint32_t index, bool *succeeded); 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. obj js::handleobject object from which to delete an element. index uint32_t index number of the element to delete. succeeded bool * out parameter. o...
... index uint32_t index number of the element to delete. succeeded bool * out parameter. on success, *succeeded receives false if the property was not deleted because it is permanent and true otherwise. description js_deleteelement2 removes a specified element or numeric property, index, from an object, obj. if an object references an element belonging to a proto
type, the element reference is removed from the object, but the proto
type's element is not deleted. if deletion is successful, js_deleteelement2 stores true to *succeeded and returns true. otherwise it returns false and the value of *succeeded is undefined. notes per the ecma standard, js_deleteelement2 removes read-only properties from objects as long as they are not also permanent. for javascri...
JS_DeleteProperty
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object from which to delete a property. name or id const char * or jsid or const char16_t * name of the property to delete. namelen ...
...ect, obj. js_deletepropertybyid is the same but takes a jsid for the property name. these functions are identical to js_deleteproperty2 and js_deletepropertybyid2 except that they do not have an out parameter. first, a property lookup is performed. then one of the following cases applies: if obj has no property with the given name or id, or if obj inherits the specified property from its proto
type, then obj's jsclass.delproperty hook is called. no property is deleted, but this is not an error. if obj has the specified property but it is permanent, nothing happens. no property is deleted, but this is not an error. otherwise obj has a non-permanent own property with the given name or id. in this case, obj's jsclass.delproperty hook is called. if the hook returns false, the error is propaga...
JS_DeleteProperty2
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object from which to delete a property. name or id const char * or const char16_t or js::handleid name of the property to delete. nam...
...eded. it behaves like the javascript expression delete obj[name]. js_deleteucproperty2 is the unicode version of the function. js_deletepropertybyid2 is the same but takes a js::handleid for the property name. first, a property lookup is performed. then one of the following cases applies: if obj has no property with the given name or id, or if obj inherits the specified property from its proto
type, then *succeeded is set to true and obj's jsclass.delproperty hook is called (which may change *succeeded). no property is deleted, but this is not an error. if obj has the specified property but it is permanent, then *succeeded receives false. no property is deleted, but this is not an error. otherwise obj has a non-permanent own property with the given name or id. in this case, *succeeded is ...
JS_DumpNamedRoots
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. enumerate all the named roots in a runtime. syntax void js_dumpnamedroots(jsruntime *rt, void (*dump)(const char *name, void *rp, void *data), void *data); name
type description rt jsruntime * pointer to a jsruntime from which to dump named roots. dump void (*)(const char *, void *, void *) pointer to function that actually dumps the named roots. this may not be null. data void * a pointer that is passed to dump each time it is called. the javascript engine does not read from or write to this pointer at all. it is passed to the dump f...
...ven runtime rt. in pseudocode: /* pseudocode explanation of what js_dumpnamedroots does */ void js_dumpnamedroots(jsruntime *rt, dumpfn dump, void *data) { for each (root in rt->namedroots) dump(root.name, root.address, data); } callback syntax dump is a pointer to a function provided by the application. when js_dumpnamedroots calls it, it passes three arguments: argument
type description name const char * the name of the named root. rp void * a pointer to the rooted variable, array element, or field. this is the pointer that the application passed to js_addnamedroot. it points to a variable, array element, or field of
type jsval, jsobject *, jsstring *, or jsdouble *. data void * the data argument that the application pa...
JS_Enumerate
get an array of the enumerable properties of a given object. syntax jsidarray * js_enumerate(jscontext *cx, js::handleobject obj); name
type description cx jscontext * the context in which to enumerate object properties. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object whose properties are to be enumerated. description js_enumerate gets the ids of all own properties of the specified object, obj, that have the jsprop_enumerate attribute. ...
... request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object whose properties are to be enumerated. description js_enumerate gets the ids of all own properties of the specified object, obj, that have the jsprop_enumerate attribute. (the term own property refers to a property that is not inherited from the object's proto
type.) this is not quite the same behavior as a javascript for...in loop, which converts all property ids to strings and also enumerates inherited properties. this calls obj's jsclass.enumerate hook. on success, js_enumerate returns a pointer to the first element of an array of property ids. the application must free this array using js_destroyidarray. on error or exception, js_enumerate returns null.
JS_GET_CLASS
d 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 spidermonkey 1.8.8 when the signature of js_getclass() was changed 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 spidermonkey versions prior to spidermonkey 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(...
...uilds 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_class returns a pointer 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 spidermonkey 1.8.8 it no longer exists, because js_getclass's signature is the same in all build environments. see also bug 723517 ...
JS_GetClass
obj jsobject * object to get the class from. in spidermonkey versions prior to spidermonkey 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. ...
...et_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_getclass returns a pointer to the jsclass associated with a specified js object, obj. the application must treat the jsclass as read-only. if obj has no jsclass, this returns null. to check the
type of an object, use js_hasinstance instead. for a stricter, exact-match-only check, use js_instanceof or js_getinstanceprivate. see also mxr id search for js_getclass bug 723517 ...
JS_GetClassObject
get the builtin class constructor. syntax bool js_getclassobject(jscontext *cx, jsprotokey 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 jsprotokey the key of the proto
type. objp js::mutablehandle<jsobject*> out parameter. if successful, receive the class constructor. description js_getclassobject gets the builtin class costructor for the specified proto
type 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_getclassobje...
...jsobject*> out parameter. if successful, receive the class constructor. description js_getclassobject gets the builtin class costructor for the specified proto
type key. ...
JS_GetElement
find a specified numeric property of an object and return its current value. syntax bool js_getelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mutablehandlevalue vp); name
type description cx jscontext * the context in which to perform the property lookup. 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 element. index uint32_t index of the element to look up. ...
...request on this jscontext. obj js::handleobject the object to search for the element. index uint32_t index of the element to look up. vp js::mutablehandlevalue out parameter. on success, *vp receives the current value of the element, if it exists, and undefined otherwise. description js_getelement examines a specified js object, obj, and its proto
type chain, for an element or numeric property numbered index. if the element exists, js_getelement sets *vp to the element's current value. if not, it sets *vp to undefined and returns true (to indicate no error occurred). if the search fails with an error or exception, js_getelement returns false, and the value left in *vp is undefined. see also mxr id search for js_getelement js_defineelement js_d...
JS_GetEmptyStringValue
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description js_getemptystringvalue returns the empty string as a js::value. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description js_getemptystringvalue returns the empty string as a js::value. ...
JS_GetGCParameter
collection. syntax uint32_t js_getgcparameter(jsruntime *rt, jsgcparamkey key); void js_setgcparameter(jsruntime *rt, jsgcparamkey key, uint32_t value); uint32_t js_getgcparameterforthread(jscontext *cx, jsgcparamkey key); // added in spidermonkeysidebar 17 void js_setgcparameterforthread(jscontext *cx, jsgcparamkey key, uint32_t value); // added in spidermonkeysidebar 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 jsgcparamkey specifies which garbage collection parameter to get or set. value uint32_t (js_setgcparameter only) the value to assign to the par...
... 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 jsgcparamkey specifies which garbage collection parameter to get or set. value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
JS_GetOwnPropertyDescriptor
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 or const char16_t the name of the property to look up. desc js::mutablehandle<jspropertydescriptor> out ...
...ablehandle<jspropertydescriptor> out parameter. on success, if no property is found, desc->obj is set to null. if a property is found, *desc receives a description of it. description js_getownpropertydescriptor and js_getownpropertydescriptorbyid get a detailed description of that property (returned in desc->obj). if desc->obj is null, then this property was not found on the proto
type chain. see also mxr id search for js_getownpropertydescriptor mxr id search for js_getownpropertydescriptorbyid mxr id search for js_getownucpropertydescriptor js_getpropertydescriptor js_getpropertydescriptorbyid jspropertydescriptor bug 893186 bug 1135731 -- added js_getownpropertydescriptor ...
JS_GetParent
description js_getparent retrieves the parent object of obj, or null if obj does not have a parent. ...
... does not have a parent. warning: the result may be an internal-use-only object. such an object 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.proto
type.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]),...
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_GetPrivate
description js_getprivate accesses an object's private data field. obj must be an instance of a class that has the jsclass_has_private flag. new objects' private data fields are initially null. if obj is a function object, as reported by js_objectisfunction, the private data is a pointer to a jsfunction. ...
...a function object, as reported by js_objectisfunction, the private data is a pointer to a jsfunction. (but consider using js_valuetofunction instead to access it.) warning: it is dangerous to call js_getprivate on a jsobject * unless the object's jsclass is known. if the object is not of the expected jsclass, the result of js_getprivate would probably be null or a pointer to some unexpected
type of data. casting that pointer to the desired
type and using it could then cause a crash or worse. getters, setters, and methods of custom classes should use js_getinstanceprivate instead to avoid this danger. however, it is safe to use js_getprivate in a finalizer. see also mxr id search for js_getprivate ...
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_getucproperty only) the lengt...
...perty to look up. namelen size_t (in js_getucproperty only) the length of name, in characters; or -1 to indicate that name is null-terminated. vp js::mutablehandlevalue out parameter. on success, *vp receives the current value of the property, or undefined if no such property is found. description js_getproperty examines a specified js object obj and its proto
type chain for a property with the specified name. it behaves like the javascript expression obj[name]. js_getucproperty is the unicode version of the function. js_getpropertybyid is the same but takes a js::handleid for the property name. in the simplest case, js_getproperty stores the value of the property in *vp and returns true. however, several different hooks can affect property gets. the full ...
JS_GetPropertyAttributes
could be removed at any time. try to avoid using it. get the attributes of a specified property. syntax jsbool js_getpropertyattributes(jscontext *cx, jsobject *obj, const char *name, unsigned int *attrsp, jsbool *foundp); jsbool js_getucpropertyattributes(jscontext *cx, jsobject *obj, const jschar *name, size_t namelen, unsigned int *attrsp, jsbool *foundp); name
type description cx jscontext * the context in which to look up property attributes. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the object that has the property to be queried. name const char * or const jschar * name of the property from which to retrieve attributes. namelen s...
...js_getpropertyattributes retrieves the property attributes of the property with the given name on a given object, obj. js_getucpropertyattributes is the unicode version of the function. if an error occurs, the return value is js_false, and the values left in *attrsp and *foundp are unspecified. if obj does not have the specified property, or if it inherits it from some other object (on its proto
type chain, for example), then *foundp is set to js_false. the value left in *attrsp is unspecified. the return value is js_true (to indicate that no error occurred). if the property exists and belongs to obj, then *foundp is set to js_true, *attrsp is set to the logical or of zero or more property attributes flags, and the function returns js_true. see also property attributes bug 893186 ...
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 examine. namelen siz...
...success, these functions also get the getter and setter functions for the property. the js_getter (or js_setter) attribute indicates that the property's getter (or setter) is a javascript function, not a c/c++ function. when this attribute is present, the value stored in getterp (or setterp) does not really point to a c/c++ function; it is a jsobject *, pointing to a javascript function, cast to
type jspropertyop. the application may cast it back to jsobject * (using a c cast or a c++ reinterpret_cast) to access the getter/setter function object. for more information about javascript getters and setters, see defining getters and setters. property attributes bug 893186 ...
JS_GetPropertyDefault
ey 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 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. def js::handlevalue default value if the property is not found. ...
...or id const char * or js::handleid name of the property to look up. def js::handlevalue default value if the property is not found. vp js::mutablehandlevalue out parameter. on success, *vp receives the current value of the property, or undefined if no such property is found. description js_getpropertydefault examines a specified js object obj and its proto
type chain for a property with the specified name. on success, these functions set *vp to the current value of the property, or def if obj has no such property, and return true. on an error or exception, these functions return false, and the value left in *vp is undefined. see also bug 905774 ...
JS_GetPropertyDescriptor
ption of that property. syntax bool js_getpropertydescriptor(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandle<jspropertydescriptor> desc); // added in spidermonkey 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. desc js::mutablehandle<jspropertydescriptor> out parameter. on succ...
...roperty to look up. desc js::mutablehandle<jspropertydescriptor> out parameter. on success, if no property is found, desc->obj is set to null. if a property is found, *desc receives a description of it. description js_getpropertydescriptor and js_getpropertydescriptorbyid find a specified property of an object and gets a detailed description of that property on the proto
type chain (returned in desc->obj). if desc->obj is null, then this property was not found on the proto
type chain. see also mxr id search for js_getpropertydescriptor mxr id search for js_getpropertydescriptorbyid js_getownpropertydescriptor js_getownpropertydescriptorbyid jspropertydescriptor bug 482381 - added js_getpropertydescriptorbyid bug 893186 - added js_getpropertydescriptor ...
JS_GetRuntimePrivate
it is especially useful for storing data which callbacks may then easily access. ...
...it is especially useful for storing data which callbacks may then easily access. js_getruntimeprivate gets the value of this field and js_setruntimeprivate sets it. ...
JS_GetSecurityCallbacks
callbacks const jssecuritycallbacks * a pointer to the new callbacks for the runtime. callback structure struct jssecuritycallbacks { jscspevalchecker contentsecuritypolicyallows; // added in spidermonkey 1.8.5 jssubsumesop subsumes; // added in spidermon...
...use null is not needed. subsumes jssubsumesop a pointe to the function which returns whether the first principal subsumes the second. use null is not needed. description js_setsecuritycallbacks sets the runtim...
JS_HasProperty
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_hasucproperty) the length ...
...n 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_hasucproperty) the length of name in characters, or -1 to indicate that name is null-terminated. foundp bool * non-null pointer to a variable of
type bool. on success, js_hasproperty stores true in this variable if obj has a property with the given name, and false if not. description js_hasproperty searches an object, obj, and its proto
type chain, for a property with the specified name. it behaves like the javascript expression name in obj. js_hasucproperty is the corresponding unicode api. js_haspropertybyid is the same but takes a js::...
JS_InitStandardClasses
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handle<jsobject*> the global object to initialize. ...
... initializes the built-in javascript global properties. these include all the standard ecmascript global properties defined in ecma 262-3 §15.1: array, boolean, date, decodeuri, decodeuricomponent, encodeuri, encodeuricomponent, error, eval, evalerror, function, infinity, isnan, isfinite, math, nan, number, object, parseint, parsefloat, rangeerror, referenceerror, regexp, string, syntaxerror,
typeerror, undefined, and urierror as well as a few spidermonkey-specific globals, depending on compile-time options: escape, unescape, uneval, internalerror, script, xml, namespace, qname, file, generator, iterator, and stopiteration, as of spidermonkey 1.7. these global objects, functions, constructors, and constants are created as properties of obj. as a side effect, js_initstandardclasses e...
JS_New
this article covers features introduced in spidermonkey 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. args js::handlevaluearray & an array of argument values to pass to the constructor. added in spidermonkey 38 argc un...
...sapi 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_new(cx, ctor, args) is equivalent to the javascript expression new ctor(...args), and js_new(cx, ctor, argc, argv) is equivalent to the javascript expression new ctor(argv[0], argv[1], ... argv[argc-1]). if ctor is not an object that can be used as a constructor, a
typeerror is raised. on success, js_new returns a pointer to the new object. on error, it returns null. see also mxr id search for js_new bug 480850 - added bug 959787 - added args parameter ...
JS_NewGlobalObject
this article covers features introduced in spidermonkey 17 create a new javascript object for use as a global object. 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. clasp->flags must have the jsclass_global_flags bits set. the caller must ensure that the jsclass remains alive thro...
... hookoption js::onnewglobalhookoption see debugger api hook added in spidermonkey 31 options const js::compartmentoptions & the option for new compartment (passed to jscompartment constructor). added in spidermonkey 31 description js_newglobalobject creates a new global object based on the specified class. the new object has no parent. it initially has no proto
type either, since it is typically the first object created; call js_initstandardclasses to create all the standard objects, including object.proto
type, and set the global object's proto
type. the constructor clasp->construct is not called. on success, js_newglobalobject returns a pointer to the new object. otherwise it returns null. debugger api hook during global creation, we fire notification...
JS_NewPropertyIterator
requires request. ...
... jscontext. obj js::handle<jsobject*> the object whose properties are to be enumerated. description create an object to iterate over the enumerable own properties of obj, in arbitrary order. (this differs from longstanding for..in loop order, which uses the order in which obj's properties were defined. note also that while for..in includes properties inherited from proto
types, iterator objects do not.) on success, this returns an iterator object that can be passed to js_nextproperty to fetch the property ids. on error, it returns null. the iterator object created by this function is not a javascript iterator. it is an opaque object with no properties visible from javascript. see also bug 1081660 ...
JS_NewScriptObject
is 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. return the javascript script object that wraps a compiled script. the compiled script and its parts live until the script object is garbage collected. syntax jsobject * js_newscriptobject(jscontext *cx, jsscript *script); name
type description cx jscontext * the context in which to create the new script object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. script jsscript * the compiled script for which to create a new script object. description js_newscriptobject returns the script object associated with the given jsscript. every jss...
...ct. as long as the script object is reachable, the jsscript and its components are protected from garbage collection; when the script object is collected, the jsscript and its contents are freed. once you have created a script, you should immediately ensure that its script object is reachable (perhaps by using js_addroot or js_enterlocalrootscope). a script object has no properties, and its proto
type is object.proto
type. so a script object can be used to expose a jsscript to javascript code, but the 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 obje...
JS_NewStringCopyN
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. s const char* or const char16_t * pointer to the array of characters containing the text for the js string to create. ...
...ing the text for the js string to create. n size_t number of characters to copy from s into the new string. description js_newstringcopyn allocates space for a javascript string and its underlying storage, and copies n characters from a c character array, s, into the new jsstring. js_newucstringcopyn is the unicode version of the function. the two functions differ only in the
type of the character array s; both functions create ordinary javascript strings, and all javascript strings are made up of 16-bit characters. if the array s contains more than n characters, the new string contains a truncated version of the original string. the string may contain null characters ('\0'). they are copied into the new string like any other character. you can use js_newstringcopyn to cop...
JS_PreventExtensions
requires request. ...
...nvenient 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 spidermonkey 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, and because the object denied the attempt. the first case occurs when something went wrong internally, not necessarily because the object chose not to become non-extensi...
JS_RemoveExternalStringFinalizer
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. unregister a custom string memory manager. syntax int js_removeexternalstringfinalizer(jsstringfinalizeop finalizer); name
type description finalizer jsstringfinalizeop the finalizer to remove. description remove finalizer from the global gc finalizers table, returning its
type code if found, -1 if not found. as with js_addexternalstringfinalizer, there is a threading restriction if you compile the engine js_threadsafe: this function may be called for a given finalizer pointer on only one thread; different threads may call to remove distinct finalizers safely. you must...
...otherwise, string data will be leaked by the gc, for want of a finalizer to call. ...
JS_ResolveStandardClass
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject an object to resolve id to a standard class. ...
... an id of a standard class name, which must contain either a string or an int. resolved bool * out parameter. if the id is resolved, true is stored into *resolved if success. false otherwise. description js_resolvestandardclass resolves id, which must contain either a string or an int, to a standard class name in obj if possible, defining the class's constructor and/or proto
type and storing true in *resolved. if id does not name a standard class or a top-level property induced by initializing a standard class, store false in *resolved and just return true. return false on error, as usual for bool result-
typed api entry points. this api can be called directly from a global object class's resolve op, to define standard classes lazily. the class's enumerate op should call ...
JS_SetAllNonReservedSlotsToUndefined
requires request. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object from which to delete all properties. description js_setallnonreservedslotstoundefined assignes undefined to all of obj's own properties, except the special __proto__ and __parent__ properties, in a single operation. properties belonging to objects on obj's proto
type chain are not affected. see also mxr id search for js_setallnonreservedslotstoundefined bug 749371 ...
JS_SetCallReturnValue2
re 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. causes a native to return a reference value (as allowed by ecma 262-3 §11.2.3). syntax void js_setcallreturnvalue2(jscontext *cx, jsval v); name
type description cx jscontext * the context in which the native function is running. v jsval the id of the property of the reference value to be returned from the native. description calling js_setcallreturnvalue2 indicate...
... cx jscontext * the context in which the native function is running. v jsval the id of the property of the reference value to be returned from the native. description calling js_setcallreturnvalue2 indicates to the runtime that the native will return a value of
type reference. the native must store the object part of the reference value in *rval, and the argument v gives the id of the property part of the reference value. this reference value can then be used as an lvalue in script. an example is in js/src/js.c; searching for js_setcallreturnvalue2 should find it. see also bug 509098 ...
JS_SetContextCallback
specifies a callback function that is automatically called whenever a jscontext is created 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 spidermonkey 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 abo...
... 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 spidermonkey 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 called again. ...
JS_SetFunctionCallback
nd profilers since it works across all run modes (interpreter, method jit, trace jit). using this function may have a significant performance impact. see function tracing for an example. note: this method is only available if moz_trace_jscalls was defined at compile time using --enable-trace-jscalls. syntax void js_setfunctioncallback(jscontext *cx, jsfunctioncallback fcb); 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. fcb jsfunctioncallback the callback to execute when javascript functions are invoked and exited. specify null to stop calling the current callback. the callback must not modify t...
...time a javascript function is invoked or exits. fcb is a pointer to the c function to call. note that debuggers should probably use js_setcallhook in preference to this function, because it is invoked when the javascript stack is guaranteed to be in a consistent state (and therefore it is valid to inspect and modify local variables, generate stack traces, and set breakpoints.) callback syntax
typedef void (* jsfunctioncallback)(const jsfunction *fun,const jsscript *scr, const jscontext *cx, int entering); name
type description fun const jsfunction * the javascript function being invoked or exited. scr const jsscript * the script being executed. cx jscontext * the javascript context in which the script is b...
JS_SetGCCallback
specify a new callback function for the garbage collector. syntax void js_setgccallback(jsruntime *rt, jsgccallback cb, void *data); jsgccallback js_setgccallback(jscontext *cx, jsgccallback cb); // obsolete since jsapi 13 jsgccallback js_setgccallbackrt(jsruntime *rt, jsgccallback cb); // obsolete since jsapi 13 name
type description cx jscontext * (for the old js_setgccallback) any jscontext. ...
...runtime *rt, jsgccallback cb); // obsolete since jsapi 13 name
type description cx jscontext * (for the old js_setgccallback) any jscontext. the gc callback of the associated jsruntime is set. rt jsruntime * the jsruntime for which to set the gc callback. cb jsgccallback pointer to the new callback function to use. callback syntax
typedef enum jsgcstatus { jsgc_begin, jsgc_end, jsgc_mark_end, // obsolete since jsapi 13 jsgc_finalize_end // obsolete since jsapi 13 } jsgcstatus;
typedef void (* jsgccallback)(jsruntime *rt, jsgcstatus status, void *data); name
type description cx jscontext * the context in which garbage collection is happening. status jsgcstatus one...
JS_SetOperationCallback
obsolete since jsapi 30this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.5 set a callback function that is automatically called periodically while javascript code runs. these methods/
types are renamed to js_setinterruptcallback, js_getinterruptcallback, js_requestinterruptcallback and jsinterruptcallback in spidermonkey 30. syntax void js_setoperationcallback(jscontext *cx, jsoperationcallback callback); jsoperationcallback js_getoperationcallback(jscontext *cx); void js_triggeroperationcallback(jsruntime *rt); name
type description cx jscontext * a context. rt jsruntime *...
... the callback may use this context to call jsapi functions, but it should first use js_setoperationcallback to set the context's operation callback to null. ...
JS_SetPrivate
it is especially useful for storing c/c++ data that should not be directly visible to scripts. for example, a socket class might use the private data field to store the socket handle. ...
...it is especially useful for storing c/c++ data that should not be directly visible to scripts. for example, a socket class might use the private data field to store the socket handle. js_setprivate sets an object's private data field. ...
JS_THREADSAFE
s to js_beginrequest() and js_endrequest(). js_beginrequest(cx); /* ... do jsapi stuff ... */ js_endrequest(cx); a request is always associated with a specific jscontext and runs from start to finish on a single thread. most jsapi functions require the caller to be in a request. ...
...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()). in particular, jsnative callbacks provide a request. ...
JS_ValueToString
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
...is converted to a string as described above and conversion succeeds. otherwise, the resulting object's jsclass.convert callback is called. for standard classes, this is js_convertstub, which simply calls v.valueof() if present. if the convert callback produces a primitive value, the value is converted to a string as described above and conversion succeeds. otherwise conversion fails with a
typeerror. on success, js_valuetostring returns a pointer to a string. on error or exception, it returns null. this happens, for example, if v is an object and v.tostring() throws an exception. the resulting jsstring is subject to garbage collection. protect it using a local root, an object property, or the js_addroot function. see also bug 933834 js::tostring ...
JSDBGAPI
_settrap js_gettrapopcode js_cleartrap js_clearscripttraps js_clearalltraps js_handletrap js_setinterrupt js_clearinterrupt watchpoints js_setwatchpoint js_clearwatchpoint js_clearwatchpointsforobject js_clearallwatchpoints inspecting the stack js_pctolinenumber js_linenumbertopc js_getfunctionscript js_getfunctionnative js_getfunctionfastnative js_getscriptprincipals
typedef jsstackframe js_frameiterator js_getframescript js_getframepc js_getscriptedcaller js_stackframeprincipals js_evalframeprincipals js_getframeannotation js_setframeannotation js_getframeprincipalarray js_isnativeframe js_getframeobject js_getframescopechain js_getframecallobject js_getframethis js_getframefunction js_getframefunctionobject js_isconstructorframe js_isdebugger...
...etframereturnvalue js_setframereturnvalue js_getframecalleeobject js_getscriptfilename js_getscriptbaselinenumber js_getscriptlineextent js_getscriptversion js_gettopscriptfilenameflags js_getscriptfilenameflags js_flagscriptfilenameprefix jsfilename_null jsfilename_system jsfilename_protected evaluating debug code js_evaluateinstackframe examining object properties
typedef jspropertydesc jspd_enumerate jspd_readonly jspd_permanent jspd_alias jspd_argument jspd_variable jspd_exception jspd_error
typedef jspropertydescarray js_propertyiterator js_getpropertydesc js_getpropertydescarray js_putpropertydescarray hooks js_setdebuggerhandler js_setsourcehandler js_setexecutehook js_setcallhook js_setobjecthook js_setthrowhook js_setdebu...
SpiderMonkey 1.8
he number 7 in x. now this statement stores the string "7" in x. the new behavior conforms to the ecmascript standard, ecma 262-3 §11.13.1. in certain cases, the javascript engine no longer calls jsclass.resolve callbacks repeatedly, as it did in previous versions. specifically, if a property lookup first calls a resolve hook which does not define the property, then finds the property on a proto
type, that result can be cached. future lookups for the same property on the same sort of object may bypass the resolve hook. js_newdouble is now deprecated. use js_newdoublevalue. the security apis js_setcheckobjectaccesscallback, js_setprincipalstranscoder, and js_setobjectprincipalsfinder are still present but are deprecated in this release. in spidermonkey 1.8.1 they will be removed and replaced...
...ignature jsfastnative instead of jsnative. jsfastnative can be significantly faster, but applications that use spidermonkey's fine-grained security features should heed the warning in its api documentation. new macros js_fs, js_fn, and js_fs_end are recommended for populating jsfunctionspec arrays. js_newobjectwithgivenproto is exactly like js_newobject except that it doesn't use a default proto
type object if you pass null. instead the object is created with no proto
type. js_alreadyhasownproperty and friends are new functions for examining an object without triggering resolve hooks. it was possible to configure spidermonkey 1.7 to treat c/c++ char strings as utf-8 by compiling with a non-default compiler option. in spidermonkey 1.8, it is no longer necessary to make a special build to get ...
TPS Tests
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 when it hits that phase. asset lists a test file will contain one or more asset lists, which are lists of bookmarks, passwords, or other
types of browser data that are relevant to sync. the format of these asset lists vary somwhat depending on asset
type. bookmarks passwords history tabs form data prefs test phases the phase blocks are where the action happens! they tell tps what to do. each phase block contains the name of a phase, and a list of actions. tps iterates through the phase blocks in alphanumeric order, and for e...
...the phase function with the name of the phase and a list of actions to perform: phase('phase1', [ [bookmarks.add, bookmarks_initial], [passwords.add, passwords_initial], [history.add, history_initial], [sync, sync_wipe_server], ]); each action is an array, the first member of which is a function reference to call, the other members of which are parameters to pass to the function. each
type of asset list has a number of built-in functions you can call, described in the section on asset lists; there are also some additional built-in functions. built-in functions sync(options) initiates a sync operation. if no options are passed, a default sync operation is performed. otherwise, a special sync can be performed if one of the following are passed: sync_wipe_server, sync_wipe_clien...
Security and the jar protocol
lock-remote-files preference to false. java archive (jar) files are simply zip compressed bundles of files. firefox 2.0.0.10 (and firefox 1.5.0.15) fixed a potential security issue in the same origin policy when the jar: protocol was used to load data. prior to this change, specifying the jar: protocol caused firefox to assume that the file being retrieved is a jar file, regardless of its mime
type (in other words, its mime
type was assumed to be application/zip, regardless of what it actually was). this means that no matter what the file's real contents are, as far as firefox is concerned, it was a zip archive. this ordinarily isn't a big deal, since site developers wouldn't put up dangerous files and set them up to download like zip archives. however, if a site allows file uploads, zip f...
...te developers wouldn't put up dangerous files and set them up to download like zip archives. however, if a site allows file uploads, zip files are typically treated as relatively innocuous by web sites in that situation, since they're not executable. unless, of course, the browser thinks it's a jar file. so starting with gecko 1.8.0.15 and 1.8.1.10, the jar: protocol is only allowed if the mime
type of the file is application/java-archive. a site that serves a file with that
type is essentially promising that it has vetted the content and that it is in fact safe to download and execute. any other file
type results in an "unsafe file
type" error. ...
Setting up an update server
ept paths with spaces. serving the update preparing the update files first, create the directory that updates will be served from and put the mar file in it. then, create a file within called update.xml with these contents, replacing <mar name>, <hash> and <size> with the mar's filename, its sha512 hash, and its file size in bytes. ...
...from and put the mar file in it. then, create a file within called update.xml with these contents, replacing <mar name>, <hash> and <size> with the mar's filename, its sha512 hash, and its file size in bytes. ...
Signing Mozilla apps for Mac OS X
"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. ...
...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. ...
Gecko events
« at apis support page this page offers a list of accessibility-related events supported by gecko. event constants are defined in nsiaccessibleevent interface. event_dom_create an object has been created. is supported: yes event_dom_destroy an object has been destroyed. is supported: yes event_dom_significant_change an object's properties or content have changed significantly so that the
type of object has really changed, and therefore the accessible should be destroyed or recreated. is supported: yes event_asynch_show a hidden object is shown -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_hide an object is hidden -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_significant_change an object had a signifi...
...re the accessible should be destroyed or recreated. is supported: yes event_asynch_show a hidden object is shown -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_hide an object is hidden -- this is a layout occurance and is thus asynchronous is supported: yes event_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 supporte...
Frecency algorithm
the word "frecency" itself is a combination of the words "frequency" and "recency." the default frecency value for all valid entries is -1. places with this value can show up in autocomplete results. invalid places have a frecency value of zero, and will not show up in autocomplete results. examples of invalid places are "place:" queries, and unvisited livemark feed entries. ...
...this value can show up in autocomplete results. invalid places have a frecency value of zero, and will not show up in autocomplete results. examples of invalid places are "place:" queries, and unvisited livemark feed entries. the frecency calculation process for the 10 most recent visits (where 10 is determined by places.frecency.numvisits): .. determine percentage bonus for
type of visit (ie: the "transition
type"): .... 0 (places.frecency.embedvisitbonus) .... 120 (places.frecency.linkvisitbonus) .... 200 (places.frecency.
typedvisitbonus) .... 140 (places.frecency.bookmarkvisitbonus) .... 0 (places.frecency.downloadvisitbonus) .... 0 (places.frecency.permredirectvisitbonus) .... 0 (places.frecency.tempredire...
extIApplication
tiapplication.idl. implemented via xpcom service for extiapplication: see the instructions on the fuel (firefox), steel (thunderbird) and smile (seamonkey) 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 readonly attribute exticonsole the console object for the application. extensions readonly attribute extiextensi...
...rences object for the application. defaults to an empty root branch. storage readonly attribute extisessionstorage the storage object for the application. events readonly attribute extievents the events object for the application. supports: "load", "ready", "quit", "unload" the following interfaces are only available to firefox: attribute
type description bookmarks readonly attribute fuelibookmarkroots the root bookmarks object for the application. windows readonly attribute nsivariant an array of browser windows within the application. activewindow readonly attribute fueliwindow the currently active browser window. methods quit() attempts to shutdown the application. it is poss...
extIPreferenceBranch
: see the instructions on the fuel (firefox), steel (thunderbird) and smile (seamonkey) 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 branch root. all readonly attribute nsivariant array of extipreference listing all preferences in this branch. events readonly attribute extievents the events object for the preferences supports: "change" methods has() check to see if a preference exists. boolean has(in astring an...
...alue of a preference. this will be passed back to you without any processing and can be something which would not be valid as a preference. for example, null/undefined/an object. return value the value of the preference or the given default value if preference does not exists. the use of a variant as the return value means that to javascript code the value will appear as a value of the same
type as is used in the preferences file and no coercion will occur. a quoted string in the preference file will always appear as a string, even if the value of the string is "true" or "false". an integer preference appears as a javascript number, and a boolean appears as a javascript boolean. there are no other
types supported by the preference subsystem. setvalue() sets the value of a preference...
extISessionStorage
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 (seamonkey) pages. method overview these methods are usually accessed via application.storage. ...
...on the fuel (firefox), steel (thunderbird) and smile (seamonkey) 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 events object for the storage supports: "change" methods has() determines if a storage item exists with the given name. boolean has(in astring aname) parameters aname the name of an item return value true if an item exists with the given name, false otherwise. set() sets the value of a storage item with th...
Fun With XBL and XPConnect
dget holds onto an xpcom object that is the auto complete engine that will perform our auto complete lookups. <binding name="autocomplete" extends="xul:box"> <content> <xul:textfield class="addressingwidget"/> <xul:menupopup/> </content> <implementation> <property name="autocompletesession"> <![cdata[ components.classes['component://netscape/messenger/autocomplete&
type=addrbook']. getservice(components.interfaces.nsiautocompletesession); ]]> </property> so we've defined a property on the widget called autocompletesession. the initial value of this property evaluates to an xp-connect object. now accesses to autocompletesession will return the xp-connect object. exposing the xpcom interfaces one somewhat nasty trick you need to do is to manu...
...to complete 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. ...
Components.utils
getcomponentsforscope() this seemingly-paradoxical api allows privileged code to explicitly give unprivileged code a reference to its own components object (whereas it's normally hidden away on a scope chain visible only to xbl methods). see also specialpowers.getcomponents. getglobalforobject() returns the global object with which a given object is associated (through its proto
type chain at birth, for example). getjstestingfunctions() getobjectprincipal() gets the nsiprincipal for the given javascript object. getweakreference() gets a weak reference for the object passed in. import() loads a js module into the current script, without sharing a scope. importglobalproperties() specify a list of constructors to im...
... setgczeal() sets the level of garbage collection level for full garbage collection. see js_setgczeal for details; this method calls through to that with the specified value as the zeal value. unwaivexrays() undoes waivexrays(): reapplies the xray filtering protection. waivexrays() removes the filtering provided by an xray. properties property
type description sandbox nsixpccomponents_utils_sandbox creates sandbox objects for use with evalinsandbox(). ion boolean read only. strict boolean strict mode is enabled. this reflects the value of the javascript environment's option by the same name. read only. strict_mode boolean read only. werror boolean warnings sho...
Core XPCOM functions
for a list of defined result values, see error codes returned by mozilla apis. ...
...for a list of defined result values, see error codes returned by mozilla apis. ...
EndReading
the ns_cstringgetdata function can be used to determine if a nsacstring instance has null-terminated storage. example code see beginreading for an example. ...
...the ns_cstringgetdata function can be used to determine if a nsacstring instance has null-terminated storage. example code see beginreading for an example. ...
Insert
« xpcom api reference summary the insert family of functions inserts a value into a string's internal buffer. void insert( const self_
type& astring, index_
type aposition ); parameters astring [in] a nsacstring to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. void insert( const char_
type* adata, index_
type aposition, size_
type adatalength = pr_uint32_max ); parameters adata [in] a raw character array to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwis...
...nt32_max ); parameters adata [in] a raw character array to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwise, adata need not be null terminated. void insert( char_
type achar, index_
type aposition ); parameters achar [in] a character to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. remarks if insufficient memory is available to perform the assignment, then the string's internal buffer will point to a static empty (zero-length) buffer. ...
Replace
« xpcom api reference summary the replace family of functions sets the value of a string's internal buffer. void replace( index_
type acutstart, index_
type acutlength, const self_
type& astring ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. astring [in] a nsacstring to append to this string. void replace( index_
type acutstart, size_
type acutlength, const char_
type* adata, size_
type adatalength = pr_uint32_max ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. adata [in] a raw character array...
...the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. adata [in] a raw character array to append to this string. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwise, adata need not be null terminated. void replace( index_
type acutstart, index_
type acutlength, char_
type achar ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. achar [in] a character to append to this string. remarks if insufficient memory is available to perform the assignment, then the string's internal buffer wi...
EndReading
the ns_cstringgetdata function can be used to determine if a nsastring instance has null-terminated storage. example code see beginreading for an example. ...
...the ns_cstringgetdata function can be used to determine if a nsastring instance has null-terminated storage. example code see beginreading for an example. ...
Insert
« xpcom api reference summary the insert family of functions inserts a value into a string's internal buffer. void insert( const self_
type& astring, index_
type aposition ); parameters astring [in] a nsastring to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. void insert( const char_
type* adata, index_
type aposition, size_
type adatalength = pr_uint32_max ); parameters adata [in] a raw character array to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwise...
...nt32_max ); parameters adata [in] a raw character array to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwise, adata need not be null terminated. void insert( char_
type achar, index_
type aposition ); parameters achar [in] a character to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. remarks if insufficient memory is available to perform the assignment, then the string's internal buffer will point to a static empty (zero-length) buffer. ...
Replace
« xpcom api reference summary the replace family of functions sets the value of a string's internal buffer. void replace( index_
type acutstart, index_
type acutlength, const self_
type& astring ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. astring [in] a nsastring to append to this string. void replace( index_
type acutstart, size_
type acutlength, const char_
type* adata, size_
type adatalength = pr_uint32_max ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. adata [in] a raw character array ...
...the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. adata [in] a raw character array to append to this string. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwise, adata need not be null terminated. void replace( index_
type acutstart, index_
type acutlength, char_
type achar ); parameter acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. achar [in] a character to append to this string. remarks if insufficient memory is available to perform the assignment, then the string's internal buffer wil...
nsDependentCString
class declaration nstdependentstring_chart stores a null-terminated, immutable sequence of characters. subclass of nststring that restricts string value to an immutable character sequence. this class does not own its data, so the creator of objects of this
type must take care to ensure that a nstdependentstring continues to reference valid memory for the duration of its use. method overview constructors assertvalid rebind operator= get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion app...
...data(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_
type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source stri...
nsDependentString
class declaration nstdependentstring_chart stores a null-terminated, immutable sequence of characters. subclass of nststring that restricts string value to an immutable character sequence. this class does not own its data, so the creator of objects of this
type must take care to ensure that a nstdependentstring continues to reference valid memory for the duration of its use. method overview constructors assertvalid rebind operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint a...
...ichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_
type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
operator=
« xpcom api reference summary this operator is a shortcut for the inherited nsacstring::assign family of functions. self_
type& operator=( const self_
type& astring ); parameters astring [in] a nsembedcstring to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. self_
type& operator=( const abstract_string_
type& astring ); parameters astring [in] a nsacstring to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. self_
type& operator=( const char_
type* adata ); parameters adata [in] a raw character array to append to this string. return values this operator returns a reference back to the object bein...
... [in] a nsacstring to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. self_
type& operator=( const char_
type* adata ); parameters adata [in] a raw character array to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. self_
type& operator=( char_
type achar ); parameters achar [in] a character to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. see also nsacstring::assign ...
operator=
« xpcom api reference summary this operator is a shortcut for the inherited nsastring::assign family of functions. self_
type& operator=( const self_
type& astring ); parameters astring [in] a nsembedstring to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. self_
type& operator=( const abstract_string_
type& astring ); parameters astring [in] a nsastring to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. self_
type& operator=( const char_
type* adata ); parameters adata [in] a raw character array to append to this string. return values this operator returns a reference back to the object being m...
... [in] a nsastring to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. self_
type& operator=( const char_
type* adata ); parameters adata [in] a raw character array to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. self_
type& operator=( char_
type achar ); parameters achar [in] a character to append to this string. return values this operator returns a reference back to the object being modified to allow operator chaining. see also nsastring::assign ...
RefPtr
refptr (formerly known as nsrefptr, see bug 1207245) is a general class to implement reference counting pointers for objects. it is similar to nscomptr, but does not require that the
type be an xpcom interface. like with nscomptr, it is the responsibility of the object itself to implement reference counting. this is done using the functions addref() and release(), which respectively modify a variable of
type nsautorefcnt, which basically is a wrapper around a count of the number of references refering to the class. when should i use nscomptr versus refptr? the rules are simple: use nscomptr to hold pointers to xpcom interfaces, and use refptr to hold pointers to concrete class, even if the concrete class implements one or more xpcom interfaces. so for xpcom interfaces: nscomptr<ns...
...} see this post for more details. ...
nsXPIDLCString
class declaration nstxpidlstring extends nststring such that: (1) mdata can be null (2) objects of this
type can be automatically cast to |const chart*| (3) getter_copies method is supported to adopt data allocated with ns_alloc, such as "out string" parameters in xpidl. names: nsxpidlstring for wide characters nsxpidlcstring for narrow characters method overview constructors operator const char* operator[] operator= get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appen...
...data(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_
type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source stri...
nsXPIDLString
class declaration nstxpidlstring extends nststring such that: (1) mdata can be null (2) objects of this
type can be automatically cast to |const chart*| (3) getter_copies method is supported to adopt data allocated with ns_alloc, such as "out string" parameters in xpidl. names: nsxpidlstring for wide characters nsxpidlcstring for narrow characters method overview constructors operator const prunichar* operator[] operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat ...
...ichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_
type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
XPCOM glue classes
these routines allow easy access to xpcom's global nsimemory implementation without having to go through the service manager to get it.nspromiseflatcstringclass declarationnspromiseflatstringclass declarationnsrefptrrefptr (formerly known as nsrefptr, see bug 1207245) is a general class to implement reference counting pointers for objects. ...
...formerly known as nsrefptr, see bug 1207245) is a general class to implement reference counting pointers for objects. it is similar to nscomptr, but does not require that the
type be an xpcom interface. like with nscomptr, it is the responsibility of the object itself to implement reference counting. ...
IAccessibleImage
ssible description() is used to define the behavior of an actionable image and the image itself conveys semantically significant information. the user can edit the content that includes an image and therefore the user needs to be able to review the image's position. method overview [propget] hresult description([out] bstr description ); [propget] hresult imageposition([in] enum ia2coordinate
type coordinate
type, [out] long x, [out] long y ); [propget] hresult imagesize([out] long height, [out] long width ); methods description() returns the localized description of the image. [propget] hresult description( [out] bstr description ); parameters description the localized description of the image. return value s_false if there is nothing to return, [out] value is null. s_ok. imagepo...
...g width ); methods description() returns the localized description of the image. [propget] hresult description( [out] bstr description ); parameters description the localized description of the image. return value s_false if there is nothing to return, [out] value is null. s_ok. imageposition() returns the coordinates of the image. [propget] hresult imageposition( [in] enum ia2coordinate
type coordinate
type, [out] long x, [out] long y ); parameters coordinate
type specifies whether the returned coordinates should be relative to the screen or the parent object. x the x coordinate. y the y coordinate. return value s_ok. imagesize() returns the size of the image in units specified by parent's coordinate system. [propget] hresult imagesize( [out] long height, [out] long width );...
IAccessibleTable
long column, [out] boolean isselected ); parameters row 0 based index of the row for the cell to determine whether it is selected. column 0 based index of the column for the cell to determine whether it is selected. isselected returns true if the specified cell is selected and false otherwise. return value e_invalidarg if bad [in] passed, [out] value is false. s_ok. modelchange() returns the
type and extents describing how a table changed. provided for use by the ia2_event_table_model_changed event handler. this data is only guaranteed to be valid while the thread notifying the event continues. once the handler has returned, the validity of the data depends on how the server manages the life cycle of its objects. also, note that the server may have different life cycle management strategi...
...ir life cycle strategy as this will be of interest to assistive technology or script engines accessing data out of process or from other threads. servers only need to save the most recent row and column values associated with the change and a scope of the entire application is adequate. [propget] hresult modelchange( [out] ia2tablemodelchange modelchange ); parameters modelchange a struct of (
type(insert, delete, update), firstrow, lastrow, firstcolumn, lastcolumn). return value s_false if there is nothing to return, [out] value is null. s_ok. ncolumns() returns the total number of columns in table. [propget] hresult ncolumns( [out] long columncount ); parameters columncount number of columns in table (including columns outside the current viewport) return value s_ok. nrows() returns...
IAccessibleTable2
he specified row is completely selected. [propget] hresult isrowselected( [in] long row, [out] boolean isselected ); parameters row 0 based index of the row for which to determine whether it is selected. isselected returns true if the specified row is selected completely and false otherwise. return value e_invalidarg if bad [in] passed, [out] value is false. s_ok. modelchange() returns the
type and extents describing how a table changed. provided for use by the ia2_event_table_model_changed event handler. this data is only guaranteed to be valid while the thread notifying the event continues. once the handler has returned, the validity of the data depends on how the server manages the life cycle of its objects. also, note that the server may have different life cycle management strategi...
...ir life cycle strategy as this will be of interest to assistive technology or script engines accessing data out of process or from other threads. servers only need to save the most recent row and column values associated with the change and a scope of the entire application is adequate. [propget] hresult modelchange( [out] ia2tablemodelchange modelchange ); parameters modelchange a struct of (
type(insert, delete, update), firstrow, lastrow, firstcolumn, lastcolumn). return value s_false if there is nothing to return, [out] value is null. s_ok. ncolumns() returns the total number of columns in table. [propget] hresult ncolumns( [out] long columncount ); parameters columncount number of columns in table (including columns outside the current viewport) return value s_ok. nrows() returns...
amIInstallTrigger
lltrigger.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 / seamonkey 2.1) method overview boolean enabled(); boolean install(in nsivariant aargs, [optional] in amiinstallcallback acallback); boolean installchrome(in pruint32 a
type, 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 locale 2 cont...
... url for the add-on's url iconurl for an icon for the add-on hash for a hash of the add-on. acallback optional a callback to call as each installation succeeds or fails. return value true if the installations were successfully started. installchrome starts installing a new add-on. this method is deprecated, please use install() in the future. boolean installchrome( in pruint32 a
type, in astring aurl, in astring askin ); parameters a
type unused, retained for backwards compatibility. aurl the url of the add-on. askin unused, retained for backwards compatibility. return value true if the installation was successfully started. startsoftwareupdate starts installing a new add-on. boolean startsoftwareupdate( in astring aurl, in print32 aflags optional ); ...
imgIRequest
ed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 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 image was loaded from. read only. imagestatus unsigned long status flags of the status_* variety. read only. mime
type string read on...
...ode_complete 0x20 the whole image has been decoded. cors_none 1 cors modes images can be loaded with. by default, all images are loaded with cors_none and cannot be used cross-origin in context like webgl. if an html img element has the crossorigin attribute set, the imgirequest will be validated for cross-origin usage with cors, and, if successful, will have its cors mode set to the relevant
type. cors_anonymous 2 cors_use_credentials 3 methods cancelandforgetobserver() cancels this request as in nsirequest.cancel(); further, also nulls out decoderobserver so it gets no further notifications from us. note: you should not use this in any new code; instead, use cancel(). note that cancel() is asynchronous, which means that some time after you call it, the listener/observer will ge...
mozIStorageError
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 / seamonkey 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 description error 1 general sql error...
... empty 16 the database is empty. schema 17 the database schema changed. toobig 18 a string or blob exceeds the size limit. constraint 19 aborted due to a constraint violation. internal 2 an internal logic error occurred. mismatch 20 a data
type mismatch occurred. misuse 21 library used incorrectly. nolfs 22 attempted to use os features not supported on the host system. auth 23 authorization denied. format 24 auxiliary database format error. notadb 26 the opened file is not a database. ...
mozITXTToHTMLConv
art) void findurlinplaintext(in wstring text, in long alength, in long apos, out long astartpos, out long aendpos) wstring scanhtml(in wstring text, in unsigned long whattodo) wstring scantxt(in wstring text, in unsigned long whattodo) constants conversion control attributes these bits allow you to control the conversion of text into html. constant
type description kentities unsigned long enables conversion of basic special characters to html entities. this applies to "<", "&", and ">" (which are converted to <, &, and >, respectively). kglyphsubstitution unsigned long enables conversion of smilies and non-ascii special characters. kstructphrase unsigned long enables conversion of text at...
...todo a bit field composed of the conversion control attributes indicating what conversions to apply. return value the html version of the specified string. scanhtml() scans the specified user-edited html, adding additional formatting that the user may not have known to do. this should correct html that isn't entirely standards-compliant. warning: don't use the kglyphsubstitution conversion
type with this method, as doing so generates html that is non-standard. wstring scanhtml( in wstring text, in unsigned long whattodo ); parameters text the original, user-edited html. whattodo a bit field composed of the conversion control attributes indicating what conversions to apply. return value a normalized version of the original html string. citeleveltxt() returns the "cite l...
nsIAbCard
void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) string converttobase64encodedxml() astring converttoxmlprintdata() string converttoescapedvcard() astring generatename(in long agenerateformat,[optional] in nsistringbundle abundle) astring generatephoneticname(in boolean alastnamefirst) attributes attribute
type description firstname astring lastname astring phoneticfirstname astring phoneticlastname astring displayname astring nickname astring primaryemail astring secondemail astring workphone astring homephone astring faxnu...
...string phoneticlastname astring displayname astring nickname astring primaryemail astring secondemail astring workphone astring homephone astring faxnumber astring pagernumber astring cellularnumber astring workphone
type astring homephone
type astring faxnumber
type astring pagernumber
type astring cellularnumber
type astring homeaddress astring homeaddress2 astring homecity astring homestate astring homezipcode astring homecountry astring ...
GetAccessibleRelated
« nsiaccessible page summary this method returns an accessible related to this one by the given relation
type. nsiaccessible getaccessiblerelated( in unsigned long arelation
type ); parameters arelation
type[in] the relation
type between the accessible (see constants listed in relations documentation). return value returns an accessible which is related to the one provided by the given relation
type. ...
...on
type ); parameters arelation
type[in] the relation
type between the accessible (see constants listed in relations documentation). return value returns an accessible which is related to the one provided by the given relation
type. ...
nsIAppShellService
dow(in nsixulwindow awindow); void run(); obsolete since gecko 1.8 void toplevelwindowismodal(in nsixulwindow awindow, in boolean amodal); obsolete since gecko 1.9.1 void unregistertoplevelwindow(in nsixulwindow awindow); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindowinternal. attributes attribute
type description applicationprovidedhiddenwindow boolean return true if the application hidden window was provided by the application. if it was not, the default hidden window was used. this will usually be false on all non-mac platforms. read only. hiddendomwindow nsidomwindow return the (singleton) application hidden window, automatically created and maintained by t...
...denwindowandjscontext return the (singleton) application hidden window as an nsidomwindow, and, the corresponding javascript context pointer. this is useful if you'd like to subsequently call opendialog on the hidden window. void gethiddenwindowandjscontext( out nsidomwindow ahiddendomwindow, out jscontext ajscontext ); parameters ahiddendomwindow the hidden window queryinterface'd to
type nsidomwindow. ajscontext the corresponding javascript context. hidesplashscreen() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) remove the splash screen (if visible). this need be called only once per application session. void hidesplashscreen(); parameters none. initialize() obsolete since gecko 1.8 (firefox 1.5 / th...
nsIAutoCompleteInput
this means that auto-fill is enabled. completeselectedindex boolean if true, the text in the text field will be autoc...
...this means that auto-fill is enabled. completeselectedindex boolean if true, the text in the text field will be autocompleted as the user selects from the popup list. ...
nsIChannelEventSink
tion is thrown, the redirect is vetoed and no callback must be done. void asynconchannelredirect( in nsichannel oldchannel, in nsichannel newchannel, in unsigned long flags, in nsiasyncverifyredirectcallback callback ); 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 bitmask consisting of flags from above. one of redirect_temporary and redirect_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. ...
...nderbird 3.3 / seamonkey 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 bitmask consisting of flags from above. one of redirect_temporary and redirect_permanent will always be set. see also nsichannel nsihttpchannel ...
nsIClassInfo
criptable provides information about a specific implementation class. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsisupports gethelperforlanguage(in pruint32 language); void getinterfaces(out pruint32 count, [array, size_is(count), retval] out nsiidptr array); attributes attribute
type description classdescription string a human readable string naming the class, or null. read only. classid nscidptr a classid through which an instance of this class can be created, or null. if the flags attribute has the singleton bit set, then the value of this attribute specifies a classid through which this class can be accessed as a service using nsiserviceman...
...te specifies a contractid through which this class may be accessed as a service using nsiservicemanager.getservicebycontractid(). read only. flags pruint32 specifies various binary properties of this class. possible values for this attribute include a bit-wise combination of the constants read only. implementationlanguage obsolete since gecko 40 pruint32 the language
type in which this class is implemented. see nsiprogramminglanguage.constants for a list of possible values. read only. constants bitflags for 'flags' attribute. constant value description singleton 1 << 0 the class is a singleton that must be accessed via nsiservicemanager. threadsafe 1 << 1 the class may be accessed by any thread. main_t...
nsICommandLine
the application name is not part of the command line. read only. preventdefault boolean there may be a command-line handler which performs a default action if there was no explicit action on the command line (open a default browser window, for example). this flag allows the default action to be prevented. state unsigned long ...
...cription length long number of arguments in the command line. the application name is not part of the command line. read only. preventdefault boolean there may be a command-line handler which performs a default action if there was no explicit action on the command line (open a default browser window, for example). this flag allows the default action to be prevented. state unsigned long the
type of command line being processed. see state constants. read only. windowcontext nsidomwindow a window to be targeted by this command line. in most cases, this will be null (xremote will sometimes set this attribute). read only. workingdirectory nsifile the working directory for this command line. use this property instead of the working directory for the current process, since a redirected co...
nsICommandLineRunner
s/public/nsicommandlinerunner.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 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 set. on windows the character set is utf-8, not the native codepage. void init( in long argc, in nscharptrarray argv, in nsifile workingdir, in unsigned long state ); pa...
... native character set. on windows the character set is utf-8, not the native codepage. void init( in long argc, in nscharptrarray argv, in nsifile workingdir, in unsigned long state ); parameters argc the number of arguments being passed. argv an array storing pointers to the arguments workingdir directory where the command will run. this is used to resolve file and uri paths. state the
type of command line being processed. this is an nsicommandline state flag. run() processes the command-line handlers in the proper order, and calls nsicommandlinehandler.handle() on each. void run(); parameters none. exceptions thrown ns_error_abort thrown when the handler aborts. all other errors thrown by handlers will be silently ignored. setwindowcontext() sets the windowcontext parameter. vo...
nsIContentFrameMessageManager
or details on these messaging apis see the documentation for the nsicontentframemessagemanager's parent classes nsisyncmessagesender and nsimessagesender. methods void dump(in domstring astr); domstring atob(in domstring aasciistring); domstring btoa(in domstring abase64data); dump() prints the specified string to standard output. ...
...thods void dump(in domstring astr); domstring atob(in domstring aasciistring); domstring btoa(in domstring abase64data); dump() prints the specified string to standard output. parameters name
type description astr string the message to log. atob() convert ascii base64 data to binary data. parameters name
type description aasciistring string ascii string to decode. returns string: the decoded binary data. btoa() convert binary data to ascii base64 data . parameters name
type description abase64data string binary data to encode as base64. returns string: the base64-encoded ascii string. attributes content nsidomwindow: the cu...
nsIContentPrefService
useful for accessing and manipulating preferences in ways that are caller-specific or for which there is not yet a generic method, although generic functionality useful to multiple callers should generally be added to this unfrozen interface. also useful for testing the da...
...ly to all sites. aname the name of the preference whose value is to be retrieved. acallback an optional nsicontentprefcallback to receive the result. if desired, javascript callers can instead provide a function to call upon completion. return value the preference's value is returned; this value may be a string, integer, boolean, or any other value. the result may be null (nsidata
type:v
type_empty) if the preference's value is either null, or undefined (nsidata
type:v
type_void) if there is no saved preference by the specified name. exceptions thrown ns_error_illegal_value if agroup is not a string, nsiuri, or null. or if aname is null or an empty string getprefs() get all preferences and their values for the specified uri. note: prior to gecko 2.0, the site could onl...
nsIContentSniffer
netwerk/base/public/nsicontentsniffer.idlscriptable content sniffer interface. components implementing this interface can determine a mime
type from a chunk of bytes. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to implement this interface use net-content-sniffers category. see netwerk/build/nsnetcid.h about ns_content_sniffer_category. method overview acstring getmime
typefromcontent(in nsirequest arequest, [const,array,size_is(alength)] in octet adata, in unsigned long alength); methods getmime
typefromcontent() given a chunk of data, determines a mime
type. information from the given request may be used in order to make a better decision. note: implementations should consider the request read-only. especially, they should not attempt to set th...
...e
typefromcontent(in nsirequest arequest, [const,array,size_is(alength)] in octet adata, in unsigned long alength); methods getmime
typefromcontent() given a chunk of data, determines a mime
type. information from the given request may be used in order to make a better decision. note: implementations should consider the request read-only. especially, they should not attempt to set the content
type property that subclasses of nsirequest might offer. acstring getmime
typefromcontent( in nsirequest arequest, [const,array,size_is(alength)] in octet adata, in unsigned long alength ); parameters arequest the request where this data came from. may be null. adata data to check. alength length of the data. return value the content
type. example how to read content fr...
nsICryptoHMAC
the returned value is a base-64 encoded string. if false, then the returned value is binary data. return value a hash of the data that was read by this object. this can be either binary data 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. void init( in unsigned long aalgorithm, in nsikeyobject akeyobject ); parameters aalgorithm the algorithm
type to be used. this value must be one of the above valid algorithm
types. akeyobject object holding a key. to create the key object u...
... akeyobject object holding a key. to create the key object use for instance: var keyobject = components.classes["@mozilla.org/security/keyobjectfactory;1"] .getservice(components.interfaces.nsikeyobjectfactory) .keyfromstring(components.interfaces.nsikeyobject.hmac, rawkeydata); exceptions thrown ns_error_invalid_arg if an unsupported algorithm
type is passed. reset() reinitialize hmac context to be reused with the same settings (the key and hash algorithm) but on different set of data. void reset(); parameters none. update() void update( [const, array, size_is(alen)] in octet adata, in unsigned long alen ); parameters adata a buffer to calculate the hash over. alen the length of the buffer adata. exceptions thrown ...
nsIDBFolderInfo
le(in nsstring locale); native code only! obsolete since gecko 1.8 void setmailboxname(in nsstring newboxname); native code only! ...
...ong imapunreadpendingmessages long knownartsset string locale astring mailboxname astring nummessages long numunreadmessages long sortorder nsmsgviewsortordervalue sort
type nsmsgviewsort
typevalue version unsigned long viewflags nsmsgviewflags
typevalue view
type nsmsgview
typevalue methods andflags() long andflags( in long flags ); parameters flags missing description return value missing description exceptions thrown missing excep...
nsIDOMClientRect
read only. height float height of the rectangle box (this is identical to bottom minus top). read only. ...
...read only. height float height of the rectangle box (this is identical to bottom minus top). read only. ...
nsIDOMGeoPositionAddress
ing on the geolocation service being used. 1.0 66 introduced gecko 1.9.2 obsolete gecko 14.0 inherits from: nsisupports last changed in gecko 11 (firefox 11 / thunderbird 11 / seamonkey 2.8) this object is obtained from an nsidomgeopositionaddress object via its address attribute. note: this needs to be moved into the dom reference. attributes attribute
type description city domstring the city. read only. country domstring the country. read only. countrycode obsolete since gecko 11 domstring removed in firefox 11, since it isn't defined in the specification; use country instead. county domstring the county. read only. postalcode domstring the postal or zip code. read only. premises domstring the premises. read only. region domstring the...
...try instead. county domstring the county. read only. postalcode domstring the postal or zip code. read only. premises domstring the premises. read only. region domstring the region. read only. street domstring the street of the address. read only. streetnumber domstring the street number of the address. read only. historical note, which is likely of no interest to most readers: the
types of the attributes below all changed from string to domstring in gecko 1.9.2 beta 5. see also using geolocation ...
nsIDOMOrientationEvent
d to dom windows, providing information from the device's accelerometer, allowing code to determine the orientation of the device. dom/interfaces/events/nsidomorientationevent.idlscriptable please add a summary to this article. last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsidomevent method overview void initorientationevent(in domstring event
typearg, in boolean canbubblearg, in boolean cancelablearg, in double x, in double y, in double z); attributes attribute
type description 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,...
...ad 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 means the device is balanced on that axis. see accelerometer values explained for details. methods initorientationevent() initializes the orientation event object. void initprogressevent( in domstring event
typearg, in boolean canbubblearg, in boolean cancelablearg, in double x, in double y, in double z ); parameters event
typearg the
type of event. must be "mozorientation". canbubblearg specifies whether or not the created event will bubble. cancelablearg specifies whether or not the created event can be canceled. x the amount of tilt along the x axis. y the amount of tilt along the y axis. z...
nsIDOMProgressEvent
changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 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 unsigned long long loadedarg, in unsigned long long totalarg); deprecated since gecko 22.0 attributes attribute
type description lengthcomputable boolean specifies whether or not the total size of the transfer is known. read only. loaded unsigned long long ...
...the operation. if the total size is unknown, this value is zero. read only. methods initprogressevent() deprecated since gecko 22.0 this method has been removed from use in javascript in gecko 22.0. use the regular constructor to construct a synthetic progressevent. it still is usable from native c++ code. initializes the progress event object. void initprogressevent( in domstring
typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean lengthcomputablearg, in unsigned long long loadedarg, in unsigned long long totalarg ); parameters
typearg the
type of event. must be one of "abort", "error", "load", "loadstart", or "progress". canbubblearg specifies whether or not the created event will bubble. cancelablearg specifies whether or not the create...
nsIDOMXPathExpression
dom/interfaces/xpath/nsidomxpathexpression.idlscriptable represents a compiled xpath query returned from nsidomxpathevaluator.createexpression or document.createexpression inherits from: nsisupports last changed in gecko 1.7 method overview nsisupports evaluate(in nsidomnode contextnode, in unsigned short
type, in nsisupports result) methods evaluate() evaluate the xpath expression. ...
...d xpath query returned from nsidomxpathevaluator.createexpression or document.createexpression inherits from: nsisupports last changed in gecko 1.7 method overview nsisupports evaluate(in nsidomnode contextnode, in unsigned short
type, in nsisupports result) methods evaluate() evaluate the xpath expression. nsisupports evaluate( in nsidomnode contextnode, in unsigned short
type, in nsisupports result ); parameters contextnode a dom node to evaluate the xpath expression against. to evaluate against a whole document, use the document.documentelement method to get the node to evaluate against.
type a number that corresponds to one of the
type constants of nsidomxpathresult. result an existing nsidomxpathresult to use for the result. using null w...
nsIDeviceMotionData
/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 / seamonkey 2.3) note: this interface was named nsidevicemotiondata prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 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 means the device is...
...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 means the device is balanced on that axis. see accelerometer values explained for details. constants motion
type constants constant value description
type_acceleration 0 the motion data describes device acceleration.
type_orientation 1 the motion data describes a device orientation chang. see also mozorientation nsidomorientationevent nsidevicemotionlistener nsidevicemotion ...
nsIDialogCreator
embedding/base/nsidialogcreator.idlscriptable please add a summary to this article. ...
...ko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void opendialog(in unsigned long a
type, in acstring aname, in acstring afeatures, in nsidialogparamblock aarguments, [optional] in nsidomelement aframeelement); constants constant value description unknown_dialog 0 generic_dialog 1 select_dialog 2 methods opendialog() void opendialog( in unsigned long a
type, in acstring aname, in acstring afeatures, in nsidialogparamblock aarguments, in nsidomelement aframeelement optional ); parameters a
type aname afeatures aarguments aframeelement optional ...
nsIDownload
being downloaded.) inherits from: nsitransfer last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 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. cancelable nsicancelable an object that can be used to cancel the download. once the download is complete, this value is set to null. read only. displayname astring a user-readable description of the transfer. read only. id unsigned long the i...
...t contains this download. use the guid property instead for safe, database-agnostic searching and manipulation. read only. deprecated since gecko 19.0 guid astring the guid of the download that is stored in the database. has the form of twelve alphanumeric characters. read only. mimeinfo nsimimeinfo provides the targets relevant mime information, including its mime
type, helper application, and whether or not the helper should be executed automatically once the download is complete. read only. optional percentcomplete long the percentage of the file transfer that has been completed, or -1 if the file's size is unknown. read only. referrer nsiuri the referrer uri of the download. this is only valid for http downloads, and can be nu...
nsIDragSession
pport 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 / seamonkey 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 unsigned long sets the action (copy, move, link and so on) for...
...e drag items, zero-based. must be less than numdropitems. isdataflavorsupported() checks to see if any of the native data on the clipboard matches a given data flavor. if numdropitems is greater than one, there is no indication as to which of the items matches the data flavor. boolean isdataflavorsupported( in string adataflavor ); parameters adataflavor a string representing the mime
type of the data to be matched, such as "text/unicode". return value true if the specified flavor matches any of the native data on the clipboard, otherwise false. ...
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 nsifeedperson objects...
... contributors nsiarray an array of nsifeedperson objects describing contributors to the feed or entry. fields nsiwritablepropertybag2 provides access to all the fields found in the document. common atom and rss fields are normalized, including some namespaced extensions such as "dc:subject" and "content:encoded". consumers can avoid normalization by checking the feed
type and accessing specific fields. common namespaces are accessed using prefixes, such as get("dc:subject");. see nsifeedresult.registerextensionprefix() for more information about prefixes. id astring a string that identifies the feed or entry. not all feeds have these, but all major feed formats have ids for each entry. link nsiuri a uri containing the primary ...
nsIFrameScriptLoader
his window message manager. as the user opens new tabs in this window, copies of the script will be loaded into these new tabs, as well. frame scripts are essentially per-tab, so they don't get reloaded when the user navigates. if you want a frame script to do something whenever a new document is loaded, you can listen for the document-element-inserted notification. parameters name
type description aurl string url for the script to load. aurl must be the absolute url. data: urls are also supported. for example data:,dump("foo\n"); aallowdelayedload boolean if true, this flag means that the frame script will be loaded into any new frames opened after the loadframescript() call, until removedelayedframescript() is called for that script. ...
... removedelayedframescript() removes aurl from the list of scripts which support delayed load. this cancels the effect of the aallowdelayedload flag, meaning that the loader will no longer load the script into new frames. if you used aallowdelayedload, you should call this as part of your cleanup (for example, when your add-on is disabled or uninstalled). parameters name
type description aurl string url for the script to remove. getdelayedframescripts() returns all delayed scripts that will be loaded once a (remote) frame becomes available. the return value is a list of pairs [<url>, <wasloadedinglobalscope>]. returns list of the delayed scripts. each script is returned as a pair: [<url>, <wasloadedinglobalscope>]. ...
nsIHapticFeedback
methods performsimpleaction() perform haptic feedback. void performsimpleaction( in long islongpress ); parameters islongpress the press length; this will determine how long the vibration should last. see press length constants for permitted values. ...
...ormsimpleaction(): hapticfeedback.performsimpleaction(components.interfaces.nsihapticfeedback.longpress); method overview void performsimpleaction(in long islongpress); constants press length constants constant value description shortpress 0 specify as the action
type to perform a short vibration. longpress 1 specify as the action
type to perform a long vibration. methods performsimpleaction() perform haptic feedback. void performsimpleaction( in long islongpress ); parameters islongpress the press length; this will determine how long the vibration should last. see press length constants for permitted values. ...
nsIJetpack
(); void destroy(); methods sendmessage() this method asynchronously sends a message to the jetpack process. void sendmessage( in astring amessagename, [optional] in jsval v1, optional [optional] in jsval v2, optional ... ); parameters amessagename the name of the message to send. v1, v2, ... optional javascript values to send with the message; they must be either json-serializable
types or handles. registerreceiver() this registers a callback to be triggered whenever the jetpack process sends a particular message. note: multiple callbacks may be registered for the same message; they will all be triggered. void registerreceiver( in astring amessagename, in jsval areceiver ); parameters amessagename the name of the message from the jetpack process on which the callback is ...
... registered for the same message; they will all be triggered. void registerreceiver( in astring amessagename, in jsval areceiver ); parameters amessagename the name of the message from the jetpack process on which the callback is triggered. areceiver a javascript function. the first argument passed to it is the name of the message, and all arguments following it are either json-serializable
types or handles. if the message was sent synchronously from the jetpack process via callmessage(), then the return value of this function is passed back to the jetpack process. unregisterreceiver() this unregisters a callback previously registered with registerreceiver() void unregisterreceiver( in astring amessagename, in jsval areceiver ); parameters amessagename the name of the message on w...
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 / seamonkey 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 i...
... 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 item. jumplist_item_separator 1 separator. jumplist_item_link 2 web link item. jumplist_item_shortcut 3 application shortcut. methods equals() compare this item to another. compares the
type and other properties specific to this item's
type: separator -
type link -
type, uri, title shortcut -
type, handler application boolean equals( in nsijumplistitem item ); parameters item another nsijumplistitem to compare to. return value true if items are the same, otherwise false ...
nsILoadGroup
/nsiloadgroup.idlscriptable a load group maintains a collection of nsirequest objects. inherits from: nsirequest last changed in gecko 1.7 method overview void addrequest(in nsirequest arequest, in nsisupports acontext); void removerequest(in nsirequest arequest, in nsisupports acontext, in nsresult astatus); attributes attribute
type description activecount unsigned long returns the count of "active" requests (that is requests without the load_background bit set). read only. defaultloadrequest nsirequest accesses the default load request for the group. each time a number of requests are added to a group, the defaultloadrequest may be set to indicate that a...
...sirequestobserver the group observer is notified when requests are added to and removed from this load group. the groupobserver is weak referenced. notificationcallbacks nsiinterfacerequestor notification callbacks for the load group. requests nsisimpleenumerator returns the requests contained directly in this group. enumerator element
type: nsirequest. read only. methods addrequest() adds a new request to the group. this will cause the default load flags to be applied to the request. if this is a foreground request then the groupobserver's onstartrequest will be called. if the request is the default load request or if the default load request is null, then the load group will inherit its load flags from the request. void a...
nsILocalFile
read only. followlinks prbool determines whether or not the nsilocalfile will automatically resolve symbolic links. by default, this value is false on all non-unix systems. as of mozilla 1.7, this attribute is ignored on un...
...h the library now that it is open... pr_freelibrary(dll); return ns_ok; } native code only! openansifiledesc returns the result of fopen() on the file. the caller is responsible for calling fclose() on the result. file openansifiledesc( in string mode ); parameters mode an ansi file open mode string, which will be passed to fopen(). return value a pointer to an ansi file
type. example #include <stdio.h> #include "nserror.h" #include "nsilocalfile.h" // read the contents of a nsilocalfile... nsresult readlocalfile(nsilocalfile *alocalfile) { file *fp; nsresult rv = alocalfile->openansifiledesc("r", &fp); if (ns_failed(rv)) return rv; char buf[512]; size_t n; while ((n = fread(buf, sizeof(buf), 1, fp)) > 0) { // do something with n-byte block...
nsIMIMEInputStream
@mozilla.org/network/mime-input-stream;1. to create an instance, use: var mimeinputstream = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); method overview void addheader(in string name, in string value); void setdata(in nsiinputstream stream); attributes attribute
type description addcontentlength boolean when true a "content-length" header is automatically added to the stream. the value of the content-length is automatically calculated using the available() method on the data stream. the value is recalculated every time the stream is rewound to the start. not allowed to be changed once the stream has been started to be read. methods add...
...he stream if the implementation of the nsimimeinputstream also is used as an nsiseekablestream. ...
nsIMacDockSupport
nted by: @mozilla.org/cookie-monster;1. 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. method summary void activateapplication(in boolean aignoreotherapplications); attributes attribute
type description badgetext astring text to display in a badge on the application's dock icon. this can be used, for example, to display the number of unread messages in an email client. dockmenu nsistandalonemenu the menu to display when the user right-clicks on the application's icon in the dock. methods activateapplication() activates the application, making i...
... ...
nsIMessageBroadcaster
sender is not initialized. for example, we will throw ns_error_not_initialized if we try to send a message to a cross-process frame but the other process has not yet been set up. throws ns_error_failure when the message receiver cannot be found. for example, we will throw ns_error_failure if we try to send a message to a cross-process frame whose process has crashed. parameters name
type description messagename string the name of the message. optional. this becomes the name property of the received message. obj object. the message payload. a structured clone of this becomes the data property of the received message. objects object. an object each of whose properties is an object. this becomes t...
...uctured clone of this becomes the data property of the received message. objects object. an object each of whose properties is an object. this becomes the objects property of the received message, with each original object replaced with a cross process object wrapper for it. getchildat() return a single subordinate message manager. parameters name
type description aindex number the index of the subordinate message manager to retrieve. returns nsimessagelistenermanager: the message manager at the given index. attributes childcount number: the number of subordinate message managers. read only. ...
nsIModule
boolean canunload( in nsicomponentmanager acompmgr ); parameters acompmgr the global component manager. return value indicates to the caller whether ...
...not_registered indicates that the requested class is not available. ns_error_no_interface indicates that the requested interface is not supported. registerself() when the nsimodule is discovered, this method will be called so that any setup registration can be preformed. void registerself( in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr, in string a
type ); parameters acompmgr the global component manager. alocation the location of the nsimodule on disk. aloaderstr opaque loader specific string. a
type loader
type being used to load this module. unregisterself() when the nsimodule is being unregistered, this method will be called so that any unregistration can be preformed. void unregisterself( in nsicomponentm...
nsIMsgDBHdr
isflagged boolean readonly: indicates whether or not the message is starred in the ui. iskilled boolean readonly: indicates whether or not this message belongs to a subthread that has been ignored in the ui. if you want to know whether the message is the root of an ig...
...eadonly: indicates the subject of this message. the value here will have been decoded by the mime converter service. mime2decodedrecipients astring readonly: indicates the recipients of this message. the value here will have been decoded by the mime converter service. charset string indicates the character set of this message. this value is extracted from the content-
type header. label nsmsglabelvalue indicates one of the old 5 label values used by old versions. new code should use keywords instead. accountkey string indicates the account that was originally used to fetch the message. may be blank if the message has not been moved or copied. folder nsimsgfolder readonly: indicates the folder in which this message is sto...
nsIMsgFilter
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilter.idl attributes
type attribute nsmsgruleaction
type type; priority // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; targetfolderuri // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; label // target label. ...
... not priority attribute nsmsgpriorityvalue priority; targetfolderuri // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; label // target label. ...
nsIMsgFilterList
imsgfilterlist::createfilter ( in astring name ) savetofile() void nsimsgfilterlist::savetofile ( in nsioutputstream stream ) parsecondition() void nsimsgfilterlist::parsecondition ( in nsimsgfilter afilter, in string condition ) savetodefaultfile() void nsimsgfilterlist::savetodefaultfile ( ) applyfilterstohdr() void nsimsgfilterlist::applyfilterstohdr ( in nsmsgfilter
typetype filter
type, in nsimsgdbhdr msghdr, in nsimsgfolder folder, in nsimsgdatabase db, in string headers, in unsigned long headersize, in nsimsgfilterhitnotify listener, in nsimsgwindow msgwindow, in nsilocalfile amessagefile ) writeinattr() void nsimsgfilterlist::writeintattr ( ...
...lterfileattribvalue nsimsgfilterlist::attribversion = 1 const nsmsgfilterfileattribvalue nsimsgfilterlist::attriblogging = 2 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribname = 3 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribenabled = 4 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribdescription = 5 const nsmsgfilterfileattribvalue nsimsgfilterlist::attrib
type = 6 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribscriptfile = 7 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribaction = 8 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribactionvalue = 9 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribcondition = 10 ...
nsIMsgIdentity
john doe email astring user's e-mail address, i.e. john@doe.com replyto astring optional replyto address, i.e. johnnospam@doe.com organization astring optional organization composehtml boolean should we compose with html by default...
...ll the fields. smtpserverkey 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. receiptheader
type long readonly: requestdsn boolean readonly: default request for dsn option for this identity. if this is set, the dsn menu item on the compose window will be checked. methods clearallvalues() note: this is really dangerous! this destroys all pref values; do not call this unless you know what you're doing! void clearallvalues(); parameters none. copy() copy the...
nsIMsgMessageService
simsgfolder srcfolder, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsgwindow amsgwindow, out nsiuri aurl); void displaymessage(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in string acharsetoverride, out nsiuri aurl); void openattachment(in string acontent
type, in string afilename, in string aurl, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); void savemessagetodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurllistener aurllistener, out nsiuri aurl, in boolean canonicallineending, in nsimsgwindow amsgwindow); void geturlfo...
...ayconsumer is (for now) an nsidocshell which the message is loaded into. amsgwindow nsimsgwindow for progress and status feedback aurllistener an nsiurllistener acharsetoverride (optional) character set over ride to force the message to use. return values aurl the new nsiuri of the message. openattachment() downloads and opens an attachment. void openattachment(in string acontent
type, in string afilename, in string aurl, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); parameters acontent
type the content
type of the attachment afilename the name of the attachment. aurl a stri...
nsINavHistoryQuery
absoluteendtime prtime read only: retrieves the end time value that the currently loaded reference points + offset resolve to. annotation autf8string the annotation name. annotationisnot boolean test for existance or non-existance of a given annota...
...ions() get the transitions set for this query. void gettransitions( out unsigned long count, optional [retval,array,size_is(count)] out unsigned long transitions ); parameters count optional the number of transitions transitions missing description settransitions() when the set of transitions is nonempty, results are limited to pages which have at least one visit for each of the transition
types. limit results to the specified list of transition
types. void settransitions( [const,array, size_is(count)] in unsigned long transitions, in unsigned long count ); parameters transitions missing description. count the number of transitions. see also places using the places history service querying places nsinavhistoryservice ...
nsINavHistoryQueryResultNode
ecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 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 folder. otherwise, this is set to -1. read only. queryoptions nsinavhistoryqueryoptions the options that group the node's children; only valid for result_
type_query nodes. read only. methods getqueries() returns the queries that build the node's children...
...mid long long for both simple folder nodes and simple-folder-query nodes, this is set to the concrete itemid of the folder. otherwise, this is set to -1. read only. queryoptions nsinavhistoryqueryoptions the options that group the node's children; only valid for result_
type_query nodes. read only. methods getqueries() returns the queries that build the node's children; only valid for result_
type_query nodes. void getqueries( out unsigned long querycount, optional from gecko 2.0 [retval,array,size_is(querycount)] out nsinavhistoryquery queries ); parameters querycount optional from gecko 2.0 the number of queries in the queries array. queries an array of nsinavhistoryquery objects describing the set of queries that build the node's children. there are querycount elements in the a...
nsINavHistoryResultObserver
although this attribute is read-write, you should not alter it directly; instead, call nsinavhistoryresult.addobserver() to add an observer to a result. methods batching() lets the observer know when a batch operation in places is about to start or end. the observer can then pause updates or events until t...
...fter the uri of a node has changed. void nodeurichanged( in nsinavhistoryresultnode anode, in autf8string anewuri ); parameters anode the node whose uri has changed. anewuri the node's new uri. sortingchanged() this is called to indicate to the ui that the sort has changed to the given mode. for trees, for example, this would update the column headers to reflect the sorting. for many other
types of views, this will not be applicable. void sortingchanged( in unsigned short sortingmode ); parameters sortingmode one of the nsinavhistoryqueryoptions.sorting methods, indicating the new sorting mode. ...
nsIObserver
n is being observed. atopic indicates the specific change or action. adata an optional parameter or other auxiliary data further describing the change or action. remarks the specific values and meanings of the parameters provided varies widely, though, according to where the observer was registered, and what topic is being observed. a single nsiobserver implementation can observe multiple
types of notification, and is responsible for dispatching its own behavior on the basis of the parameters for a given callback. in general, atopic is the primary criterion for such dispatch; nsiobserver implementations should take care that they can handle being called with unknown values for atopic. the most common implementation of nsiobserverservice is the xpcom observer service. with this impleme...
...bserve. example the following code is an implementation of nsiobserver that is registered to receive notifications for the "mytopicid" topic. see observer notifications for a list of built-in topics possible. observing preferences works slightly differently. see code snippets:preferences - using preference observers for an example. function myobserver() { this.register(); } myobserver.proto
type = { observe: function(subject, topic, data) { // do your stuff here. }, register: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(this, "mytopicid", false); }, unregister: function() { var observerservice = components.clas...
nsIProcessScriptLoader
process aallowdelayedload should always be true. it's possible that the child process for this chromemessagesender is not yet available at the time of the loadprocessscript() call, and if you pass false in this situation, your process script won't be loaded. for example: let ppmm = services.ppmm.getchildat(1); ppmm.loadprocessscript('data:,dump("foo\n");', true); parameters name
type description aurl string url for the script to load. aurl must be the absolute url. data: urls are also supported. for example data:,dump("foo\n"); aallowdelayedload boolean if this flag is false, the process script will only be loaded into child processes that are already running at the time of the call. if this flag is true, the process script will ...
... removedelayedprocessscript() removes aurl from the list of scripts which support delayed load. this cancels the effect of the aallowdelayedload flag, meaning that the loader will no longer load the script into new child processes. if you used aallowdelayedload, you should call this as part of your cleanup (for example, when your add-on is disabled or uninstalled). parameters name
type description aurl string url for the script to remove. getdelayedprocessscripts() returns all delayed scripts that will be loaded once a child process becomes available. the return value is a list of pairs [<url>, false]. returns list of the delayed scripts. each script is returned as a pair: [<url>, false]. ...
nsIPromptService
f 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 object, which can be either empty or have a value property set to the out parameter
type. for more information on out parameters and javascript refer to working with out parameters. implemented by: @mozilla.org/embedcomp/prompt-service;1. to get an instance, use: var promptservice = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); method overview void alert(in nsidomwindow aparen...
...this loosely, 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. ...
nsIProtocolHandler
you need to implement this interface. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean allowport(in long port, in string scheme); nsichannel newchannel(in nsiuri auri); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute
type description defaultport long the default port is the port the protocol uses by default. if the protocol doesn't need a port (for example, the "about" protocol), this attribute is -1. read only. protocolflags unsigned long protocol-specific flags. read only. note: starting with firefox 3, one of uri_loadable_by_anyone, uri_dangerous_to_load, uri_is_ui_resource,...
...rity component (for example, file). uri_inherits_security_context 1<<4 uris for this protocol have no inherent security context, so documents loaded using this protocol should inherit the security context of the document that loads them. uri_forbids_automatic_document_replacement 1<<5 "automatic" loads that would replace the document (such as a meta refresh, certain
types of xlinks, and other non-user-triggered loads) are not allowed if the originating uri has this protocol flag. keep in mind that the decision of what constitutes an automatic load is made externally, by the caller of nsiscriptsecuritymanager.checkloaduri(). typically, this flag is used by protocols that show highly untrusted content in a viewing area that the user expects to have a lot of control...
nsISHistory
read only. index long the index of the current document in session history. read only. maxlength long used to get/set the maximum number of toplevel documents, session history can hold for each instance. requestedindex long the index of the...
...ed by this method can be traversed using nsisimpleenumerator. to access individual history entries of the enumerator, perform the following steps: call getshistoryenumerator() to obtain handle the nsisimpleenumerator object. use nsisimpleenumerator.getnext() on the object returned by step #1 to obtain handle to the next object in the list. the object returned by this step is of
type nsisupports. perform a queryinterface on the object returned by step #2 to nsishentry. use nsishentry to access properties of each history entry. read only. methods addshistorylistener() called to register a listener for the session history component. listeners are notified when pages are loaded or purged from history. note: a listener object must implement nsishistorylis...
nsIScreenManager
read only. primaryscreen nsiscreen the primary display screen; this is the screen with the menu bar (on the mac) or taskbar or equivalent on windows or linux. read only. methods native code only!screenfornativewidget returns the nsiscreen instance for the native widget pointer. this pointer's definitio...
...read only. primaryscreen nsiscreen the primary display screen; this is the screen with the menu bar (on the mac) or taskbar or equivalent on windows or linux. read only. methods native code only!screenfornativewidget returns the nsiscreen instance for the native widget pointer. this pointer's definition is specific to the platform's native widget implementation, and is typically of the same
type as ns_native_window. nsiscreen screenfornativewidget( in voidptr nativewidget ); parameters nativewidget the native widget for which to obtain an nsiscreen instance. return value the nsiscreen instance for the native widget pointer. screenforrect() returns the nsiscreen containing the specified rectangle. if the rectangle overlaps multiple screens, the screen containing the majority of the r...
nsIScriptError
read only. columnnumber pruint32 the column number where the error occurred. this is used to draw the arrow pointing to the problem character. read only. errormessage astring the error message in a string format without any context/lin...
...u want to log an error at chrome level you should set a category from the first section (leaving it empty might log it as content error). as addon author i would recommend using "chrome javascript" for logging exceptions caused by addon code. ...
nsISessionStartup
s from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 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 session
type 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 / seamonkey 2.5), this was a string. it was changed in order to improve performance, which was suffering due to the need to parse and stri...
... recover_session 1 the last session crashed. it will either be restored or about:sessionrestore will be displayed. resume_session 2 the previous session should be restored at startup. ...
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 / seamonkey 2.0) implemented by: @mozilla.org/network/socket;2?
type=foo. ...
... 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 / seamonkey 2.0) implemented by: @mozilla.org/network/socket;2?
type=foo. ...
nsISound
ch as an authentication dialog) is opened. event_select_dialog_open 4 a select dialog (one that contains a list box) is opened. event_menu_execute 5 a menu item is executed. event_menu_popup 6 a popup menu is shown. event_editor_max_len 7 more characters than the maximum allowed are
typed into a text field. methods beep() plays a beep sound. void beep(); parameters none. init() not strictly necessary, but avoids a delay before the first sound. other methods will call init if they need to. void init(); parameters none. play() plays a sound specified by url. void play( in nsiurl aurl ); parameters aurl the url of the sound file to play. playeventsound...
... parameters aeventid an event id which is defined in the constants. playsystemsound() plays the system sound whose name is specified. if the user's system is configured to not play system sound effects, this will do nothing. note: this function is not supported on the macintosh. void playsystemsound( in astring soundalias ); parameters soundalias two different
types of names are supported: you can specify the name of a system sound provided by the host operating system; for example, if you specify "systemexclamation", you can play the windows alert sound, but it's played only on windows. similarly, if you specify "blow", you can play the mac os x "blow" system sound, but, similarly, it's played only on the macintosh. if you wish to use this method for p...
nsIStringBundle
, where each occurrence of %s (uppercase) is replaced by each successive element in the supplied array. you may also use other formatting codes. you can only pass unicode strings in. the id 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). do not try to use any other
types. this uses nstextformatter::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...
...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). do not try to use any other
types. this uses nstextformatter::smprintf to do the dirty work. wstring formatstringfromname( in wstring aname, [array, size_is(length)] in wstring params, in unsigned long length ); parameters aname the name 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. getsimpleenumerati...
nsISupportsID
methods tostring() this method returns a string valued representation of the object. ...
... methods tostring() this method returns a string valued representation of the object. ...
nsISupportsInterfacePointer
dataiid nsidptr stores an iid corresponding to the data attribute. methods tostring() returns a string valued representation of the object. ...
... dataiid nsidptr stores an iid corresponding to the data attribute. methods tostring() returns a string valued representation of the object. ...
nsISupportsPRBool
methods tostring() this methods returns a string valued representation of the object. ...
... methods tostring() this methods returns a string valued representation of the object. ...
nsISupportsPRTime
methods tostring() this methods returns a string valued representation of the object. ...
... methods tostring() this methods returns a string valued representation of the object. ...
nsISyncMessageSender
sender is not initialized. for example, we will throw ns_error_not_initialized if we try to send a message to a cross-process frame but the other process has not yet been set up. throws ns_error_failure when the message receiver cannot be found. for example, we will throw ns_error_failure if we try to send a message to a cross-process frame whose process has crashed. parameters name
type description messagename string the name of the message. optional. this becomes the name property of the received message. obj object. the message payload. a structured clone of this becomes the data property of the received message. objects object. an object each of whose properties is an object. this becomes t...
...structured clones of the objects returned by all the listeners to this message, one element for each listener. if there was only one listener, it is an array with a single element. sendrpcmessage() like sendsyncmessage(), except re-entrant. new rpc messages may be issued even if, earlier on the call stack, we are waiting for a reply to an earlier sendrpcmessage() call. parameters name
type description messagename string the name of the message. optional. this becomes the name property of the received message. obj jsonable object. the message payload. a structured clone of this becomes the data property of the received message. objects object. an object each of whose properties is an object. this ...
nsITreeColumn
interface represents a tree column. 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 void getidconst([shared] out wstring idconst); native code only! nsitreecolumn getnext(); nsitreecolumn getprevious(); void invalidate(); attributes attribute
type description atom nsiatom the atom attribute of nsitreecolumn which returns an nsiatom for the column, making it fast to do comparisons. read only. native code only! columns nsitreecolumns the nsitreecolumns containing this column. read only. cycler boolean if true, then the column is a cycler column. if the cycler attribute is not set, the column cells are regular text cells. read only. ...
...ead only. index long the index of the nsitreecolumn in displayed order. read only. primary boolean if true the nsitreecolumn is the primary column. if the primary attribute is not set, the column is not the primary column. read only. selectable boolean if true the nsitreecolumn is able to be selected. if the selectable attribute is not set, the column cells are not selectable. read only.
type short the
type of the column, see constants. read only. width long the width of nsitreecolumn. read only. x long the x position in the tree of the left edge of the nsitreecolumn. read only. constants constant value description
type_text 1 text column
type.
type_checkbox 2 checkbox column
type.
type_progressmeter 3 progress meter column
type. methods native code only!getidconst ...
nsIUpdatePatch
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 / seamonkey 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 boolean true if this patch is currently selected as the patch to be downloaded an...
...le. hashvalue astring the value of the hash function named in hashfunction that should be computed if the file is not corrupt. selected boolean true if this patch is currently selected as the patch to be downloaded and installed for this update transaction. false if another update is selected. size unsigned long the size of the patch file in bytes. state astring the state of this patch.
type astring the
type of patch represented by the object: "partial" a binary difference between two application versions. "complete" a complete patch containing all the replacement files to update to the new version. url astring the url from which the patch was downloaded. methods serialize() serializes the patch object into a dom element. nsidomelement serialize( in nsidomdocument updates )...
nsIUploadChannel2
netwerk/base/public/nsiuploadchannel2.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void explicitsetuploadstream(in nsiinputstream astream, in acstring acontent
type, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders); methods explicitsetuploadstream() sets a stream to be uploaded by this channel with the specified content-
type and content-length header values. most implementations of this interface require that the stream: implement threadsafe addref and release implement nsiinputstream.readsegments() implement nsiseekablestream.seek(). void explicitsetuploadstream( in nsi...
...explicitsetuploadstream() sets a stream to be uploaded by this channel with the specified content-
type and content-length header values. most implementations of this interface require that the stream: implement threadsafe addref and release implement nsiinputstream.readsegments() implement nsiseekablestream.seek(). void explicitsetuploadstream( in nsiinputstream astream, in acstring acontent
type, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders ); parameters astream the stream to be uploaded by this channel. acontent
type this value will replace any existing content-
type header on the http request, regardless of whether or not its empty. acontentlength a value of -1 indicates that the length of the stream should be determined by calling the stream's a...
nsIWebBrowser
ports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 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 the chrome object associated with the browser instance. the embedder must create one chrome object for each browser object that is instantiated. the embedder must associate the two by setting this property to point to the chrome object before creating the browser window via the browser's nsibasewindow interface. the chrome...
..., the implementation should get the nsiweakreference and hold that. otherwise, the implementation should not refcount this interface; it should assume that a non null value is always valid. in that case, the embedder should explicitly set this value back to null if the parent content listener is destroyed before the browser object. methods addwebbrowserlistener() registers a listener of the
type specified by the iid to receive callbacks. the browser stores a weak reference to the listener to avoid any circular dependencies. typically this method will be called to register an object to receive nsiwebprogresslistener or nsishistorylistener notifications in which case the the iid is that of the interface. void addwebbrowserlistener( in nsiweakreference alistener, in nsiidref aiid ); pa...
nsIWebBrowserChrome
dding/browser/webbrowser/nsiwebbrowserchrome.idlscriptable corresponds to the top-level, outermost window containing an embedded gecko web browser. inherits from: nsisupports last changed in gecko 0.9.6 method overview void destroybrowserwindow(); void exitmodaleventloop(in nsresult astatus); boolean iswindowmodal(); void setstatus(in unsigned long status
type, in wstring status); void showasmodal(); void sizebrowserto(in long acx, in long acy); attributes attribute
type description chromeflags unsigned long the chrome flags for this browser chrome. the implementation should reflect the value of this attribute by hiding or showing its chrome appropriately. webbrowser nsiwebbrowser the...
...tmodaleventloop( in nsresult astatus ); parameters astatus the result code to return from showasmodal(). iswindowmodal() is the window modal (that is, currently executing a modal loop)? boolean iswindowmodal(); parameters none. return value true if it's a modal window. setstatus() called when the status text in the chrome needs to be updated. void setstatus( in unsigned long status
type, in wstring status ); parameters status
type indicates what is setting the text. status status string. null is an acceptable value meaning no status. showasmodal() shows the window as a modal window. void showasmodal(); parameters none. return value note: the function error code returned by this corresponds to the status value specified in exitmodaleventloop. sizebrowserto() ...
nsIWebBrowserChrome2
embedding/browser/webbrowser/nsiwebbrowserchrome2.idlscriptable an extension to nsiwebbrowserchrome. 1.0 66 introduced gecko 1.9 inherits from: nsiwebbrowserchrome last changed in gecko 1.9 (firefox 3) method overview void setstatuswithcontext(in unsigned long status
type, in astring statustext, in nsisupports statuscontext); methods setstatuswithcontext() called when the status text in the chrome needs to be updated. ...
...context(in unsigned long status
type, in astring statustext, in nsisupports statuscontext); methods setstatuswithcontext() called when the status text in the chrome needs to be updated. this method may be called instead of nsiwebbrowserchrome.setstatus(). an implementor of this method, should still implement nsiwebbrowserchrome.setstatus(). void setstatuswithcontext( in unsigned long status
type, in astring statustext, in nsisupports statuscontext ); parameters status
type indicates what is setting the text. statustext status string. null is an acceptable value meaning no status. statuscontext an object that provides context pertaining to the status
type. if status
type is status_link, then this may be a dom node corresponding to the source of the link. this v...
nsIWebContentHandlerRegistrar
last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/embeddor.implemented/web-content-handler-registrar;1 as a service: var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); method overview void registercontenthandler(in domstring mime
type, in domstring uri, in domstring title, in nsidomwindow contentwindow) void registerprotocolhandler(in domstring protocol,in domstring uri, in domstring title, in nsidomwindow contentwindow) methods registercontenthandler summary of registercontenthandler void registercontenthandler( in domstring mime
type,...
...colhandler(in domstring protocol,in domstring uri, in domstring title, in nsidomwindow contentwindow) methods registercontenthandler summary of registercontenthandler void registercontenthandler( in domstring mime
type, in domstring uri, in domstring title, in nsidomwindow contentwindow ); parameters mime
type the desired mime
type as a string uri the uri to the handler as a string. title the title of the handler presented to the user as a string. contentwindow the dom content window from which the method has been called. registerprotocolhandler summary of registerprotocolhandler void registerprotocolhandler( in domstring protocol, in domstring uri, in domstring title, in nsidomwindo...
nsIWebNavigation
e first load in this object. set with care, since setting incorrectly can cause us to assume that nothing was actually loaded in this object if the load ends up being handled by an external application. load_flags_allow_popups 32768 this flag specifies that the load should not be subject to popup blocking checks. note for valid load flag combinations look here nsdocshellload
types.h stop flags constant value description stop_network 1 this flag specifies that all network activity should be stopped. this includes both active network loads and pending meta-refreshes. stop_content 2 this flag specifies that all content activity should be stopped. this includes animated images, plugins and pending javascript timeouts. st...
... all network activity should be stopped. this includes both active network loads and pending meta-refreshes. stop_content 2 this flag specifies that all content activity should be stopped. this includes animated images, plugins and pending javascript timeouts. stop_all 3 this flag specifies that all activity should be stopped. attributes attribute
type description cangoback prbool indicates if the object can go back. if true this indicates that there is back session history available for navigation. read only. cangoforward prbool indicates if the object can go forward. if true this indicates that there is forward session history available for navigation. read only. currenturi nsiuri the currently...
nsIWebPageDescriptor
docshell/base/nsiwebpagedescriptor.idlscriptable this interface allows content being displayed in one window to be loaded into another window without refetching it from the network. inherits from: nsisupports last changed in gecko 1.7 method overview void loadpage(in nsisupports apagedescriptor, in unsigned long adisplay
type); attributes attribute
type description currentdescriptor nsisupports retrieves the page descriptor for the current document. read only. constants display
type constants constant value description display_as_source 0x0001 generates an optionally syntax-highlighted (for xml/html documents) source of the original page. display_normal 0x0002 just refetches the existing page. note that if the descriptor is that of the source of another page...
...ource of the original page. display_normal 0x0002 just refetches the existing page. note that if the descriptor is that of the source of another page, this keeps the source view, but uses the current syntax highlighting preference. methods loadpage() tells the object to load the page specified by the page descriptor. void loadpage( in nsisupports apagedescriptor, in unsigned long adisplay
type ); parameters apagedescriptor the page descriptor for the page to load. adisplay
type the display
type to use when displaying the loaded page; see display
type constants for possible values. ...
nsIWebProgress
are children of that nsiwebprogress instance. uriloader/base/nsiwebprogress.idlscriptable please add a summary to this article. last changed in gecko 1.8.0 inherits from: nsisupports method overview void addprogresslistener(in nsiwebprogresslistener alistener, in unsigned long anotifymask); void removeprogresslistener(in nsiwebprogresslistener alistener); attributes attribute
type description domwindow nsidomwindow the dom window associated with this nsiwebprogress instance. read only. exceptions thrown ns_error_failure indicates that there is no associated dom window. isloadingdocument prbool indicates whether or not a document is currently being loaded in the context of this nsiwebprogress instance. read only. constants the following flags may be combined to fo...
... > gecko 1.8.1 this flag enables all notifications. methods addprogresslistener() registers a listener to receive web progress events. void addprogresslistener( in nsiwebprogresslistener alistener, in unsigned long anotifymask ); parameters alistener the listener interface to be called when a progress event occurs. this object must also implement nsisupportsweakreference. anotifymask the
types of notifications to receive. exceptions thrown ns_error_invalid_arg indicates that alistener was either null or that it does not support weak references. ns_error_failure indicates that alistener was already registered. removeprogresslistener() removes a previously registered listener of progress events. void removeprogresslistener( in nsiwebprogresslistener alistener ); parameters aliste...
nsIWebSocketChannel
read only. loadgroup nsiloadgroup the load group of the websockets code. notificationcallbacks nsiinterfacerequestor the notification callbacks for authorization and so forth. originaluri nsiuri the original uri used to construct the protocol connection. t...
... 1001 close_going_away the endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection. 1002 close_protocol_error the endpoint is terminating the connection due to a protocol error. 1003 close_unsupported the connection is being terminated because the endpoint received data of a
type it cannot accept (for example, a text-only endpoint received binary data). 1004 close_too_large the endpoint is terminating the connection because a data frame was received that is too large. 1005 close_no_status reserved. indicates that no status code was provided even though one was expected. 1006 close_abnormal reserved. used to indicate that a con...
nsIXMLHttpRequest
true); req.send('your=data&and=more&stuff=here'); example 2 var {cu: utils, cc: classes, ci: instances} = components; cu.import('resource://gre/modules/services.jsm'); function xhr(url, cb) { let xhr = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(ci.nsixmlhttprequest); let handler = ev => { evf(m => xhr.removeeventlistener(m, handler, !1)); switch (ev.
type) { case 'load': if (xhr.status == 200) { cb(xhr.response); break; } default: services.prompt.alert(null, 'xhr error', 'error fetching package: ' + xhr.statustext + ' [' + ev.
type + ':' + xhr.status + ']'); break; } }; let evf = f => ['load', 'error', 'ab...
...you only want this if your url is to a zip file or some file you want to download and make a nsiarraybufferinputstream out of it or something xhr.send(null); } xhr('https://www.gravatar.com/avatar/eb9895ade1bd6627e054429d1e18b576?s=24&d=identicon&r=pg&f=1', data => { services.prompt.alert(null, 'xhr success'...
nsIXSLTProcessor
content/xslt/public/nsixsltprocessor.idlscriptable xslt processor inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/document-transformer;1?
type=xslt. ...
... content/xslt/public/nsixsltprocessor.idlscriptable xslt processor inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/document-transformer;1?
type=xslt. ...
nsIXULTemplateBuilder
datasource nsisupports the opaque datasource object that is used for the template. this object is created by the getdatasource method of the query processor. may be null if the datasource has not been loaded yet. set this attribute to use a different datasource and rebuild the template. for a...
...eated by the getdatasource method of the query processor. may be null if the datasource has not been loaded yet. set this attribute to use a different datasource and rebuild the template. for an rdf datasource, this will be the same as the database. for xml this will be the nsidomnode for the datasource document or node for an inline reference (such as #name). other query processors may use other
types for the datasource. database nsirdfcompositedatasource readonly: the composite datasource that the template builder observes and uses to create content. this is used only for rdf queries and is maintained for backwards compatibility. it will be the same object as the datasource property. for non-rdf queries, it will always be null. rootresult nsixultemplateresult readonly: the virtual resul...
nsIXULTemplateResult
lar variable may be retrieved using the getbindingfor() and getbindingobjectfor() methods. method overview astring getbindingfor(in nsiatom avar); nsisupports getbindingobjectfor(in nsiatom avar); void hasbeenremoved(); void rulematched(in nsisupports aquery, in nsidomnode arulenode); attributes attribute
type description id astring id of the result. the dom element created for this result, if any, will have its id attribute set to this value. the id must be unique for a query. iscontainer boolean true if the result represents a container. read only. isempty boolean true if the result represents an empty container...
...ted as children of the output generated for this result. if false, child content is not processed. this property identifies only the default handling and may be overridden by syntax used in the template. read only. resource nsirdfresource resource for the result, which may be null. if set, the resource uri must be the same as the id property. read only.
type astring the
type of the object. the predefined value 'separator' may be used for separators. other values may be used for application specific purposes. read only. methods getbindingfor() get the string representation of the value of a variable for this result. this string will be used in the action body from a template as the replacement text. for instance, if the text ?name...
nsIXULWindow
contextflags pruint32 contextflags are from nsiwindowcreator2. docshell nsidocshell the docshell owning the xul for this window. read only. intrinsicallysized boolean indicates if this window is instrinsically sized. primarycontentshell nsidocshell...
...t this is a docshell tree item and therefore can not be assured of what object it is. it could be an editor, a docshell, or a browser object. or down the road any other object that supports being a docshelltreeitem query accordingly to determine the capabilities. nsidocshelltreeitem getcontentshellbyid( in wstring id ); parameters id the id of the content shell, which is the same as the "
type" attribute on the containing frame element. return value the tree item corresponding to the given id, if any. removechildwindow() tell this window that it has lost a child xul window. note that xul windows do not currently track child xul windows. void removechildwindow( in nsixulwindow achild ); parameters achild the child window being removed. showmodal() shows the window as a ...
nsIZipEntry
the possible values and their meanings are defined in the zip file specification at zip application note support. read only. crc32 unsigned long the crc-32 hash of the file in the entry. read only. ...
...the possible values and their meanings are defined in the zip file specification at zip application note support. read only. crc32 unsigned long the crc-32 hash of the file in the entry. read only. ...
nsMsgSearchAttrib
the numerical order * from here will also be used to determine the order that the * attributes display in the filter editor. ...
...the numerical order * from here will also be used to determine the order that the * attributes display in the filter editor. ...
XPCOM Interface Reference
oragestatementcallbackmozistoragestatementparamsmozistoragestatementrowmozistoragestatementwrappermozistoragevacuumparticipantmozistoragevaluearraymozitxttohtmlconvmozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinate
typensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessiblerelationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescroll
typensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsiaccessibletextnsiaccessible...
...tprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixulruntimensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpcclientnsixmlrpcfaultnsizipentrynsizipreadernsizipreadercachensizipwriternsmsgfilterfileattribvaluensmsgfolderflag
typensmsgjunkstatusnsmsgkeynsmsglabelvaluensmsgpriorityvaluensmsgruleaction
typensmsgsearchattribnsmsgsearchopnsmsgsearchscopensmsgsearchtermnsmsgsearch
typevaluensmsgsearchvaluensmsgsearchwidgetvaluenspipromptservice see also interfaces grouped by function ...
XPCOM primitive
an xpcom primitive is an xpcom object that "boxes" a value of a primitive
type. all xpcom primitives are scriptable, and they all implement an xpcom interface from the table below. primitives are rarely useful. the main use case is to store primitive values in a data structure that can only store xpcom objects, such as nsiarray. also, certain apis, such as nsitransferable.settransferdata(), require primitives. ...
...all implement an xpcom interface from the table below. primitives are rarely useful. the main use case is to store primitive values in a data structure that can only store xpcom objects, such as nsiarray. also, certain apis, such as nsitransferable.settransferdata(), require primitives. ...
nsGetModuleProc
alocation [in] the location of the module if any. may be null. aresult [out] the nsimodule instance. ...
... alocation [in] the location of the module if any. may be null. aresult [out] the nsimodule instance. ...
Setting HTTP request headers
//developer.mozilla.org/en/xpcom/xpcom_changes_in_gecko_2.0#javascript_components. ...
...alse); return; } }, queryinterface: function (iid) { if (iid.equals(components.interfaces.nsiobserver) || iid.equals(components.interfaces.nsisupports)) return this; components.returncode = components.results.ns_error_no_interface; return null; }, }; var mymodule = { registerself: function (compmgr, filespec, location,
type) { var compmgr = compmgr.queryinterface(components.interfaces.nsicomponentregistrar); compmgr.registerfactorylocation(this.mycid, this.myname, this.myprogid, filespec, location,
type...
Performance
, so you will not notice the problem as much. however, there is still overhead, and using a transaction will still be faster. one major problem is that the queue of file operations will get very long if there are many transactions. some operations require walking this queue to see what operations have been pending, and they will be slower. if the user shuts down the browser soon after you do this
type of operation, you can delay shutdown (possibly for many tens of seconds for large numbers of transactions and slow disks), making it look like the browser is hung. queries careful reordering of the sql statement, or creating the proper indices, can often improve performance. see the sqlite optimizer overview on the sqlite web site for information on how sqlite uses indices and executes statements...
..., making it look like the browser is hung. queries careful reordering of the sql statement, or creating the proper indices, can often improve performance. see the sqlite optimizer overview on the sqlite web site for information on how sqlite uses indices and executes statements. you might also want to try to the "explain" feature on your statements to see if they are using the indices you expect.
type "explain" followed by your statement to see the plan. for example, explain select * from moz_history; the results are hard to understand, but 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...
Storage
ame; } you can create this helper object yourself if it's not available in your version of gecko. see mozistoragestatementwrapper for details. in c++, the code would look something like this: bool hasmoredata; while (ns_succeeded(statement->executestep(&hasmoredata)) && hasmoredata) { print32 value; rv = statement->getint32(0, &value); ns_ensure_success(rv, rv); } you can obtain other
types of data by using the various methods available on mozistoragevaluearray. alternatively, if you do not expect any results but still need to execute a bound statement, you can simply call mozistoragestatement.execute(). this is equivalent to calling mozistoragestatement.executestep() and then mozistoragestatement.reset(). resetting a statement when you execute a statement synchronously, it is i...
...ge the transactions for you, so you don't have to worry about them. note: the database engine does not support nested transactions, so attempting to start a transaction when one is already active will throw an exception. transactions can be started with mozistorageconnection.begintransaction() or mozistorageconnection.begintransactionas(). the latter takes one of three constants to describe the
type of transaction: mozistorageconnection.transaction_deferred mozistorageconnection.transaction_immediate mozistorageconnection.transaction_exclusive mozistorageconnection.begintransaction() is equivalent to calling mozistorageconnection.begintransactionas() and passing mozistorageconnection.transaction_deferred. in general, this is the method you want to use. once you start a transaction, y...
Weak reference
message* 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? you really want this weak reference scheme to give you a pointer that implements the interface you actually care about...
...supportsweakreference) // ... ns_interface_map_end // ...if you used a |ns_imple_queryinterfacen| macro, move up to the next higher one and add a term ns_impl_queryinterfacen+1( ...,nsisupportsweakreference) // ...if you implemented |queryinterface| by hand, add a clause ns_imethodimp nsfoo::queryinterface( refnsiid aiid, void** ainstanceptr ) { // ... else if ( aiid.equals(nscom
typeinfo<nsisupportsweakreference>::getiid()) ) *ainstancepr = ns_static_cast(nsisupportsweakreference*, this); // ... } alternatives this technique is useful, but in situations where you need this, there are two alternatives which you may want to consider: you might hold an owning reference, but arrange to release it out-of-band; this must be before the destructor, which would other...
XPCOM
le gecko versions (firefox 2 and 3, for example).creating a python xpcom componentcreating applications with mozilla already provides a tutorial for making a simple javascript or c++ component (implementing the nsisimple interface). here is how to make the same component in python using pyxpcom.fun with xbl and xpconnectgenerating guidsguids are used in mozilla programming for identifying several
types of entities, including xpcom interfaces (this
type of guids is callled iid), components (cid), and legacy add-ons—like extensions and themes—that were created prior to firefox 1.5. add-ons can (and should) be identified with ids of the form extensionname@organization.tld since firefox 1.5.generic factorymost xpcom factories can be very simple. rick potts wrote a templated-based generic facto...
...e (such as javascript) can be moved across platforms (such as windows and os x) without adaptation, those written in a compiled language (such as c++) require recompilation when moving to a different platform. often, compiled xpcom components are called 'binary' or 'native'.xpcom category image-sniffing-servicesin versions of firefox prior to firefox 3, extensions could add decoders for new image
types. however, such decoders relied on servers sending correct mime
types; images sent with incorrect mime
types would not be correctly displayed.xpcom gluethe xpcom glue is a static library which component developers and embedders can link against. it allows developers to link only against the frozen xpcom method symbols and maintain compatibility with multiple versions of xpcom.xpcom guidethese art...
Generating xpt on Windows
in order to generate an .xpt file from an .idl file in recent versions of the gecko \ xul runner sdk in windows, you need to use the
typelib.py script. ...
... in order to generate an .xpt file from an .idl file in recent versions of the gecko \ xul runner sdk in windows, you need to use the
typelib.py script. ...
Creating a gloda message query
of the provided nsimsgtag tags applied. (use nsimsgtagservice to access message tags.) query.starred(true/false): add the constraint that the message must be (or not be) starred (flagged). query.read(true/false): add the constraint that the message must be (or not be) marked as read. query.bodymatches(searchstring): perform a full-text search against plaintext message bodies. query.attachment
types(mime
type1, mime
type2, ...): constrain to messages with attachments among the given mime
types. in theory, providing no arguments should result in finding messages with any attachment, but this is somewhat untested. more constraints can be found in the three js files given further below. from https://developer.mozilla.org/docs/mozilla/thunderbird/thunderbird_extensions/demo_addon, demo3, it seem...
...tr.js: from: a single glodaidentity corresponding to the author of the message. to: a list of glodaidentity instances corresponding to the email addresses found on the to line of the message. cc: ditto, but cc. involves: a list of all glodaidentity instances associated with this message. effectively, this is the contents of from/to/cc in a single list and with duplicates removed. attachment
types: a list of the attachment mime
types found on this message. attributes provided by explattr.js: tags: a list of the nsimsgtags applied to this message. starred: a boolean indicating whether this message is starred/flagged or not. read: a boolean indicating whether this message is read or not. want a glodamessage when you already have an nsimsgdbhdr? gloda.getmessagecollectionforheader(...
Index
would be possible to add support for this. (there is a bug on it.) 51 the libmime module by richard h. pizzarro <rhp@netscape.com> 52 thunderbird api documentation these pages have been moved from mozilla.org, and may or may not be relevant. 55 thunderbird binaries branch, trunk, comm-central, thunderbird described below are three
types of generally available thunderbird packages - releases, early preview releases, and nightly builds (including trunk development builds) - and their downloaded locations. additionally, ad-hoc packages called try builds are made available on an as-needed basis to allow for testing of certain patches, and are typically announced in related bug reports. 56 thunderbird configuration files...
...e) is a windows feature that allows applications to send files via a system's default mail application. the thunderbird installer sets the installed build as the default mapi/mail client. if you want to set a debug build as the default mail client, you need configure it manually: 115 using the multiple accounts api by alec flett alecf@flett.org 118 libmime content
type handlers by richard h. pizzarro <rhp@netscape.com> ...
Adding items to the Folder Pane
first, our "numbers" container looks like this: let containerrow = { _numbers: 3, id: "numbers-main-container", text: "numbers", level: 0, open: false, _children: null, get children() { if (!this._children) { this._children = []; for (var i = 1; i <= this._numbers; i++) t...
...es here }, command: function gne_command() { // just going to alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice) .alert(window, null, this.text); } }; second, our child items (the numbers 1, 2, and 3) are copies of the following proto
type: function numberrow(anumber) { this._number = anumber; } numberrow.proto
type = { get id() { return "numbers-child-row-" + this._number; }, get text() { return this._number; }, level: 1, open: false, children: [], getproperties: function gne_kid_getprops() {}, // no-op command: function gne_kid_command() { // just going to alert,...
Building a Thunderbird extension 5: XUL
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 parsing our overlay file, the xul engine will take a...
...ar specifies the merge point within the application window that we want to attach to. when parsing our overlay file, the xul engine will take all child elements of the <statusbar> tag and merge them with the original xul document's <statusbar> tag. in the example above we have defined a new <statusbarpanel> item (that can be referred to as my-panel) which will create a new instance of this widget
type and add it at the end of the statusbar. in thunderbird it will appear as a label at the right side of thunderbird's statusbar and display "date". we have also added a <script> tag that contains a reference to the javascript file overlay.js. in the next section you will learn how to use javascript to modify your label so that it shows the current date. the overlay.js file will be created in a la...
customDBHeaders Preference
ce-delimited list in the latest code! ...
...ome://messenger/content/messenger.xul chrome://superfluous/content/superfluous_overlay.xul install.rdf: <?xml version='1.0' encoding='utf-8'?> <rdf xmlns='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:em='http://www.mozilla.org/2004/em-rdf#'> <description about='urn:mozilla:install-manifest'> <em:id>superfluous@yoursite.com</em:id> <em:version>0.1.1</em:version> <em:
type>2</em:
type> <!-- 2 is
type 'extension' --> <em:targetapplication> <description> <!-- this next line identifies tbird as target --> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>2*</em:minversion> <em:maxversion>3.0.0.*</em:maxversion> </description> </em:targetapplication> <em:name>superfluous</em:nam...
Examples
these examples demonstrate how to use js-c
types. general using c struct and pointers an example on how to use basic c data
types with js-c
types. standard os libraries some examples on how to get cursor position on each os. mac os x these examples require mac os x to operate. add image to iphoto an extension that adds a contextual menu item to images that lets you easily add them to iphoto on mac os x. using objective-c from js-c
types an example how to use objective-c from js-c
types, by converting objective-c code into c code. using com from js-c
types an example how to use com api of windows systems from js-c
types, by converting c++ code to c code. using jni from js-c
types an example how to use java from js-c
types, by converting java code into c code. js-macosx an exten...
... ...
Scripting plugins - Plugins
call methods on those browser objects. and as always when working with reference counted npobjects, the caller is responsible for calling npn_releaseobject on the npobject to drop the reference. ...
... objects. and as always when working with reference counted npobjects, the caller is responsible for calling npn_releaseobject on the npobject to drop the reference. ...
Gecko Plugin API Reference - Plugins
plug-in basics how plug-ins are used plug-ins and helper applications how plug-ins work understanding the runtime model plug-in detection how gecko finds plug-ins checking plug-ins by mime
type overview of plug-in structure understanding the plug-in api plug-ins and platform independence windowed and windowless plug-ins the default plug-in using html to display plug-ins plug-in display modes using the object element for plug-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawi...
...overview writing plug-ins registering plug-ins ms windows unix mac os x drawing a plug-in instance handling memory sending and receiving streams working with urls getting version and ui information displaying messages on the status line making plug-ins scriptable building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x
type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initialization instance creation instance destruction shutdown initialize and shutdown example drawing and event handling the npwindow structure drawing plug-ins printing the plug-in setting the window ...
Inspecting web app manifests - Firefox Developer Tools
you also need to make sure the json inside the file is of the correct format. you can test this using the web manifest validator. inspecting your manifest if your manifest is deployed successfully, you should end up with a display like the following on the manifest...
... you also need to make sure the json inside the file is of the correct format. ...
Use watchpoints - Firefox Developer Tools
an be useful to know when properties on objects are read or modified. in a large, complex codebase, it's not always easy to know where in the code a given property is accessed. in the firefox debugger, this information can be provided by watchpoints. by setting a watchpoint on the property, rather than a breakpoint at a particular line, you can discover where that access occurs. there are three
types of watchpoints: get, set, and get or set. a get watchpoint pauses whenever a property is read; a set watchpoint pauses whenever a property value changes; a get or set watchpoint pauses whenever a property value is accessed in either way. set a watchpoint run and then pause the debugger. in the scopes pane on the right side of the debugger user interface, find an object you want to watch, an...
... property set property get property get or set a watchpoint icon appears to the right of the property in the scopes pane. set watchpoint icons are blue, get watchpoint icons are reddish, and get or set watchpoint icons are dark yellow. click play or press f8 to resume execution. view a watchpoint when the watched property is accessed in the way specified by the watchpoint
type (get or set), the debugger pauses, enabling you to see line of code responsible, and to inspect anything else you wish at that time. in the following screenshot, the debugger pauses at line 7, where obj.a is set. the message panel in the upper right corner indicates that the debugger is "paused on property set". delete a watchpoint locate the watched property in the scopes pane. click the...
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
t components.utils is not defined, be sure you've selected browser from the scratchpad's environment menu, as described in step 2.) save the following html text to a file, and visit the file in your browser. make sure the current browser tab is displaying this page. <div onclick="dodivsandspans()"> click here to make the page do some allocations. ...
...'s environment menu, as described in step 2.) save the following html text to a file, and visit the file in your browser. make sure the current browser tab is displaying this page. <div onclick="dodivsandspans()"> click here to make the page do some allocations. ...
Debugger-API - Firefox Developer Tools
state as a javascript value—not just actual javascript values like objects and primitives, but also stack frames, environments, scripts, and compilation units, which are not normally accessible as objects in their own right. here is a javascript program in the process of running a timer callback function: a running javascript program and its debugger shadows this diagram shows the various
types of shadow objects that make up the debugger api (which all follow some general conventions): a debugger.object represents a debuggee object, offering a reflection-oriented api that protects the debugger from accidentally invoking getters, setters, proxy traps, and so on. a debugger.script represents a block of javascript code—either a function body or a top-level script. given a de...
...n units. a debugger.source can furnish a full copy of its source code, and explain how the code entered the system, whether via a call to eval, a <script> element, or otherwise. a debugger.script points to the debugger.source from which it is derived. also omitted is the debugger’s debugger.memory instance, which holds methods and accessors for observing the debuggee’s memory use. all these
types follow some general conventions, which you should look through before drilling down into any particular
type’s specification. all shadow objects are unique per debugger and per referent. for a given debugger, there is exactly one debugger.object that refers to a particular debuggee object; exactly one debugger.frame for a particular stack frame; and so on. thus, a tool can store metadata abou...
Dominators view - Firefox Developer Tools
size is in the nodes that it dominates. by clicking on the disclosure arrow next to the function, we can see those nodes. in this way you can quickly get a sense of which objects retain the most memory in the snapshot. you can use alt + click to expand the whole graph under a node. call stack in the toolbar at the top of the tool is a dropdown called "label by": by default, this is set to "
type". however, you can set it instead to "call stack" to see exactly where in your code the objects are being allocated. this option is called "allocation stack" in firefox 46. to enable this, you must check the box labeled "record call stacks" before you run the code that allocates the objects. then take a snapshot, then select "call stack" in the "label by" drop-down. now the node's name will ...
...ect, and so on. if you look in the dominators tree panel, you can trace the same path there. if either of these references were removed, the items below them could be garbage-collected. each connection in the graph is labeled with the variable name for the referenced object. sometimes there's more than one retaining path back from a node: here there are three paths back from the documentproto
type node to a gc root. if one were removed, then the documentproto
type would still not be garbage-collected, because it's still retained by the other two path. example let's see how some simple code is reflected in the dominators view. we'll use the monster allocation example, which creates three arrays, each containing 5000 monsters, each monster having a randomly-generated name. taking a snapsh...
Tree map view - Firefox Developer Tools
jects are using the most memory. a treemap displays "hierarchical (tree-structured) data as a set of nested rectangles". the size of the 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 spidermonkey 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 ...
... this includes internal spidermonkey 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 by the script's origin. it also includes a separate rectangle for code that can't be correlated with a file, such as jit-optimized code. other is further subdivided by the object's
type. here are some example snapshots, as they appear in the tree map view: this treemap is from the dom allocation example, which simply runs a script that creates a large number ...
Migrating from Firebug - Firefox Developer Tools
them like the one in firebug (see bug 1226640). stop script execution on dom mutation in firebug you can break on dom mutations, that means that when an element is changed, the script execution is stopped at the related line within the javascript file, which caused the change. this feature can globally be enabled via the break on mutate button, or individually for each element and for different
types of changes like attribute changes, content changes or element removal. unfortunately, the devtools do not have this feature yet (see bug 1004678). to stop the script execution there, you need to set a breakpoint on the line with the modification within the debugger panel. search for elements via css selectors or xpaths firebug allows to search for elements within the html panel via css selecto...
...s can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, eval(), new function(), etc.). in the devtools' debugger panel the scripts are listed at the left side within the sources side panel. dynamically generated scripts are only listed there when they are named via a //# sourceurl comment. managing breakpoints in firebug you can set different
types of breakpoints, which are all listed within the breakpoints side panel. in the devtools the breakpoints are shown below each script source within the sources side panel. those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. they do currently only allow to set script breakpoints. xhr, dom, cookie and error breakpoints are n...
Network request details - Firefox Developer Tools
see https://en.wikipedia.org/wiki/special:centralautologin/p3p for more info.\"" ...
... "value": "ns=-1;special=badtitle;wmf-last-access=11-jun-2019;wmf-last-access-global=11-jun-2019;https=1" }, { "name": "x-cache", "value": "cp1075 pass, cp1075 pass" }, { "name": "x-cache-status", "value": "pass" }, { "name": "x-client-ip", "value": "204.210.158.136" }, { "name": "x-content-
type-options", "value": "nosniff" }, { "name": "x-firefox-spdy", "value": "h2" }, { "name": "x-frame-options", "value": "sameorigin" }, { "name": "x-powered-by", "value": "hhvm/3.18.6-dev" }, { "name": "x-search-id", "value": "esvan0r5bnnwscyk2wq09i1im" }, { "name...
Edit fonts - Firefox Developer Tools
y clicking on the input field at the top of the section and entering a new value. once entered, all of the sample text will be set to the same custom value. variable font support in firefox developer tools firefox 62 added support for variable fonts and firefox 63 features support for editing the properties of variable fonts in the font editor. what are variable fonts? variable fonts, or open
type font variations, define a new font file format that allows the font designer to include multiple variations of a
typeface inside a single font file. that means you no longer have to apply several different web fonts to a single page to represent a complete
typeface for which a variable font is available, provided it includes the desired values for the different characteristics you want to vary. ...
...e identified using lower-case tags, whereas custom axes should be given upper-case tags. note that font designers aren't forced follow this practice in any way, and some won't. the important takeaway here is that axis tags are case-sensitive. warning: in order to use variable fonts, you need to make sure that your operating system is up to date. for example linux oses need the latest linux free
type version, and macos prior to 10.13 does not support variable fonts. if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools. working with variable fonts in the font editor if the inspected element uses a variable font, the fonts tab shows the axes that have been implemented for that particular font, providing control to ...
IndexedDB - Firefox Developer Tools
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. ...
... 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. ...
Taking screenshots - Firefox Developer Tools
he box in settings labeled "screenshot to clipboard": now, whenever you take a screenshot, the screenshot is also copied to the clipboard. taking screenshots with the web console if you need to specify a different device-pixel-ratio, set a delay before taking the screenshot, or specify your own file name, starting in firefox 62 you can use the :screenshot helper function in the web console. ...
...nsole if you need to specify a different device-pixel-ratio, set a delay before taking the screenshot, or specify your own file name, starting in firefox 62 you can use the :screenshot helper function in the web console.
type :screenshot in the web console to create a screenshot of the current page. by default, the image file will be named screen shot yyy-mm-dd at hh.mm.ss.png. tip: you could
type :s and then hit tab to autocomplete :screenshot. the command has the following optional parameters: command
type description --clipboard boolean when present, this parameter will cause the screenshot to be copied to the clipboard. prevents saving to a file unless you use the --file option to force file writing. --delay number the number of seconds t...
View Source - Firefox Developer Tools
errors according to the html specification, not all parse errors are reported by view source. among the errors that don't get reported: bytes that are illegal according to the document's encoding aren't marked as errors. forbidden characters aren't reported as errors. errors related to the end-of-file aren't reported. ...
... this mishighlighting can be seen by viewing the source of firefox chrome files (such as xul documents). ...
Rich output - Firefox Developer Tools
when the web console prints objects, it includes a richer set of information than just the object's name. in particular, it: provides extra information for certain
types enables detailed examination of the object's properties provides richer information for dom elements, and enables you to select them in the inspector
type-specific rich output the web console provides rich output for many object
types, including the following: object array date promise regexp 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 trian...
... ...
Web Console UI Tour - Firefox Developer Tools
into three horizontal sections, detailed in the sections below. toolbar the toolbar across the top contains a number of features: garbage can: click this icon to clear the contents of the console. funnel: click this icon to filter the messages that are displayed in the console. filter categories: you can click a filter category (such as errors, warnings, css, or xhr) to display just those
types of messages. settings ("gear" menu): new in firefox 71, you can click the gear icon to access the new settings menu, where you can toggle the following features on and off: persist logs: when enabled, the console doesn't clear on page reload, or new page load. show timestamps: when enabled, timestamps are shown on the left-hand side of each message row to say when the messages were log...
... 71, you can click the gear icon to access the new settings menu, where you can toggle the following features on and off: persist logs: when enabled, the console doesn't clear on page reload, or new page load. show timestamps: when enabled, timestamps are shown on the left-hand side of each message row to say when the messages were logged. group similar messages: when enabled, similar
types of messages are grouped together, with an indicator of the number of occurrences. enable autocompletion: when enabled, the javascript interpreter attempts to autocomplete while you
type. instant evaluation: when enabled, the interpreter displays the evaluated results of an expression, when possible, before you press enter to submit it. message display pane this is where the message...
AbstractWorker - Web APIs
methods the abstractworker interface doesn't implement or inherit any methods. ...
... methods the abstractworker interface doesn't implement or inherit any methods. example as an abstract interface, you won't directly use abstractworker in your code. instead, you'll interact with either worker or sharedworker, both of which inherit the properties of abstractworker. ...
AddressErrors - Web APIs
the addresserrors dictionary is used by the payment request api to to report validation errors in a physical address (typically a billing address or a shipping address). any members which is present indicates that a validation error occurred for the member of the same name in an address described using paymentaddress. addresserrors is the
type of the object returned by shippingaddresserrors in the paymentdetailsupdate passed into paymentrequestupdateevent.updatewith() by the shippingaddresschange event handler if a change to the address resulted in a validation error occurring. see the examples below to see how this works. properties addressline a domstring which, if present, indicates that the addressline property of the paymentaddress could not be validated. the contents of the strin...
...h allowing the donation payment itself. javascript payment request data first, we declare the variables supportedhandlers, which is compatible with paymentmethoddata, and defaultpaymentdetails, which is a paymentdetailsupdate object. ...
ArrayBufferView - Web APIs
specifications specification status comment web idlthe definition of 'arraybufferview' in that specification. ...
... specifications specification status comment web idlthe definition of 'arraybufferview' in that specification. ...
AudioBufferSourceNode.playbackRate - Web APIs
decodeaudiodata() function is used to decode an audio track, and put it into an audiobuffersourcenode. buttons are provided to play and stop the audio playback, and a slider control is used to change the playbackrate property value on the fly. you can run the example live (or view the source.) play the song and alter the playback rate for some fun results. ...
... example live (or view the source.) play the song and alter the playback rate for some fun results. ...
AudioContext() - Web APIs
graph, built from audio modules linked together, each represented by an audionode. syntax var audioctx = new audiocontext(); var audioctx = new audiocontext(options); parameters options optional an object based on the audiocontextoptions dictionary that contains zero or more optional properties to configure the new context. available properties are as follows: latencyhint optional the
type of playback that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred maximum latency of the context in seconds. the user agent may or may not choose to meet this request; check the value of audiocontext.baselatency to determine the true latency after creating the context. samplerate optional the s...
...inimum number of audio contexts that must be able to be open at the same time, so this is left up to the browser implementations to decide. google chrome per-tab audio context limitation in chrome prior to version 66 google chrome only supported up to six audio contexts per tab at a time. non-standard exceptions in chrome if the value of the latencyhint property isn't valid, chrome throws a
typeerror exception with the message "the provided value '...' is not a valid enum value of
type audiocontextlatencycategory". example this example creates a new audiocontext for interactive audio (optimizing for latency) and a sample rate of 44.1khz. var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext({ latencyhint: 'interactive', samplerate: 4...
AudioContext.createJavaScriptNode() - Web APIs
utputchannels the number of output channels in the audio stream. ...
...text) { var that = this; this.x = 0; // initial sample number this.context = context; this.node = context.createjavascriptnode(1024, 1, 1); this.node.onaudioprocess = function(e) { that.process(e) }; } sinewave.proto
type.process = function(e) { var data = e.outputbuffer.getchanneldata(0); for (var i = 0; i < data.length; ++i) { data[i] = math.sin(this.x++); } } sinewave.proto
type.play = function() { this.node.connect(this.context.destination); } sinewave.proto
type.pause = function() { this.node.disconnect(); } see also generating tones with the web audio api exploring the html5 web audio: visualizing sound ...
AudioContextOptions - Web APIs
the audiocontextoptions dictionary is used to specify configuration options when constructing a new audiocontext object to represent a graph of web audio nodes. it is only used when calling the audiocontext() constructor. properties latencyhint optional the
type of playback that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred maximum latency of the context in seconds. the user agent may or may not choose to meet this request; check the value of audiocontext.baselatency to determine the true latency after creating the context. samplerate optional the samplerate to be used by the audiocontext, specified in samples per second. the value may be any value supported by audiobuffer. if not s...
...ond. the value may be any value supported by audiobuffer. if not specified, the preferred sample rate for the context's output device is used by default. constants standard values for latencyhint the latencyhint property can be number specifying a preferred maximum latency in seconds or a string from the audiocontextlatencycategory enumerated string, which selects a standard value for a given
type of audio usage: value description "balanced" the user agent should balance audio output latency and power consumption when selecting a latency value. "interactive" the audio is involved in interactive elements, such as responding to user actions or needing to coincide with visual cues such as a video or game action. the user agent should select the lowest poss...
AudioParam.setValueCurveAtTime() - Web APIs
into the given interval starting at starttime and a specific duration. syntax var paramref = param.setvaluecurveattime(values, starttime, duration); parameters values an array of floating-point numbers representing the value curve the audioparam will change through along the specified duration. every value in the array must be a finite number; if any value is nan, infinity, or -infinity, a
typeerror exception is thrown. starttime a double representing the time (in seconds) after the audiocontext was first created that the change in value will happen. if this value is lower than audiocontext.currenttime, it is clamped to currenttime. duration a double representing the total time (in seconds) over which the parameter's value will change following the specified curve. the specified val...
...lues are spaced equally along this duration. return value a reference to this audioparam object. some older browser implementations of this interface return undefined. exceptions invalidstateerror the specified array of values has fewer than 2 items in it. rangeerror the specified starttime is either negative or a non-finite value, or duration is not a finite, strictly positive number.
typeerror one or more of the values in the values array is non-finite. non-finite values are nan, infinity, and -infinity. usage notes when the parameter's value finishes following the curve, its value is guaranteed to match the last value in the set of values specified in the values parameter. note: some early implementations of the web audio api did not ensure this to be the case, causing unex...
AudioProcessingEvent - Web APIs
the web audio api audioprocessingevent represents events that occur when a scriptprocessornode input buffer is ready to be processed. note: as of the august 29 2014 web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audioworklet. properties the list below includes the properties inherited from its parent, event. property
type description target read only eventtarget the event target (the topmost target in the dom tree).
type read only domstring the
type of event. bubbles read only boolean does the event normally bubble? cancelable read only boolean is it possible to cancel the event? playbacktime read only double the time when the au...
...e = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.response
type = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingev...
AudioTrackList: change event - Web APIs
udio track is enabled or disabled, for example by changing the track's enabled property. ...
...ger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.audiotracks.onchange = (event) => { console.log(`'${event.
type}' event fired`); }; // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); specifications specification status html living standardthe definition of 'change'...
AuthenticatorResponse.clientDataJSON - Web APIs
esponse, specifically authenticatorattestationresponse or authenticatorassertionresponse. syntax var arraybuffer = authenticatorattestationresponse.clientdatajson; var arraybuffer = authenticatorassertionresponse.clientdatajson; value an arraybuffer. properties after the clientdatajson 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 publickeycredentialrequestoptions.challenge or publickeycredentialcreationoptions.challenge. origin the fully qualif...
...bsent, it would indicate that the client does not support token binding. ...
BaseAudioContext.createBiquadFilter() - Web APIs
syntax baseaudiocontext.createbiquadfilter(); returns a biquadfilternode. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
... working draft ...
BaseAudioContext.decodeAudioData() - Web APIs
rror callback, to be invoked if an error occurs when the audio data is being decoded. return value void, or a promise object that fulfills with the decodeddata. example in this section we will first cover the older callback-based system and then the newer promise-based syntax. older callback syntax in this example, the getdata() function uses xhr to load an audio track, setting the response
type of the request to arraybuffer so that it returns an array buffer as its response that we then store in the audiodata variable . we then pass this buffer into a decodeaudiodata() function; the success callback takes the successfully decoded pcm data, puts it into an audiobuffersourcenode created using audiocontext.createbuffersource(), connects the source to the audiocontext.destination and sets i...
...ript'); var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); // use xhr to load an audio track, and // decodeaudiodata to decode it and stick it in a buffer. ...
BatteryManager - Web APIs
ted batterymanager.ondischargingtimechange a handler for the dischargingtimechange event; this event is sent when the battery discharging time is updated. batterymanager.onlevelchange a handler for the levelchange event; this event is sent when the battery level is updated. methods inherited from eventtarget: eventtarget.addeventlistener() registers an event handler of a specific event
type on the eventtarget. eventtarget.removeeventlistener() removes an event listener from the eventtarget. eventtarget.dispatchevent() dispatches an event to this eventtarget. additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event targets to implement onevent properties. see also webidl bindings. void seteventhandler(domstring t...
...vent listener from the eventtarget. eventtarget.dispatchevent() dispatches an event to this eventtarget. ...
Using the Beacon API - Web APIs
n requests are guaranteed to be initiated before the page unloads. this document contains examples of the beacon interfaces. see beacon api for an overview. navigator.sendbeacon() the beacon api's navigator.sendbeacon() method sends a beacon request to the server in the global browsing context. the method takes two arguments: the url and the data to send. the data argument is optional and its
type may be an arraybufferview, blob, domstring, or formdata. if the browser successfully queues the request for delivery, the method returns true and returns false otherwise. the following example specifies a handler for the load and beforeunload events. the handler calls sendbeacon() with the current url. window.onload = window.onunload = function analytics(event) { if (!navigator.sendbeacon) r...
...livery, the method returns true and returns false otherwise. the following example specifies a handler for the load and beforeunload events. the handler calls sendbeacon() with the current url. window.onload = window.onunload = function analytics(event) { if (!navigator.sendbeacon) return; var url = "https://example.com/analytics"; // create the data to send var data = "state=" + event.
type + "&location=" + location.href; // send the beacon var status = navigator.sendbeacon(url, data); // log the data and result console.log("sendbeacon: url = ", url, "; data = ", data, "; status = ", status); }; the following example creates a submit handler and when that event is fired, the handler calls sendbeacon(). window.onsubmit = function send_analytics() { var data = json.stri...
Beacon API - Web APIs
sult in the perception of poor page load performance for the next navigation. the beacon api provides a standard way to address these issues. global context the beacon api's navigator.sendbeacon() method is used to send a beacon of data to the server in the global browsing context. the method takes two arguments, the url and the data to send in the request. the data argument is optional and its
type may be an arraybufferview, blob, domstring, or formdata. if the browser successfully queues the request for delivery, the method returns "true" and returns "false" otherwise. worker context the beacon api's navigator.sendbeacon() method is used to send a beacon of data to the server from the worker global scope. the method takes two arguments, the url and the data to send in the request. the da...
..., domstring, or formdata. if the browser successfully queues the request for delivery, the method returns "true" and returns "false" otherwise. worker context the beacon api's navigator.sendbeacon() method is used to send a beacon of data to the server from the worker global scope. the method takes two arguments, the url and the data to send in the request. the data argument is optional and its
type may be an arraybufferview, blob, domstring, or formdata. if the browser successfully queues the request for delivery, the method returns "true" and otherwise returns "false". ...
BiquadFilterNode - Web APIs
rithm measured in hertz (hz). biquadfilternode.detune read only is an a-rate audioparam representing detuning of the frequency in cents. biquadfilternode.q read only is an a-rate audioparam, a double representing a q factor, or quality factor. biquadfilternode.gain read only is an a-rate audioparam, a double representing the gain used in the current filtering algorithm. biquadfilternode.
type is a string value defining the kind of filtering algorithm the node is implementing. the meaning of the different parameters depending of the
type of the filter (detune has the same meaning regardless, so isn't listed below)
type description frequency q gain lowpass standard second-order resonant lowpass filter with 12db/octave rolloff. fre...
... working draft ...
Blob() - Web APIs
blob object. the content of the blob consists of the concatenation of the values given in the parameter array. syntax var newblob = new blob(array, options); parameters array an array of arraybuffer, arraybufferview, blob, usvstring objects, or a mix of any of such objects, that will be put inside the blob. usvstring objects are encoded as utf-8. options optional an optional object of
type blobpropertybag which may specify any of the following properties:
type optional the mime
type of the data that will be stored into the blob. the default value is the empty string, (""). endings optional how to interpret newline characters (\n) within the contents, if the data is text. the default value, transparent, copies newline characters into the blob without changing them. to c...
...xt. the default value, transparent, copies newline characters into the blob without changing them. to convert newlines to the host system's native convention, specify the value native. return value a new blob object containing the specified data. example var afileparts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single domstring var omyblob = new blob(afileparts, {
type : 'text/html'}); // the blob specification specification status comment file apithe definition of 'blob()' in that specification. working draft initial definition. ...
Blob.size - Web APIs
the blob interface's size property returns the size of the blob or file in bytes. syntax var sizeinbytes = blob.size value the number of bytes of data contained within the blob (or blob-based object, such as a file). example this example uses an <input> element of
type file to ask the user for a group of files, then iterates over those files outputting their names and lengths in bytes. ...
...ns the size of the blob or file in bytes. syntax var sizeinbytes = blob.size value the number of bytes of data contained within the blob (or blob-based object, such as a file). example this example uses an <input> element of
type file to ask the user for a group of files, then iterates over those files outputting their names and lengths in bytes. ...
Blob.slice() - Web APIs
if you specify a negative value, it's treated as an offset from the end of the blob toward the beginning. for example, -10 would be the 10th from last byte in the blob. the default value is 0. ...
...has size 0 and contains no data. end optional an index into the blob indicating the first byte that will *not* be included in the new blob (i.e. the byte exactly at this index is not included). if you specify a negative value, it's treated as an offset from the end of the blob toward the beginning. for example, -10 would be the 10th from last byte in the blob. the default value is size. content
type optional the content
type to assign to the new blob; this will be the value of its
type property. the default value is an empty string. return value a new blob object containing the specified subset of the data contained within the blob on which this method was called. the original blob is not altered. specifications specification status comment file apithe definitio...
Body.blob() - Web APIs
return value a promise that resolves with a blob. ...
... return value a promise that resolves with a blob. ...
BroadcastChannel: message event - Web APIs
le no interface messageevent event handler property onmessage examples live example in this example there's a "sender" <iframe> that broadcasts the contents of a <textarea> when the user clicks a button. there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
...sender" <iframe> that broadcasts the contents of a <textarea> when the user clicks a button. there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
CSSImageValue - Web APIs
the cssimagevalue object represents an <image> that involves an url, such as url() or image(), but not linear-gradient() or element() . properties none. methods none. examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px; background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map. ...
... working draft initial definition. ...
CSSKeywordValue - Web APIs
the interface instance name is a stringifier meaning that when used anywhere a string is expected it will return the value of csskeyword.value. constructor csskeywordvalue.csskeywordvalue() creates a new csskeywordvalue object. properties csskeywordvalue.value returns or sets the value of the csskeywordvalue. 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. ...
... working draft initial definition. ...
CSSMathSum - Web APIs
constructor cssmathsum.cssmathsum() creates a new cssmathsum object. properties cssmathsum.values returns a cssnumericarray object which contains one or more cssnumericvalue objects. event handlers no methods none. examples we create an element with a width determined using a calc() function, then console.log() the operator and values, and dig into the values a bit. ...
... working draft initial definition. ...
CSSNumericValue.equals() - Web APIs
the equals() method of the cssnumericvalue interface returns a boolean indicating whether the passed value are strictly equal. to return a value of true, all passed values must be of the same
type and value and must be in the same order. this allows structural equality to be tested quickly. syntax var boolean = cssnumericvalue.equals(number); parameters number either a number or a cssnumericvalue. return value a boolean. exceptions none. examples as stated earlier, all passed values must be of the same
type and value and must be in the same order. some of the following examples illustrate what happens when they are not. let cssmathsum = new cssmathsum(css.px(1), css.px(2)); let matchingcssmathsum = new cssmathsum(css.px(1), css.px(2)); // prints true console.log(cssmathsum.e...
... working draft initial definition. ...
CSSNumericValue.max() - Web APIs
the max() method of the cssnumericvalue interface returns the highest value from among the values passed. the passed values must be of the same
type. syntax var cssunitvalue = cssnumericvalue.man(number1 ... numbern); parameters number either a number or a cssnumericvalue. return value a cssunitvalue. exceptions
typeerror indicates that an invalid
type was passed to the method. examples as stated earlier, all passed values must be of the same
type and value. some of the following examples illustrate what happens when they are not. ...
... examples as stated earlier, all passed values must be of the same
type and value. some of the following examples illustrate what happens when they are not. // prints "2cm" console.log(css.cm("1").max(css.cm("2")).tostring()); // prints "max(1cm, 0.393701in)" console.log(css.cm("1").max(css.in("0.393701")).tostring()); specifications specification status comment css
typed om level 1the definition of 'max' in that specification. working draft initial definition. ...
CSSNumericValue.min() - Web APIs
the min() method of the cssnumericvalue interface returns the lowest value from among those values passed. the passed values must be of the same
type. syntax var cssunitvalue = cssnumericvalue.min(number1 ... numbern); parameters number either a number or a cssnumericvalue. return value a cssunitvalue. exceptions
typeerror indicates that an invalid
type was passed to the method. examples as stated earlier, all passed values must be of the same
type and value. some of the following examples illustrate what happens when they are not. ...
... examples as stated earlier, all passed values must be of the same
type and value. some of the following examples illustrate what happens when they are not. // prints "1cm" console.log(css.cm("1").min(css.cm("2")).tostring()); // prints "max(1cm, 0.393701in)" console.log(css.cm("1").max(css.in("0.393701")).tostring()); specifications specification status comment css
typed om level 1the definition of 'min' in that specification. working draft initial definition. ...
CSSPrimitiveValue.getFloatValue() - Web APIs
the getfloatvalue() method of the cssprimitivevalue interface is used to get a float value in a specified unit. if this css value doesn't contain a float value or can't be converted into the specified unit, a domexception is raised. syntax var floatvalue = cssprimitivevalue.getfloatvalue(unit); parameters unit
type an unsigned short representing the code for the unit
type, in which the value should be returned. valid values are: constant description css_cm the value is a <length> in centimeters. css_deg the value is an <angle> in degrees. css_dimension the value is a <number> with an unknown dimension. css_ems the value is a <length> in em units. css_exs the value is a <length> in ex units. ...
... a <length> in picas. css_percentage the value is a <percentage>. css_pt the value is a <length> in points. css_px the value is a <length> in pixels. css_rad the value is an <angle> in radians. css_s the value is a <time> in seconds. return value a float value in the specified unit. exceptions
type description domexception an invalid_access_err is raised if the css value doesn't contain a float value or if the float value can't be converted into the specified unit. example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("margin-top"); console.log(cssvalue.getfloatvalue(cssprimitivevalue.css_cm)); specifications spe...
CSSPrimitiveValue.setFloatValue() - Web APIs
the setfloatvalue() method of the cssprimitivevalue interface is used to set a float value. if the property attached to this value can't accept the specified unit or the float value, the value will be unchanged and a domexception will be raised. syntax cssprimitivevalue.setfloatvalue(unit
type, floatvalue); parameters unit
type an unsigned short representing the code for the unit
type, in which the value should be returned. valid values are: constant description css_cm the value is a <length> in centimeters. css_deg the value is an <angle> in degrees. css_dimension the value is a <number> with an unknown dimension. css_ems the value is a <length> in em units. css_exs the value is a <length> i...
... css_percentage the value is a <percentage>. css_pt the value is a <length> in points. css_px the value is a <length> in pixels. css_rad the value is an <angle> in radians. css_s the value is a <time> in seconds. floatvalue a float representing the new float value. return value void. exceptions
type description domexception an invalid_access_err is raised if the css value doesn't contain a float value or if the string value can't be converted into the specified unit. an no_modification_allowed_err is raised if this property is read-only. specifications specification status comment document object model (dom) level 2 style specificationth...
CSSPrimitiveValue.setStringValue() - Web APIs
the setstringvalue() method of the cssprimitivevalue interface is used to set a string value. if the property attached to this value can't accept the specified unit or the string value, the value will be unchanged and a domexception will be raised. syntax cssprimitivevalue.setstringvalue(string
type, stringvalue); parameters string
type an unsigned short representing the
type of the value. ...
... of the value. possible values are: constant description css_attr the value is an attr() function. css_ident the value is an identifier. css_string the value is a <string>. css_uri the value is a <uri>. stringvalue a domstring representing the new string value. return value void. exceptions
type description domexception an invalid_access_err is raised if the css value doesn't contain a string value or if the string value can't be converted into the specified unit. an no_modification_allowed_err is raised if this property is read-only. specifications specification status comment document object model (dom) level 2 style specificationt...
CSSPseudoElement - Web APIs
the csspseudoelement interface represents a pseudo-element that may be the target of an event or animated using the web animations api. instances of this interface may be obtained by calling element.pseudo(). properties csspseudoelement.element read only returns the originating/parent element of the pseudo-element. csspseudoelement.
type read only returns the pseudo-element selector as a cssomstring. methods csspseudoelement extends eventtarget, so it inherits the following methods: eventtarget.addeventlistener() registers an event handler of a specific event
type on the pseudo-element. eventtarget.dispatchevent() dispatches an event to this pseudo-element. eventtarget.removeeventlistener() removes an event listener from the pseudo-element. examples basic example u...
... (a style rule may be needed to add quotation marks in older browsers.) the example below demonstrates the basic properties of the csspseudoelement object representing the opening quotation mark. const element = document.queryselector('q'); const csspseudoelement = element.pseudo('::before'); console.log(csspseudoelement.element); // outputs [object htmlquoteelement] console.log(csspseudoelement.
type); // outputs '::before' specifications specification status comment css pseudo-elements level 4the definition of 'csspseudoelement' in that specification. working draft initial definition. ...
CSSStyleSheet.insertRule() - Web APIs
s a new css rule into the current style sheet, with some restrictions. note: although insertrule() is exclusively a method of cssstylesheet, it actually inserts the rule into cssstylesheet.cssrules — its internal cssrulelist. syntax stylesheet.insertrule(rule [, index]) parameters rule a domstring containing the rule to be inserted. what the inserted rule must contain depends on its
type: for rule-sets, both a selector and a style declaration. for at-rules, both an at-identifier and the rule content. index optional a positive integer less than or equal to stylesheet.cssrules.length, representing the newly inserted rule's position in cssstylesheet.cssrules. the default is 0. (in older implementations, this was required. see browser compatibility for details.) return...
... working draft no change from document object model (dom) level 2 style specification. document object model (dom) level 2 style specificationthe definition of 'cssstylesheet.insertrule' in that specification. obsolet...
CSSStyleValue - Web APIs
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 csskeywordvalue 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. ...
... working draft initial definition. ...
CSSUnitValue - Web APIs
the cssunitvalue interface of the css
typed object model api represents values that contain a single unit
type. for example, "42px" would be represented by a cssnumericvalue. constructor cssstylevalue.cssunitvalue() creates a new cssunitvalue object. properties cssunitvalue.value returns a double indicating the number of units. cssunitvalue.unit returns a usvstring indicating the
type of unit. event handlers none. methods none. examples the following shows a method of creating a csspositionvalue from individual cssunitvalue constructors. ...
...nits. cssunitvalue.unit returns a usvstring indicating the
type of unit. event handlers none. methods none. examples the following shows a method of creating a csspositionvalue from individual cssunitvalue constructors. let pos = new csspositionvalue( new cssunitvalue(5, "px"), new cssunitvalue(10, "px")); specifications specification status comment css
typed om level 1the definition of 'cssunitvalue' in that specification. working draft initial definition. ...
CSSUnparsedValue - Web APIs
the cssunparsedvalue interface of the css
typed object model api represents property values that reference custom properties. it consists of a list of string fragments and variable references. custom properties are 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. methods cssunparsedvalue.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 proto
type chain as well). cssunparse...
...on once for each element of the cssunparsedvalue object. cssunparsedvalue.keys() returns a new array iterator object that contains the keys 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. working draft initial definition. ...
CSSValue - Web APIs
possible values are: constant description css_custom the value is a custom value. css_inherit the value is inherited and the csstext contains "inherit". ...
...possible values are: constant description css_custom the value is a custom value. css_inherit the value is inherited and the csstext contains "inherit". ...
CSS Object Model (CSSOM) - Web APIs
nestyle fontface fontfaceset fontfacesetloadevent 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. ...
...nparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era). managing screen orientation specifications specification status comment css
typed om level 1 working draft css painting api level 1 working draft extended the css interface with the paintworklet static property. css object model (cssom) view module working draft defined the screen and mediaquerylist interfaces and the mediaquerylistevent event and mediaquerylistlistener event listener. css object model (cssom) working draft ...
CSS Properties and Values API - Web APIs
the css properties and values api — part of the css houdini umbrella of apis — allows developers to explicitly define their css custom properties, allowing for property
type checking, default values, and properties that do or do not inherit their value. interfaces css.registerproperty defines how a browser should parse a css custom properties. access this interface through css.registerproperty in javascript. @property defines how a browser should parse a css custom properties. access this interface through @property in css. ...
...rties that do or do not inherit their value. interfaces css.registerproperty defines how a browser should parse a css custom properties. access this interface through css.registerproperty in javascript. @property defines how a browser should parse a css custom properties. access this interface through @property in css. ...
Cache.add() - Web APIs
note: add() will overwrite any key/value pair previously stored in the cache that matches the request. ...
...erwrite 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 the url scheme is not http or https. the response status is not in the 200 range (i.e., not a successful response.) this occurs if the request does not return successfully, but also if the request is a cross-origin no-cors request (in which case the reported status is always 0.) examples this code block waits for an installevent to fire, then calls waituntil() to han...
Cache.put() - Web APIs
f 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/cache.addall can't be us...
... opaque responses, whereas cache.put can. syntax cache.put(request, response).then(function() { // request/response pair has been added to the cache }); parameters request the request object or url that you want to add to the cache. response the response you want to match up to the request. return value a promise that resolves with undefined. note: the promise will reject with a
typeerror if the url scheme is not http or https. examples this example is from the mdn sw-test example (see sw-test running live). here we wait for a fetchevent to fire. we construct a custom response like so: check whether a match for the request is found in the cachestorage using cachestorage.match(). if so, serve that. if not, open the v1 cache using open(), put the default network request ...
Cache - Web APIs
esolves 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() to open any cache objects with a content-
type header that starts with font/. the code then uses cache.match() to see if there's already a matching font in the cache, and if so, returns it. if there isn't a matching font, the code fetches the font from the network and uses cache.put() to cache the fetched resource. the code handles exceptions thrown from the fetch() operation. note that an http error response (e.g., 404) will not trigger an...
...r on. // both fetch() and cache.put() "consume" the request, so we need to make a copy. // (see /docs/web/api/request/clone) return fetch(event.request.clone()).then(function(response) { console.log(' response for %s from network is: %o', event.request.url, response); if (response.status < 400 && response.headers.has('content-
type') && response.headers.get('content-
type').match(/^font\//i)) { // this avoids caching responses that we know are errors (i.e. http status code of 4xx or 5xx). // we also only want to cache responses that correspond to fonts, // i.e. have a content-
type response header that starts with "font/". // note that for opaque filtered responses...
CanvasRenderingContext2D.miterLimit - Web APIs
er limit ratio, in coordinate space units. zero, negative, infinity, and nan values are ignored. the default value is 10.0. examples using the miterlimit property see the chapter applying styles and color in the canvas tutorial for more information. ...
...egative, infinity, and nan values are ignored. the default value is 10.0. examples using the miterlimit property see the chapter applying styles and color in the canvas tutorial for more information. ...
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
ew() method. ...
...elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button"
type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit"
type="button" value="edit" /> <input id="reset"
type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = doc...
Manipulating video using canvas - Web APIs
by combining the capabilities of the video element with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed. this tutorial demonstrates how to perform chroma-keying (also known as the "green screen effect") using javascript code. the document content the html document used to render this content is shown below. ...
... 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...
Basic animations - Web APIs
); } } // draw image ctx.drawimage(img, x, y,imgw, imgh); // amount to move x += dx; } below is the <canvas> in which the image is scrolled. note that the width and height specified here must match the values of the canvasxzsize and canvasysize variables in the javascript code. ...
...t> <style> #cw { position: fixed; z-index: -1; } body { margin: 0; padding: 0; background-color: rgba(0,0,0,0.05); } </style> </head> <body> <canvas id="cw"></canvas> </body> </html> output snake game <!doc
type 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)">→<...
Drawing shapes with canvas - Web APIs
...
... rect(x, y, width, height) draws a rectangle whose top-left corner is specified by (x, y) with the specified width and height. before this method is executed, the moveto() method is automatically called with the parameters (x,y). in other words, the current pen position is automatically reset to the default coordinates. making combinations so far, each example on this page has used only one
type of path function per shape. however, there's no limitation to the number or
types of paths you can use to create a shape. so in this final example, let's combine all of the path functions to make a set of very famous game characters. <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementb...
Using images - Web APIs
ource! importing images into a canvas is basically a two step process: get a reference to an htmlimageelement object or to another canvas element as a source. it is also possible to use images by providing a url. draw the image on the canvas using the drawimage() function. let's take a look at how to do this. getting images to draw the canvas api is able to use any of the following data
types as an image source: htmlimageelement these are images created using the image() constructor, as well as any <img> element. svgimageelement these are images embedded using the <image> element. htmlvideoelement using an html <video> element as your image source grabs the current frame from the video and uses it as an image. htmlcanvaselement you can use another <canvas> element as your i...
...ed using the image() constructor, as well as any <img> element. svgimageelement these are images embedded using the <image> element. htmlvideoelement using an html <video> element as your image source grabs the current frame from the video and uses it as an image. htmlcanvaselement you can use another <canvas> element as your image source. these sources are collectively referred to by the
type canvasimagesource. there are several ways to get images for use on a canvas. using images from the same page we can obtain a reference to images on the same page as the canvas by using one of: the document.images collection the document.getelementsbytagname() method if you know the id of the specific image you wish to use, you can use document.getelementbyid() to retrieve that specific im...
ChildNode.replaceWith() - Web APIs
10+ and higher with the following code: function replacewithpolyfill() { 'use-strict'; // for safari, and ie > 10 var parent = this.parentnode, i = arguments.length, currentnode; if (!parent) return; if (!i) // if there are no arguments parent.removechild(this); while (i--) { // i-- decrements i and returns the value of i before the decrement currentnode = arguments[i]; if (
typeof currentnode !== 'object'){ currentnode = this.ownerdocument.createtextnode(currentnode); } else if (currentnode.parentnode){ currentnode.parentnode.removechild(currentnode); } // the value of "i" below is after the decrement if (!i) // if currentnode is the first argument (currentnode === arguments[0]) parent.replacechild(currentnode, this); else // if curr...
...se if (currentnode.parentnode){ currentnode.parentnode.removechild(currentnode); } // the value of "i" below is after the decrement if (!i) // if currentnode is the first argument (currentnode === arguments[0]) parent.replacechild(currentnode, this); else // if currentnode isn't the first parent.insertbefore(currentnode, this.nextsibling); } } if (!element.proto
type.replacewith) element.proto
type.replacewith = replacewithpolyfill; if (!characterdata.proto
type.replacewith) characterdata.proto
type.replacewith = replacewithpolyfill; if (!document
type.proto
type.replacewith) document
type.proto
type.replacewith = replacewithpolyfill; specification specification status comment domthe definition of 'childnode.replacewith()' in th...
ChildNode - Web APIs
properties there are neither inherited, nor specific properties. methods there are no inherited methods. childnode.remove() removes this childnode from the children list of its parent. childnode.before() inserts a set of node or domstring objects in the children list of this childnode's parent, just before this childnode. domstring objects are inserted as equivalent text nodes. childnode.after() inserts a set of node or domstring objects in the children list of this childnode's parent, just after this childnode. ...
...mstring objects. domstring objects are inserted as equivalent text nodes. specifications specification status comment domthe definition of 'childnode' in that specification. living standard split the elementtraversal interface in parentnode and childnode. previouselementsibling and nextelementsibling are now defined on the latter. the characterdata and document
type implemented the new interfaces. added the remove(), before(), after() and replacewith() methods. element traversal specificationthe definition of 'elementtraversal' in that specification. obsolete added the initial definition of its properties to the elementtraversal pure interface and use it on element. polyfill external on github: childnode.js ...
Clipboard.read() - Web APIs
the "clipboard-read" feature. navigator.permissions.query({name: "clipboard-read"}).then(result => { // if permission to read the clipboard is granted or if the user will // be prompted to allow it, we proceed. ...
... if the user will // be prompted to allow it, we proceed. if (result.state == "granted" || result.state == "prompt") { navigator.clipboard.read().then(data => { for (let i=0; i<data.items.length; i++) { if (data.items[i].
type != "image/png") { alert("clipboard contains non-image data. unable to access it."); } else { const blob = data.items[i].get
type("image/png"); imgelem.src = url.createobjecturl(blob); } } }); } }); note: at this time, while firefox does implement read(), it does not recognize the "clipboard-read" permission, so attempting to use the permissions api to manage access to the api will not work. specifications specification status comment clipboard api and eventsthe de...
Clipboard.write() - Web APIs
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, onerror) { canvas.toblob(function (blob) { let data = [new clipboarditem({ [bl...
...he 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, onerror) { canvas.toblob(function (blob) { let data = [new clipboarditem({ [blob.
type]: blob })]; navigator.clipboard.write(data).then(function () { ondone(); }, function (err) { onerror(err); }) }); } note: you can only pass in one clipboard item at a time. specifications specification status comment clipboard api and eventsthe definition of 'write()' in that specification. working draft initial definition. ...
ClipboardItem() - Web APIs
s a new clipboarditem 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 ite...
...esponses' 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. async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.
type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification. working draft initial definition. ...
Console.table() - Web APIs
ect) will be a row in the table. the first column in the table will be labeled (index). if data is an array, then its values will be the array indices. if data is an object, then its values will be the property names. note that (in firefox) console.table is limited to displaying 1000 rows (first row is the labeled index). note: this feature is available in web workers. ...
... web workers. collections of primitive
types the data argument may be an array or an object. ...
ConstrainDouble - Web APIs
it extends the doublerange dictionary (which provides the ability to specify a permitted range of property values) to also support an exact value and/or an ideal value the property should take on. additionally, you can specify the property's value as a simple floating-point value, in which case the user agent does its best to match the value once all other more stringent constraints are met. properties if the value of a constraindouble is an object rather than a number, it may have the properties below in addition the properties it inherits from doublerange. ...
... a match. specifications specification status comment media capture and streamsthe definition of 'constraindouble' in that specification. candidate recommendation initial definition technically, constraindouble is actually based on an intermediary dictionary named constraindoublerange, which adds exact and ideal to doublerange, with constraindouble being a
type that can be either a long integer or a doublerange. however, for the sake of documentation clarity, the intermediate
type (present only because of quirks in webidl syntax) is ignored here. ...
ConstrainULong - Web APIs
it extends the ulongrange dictionary (which provides the ability to specify a permitted range of property values) to also support an exact value and/or an ideal value the property should take on. in addition, you can specify the value as a simple long integer value, in which case the user agent does its best to match the value once all other more stringent constraints are met. properties if the value of a constrainulong is an object rather than a number, it may have the properties below in addition to the properties it inherits from ulongrange. exact an integer specifying precise, required, value the property must have to be considered acceptable. ...
... find a match. specifications specification status comment media capture and streamsthe definition of 'constrainulong' in that specification. candidate recommendation initial definition technically, constrainulong is actually based on an intermediary dictionary named constrainulongrange, which adds exact and ideal to ulongrange, with constrainulong being a
type that can be either a long integer or a ulongrange. however, for the sake of documentation clarity, the intermediate
type (present only because of quirks in webidl syntax) is ignored here. ...
Constraint validation API - Web APIs
tion api is done either on a single form element or at the form level, on the <form> element itself. constraint validation interfaces validitystate the validitystate interface represents the validity states that a form control element can have, with respect to its defined constraints. together, they help explain whether and why an element's value fails to validate. invalid event this event
type is fired at a form control element if the element does not satisfy its constraints. extensions to other interfaces the constraint validation api extends the interfaces for the form-associated elements listed below with a number of new properties and methods (elements that can have a form attribute that indicates their form owner): htmlbuttonelement htmlfieldsetelement htmlinputelement ht...
...s not valid — when a message is set, the validity state is set to invalid. to clear this state, invoke the function with an empty string passed as its argument. in this case the custom error message is cleared, the element is considered valid, and no message is shown. examples take the following form: <form> <label for="name">enter username (upper and lowercase letters): </label> <input
type="text" name="name" id="name" required pattern="[a-za-z]+"> <button>submit</button> </form> the basic html form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern. if you wanted to instead display custom error messages, you could use javascript like the following: const...
CredentialsContainer.get() - Web APIs
st collects all credentials in the credentialscontainer that meet the necessary criteria (defined in the options argument). from the resulting set of credentials, it then selects the best one. depending on the options, it may display a dialog to the user and ask the user to make the selection. ...
...the options include criteria that the credentials are required or allowed to have, and options for interacting with the user. it can contain the following properties: password: a boolean indicating that returned credential instances should include user (as opposed to federated) credentials. ...
Crypto.getRandomValues() - Web APIs
m number generator seeded with a value with enough entropy. the pseudo-random number generator algorithm (prng) may vary across user agents, but is suitable for cryptographic purposes. implementations are required to use a seed with enough entropy, like a system-level entropy source. getrandomvalues() is the only member of the crypto interface which can be used from an insecure context. syntax
typedarray = cryptoobj.getrandomvalues(
typedarray); parameters
typedarray an integer-based
typedarray, that is an int8array, a uint8array, an int16array, a uint16array, an int32array, or a uint32array. all elements in the array are overwritten with random numbers. return value the same array passed as
typedarray but with its contents replaced with the newly generated random numbers. note that ...
... 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 generatekey() method. ...
CustomElementRegistry.define() - Web APIs
customized built-in element: these elements inherit from — and extend — built-in html elements. syntax customelements.define(name, constructor, options); parameters name name for the new custom element. note that custom element names must contain a hyphen. constructor constructor for the new custom element. options optional object that controls how the element is defined. ...
... notsupportederror the customelementregistry already contains an entry with the same name or the same constructor (or is otherwise already defined), or extends is specified and it is a valid custom element name, or extends is specified but the element it is trying to extend is an unknown element. syntaxerror the provided name is not a valid custom element name.
typeerror the referenced constructor is not a constructor. note: you'll often get notsupportederrors thrown that seem like define() is failing, but instead it is likely a problem with element.attachshadow(). examples autonomous custom element the following code is taken from our popup-info-box-web-component example (see it live also). // create a class for the element class popupinfo e...
DOMConfiguration - Web APIs
note: this interface has never been supported in gecko, and has been removed from the dom specification. ...
... note: this interface has never been supported in gecko, and has been removed from the dom specification. ...
DOMException - Web APIs
or the object cannot be modified in this way. (legacy code value: 13 and legacy constant name: invalid_modification_err) namespaceerror the operation is not allowed by namespaces in xml. (legacy code value: 14 and legacy constant name: namespace_err) invalidaccesserror the object does not support the operation or argument. (legacy code value: 15 and legacy constant name: invalid_access_err)
typemismatcherror the
type of the object does not match the expected
type. (legacy code value: 17 and legacy constant name:
type_mismatch_err) this value is deprecated; the javascript
typeerror exception is now raised instead of a domexception with this value. securityerror the operation is insecure. (legacy code value: 18 and legacy constant name: security_err) networkerror a network error o...
...d legacy constant name: abort_err) urlmismatcherror the given url does not match another url. (legacy code value: 21 and legacy constant name: url_mismatch_err) quotaexceedederror the quota has been exceeded. (legacy code value: 22 and legacy constant name: quota_exceeded_err) timeouterror the operation timed out. (legacy code value: 23 and legacy constant name: timeout_err) invalidnode
typeerror the node is incorrect or has an incorrect ancestor for this operation. (legacy code value: 24 and legacy constant name: invalid_node_
type_err) datacloneerror the object can not be cloned. (legacy code value: 25 and legacy constant name: data_clone_err) encodingerror the encoding or decoding operation failed (no legacy code value and constant name). notreadableerror the input/o...
DataTransfer.getData() - Web APIs
return value domstring a domstring representing the drag data for the specified format. if the drag operation has no data or the operation has no data for the specified format, this method returns an empty string. caveats data availability the html5 drag and drop specification dictates a drag data store mode. ...
... return value domstring a domstring representing the drag data for the specified format. if the drag operation has no data or the operation has no data for the specified format, this method returns an empty string. caveats data availability the html5 drag and drop specification dictates a drag data store mode. ...
DataTransfer.mozGetDataAt() - Web APIs
the datatransfer.mozgetdataat() method is used to retrieve an item in the drag event's data transfer object, based on a given format and index. this method returns null if the specified item does not exist or if the index is not in the range from zero to the number of items minus one. note: this method is gecko-specific. syntax nsivariant datatransfer.mozgetdataat([
type], index); arguments
type a string representing the
type of the drag data to retrieve from the drag data object. index a unsigned long representing the index of the data to retrieve. return value nsivariant the data item requested. if the specified item does not exist, null is returned. example this example shows the use of the mozgetdataat() method in a drop event handler. function drop_handler(event) {...
...ue nsivariant the data item requested. if the specified item does not exist, null is returned. example this example shows the use of the mozgetdataat() method in a drop event handler. function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; output("items: " + count + "\n"); for (var i = 0; i < count; i++) { output(" item " + i + ":\n"); var
types = dt.moz
typesat(i); for (var t = 0; t <
types.length; t++) { output(" " +
types[t] + ": "); try { var data = dt.mozgetdataat(
types[t], i); output("(" + (
typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex); } } } } specifications this method is not defined in any web standard. ...
DataTransferItem.getAsFile() - Web APIs
value file if the drag data item is a file, a file object is returned; otherwise null is returned. example this example shows the use of the getasfile() method in a drop event handler. function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].
type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html console.log("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].t...
...drop: file "); } } } specifications specification status comment html living standardthe definition of 'getasfile()' in that specification. ...
DataTransferItem.getAsString() - Web APIs
tring the drag data item's string data. the callback return value is undefined. example this example shows the use of the getasstring() method as an inline function in a drop event handler. function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].
type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html console.log("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].t...
...drop: file "); } } } specifications specification status comment html living standardthe definition of 'getasstring()' in that specification. ...
DataTransferItemList.DataTransferItem() - Web APIs
r items to the drag payload datalist.add("<p>... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].
type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((...
...s item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.
DataTransferItemList.clear() - Web APIs
tems to the drag payload datalist.add("<p>... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].
type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((...
...s item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.
DataTransferItemList.length - Web APIs
r items to the drag payload datalist.add("<p>... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].
type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((...
...s item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.
DataTransferItemList.remove() - Web APIs
tems to the drag payload datalist.add("<p>... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].
type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((...
...s item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].
type.match('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("... drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.
DeprecationReportBody - Web APIs
line in the source file in which the deprecated feature was used, if known, or null otherwise. columnnumber a number representing the column in the source file in which the deprecated feature was used, if known, or null otherwise. ...
...ch takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let 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.appendchi...
DirectoryEntrySync - Web APIs
issue. the target directory or file is not writable. path_exists_err the file already exists. you cannot create another one with the same path. quota_exceeded_error the operation would cause the application to exceed its storage quota. security_err the application does not have permission to access the element referred to by path. [ todo: explain why ]
type_mismatch_err the path supplied exists, but it is not a directory. getdirectory() creates or looks up a directory. the method is similar to getfile() with directoryentrysync being passed. void getdirectory ( in domstring path, in optional flags options ) raises (fileexception); parameter path either an absolute path or a relative path from the directory to the file to be looked ...
...issue. the target directory or file is not writable. path_exists_err the file already exists. you cannot create another one with the same path. quota_exceeded_error the operation would cause the application to exceed its storage quota. security_err the application does not have permission to access the element referred to by path. [ todo: explain why ]
type_mismatch_err the path supplied exists, but it is not a directory. removerecursively() deletes a directory and all of its contents. you cannot delete the root directory of a file system. if you delete a directory that contains a file that cannot be removed or if an error occurs while the deletion is in progress, some of the contents might not be deleted. catch these cases with error ca...
DisplayMediaStreamConstraints - Web APIs
processing information is specified using mediatrackconstraints objects providing options which are applied to the track after the media data is received but before it is made available on the mediastream. ...
... to the mediastream. the default value is false. video if true (the default), the display contents are included in a mediastreamtrack within the stream provided by getdisplaymedia(). optionally, a mediatrackconstraints object may be given, providing options specifying processing to be performed on the video data before adding it to the stream. a value of false is not permitted, and results in a
typeerror being thrown. specifications specification status comment unknownthe definition of 'displaymediastreamconstraints' in that specification. unknown initial definition ...
Document.createElement() - Web APIs
the nodename of the created element is initialized with the value of tagname. don't use qualified names (like "html:a") with this method. ...
..."null"). options optional an optional elementcreationoptions object, containing a single property named is, whose value is the tag name of a custom element previously defined via customelements.define(). see web component example for more details. return value the new element. examples basic example this creates a new <div> and inserts it before the element with the id "div1". ...
Document.createElementNS() - Web APIs
pace uri, use the createelement() method. syntax var element = document.createelementns(namespaceuri, qualifiedname[, options]); parameters namespaceuri a string that specifies the namespace uri to associate with the element. the namespaceuri property of the created element is initialized with the value of namespaceuri. see valid namespace uris. qualifiedname a string that specifies the
type of element to be created. the nodename property of the created element is initialized with the value of qualifiedname. optionsoptional an optional elementcreationoptions object containing a single property named is, whose value is the tag name for a custom element previously defined using customelements.define(). for backwards compatibility with previous versions of the custom elements specific...
...pends it to the vbox element. ...
Document.createNodeIterator() - Web APIs
returns a new nodeiterator object. syntax const nodeiterator = document.createnodeiterator(root[, whattoshow[, filter]]); values root the root node at which to begin the nodeiterator's traversal. whattoshow optional is an optional unsigned long representing a bitmask created by combining the constant properties of nodefilter. it is a convenient way of filtering for certain
types of node. it defaults to 0xffffffff representing the show_all constant. constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root. in ...
...t appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_fragment 1024 shows documentfragment nodes. nodefilter.show_document_
type 512 shows document
type nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tr...
Document.createTreeWalker() - Web APIs
eewalker object. syntax document.createtreewalker(root, whattoshow[, filter[, entityreferenceexpansion]]); parameters root a root node of this treewalker traversal. typically this will be an element owned by the document. whattoshow optional a unsigned long representing a bitmask created by combining the constant properties of nodefilter. it is a convenient way of filtering for certain
types of node. it defaults to 0xffffffff representing the show_all constant. constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root; in this ...
...do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_fragment 1024 shows documentfragment nodes. nodefilter.show_document_
type 512 shows document
type nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tr...
Document.getElementsByTagNameNS() - Web APIs
elements matching the tag name parameter. note that when the node on which getelementsbytagname is invoked is not the document node, in fact the element.getelementsbytagnamens method is used. to use the following example, just copy/paste it into a new file saved with the .xhtml extension. ...
... living standard ...
Example - Web APIs
<html> <head> <title>my document</title> <script
type="text/javascript"> function change() { // document.getelementsbytagname("h1") returns a nodelist of the h1 // elements in the document, and the first is number 0: var header = document.getelementsbytagname("h1").item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic document"; // now the header is "a dynamic document". var para = document.getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createele...
...); // create a new element to be the second paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } </script> </head> <body> <input
type="button" value="change this document." onclick="change()"> <h1>header</h1> <p>paragraph</p> </body> </head> ...
Using the W3C DOM Level 1 Core - Web APIs
due to the ubiquity of the dom, this api is supported in all major browsers, including mozilla firefox and microsoft internet explorer, and serves as a base for scripting on the web. what is a dom tree? a dom tree is a kind of tree whose nodes represent an html or xml document's contents. each html or xml document has a unique dom tree representation. ...
...ge authors to edit the dom of a document is to use javascript to access the document property of the global object. this document object implements the document interface from the w3c's dom level 1 spec. a simple example suppose the author wants to change the header of the above document and write two paragraphs instead of one. ...
DragEvent - Web APIs
r read only the data that is transferred during a drag and drop interaction. constructors although this interface has a constructor, it is not possible to create a useful datatransfer object from script, 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 s...
... for the dragexit event. globaleventhandlers.ondragleave a global event handler for the dragleave event. globaleventhandlers.ondragover a global event handler for the dragover event. globaleventhandlers.ondragstart a global event handler for the dragstart event. globaleventhandlers.ondrop a global event handler for the drop event. example an example of each property, constructor, event
type and global event handlers is included in their respective reference page. specifications specification status comment html living standardthe definition of 'dragevent' in that specification. living standard html 5.1the definition of 'dragevent' in that specification. recommendation initial definition ...
Element: DOMActivate event - Web APIs
bbles 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 * 2); else circle.setfloattrait("r", currentradius * 0.5); } ]]></script> <!-- act on each domactivate event --> <circle cx="300" cy="225" r="100" f...
... working draft ...
Element: error event - Web APIs
n execution error or an image can't be found or is invalid. bubbles no cancelable no interface event or uievent event handler property onerror the event object is a uievent instance if it was generated from a user interface element, or an event instance otherwise. ...
...ent-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.
type}: loading image\n`; console.log(event) }); const imgerror = document.queryselector('#img-error'); imgerror.addeventlistener('click', () => { badimg.setattribute('src', 'i-dont-exist'); }); result specifications specification status ui events working draft ...
Element: focusin event - Web APIs
t to receive focus. the main difference between this event and focus is that focusin bubbles while focus does not. the opposite of focusin is focusout. ...
... this event and focus is that focusin bubbles while focus does not. the opposite of focusin is focusout. ...
Element: focusout event - Web APIs
bout to lose focus. the main difference between this event and blur is that focusout bubbles while blur does not. the opposite of focusout is focusin. ...
... this event and blur is that focusout bubbles while blur does not. the opposite of focusout is focusin. ...
Element.getAttributeNames() - Web APIs
array. using getattributenames() along with getattribute(), is a memory-efficient and performant alternative to accessing element.attributes. ...
...bute(), is a memory-efficient and performant alternative to accessing element.attributes. syntax let attributenames = element.getattributenames(); example // iterate over element's attributes for (let name of element.getattributenames()) { let value = element.getattribute(name); console.log(name, value); } polyfill if (element.proto
type.getattributenames == undefined) { element.proto
type.getattributenames = function () { var attributes = this.attributes; var length = attributes.length; var result = new array(length); for (var i = 0; i < length; i++) { result[i] = attributes[i].name; } return result; }; } specifications specification status comment domthe definition of 'element.getattributenames' in that specification. ...
Element.getBoundingClientRect() - Web APIs
ing rectangle which is independent from the current scrolling position. cross-browser fallback scripts requiring high cross-browser compatibility can use window.pagexoffset and window.pageyoffset instead of window.scrollx and window.scrolly. scripts without access to these properties can use code like this: // for scrollx (((t = document.documentelement) || (t = document.body.parentnode)) &&
typeof t.scrollleft == 'number' ? t : document.body).scrollleft // for scrolly (((t = document.documentelement) || (t = document.body.parentnode)) &&
typeof t.scrolltop == 'number' ? t : 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 { wi...
...lltop 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 the viewport to that ...
Element.getElementsByClassName() - Web APIs
h > 0) { matches.item(0).classlist.add('hueframe'); matches[0].classlist.remove('colorbox'); } this code finds descendant elements with the "colorbox" class, adds the class "hueframe", by calling item(0), then removes "colorbox" (using array notation). another element (if any are left) will then become item(0). ...
...(using array notation). another element (if any are left) will then become item(0). filtering the results using array methods we can also use methods of array.proto
type on any htmlcollection by passing the htmlcollection as the method's this value. here we'll find all <div> elements that have a class of test: var testelements = document.getelementsbyclassname('test'); var testdivs = array.proto
type.filter.call(testelements, function(testelement) { return testelement.nodename === 'div'; }); specifications specification status comment domthe definition of 'element.getelementsbyclassname()' in that specification. living standard initial definition ...
Element.innerHTML - Web APIs
are replaced with a display of the page's entire source code. document.documentelement.innerhtml = "<pre>" + document.documentelement.innerhtml.replace(/</g,"<") + "</pre>"; operational details what exactly happens when you set value of innerhtml? doing so causes the user agent to follow these steps: the specified value is parsed as html or xml (based on the document
type), resulting in a documentfragment object representing the new set of dom nodes for the new elements. if the element whose contents are being replaced is a <template> element, then the <template> element's content attribute is replaced with the new documentfragment created in step 1. for all other elements, the element's contents are replaced with the nodes in the new documentfragment. securit...
...the log output by getting the current time from a date object using tolocaletimestring(), and building a string with the timestamp and the message text. then the message is appended to the box with the class "log". ...
Element.insertAdjacentText() - Web APIs
s the insert before and insert after buttons to insert it before or after the existing paragraph text using insertadjacenttext(). note that the existing text node is not added to — further text nodes are created containing the new additions. ...
...tons to insert it before or after the existing paragraph text using insertadjacenttext(). note that the existing text node is not added to — further text nodes are created containing the new additions. polyfill you can polyfill the insertadjacenttext() method in internet explorer 5.5 (maybe earlier) and higher with the following code: if (!element.proto
type.insertadjacenttext) element.proto
type.insertadjacenttext = function(
type, txt){ this.insertadjacenthtml(
type, (txt+'') // convert to string .replace(/&/g, '&') // embed ampersand symbols .replace(/</g, '<') // embed less-than symbols ) } specification specification status comment domthe definition of 'insertadjacenttext()' in that specification. living st...
Element: keypress event - Web APIs
t 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. ...
... 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. ...
Element.msZoomTo() - Web APIs
y change in the future. the mszoomto method scrolls and/or zooms an element to its specified coordinate with animation. zoomed elements can expose their zoom level through mscontentzoom (ie. scrolltop/left). the zoom level can be reset with mszoomto. this proprietary method is specific to internet explorer and microsoft edge. syntax element.mszoomto(arguments); parameters args[in]
type: mszoomtooptions contentx[in]: the x-coordinate of the content that is the target of the scroll/zoom. if no value is specified, defaults to the current centerpoint of visible content, horizontally. contenty[in]: the y-coordinate of the content that is the target of the scroll/zoom. if no value is specified, defaults to the current centerpoint of visible content, vertically. viewportx[in]: the ...
...point of the viewport to the element's contenty value. integer: aligns the specified y-coordinate of the viewport to the element's contenty value. scalefactor[in]: floating-point. the scale factor (mscontentzoomfactor) to zoom to. if no value is specified, defaults to the current zoom level (no additional zoom occurs).this argument is ignored if the element is not zoomable. animate[in]: the
type of animation to use. default: uses the default animation. none: no animation is used. this method has no scrolling effect on non-scrollable elements and no zooming effect on non-zoomable elements (e.g., elements with "-ms-content-zooming: none"). this method has no effect if called from a parent document to scroll or zoom content hosted in an iframe. return value this method does not ret...
Element.name - Web APIs
he document.getelementsbyname() method, a form and with the form elements collection. when used with a form or elements collection, it may return a single element or a collection. ...
...form and with the form elements collection. when used with a form or elements collection, it may return a single element or a collection. ...
Element.scrollHeight - Web APIs
ortor. maecenas varius est sit amet elit interdum quis placerat metus posuere. duis malesuada justo a diam vestibulum vel aliquam nisi ornare. integer laoreet nisi a odio ornare non congue turpis eleifend. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. ...
...justo a diam vestibulum vel aliquam nisi ornare. integer laoreet nisi a odio ornare non congue turpis eleifend. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. ...
Element.setCapture() - Web APIs
api. syntax element.setcapture(retargettoelement); retargettoelement if true, all events are targeted directly to this element; if false, events can also fire at descendants of this element. example in this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element. ...
...e at descendants of this element. example in this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element. ...
ElementTraversal - Web APIs
specifications specification status comment domthe definition of 'childnode' in that specification. ...
... specifications specification status comment domthe definition of 'childnode' in that specification. ...
Comparison of Event Targets - Web APIs
the event, before any retargetings. see anonymous content#event_flow_and_targeting for details. event.composedtarget event.webidl the original non-native target of the event before composition from shadow dom. ...
...= e.relatedtarget; } document.addeventlistener('click', handleclicks, false); document.addeventlistener('mouseover', handlemouseover, false); </script> </body> </html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was previously over. for the mouseout event, it holds the node that the mouse moved to. event
type event.target event.relatedtarget mouseover the eventtarget which the pointing device entered the eventtarget which the pointing device exited mouseout the eventtarget which the pointing device exited the eventtarget which the pointing device entered todo: also needs descriptions for dragenter and dragexit events. example <hbox id="outer"> <hbox id=...
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...
...box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault(). 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"> </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. first, listen for keypress events: var my...
Event - Web APIs
e dom. an event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by apis to represent the progress of an asynchronous task. 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. many dom elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. event-handlers are usually connected (or "attached") to various html elements (such as <button>, <div...
...r web compatibility purposes. event.target read only a reference to the target to which the event was originally dispatched. event.timestamp read only the time at which the event was created (in milliseconds). by specification, this value is time since epoch—but in reality, browsers' definitions vary. in addition, work is underway to change this to be a domhighrestimestamp instead. event.
type read only the name of the event. case-insensitive. event.istrusted read only indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, like event.initevent). deprecated properties event.scoped read only a boolean indicating whether the given event will bubble across through the shadow root into ...
Fetch basic concepts - Web APIs
ture of headers objects, with possible values of immutable, request, request-no-cors, response, or none, depending on where the header is used. when a new headers object is created using the headers() constructor, its guard is set to none (the default). ...
...however, the operation will work if guard is request and the header name isn't a forbidden header name . guard is request-no-cors and the header name/value is a simple header . guard is response and the header name isn't a forbidden response header name . ...
File.getAsDataURL() - Web APIs
summary the getasdataurl provides a data: url that encodes the entire contents of the referenced file. note: this method is obsolete; you should use the filereader method readasdataurl() instead. ...
... filereader method readasdataurl() instead. syntax var url = instanceoffile.getasdataurl(); returns a string representing a data: url example // fileinput is a htmlinputelement: <input
type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // array with acceptable file
types var accept = ["image/png"]; // img is a htmlimgelement: <img id="myimg"> var img = document.getelementbyid("myimg"); // if we accept the first selected file
type if (accept.indexof(files[0].media
type) > -1) { // display the image // same as <img src="data:image/png,<imagedata>"> img.src = files[0].getasdataurl(); } specification not part of any specification. ...
FileException - Web APIs
. when errors occur, forward them to the main app using postmessage() as in the following: function onerror(e) { postmessage('error:' + e.tostring()); } try { //error is thrown if "log.txt" already exists. var fileentry = fs.root.getfile('log.txt', {create: true, exclusive:true}0; } catch (e) { onerrror(e); } the sample code was borrowed from html5rocks attribute attribute
type description code unsigned short the most appropriate error code for the condition. constants note: do not rely on the numeric values of the constants, which might change as the specifications continue to change. use the constant names instead. constant value description encoding_err 5 the url is malformed. make sure that the url is comp...
...or the storage quota was reached and the user declined to give more space to the database. security_err 2 access to the files were denied for one of the following reasons: the files might be unsafe for access within a web application. too many calls are being made on file resources. other unspecified security error code or situations.
type_mismatch_err 11 the user has attempted to look up a file or directory, but the entry found is of the wrong
type. for example, the app is accessing a directoryentry when the user is requesting a fileentry. 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/brows...
FileReader: abort event - Web APIs
ed when a read has been aborted: for instance because the program called filereader.abort(). ...
... black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[
type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.
type}: ${event.loaded} bytes transferred\n`; if (event.
type === "load") { preview.src = reader.result; } } function addlisteners...
FileReader: load event - Web APIs
the load event is fired when a file has been read successfully. ...
... black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[
type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.
type}: ${event.loaded} bytes transferred\n`; if (event.
type === "load") { preview.src = reader.result; } } function addlisteners...
FileReader: loadend event - Web APIs
the loadend event is fired when a file read has completed, successfully or not. ...
... black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[
type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.
type}: ${event.loaded} bytes transferred\n`; if (event.
type === "load") { preview.src = reader.result; } } function addlisteners...
FileReader: loadstart event - Web APIs
the loadstart event is fired when a file read operation has begun. ...
... black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[
type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.
type}: ${event.loaded} bytes transferred\n`; if (event.
type === "load") { preview.src = reader.result; } } function addlisteners...
FileReader: progress event - Web APIs
the progress event is fired periodically as the filereader reads data. ...
... black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[
type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.
type}: ${event.loaded} bytes transferred\n`; if (event.
type === "load") { preview.src = reader.result; } } function addlisteners...
FileReader.result - Web APIs
lid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation. syntax var file = instanceoffilereader.result value an appropiate string or arraybuffer based on which of the reading methods was used to initiate the read operation. the value is null if the reading is not yet complete or was unsuccessful. the result
types are described below. method description readasarraybuffer() the result is a javascript arraybuffer containing binary data. readasbinarystring() the result contains the raw binary data from the file in a string. readasdataurl() the result is a string with a data: url representing the file's data. readastext() the result is text in a...
...is text in a string. example this example presents a function, read(), which reads a file from a file input. it works by creating a filereader object and creating a listener for load events such that when then file is read, the result is obtained and passed to the callback function provided to read(). the content is handled as raw text data. var fileinput = document.queryselector('input[
type="file"]'); function read(callback) { var file = fileinput.files.item(0); var reader = new filereader(); reader.onload = function() { callback(reader.result); } reader.readastext(file); } specifications specification status comment file apithe definition of 'result' in that specification. working draft initial definition ...
FileSystemEntrySync - Web APIs
fullpath readonly domstring the full absolute path from the root to the entry. an absolute path is a relative path from the root directory, prepended with a '/'. isdirectory readonly boolean true if filesystementrysync is a directory. ...
...play an image and have its fileentry, calling tourl() gives you the image file's file system url. you get something like: filesystem:http://example.com/temporary/lolcat.png. the file system url does not expire. because the method describes a location on disk, the url is valid for as long as that location exists. you can delete the file and recreate it, and it's all good. you can supply the mime
type to simulate the optional mime
type header associated with http downloads. domstring tourl (); parameter none. returns domstring exceptions none remove() deletes a file or directory. you cannot delete an empty directory or the root directory of a file system. if you want to remove an empty directory, use removerecursively() instead. void remove ( ) raises (fileexception); paramete...
FileSystemFlags - Web APIs
the filesystemflags dictionary defines a set of values which are used when specifying option flags when calling certain methods in the file and directory entries api. methods which accept an options parameter of this
type may specify zero or more of these flags as fields in an object, like this: datadirectoryentry.getdirectory("workspace", { create: true }, function(entry) { }); here, we see that the create property is provided, with a value of true, indicating that the directory should be created if it's not already there. note that these option flags currently don't have any useful meaning when used in the scope of web content, where security precautions prevent the creation of new files or the replacement of existing ones. properties create optional if this property is true, an...
... it to be created newly at call time. the default is false. values and results the table below describes the result of each possible combination of these flags depending on whether or not the target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired
type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called. false n/a[1] path exists but doesn't match the desired
type the errorcallback is called with an appropriate error code (if the callback was provided). true...
Introduction to the File and Directory Entries API - Web APIs
offline web mail client the client downloads attachments and stores them locally. the client caches attachments for later upload. ...
...app cannot share the same file at the same time. the api does not let your web app reach outside the browser to files that desktop apps can also work on. you can, however, export a file from a web app to a desktop app. for example, you can use the file api, create a blob, redirect an iframe to the blob, and invoke the download manager. the file and directory entries api can use different storage
types an application can request temporary or persistent storage. temporary storage is easier to get, because the browser just gives it to you, but it is limited and can be deleted by the browser when it runs out of space. persistent storage, on the other hand, might offer you larger space that can only be deleted by the user, but it requires the user to grant you permission. use temporary storage f...
GamepadButton - Web APIs
a gamepadbutton object is returned by querying any value of the array returned by the buttons property of the gamepad interface. note: this is the case in firefox gecko 28 and later; chrome and earlier firefox versions still return an array of double values when this property is accessed. properties gamepadbutton.value read only a double value used to represent the current state of analog buttons, such as the triggers on many modern gamepads. ...
...in this simple example i've just allowed either. function gameloop() { if(navigator.webkitgetgamepads) { var gp = navigator.webkitgetgamepads()[0]; if(gp.buttons[0] == 1) { b--; } else if(gp.buttons[1] == 1) { a++; } else if(gp.buttons[2] == 1) { b++; } else if(gp.buttons[3] == 1) { a--; } } else { var gp = navigator.g...
GamepadEvent() - Web APIs
options optional options are as follows: gamepad: an instance of gamepad describing the gamepad associated with the event. ...
... options optional options are as follows: gamepad: an instance of gamepad describing the gamepad associated with the event. ...
GlobalEventHandlers.onchange - Web APIs
t 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. the function receives an event object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents and then change focus away from it. ...
...ily called for each alteration to an element's value. syntax target.onchange = functionref; functionref is a function name or a function expression. the function receives an event object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents and then change focus away from it. ...
GlobalEventHandlers.onerror - Web APIs
t is invoked. these error events do not bubble up to window, but (at least in firefox) can be handled with a window.addeventlistener configured with usecapture set to true. installing a global error event handler is useful for automated collection of error reports. syntax for historical reasons, different arguments are passed to window.onerror and element.onerror handlers (as well as on error-
type window.addeventlistener handlers). window.onerror window.onerror = function(message, source, lineno, colno, error) { ... }; function parameters: message: error message (string). available as event (sic!) in html onerror="" handler. source: url of the script where the error was raised (string) lineno: line number where error was raised (number) colno: column number for the line where the...
...rl of the script where the error was raised (string) lineno: line number where error was raised (number) colno: column number for the line where the error occurred (number) error: error object (object) when the function returns true, this prevents the firing of the default event handler. window.addeventlistener('error') window.addeventlistener('error', function(event) { ... }) event of
type errorevent contains all the information about the event and the error. element.onerror element.onerror = function(event) { ... } element.onerror accepts a function with a single argument of
type event. a good example for this is when you are using an image tag, and need to specify a backup image in case the one you need is not available on the server for any reason. <img src="imagenotfound.
GlobalEventHandlers.oninput - Web APIs
ninput, the onchange event handler is not necessarily called for each alteration to an element's value. syntax target.oninput = functionref; value functionref is a function name or a function expression. the function receives an inputevent object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents. ...
...t handler is not necessarily called for each alteration to an element's value. syntax target.oninput = functionref; value functionref is a function name or a function expression. the function receives an inputevent object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents. ...
HTMLAnchorElement.relList - Web APIs
the htmlanchorelement.rellist read-only property reflects the rel attribute. it is a live domtokenlist containing the set of link
types indicating the relationship between the resource represented by the <a> element and the current document. the property itself is read-only, meaning you can't substitute the domtokenlist with another one, but its contents can still be changed. ...
...ly, meaning you can't substitute the domtokenlist with another one, but its contents can still be changed. syntax var relstr = anchorelt.rellist; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { var list = anchors[i].rellist; var listlength = list.length; console.log("new anchor node found with", listlength, "link
types in rellist."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification. living standard initial definition. ...
HTMLAreaElement - Web APIs
htmlareaelement.shape is a domstring that reflects the shape html attribute, indicating the shape of the hot-spot, limited to known values. htmlelement.tabindex is a long containing the element's position in the tabbing order. htmlareaelement.target is a domstring that reflects the target html attribute, indicating the browsing context in which to open the linked resource. htmlareaelement.
type is a domstring that reflects the
type html attribute, indicating the mime
type of the linked resource. htmlhyperlinkelementutils.username is a usvstring containing the username specified before the domain name. methods inherits methods from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. htmlhyperlinkelementutils.tostring() returns a usvstring containing th...
...een moving to the htmlhyperlinkelementutils mixin, and htmlareaelement implements this mixin. html5the definition of 'htmlareaelement' in that specification. recommendation technically, the properties tabindex and accesskey 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 model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmlareaelement' in that specification. obsolete ini...
HTMLCanvasElement.getContext() - Web APIs
the htmlcanvaselement.getcontext() method returns a drawing context on the canvas, or null if the context identifier is not supported. later calls to this method on the same canvas element return the same drawing context instance as was returned the last time the method was invoked with the same context
type argument. to get a different drawing context object you need to pass a different context
type or call the method on a different canvas element. syntax var ctx = canvas.getcontext(context
type); var ctx = canvas.getcontext(context
type, contextattributes); parameters context
type is a domstring containing the context identifier defining the drawing context associated to the canvas. possible values are: "2d", leading to the creation of a canvasrenderingcontext2d object representing...
...cleared or overwritten by the author. stencil: boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits. return value a renderingcontext which is either a canvasrenderingcontext2d for "2d", webglrenderingcontext for "webgl" and "experimental-webgl", webgl2renderingcontext for "webgl2" or imagebitmaprenderingcontext for "bitmaprenderer". if the context
type doesn't match a possible drawing context, null is returned. examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get a 2d context of the canvas with the following code: var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); console.log(ctx); // canvasrenderingcontext2d { ... } now you have the 2d rendering context...
HTMLCanvasElement - Web APIs
wing context lets you draw on the canvas. calling getcontext with "2d" returns a canvasrenderingcontext2d object, whereas calling it with "webgl" (or "experimental-webgl") returns a webglrenderingcontext object. this context is only available on browsers that implement webgl. htmlcanvaselement.todataurl() returns a data-url containing a representation of the image in the format specified by the
type parameter (defaults to png). the returned image is in a resolution of 96dpi. htmlcanvaselement.toblob() creates a blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. htmlcanvaselement.transfercontroltooffscreen() transfers control to an offscreencanvas object, either on the main thread or on...
... the disk or stored in memory at the discretion of the user agent. htmlcanvaselement.transfercontroltooffscreen() transfers control to an offscreencanvas object, either on the main thread or on a worker. obsolete methods htmlcanvaselement.mozgetasfile() returns a file object representing the image contained in the canvas; this file is a memory-based file, with the specified name. if
type is not specified, the image
type is image/png. events listen to these events using addeventlistener(). webglcontextcreationerror fired if the user agent is unable to create a webglrenderingcontext or webgl2renderingcontext context. webglcontextlost fired if the user agent detects that the drawing buffer associated with a webglrenderingcontext or webgl2renderingcontext object has been los...
HTMLDialogElement: cancel event - Web APIs
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. ...
...ton> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (
typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html livi...
HTMLDialogElement: close event - Web APIs
the close event is fired on an htmldialogelement object when the dialog it represents has been closed. ...
...utton> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('close', (event) => { result.textcontent = 'dialog was closed'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (
typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living s...
HTMLFormElement: reset event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs. ...
...a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs. ...
HTMLImageElement.srcset - Web APIs
mage resource should be used as the display's pixel density. this is written by stating the pixel density as a positive, non-zero floating-point value followed by the lower-case letter "x". as an example, to state that the corresponding image should be used when the pixel density is double the standard density, you can give the pixel density descriptor 2x or 2.0x. you may mix and match the two
types of descriptor. you must not, however, provide multiple image candidate strings that specify the same descriptor. all of the following are valid image candidate strings: "images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w" this string provides versions of an image to be used at the standard pixel density (1x) as well as double that pixel density (2x). also a...
...vided without any condition at all, to be used for any other width. "icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg" here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x. a fallback image is provided as an svg file that should be used in all other cases. notice that the candidates may use different image
types. for more information on what image formats are available for use in the <img> element, see image file
type and format guide. example html the html below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. also specified by the srcset attribute is that the 200-pixel version should be used for 1x displays whi...
HTMLInputElement: invalid event - Web APIs
not checked on blur. examples if a form is submitted with an invalid value, the submittable elements are checked and, if an error is found, the invalid event will fire on the invalid element. in this example, when an invalid event fires because of an invalid value in the input, the invalid value is logged. ...
...id value, the submittable elements are checked and, if an error is found, the invalid event will fire on the invalid element. in this example, when an invalid event fires because of an invalid value in the input, the invalid value is logged. ...
HTMLInputElement.multiple - Web APIs
the htmlinputelement.multiple property indicates if an input can have more than one value. firefox currently only supports multiple for <input
type="file">. ...
... the htmlinputelement.multiple property indicates if an input can have more than one value. firefox currently only supports multiple for <input
type="file">. ...
HTMLInputElement.setSelectionRange() - Web APIs
indicate, for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning. this method updates the htmlinputelement.selectionstart, selectionend, and selectiondirection properties in one call. note that accordingly to the whatwg forms spec selectionstart, selectionend properties and setselectionrange method apply only to inputs of
types text, search, url, tel and password. chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input
types. for example, on input of
type number: "failed to read the 'selectionstart' property from 'htmlinputelement': the input element's
type ('number') does not support selection". if you wish to select all text of an input element, you can ...
...lue. selectiondirection optional a string indicating the direction in which the selection is considered to have been performed. possible values: "forward" "backward" "none" if the direction is unknown or irrelevant. default value. example click the button in this example to select the third, fourth, and fifth characters in the text box ("zil" in the word "mozilla"). ...
HTMLInputElement.webkitEntries - Web APIs
the array can only contain directories if the webkitdirectory property is true. this means the <input> element was configured to let the user choose directories. ...
... objects based on filesystementry, each representing one file which is selected in the <input> element. more specifically, files are represented by filesystemfileentry objects, and, if they're allowed, directories are represented by filesystemdirectoryentry objects. example this example shows how to create a file selection <input> element and process the selected files. html <input id="files"
type="file" multiple> javascript document.getelementbyid("files").addeventlistener("change", function(event) { event.target.webkitentries.foreach(function(entry) { /* do stuff with the entry */ }); }); each time a change event occurs, this code iterates over the selected files, obtaining their filesystementry-based objects and acting on them. specifications specification stat...
HTMLKeygenElement - Web APIs
hat 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. ...
... 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. key
type is a domstring that reflects the key
type 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 domstring that must be the value keygen. validationm...
HTMLLIElement - Web APIs
" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllielement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmllielement.
type is a domstring representing the
type of the bullets, "disc", "square" or "circle". as the standard way of defining the list
type is via the css list-style-
type property, use the cssom methods to set it via a script. htmllielement.value is a long indicating the ordinal position of the list element inside a given <ol>. it reflects the value attribute of the html <li> element, and can be smalle...
...has no meaning. methods no specific method; inherits properties from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmllielement' in that specification. living standard html5the definition of 'htmllielement' in that specification. recommendation the following property is now obsolete:
type. document object model (dom) level 2 html specificationthe definition of 'htmllielement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmllielement' in that specification. obsolete initial definition. ...
HTMLLinkElement - Web APIs
h="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllinkelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and linkstyle. htmllinkelement.as is a domstring representing the
type of content being loaded by the html link. htmllinkelement.crossorigin is a domstring that corresponds to the cors setting for this link element. see cors settings attributes for details. htmllinkelement.disabled is a boolean which represents whether the link is disabled; currently only used with style sheet links. htmllinkelement.href is a domstring representing the uri for the target res...
... document to the resource. htmllinkelement.rellist read only is a domtokenlist that reflects the rel html attribute, as a list of tokens. htmllinkelement.sizes read only is a domsettabletokenlist that reflects the sizes html attribute, as a list of tokens. linkstyle.sheet read only returns the stylesheet object associated with the given element, or null if there is none. htmllinkelement.
type is a domstring representing the mime
type of the linked resource. obsolete properties htmllinkelement.charset is a domstring representing the character encoding for the target resource. htmllinkelement.rev is a domstring representing the reverse relationship of the linked resource from the resource to the document. note: currently the w3c html 5.2 spec states that rev is no longer o...
HTMLParamElement - Web APIs
xt></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlparamelement.name is a domstring representing the name of the parameter. it reflects the name attribute. htmlparamelement.value is a domstring representing the value associated to the parameter. it reflects the value attribute. htmlparamelement.
type is a domstring containing the
type of the parameter when value
type has the "ref" value. it reflects the
type attribute. htmlparamelement.value
type is a domstring containing the
type of the value. it reflects the value
type attribute and has one of the values: "data", "ref", or "object". methods no specific methods, inherits methods from its parent, htmlelement. specifications ...
...object". methods no specific methods, inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmlparamelement' in that specification. living standard html5the definition of 'htmlparamelement' in that specification. recommendation the following properties are now obsolete:
type, and value
type. document object model (dom) level 2 html specificationthe definition of 'htmlparamelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmlparamelement' in that specification. obsolete initial definition. ...
HTMLScriptElement - Web APIs
html <script> elements expose the htmlscriptelement interface, which provides special properties and methods for manipulating the behavior and execution of <script> elements (beyond the inherited htmlelement interface). javascript files should be served with the application/javascript mime
type, but browsers are lenient and block them only if the script is served with an image
type (image/*), video
type (video/*), audio
type (audio/*), or text/csv. if the script is blocked, its element receives an error event; otherwise, it receives a load event. <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 60...
...="50" 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">htmlscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlscriptelement.
type is a domstring representing the mime
type of the script. it reflects the
type attribute. htmlscriptelement.src is a domstring representing the url of an external script. it reflects the src attribute. htmlscriptelement.event is a domstring; an obsolete way of registering event handlers on elements in an html document. htmlscriptelement.charset is a domstring representing the character...
HTMLSelectElement.add() - Web APIs
the htmlselectelement.add() method adds an element to the collection of option elements for this select element. syntax collection.add(item[, before]); parameters item is an htmloptionelement or htmloptgroupelement before is optional and an element of the collection, or an index of
type long, representing the item item should be inserted before. if this parameter is null (or the index does not exist), the new element is appended to the end of the collection. exceptions a domerror of the
type hierarchyrequesterror if the item passed to the method is an ancestor of the htmlselectelement. examples creating elements from scratch var sel = document.createelement("select"); var opt1 = document.createelement("option"); var opt2 = document.createelement("option"); opt1.value = "1";...
...cations specification status comment html living standardthe definition of 'htmlselectelement.add()' in that specification. living standard html5the definition of 'htmlselectelement.add()' in that specification. recommendation is a snapshot of html living standard. the value of before can now be a long and is optional. it throws a domerror of the
type hierarchyrequesterror if the passed item is an ancestor of the htmlselectelement and no longer throws if the before parameter is not found. document object model (dom) level 2 html specificationthe definition of 'htmlselectelement.add()' in that specification. obsolete the method now throws an not_found_err exception if the item of the before parameter is not a child of this elemen...
HTMLSourceElement - Web APIs
nt-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlsourceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlsourceelement.media is a domstring reflecting the media html attribute, containing the intended
type of the media resource. htmlsourceelement.sizes is a domstring representing image sizes between breakpoints htmlsourceelement.src is a domstring reflecting the src html attribute, containing the url for the media resource. the htmlsourceelement.src property has a meaning only when the associated <source> element is nested in a media element that is a <video> or an <audio> element. it has no ...
...s load method should be called when done, since <source> elements are not re-scanned automatically. htmlsourceelement.srcset is a domstring reflecting the srcset html attribute, containing a list of candidate images, separated by a comma (',', u+002c comma). a candidate image is a url followed by a 'w' with the width of the images, or an 'x' followed by the pixel density. htmlsourceelement.
type is a domstring reflecting the
type html attribute, containing the
type of the media resource. methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmlsourceelement' in that specification. living standard ...
HTMLTextAreaElement - Web APIs
set, the control behaves as if setselectionrange() had been called with this as the first argument, and selectionend as the second argument. tabindex long: returns / sets the position of the element in the tabbing navigation order for the current document. textlength read only long: returns the codepoint length of the control's value. same as reading value.length
type read only string: returns the string textarea. validationmessage read only string: returns 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. validity read only validityst...
... javascript function insertmetachars(sstarttag, sendtag) { var bdouble = arguments.length > 1, omsginput = document.myform.mytxtarea, nselstart = omsginput.selectionstart, nselend = omsginput.selectionend, soldtext = omsginput.value; omsginput.val...
HTMLUListElement - Web APIs
ht="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlulistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlulistelement.
type is a domstring value reflecting the
type and defining the kind of marker to be used to display. the values are browser dependent and have never been standardized. htmlulistelement.compact is a boolean indicating that spacing between list items should be reduced. this property reflects the compact attribute only, it doesn't consider the line-height css property used for that behavior in mod...
...d for that behavior in modern pages. methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmlulistelement' in that specification. living standard html5the definition of 'htmlulistelement' in that specification. recommendation the compact and
type properties have been obsoleted. document object model (dom) level 2 html specificationthe definition of 'htmlulistelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmlulistelement' in that specification. obsolete initial definition. ...
Using microtasks in JavaScript with queueMicrotask() - Web APIs
sly reducing the risk of user-discernible delays in operations. ensuring ordering on conditional use of promises one situation in which microtasks can be used to ensure that the ordering of execution is always consistent is when promises are used in one clause of an if...else statement (or other conditional statement), but not in the other clause. ...
... cached fetching data data fetched loaded data fetching data loaded data data fetched even worse, sometimes the element's data property will be set and other times it won't be by the time this code finishes running. ...
HashChangeEvent - Web APIs
event if ( "onhashchange" in window.document.body ) { return; } var location = window.location, oldurl = location.href, oldhash = location.hash; // check the location hash on a 100ms interval setinterval(function() { var newurl = location.href, newhash = location.hash; // if the hash has changed and a handler has been bound... ...
...url = location.href, oldhash = location.hash; // check the location hash on a 100ms interval setinterval(function() { var newurl = location.href, newhash = location.hash; // if the hash has changed and a handler has been bound... if ( newhash != oldhash &&
typeof window.onhashchange === "function" ) { // execute the handler window.onhashchange({
type: "hashchange", oldurl: oldurl, newurl: newurl }); oldurl = newurl; oldhash = newhash; } }, 100); })(window); specifications specification status comment html living standardthe definition of 'hashchangeevent' in that specification. living standard initial definition ...
Headers.delete() - Web APIs
the delete() method of the headers interface deletes a header from the current headers object. this method throws a
typeerror for the following reasons: the value of the name parameter is not the name of an http header. the value of guard is immutable. for security reasons, some headers can only be controller by the user agent. these headers include the forbidden header names and forbidden response header names. syntax myheaders.delete(name); parameters name the name of the http header you want to delete from the headers object. returns void. ...
...nclude the forbidden header names and forbidden response header names. syntax myheaders.delete(name); parameters name the name of the http header you want to delete from the headers object. returns void. example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append: myheaders.append('content-
type', 'image/jpeg'); myheaders.get('content-
type'); // returns 'image/jpeg' you can then delete it again: myheaders.delete('content-
type'); myheaders.get('content-
type'); // returns null, as it has been deleted specifications specification status comment fetchthe definition of 'delete()' in that specification. living standard ...
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. ...
...d is available in web workers. syntax headers.entries(); return value returns an iterator. ...
Headers.has() - Web APIs
an stating whether a headers object contains a certain header. for security reasons, some headers can only be controlled by the user agent. these headers include the forbidden header names and forbidden response header names. syntax myheaders.has(name); parameters name the name of the http header you want to test for. ...
...rs name the name of the http header you want to test for. if the given name is not a valid http header name, this method throws a
typeerror. returns a boolean. example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append, then test for the existence of it using has(): myheaders.append('content-
type', 'image/jpeg'); myheaders.has('content-
type'); // returns true myheaders.has('accept-encoding'); // returns false specifications specification status comment fetchthe definition of 'has()' in that specification. living standard ...
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. ...
...bytestring objects. note: this method is available in web workers. syntax headers.keys(); return value returns an iterator. ...
Headers.set() - Web APIs
new value to the end of the set of values. for security reasons, some headers can only be controller by the user agent. these headers include the forbidden header names and forbidden response header names. syntax myheaders.set(name, value); parameters name the name of the http header you want to set to a new value. ...
...to set to a new value. if the given name is not the name of an http header, this method throws a
typeerror. value the new value you want to set. returns void. example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append, then set a new value for this header using set(): myheaders.append('content-
type', 'image/jpeg'); myheaders.set('content-
type', 'text/html'); if the specified header does not already exist, set() will create it and set its value to the specified value. if the specified header does already exist and does accept multiple values, set() will overwrite the existing value with the new one: myheaders.set('accept-encoding', 'deflate'); myheaders.set('accept-encoding', 'gzip'); myh...
IDBCursor.key - Web APIs
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. ...
... 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. ...
IDBDatabase.transaction() - Web APIs
ing. therefore the following lines are equivalent: var transaction = db.transaction(['my-store-name']); var transaction = db.transaction('my-store-name'); if you need to access all object stores in the database, you can use the property idbdatabase.objectstorenames: var transaction = db.transaction(db.objectstorenames); passing an empty array will throw an exception. mode optional the
types of access that can be performed in the transaction. transactions are opened in one of three modes: readonly, readwrite and readwriteflush (non-standard, firefox-only.) versionchange mode can't be specified here. if you don't provide the parameter, the default access mode is readonly. to avoid slowing things down, don't open a readwrite transaction unless you actually need to write into the datab...
...e experimental (non-standard) readwriteflush mode (see idbdatabase.transaction.) this is currently experimental, and can only be used if the dom.indexeddb.experimental pref is set to true in about:config. details optional dictionary of other settings, supported only by chrome: return value an idbtransaction object. exceptions this method may raise a domexception of one of the following
types: exception description invalidstateerror the close() method has previously been called on this idbdatabase instance. notfounderror an object store specified in in the storenames parameter has been deleted or removed.
typeerror the value for the mode parameter is invalid. invalidaccesserror the function was called with an e...
IDBFactory.open() - Web APIs
of idbfactory.open that contains the version number of the database, plus a storage value that specifies whether you want to use persistent or temporary storage. warning: the storage attribute is deprecated and will soon be removed from gecko. you should use storagemanager.persist() to get persistent storage instead. ...
...rsist() to get persistent storage instead. note: you can find out more information on the different available storage
types, and how firefox handles client-side data storage, at browser storage limits and eviction criteria. return value a idbopendbrequest object on which subsequent events related to this request are fired. exceptions this method may raise a domexception of the following
types: exception description
typeerror the value of version is zero or a negative number or not a number. example example of calling open with the current specification's version parameter: var request = window.indexeddb.open("todolist", 4); in the following code snippet, we make a request to open a database, and include handlers for the success and error cases. ...
IDBIndex.getAll() - Web APIs
= idbindex.getall(query, count); parameters query optional a key or an idbkeyrange identifying the records to retrieve. if this value is null or missing, the browser will use an unbound key range. 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. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of the following
types: exception description transactioninactiveerror this idbindex's transaction is inactive. invalidstateerror the idbindex has been deleted or removed. ...
... 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 the following
types: exception description transactioninactiveerror this idbindex's transaction is inactive. invalidstateerror the idbindex has been deleted or removed. a
typeerror exception is thrown if the count parameter is not between 0 and 232-1 included. example var myindex = objectstore.index('index'); var getallrequest = myindex.getall(); getallrequest.onsuccess = function() { console.log(getallrequest.result); } specification specification status comment indexed database api draftthe definition of 'getall()' in that specification.
IDBIndex.getAllKeys() - Web APIs
idbindex.getallkeys(query, count); parameters query optional a key or an idbkeyrange identifying the keys to retrieve. if this value is null or missing, the browser will use an unbound key range. 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. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of the following
types: exception description transactioninactiveerror this idbindex's transaction is inactive. invalidstateerror the idbindex has been deleted or removed. ...
...tion 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 the following
types: exception description transactioninactiveerror this idbindex's transaction is inactive. invalidstateerror the idbindex has been deleted or removed. a
typeerror exception is thrown if the count parameter is not between 0 and 232-1 included. example var myindex = objectstore.index('index'); var getallkeysrequest = myindex.getallkeys(); getallkeysrequest.onsuccess = function() { console.log(getallkeysrequest.result); } specification specification status comment indexed database api draftthe definition of 'getall()' in th...
IDBObjectStore.createIndex() - Web APIs
the createindex() method of the idbobjectstore interface creates and returns a new idbindex object in the connected database. it creates a new field/column defining a new data point for each database record to contain. bear in 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 ...
...fic locale code, e.g. en-us, or pl. auto: the platform default locale will be used (may be changed by user agent settings.) null or undefined: if no locale is specified, normal javascript sorting will be used — not locale-aware. return value an idbindex object: the newly created index. exceptions this method may raise a domexception of one of the following
types: exception description constrainterror occurs if an index with the same name already exists in the database. index names are case-sensitive. invalidaccesserror occurs if the provided key path is a sequence, and multientry is set to true in the objectparameters object. invalidstateerror occurs if either: the method was not calle...
IDBObjectStore.getAll() - Web APIs
all(); var request = objectstore.getall(query); var request = objectstore.getall(query, count); parameters query optional a key or idbkeyrange to be queried. if nothing is passed, this will default to a key range that selects all the records in this object store. 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 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 contai...
...ired. 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. recommendation initial definition ...
InterventionReportBody - Web APIs
a string containing the path to the source file where the intervention occurred, if known, or null otherwise. linenumber a number representing the line in the source file in which the intervention occurred, if known, or null otherwise. columnnumber a number representing the column in the source file in which the intervention occurred, if known, or null otherwise. ...
...le in which the intervention occurred, if known, or null otherwise. columnnumber a number representing the column in the source file in which the intervention occurred, if known, or null otherwise. examples let options = {
types: ['intervention'], buffered: true } let observer = new reportingobserver(function(reports, observer) { let firstreport = reports[0]; console.log(firstreport.
type); // intervention console.log(firstreport.body.id); console.log(firstreport.body.message); console.log(firstreport.body.sourcefile); console.log(firstreport.body.linenumber); console.log(firstreport.body.columnnumber); }, options); specifications specification status comment reporting apithe definition of 'interventionreportbody' in that specification. edito...
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. ...
...erface 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. ...
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(sourcekeyframes); 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 0...
...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. 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: sourcekeyframes a keyframeeffect object that you want to clone. examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes =...
LargestContentfulPaint - Web APIs
ns for largest-contentful-paint entries and logs the lcp value to the console. this example also demonstrates how to include buffered entries (those that ocurred before observer() was called), which is done by setting the buffered option to true. note that in this example data is only sent to the server when the user leaves the tab. // catch errors since some browsers throw when using the new `
type` option. // https://bugs.webkit.org/show_bug.cgi?id=209216 try { let lcp; const po = new performanceobserver((entrylist) => { const entries = entrylist.getentries(); const lastentry = entries[entries.length - 1]; // update `lcp` to the latest value, using `rendertime` if it's available, // otherwise using `loadtime`. (note: `rendertime` may not be available on // image e...
...ies = entrylist.getentries(); const lastentry = entries[entries.length - 1]; // update `lcp` to the latest value, using `rendertime` if it's available, // otherwise using `loadtime`. (note: `rendertime` may not be available on // image elements loaded cross-origin without the `timing-allow-origin` header.) lcp = lastentry.rendertime || lastentry.loadtime; }); po.observe({
type: 'largest-contentful-paint', buffered: true}); // send data to the server. addeventlistener('visibilitychange', function fn() { if (lcp && document.visibilitystate === 'hidden') { console.log('lcp:', lcp); removeeventlistener('visibilitychange', fn, true); } }, true); } catch (e) { // do nothing if the browser doesn't support this api. } specifications spe...
LayoutShift - Web APIs
ayoutshiftattribution objects with information on the elements that were shifted. methods layoutshift.tojson() converts the properties to json. examples the following example shows how to capture layout shifts and log them to the console. note that in this example data is only sent to the server when the user leaves the tab. ...
... observer.takerecords(); observer.disconnect(); console.log('cls:', cumulativelayoutshiftscore); } }); } catch (e) { // do nothing if the browser doesn't support this api. ...
MSSiteModeEvent - Web APIs
the event phase that is being evaluated. istrusted gets a value that indicates whether a trusted event source created an event. srcelement gets the element that the event was originally dispatched to. compare to target. target gets the element that is the target of the event. timestamp gets the time, in milliseconds, when an event occurred. ...
...ent that is the target of the event. timestamp gets the time, in milliseconds, when an event occurred.
type gets the name of an event. although this event inherits from the event object, it cannot be created by using createevent. ...
MediaDecodingConfiguration - Web APIs
the mediadecodingconfiguration dictionary of the media capabilities api is used to define the
type of media being tested when calling mediacapabilities.decodinginfo() to query whether a specific media configuration is supported, smooth, and/or power efficient. properties a mediadecodingconfiguration dictionary takes two properties:
type — the
type of media being tested. this takes one of two values: file: represents a configuration that is meant to be used for a plain file playback. media-source: represents a configuration that is meant to be used for playback of a mediasource. a media configuration — a videoconfiguration or audioconfiguration dictionary. ...
...ng tested. this takes one of two values: file: represents a configuration that is meant to be used for a plain file playback. media-source: represents a configuration that is meant to be used for playback of a mediasource. a media configuration — a videoconfiguration or audioconfiguration dictionary. examples //create media configuration to be tested const mediaconfig = {
type : 'file', // or 'media-source' video : { content
type : "video/webm;codecs=vp8", // valid content
type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s. } }; // check support and performance navigator.me...
MediaEncodingConfiguration - Web APIs
the mediaencodingconfiguration dictionary of the media capabilities api is used to define the
type of media being tested when calling mediacapabilities.encodinginfo() to query whether a specific media configuration is supported, smooth, and/or power efficient. properties a mediaencodingconfiguration dictionary takes two properties:
type — the
type of media being tested; takes one of two values: record — represents a configuration for recording of media, e.g. using mediarecorder. transmission — represents a configuration meant to be transmitted over electronic means (e.g. using rtcpeerconnection). ...
... of two values: record — represents a configuration for recording of media, e.g. using mediarecorder. transmission — represents a configuration meant to be transmitted over electronic means (e.g. using rtcpeerconnection). a media configuration — a videoconfiguration audioconfiguration dictionary. examples //create media configuration to be tested const mediaconfig = {
type : 'record', // or 'transmission' video : { content
type : "video/webm;codecs=vp8", // valid content
type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s. } }; // check support and performance navigator.
MediaRecorder: dataavailable event - Web APIs
y raise, see the documentation for the event handler property: ondataavailable. examples using addeventlistener to listen for dataavailable events: ... var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { '
type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ... the same, but using the ondataavailable event handler property: ... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available...
...; mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ... the same, but using the ondataavailable event handler property: ... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { '
type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ... specifications specification status mediastream recording working draft ...
MediaRecorder.onerror - Web APIs
syntax mediarecorder.onerror = errorhandlerfunction; value a function to be called whenever an error occurs during the recorder's lifetime. ...
...ream is configured to disallow recording. this may be the case, for example, with sources obtained using getusermedia() when the user denies permission to use an input device. this also happens when a mediastreamtrack within the stream is marked as isolated due to the peeridentity constraint on the source stream. notsupportederror an attempt was made to instantiate a mediarecorder using a mime
type that isn't supported on the user's device; one or more of the requested container, codecs, or profiles as well as other information may be invalid. unknownerror an non-security related error occurred that cannot otherwise be categorized. recording stops, the mediarecorder's state becomes inactive, one last dataavailable event is sent to the mediarecorder with the remaining received data, and fi...
MediaSession.setPositionState() - Web APIs
the mediasession method setpositionstate() is used to update the current document's media playback position and speed for presentation by user's device in any kind of interface that provides details about ongoing media. this can be particularly useful if your code implements a player for
type of media not directly supported by the browser. call this method on the navigator object's mediasession object. ...
...t's mediasession object. syntax navigator.mediasession.setpositionstate(statedict); parameters statedict optional an object conforming to the mediapositionstate dictionary, providing updated information about the playback position and speed of the document's ongoing media. if the object is empty, the existing playback state information is cleared. return value undefined. exceptions
typeerror this error can occur in an array of circumstances: the specified mediapositionstate object's duration is missing, negative, or null. position is missing or null, or is either negative or greater than duration. the playbackrate is zero. example in this example, a player for a non-standard media file format, written in javascript, uses setinterval() to establish a callback w...
MediaSource.readyState - Web APIs
ded: the source is attached to a media element but the stream has been ended via a call to mediasource.endofstream(). syntax var myreadystate = mediasource.readystate; value a domstring. ...
...desaulniers (view the full demo live, or download the source for further investigation.) if ('mediasource' in window && mediasource.is
typesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime
type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); ...
MediaStreamEvent - Web APIs
methods a mediastreamevent being an event, this event also implements these properties. ...
... methods a mediastreamevent being an event, this event also implements these properties. there is no specific mediastreamevent method. ...
MediaStreamTrackAudioSourceNode - Web APIs
the audio itself might be input from a microphone or other audio sampling device, or might be received through a rtcpeerconnection, among other posible options. a mediastreamtrackaudiosourcenode has no inputs and exactly one output, and is created using the audiocontext.createmediastreamtracksource() method. this interface is similar to mediastreamaudiosourcenode, except it lets you specifically state the track to use, rather than assuming the first audio track on a stream. ...
...ta = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.
type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // ...
MediaTrackConstraints - Web APIs
and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling getconstraints(). for each constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value which you'd like to be as close to as possible. the specifics vary somewhat depending on the
type of the constrainable property. to learn more about how constraints work, see capabilities, constraints, and settings. properties some combination—but not necessarily all—of the following properties will exist on the object. this may be because a given browser doesn't support the property, or because it doesn't apply. for example, because rtp doesn't provide some of these values during nego...
...always the mouse is always visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a constraindomstring which specifies the
types of display surface that may be selected by the user. this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the str...
MediaTrackSettings.displaySurface - Web APIs
the windows are aggragated into a single video track, with any empty space filled with a backdrop; that backdrop is selected by the user agent. browser the stream's video track presents the entire contents of a single browser tab which the user selected during the getdisplaymedia() call. ...
...e contents of one or more of the user's screens. any empty space (if the displays are of different dimensions) is filled with a backdrop chosen by the user agent. window the stream's video track presents the contents of a single window selected by the user. the window may be from any application, not necessarily just from within the user agent. not all user agents support all of these surface
types. specifications specification status comment screen capturethe definition of 'mediatracksettings.displaysurface' in that specification. working draft initial definition ...
Transcoding assets for Media Source Extensions - Web APIs
dec=aac to the mp4-dash-encode.py command line. container and codec support as specified in section 1.1 of the mse spec: goals, mse is designed not to require support for any particular media format or codec. while this is true on paper, browser support varies for specific container/codec combinations. ...
...code.py command line. container and codec support as specified in section 1.1 of the mse spec: goals, mse is designed not to require support for any particular media format or codec. while this is true on paper, browser support varies for specific container/codec combinations. to check if the browser supports a particular container, you can pass a string of the mime
type to the mediasource.is
typesupported method: mediasource.is
typesupported('audio/mp3'); // false mediasource.is
typesupported('video/mp4'); // true mediasource.is
typesupported('video/mp4; codecs="avc1.4d4028, mp4a.40.2"'); // true the string is the mime
type of the container, optionally followed by a list of codecs. while the mime
type is fairly simple to figure out, we can get the codec string using the mp4info utility. c...
MerchantValidationEvent() - Web APIs
the merchantvalidationevent() constructor creates a new merchantvalidationevent object. you should not have to create these events yourself; instead, just handle the merchantvalidation event. syntax merchantvalidationevent = new merchantvalidationevent(
type, options); parameters
type a domstring which must be merchantvalidation, the only
type of event which uses the merchantvalidationevent interface. options optional an optional dictionary which may contain zero or more of the following properties: methodname optional a domstring containing the payment method identifier for the payment handler being used. this is an empty string by default. validationurl optional the url from which to retrieve payment handler specific verification information used to validate the merc...
...y string by default. validationurl optional the url from which to retrieve payment handler specific verification information used to validate the merchant. this is an empty string by default. return value a newly-created merchantvalidationevent providing the information that needs to be delivered to the client-side code to present to the user agent by calling complete(). exceptions
typeerror the string specified as validationurl could not be parsed as a url. rangeerror the specified methodname does not correspond to a known and supported merchant or is not a well-formed standard payment method identifier. specifications specification status comment payment request apithe definition of 'merchantvalidationevent()' in that specification. candidate r...
MessageEvent.MessageEvent() - Web APIs
origin: a usvstring representing the origin of the message emitter. this defaults to an empty string ("") if not specified. lasteventid: a domstring representing a unique id for the event. ...
... origin: a usvstring representing the origin of the message emitter. this defaults to an empty string ("") if not specified. lasteventid: a domstring representing a unique id for the event. ...
MouseEvent.button - Web APIs
s on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout. note: do not confuse this property with the mouseevent.buttons property, which indicates which buttons are pressed for all mouse events
types. syntax var buttonpressed = instanceofmouseevent.button return value a number representing a given button: 0: main button pressed, usually the left button or the un-initialized state 1: auxiliary button pressed, usually the wheel button or the middle button (if present) 2: secondary button pressed, usually the right button 3: fourth button, typically the browser back button 4: fifth...
...thers may have many buttons mapped to different functions and button values. ...
MouseEvent.buttons - Web APIs
"browser back" button) 16 : 5th button (typically the "browser forward" button) example this example logs the buttons property when you trigger a mousedown event. ...
...ally the "browser forward" button) example this example logs the buttons property when you trigger a mousedown event. ...
MouseScrollEvent - Web APIs
the mousescrollevent interface represents events that occur due to the user moving a mouse wheel or similar input device. do not use this interface for wheel events. like mousewheelevent, this interface is non-standard and deprecated. it was used in gecko-based browsers only. instead use the standard wheelevent. ...
... constants delta modes constant value description horizontal_axis 0x01 the event is caused by horizontal wheel operation. vertical_axis 0x02 the event is caused by vertical wheel operation. methods initmousescrollevent() see nsidommousescrollevent::initmou...
MutationObserver.MutationObserver() - Web APIs
callback when dom mutations occur. example this example simply creates a new mutationobserver configured to watch a node and all of its children for additions and removals of elements to the tree, as well as any changes to attributes on any of the elements in the tree. the callback function function callback(mutationlist, observer) { mutationlist.foreach( (mutation) => { switch(mutation.
type) { case 'childlist': /* one or more children have been added to and/or removed from the tree. (see mutation.addednodes and mutation.removednodes.) */ break; case 'attributes': /* an attribute value changed on the element in mutation.target. the attribute name is in mutation.attributename, and its previous v...
...previous value is in mutation.oldvalue. */ break; } }); } the callback() function is invoked when the observer sees changes matching the configuration of the observation request specified when calling observe() to begin watching the dom. the kind of change that took place (either a change to the list of children, or a change to an attribute) is detected by looking at the mutation.
type property. creating and starting the observer this code actually sets up the observation process. const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true, // omit (or set to false) to observe only changes to the parent node subtree: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observ...
MutationObserver.observe() - Web APIs
syntax mutationobserver.observe(target, options) parameters target a dom node (which may be an element) within the dom tree to watch for changes, or to be the root of a subtree of nodes to be watched. options a mutationobserverinit object providing options that describe which dom mutations should be reported to mutationobserver’s callback. return value undefined. exceptions
typeerror thrown in any of the following circumstances: the options are configured such that nothing will actually be monitored. (for example, if mutationobserverinit.childlist, mutationobserverinit.attributes, and mutationobserverinit.characterdata are all false.) the value of options.attributes is false (indicating that attribute changes are not to be monitored), but attributeoldvalue is ...
... attributeoldvalue is true and/or attributefilter is present. the characterdataoldvalue option is true but mutationobserverinit.characterdata is false (indicating that character changes are not to be monitored). usage notes reusing mutationobservers you can call observe() multiple times on the same mutationobserver to watch for changes to different parts of the dom tree and/or different
types of changes. there are some caveats to note: if you call observe() on a node that's already being observed by the same mutationobserver, all existing observers are automatically removed from all targets being observed before the new observer is activated. if the same mutationobserver is not already in use on the target, then the existing observers are left alone and the new one is added. ob...
MutationObserverInit.attributeFilter - Web APIs
tion 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. ...
...callback); observer.observe(userlistelement, { attributefilter: [ "status", "username" ], attributeoldvalue: true, subtree: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects. for any items representing an attribute change (which can be detected by the value of mutationrecord.
type being "attributes"), we use the attribute's name, obtained using mutationrecord.attributename, to identify the
type of change that occurred and then dispatch to the appropriate handler function. note the use of mutationrecord.oldvalue to get the previous value of the "username" property so we have that information when doing lookups in our local array of users. when observe() is called, the spe...
MutationObserverInit.attributeOldValue - Web APIs
tion 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. ...
...target"); var observer = new mutationobserver(callback); observer.observe(targetnode, { attributes: true, attributeoldvalue: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects. for any items representing an attribute change (which can be detected by the value of mutationrecord.
type being "attributes"), a function called notifyuser() is used to tell the user the name of the attribute that changed as well as the attribute's new value (mutation.target[mutation.attributename]) and its old value (mutation.oldvalue). when observe() is called, the specified options are attributes and attributeoldvalue, which means that changes to attribute values will be reported, and each mutati...
MutationObserverInit.attributes - Web APIs
tion 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. ...
...target"); var observer = new mutationobserver(callback); observer.observe(targetnode, { attributes: true, attributeoldvalue: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects. for any items representing an attribute change (which can be detected by the value of mutationrecord.
type being "attributes"), a function called notifyuser() is used to tell the user the name of the attribute that changed as well as the attribute's new value (mutation.target[mutation.attributename]) and its old value (mutation.oldvalue). when observe() is called, the specified options are attributes and attributeoldvalue, which means that changes to attribute values will be reported, and each mutati...
MutationObserverInit - Web APIs
subtree optional set to true to extend monitoring to the entire subtree of nodes rooted at target. all of the other mutationobserverinit properties are then extended to all of the nodes in the subtree instead of applying solely to the target node. the default value is false. ...
... subtree optional set to true to extend monitoring to the entire subtree of nodes rooted at target. all of the other mutationobserverinit properties are then extended to all of the nodes in the subtree instead of applying solely to the target node. the default value is false. ...
Navigation Timing API - Web APIs
n, such as the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and so forth. interfaces performance the window.performance property returns a performance object. ...
...high resolution time api, the navigation timing api adds two properties: timing and navigation, of the
types below. performancenavigationtiming provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. for example, this interface can be used to determine how much time it takes to load or unload a document. performancetiming used as the
type for the value of timing, objects of this
type contain timing information that can provide insight into web page performance. performancenavigation the
type used to return the value of navigation, which contains information explaining the context of the load operation described by this performance instance. the navigation timing api can be used to gather performance data on the client side ...
Navigator.mediaCapabilities - Web APIs
ator.mediacapabilities read-only property returns a mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and output capabilities as defined by the media capabilities api. syntax mediacapabilitiesobj = globalobj.navigator.mediacapabilities value a mediacapabilities object. ...
...turns a mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and output capabilities as defined by the media capabilities api. syntax mediacapabilitiesobj = globalobj.navigator.mediacapabilities value a mediacapabilities object. ...
Navigator.registerContentHandler() - Web APIs
allows web sites to register themselves as possible handlers for content of a particular mime
type. note: web sites may only register content handlers for themselves. for security reasons, it's not possible for an extension or web site to register content handlers targeting other sites. syntax navigator.registercontenthandler(mime
type, uri, title); mime
type is the desired mime
type as a string. uri is the uri to the handler as a string. title is the title of the handler presented to the user as a string. ...
...string. uri is the uri to the handler as a string. title is the title of the handler presented to the user as a string. example navigator.registercontenthandler( "application/vnd.mozilla.maybe.feed", "http://www.example.tld/?foo=%s", "my feed reader" ); notes for firefox 2 and above, only the application/vnd.mozilla.maybe.feed, application/atom+xml, and application/rss+xml mime
types are supported. all values have the same effect, and the registered handler will receive feeds in all atom and rss versions (see bug 391286). firefox is the only browser that implemented this feature, and it wasn't implemented to match the standard. this feature has since been removed from the html standard and shouldn't be used. specifications specification status comment ...
Navigator - Web APIs
ect and querying for an existing lock object navigator.mediacapabilities read only returns a mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and output capabilities. navigator.maxtouchpoints read only returns the maximum number of simultaneous touch contact points are supported by the current device. navigatorplugins.mime
types read only returns an mime
typearray listing the mime
types supported by the browser. navigator.online read only returns a boolean indicating whether the browser is working online. navigator.permissions read only returns a permissions object that can be used to query and update permission status of apis covered by the permissions api. navigatorid.platform read only returns a string r...
...ard navigator.canshare() returns true if a call to navigator.share() would succeed. navigator.getusermedia() after having prompted the user for 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.requestmediakeysystemaccess() returns a promise for a mediakeysystemaccess 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 me...
NavigatorPlugins.plugins - Web APIs
returns a pluginarray object, listing the plugin objects describing the plugins installed in the application. in firefox 29 and later, enumeration of the navigator.plugins array may be restricted as a privacy measure. applications that must check for the presence of a browser plugin should query navigator.plugins or navigator.mime
types by exact name instead of enumerating the navigator.plugins array and comparing every plugin's name. this privacy change does not disable any plugins; it just hides some plugin names from enumeration. syntax var plugins = navigator.plugins; plugins is pluginarray object used to access plugin objects either by name or as a list of items. the returned value is not a javascript array, but has the length property and supports accessing individual items using...
...the returned value is not a javascript array, but has the length property and supports accessing individual items using bracket notation (plugins[2]), as well as via item(index) and nameditem("name") methods. examples the following example function returns the version of the shockwave flash plugin. function getflashversion() { var flash = navigator.plugins.nameditem('shockwave flash'); if (
typeof flash != 'object') { // flash is not present return undefined; } if(flash.version){ return flash.version; } else { //no version property (e.g. in chrome) return flash.description.replace(/shockwave flash /,""); } } the following example displays information about the installed plugin(s). var pluginslength = navigator.plugins.length; document.body.innerhtml = plug...
Node.isEqualNode() - Web APIs
syntax var isequalnode = node.isequalnode(othernode); othernode: the node to compare equality with. example in this example, we create three <div> blocks. the first and third have the same contents and attributes, while the second is different. ...
... syntax var isequalnode = node.isequalnode(othernode); othernode: the node to compare equality with. example in this example, we create three <div> blocks. the first and third have the same contents and attributes, while the second is different. ...
Node.removeChild() - Web APIs
ion in 2 different ways: if the child was in fact a child of element and so existing on the dom, but was removed the method throws the following exception: uncaught notfounderror: failed to execute 'removechild' on 'node': the node to be removed is not a child of this node. if the child doesn't exist on the dom of the page, the method throws the following exception: uncaught
typeerror: failed to execute 'removechild' on 'node': parameter 1 is not of
type 'node'. examples simple examples given this html: <div id="top"> <div id="nested"></div> </div> to remove a specified element when knowing its parent node: let d = document.getelementbyid("top"); let d_nested = document.getelementbyid("nested"); let throwawaynode = d.removechild(d_nested); to remove a specif...
...throwawaynode = d.removechild(d_nested); to remove a specified element without having to specify its parent node: let node = document.getelementbyid("nested"); if (node.parentnode) { node.parentnode.removechild(node); } to remove all children from an element: let element = document.getelementbyid("top"); while (element.firstchild) { element.removechild(element.firstchild); } causing a
typeerror <!--sample html code--> <div id="top"> </div> <script
type="text/javascript"> let top = document.getelementbyid("top"); let nested = document.getelementbyid("nested"); // throws uncaught
typeerror let garbage = top.removechild(nested); </script> causing a notfounderror <!--sample html code--> <div id="top"> <div id="nested"></div> </div> <script
type="text/javascript"> let...
Node.textContent - Web APIs
interface represents the text content of the node and its descendants. note: textcontent and htmlelement.innertext are easily confused, but the two properties are different in important ways. ...
...(this is an empty string if the node has no children.) setting textcontent on a node removes all of the node's children and replaces them with a single text node with the given string value. ...
NodeIterator - Web APIs
erator() method, as follows: const nodeiterator = document.createnodeiterator(root, whattoshow, filter); properties this interface doesn't inherit any property. nodeiterator.root read only returns a node representing the root node as specified when the nodeiterator was created. nodeiterator.whattoshow read only returns an unsigned long being a bitmask made of constants describing the
types of node that must to be presented. non-matching nodes are skipped, but their children may be included, if relevant. the possible values are: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is mea...
...do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_fragment 1024 shows documentfragment nodes. nodefilter.show_document_
type 512 shows document
type nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a nodeiterator with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document ...
OfflineAudioContext.startRendering() - Web APIs
browsers currently support two versions of the startrendering() method — an older event-based version and a newer promise-based version. the former will eventually be removed, but currently both mechanisms are provided for legacy reasons. ...
... online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.response
type = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.startrendering().then(function(renderedbuffer) { console.log('rendering c...
OfflineAudioContext - Web APIs
lineaudiocontext() creates a new offlineaudiocontext instance. properties also inherits properties from its parent interface, baseaudiocontext. offlineaudiocontext.length read only an integer representing the size of the buffer in sample-frames. event handlers offlineaudiocontext.oncomplete is an eventhandler called when processing is terminated, that is when the complete event (of
type offlineaudiocompletionevent) is raised, after the event-based version of offlineaudiocontext.startrendering() is used. methods also inherits methods from its parent interface, baseaudiocontext. offlineaudiocontext.suspend() schedules a suspension of the time progression in the audio context at the specified time and returns a promise. offlineaudiocontext.startrendering() starts rendering...
... online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.response
type = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.startrendering().then(function(renderedbuffer) { console.log('rendering c...
OffscreenCanvas.convertToBlob() - Web APIs
the offscreencanvas.converttoblob() method creates a blob object representing the image contained in the canvas. syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({
type: "image/jpeg", quality: 0.95 }); options:
type: a domstring indicating the image format. the default
type is image/png. quality: a number between 0 and 1 indicating image quality if the
type option is image/jpeg or image/webp. if this argument is anything else, the default value for image quality is used. other arguments are ignored. return value a promise returning a blob object representing the image cont...
...e for image quality is used. other arguments are ignored. return value a promise returning a blob object representing the image contained in the canvas. examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ... some drawing using the gl context ... offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob { size: 334,
type: "image/png" } specifications currently drafted as a proposal: offscreencanvas. ...
OffscreenCanvas.convertToBlob() - Web APIs
the offscreencanvas.converttoblob()method creates a blob object representing the image contained in the canvas. syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({
type: "image/jpeg", quality: 0.95 }); options:
type: a domstring indicating the image format. the default
type is image/png. quality: a number between 0 and 1 indicating image quality if the
type option is image/jpeg or image/webp. if this argument is anything else, the default value for image quality is used. other arguments are ignored. return value a promise returning a blob object representing the image conta...
...e for image quality is used. other arguments are ignored. return value a promise returning a blob object representing the image contained in the canvas. examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ... some drawing using the gl context ... offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob { size: 334,
type: "image/png" } specifications specification status comment html living standardthe definition of 'offscreencanvas: converttoblob' in that specification. living standard ...
OffscreenCanvas.getContext() - Web APIs
the offscreencanvas.getcontext() method returns a drawing context for an offscreen canvas, or null if the context identifier is not supported. note: this api is currently implemented for webgl1 and webgl2 contexts only. see bug 801176 for canvas 2d api support from workers. syntax offscreen.getcontext(context
type, contextattributes); parameters context
type is a domstring containing the context identifier defining the drawing context associated to the canvas. possible values are: "2d" creates a canvasrenderingcontext2d object representing a two-dimensional rendering context. "webgl" creates a webglrenderingcontext object representing a three-dimensional rendering context. this context is only available on browsers that implement webgl version 1 (opengl es 2.0). "we...
...performancecaveat: boolean that indicates if a context will be created if the system performance is low. return value a renderingcontext which is either a canvasrenderingcontext2d for "2d", webglrenderingcontext for "webgl" and "experimental-webgl", webgl2renderingcontext for "webgl2" and "experimental-webgl2" , or imagebitmaprenderingcontext for "bitmaprenderer". if the context
type doesn't match a possible drawing context, null is returned. examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); gl; // webglrenderingcontext gl.canvas; // offscreencanvas specifications specification status comment html living standardthe definition of 'offscreencanvas.getcontext()' in that specification. living standard ...
OffscreenCanvas.convertToBlob() - Web APIs
the offscreencanvas.converttoblob() method creates a blob object representing the image contained in the canvas. syntax promise<blob> offscreencanvas.converttoblob(options); parameters options optional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({
type: "image/jpeg", quality: 0.95 }); options:
type: a domstring indicating the image format. the default
type is image/png. quality: a number between 0 and 1 indicating image quality if the
type option is image/jpeg or image/webp. if this argument is anything else, the default value for image quality is used. other arguments are ignored. return value a promise returning a blob object representing the i...
...e for image quality is used. other arguments are ignored. return value a promise returning a blob object representing the image contained in the canvas. examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ... some drawing using the gl context ... offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob { size: 334,
type: "image/png" } specifications currently drafted as a proposal: offscreencanvas. ...
ParentNode.prepend() - Web APIs
ailable: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/prepend()/prepend().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('prepend')) { return; } object.defineproperty(item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend() { var argarr = array.proto
type.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appendchild(isnode ? argitem : document.createtextnode(string(argitem))); }); this.insertbefore(docfrag, this.firstchild); } }); }); })([element.proto
type, document.proto
type, docum...
... living standard initial definition. ...
PaymentMethodChangeEvent - Web APIs
the paymentmethodchangeevent() constructor creates a new paymentmethodchangeevent object providing details about a paymentmethodchange event. syntax paymentmethodchangeevent = new paymentmethodchangeevent(
type, options); parameters
type a domstring which must contain the string paymentmethodchange, the name of the only
type of event which uses the paymentmethodchangeevent interface. options optional an optional paymentmethodchangeeventinit dictionary which may contain zero or more of the following properties: methodname optional a domstring containing the payment method identifier for the payment handler being used. this is an empty string by default. methoddetails optional an object providing payment method-specific information describing the changes made to the paym...
...lt. methoddetails optional an object providing payment method-specific information describing the changes made to the payment, or null if there is no additional information available or required. this is null by default. return value a newly-created paymentmethodchangeevent object describing a change to the options specified for the payment method given in the methodname property. the
type of the methoddetails property depends on the payment method. for example, if methodname is basic-card, indicating that the basic card payment method is being used for validation, the methoddetails field must be a basiccardchangedetails object. specifications specification status comment payment request apithe definition of 'paymentmethodchangeevent()' in that specificati...
PaymentRequest.PaymentRequest() - Web APIs
this parameter is more generic than credit cards, it is a single domstring, and the meaning of the data parameter changes with the supportedmethods. for example, the basic card payment method is selected by specifying the string basic-card here. data a json-serializable object that provides optional information that might be needed by the supported payment methods. this has to conform to the
type expected by the payment handler indicated by supportedmethods. for basic credit card services, this structure should match the basiccardrequest dictionary. details provides information about the requested transaction. this parameter contains the following fields: total the total amount of the payment request. id optional a free-form identifier for this payment request. if a value ...
...dress and submit it with the payment request. the default is false. requestpayerphone a boolean indicating whether the user agent should collect the payer's phone number and submit it with the payment request. the default is false. requestshipping a boolean indicating whether the user agent should collect the payer's shipping address and submit it with the payment request. if you set this
type to true, you should select an appropriate shipping
type. the default is false. shipping
type lets you specify how the user interface refers to shipping when the word 'shipping' isn't appropriate for your use case. for example, in english speaking countries you would say "pizza delivery" not "pizza shipping". valid values are "shipping", "delivery", and "pickup". quotation marks must be included...
Using the Payment Request API - Web APIs
(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); the functions invoked inside the constructor simply return the required object parameters: function buildsupportedpaymentmethoddata() { // example supported payment methods: return [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard'], supported
types: ['debit', 'credit'] } }]; } function buildshoppingcartdetails() { // hardcoded for demo purposes: return { id: 'order-123', displayitems: [ { label: 'example item', amount: {currency: 'usd', value: '1.00'} } ], total: { label: 'total', amount: {currency: 'usd', value: '1.00'} } }; } starting the payment process once the ...
...isplay = 'none'; legacypanel.style.display = 'block'; } }); }); note: see our recommending a payment app when user has no apps demo for the full code. showing additional user interface after successful payments if the merchant desires to collect additional information not part of the api (e.g., additional delivery instructions), the merchant can show a page with additional <input
type="text"> fields after the checkout. request.show() .then(function(paymentresponse) { // process payment here. // close the ui: paymentresponse.complete('success').then(function() { // request additional shipping address details. const additionaldetailscontainer = document.getelementbyid('additional-details-container'); additionaldetailscontainer.style.display =...
performance.clearMarks() - Web APIs
the clearmarks() method removes the named mark from the browser's performance entry buffer. if the method is called with no arguments, all performance entries with an entry
type of "mark" will be removed from the performance entry buffer. note: this feature is available in web workers. syntax performance.clearmarks(); performance.clearmarks(name); arguments name optional a domstring representing the name of the timestamp. if this argument is omitted, all performance entries with an entry
type of "mark" will be removed. return value 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.g...
...me of the timestamp. if this argument is omitted, all performance entries with an entry
type of "mark" will be removed. return value 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.getentriesby
type("mark").length ); } // create a bunch of marks. performance.mark("squirrel"); performance.mark("squirrel"); performance.mark("monkey"); performance.mark("monkey"); 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...
performance.clearMeasures() - Web APIs
the clearmeasures() method removes the named measure from the browser's performance entry buffer. if the method is called with no arguments, all performance entries with an entry
type of "measure" will be removed from the performance entry buffer. note: this feature is available in web workers. syntax performance.clearmeasures(); performance.clearmeasures(name); arguments name optional a domstring representing the name of the timestamp. if this argument is omitted, all performance entries with an entry
type of "measure" will be removed. return value void example the following example shows both uses of the clearmeasures() method. // create a small helper to show how many performancemeasure entries there are. function logmeasurecount() { console.log( "found this many...
...mestamp. if this argument is omitted, all performance entries with an entry
type of "measure" will be removed. return value void example the following example shows both uses of the clearmeasures() method. // create a small helper to show how many performancemeasure entries there are. function logmeasurecount() { console.log( "found this many entries: " + performance.getentriesby
type("measure").length ); } // create a bunch of measures. performance.measure("from navigation"); performance.mark("a"); performance.measure("from mark a", "a"); performance.measure("from navigation"); performance.measure("from mark a", "a"); performance.mark("b"); performance.measure("between a and b", "a", "b"); logmeasurecount() // "found this many entries: 5" // delete just the "from navigat...
performance.clearResourceTimings() - Web APIs
to set the size of the browser's performance data buffer, use the performance.setresourcetimingbuffersize() method. note: this feature is available in web workers. syntax performance.clearresourcetimings(); arguments void return value none this method has no return value. ...
...value. example function load_resource() { var image = new image(); image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; } function clear_performance_timings() { if (performance === undefined) { log("browser does not support web performance"); return; } // create a resource timing performance entry by loading an image load_resource(); var supported =
typeof performance.clearresourcetimings == "function"; if (supported) { console.log("run: performance.clearresourcetimings()"); performance.clearresourcetimings(); } else { console.log("performance.clearresourcetimings() not supported"); return; } // getentries should now return zero var p = performance.getentriesby
type("resource"); if (p.length == 0) console.log("... p...
performance.getEntriesByName() - Web APIs
the getentriesbyname() method returns a list of performanceentry objects for the given name and
type. the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time. note: this feature is available in web workers. syntax entries = window.performance.getentriesbyname(name,
type); arguments name the name of the entry to retrieve.
type optional the
type of entry to retrieve such as "mark". the valid entry
types are listed in performanceentry.entry
type. return value entries a list of performanceentry objects that have the specified name and
type. if the
type argument is not specified, only the name will be used to determine the entries to return. the items will be in chronological order bas...
...n"); do_work(50000); performance.mark("end"); performance.mark("begin"); do_work(100000); performance.mark("end"); do_work(200000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentries(name, entry
type) to get specific entries p = performance.getentries({name : "begin", entry
type: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); check_performanceentry(p[i]); } // use getentriesby
type() to get all "mark" entries p = performance.getentriesby
type("mark"); for (var i=0; i < p.length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + ...
performance.mark() - Web APIs
the mark()'s stores its data internally as performanceentry. note: this feature is available in web workers. syntax performance.mark(name); arguments name a domstring representing the name of the mark. ...
...ue 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("monkey"); performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); // get all of the performancemark entries. const allentries = performance.getentriesby
type("mark"); console.log(allentries.length); // 6 // get all of the "monkey" performancemark entries. const monkeyentries = performance.getentriesbyname("monkey"); console.log(monkeyentries.length); // 2 // clear out all of the marks. performance.clearmarks(); specifications specification status comment user timing level 2the definition of 'mark()' in that specification. ...
performance.measure() - Web APIs
e measure() method creates a named timestamp in the browser's performance entry buffer between marks, the navigation start time, or the current time. when measuring between two marks, there is a start mark and end mark, respectively. the named timestamp is referred to as a measure. the measure can be retrieved by one of the performance interfaces: (getentries(), getentriesbyname() or getentriesby
type()). the measure's performance entry will have the following property values: entry
type - set to "measure". name - set to the "name" given when the measure was created. starttime - set to the start mark timestamp. duration - set to a domhighrestimestamp that is the duration of the measure (typically, the end mark timestamp minus the start mark timestamp). note: this feature is available i...
...eate a variety of measurements. performance.measure("measure a to b", markernamea, markernameb); performance.measure("measure a to now", markernamea); performance.measure("measure from navigation start to b", undefined, markernameb); performance.measure("measure from the start of navigation to now"); // pull out all of the measurements. console.log(performance.getentriesby
type("measure")); // finally, clean up the entries. performance.clearmarks(); performance.clearmeasures(); }, 1000); }, 1000); specifications specification status comment user timing level 2the definition of 'measure()' in that specification. working draft clarifies measure() processing model. user timingthe definition of 'measure()' in that spe...
performance.setResourceTimingBufferSize() - Web APIs
the setresourcetimingbuffersize() method sets the browser's resource timing buffer size to the specified number of "resource" performance entry
type objects. a browser's recommended resource timing buffer size is at least 150 performance entry objects. note: this feature is available in web workers. syntax performance.setresourcetimingbuffersize(maxsize); arguments maxsize a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer. return value none this method has no return value. ...
...(maxsize); arguments maxsize a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer. return value none this method has no return value. example function setresourcetimingbuffersize(maxsize) { if (performance === undefined) { log("browser does not support web performance"); return; } var supported =
typeof performance.setresourcetimingbuffersize == "function"; if (supported) { log("... performance.setresourcetimingbuffersize() = yes"); performance.setresourcetimingbuffersize(maxsize); } else { log("... performance.setresourcetimingbuffersize() = not supported"); } } specifications specification status comment resource timing level 1the definition of 's...
PerformanceEntry.toJSON() - Web APIs
create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entry
type", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var s...
... candidate recommenda...
PerformanceMark - Web APIs
performancemark is an abstract interface for performanceentry objects with an entry
type of "mark". entries of this
type are created by calling performance.mark() to add a named domhighrestimestamp (the mark) to the browser's performance timeline. <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/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="...
... performanceentry.name returns the name given to the mark when it was created via a call to performance.mark(). performanceentry.starttime returns the domhighrestimestamp when performance.mark() was called. performanceentry.duration returns "0". (a mark has no duration.) methods this interface has no methods. example see the example in using the user timing api. specif...
PerformanceMeasure - Web APIs
performancemeasure is an abstract interface for performanceentry objects with an entry
type of "measure". entries of this
type are created by calling performance.measure() to add a named domhighrestimestamp (the measure) between two marks to the browser's performance timeline. <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/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco...
... performanceentry.name returns the name given to the measure when it was created via a call to performance.measure(). performanceentry.starttime returns a timestamp given to the measure when performance.measure() was called. performanceentry.duration returns a domhighrestimestamp that is the duration of the measure (typically, the measure's end mark timestamp minus its st...
PerformanceObserver() - Web APIs
syntax var observer = new performanceobserver(callback); parameters callback a performanceobservercallback callback that will be invoked when observed performance events are recorded. when the callback is invoked, its first parameter is a list of performance observer entries and the second parameter is the observer object. ...
...s and the second parameter is the observer object. return value a new performanceobserver object which will call the specified callback when observed performance events occur. example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entry
types: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entry
types: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver()' in that specification. candidate recommendation in...
PeformanceObserver.disconnect() - Web APIs
ct() method of the performanceobserver interface is used to stop the performance observer from receiving any performance entry events. ...
...s = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entry
types: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event // ... // disable additional performance events observer.disconnect(); } var observer2 = new performanceobserver(perf_observer); observer2.observe({entry
types: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'disconnect()' in that specification. candidate recommendation initial definition of disconnect() method. ...
PerformanceObserver - Web APIs
the performanceobserver interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline. note: this feature is available in web workers. constructor performanceobserver() creates and returns a new performanceobserver object. methods performanceobserver.observe() specifies the set of entry
types to observe. the performance observer's callback function will be invoked when a performance entry is recorded for one of the specified entry
types performanceobserver.disconnect() stops the performance observer callback from receiving performance entries. performanceobserver.takerecords() returns the current list of performance entries stored in the performance observer, emptying it out. ...
...r.disconnect() stops the performance observer callback from receiving performance entries. performanceobserver.takerecords() returns the current list of performance entries stored in the performance observer, emptying it out. example function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entry
types: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver' in that specification. candidate recommendation initial definition of performanceobserver interface. ...
PerformanceResourceTiming.nextHopProtocol - Web APIs
the alpn protocol id of the first hop to the proxy. note: this feature is available in web workers. syntax resource.nexthopprotocol; return value a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7301). example the following example uses the nexthopprotocol property. ...
... available in web workers. syntax resource.nexthopprotocol; return value a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7301). example the following example uses the nexthopprotocol property. ...
PointerEvent.isPrimary - Web APIs
icates whether or not the pointer device that created the event is the primary pointer. it returns true if the pointer that caused the event to be fired is the primary device and returns false otherwise. in a multi-pointer scenario (such as a touch screen that supports more than one touch point), this property is used to identify a master pointer among the set of active pointers for each pointer
type. only a primary pointer will produce compatibility mouse events. authors who desire only single-pointer interaction can achieve that by ignoring non-primary pointers. a pointer is considered primary if the pointer represents a mouse device. a pointer representing pen input is considered the primary pen input if its pointerdown event was dispatched when no other active pointers representing pen i...
...ts a mouse device. a pointer representing pen input is considered the primary pen input if its pointerdown event was dispatched when no other active pointers representing pen input existed. a pointer representing touch input is considered the primary touch input if its pointerdown event was dispatched when no other active pointers representing touch input existed. when two or more pointer device
types are being used concurrently, multiple pointers (one for each pointer
type) are considered primary. for example, a touch contact and a mouse cursor moved simultaneously will produce pointers that are both considered primary. if there are multiple primary pointers, these pointers will all produce compatibility mouse events (see pointer_events for more information about pointer, mouse and touch inte...
PromiseRejectionEvent() - Web APIs
the promiserejectionevent() constructor returns a newly created promiserejectionevent, which represents events fired when a javascript promise is rejected. with promise rejection events, it becomes possible to detect and report promises which fail and whose failures go unnoticed. it also becomes easier to write a global handler for errors. ...
...noticed. it also becomes easier to write a global handler for errors. there are two
types of promiserejectionevent: unhandledrejection is sent by the javascript runtime when a promise is rejected but the rejection goes unhandled. a rejectionhandled event is emitted if a promise is rejected but the rejection is caught by a rejection handler.. syntax promiserejectionevent = promiserejectionevent(
type, options); parameters the promiserejectionevent() constructor also inherits parameters from event().
type a string representing the name of the
type of the promiserejectionevent. this is case-sensitive and should be one of "rejectionhandled" or "unhandledrejection", to match the event names of the possible (non-synthetic) promiserejectionevent events that user agents can actually fire). o...
PublicKeyCredentialCreationOptions.extensions - Web APIs
rent (as of march 2019) list of potential extensions which may be used during the registration operation. warning! as of june 2020, only appid (used during creation with publickeycredentialrequestoptions.extensions) is supported by chrome and edge. 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. restricts the list of authenticator models which may be used. if no matching authenticator is available, the credential is still generated with another available authenticator. exts boolean supported extensions. if true, the client outputs an array of strings containing the extensions which ar...
...ey = { extensions:{ uvi: true, loc: false, uvm: false, exts: true }, 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", }, pubkeycredparams: [ {
type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // mybuffer will contain the result of any of the processing of the extensions var mybuffer = newcredentialinfo.getclientextensionresults(); // send attestation response and client extensions // to the server to proceed with the registration // of the credenti...
PublicKeyCredentialRequestOptions.extensions - Web APIs
tensions 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 2020, only appid is supported by chrome and edge. firefox does not seem to support any extension. also chrome doesn't plan to support any other extension in future extension identifier
type description appid usvstring fido appid. an appid which was used with legacy fido js apis to identify the current relying party. txauthsimple usvstring simple transaction authorization. this text is displayed on a prompt of the authenticator before verifying the user or testing their presence. the client outputs a usvstring which is the text as it was displayed...
...dentify the current relying party. txauthsimple usvstring simple transaction authorization. this text is displayed on a prompt of the authenticator before verifying the user or testing their presence. the client outputs a usvstring which is the text as it was displayed (line breaks may have been added). txauthgeneric an object with two properties: content
type (usvstring) content (arraybuffer) generic transaction authorization. this is used to display an image or some non-textual content on the authenticator before verifying the user or testing their presence. the content
type gives the mime
type of the resource to be displayed while content gives its actual content. the client outputs the hash of the content which was displayed (hashin...
PublicKeyCredentialRequestOptions - Web APIs
t on the authenticator, etc.). methods none. ...
... */]), rpid: "example.com", /* will only work if the current domain is something like foo.example.com */ userverification: "preferred", timeout: 60000, // wait for a minute allowcredentials: [ { transports: "usb",
type: "public-key", id: new uint8array(26) // actually provided by the server }, { transports: "internal",
type: "public-key", id: new uint8array(26) // actually provided by the server } ], extensions: { uvm: true, // rp wants to know how the user was verified loc: false, txauthsimple: "could you please verify yourself?" } }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server ...
RTCConfiguration - Web APIs
de ice server and transport settings and identity information. properties bundlepolicy optional specifies how to handle negotiation of candidates when the remote peer is not compatible with the sdp bundle standard. this must be one of the values from the enum rtcbundlepolicy. if this value isn't included in the dictionary, "balanced" is assumed. certificates optional an array of objects of
type rtccertificate which are used by the connection for authentication. if this property isn't specified, a set of certificates is generated automatically for each rtcpeerconnection instance. although only one certificate is used by a given connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. see using certificates below for...
...e created initially are closed at that point. note: in technical terms, a bundle lets all media flow between two peers flow across a single 5-tuple; that is, from a single ip and port on one peer to a single ip and port on the other peer, using the same transport protocol. constant description "balanced" the ice agent initially creates one rtcdtlstransport for each
type of content added: audio, video, and data channels. if the remote endpoint is not bundle-aware, then each of these dtls transports then handles all the communication for one
type of data. "max-compat" the ice agent initially creates one rtcdtlstransport per media track and a separate one for data channels. if the remote endpoint is not bundle-aware, everything is negotiated on these se...
RTCDataChannel.readyState - Web APIs
syntax var state = adatachannel.readystate; values a string which is one of the values in the rtcdatachannelstate enum, indicating the current state of the underlying data transport. rtcdatachannelstate enum the rtcdatachannelstate enum defines string constants which reflect the current status of the rtcdatachannel's underlying data connection. ...
...ted by rtcpeerconnection.createdatachannel() (on the peer which started the connection process). "open" the underlying data transport has been established and data can be transferred bidirectionally across it. this is the default state of a new rtcdatachannel created by the webrtc layer when the remote peer created the channel and delivered to the site or app in a datachannel event of
type rtcdatachannelevent. "closing" the process of closing the underlying data transport has begun. it is no longer possible to queue new messages to be sent, but previously queued messages may still be send or received before entering the "closed" state. "closed" the underlying data transport has closed, or the attempt to make the connection failed. example var datacha...
RTCIceCandidatePairStats.selected - Web APIs
hether or not the candidate pair described by the object is the one currently being used to communicate with the remote peer. syntax isselected = icpstats.selected; value a firefox-specific boolean value which is true if the candidate pair described by this object is the one currently in use. in any other browser, you can determine the selected candidate pair by looking for a stats object of
type transport, which is an rtctransportstats object. that object's selectedcandidatepairid property indicates whether or not the specified transport is the one being used. example the function shown in this example identifies the currently-selected candidate pair from a statistics report by first iterating over each report, looking for a transport report; when one is found, that transport's selecte...
...didatepairid is used to get the rtcicecandidatepair describing the connection. if that fails, then the second section iterates over the reports, looking for a candidate-pair record whose firefox-specific selected property is true. this candidate pair is then returned as the currently-selected one. function getcurrentcandidatepair(statsresults) { statsresults.foreach(report => { if (report.
type === "transport") { currentpair = statsresults.get(report.selectedcandidatepairid); } }); if (!currentpair) { statsresults.foreach(report => { if (report.
type === "candidate-pair" && report.selected) { currentpair = report; } }); } return currentpair; } specifications not part of any specification. this property is unique to firefox. ...
RTCIceComponent - Web APIs
the webrtc api's rtcicecomponent enumerated
type contains domstring values that each identify a specific ice component; these are "rtp" and "rtcp". these strings are mapped to corresponding numeric values as they appear in the candidate a-line in sdp. values "rtp" identifies an ice transport which is being used for the real-time transport protocol (rtp), or for rtp multiplexed with the rtp control protocol (rtcp). rtp is defined in rfc 3550. an rtcicecomponent of this value corresponds to the component id field in the candidate a-line with the value 1. "rtcp" identifies an ice transport being used for rtcp, which is defined in rfc 3550, section 6. this value of rtcicecomponent corresponds to the component id 2. ...
...r for rtp multiplexed with the rtp control protocol (rtcp). rtp is defined in rfc 3550. an rtcicecomponent of this value corresponds to the component id field in the candidate a-line with the value 1. "rtcp" identifies an ice transport being used for rtcp, which is defined in rfc 3550, section 6. this value of rtcicecomponent corresponds to the component id 2. usage notes the rtcicecomponent
type is used by the component property of rtcicecandidate and rtcicetransport objects. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecomponent' in that specification. candidate recommendation initial definition. ...
RTCOfferAnswerOptions - Web APIs
createoffer() uses rtcofferoptions and createanswer() uses rtcansweroptions. ...
...createoffer() uses rtcofferoptions and createanswer() uses rtcansweroptions. ...
RTCPeerConnection.createOffer() - Web APIs
r failed for some reason. example here we see a handler for the negotiationneeded event which creates the offer and sends it to the remote system over a signaling channel. note: keep in mind that this is part of the signaling process, the transport layer for which is an implementation detail that's entirely up to you. in this case, a websocket connection is used to send a json message with a
type field with the value "video-offer" to the other peer. the contents of the object being passed to the sendtoserver() function, along with everything else in the promise fulfillment handler, depend entirely on your design. mypeerconnection.createoffer().then(function(offer) { return mypeerconnection.setlocaldescription(offer); }) .then(function() { sendtoserver({ name: myusern...
...e other peer. the contents of the object being passed to the sendtoserver() function, along with everything else in the promise fulfillment handler, depend entirely on your design. ...
RTCPeerConnection.currentLocalDescription - Web APIs
currently in the process of switching over to. syntax sessiondescription = rtcpeerconnection.currentlocaldescription; return value the current description of the local end of the connection, if one has been set. if none has been successfully set, this value is null. ...
...lue the current description of the local end of the connection, if one has been set. if none has been successfully set, this value is null. example this example looks at the currentlocaldescription and displays an alert containing the rtcsessiondescription object's
type and sdp fields. var pc = new rtcpeerconnection(); … var sd = pc.currentlocaldescription; if (sd) { alert("local session:
type='" + sd.
type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.currentlocaldescription' in that specification. candidate recommendation initial specification. ...
RTCPeerConnection.currentRemoteDescription - Web APIs
rently in the process of switching over to. syntax sessiondescription = rtcpeerconnection.currentremotedescription; return value the current description of the remote end of the connection, if one has been set. if none has been successfully set, this value is null. ...
... the current description of the remote end of the connection, if one has been set. if none has been successfully set, this value is null. example this example looks at the currentremotedescription and displays an alert containing the rtcsessiondescription object's
type and sdp fields. var pc = new rtcpeerconnection(); … var sd = pc.currentremotedescription; if (sd) { alert("local session:
type='" + sd.
type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.currentremotedescription' in that specification. candidate recommendation initial specification. ...
RTCPeerConnection.getStreamById() - Web APIs
eed to update, since browsers have begun to remove support for stream. syntax var mediastream = pc.getstream(id); parameters id is a domstring corresponding to the stream to return. ...
...ponding to the stream to return. example var stream = pc.getstreambyid(mytrackid); if (stream) { console.log("found stream: " + stream.id); } polyfill running the following code before any other code will create rtcpeerconnection.proto
type.getstreambyid() if it's not natively available. ...
RTCPeerConnection: icecandidate event - Web APIs
ual ice messages for one indicating that the ice session is finished. examples this example creates a simple handler for the icecandidate event that uses a function called sendmessage() to create and send a reply to the remote peer through the signaling server. ...
...peer through the signaling server. first, an example using addeventlistener(): pc.addeventlistener("icecandidate", ev => { if (ev.candidate) { sendmessage({
type: "new-ice-candidate", candidate: event.candidate }); } }, false); you can also set the onicecandidate event handler property directly: pc.onicecandidate = ev => { if (ev.candidate) { sendmessage({
type: "new-ice-candidate", candidate: event.candidate }); } }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'icecandidate' in that specification. candidate recommendation ...
RTCPeerConnection.localDescription - Web APIs
lue is the value of rtcpeerconnection.pendinglocaldescription if that property isn't null; otherwise, the value of rtcpeerconnection.currentlocaldescription is returned. see pending and current descriptions in webrtc connectivity for details on this algorithm and why it's used. ...
...nnection.currentlocaldescription is returned. see pending and current descriptions in webrtc connectivity for details on this algorithm and why it's used. example this example looks at the localdescription and displays an alert containing the rtcsessiondescription object's
type and sdp fields. var pc = new rtcpeerconnection(); … var sd = pc.localdescription; if (sd) { alert("local session:
type='" + sd.
type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.localdescription' in that specification. candidate recommendation initial specification. ...
RTCPeerConnection: negotiationneeded event - Web APIs
s with a negotiationneeded event. examples in this example, we use addeventlistener() to create an event handler for negotiationneeded. its role is to create an sdp offer and send it through the signaling channel to the remote peer. pc.addeventlistener("negotiationneeded", ev => { pc.createoffer() .then(offer => return pc.setlocaldescription(offer)) .then(() => sendsignalingmessage({
type: "video-offer", sdp: pc.localdescription })) .catch(err => { /* handle error */ ); }, false); after creating the offer, the local end is configured by calling rtcpeerconnection.setlocaldescription(); then a signaling message is created and sent to the remote peer through the signaling server, to share that offer with the other peer. the other peer should recognize this message and...
...h setremotedescription(), and then creating an answer to send back to the offering peer. you can also set an event handler for the negotiationneeded event by assigning the event handler function to the rtcpeerconnection.onnegotiationneeded property: pc.onnegotiationneeded = ev => { pc.createoffer() .then(offer => return pc.setlocaldescription(offer)) .then(() => sendsignalingmessage({
type: "video-offer", sdp: pc.localdescription })) .catch(err => { /* handle error */ ); }; for a more detailed example, see starting negotiation in signaling and video calling. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'negotiationneeded' in that specification. candidate recommendation ...
RTCPeerConnection.onaddstream - Web APIs
the rtcpeerconnection.onaddstream event handler is a property containing the code to execute when the addstream event, of
type mediastreamevent, is received by this rtcpeerconnection. such an event is sent when a mediastream is added to this connection by the remote peer. the event is sent immediately after the call setremotedescription() and doesn't wait for the result of the sdp negotiation. important: this property has been removed from the specification; you should now use rtcpeerconnection.ontrack to watch for track events instead. it is included here in order to help you adapt existing code and understand existing samples, which may not be up-to-date yet. ...
... important: this property has been removed from the specification; you should now use rtcpeerconnection.ontrack to watch for track events instead. it is included here in order to help you adapt existing code and understand existing samples, which may not be up-to-date yet. syntax rtcpeerconnection.onaddstream = eventhandler; value a function which handles addstream events. these events, of
type mediastreamevent, are sent when streams are added to the connection by the remote peer. the first time an event occurs may be nearly immediately after the remote end of the connection is set using rtcpeerconnection.setremotedescription(); it doesn't wait for a particular stream to be accepted or rejected using sdp negotiation. example this code, based on an older version of our signaling and vi...
RTCPeerConnection.onidpassertionerror - Web APIs
such an event is sent when the associated identity provider (idp) encounters an error while generating an identity assertion. this event handler is deprecated. you should instead detect idp assertion errors by handling rejection of the promise returned by rtcpeerconnection.peeridentity. ...
...tion errors by handling rejection of the promise returned by rtcpeerconnection.peeridentity. syntax peerconnection.onidpassertionerror = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}. an event handler always has one single parameter, containing the event, here of
type rtcidentityerrorevent. example pc.onidpassertionerror = function(ev) { alert("onidpassertionerror event detected!"); }; ...
RTCPeerConnection.onidpvalidationerror - Web APIs
such an event is sent when the associated identity provider (idp) encounters an error while validating an identity assertion. this event handler is obsolete. you should instead detect idp validation errors by watching for the promise returned by rtcpeerconnection.peeridentity to be rejected. ...
...rors by watching for the promise returned by rtcpeerconnection.peeridentity to be rejected. syntax peerconnection.onidpvalidationerror = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}. an event handler always has one single parameter, containing the event, here of
type rtcidentityerrorevent. example pc.onidpvalidationerror = function(ev) { alert("onidpvalidationerror event detected!"); }; ...
RTCPeerConnection.onremovestream - Web APIs
m and the corresponding mediastream.onremovetrack event handler property of the remote mediastream. the rtcpeerconnection api is now track-based, so having zero tracks in the remote stream is equivalent to the remote stream being removed and the old removestream event. the rtcpeerconnection.onremovestream event handler is a property containing the code to execute when the removestream event, of
type mediastreamevent, is received by this rtcpeerconnection. such an event is sent when a mediastream is removed from this connection. syntax peerconnection.onremovestream = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}. an event handler always has one single paramet...
...this rtcpeerconnection. such an event is sent when a mediastream is removed from this connection. syntax peerconnection.onremovestream = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}. an event handler always has one single parameter, containing the event, here of
type mediastreamevent. example pc.onremovestream = function(ev) { alert("onremovestream event detected!"); }; ...
RTCPeerConnection.onsignalingstatechange - Web APIs
the onsignalingstatechange event handler property of the rtcpeerconnection interface specifies a function to be called when the signalingstatechange event occurs on an rtcpeerconnection interface. the function receives as input the event object of
type event; this event is sent when the peer connection's signalingstate changes, which may happen either because of a call to setlocaldescription() or to setremotedescription(). syntax rtcpeerconnection.onsignalingstatechange = errorhandler; value set this to a function which you provide that receives an event object as input; this contains the signalingstatechange event. this event object doesn't provide details about what changed, but you can examine the signalingstate property to determine what the new state is. you may also, as always, se...
... pc.onsignalingstatechange = function(event) { if (pc.signalingstate === "have-local-pranswer") { // setlocaldescription() has been called with an answer } }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.onsignalingstatechange' in ...
RTCPeerConnection.remoteDescription - Web APIs
is the value of rtcpeerconnection.pendingremotedescription if that property isn't null; otherwise, the value of rtcpeerconnection.currentremotedescription is returned. see pending and current descriptions in webrtc connectivity for details on this algorithm and why it's used. ...
...tion.currentremotedescription is returned. see pending and current descriptions in webrtc connectivity for details on this algorithm and why it's used. example this example looks at the remotedescription and displays an alert containing the rtcsessiondescription object's
type and sdp fields. var pc = new rtcpeerconnection(); … var sd = pc.remotedescription; if (sd) { alert("remote session:
type='" + sd.
type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no remote session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.remotedescription' in that specification. candidate recommendation initial specification. ...
RTCPeerConnectionIceEvent() - Web APIs
if null, the event indicates the end of candidate gathering. "url" (optional, default is null): the url of the stun or turn server which was used to gather the candidate. ...
... if null, the event indicates the end of candidate gathering. "url" (optional, default is null): the url of the stun or turn server which was used to gather the candidate. ...
RTCRtpCodecCapability - Web APIs
channels optional an unsigned integer value indicating the maximum number of channels supported by the codec; for example, a codec that supports only mono sound would have a value of 1; stereo codecs would have a 2, etc. clockrate an unsigned long integer specifying the codec's clock rate in hertz (hz). the iana maintains a list of codecs and their parameters, including their clock rates. mime
type a domstring indicating the codec's mime media
type and sub
type. see codecs used by webrtc for details about potential codecs that might be referenced here. sdpfmtpline optional a domstring giving the format specific parameters field from the a=fmtp line in the sdp which corresponds to the codec, if such a line exists. if there is no parameters field, this property is left out. description r...
...ight be referenced here. sdpfmtpline optional a domstring giving the format specific parameters field from the a=fmtp line in the sdp which corresponds to the codec, if such a line exists. if there is no parameters field, this property is left out. description rtcrtpcodeccapabilities describes the basic parameters for a single codec supported by the user's device. an array of objects of this
type is returned in the codecs property of the rtcrtpcapabilities object returned in response to a call to either of the static functions rtcrtpsender.getcapabilities() or rtcrtpreceiver.getcapabilities(). examples tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpcodeccapability' in that specificati...
RTCRtpEncodingParameters - Web APIs
n rtp sender's encodings; rtcrtpdecodingparameters is used to describe the configuration of an rtp receiver's encodings. properties active if true, the described encoding is currently actively being used. that is, for rtp senders, the encoding is currently being used to send data, while for receivers, the encoding is being used to decode received data. the default value is true. codecpayload
type when describing a codec for an rtcrtpsender, codecpayload
type is a single 8-bit byte (or octet) specifying the codec to use for sending the stream; the value matches one from the owning rtcrtpparameters object's codecs parameter. this value can only be set when creating the transceiver; after that, this value is read only. dtx only used for an rtcrtpsender whose kind is audio, this property in...
...cs parameter. this value can only be set when creating the transceiver; after that, this value is read only. dtx only used for an rtcrtpsender whose kind is audio, this property indicates whether or not to use discontinuous transmission (a feature by which a phone is turned off or the microphone muted automatically in the absence of voice activity). the value is taken from the enumerated string
type rtcdtxstatus. maxbitrate an unsigned long integer indicating the maximum number of bits per second to allow for this encoding. other parameters may further constrain the bit rate, such as the value of maxframerate or transport or physical network limitations. maxframerate a double-precision floating-point value specifying the maximum number of frames per second to allow for this encoding. pt...
RTCRtpReceiver.getCapabilities() static function - Web APIs
rtpreceiver.getcapabilities() returns an rtcrtpcapabilities object describing the codecs and capabilities supported by rtcrtpreceivers on the current device. you can, similarly, obtain the capabilities of rtcrtpsenders by calling the static function rtcrtpsender.getcapabilities(). syntax let rtpcapabilities = rtcrtpreceiver.getcapabilities(kind); parameters kind a domstring indicating the
type of media for which you wish to get the device's capability to receive. all browsers support the primary media kinds: audio and video. return value an rtcrtpcapabilities object stating what capabilities the browser has for receiving the specified media kind over an rtcpeerconnection. if the browser doesn't have any support for the given media kind, the returned value is null. description as a...
...pports receiving h.264 video on a webrtc connection. since rtcrtpreceiver.getcapabilities() actually only indicates probable support, attempting to receive h.264 video might still fail even after getting a positive response from this function. function canreceiveh264() { let capabilities = rtcrtpreceiver.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mime
type === "video/h264") { return true; } }); return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.getcapabilities()' in that specification. candidate recommendation ...
RTCRtpSendParameters.encodings - Web APIs
ings and parameters that describe and configure a single codec that could be used to encode the track. each object's properties are: active if true, the described encoding is currently actively being used. that is, for rtp senders, the encoding is currently being used to send data, while for receivers, the encoding is being used to decode received data. the default value is true. codecpayload
type when describing a codec for an rtcrtpsender, codecpayload
type is a single 8-bit byte (or octet) specifying the codec to use for sending the stream; the value matches one from the owning rtcrtpparameters object's codecs parameter. this value can only be set when creating the transceiver; after that, this value is read only. dtx only used for an rtcrtpsender whose kind is audio, this property in...
...cs parameter. this value can only be set when creating the transceiver; after that, this value is read only. dtx only used for an rtcrtpsender whose kind is audio, this property indicates whether or not to use discontinuous transmission (a feature by which a phone is turned off or the microphone muted automatically in the absence of voice activity). the value is taken from the enumerated string
type rtcdtxstatus. maxbitrate an unsigned long integer indicating the maximum number of bits per second to allow for this encoding. other parameters may further constrain the bit rate, such as the value of maxframerate or transport or physical network limitations. maxframerate a double-precision floating-point value specifying the maximum number of frames per second to allow for this encoding. pt...
RTCRtpSender.getCapabilities() static function - Web APIs
e static function rtcrtpsender.getcapabilities() returns an rtcrtpcapabilities object describing the codecs and capabilities supported by the rtcrtpsender. you can, similarly, obtain the capabilities of rtcrtpreceivers by calling the static function rtcrtpreceiver.getcapabilities(). syntax let rtpcapabilities = rtcrtpsender.getcapabilities(kind); parameters kind a domstring indicating the
type of media for which you wish to get the sender's capability to receive. all browsers support the primary media kinds: audio and video. return value an rtcrtpcapabilities object stating what capabilities the browser has for sending the specified media kind over an rtcpeerconnection. if the browser doesn't have any support for the given media kind, the returned value is null. description as a s...
...ting whether or not the device supports sending h.264 video on an rtcrtpsender. since rtcrtpsender.getcapabilities() actually only indicates probable support, h.264 support might still fail even after getting a positive response from this function. function cansendh264() { let capabilities = rtcrtpsender.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mime
type === "video/h264") { return true; } }); return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.getcapabilities()' in that specification. candidate recommendation ...
RTCRtpStreamStats.kind - Web APIs
the name was changed in the specification in february, 2018. see browser compatibility below to determine how this affects the browsers you're targeting. ...
... = rtcrtpstreamstats.kind; value a domstring whose value is "audio" if the track whose statistics are given by the rtcrtpstreamstats object contains audio, or "video" if the track contains video media. this string will always be the same as the one provided by the associated mediastreamtrack object's kind property. it will also match the statistics object's rtccodecstats.codec property's media
type. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats.kind' in that specification. candidate recommendation initial definition. ...
RTCSessionDescription() - Web APIs
nit dictionary, so you don't have to instantiate an rtcsessiondescription yourself. syntax sessiondescription = new rtcsessiondescription(rtcsessiondescriptioninit); values rtcsessiondescriptioninit optional an object providing the default values for the session description; the object conforms to the rtcsessiondescriptioninit dictionary. that dictionary has the following properties:
type required. a string which is a member of the rtcsdp
type enum; it must have one of the following values: this enum defines strings that describe the current state of the session description, as used in the
type property. the session description's
type will be specified using one of these values. value description answer the sdp contained in the sdp property is the d...
...iption object describes the initial proposal in an offer/answer exchange. the session negotiation process begins with an offer being sent from the caller to the callee. pranswer the session description object describes a provisional answer; that is, a response to a previous offer that is not the final answer. it is usually employed by legacy hardware. rollback this special
type with an empty session description is used to roll back to the previous stable state. sdp a string containing a sdp message describing the session. this value is an empty string ("") by default and may not be null. example this example uses the constructor to convert an sdp offer into an rtcsessiondescription object. this is no longer necessary, however; rtcpeerconnection.set...
RTCStats - Web APIs
stic are defined as dictionaries based on rtcstats. for example, statistics about a received rtp stream are represented by rtcreceivedrtpstreamstats. properties id a domstring which uniquely identifies the object which was inspected to produce this object based on rtcstats. timestamp a domhighrestimestamp object indicating the time at which the sample was taken for this statistics object. ...
...based on rtcstats. for example, statistics about a received rtp stream are represented by rtcreceivedrtpstreamstats. properties id a domstring which uniquely identifies the object which was inspected to produce this object based on rtcstats. timestamp a domhighrestimestamp object indicating the time at which the sample was taken for this statistics object.
type a domstring indicating the
type of statistics the object contains, taken from the enum
type rtcstats
type. the statistics
type hierarchy the various dictionaries that are used to define the contents of the objects that contain each of the various
types of statistics for webrtc are structured in such a way that they build upon the core rtcstats dictionary, each layer adding more relevant information. rtcstats is the foundat...
RadioNodeList.value - Web APIs
. if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. ...
...e radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. ...
Range.commonAncestorContainer - Web APIs
ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline. ...
... living standard no change. document object model (dom) level 2 traversal a...
Range.comparePoint() - Web APIs
syntax returnvalue = range.comparepoint(referencenode, offset) parameters referencenode the node to compare with the range. offset an integer greater than or equal to zero representing the offset inside the referencenode. ...
... syntax returnvalue = range.comparepoint(referencenode, offset) parameters referencenode the node to compare with the range. offset an integer greater than or equal to zero representing the offset inside the referencenode. ...
Range.endOffset - Web APIs
this property is read-only. to change the endoffset of a range, use one of the range.setend methods. ...
...this property is read-only. to change the endoffset of a range, use one of the range.setend methods. ...
Range.startOffset - Web APIs
to change the startoffset of a range, use the range.setstart method. ...
... to change the startoffset of a range, use the range.setstart method. ...
ReadableStream.getReader() - Web APIs
the getreader() method of the readablestream interface creates a reader and locks the stream to it. while the stream is locked, no other reader can be acquired until this one is released. syntax var reader = readablestream.getreader({mode}); parameters {mode} optional an object containing a property mode, which takes as its value a domstring specifying the
type of reader to create. values can be: "byob", which results in a readablestreambyobreader being created that can read readable byte streams (i.e. can handle "bring your own buffer" reading). undefined (or not specified at all — this is the default), which results in a readablestreamdefaultreader being created that can read individual chunks from a stream. return value a readablestreamdefaultreader or readablestream...
...ur own buffer" reading). undefined (or not specified at all — this is the default), which results in a readablestreamdefaultreader being created that can read individual chunks from a stream. return value a readablestreamdefaultreader or readablestreambyobreader object instance, depending on the mode value. exceptions rangeerror the provided mode value is not "byob" or undefined.
typeerror the stream you are trying to create a reader for is not a readablestream. examples in the following simple example, a previously-created custom readablestream is read using a readablestreamdefaultreader created using getreader(). (see our simple random stream example for the full code). each chunk is read sequentially and output to the ui, until the stream has finished being read, at whi...
RenderingContext - Web APIs
renderingcontext is a webidl
typedef which can refer to any one of the interfaces that represent a graphics rendering context within a <canvas> element: canvasrenderingcontext2d, webglrenderingcontext, or webgl2renderingcontext. by using the shorthand renderingcontext, methods and properties which can make use of any of these interfaces can be specified and written more easily; since <canvas> supports several rendering systems, it's helpful from a specification and browser implementation perspective to have a shorthand that means "one of these interfaces." as such, renderingcontext is an implementation detail, and isn't something web developers directly use. there is no renderingcontext interface, and there are no objects which implement
type renderingcontext. ...
...upports several rendering systems, it's helpful from a specification and browser implementation perspective to have a shorthand that means "one of these interfaces." as such, renderingcontext is an implementation detail, and isn't something web developers directly use. there is no renderingcontext interface, and there are no objects which implement
type renderingcontext. the primary use of this
type is the definition of the <canvas> element's htmlcanvaselement.getcontext() method, which returns a renderingcontext (meaning it returns any one of the rendering context
types). specifications specification status comment html living standardthe definition of 'renderingcontext' in that specification. living standard initial definition. ...
Report.body - Web APIs
the body read-only property of the report interface returns the body of the report, which is a reportbody object containing the detailed report information. syntax let reportbody = reportinstance.body returns a reportbody object containing the detailed report information. depending on what
type the report is, the object returned will actually be a deprecationreportbody, interventionreportbody, crashreportbody, or featurepolicyviolationreportbody. ...
...ance.body returns a reportbody object containing the detailed report information. depending on what
type the report is, the object returned will actually be a deprecationreportbody, interventionreportbody, crashreportbody, or featurepolicyviolationreportbody. these all inherit from the base reportbody class — study their reference pages for more information on what the particular report body
types contain. examples let options = {
types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { let firstreport = reports[0]; // log the first report's report body, i.e. a deprecationreportbody object console.log(firstreport.body); }, options); specifications specification status comment reporting apithe defini...
ReportingObserver() - Web APIs
report objects representing the reports collected in the observer's report queue. this is probably the most common way to retrieve the reports. observer: a reference to the same reportingobserver object, allowing for recursive report collection, etc. options optional an reportingobserveroptions object allowing you to set the options for creating the object. the available options are:
types: an array of strings representing the
types of report to be collected by this observer. available
types include deprecation, intervention, and crash (although this last
type usually isn't retrievable via a reportingobserver). buffered: a boolean that defines whether the reports that were generated before the observer was able to be created should be observable (true) or not (false). exam...
...epresenting the
types of report to be collected by this observer. available
types include deprecation, intervention, and crash (although this last
type usually isn't retrievable via a reportingobserver). buffered: a boolean that defines whether the reports that were generated before the observer was able to be created should be observable (true) or not (false). examples let options = {
types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); specifications specification status comment reporting apithe definition of 'reportingobserver()' in that specification. editor's draft ...
ReportingObserverOptions - Web APIs
the reportingobserveroptions dictionary of the reporting api allows options to be set in the constructor when creating a reportingobserver. properties
types an array of strings representing the
types of report to be collected by this observer. available
types include deprecation, intervention, and crash. buffered a boolean that defines whether the reports that were generated before the observer was able to be created should be observable (true) or not (false). ...
...or when creating a reportingobserver. properties
types an array of strings representing the
types of report to be collected by this observer. available
types include deprecation, intervention, and crash. buffered a boolean that defines whether the reports that were generated before the observer was able to be created should be observable (true) or not (false). examples let options = {
types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); specifications specification status comment reporting apithe definition of 'reportingobserveroptions' in that specification. editor's draft ...
ResizeObserver - Web APIs
thing to do with the viewport. we also provide a checkbox to turn the observer off and on. if it is turned off, the text will not change in response to the <div>'s width changing. ...
...rn the observer off and on. if it is turned off, the text will not change in response to the <div>'s width changing. ...
Response - Web APIs
s url list has more than one entry). response.status read only the status code of the response. (this will be 200 for a success). response.statustext read only the status message corresponding to the status code. (e.g., ok for 200). response.trailers a promise resolving to a headers object, associated with the response with response.headers for values of the http trailer header. response.
type read only the
type of the response (e.g., basic, cors). response.url read only the url of the response. response.usefinalurl a boolean indicating whether this is the final url of the response. body interface properties response implements body, so it also has the following properties available to it: body.body read only a simple getter exposing a readablestream of the body contents...
...amples in our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an <img> element. the fetch() call returns a promise, which resolves to the response object associated with the resource fetch operation. 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. const image = document.queryselector('.my-image'); fetch('flowers.jpg').then(function(response) { return response.blob(); }).then(function(blob) { const objecturl = url.createobjecturl(blob); image.src = objecturl; }); you can also use the response.response() constructor to create your own custom response object: const response = new response(); specifications specification ...
SVGAnimatedAngle - Web APIs
animval svgangle a read only svgangle representing the current animated value of the given attribute. ...
... animval svgangle a read only svgangle representing the current animated value of the given attribute. ...
SVGAnimatedBoolean - Web APIs
animval boolean if the given attribute or property is being animated, contains the current animated value of the attribute or property. ...
... animval boolean if the given attribute or property is being animated, contains the current animated value of the attribute or property. ...
SVGAnimatedInteger - Web APIs
animval long if the given attribute or property is being animated, contains the current animated value of the attribute or property. ...
... animval long if the given attribute or property is being animated, contains the current animated value of the attribute or property. ...
SVGAnimatedLength - Web APIs
animval svglength if the given attribute or property is being animated, contains the current animated value of the attribute or property. ...
... animval svglength if the given attribute or property is being animated, contains the current animated value of the attribute or property. ...
SVGAnimatedLengthList - Web APIs
animval svglengthlist a read only svglengthlist representing the current animated value of the given attribute. ...
... animval svglengthlist a read only svglengthlist representing the current animated value of the given attribute. ...
SVGAnimatedNumber - Web APIs
animval float if the given attribute or property is being animated, contains the current animated value of the attribute or property. ...
... animval float if the given attribute or property is being animated, contains the current animated value of the attribute or property. ...
SVGClipPathElement - Web APIs
baseline="middle">svgclippathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement. svgclippathelement.clippathunits read only an svganimatedenumeration corresponding to the clippathunits attribute of the given <clippath> element. takes one of the constants defined in svgunit
types. methods this interface doesn't implement any specific methods, but inherits methods from its parent, svgelement. specifications specification status comment css masking module level 1the definition of 'svgclippathelement' in that specification. candidate recommendation removed the inheritance from svgtests, svglangspace, svgexternalresourcesrequired, svgstylab...
...n't implement any specific methods, but inherits methods from its parent, svgelement. specifications specification status comment css masking module level 1the definition of 'svgclippathelement' in that specification. candidate recommendation removed the inheritance from svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, svgtransformable, and svgunit
types scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgclippathelement' in that specification. recommendation initial definition ...
SVGDocument - Web APIs
svg document interface when an "svg" element is embedded inline as a component of a document from another namespace, such as when an "svg" element is embedded inline within an xhtml document, then an svgdocument object will not exist; instead, the root object in the document object hierarchy will be a document object of a different
type, such as an htmldocument object. interface overview also implement none methods none properties domstring domain domstring referrer svgsvgelement rootelement domstring title domstring url ...
... referrer domstring returns the uri of the page that linked to this page. the value is an empty string if the user na...
SVGFEBlendElement - Web APIs
svg_feblend_mode_normal 1 corresponds to the value normal. svg_feblend_mode_multiply 2 corresponds to the value multiply. svg_feblend_mode_screen 3 corresponds to the value screen. svg_feblend_mode...
...ke-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">svgfeblendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_feblend_mode_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_feblend_mode_normal 1 corresponds to the value normal. svg_feblend_mode_multiply 2 corresponds to the value multiply. svg_feblend_mode_screen 3 corresponds to the value screen. svg_feblend_mode_darken 4 corresponds to...
SVGFEConvolveMatrixElement - Web APIs
svg_edgemode_duplicate 1 corresponds to the duplicate value. svg_edgemode_wrap 2 corresponds to the wrap value. svg_edgemode_none 3 corresponds to none value. properties this interface also inherits...
...dth="2px" /><text x="351" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_edgemode_duplicate 1 corresponds to the duplicate value. svg_edgemode_wrap 2 corresponds to the wrap value. svg_edgemode_none 3 corresponds to none value. properties this interface also inherits properties from its parent in...
SVGFEDisplacementMapElement - Web APIs
svg_channel_r 1 corresponds to the r value. svg_channel_g 2 corresponds to the g value. svg_channel_b 3 corresponds to the b value. svg_channel_a 4 corresponds to the a value. properti...
...dth="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedisplacementmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_channel_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_channel_r 1 corresponds to the r value. svg_channel_g 2 corresponds to the g value. svg_channel_b 3 corresponds to the b value. svg_channel_a 4 corresponds to the a value. properties this interface also inheri...
SVGFEGaussianBlurElement - Web APIs
svg_edgemode_duplicate 1 corresponds to the duplicate value. svg_edgemode_wrap 2 corresponds to the wrap value. svg_edgemode_none 3 corresponds to none value. properties this interface also inherits...
...width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblurelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_edgemode_duplicate 1 corresponds to the duplicate value. svg_edgemode_wrap 2 corresponds to the wrap value. svg_edgemode_none 3 corresponds to none value. properties this interface also inherits properties from its parent in...
SVGFEMorphologyElement - Web APIs
svg_morphology_operator_erode 1 corresponds to the erode value. svg_morphology_operator_dilate 2 corresponds to dilate value. properties this interface also inherits properties from its parent interface, svgelemen...
...x" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemorphologyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_morphology_operator_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_morphology_operator_erode 1 corresponds to the erode value. svg_morphology_operator_dilate 2 corresponds to dilate value. properties this interface also inherits properties from its parent interface, svgelement, and also implements propert...
SVGFilterElement - Web APIs
,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterelement.filterunits read only an svganimatedenumeration that corresponds to the filterunits attribute of the given <filter> element. takes one of the constants defined in svgunit
types. svgfilterelement.primitiveunits read only an svganimatedenumeration that corresponds to the primitiveunits attribute of the given <filter> element. takes one of the constants defined in svgunit
types. svgfilterelement.x read only an svganimatedlength that corresponds to the x attribute on the given <filter> element. svgfilterelement.y read only an svganimatedlength that corresponds to t...
...of the given <filter> element. methods svgfilterelement.setfilterres() sets the values of the filterres attribute. specifications specification status comment filter effects module level 1the definition of 'svgfilterelement' in that specification. working draft removed the inheritance from svglangspace, svgexternalresourcesrequired, svgstylable, and svgunit
types and removed the setfilterres() function scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfilterelement' in that specification. recommendation initial definition ...
SVGSVGElement - Web APIs
given <svg> element. svgsvgelement.y read only an svganimatedlength corresponding to the y attribute of the given <svg> element. svgsvgelement.width read only an svganimatedlength corresponding to the width attribute of the given <svg> element. svgsvgelement.height read only an svganimatedlength corresponding to the height attribute of the given <svg> element. svgsvgelement.contentscript
type an svganimatedlength corresponding to the contentscript
type attribute of the given <svg> element. svgsvgelement.contentstyle
type an svganimatedlength corresponding to the contentstyle
type attribute of the given <svg> element. svgsvgelement.viewport an svgrect containing the position and size of the viewport (implicit or explicit) that corresponds to the given <svg> element. when the browser ...
...enclosure() returns true if the rendered content of the given element is entirely contained within the supplied rectangle. each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in pointer-events processing. svgsvgelement.deselectall() unselects any selected objects, including any selections of text strings and
type-in bars. svgsvgelement.createsvgnumber() creates an svgnumber object outside of any document trees. the object is initialized to 0. svgsvgelement.createsvglength() creates an svglength object outside of any document trees. the object is initialized to 0 user units. svgsvgelement.createsvgangle() creates an svgangle object outside of any document trees. the object is initialized to a value o...
SVGScriptElement - Web APIs
a domexception is raised with the code no_modification_allowed_err on an attempt to change the value of a read only attribut. svgscriptelement.crossorigin read only a domstring corresponding to the crossorigin attribute of the given <script> element. methods this interface doesn't implement any specif...
...ght="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgscriptelement.
type read only a domstring corresponding to the
type attribute of the given <script> element. a domexception is raised with the code no_modification_allowed_err on an attempt to change the value of a read only attribut. svgscriptelement.crossorigin read only a domstring corresponding to the crossorigin attribute of the given <script> element. methods this interface doesn't implement any specific methods, but inherits methods from its parent i...
SVGStylable - Web APIs
d presentation attributes specified on them. interface overview also implement none methods cssvalue getpresentationattribute(in domstring name) properties readonly svganimatedstring classname readonly cssstyledeclaration style normative document svg 1.1 (2nd edition) properties name
type description classname svganimatedstring corresponds to attribute class on the given element. style cssstyledeclaration corresponds to attribute style on the given element. methods name & arguments return description getpresentationattribute(in domstring name) cssvalue returns the base (i.e., static) value of a given pr...
...e svganimatedstring corresponds to attribute class on the given element. style cssstyledeclaration corresponds to attribute style on the given element. methods name & arguments return description getpresentationattribute(in domstring name) cssvalue returns the base (i.e., static) value of a given presentation attribute as an object of
type cssvalue. the returned object is live; changes to the objects represent immediate changes to the objects to which the cssvalue is attached. 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. desktopmobilechromeedgefire...
SVGZoomAndPan - Web APIs
svg_zoomandpan_disable 1 corresponds to the value disable. svg_zoomandpan_magnify 2 corresponds to the value magnify. properties svgzoomandpan.zoomandpan an unsigned short representing the value of the zoomandp...
...4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgzoomandpan</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_zoomandpan_unknown 0 the
type is not one of predefined
types. it is invalid to attempt to define a new value of this
type or to attempt to switch an existing value to this
type. svg_zoomandpan_disable 1 corresponds to the value disable. svg_zoomandpan_magnify 2 corresponds to the value magnify. properties svgzoomandpan.zoomandpan an unsigned short representing the value of the zoomandpan attribute. methods this ...
Screen - Web APIs
ntationchange a handler for the orientationchange event. methods screen.lockorientation lock the screen orientation (only works in fullscreen or for installed apps) screen.unlockorientation unlock the screen orientation (only works in fullscreen or for installed apps) methods inherited from eventtarget: eventtarget.addeventlistener() registers an event handler of a specific event
type on the eventtarget. eventtarget.removeeventlistener() removes an event listener from the eventtarget. eventtarget.dispatchevent() dispatches an event to this eventtarget. additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event targets to implement onevent properties. see also webidl bindings. void seteventhandler(domstring t...
...vent listener from the eventtarget. eventtarget.dispatchevent() dispatches an event to this eventtarget. additional methods in mozilla chrome codebase mozilla includes a couple of extensions for use by js-implemented event targets to implement onevent properties. see also webidl bindings. void seteventhandler(domstring
type, eventhandler handler) eventhandler geteventhandler(domstring
type) example if (screen.pixeldepth < 8) { // use low-color version of page } else { // use regular, colorful page } specification specification status comment css object model (cssom) view modulethe definition of 'screen' in that specification. working draft initial definition. ...
ScriptProcessorNode.onaudioprocess - Web APIs
note: as of the august 29 2014 web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audio workers. the onaudioprocess event handler of the scriptprocessornode interface represents the eventhandler to be called for the audioprocess event that is dispatched to scriptprocessornode node
types. an event of
type audioprocessingevent will be dispatched to the event handler. syntax var audioctx = new audiocontext(); var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); scriptnode.onaudioprocess = function() { ... } example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) ...
...e = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.response
type = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingev...
Selection.setBaseAndExtent() - Web APIs
into the output paragraph at the very bottom of the html. ...
...fish</span><span>dog</span><span>cat</span><span>bird</span></p> <p>middle</p> <p class="two"><span>car</span><span>bike</span><span>boat</span><span>plane</span></p> </div> <div> <p> <label for="aoffset">anchor offset</label> <input id="aoffset" name="aoffset"
type="number" value="0"> </p> <p> <label for="foffset">focus offset</label> <input id="foffset" name="foffset"
type="number" value="0"> </p> <p><button>capture selection</button></p> </div> <p><strong>output</strong>: <span class="output"></span></p> the javascript looks like so: var one = document.queryselector('.one'); var two = document.queryselector('.two'); var aoffset = document.getelementbyid('aoffset'); var foffset = document.getelementbyid('foffset'); var button = document.queryselector('butt...
SensorErrorEvent.SensorErrorEvent() - Web APIs
options optional currently only one option is supported: error: an instance of domexception. ...
... options optional currently only one option is supported: error: an instance of domexception. ...
ServiceWorkerGlobalScope: notificationclick event - Web APIs
handler onnotificationclick examples you can use the notificationclick event in an addeventlistener method: self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({
type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or use the onnotificationclick event handler property: self.onnotificationclick = function(event) { con...
...} if (clients.openwindow) return clients.openwindow('/'); })); }); or use the onnotificationclick event handler property: self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({
type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status notifications apithe definition of 'onnotifica...
SharedWorker() - Web APIs
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 debugging purposes. options optional an object containing option properties that can set when creating the object instance. available properties are as follows:
type: a domstring specifying the
type of worker to create. the value can be classic or module. if not specified, the default used is classic. credentials: a domstring specifying the
type of credentials to use for the worker. the value can be omit, same-origin, or include. if not specified, or if
type is classic, the default used is omit (no credentials required). name: a domstring specifying an id...
...cifying an identifying name for the sharedworkerglobalscope representing the scope of the worker, which is mainly useful for debugging purposes. return value the created worker. exceptions a securityerror is raised if the document is not allowed to start workers, for example if the url has an invalid syntax or if the same-origin policy is violated. a networkerror is raised if the mime
type of the worker script is incorrect. it should always be text/javascript. a syntaxerror is raised if aurl cannot be parsed. examples the following code snippet shows creation of a sharedworker object using the sharedworker() constructor and subsequent usage of the object: var myworker = new sharedworker('worker.js'); myworker.port.start(); first.onchange = function() { myworker.port.postme...
SpeechSynthesis.getVoices() - Web APIs
oice objects representing all the available voices on the current device. syntax speechsynthesisinstance.getvoices(); parameters none. return value a list (array) of speechsynthesisvoice objects. note: the spec wrongly lists this method as returning as a speechsynthesisvoicelist object, but this was in fact removed from the spec. ...
... draft initial definition ...
StorageQuota - Web APIs
methods storagequota.queryinfo returns a storageinfo object containting the current data usage and available quota information for the application. ...
... methods storagequota.queryinfo returns a storageinfo object containting the current data usage and available quota information for the application. ...
Storage API - Web APIs
orage units the site storage system described by the storage standard and interacted with using the storage api consists of a single site storage unit for each origin. in essence, every web site or web application has its own storage unit into which its data gets placed. the diagram below shows a site storage pool with three storage units within, showing how storage units can have different data
types stored within and may have different quotas (maximum storage limits). origin 1 has some web storage data as well as some indexeddb data, but also has some free space left; its current usage hasn't yet reached its quota. origin 2 has no data stored in it yet; it's just an empty box waiting for content. this origin, however, has a lower quota than the other two do. it may be a less-visited s...
...persistence and clearing if the site or app has the "persistent-storage" feature permission, it can use the storagemanager.persist() method to request that its box be made persistent. it's also possible for the user agent to decide to make the site's storage unit persistent due to usage characteristics or other metrics. the "persistent-storage" feature's permission-related flags, algorithms, and
types are all set to the standard defaults for a permission, except that the permission state must be the same across the entire origin, and that if the permission state isn't "granted" (meaning that for whatever reason, access to the persistent storage feature was denied), the origin's site storage unit's box mode is always "best-effort". note: see using the permissions api for further details abou...
StylePropertyMap - Web APIs
the stylepropertymap interface of the the css
typed object model api provides a representation of a css declaration block that is an alternative to cssstyledeclaration. <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/stylepropertymap" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">stylepropertyma...
...) adds a new css declaration to the stylepropertymap with the given property and value. stylepropertymap.clear() removes all declarations in the stylepropertymap. stylepropertymap.delete() removes the css declaration with the given property. stylepropertymap.set() changes the css declaration with the given property. specifications specification status comment css
typed om level 1the definition of 'stylepropertymap' in that specification. working draft initial definition. ...
StylePropertyMapReadOnly - Web APIs
the stylepropertymapreadonly interface of the the css
typed object model api provides a read-only representation 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 proto
type chain as well). stylepropertymapreadonly.foreach() executes a provided function once for each element of stylepropertymapreadonly. styl...
... working draft initial definition. ...
SubmitEvent() - Web APIs
for submitevent, this is always submit. eventinitdict optional an optional dictionary of initial values for the event's properties. return value a submitevent object configured using the given inputs. ...
...for submitevent, this is always submit. eventinitdict optional an optional dictionary of initial values for the event's properties. return value a submitevent object configured using the given inputs. ...
SubmitEvent.submitter - Web APIs
the read-only submitter property found on the submitevent interface specifies the submit button or other element that was invoked to cause the form to be submitted. syntax let submitter = submitevent.submitter; value an element, indicating the element that sent the submit event to the form. while this is often an <input> element whose
type or a <button> whose
type is submit, it could be some other element which has initiated a submission process. if the submission was not triggered by a button of some kind, the value of submitter is null. examples in this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors. ...
...y the payment processors. each of the submit elements' id is used to identify which payment processor the button corresponds to. let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment
type was selected. please try again.", "ok"); } }); the handler id is obtained by using the submit event's submitter property to get the submit button, from which we then get the id. with that in hand, we can call a processorder() function to handle the order, passing along the form and the handler id. specifications specification status comment html living standardt...
SubtleCrypto.generateKey() - Web APIs
for rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep: pass an rsahashedkeygenparams object. ...
...riving bits. wrapkey: the key may be used to wrap a key. unwrapkey: the key may be used to unwrap a key. return value result is a promise that fulfills with a cryptokey (for symmetric algorithms) or a cryptokeypair (for public-key algorithms). exceptions the promise is rejected when the following exception is encountered: syntaxerror raised when the result is a cryptokey of
type secret or private but keyusages is empty. syntaxerror raised when the result is a cryptokeypair and its privatekey.usages attribute is empty. examples note: you can try the working examples on github. rsa key pair generation this code generates an rsa-oaep encryption key pair. see the complete code on github. let keypair = window.crypto.subtle.generatekey( { name: "rsa-oaep", ...
SubtleCrypto.importKey() - Web APIs
details. syntax const result = crypto.subtle.importkey( 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: subjectpublickeyinfo format. jwk: json web key format. keydata is an arraybuffer, a
typedarray, a dataview, or a jsonwebkey 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 eckeyimportparams object. for hmac: pass an hmacimportparams object. for...
...key may be used in deriving bits. wrapkey: the key may be used to wrap a key. unwrapkey: the key may be used to unwrap a key. return value result is a promise that fulfills with the imported key as a cryptokey object. exceptions the promise is rejected when one of the following exceptions is encountered: syntaxerror raised when keyusages is empty but the unwrapped key is of
type secret or private.
typeerror raised when trying to use an invalid format or if the keydata is not suited for that format. supported formats this api supports four different key import/export formats: raw, pkcs #8, subjectpublickeyinfo, and json web key. raw you can use this format to import or export aes or hmac secret keys, or elliptic curve public keys. in this format the key is supplie...
SubtleCrypto.unwrapKey() - Web APIs
he exported key, and any extra parameters as required: to use rsa-oaep, pass an rsaoaepparams object. to use aes-ctr, pass an aesctrparams object. to use aes-cbc, pass an aescbcparams object. to use aes-gcm, pass an aesgcmparams object. to use aes-kw, pass the string "aes-kw" or an object of the form { "name": "aes-kw }. unwrappedkeyalgo is a dictionary object defining the
type of key to unwrap and providing extra algorithm-specific parameters as required. for rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep: pass an rsahashedimportparams object. for ecdsa or ecdh: pass an eckeyimportparams object. for hmac: pass an hmacimportparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass the string identifying the algorithm or an object of the form { "name": algori...
...owing exceptions is encountered: invalidaccesserror raised when the unwrapping key is not a key for the requested unwrap algorithm or if the cryptokey.usages value of that key doesn't contain unwrap. notsupported raised when trying to use an algorithm that is either unknown or isn't suitable for encryption or wrapping. syntaxerror raised when keyusages is empty but the unwrapped key is of
type secret or private.
typeerror raised when trying to use an invalid format. supported algorithms the unwrapkey() method supports the same algorithms as the wrapkey() method. examples note: you can try the working examples on github. unwrapping a "raw" key in this example we unwrap an aes-gcm symmetric key. the key was exported in "raw" format and encrypted using the aes-kw algorithm, wit...
TaskAttributionTiming - Web APIs
taskattributiontiming.containersrc read only returns the container's src attribute. taskattributiontiming.containerid read only returns the container's id attribute. taskattributiontiming.containername read only returns the container's name attribute. specifications specification status co...
... taskattributiontiming.containersrc read only returns the container's src attribute. taskattributiontiming.containerid read only returns the container's id attribute. taskattributiontiming.containername read only returns the container's name attribute. specifications specification status comment long tasks api...
TimeEvent - Web APIs
this m...
...161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the
type of the event. for this event
type, indicates the repeat number for the animation. timeevent.view read only is a windowproxy that identifies the window from which the event was generated. methods inittimeevent(domstring
typearg, abstractview viewarg, long detailarg) the inittimeevent method is used to initialize the value of a timeevent created through the documentevent interface. this method may only be called before th...
Multi-touch interaction - Web APIs
; border: 1px solid black; } #target4 { background: white; border: 1px solid black; } </style> global state tpcache is used to cache touch points for processing outside of the event where they were fired. // log events flag var logevents = false; // touch point cache var tpcache = new array(); register event handlers event handlers are registered for all four touch event
types. the touchend and touchcancel event
types use the same handler. function set_handlers(name) { // install event handlers for the given element var el=document.getelementbyid(name); el.ontouchstart = start_handler; el.ontouchmove = move_handler; // use same handler for touchcancel and touchend el.ontouchcancel = end_handler; el.ontouchend = end_handler; } function init() { set_handlers("...
...border to dashed to give a clear visual // indication the element received a move event. ev.target.style.border = "dashed"; // check this event for 2-touch move/pinch/zoom gesture handle_pinch_zoom(ev); } touch end handler the touchend handler restores the event target's background color back to its original color. function end_handler(ev) { ev.preventdefault(); if (logevents) log(ev.
type, ev, false); if (ev.targettouches.length == 0) { // restore background and border to original values ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; } } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and clear the log. <div id="target1"> tap, hold or swipe me 1</div> <div id="targe...
TrackEvent.track - Web APIs
this identifies the track to which the event applies. ...
...this identifies the track to which the event applies. ...
TransformStream - Web APIs
ble end of a transformstream. transformstream.writable read only the writable end of a transformstream. methods none examples anything-to-uint8array stream in the following example, a transform stream passes through all chunks it receives as uint8array values. const transformcontent = { start() {}, // required. ...
...nsform(chunk, controller) { chunk = await chunk switch (
typeof chunk) { case 'object': // just say the stream is done i guess if (chunk === null) controller.terminate() else if (arraybuffer.isview(chunk)) controller.enqueue(new uint8array(chunk.buffer, chunk.byteoffset, chunk.bytelength)) else if (array.isarray(chunk) && chunk.every(value =>
typeof value === 'number')) controller.enqueue(new uint8array(chunk)) else if ('function' ===
typeof chunk.valueof && chunk.valueof() !== chunk) this.transform(chunk.valueof(), controller) // hack else if ('tojson' in chunk) this.transform(json.stringify(chunk), controller) break case 'symbol': controller.error("cannot send a symbol as a chunk ...
TreeWalker - Web APIs
nt subtree and a position within them. a treewalker can be created using the document.createtreewalker() method. properties this interface doesn't inherit any property. treewalker.root read only returns a node representing the root node as specified when the treewalker was created. treewalker.whattoshow read only returns an unsigned long being a bitmask made of constants describing the
types of node that must be presented. non-matching nodes are skipped, but their children may be included, if relevant. the possible values are: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningfu...
...do not appear when traversing over the document tree. nodefilter.show_cdata_section 8 shows cdatasection nodes. nodefilter.show_comment 128 shows comment nodes. nodefilter.show_document 256 shows document nodes. nodefilter.show_document_fragment 1024 shows documentfragment nodes. nodefilter.show_document_
type 512 shows document
type nodes. nodefilter.show_element 1 shows element nodes. nodefilter.show_entity 32 shows entity nodes. this is meaningful only when creating a treewalker with an entity node as its root; in this case, it means that the entity node will appear in the first position of the traversal. since entities are not part of the document tr...
UIEvent.initUIEvent() - Web APIs
nt() method. this method must be called to set the event before it is dispatched, using eventtarget.dispatchevent(). once dispatched, it doesn't do anything anymore. do not use this method anymore as it is deprecated. instead use specific event constructors, like uievent(). the page on creating and triggering events gives more information about the way to use these. syntax event.inituievent(
type, canbubble, cancelable, view, detail) parameters
type is a domstring defining the
type of event. canbubble is a boolean deciding whether the event should bubble up through the event chain or not. once set, the read-only property event.bubbles will give its value. cancelable is a boolean defining whether the event can be canceled. once set, the read-only property event.cancelable will gi...
...ble up through the event chain or not. once set, the read-only property event.bubbles will give its value. cancelable is a boolean defining whether the event can be canceled. once set, the read-only property event.cancelable will give its value. view is the windowproxy associated with the event. detail is an unsigned long specifying some detail information about the event, depending on the
type of event. for mouse events, it indicates how many times the mouse has been clicked on a given screen location. example var e = document.createevent("uievent"); // creates a click event that bubbles, can be cancelled, // and with its view and detail property initialized to window and 1, // respectively e.inituievent("click", true, true, window, 1); specifications specification st...
UIEvent - Web APIs
a:hover text { fill: #0095dd; pointer-events: all;} constructors uievent() creates 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 even...
...cations specification status comment inputdevicecapabilities draft added sourcecapabilities property. ui events working draft extend dom3 document object model (dom) level 3 events specificationthe definition of 'uievent' in that specification. obsolete added the uievent() constructor, deprecated the inituievent() method and changed the
type of view from abstractview to windowproxy. document object model (dom) level 2 events specificationthe definition of 'uievent' in that specification. obsolete initial definition ...
USBDevice.controlTransferOut() - Web APIs
the controltransferout() method of the usbdevice interface returns a promise that resolves with a usbouttransferresult when a command or status operation has been transmitted to the usb device. syntax var promise = usbdevice.controltransferout(setup, data) parameters setup an object that sets options for . ...
...ng whether the tranfer is "standard" (common to all usb devices) "class" (common to an industry-standard class of devices) or "vendor". recipient: specifices the target of the transfer on the device, one of "device", "interface", "endpoint", or "other". request: a vendor-specific command. value: vender-specific request parameters. index: the interface number of the recipient. data a
typedarray containing the data that will be transfered to the device. not all commands require data; some commands can send data just through the value parameter. check with your device to see what the specific request requires. return value a promise that resolves with a usbouttransferresult. specifications specification status comment webusbthe definition of 'controltran...
VideoTrackList: change event - Web APIs
track is made active or inactive, for example by changing the track's selected property. ...
...r the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onchange = (event) => { console.log(`'${event.
type}' event fired`); }; // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); specifications specification status html living standardthe definition of 'change' ...
WakeLock.request() - Web APIs
prevents devices from dimming or locking the screen. return value a promise that resolves with a wakelocksentinel object. ...
...prevents devices from dimming or locking the screen. return value a promise that resolves with a wakelocksentinel object. ...
WebGLRenderingContext.bufferData() - Web APIs
form feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. size a glsizeiptr setting the size in bytes of the buffer object's data store. srcdata optional an arraybuffer, sharedarraybuffer or one of the arraybufferview
typed array
types that will be copied into the data store. if null, a data store is still created, but the content is uninitialized and undefined. usage a glenum specifying the intended usage pattern of the data store for optimization purposes. possible values: gl.static_draw: the contents are intended to be specified once by the application, and used many times as the source for webgl drawing a...
...var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, 1024, gl.static_draw); getting buffer information to check the current buffer usage and buffer size, use the webglrenderingcontext.getbufferparameter() method. gl.getbufferparameter(gl.array_buffer, gl.buffer_size); gl.getbufferparameter(gl.array_buffer, gl.buffer_usage); getting size of a
typed array to calculate size parameter for a
typed array. var dataarray = new float32array([1, 2, 3, 4]); var sizeinbytes = dataarray.length * dataarray.bytes_per_element; specifications specification status comment webgl 1.0the definition of 'bufferdata' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glbufferdata'...
WebGLRenderingContext.checkFramebufferStatus() - Web APIs
destination for drawing, rendering, clearing, and writing operations. gl.read_framebuffer: used as a source for reading operations. return value a glenum indicating the completeness status of the framebuffer or 0 if an error occurs. possible enum return values: gl.framebuffer_complete: the framebuffer is ready to display. gl.framebuffer_incomplete_attachment: the attachment
types are mismatched or not all framebuffer attachment points are framebuffer attachment complete. gl.framebuffer_incomplete_missing_attachment: there is no attachment. gl.framebuffer_incomplete_dimensions: height and width of the attachment are not the same. gl.framebuffer_unsupported: the format of the attachment is not supported or if depth and stencil attachments are not the same renderbuffer. ...
...samples are different among attached renderbuffers, or are non-zero if the attached images are a mix of renderbuffers and textures. when using the ovr_multiview2 extension, the following value can be returned additionally: ext.framebuffer_incomplete_view_targets_ovr: if baseviewindex is not the same for all framebuffer attachment points where the value of framebuffer_attachment_object_
type is not none, the framebuffer is considered incomplete. examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var framebuffer = gl.createframebuffer(); // ... gl.checkframebufferstatus(gl.framebuffer); specifications specification status comment webgl 1.0the definition of 'checkframebufferstatus' in that specification. ...
WebGLRenderingContext.getActiveAttrib() - Web APIs
it is generally used when querying unknown attributes either for debugging or generic library creation. syntax webglactiveinfo gl.getactiveattrib(program,index); parameters program a webglprogram containing the vertex attribute. index a gluint specifying the index of the vertex attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.active_attributes). return value a webglactiveinfo object. ...
...fying the index of the vertex attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.active_attributes). return value a webglactiveinfo object. examples const numattribs = gl.getprogramparameter(program, gl.active_attributes); for (let i = 0; i < numattribs; ++i) { const info = gl.getactiveattrib(program, i); console.log('name:', info.name, '
type:', info.
type, 'size:', info.size); } specifications specification status comment webgl 1.0the definition of 'getactiveattrib' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glgetactiveattrib' in that specification. standard man page of the opengl api. ...
WebGLRenderingContext.getShaderParameter() - Web APIs
derparameter(shader, pname); parameters shader a webglshader to get parameter information from. pname a glenum specifying the information to query. possible values: gl.delete_status: returns a glboolean indicating whether or not the shader is flagged for deletion. gl.compile_status: returns a glboolean indicating whether or not the last shader compilation was successful. ...
... recommendation initial definition. ...
WebGLRenderingContext.getShaderPrecisionFormat() - Web APIs
the webglrenderingcontext.getshaderprecisionformat() method of the webgl api returns a new webglshaderprecisionformat object describing the range and precision for the specified shader numeric format. syntax webglshaderprecisionformat gl.getshaderprecisionformat(shader
type, precision
type); parameters shader
type either a gl.fragment_shader or a gl.vertex_shader. precision
type a precision
type value. either gl.low_float, gl.medium_float, gl.high_float, gl.low_int, gl.medium_int, or gl.high_int. return value a webglshaderprecisionformat object or null, if an error occurs. exceptions gl.invalid_enum if the shader or precision
types aren't recognized. gl.invalid_operation if the shader compiler isn't supported. examples the following code gets the precision format of a gl.vert...
...at, gl.high_float, gl.low_int, gl.medium_int, or gl.high_int. return value a webglshaderprecisionformat object or null, if an error occurs. exceptions gl.invalid_enum if the shader or precision
types aren't recognized. gl.invalid_operation if the shader compiler isn't supported. examples the following code gets the precision format of a gl.vertex_shader with a gl.medium_float precision
type. var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float); // webglshaderprecisionformat { rangemin: 127, rangemax: 127, precision: 23 } specifications specification status comment webgl 1.0the definition of 'getshaderprecisionformat' in that specification. recommendation ...
WebGLRenderingContext.getVertexAttrib() - Web APIs
enabled: returns a glboolean that is true if the vertex attribute is enabled at this index. otherwise false. gl.vertex_attrib_array_size: returns a glint indicating the size of an element of the vertex array. gl.vertex_attrib_array_stride: returns a glint indicating the number of bytes between successive elements in the array. 0 means that the elements are sequential. gl.vertex_attrib_array_
type: returns a glenum representing the array
type. one of gl.byte, gl.unsigned_byte, gl.short, gl.unsigned_short, gl.float. gl.vertex_attrib_array_normalized: returns a glboolean that is true if fixed-point data
types are normalized for the vertex attribute array at the given index. gl.current_vertex_attrib: returns a float32array (with 4 elements) representing the ...
... gl.vertex_attrib_array_divisor: returns a glint describing the frequency divisor used for instanced rendering. when using the angle_instanced_arrays extension: ext.vertex_attrib_array_divisor_angle: returns a glint describing the frequency divisor used for instanced rendering. ...
WebGLRenderingContext.pixelStorei() - Web APIs
ethod of the webgl api specifies the pixel storage modes. syntax void gl.pixelstorei(pname, param); parameters pname a glenum specifying which parameter to set. see below for possible values. param a glint specifying a value to set the pname parameter to. see below for possible values. return value none. pixel storage parameters parameter name (for pname) description
type default value allowed values (for param) specified in gl.pack_alignment packing of pixel data into memory glint 4 1, 2, 4, 8 opengl es 2.0 gl.unpack_alignment unpacking of pixel data from memory. glint 4 1, 2, 4, 8 opengl es 2.0 gl.unpack_flip_y_webgl flips the source data along its vertical axis if true. glboolean fal...
...annel into the other color channels glboolean false true, false webgl gl.unpack_colorspace_conversion_webgl default color space conversion or no color space conversion. glenum gl.browser_default_webgl gl.browser_default_webgl, gl.none webgl when using a webgl 2 context, the following values are available additionally: constant description
type default value allowed values (for param) specified in gl.pack_row_length number of pixels in a row. glint 0 0 to infinity opengl es 3.0 gl.pack_skip_pixels number of pixel locations skipped before the first pixel is written into memory. glint 0 0 to infinity opengl es 3.0 gl.pack_skip_rows number of rows of pixel locations s...
WebGLShader - Web APIs
the webglshader is part of the webgl api and can either be a vertex or a fragment shader. a webglprogram requires both
types of shaders. description to create a webglshader use webglrenderingcontext.createshader, then hook up the glsl source code using webglrenderingcontext.shadersource(), and finally invoke webglrenderingcontext.compileshader() to finish and compile the shader. at this point the webglshader is still not in a usable form and must still be attached to a webglprogram. ...
...aders. description to create a webglshader use webglrenderingcontext.createshader, then hook up the glsl source code using webglrenderingcontext.shadersource(), and finally invoke webglrenderingcontext.compileshader() to finish and compile the shader. at this point the webglshader is still not in a usable form and must still be attached to a webglprogram. function createshader (gl, sourcecode,
type) { // compiles either a shader of
type gl.vertex_shader or gl.fragment_shader var shader = gl.createshader(
type ); gl.shadersource( shader, sourcecode ); gl.compileshader( shader ); if ( !gl.getshaderparameter(shader, gl.compile_status) ) { var info = gl.getshaderinfolog( shader ); throw 'could not compile webgl program. \n\n' + info; } return shader; } see webglprogram ...
Hello GLSL - Web APIs
ry simple first shader program. ...
...align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script
type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script
type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.
type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.query...
Hello vertex attributes - Web APIs
on the canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script
type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script
type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use stric...
...vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script
type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.
type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.sh...
Creating 3D objects using WebGL - Web APIs
1.0, -1.0, 1.0, -1.0, ]; since we've added a z-component to our vertices, we need to update the numcomponents of our vertexposition attribute to 3. // tell webgl how to pull out the positions from the position // buffer into the vertexposition attribute { const numcomponents = 3; ... gl.vertexattribpointer( programinfo.attriblocations.vertexposition, numcomponents,
type, normalize, stride, offset); gl.enablevertexattribarray( programinfo.attriblocations.vertexposition); } define the vertices' colors we also need to build an array of colors for each of the 24 vertices. this code starts by defining a color for each face, then uses a loop to assemble an array of all the colors for each of the vertices. const facecolors = [ [1.0, ...
...ays. thus the cube is described as a collection of 12 triangles. drawing the cube next we need to add code to our drawscene() function to draw using the cube's index buffer, adding new gl.bindbuffer() and gl.drawelements() calls: // tell webgl which indices to use to index the vertices gl.bindbuffer(gl.element_array_buffer, buffers.indices); ... { const vertexcount = 36; const
type = gl.unsigned_short; const offset = 0; gl.drawelements(gl.triangles, vertexcount,
type, offset); } since each face of our cube is comprised of two triangles, there are 6 vertices per side, or 36 total vertices in the cube, even though many of them are duplicates. finally, let's replace our variable squarerotation by cuberotation and add a second rotation around the x axis: mat4.rot...
Using shaders to apply color in WebGL - Web APIs
l.getattriblocation(shaderprogram, 'avertexposition'), vertexcolor: gl.getattriblocation(shaderprogram, 'avertexcolor'), }, ... then, drawscene() can have the following added to it so it actually uses these colors when drawing the square: // tell webgl how to pull out the colors from the color buffer // into the vertexcolor attribute. ...
...are: // tell webgl how to pull out the colors from the color buffer // into the vertexcolor attribute. ...
Writing a WebSocket server in C# - Web APIs
2 (bit 2) rsv3 (bit 3) opcode (bit 4:7) 1 0 0 0 0x1=0001 fin bit: this bit indicates whether the full message has been sent from the client. messages may be sent in frames, but for now we will keep things simple. rsv1, rsv2, rsv3: these bits must be 0 unless an extension is negotiated which supplies a nonzero value to them. opcode: these bits describe the
type of message received. opcode 0x1 means this is a text message. full list of opcodes the second byte, which currently has a value of 131, is another bitfield that breaks down as such: mask (bit 0) payload length (bit 1:7) 1 0x83=0000011 mask bit: defines whether the "payload data" is masked. if set to 1, a masking key is present in masking-key, and this is u...
...(int i = 0; i < msglen; ++i) decoded[i] = (byte)(bytes[offset + i] ^ masks[i % 4]); string text = encoding.utf8.getstring(decoded); console.writeline("{0}", text); } else console.writeline("mask bit not set"); console.writeline(); } } } } client.html <!doc
type html> <style> textarea { vertical-align: bottom; } #output { overflow: auto; } #output > p { overflow-wrap: break-word; } #output span { color: blue; } #output span.error { color: red; } </style> <h2>websocket test</h2> <textarea cols=60 rows=6></textarea> <button>send</button> <div id=output></div> <script> // http://www.websocket.org/echo.html var button = document.
Writing WebSocket servers - Web APIs
he same data as your local copy, but it is sent differently. that's what an extension does. websockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format. extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec. ...
...mat. extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec. todo subprotocols think of a subprotocol as a custom xml schema or doc
type declaration. you're still using xml and its syntax, but you're additionally restricted by a structure you agreed on. websocket subprotocols are just like that. they do not introduce anything fancy, they just establish structure. like a doc
type or schema, both parties must agree on the subprotocol; unlike a doc
type or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client. subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec. a client has to ask for a specific subprotocol. to do so, it will send something like this as part of the original handshake: get /chat ...
Rendering and the WebXR frame animation callback - Web APIs
er control inputs there are three methods by which users might provide input while using a webxr application. first, webxr supports directly handling inputs from the controllers which are integrated with the xr hardware itself. these input sources 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 di...
...e may be objects and structures in motion. in a sports game, there may be a ball arcing through the air, its movement needing to be simulated. in racing games there may be cars or other vehicles, with moving parts to animate including the wheels. if there's water in the scene, it needs ripples or waves to look realistic. parts of structures may be moving, such as doors, walls and floors (for some
types of games), and so forth. another common source of motion is the player themself. after interpreting inputs from the controls (both xr-affliated and otherwise), you need to apply those changes to the scene in order to simulate the user's movement. see the article movement, orientation, and motion for details and a thorough example of how this works. next steps once you've got your renderer wri...
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
sition and orientation of the input's grip space to use the world's coordinate system, then generates the corresponding xrpose, storing it in controlpose. you can then apply controlpose's transform to the vertices in the object model representing the controller to calculate the webgl coordinates to use when rendering the controller's representation to the framebuffer. viewer poses a specialized
type of pose, the viewer pose, is the pose that represents the perspective of the viewer of the scene. a viewer pose is represented by webxr's xrviewerpose interface. when rendering a frame, you'll use the viewer pose to determine the position and facing direction of the viewer in order to place the virtual camera and render the scene. the only way to obtain a pose that adapts positional information ...
...ransform({ x: 0.5, y: 0.5, z: 0.5, w: 1.0 }); arefspace = arefspace.getoffsetreferencespace(halfmetertransform); this replaces the existing reference space arefspace with one whose coordinates and orientation have had the transform halfmetertransform applied. with no orientation data included in the transform, the orientation of arefspace is unaffected. converting between webxr session
types another common reason you may need to convert positional information from one reference space to another is when it's necessary to change the session
type from inline to immersive-vr or back. this commonly happens when your user interface provides a way to preview the scene inline within the context of a web page, with a button or other control to switch to immersive mode. since most users wou...
Web Authentication API - Web APIs
g. // sample arguments for registration var createcredentialdefaultargs = { publickey: { // relying party (a.k.a. - service): rp: { name: "acme" }, // user: user: { id: new uint8array(16), name: "john.p.smith@example.com", displayname: "john p. ...
...reate a new credential navigator.credentials.create(createcredentialdefaultargs) .then((cred) => { console.log("new credential", cred); // normally the credential ids available for an account would come from a server // but we can just copy them from above... var idlist = [{ id: cred.rawid, transports: ["usb", "nfc", "ble"],
type: "public-key" }]; getcredentialdefaultargs.publickey.allowcredentials = idlist; return navigator.credentials.get(getcredentialdefaultargs); }) .then((assertion) => { console.log("assertion", assertion); }) .catch((err) => { console.log("error", err); }); mozilla demo website and its source code. google demo website and its source co...
Using the Web Storage API - Web APIs
storage object with a quota of zero, effectively making it unusable. conversely, we might get a legitimate quotaexceedederror, which means that we've used up all available storage space, but storage is actually available. our feature detection should take these scenarios into account. ...
...nusable. conversely, we might get a legitimate quotaexceedederror, which means that we've used up all available storage space, but storage is actually available. our feature detection should take these scenarios into account. ...
The structured clone algorithm - Web APIs
wise throws a data_clone_err exception. certain object properties are not preserved: the lastindex property of regexp objects is not preserved. property descriptors, setters, getters, and similar metadata-like features are not duplicated. for example, if an object is marked readonly with a property descriptor, it will be read/write in the duplicate, since that's the default. the proto
type chain is not walked or duplicated. note: native error
types can be cloned in chrome, and firefox is working on it. supported
types object
type notes all primitive
types however, not symbols. boolean objects string objects date regexp lastindex is not preserved. blob file fi...
... imagebitmap imagedata array object only plain objects (e.g. ...
Window.captureEvents() - Web APIs
the window.captureevents() method registers the window to capture all events of the specified
type. syntax window.captureevents(event
type) event
type 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 <!doc
type 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>click...
...body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (such as clicking buttons or shifting focus away from the current document) generally pass through the high-level window and document objects first before arriving at the object that initiated the event. when you call the captureevents() method on the window, events 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...
Window.content - Web APIs
lities between implementations and the behavior may change in the future. note: since firefox 57 (initially nightly-only), both the content and _content variants are only available to chrome (privileged) code, and not available to the web anymore. returns a window object for the primary content window. this is useful in xul windows that have a <browser> (or tabbrowser or <iframe>) with
type="content-primary" attribute on it — the most famous example is firefox main window, browser.xul. in such cases, content returns a reference to the window object for the document currently displayed in the browser. it is a shortcut for browserref.contentwindow. in unprivileged content (webpages), content is normally equivalent to top (except in the case of a webpage loaded in a sidebar, content...
... to top (except in the case of a webpage loaded in a sidebar, content still refers to the window of the currently selected tab). note: some examples use _content instead of content. the former has been deprecated for a long time, and you should use content in any new code. syntax var windowobject = window.content; example executing the following code in a chrome xul window with a <browser
type="content-primary"/> element in it draws a red border around the first div on the page currently displayed in the browser: content.document.getelementsbytagname("div")[0].style.border = "solid red 1px"; specification none. see also working with windows in chrome code when accessing content documents from privileged code, be aware of xpcnativewrappers. ...
Window: error event - Web APIs
used — for example if a script has an execution error. bubbles no cancelable no interface event or uievent event handler property onerror the event object is a uievent instance if it was generated from a user interface element, or an event instance otherwise. ...
...gn-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); window.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.
type}: ${event.message}\n`; console.log(event) }); const scripterror = document.queryselector('#script-error'); scripterror.addeventlistener('click', () => { const badcode = 'const s;'; eval(badcode); }); result specifications specification status ui events working draft ...
Window.getComputedStyle() - Web APIs
g with css property names. syntax var style = window.getcomputedstyle(element [, pseudoelt]); element the element for which to get the computed style. pseudoeltoptional a string specifying the pseudo-element to match. omitted (or null) for real elements. the returned style is a live cssstyledeclaration object, which updates automatically when the element's styles are changed. throws
typeerror if the passed object is not an element or the pseudoelt is not a valid pseudo-element selector or is ::part() or ::slotted(). note: valid pseudo-element selector refers to syntactic validity, e.g. ::unsupported is considered valid, even though the pseudo-element itself is not supported. examples in this example we style a <p> element, then retrieve those styles using getcomputed...
...however, the two objects have different purposes: the object from getcomputedstyle is read-only, and should be used to inspect the element's style — including those set by a <style> element or an external stylesheet. the element.style object should be used to set styles on that element, or inspect styles directly added to it from jav...
window.location - Web APIs
example, which will reload the page by using the replace() method to insert the value of location.pathname into the hash: function reloadpagewithhash() { var initialpage = location.pathname; location.replace('http://example.com/#' + initialpage); } example #4: display the properties of the current url in an alert dialog: function showloc() { var olocation = location, alog = ["property (
typeof): value", "location (" + (
typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alog.push(sprop + " (" + (
typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); } alert(alog.join("\n")); } // in html: <button onclick="showloc();">show location properties</button> example #5: send a string of data to the server by modifying the search property: function sen...
...ng the search property: function senddata (sdata) { location.search = sdata; } // in html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string). ...
Window: unload event - Web APIs
is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below). ...
...ent frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 1st one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 3rd one.'); }); </script> </head> <body> <iframe src="child-frame.html"></iframe> </body> </html> below, the content of child-frame.html: <!doc
type html> <html> <head> <title>child frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 2nd one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 4th and last one…'); }); </script> </head> <body> ā» </body> </html> when the parent frame is unloaded,...
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
n); parameters function a function to be executed when the browser engine determines it is safe to call your code. enqueued microtasks are executed after all pending tasks have completed but before yielding control to the browser's event loop. return value undefined. ...
...)); }); } else { fetch(url).then(res => res.arraybuffer()).then(data => { this._cache[url] = data; this._setdata(data); this.dispatchevent(new event("load")); }); } }; when queuemicrotask() isn't available the code below is basically a monkey-patch for queuemicrotask() for modern engines. 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 comment html living standardthe definition of 'self.queuemicrotask()' in that specification. living standard initial ...
Worker() - Web APIs
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 can be classic or module. if not specified, the default used is classic. credentials: a domstring specifying the
type of credentials to use for the worker. the value can be omit, same-origin, or include. if not specified, or if
type is classic, the default used is omit (no credentials required). name: a domstring specifying an id...
...ials required). name: a domstring specifying an identifying name for the dedicatedworkerglobalscope representing the scope of the worker, which is mainly useful for debugging purposes. exceptions a securityerror is raised if the document is not allowed to start workers, e.g. if the url has an invalid syntax or if the same-origin policy is violated. a networkerror is raised if the mime
type of the worker script is incorrect. it should always be text/javascript. a syntaxerror is raised if aurl cannot be parsed. examples the following code snippet shows creation of a worker object using the worker() constructor and subsequent usage of the object: var myworker = new worker('worker.js'); first.onchange = function() { myworker.postmessage([first.value,second.value]); console.lo...
WritableStream.getWriter() - Web APIs
the getwriter() method of the writablestream interface returns a new instance of writablestreamdefaultwriter and locks the stream to that instance. while the stream is locked, no other writer can be acquired until this one is released. syntax var writer = writablestream.getwriter(); parameters none. return value a writablestreamdefaultwriter object instance. exceptions
typeerror the stream you are trying to create a writer for is not a writablestream. examples the following example illustrates several features of this interface. it shows the creation of the writablestream with a custom sink and an api-supplied queuing strategy. it then calls a function called sendmessage(), passing the newly created stream and a string. inside this function it calls the stream's getwriter()...
...tream's getwriter() method, which returns an instance of writablestreamdefaultwriter. a foreach() call is used to write each chunk of the string to the stream. finally, write() and close() return promises that are processed to deal with success or failure of chunks and streams. ...
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
new writablestreamdefaultwriter object instance. note: you generally wouldn't use this constructor manually; instead, you'd use the writablestream.getwriter() method. syntax var writablestreamdefaultwriter = new writablestreamdefaultwriter(stream); parameters stream the writablestream to be written to. return value an instance of the writablestreamdefaultwriter object. exceptions
typeerror the provided stream value is not a writablestream, or it is locked to another writer already. examples the following example shows the creation of a writablestream with a custom sink and an api-supplied queuing strategy. it then calls a function called sendmessage(), passing the newly created stream and a string. inside this function it calls the stream's getwriter() method, which return...
...tream's getwriter() method, which returns an instance of writablestreamdefaultwriter. a foreach() call is used to write each chunk of the string to the stream. finally, write() and close() return promises that are processed to deal with success or failure of chunks and streams. ...
WritableStreamDefaultWriter.close() - Web APIs
close behavior. during this time any further attempts to write will fail (without erroring the stream). syntax var promise = writablestreamdefaultwriter.close(); parameters none. return value a promise, which fulfills with the undefined if all remaining chunks were successfully written before the close, or rejects with an error if a problem was encountered during the process. exceptions
typeerror the stream you are trying to close is not a writablestream. examples the following example shows the creation of a writablestream with a custom sink and an api-supplied queuing strategy. it then calls a function called sendmessage(), passing the newly created stream and a string. inside this function it calls the stream's getwriter() method, which returns an instance of writablestreamdef...
...tream's getwriter() method, which returns an instance of writablestreamdefaultwriter. a foreach() call is used to write each chunk of the string to the stream. finally, write() and close() return promises that are processed to deal with success or failure of chunks and streams. ...
WritableStreamDefaultWriter.write() - Web APIs
ssarily that it is safely saved to its ultimate destination. syntax var promise = writablestreamdefaultwriter.write(chunk); parameters chunk a block of binary data to pass to the writablestream. return value a promise, which fulfills with the undefined upon a successful write, or rejects if the write fails or stream becomes errored before the writing process is initiated. exceptions
typeerror the target stream is not a writable stream, or it does not have an owner. examples the following example shows the creation of a writablestream with a custom sink and an api-supplied queuing strategy. it then calls a function called sendmessage(), passing the newly created stream and a string. inside this function it calls the stream's getwriter() method, which returns an instance of wri...
...tream's getwriter() method, which returns an instance of writablestreamdefaultwriter. a foreach() call is used to write each chunk of the string to the stream. finally, write() and close() return promises that are processed to deal with success or failure of chunks and streams. ...
XMLSerializer.serializeToString() - Web APIs
ializer method serializetostring() constructs a string representing the specified dom tree in xml form. syntax xmlstring = anxmlserializer.serializetostring(rootnode); parameters rootnode the node to use as the root of the dom tree or subtree for which to construct an xml representation. return value a domstring containing the xml representation of the specified dom tree. exceptions
typeerror the specified rootnode is not a compatible node
type. the root node must be either node or attr. invalidstateerror the tree could not be successfully serialized, probably due to issues with the content's compatibility with xml serialization. syntaxerror a serialization of html was requested but could not succeed due to the content not being well-formed. usage notes compatible node ty...
...es with the content's compatibility with xml serialization. syntaxerror a serialization of html was requested but could not succeed due to the content not being well-formed. usage notes compatible node
types the specified root node—and all of its descendants—must be compatible with the xml serialization algorithm. the root node itself must be either a node or attr object. the following
types are also permitted as descendants of the root node, in addition to node and attr: document
type document documentfragment element comment text processinginstruction attr if any other
type is encountered, a
typeerror exception is thrown. notes on the resulting xml there are some things worth noting about the xml output by serializetostring(): for xml serializations, element and at...
XPathEvaluator.createExpression() - Web APIs
ssion to be created. resolver optional permits translation of all prefixes, including the xml namespace prefix, within the xpath expression into appropriate namespace uris. return value a xpathexpression representing the compiled form of the xpath expression. exceptions invalid_expression_err if the expression is not legal according to the rules of the xpathevaluator, an xpathexception of
type invalid_expression_err is raised. namespace_err if the expression contains namespace prefixes which cannot be resolved by the specified xpathnsresolver, a domexception of
type namespace_error is raised. example the following example shows the use of the evaluate() method. html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; va...
...ion of
type namespace_error is raised. example the following example shows the use of the evaluate() method. html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_
type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.createexpression()' in that specification. recommendation initial definition ...
XPathEvaluator - Web APIs
xpathevaluator.createexpression() creates a parsed xpath expression with resolved namespaces. xpathevaluator.creatensresolver() adapts any dom node to resolve namespaces allowing the xpath expression to be evaluated relative to the context of the node where it appeared within the document. ...
...he specified
type if possible. example the following example shows the use of the xpathevaluator interface. html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_
type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator' in that specification. recommendation initial definition ...
XPathExpression - Web APIs
this interface is a compiled xpath expression that can be evaluated on a document or specific node to return information from its dom tree. this is useful when an expression will be reused in an application, because it is just compiled once and all namespace prefixes which occur within the expression are preresolved. objects of this
type are created by calling xpathevaluator.createexpression(). methods xpathexpression.evaluate() evaluates the xpath expression on the given node or document. example the following example shows the use of the xpathexpression interface. html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression(xpath); var result ...
... on the given node or document. example the following example shows the use of the xpathexpression interface. html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression(xpath); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_
type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathexpression' in that specification. recommendation initial definition ...
XPathResult.booleanValue - Web APIs
the read-only booleanvalue property of the xpathresult interface returns the boolean value of a result with xpathresult.result
type being boolean_
type. note: this feature is available in web workers. syntax var value = result.booleanvalue; return value the return value is the boolean value of the xpathresult returned by document.evaluate(). exceptions
type_err in case xpathresult.result
type is not boolean_
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the booleanvalue property. ...
...
type_err in case xpathresult.result
type is not boolean_
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the booleanvalue property. html <div>xpath example</div> <p>text is 'xpath example': <output></output></p> javascript var xpath = "//div/text() = 'xpath example'"; var result = document.evaluate(xpath, document, null, xpathresult.boolean_
type, null); document.queryselector("output").textcontent = result.booleanvalue; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.booleanvalue' in that specification. recommendation initial definition ...
XPathResult.invalidIteratorState - Web APIs
the read-only invaliditeratorstate property of the xpathresult interface signifies that the iterator has become invalid. it is true if xpathresult.result
type is unordered_node_iterator_
type or ordered_node_iterator_
type and the document has been modified since this result was returned. note: this feature is available in web workers. syntax var iteratorstate = result.invaliditeratorstate; return value a boolean value indicating whether the iterator has become invalid. example the following example shows the use of the invaliditeratorstate property. ...
...tax var iteratorstate = result.invaliditeratorstate; return value a boolean value indicating whether the iterator has become invalid. example the following example shows the use of the invaliditeratorstate property. html <div>xpath example</div> <p>iterator state: <output></output></p> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_
type, null); // invalidates the iterator state document.queryselector("div").remove(); document.queryselector("output").textcontent = result.invaliditeratorstate ? "invalid" : "valid"; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.invaliditeratorstate' in that specification. reco...
XPathResult.iterateNext() - Web APIs
the iteratenext() method of the xpathresult interface iterates over a node set result and returns the next node from it or null if there are no more nodes. syntax var node = result.iteratenext(); return value the next node within the node set of the xpathresult. exceptions
type_err in case xpathresult.result
type is not unordered_node_iterator_
type or ordered_node_iterator_
type, an xpathexception of
type type_err is thrown. invalid_state_err if the document is mutated since the result was returned, an xpathexception of
type invalid_state_err is thrown. example the following example shows the use of the iteratenext() method. html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(x...
...id_state_err if the document is mutated since the result was returned, an xpathexception of
type invalid_state_err is thrown. example the following example shows the use of the iteratenext() method. html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_
type, null); var node = null; var tagnames = []; while(node = result.iteratenext()) { tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.iteratenext()' in that specification. recomme...
XPathResult.numberValue - Web APIs
the read-only numbervalue property of the xpathresult interface returns the numeric value of a result with xpathresult.result
type being number_
type. note: this feature is available in web workers. syntax var value = result.numbervalue; return value the return value is the numeric value of the xpathresult returned by document.evaluate(). exceptions
type_err in case xpathresult.result
type is not number_
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the numbervalue property. ...
...e(). exceptions
type_err in case xpathresult.result
type is not number_
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the numbervalue property. html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "count(//div)"; var result = document.evaluate(xpath, document, null, xpathresult.number_
type, null); document.queryselector("output").textcontent = result.numbervalue; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.numbervalue' in that specification. recommendation initial definition ...
XPathResult.singleNodeValue - Web APIs
the read-only singlenodevalue property of the xpathresult interface returns a node value or null in case no node was matched of a result with xpathresult.result
type being any_unordered_node_
type or first_ordered_node_
type. note: this feature is available in web workers. syntax var value = result.singlenodevalue; return value the return value is the node value of the xpathresult returned by document.evaluate(). exceptions
type_err in case xpathresult.result
type is not any_unordered_node_
type or first_ordered_node_
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the singlenodevalue property. html <div>xpath example</div> <div>tag name of the element having the text content 'xpath example': <output></output></div> javascript var x...
..._
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the singlenodevalue property. html <div>xpath example</div> <div>tag name of the element having the text content 'xpath example': <output></output></div> javascript var xpath = "//*[text()='xpath example']"; var result = document.evaluate(xpath, document, null, xpathresult.first_ordered_node_
type, null); document.queryselector("output").textcontent = result.singlenodevalue.localname; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.singlenodevalue' in that specification. recommendation initial definition ...
XPathResult.snapshotItem() - Web APIs
he xpathresult interface returns an item of the snapshot collection or null in case the index is not within the range of nodes. unlike the iterator result, the snapshot does not become invalid, but may not correspond to the current document if it is mutated. syntax var node = result.snapshotitem(i); return value the node at the given index within the node set of the xpathresult. exceptions
type_err in case xpathresult.result
type is not unordered_node_snapshot_
type or ordered_node_snapshot_
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the snapshotitem() method. html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document...
...t unordered_node_snapshot_
type or ordered_node_snapshot_
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the snapshotitem() method. ...
XPathResult.stringValue - Web APIs
the read-only stringvalue property of the xpathresult interface returns the string value of a result with xpathresult.result
type being string_
type. note: this feature is available in web workers. syntax var value = result.stringvalue; return value the return value is the string value of the xpathresult returned by document.evaluate(). exceptions
type_err in case xpathresult.result
type is not string_
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the stringvalue property. ...
...s
type_err in case xpathresult.result
type is not string_
type, an xpathexception of
type type_err is thrown. example the following example shows the use of the stringvalue property. html <div>xpath example</div> <div>text content of the <div> above: <output></output></div> javascript var xpath = "//div/text()"; var result = document.evaluate(xpath, document, null, xpathresult.string_
type, null); document.queryselector("output").textcontent = result.stringvalue; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.stringvalue' in that specification. recommendation initial definition ...
XRInputSourcesChangeEvent - Web APIs
the webxr device api interface xrinputsourceschangeevent is used to represent the inputsourceschange event sent to an xrsession when the set of available webxr input controllers changes. constructor xrinputsourceschangeevent() creates and returns a new xrinputsourceschangeevent object configured as indicated by the given xrinputsourceschangeeventinit object. the specified
type must be inputsourceschange, which is the only event that uses this interface. properties added read only an array of zero or more xrinputsource objects, each representing an input device which has been newly connected or enabled for use. removed read only an array of zero or more xrinputsource objects representing the input devices newly connected or enabled for use. session read only the xrsession t...
...newly connected or enabled for use. removed read only an array of zero or more xrinputsource objects representing the input devices newly connected or enabled for use. session read only the xrsession to which this input source change event is being directed. methods while xrinputsourceschangeevent defines no methods of its own, it inherits methods from its parent interface, event. event
types inputsourceschange delivered to the xrsession when the set of input devices available to it changes. examples the following example shows how to set up an event handler which uses inputsourceschange events to detect newly-available pointing devices and to load their models in preparation to display them in the next animation frame. xrsession.addeventlistener("inputsourceschange", oninput...
XRRigidTransform() - Web APIs
e default value for orientation is {x: 0, y: 0, z: 0, w: 1}. the specified orientation gets normalized if it's not already. return value a new xrrigidtransform object which has been initialized to represent a transform matrix that would adjust the position and orientation of an object from the origin to the specified position and facing in the direction indicated by orientation. exceptions
typeerror the value of the w coordinate in the specified position is not 1.0. examples in this example, the beginning of the animation of a scene is shown, starting with a request for a reference space of a given
type, then shifting the coordinate system based on a transform before requesting the first animation frame. let animationframerequestid = 0; xrsession.requestreferencespace("local-floor...
...on a transform before requesting the first animation frame. let animationframerequestid = 0; xrsession.requestreferencespace("local-floor") .then((refspace) => { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform(viewerposition, viewerorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); }); after requesting a reference space of
type local-floor, the returned promise is eventually resolved, at which time we receive a new reference space object, refspace. after creating an xrrigidtransform from the viewer's initial position and orientation, we pass the new transform into getoffsetreferencespace() to create another reference space, now offset so that its origin is located at the same place in space as the coordinates given by v...
XRSession.environmentBlendMode - Web APIs
ndmode property identifies if—and to what degree—the computer-generated imagery is overlaid atop the real world. this is used to differentiate between fully-immersive vr sessions and ar sessions which render over a pass-through image of the real world, possibly partially transparently. the value is a domstring which contains one of the values defined by the xrenvironmentblendmode enumerated
type. ...
... permitted values are: opaque the rendered image is drawn without allowing any pass-through imagery. ...
XRSession: selectend event - Web APIs
ly after completing those tasks does the onselectionevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property
type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object ...
...deventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.
type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.matrix); break; case "selectend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler for selectend events by setting the xrsession object's onselectend event handle...
XRSession: selectstart event - Web APIs
ly after completing those tasks does the onselectionevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property
type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object ...
...deventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.
type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.matrix); break; case "selectend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler for selectend events by setting the xrsession object's onselectend event handle...
XRSession: squeezeend event - Web APIs
only after completing those tasks does the onsqueezeevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property
type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object...
...n.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.
type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypose.matrix); break; case "squeezeend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler these events by setting the xrsession object's onsqueezeend event handler pr...
XRSession: squeezestart event - Web APIs
only after completing those tasks does the onsqueezeevent() function below dispatch the action out to a specialized function to handle things. after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose(). if the target ray pose was fetched successfully, the code then uses the value of event property
type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the target ray pose's matrix. the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up. mybegintracking() returns an object...
...n.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.
type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypose.matrix); break; case "squeezeend": mystoptracking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler these events by setting the xrsession object's onsqueezeend event handler pr...
XRSessionMode - Web APIs
values immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment. the session's environmentblendmode indicates the method to be used to blend the content together. important: the immersive-ar mode is defined by the webxr augmented reality module, which is not yet stable and should not be used other than for testing and experimentation. ...
...e output is presented inline within the context of an element in a standard html document, rather than occupying the full visual space. inline sessions can be presented in either mono or stereo mode, and may or may not have viewer tracking available. inline sessions don't require special hardware and should be avalable on any user agent offering webxr api support. usage notes the xrsessionmode
type indicates the values that can be specified when calling xr.issessionsupported() to determine whether or not the specified session
type is supported and available to be used, and by requestsession() to attempt to open a new webxr session. the immersive-ar mode supports all the same features and reference spaces that immersive-vr does, since both are immersive sessions. browsers may support either...
XRView.eye - Web APIs
right the view represents the viewer's right eye. none the xrview describes a monoscopic view, or the view otherwise doesn't represent a particular eye's point-of-view. ...
... right the view represents the viewer's right eye. none the xrview describes a monoscopic view, or the view otherwise doesn't represent a particular eye's point-of-view. ...
XRWebGLLayer - Web APIs
the xrwebgllayer interface of the webxr device api provides a linkage between the webxr device (or simulated xr device, in the case of an inline session) and a webgl context used to render the scene for display on the device. in particular, it provides access to the webgl framebuffer and viewport to ease access to the context. although xrwebgllayer is currently the only
type of framebuffer layer supported by webgl, it's entirely possible that future updates to the webxr specification may allow for other layer
types and corresponding image sources. constructor new xrwebgllayer() creates and returns a new xrwebgllayer object for use by the specified xrsession, using a particular webglrenderingcontext or webgl2renderingcontext as the destination context. properties antialias...
...ypes and corresponding image sources. constructor new xrwebgllayer() creates and returns a new xrwebgllayer object for use by the specified xrsession, using a particular webglrenderingcontext or webgl2renderingcontext as the destination context. properties antialias read only a boolean value indicating whether or not the webgl context's framebuffer supports anti-aliasing. the specific
type of anti-aliasing is determined by the user agent. framebuffer read only returns a webglframebuffer suitable for passing into the bindframebuffer() method. framebufferwidth read only returns the width of the xrwebgllayer's framebuffer. framebufferheight read only returns the height of the layer's framebuffer. ignoredepthvalues read only a boolean which indicates whether or not the webx...
Using the aria-labelledby attribute - Accessibility
ot catalog the object. aria-labelledby is very similar to aria-describedby: a label provides essential information about an object, while a description provides extended information that the user might need. in addition to form elements, you can use the aria-labelledby attribute to associate static text with widgets, groups of elements, panes, regions that have a heading, definitions, and other
types of objects. the examples section below provides more information on how to use the attribute this way. to improve compatibility with user agents that do not support aria, you can use aria-labelledby with the <label> element (using the for attribute). this attribute can be used with any typical html form element; it is not limited to elements that have an aria role assigned. value a space-sep...
...ible name property of elements that have both an aria-labelledby attribute and an aria-label attribute, the user agents give precedence to aria-labelledby. examples example 1: multiple labels in the example below, each input field is labelled by both its own individual label and by the label for the group: <div id="mybillingid">billing</div> <div> <div id="mynameid">name</div> <input
type="text" aria-labelledby="mybillingid mynameid"/> </div> <div> <div id="myaddressid">address</div> <input
type="text" aria-labelledby="mybillingid myaddressid"/> </div> example 2: associating headings with regions in the example below, header elements are associated with the content they head. note that the region being referenced is the region that contains the header. <div role="main"...
ARIA annotations - Accessibility
oll/voting ui widget that shows numbers of votes, but you want to summarize the purpose of the widget in a clear description because the ui does not make it clear: <section aria-description="choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week."> <p>pick your favourite fruit:</p> <form> <ul> <li><label>apple: <input
type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <input
type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input
type="radio" name="fruit" value="banana"></label></li> </ul> </form> </section> if the descriptive text does appear in the ui, you can link the description to the widget using aria-describedby, like so: <p id="fruit-desc">c...
...bel></li> </ul> </form> </section> if the descriptive text does appear in the ui, you can link the description to the widget using aria-describedby, like so: <p id="fruit-desc">choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week.</p> <section aria-describedby="fruit-desc"> <form> <ul> <li><label>apple: <input
type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <input
type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input
type="radio" name="fruit" value="banana"></label></li> </ul> </form> </section> insertions and deletions a common wish in online document systems like google docs is to be able to track changes, to see what reviewers or edi...
ARIA: form role - Accessibility
n 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-comment" aria-label="add a comment"> <label for="username">username</label> <input id="username" name="username" autocomplete="nickname" autocorrect="off"
type="text"> <label for="email">email</label> <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false"
type="text"> <label for="comment">comment</label> <textarea id="comment" name="comment"></textarea> <input value="comment"
type="submit"> </div> it is recommended to use <form> instead. <form id="send-comment" aria-label="add a comm...
...assitive technology user to be able to quickly understand the purpose of the form landmark. use an aria-labelledby, aria-label or title on the same element that was given the role="form" to provide it an accessible name. using role="form" <div role="form" id="gift-cards" aria-label="purchase a gift card"> <!-- form content --> </div> redundant descriptions screen readers will announce the
type of role the landmark is. because of this, you do not need to describe what the landmark is in its label. for example, a declaration of role="form" with an of aria-label="contact form" may be announced redundantly as, "contact form form". best practices prefer html using the <form> element will automatically communicate a section has a role of form. if at all possible, prefer using it instead. ...
ARIA: rowgroup role - Accessibility
<span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> </div> </div> description rowgroup establishes a relationship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in html. there is, however, no differentiation between different
types of rowgroups. their elements must be contained in, or owned by, elements with either the table or grid role. using the native <thead>, <tfoot> , and <tbody> html elements, whenever possible, is strongly encouraged. to create an aria table header, table footer or table body, add role="rowgroup" to the element. that rowgroup should be nested within a grid, table or treegrid, encompassing a group ...
...le or grid role. using the native <thead>, <tfoot> , and <tbody> html elements, whenever possible, is strongly encouraged. to create an aria table header, table footer or table body, add role="rowgroup" to the element. that rowgroup should be nested within a grid, table or treegrid, encompassing a group of one or more rows. each row, in turn, contains child cells. these cells can be of different
types, depending on whether they are column or row headers, or plain or grid cells. note: using the native html table element (<table>) along with the table header (<thead>), footer (<tfoot>), and body (<tbody>) elements whenever possible is strongly encouraged. associated wai-aria roles, states, and properties context roles role="table" one of the three possible contexts (along with grid an...
ARIA: dialog role - Accessibility
one of those opinions and therefore not normative. ...
... aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">subscription form</h2> <p id="dialog1desc">we will not share this information with third parties.</p> <form> <p> <label for="firstname">first name</label> <input id="firstname"
type="text" /> </p> <p> <label for="lastname">last name</label> <input id="lastname"
type="text"/> </p> <p> <label for="interests">interests</label> <textarea id="interests"></textarea> </p> <p> <input
type="checkbox" id="autologin"/> <label for="autologin">auto-login?</label> </p> <p> <input
type="submit" value="save information"/> </p> </form> </div> working examples: jquery-ui dialog notes note: whi...
An overview of accessible web applications and widgets - Accessibility
designed to fill the gap between standard html tags and the desktop-style controls found in dynamic web applications, aria provides roles and states that describe the behavior of most familiar ui widgets. many of these were later added in html5, and developers should always prefer using the correct semantic html element over using aria. the aria specification is split up into three different
types of attributes: roles, states, and properties. roles describe widgets that aren't otherwise available in html 4, such as sliders, menu bars, tabs, and dialogs. properties describe characteristics of these widgets, such as if they are draggable, have a required element, or have a popup associated with them. states describe the current interaction state of an element, informing the assistive techno...
...-hidden to control the visibility of the tooltip. the example shows a simple web form with tooltips containing instructions associated with the entry fields. in this example, the html for the tooltip has the form shown in example 2a. line 9 sets the aria-hidden state to true. example 2a. html for a tooltip <div class="text"> <label id="tp1-label" for="first">first name:</label> <input
type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" /> <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">your first name is optional</div> </div> the css for this markup is shown in example 2b. note that there is no custom classname used, only the status of the aria...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
ortant]: objid_alert objid_caret objid_client [important] objid_cursor objid_hscroll objid_nativeom [important? might be useful for supporting custom interfaces, need to research] objid_menu objid_queryclassnameidx objid_sizegrip objid_sound objid_sysmenu objid_titlebar objid_vscroll objid_window [important, but implemented automatically by microsoft windows. will return object of
type role_window. see windowfromaccessibleobject quirk explanation below.] dealing with the quirks of msaa msaa has a well deseved reputation for quirkiness. it is not "plug and play", and will take a lot of testing/refinement before your solution works with any product. here are some of it's quirks and some solutions/workarounds: msaa can be crash prone problem: many of msaa's crash occur becaus...
...walker class knows what it needs to expose by asking each dom node's primary frame (a gecko formatting object) for an nsiaccessible, using the nsiframe::getaccessible() method. if nsaccessibletreewalker gets an nsiaccessible back, then the dom node considered to be an accessible object. the nsiaccessible that is returned is either a new one, or reused from the accessibility cache, and the correct
type of accessibility object to correctly expose that dom node through the cross-platform nsiaccessible and msaa-specific iaccessible interfaces. every accessibility object created must be cached, and must inherit from nsaccessiblewrap so that it supports a base implementation of nsiaccessible and iaccessible. apart from that, it is free to override iaccessible or nsiaccessible methods. in this way e...
Color contrast - Accessibility
the color contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility. when designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following contrast ratios:
type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logo
types, or purely decorative text. see the solution section below for further information. having good color contrast on your ...
...ive user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logo
types, or purely decorative text. see the solution section below for further information. having good color contrast on your site benefits all your users, but it is particularly beneficial to users with certain
types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors. this is because they don't see bright and dark areas as readily as those without such conditions, and therefore have trouble seeing edges, borders, and other details. it is good to have a cool design on your website, but the design is worthless if your users can...
-moz-orient - CSS: Cascading Style Sheets
ly 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. ...
... 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-focus - CSS: Cascading Style Sheets
; -moz-user-focus: ignore; /* global values */ -moz-user-focus: inherit; -moz-user-focus: initial; -moz-user-focus: unset; by setting its value to ignore, you can disable focusing the element, which means that the user will not be able to activate the element. 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. 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 event...
...e 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 initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation
typediscrete formal syntax ignore | normal | select-after | select-before | select-menu | select-same | select-all | none examples html <input class="ignored" value="the user cannot focus on this element."> css .ignored { -moz-user-focus: ignore; } specifications not part of any standard. a similar property, user-focus, was proposed in early drafts of a predecessor of the css3 ui specifica...
-webkit-mask-position-x - CSS: Cascading Style Sheets
percentages are calculated against the horizontal dimension of the box padding area. that means, a value of 0% means the left edge of the image is aligned with the box's left padding edge and a value of 100% means the right edge of the image is al...
... box's left padding edge and a value of 100% means the right edge of the image is aligned with the box's right padding edge. left equivalent to 0%. center equivalent to 50%. right equivalent to 100%. formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation
typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: 25%; } specifications not part of any standard. ...
-webkit-mask-position-y - CSS: Cascading Style Sheets
percentages are calculated against the vertical dimension of the box padding area. a value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of 100% means the bottom edge of the image is aligned with the bo...
...box's top padding edge and a value of 100% means the bottom edge of the image is aligned with the box's bottom padding edge. top equivalent to 0%. bottom equivalent to 100%. center equivalent to 50%. formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation
typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: 25%; } specifications not part of any standard. ...
-webkit-text-stroke-color - CSS: Cascading Style Sheets
-stroke-color: red; -webkit-text-stroke-color: #e08ab4; -webkit-text-stroke-color: rgb(200, 100, 0); /* global values */ -webkit-text-stroke-color: inherit; -webkit-text-stroke-color: initial; -webkit-text-stroke-color: unset; syntax values <color> the color of the stroke. ...
...)> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
::placeholder - CSS: Cascading Style Sheets
ng technology will use aria-describedby to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary. <label for="user-email">your email address</label> <span id="user-email-hint" class="input-hint">example: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email"
type="email"> placeholders in form fields are harmful — nielsen norman group windows high contrast mode placeholder text will appear with the same styling as user-entered text content when rendered in windows high contrast mode. this will make it difficult for some people to determine which content has been entered, and which content is placeholder text. greg whitworth — how to use -ms-h...
...ls placeholders are not a replacement for the <label> element. without a label that has been programmatically associated with an input using a combination of the for and id attributes, assistive technology such as screen readers cannot parse <input> elements. mdn basic form hints placeholders in form fields are harmful — nielsen norman group examples red text html <input placeholder="
type something here!"> css input::placeholder { color: red; font-size: 1.2em; font-style: italic; } result green text html <input placeholder="
type something here..."> css input::placeholder { color: green; } result specifications specification status comment css pseudo-elements level 4the definition of '::placeholder' in that specification. worki...
::slotted() - CSS: Cascading Style Sheets
at this selector won't select a text node placed into a slot; it only targets actual elements. ...
...ects any element placed inside a slot */ ::slotted(*) { font-weight: bold; } /* selects any <span> placed inside a slot */ ::slotted(span) { font-weight: bold; } syntax ::slotted( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <
type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <
type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><clas...
:focus-within - CSS: Cascading Style Sheets
s selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields. syntax :focus-within examples in this example, the form will receive special coloring styles when either text input receives focus. ...
...en the user focuses on one of its <input> fields. syntax :focus-within examples in this example, the form will receive special coloring styles when either text input receives focus. html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <input id="given_name"
type="text"> <br> <label for="family_name">family name:</label> <input id="family_name"
type="text"> </form> css form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; } input { margin: 4px; } result specifications specification status comment selectors level 4the definition of ':focus-within' in that specification. working draft initial definition. ...
:host() - CSS: Cascading Style Sheets
at are inside a particular ancestor. that's the job of :host-context(). note: this has no effect when used outside a shadow dom. ...
...n used outside a shadow dom. ...
:host-context() - CSS: Cascading Style Sheets
'*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> =...
...color from black to white when a .dark-theme class is applied to the document body */ p { color: #000; } :host-context(body.dark-theme) p { color: #fff; } syntax :host-context( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <
type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <
type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><clas...
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
er { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } syntax :is( <complex-selector-list> )where <complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <
type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '|' ]where <
type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function...
...l ul dir, ul menu dir, ul dir dir, menu ol ul, menu ul ul, menu menu ul, menu dir ul, menu ol menu, menu ul menu, menu menu menu, menu dir menu, menu ol dir, menu ul dir, menu menu dir, menu dir dir, dir ol ul, dir ul ul, dir menu ul, dir dir ul, dir ol menu, dir ul menu, dir menu menu, dir dir menu, dir ol dir, dir ul dir, dir menu dir, dir dir dir { list-style-
type: square; } ... can be replaced with: /* 3-deep (or more) unordered lists use a square */ :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir { list-style-
type: square; } simplifying section selectors the :is() pseudo-class is particularly useful when dealing with html5 sections and headings.
:lang() - CSS: Cascading Style Sheets
the :lang() css pseudo-class matches elements based on the language they are determined to be in. /* selects any <p> in english (en) */ p:lang(en) { quotes: '\201c' '\201d' '\2018' '\2019'; } note: in html, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as http headers). for other document
types there may be other document methods for determining the language. syntax formal syntax :lang( <language-code> ) parameter <language-code> a <string> representing the language you want to target. acceptable values are specified in the html spec. examples in this example, the :lang() pseudo-class is used to match the parents of quote elements (<q>) using child combinators. note that this doesn't ...
...lang( <language-code> ) parameter <language-code> a <string> representing the language you want to target. acceptable values are specified in the html spec. examples in this example, the :lang() pseudo-class is used to match the parents of quote elements (<q>) using child combinators. note that this doesn't illustrate the only way to do this, and that the best method to use depends on the
type of document. also note that unicode values are used to specify some of the special quote characters. html <div lang="en"><q>this english quote has a <q>nested</q> quote inside.</q></div> <div lang="fr"><q>this french quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>this german quote has a <q>nested</q> quote inside.</q></div> css :lang(en) > q { quotes: '\201c' '\201d' '\2...
:not() - CSS: Cascading Style Sheets
or more selectors as its argument. the list must not contain another negation selector or a pseudo-element. the ability to list more than one selector is experimental and not yet widely supported. ...
...ne selector is experimental and not yet widely supported. ...
:nth-last-child() - CSS: Cascading Style Sheets
er or zero value of n. the index of the first element, counting from the end, is 1. the values a and b must both be <integer>s. ...
...x :nth-last-child( <nth> [ of <complex-selector-list> ]? )where <nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <
type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '|' ]where <
type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><clas...
:only-child - CSS: Cascading Style Sheets
working draft matching elements are not required to have a parent. selectors level 3the definition of ':only-child' in that specification. recommendation ...
... working draft matching elements are not required to have a parent. selectors level 3the definition of ':only-child' in that specification. recommendation initial definition. ...
:valid - CSS: Cascading Style Sheets
owderblue; } this pseudo-class is useful for highlighting correct fields for the user. ...
...abels. you can try it below: notice how the required text inputs are invalid when empty, but valid when they have something filled in. the email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address. accessibility concerns the color green is commonly used to indicate valid input. people who have certain
types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. typically, descriptive text and/or an icon are used. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 specifications specification status comme...
:where() - CSS: Cascading Style Sheets
in firefox nightly, version 77+. in other versions of firefox it is behind a pref — layout.css.is-where-selectors.enabled). note: you can also find this example on github; see is-where. ...
...lso find this example on github; see is-where. ...
font-stretch - CSS: Cascading Style Sheets
rcentage> 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 true
type or open
type 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. keyword to numeric mapping the table below shows the mapping between keyword values and numeric percentages: keyw...
...nded 150% ultra-expanded 200% variable fonts most fonts have a particular width which corresponds to one of the keyterm values. however some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. for this, percentage ranges are useful. for true
type or open
type variable fonts, the "wdth" variation is used to implement varying glyph widths. accessibility concerns people with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a low contrast color ratio. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag...
src - CSS: Cascading Style Sheets
the format hint contains a comma-separated list of format strings that denote well-known font formats. if a user agent doesn't support the specified formats, it skips downl...
... candidate recommendation initial definition ...
@namespace - CSS: Cascading Style Sheets
@namespace is an at-rule that defines xml namespaces to be used in a css style sheet. syntax /* default namespace */ @namespace url(xml-namespace-url); @namespace "xml-namespace-url"; /* prefixed namespace */ @namespace prefix url(xml-namespace-url); @namespace prefix "xml-namespace-url"; description the defined namespaces can be used to restrict the universal,
type, and attribute selectors to only select elements within that namespace. the @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as html5 with inline svg or mathml, or xml that mixes multiple vocabularies. any @namespace rules must follow all @charset and @import rules, and precede all other at-rules and style declarations in a style sheet. @namespace can be used to defi...
...with documents containing multiple namespaces—such as html5 with inline svg or mathml, or xml that mixes multiple vocabularies. any @namespace rules must follow all @charset and @import rules, and precede all other at-rules and style declarations in a style sheet. @namespace can be used to define the default namespace for the style sheet. when a default namespace is defined, all universal and
type selectors (but not attribute selectors, see note below) apply only to elements in that namespace. the @namespace rule can also be used to define a namespace prefix. when a universal,
type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace and name of the element or attribute matches. in html5, known foreign elements will automatically be...
@page - CSS: Cascading Style Sheets
dle viewport-related <length> units, vh, vw, vmin, and vmax. meanwhile do not use them within a @page at-rule. ...
...rule. formal syntax @page <page-selector-list> { <page-body> }where <page-selector-list> = [ <page-selector># ]?<page-body> = <declaration>? [ ; <page-body> ]? | <page-margin-box> <page-body>where <page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*<page-margin-box> = <page-margin-box-
type> '{' <declaration-list> '}'where <pseudo-page> = : [ left | right | first | blank ]<page-margin-box-
type> = @top-left-corner | @top-left | @top-center | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner | @left-top | @left-middle | @left-bottom | @right-top | @right-middle | @right-bottom examples @page pseudo-class examples please refer to the various pseudo-classes of @page for examples. :blank :first :left :right ...
At-rules - CSS: Cascading Style Sheets
age) @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) @font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant) — define common names in font-variant-alternates for feature activated differently in open
type. (at the candidate recommendation stage, but only implemented in gecko as of writing) conditional group rules much like the values of properties, each at-rule has a different syntax. nevertheless, several of them can be grouped into a special category named conditional group rules. these statements share a common syntax and each of them can include nested statements—either rulesets or n...
... conditional group rules much like the values of properties, each at-rule has a different syntax. nevertheless, several of them can be grouped into a special category named conditional group rules. these statements share a common syntax and each of them can include nested statements—either rulesets or nested at-rules. furthermore, they all convey a common semantic meaning—they all link some
type of condition, which at any time evaluates to either true or false. if the condition evaluates to true, then all of the statements within the group will be applied. conditional group rules are defined in css conditionals level 3 and are: @media, @supports, @document. (deferred to level 4 of css spec) since each conditional group may also contain nested statements, there may be an unspecif...
Attribute selectors - CSS: Cascading Style Sheets
u could also use hyphenated attributes without double quotes */ div[data-lang="zh-tw"] { color: purple; } html <div lang="en-us en-gb en-au en-nz">hello world!</div> <div lang="pt">olá mundo!</div> <div lang="zh-cn">äøēęØå„½ļ¼</div> <div lang="zh-tw">äøēęØå„½ļ¼</div> <div data-lang="zh-tw">äøēęØå„½ļ¼</div> result html ordered lists the html specification requires the
type attribute to be matched case-insensitively due to it primarily being used in the <input> element, trying to use attribute selectors to with the
type attribute of an ordered list doesn't work without the case-sensitive modifier. css /* list
types require the case sensitive flag due to a quirk in how html treats the
type attribute. */ ol[
type="a"] { list-style-
type: lower-alpha; background: r...
... to be matched case-insensitively due to it primarily being used in the <input> element, trying to use attribute selectors to with the
type attribute of an ordered list doesn't work without the case-sensitive modifier. css /* list
types require the case sensitive flag due to a quirk in how html treats the
type attribute. */ ol[
type="a"] { list-style-
type: lower-alpha; background: red; } ol[
type="a" s] { list-style-
type: lower-alpha; background: lime; } ol[
type="a" s] { list-style-
type: upper-alpha; background: lime; } html <ol
type="a"> <li>example list</li> </ol> result specifications specification status comment selectors level 4the definition of 'attribute selectors' in that specification. working draft adds modifier for ascii case-...
Using CSS animations - CSS: Cascading Style Sheets
nt fires as soon as the animation starts, and in our case, that happens before our code runs. so we’ll start the animation ourselves by setting the class of the element to the style that gets animated after the fact. receiving the events the events get delivered to the listener() function, which is shown below. ...
...started: elapsed time is " + event.elapsedtime; break; case "animationend": l.innerhtml = "ended: elapsed time is " + event.elapsedtime; break; case "animationiteration": l.innerhtml = "new loop started at time " + event.elapsedtime; break; } document.getelementbyid("output").appendchild(l); } this code, too, is very simple. it simply looks at the event.
type to determine which kind of animation event occurred, then adds an appropriate note to the <ul> (unordered list) we’re using to log these events. the output, when all is said and done, looks something like this: started: elapsed time is 0 new loop started at time 3.01200008392334 new loop started at time 6.00600004196167 ended: elapsed time is 9.234000205993652 note that the times are v...
CSS Box Alignment - CSS: Cascading Style Sheets
r may contain one or many alignment subjects. the below image shows an alignment container with two alignment 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 al...
...the gap property with the same values. also, be aware that other things may increase the visual gap displayed, for example using the space distribution keywords or adding margins to items. ...
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
vertical-lr. this gives you a left-to-right block flow direction and a vertical inline direction. boxes with a different writing mode to their parent when a nested box is assigned a different writing mode to its parent, then an inline level box will display as if it has display: inline-block. a block-level box will establish a new block formatting context, meaning that if its inner display
type would be flow, it will get a computed display
type of flow-root. this is shown in the next example where the box which displays as horizontal-tb contains a float which is contained due to its parent establishing a new bfc. replaced elements replaced elements such as images will not change their orientation based on the writing-mode property. however, replaced elements such as form controls wh...
...s logical properties and values specification includes logical versions of the properties that control margins, padding and borders as well as other mappings for things that we have typically used physical directions to specify. summary in most cases, flow layout works as you would expect it to when changing the writing mode of the document or parts of the document. this can be used to properly
typeset vertical languages or for creative reasons. css is making this easier by way of introducing logical properties and values so that when working in a vertical writing mode sizing can be based on element's inline and block size. this will be useful when creating components which can work in different writing-modes. see also writing modes external resources css writing modes, jen simmons ...
In Flow and Out of Flow - CSS: Cascading Style Sheets
in flow, will be laid out using this method. in the following example i have a heading, paragraph, a list and a final paragraph which contains a strong element. the heading and paragraphs are block level, the strong element inline. the list is displayed using flexbox to arrange the items into a row, however it too is participating in block and inline layout - the container has an outside display
type of block. all of the elements can be said to be in flow. appearing on the page in the order that they are in the source. taking an item out of flow all elements are in-flow apart from: floated items items with position: absolute (including position: fixed which acts in the same way) the root element (html) out of flow items create a new block formatting context (bfc) and therefore eve...
...prevent overlaps. whether that involves clearing floats, or ensuring that an element with position: absolute does not sit on top of some other content. for this reason methods which remove elements from being in-flow should be used with understanding of the effect that they have. summary in this guide we have covered the ways to take an element out of flow in order to achieve some very specific
types of positioning. in the next guide we will look at a related issue, that of creating a block formatting context, in formatting contexts explained. see also learn layout: positioning ...
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
o a product listing using auto-placement. as you can see from this set of examples, there is often more than one way to achieve the result you want with grid layout. choose the method you find most helpful for the problems that you are solving and the designs that you need to implement. a responsive layout with 1 to 3 fluid columns using grid-template-areas many websites are a variation of this
type of layout, with content, sidebars, a header and a footer. in a responsive design, you may want to display the layout as a single column, adding a sidebar at a certain breakpoint and then bring in a three-column layout for wider screens. i am going to create this layout using the named template areas that we learned about in the guide grid template areas. my mark-up is a container with element...
...around with the location of elements. you could always begin to use grid in this way for prototyping, even if you can’t rely on it fully in production due to the browsers that visit your site. a flexible 12-column layout if you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. we can create this
type of system using css grid layout. as a simple example, i am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. this means that we will have twelve grid lines named col-start. .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color...
Stacking context example 2 - CSS: Cascading Style Sheets
tacking context hierarchy: root stacking context div #2 (z-index 2) div #3 (z-index 1) div #4 (z-index 10) note: it is worth remembering that in general the html hierarchy is different from the stacking context hierarchy. in the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent. ...
... note: it is worth remembering that in general the html hierarchy is different from the stacking context hierarchy. in the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent. ...
Stacking context example 3 - CSS: Cascading Style Sheets
vel menus, or by using individual (and different) z-index values assigned through the id selector instead of class selector, or by flattening the html hierarchy. note: in the source code you will see that second-level and third level menus are made of several divs contained in an absolutely positioned container. this is useful to group and position all of them at once. ...
...ning the html hierarchy. note: in the source code you will see that second-level and third level menus are made of several divs contained in an absolutely positioned container. this is useful to group and position all of them at once. ...
Descendant combinator - CSS: Cascading Style Sheets
— the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. additionally, the white space characters of which the combinator is comprised may contain any number of css comments. ...
...of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. additionally, the white space characters of which the combinator is comprised may contain any number of css comments. ...
WebKit CSS extensions - CSS: Cascading Style Sheets
p-collapse -webkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style -webkit-marquee -webkit-mask-box-image-outset -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-source -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-
type -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-hi...
...ens -webkit-justify-content -webkit-justify-items -webkit-justify-self -webkit-line-break m -webkit-mask -webkit-mask-clip -webkit-mask-composite -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-repeat -webkit-mask-size o-r -webkit-opacity -webkit-order -webkit-perspective -webkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-
type -webkit-shape-image-threshold -webkit-shape-margin -webkit-shape-outside t -epub-text-decoration -webkit-text-color-decoration -webkit-text-decoration-line -webkit-text-decoration-style -epub-text-emphasis -webkit-text-emphasis -epub-text-emphasis-color -webkit-text-emphasis-color -webkit-text-emphasis-position -epub-text-emphasis-style -webkit-text-emphasis-style -webkit-text-...
align-content - CSS: Cascading Style Sheets
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. ...
...f 'align-content' in that specification. working draft adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values. css flexible box layout modulethe definition of 'align-content' in that specification. candidate recommendation initial definition initial valuenormalapplies tomulti-line flex containersinheritednocomputed valueas specifiedanimation
typediscrete ...
<alpha-value> - CSS: Cascading Style Sheets
the <alpha-value> css data
type represents a value that can be either a <number> or a <percentage>, specifying the alpha channel or transparency of a color. syntax the value of an <alpha-value> is given as either a <number> or a <percentage>. if given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. values outside the range of 0 to 1 are permitted, but are clamped to like within the range 0 to 1. if the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque. ...
...between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. values outside the range of 0 to 1 are permitted, but are clamped to like within the range 0 to 1. if the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque. interpolation when animated, values of the <alpha-value> css data
type are interpolated as real, floating-point numbers. the speed of the interpolation is determined by the timing function associated with the animation. examples setting text color opacity here an alpha value is used to set partially transparent text: /* <rgba()> */ color: rgba(34, 12, 64, 0.6); color: rgba(34.0 12 64 / 60%); setting shape image threshold here an alpha value is used to determi...
<angle-percentage> - CSS: Cascading Style Sheets
specifications specification status comment css values and units module level 4the definition of '<angle-percentage>' in that specification. editor's draft css values and units module level 3the definition of '<angle-percentage>' in that specification. ...
... specifications specification status comment css values and units module level 4the definition of '<angle-percentage>' in that specification. editor's draft css values and units module level 3the definition of '<angle-percentage>' in that specification. ...
<angle> - CSS: Cascading Style Sheets
as with all dimensions, there is no space between the unit literal and the number. the angle unit is optional after the number 0. optionally, it may be preceded by a single + or - sign. ...
...resents an angle value expressed in degrees, gradians, radians, or turns. it is used, for example, in <gradient>s and in some transform functions. 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 <angle> data
type consists of a <number> followed by one of the units listed below. as with all dimensions, there is no space between the unit literal and the number. the angle unit is optional after the number 0. optionally, it may be preceded by a single + or - sign. positive numbers represent clockwise angles, while negative numbers represent counterclockwise angles. for static properties of a given unit, any ...
animation - CSS: Cascading Style Sheets
animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn,
type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.add(
type); btn.title =
type.touppercase(
type); } function playpause (i) { var btn = button[i]; var anim = animation[i]; if (btn.classlist.contains('play')) { anim.style.animationplaystate = 'running'; togglebutton(btn, 'pause'); } else if (btn.classlist.contains('pause')) { anim...
...es toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:animation-name: as specifiedanimation-duration: as specifiedanimation-timing-function: as specifiedanimation-delay: as specifiedanimation-direction: as specifiedanimation-iteration-count: as specifiedanimation-fill-mode: as specifiedanimation-play-state: as specifiedanimation
typediscrete formal syntax <single-animation>#where <single-animation> = <time> | <timing-function> | <time> | <single-animation-iteration-count> | <single-animation-direction> | <single-animation-fill-mode> | <single-animation-play-state> | [ none | <keyframes-name> ]where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function><single-animation-iteration-count> = infini...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
<div>lorem</div> firefox checkmenuitem div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; } <div>lorem</div> firefox color-well div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; } <div>lorem</div> safari input
type=color continuous-capacity-level-indicator div{ color: black; -moz-appearance: continuous-capacity-level-indicator; -webkit-appearance: continuous-capacity-level-indicator; } <div>lorem</div> safari default-button div{ color: black; -moz-appearance: default-button; -webkit-appearance: default-button; } <div>lorem</div> ...
...oz-window-frame-left firefox removed in firefox 64. -moz-window-frame-right firefox removed in firefox 64. -moz-window-titlebar firefox removed in firefox 64. -moz-window-titlebar-maximized firefox removed in firefox 64. ...
aspect-ratio - CSS: Cascading Style Sheets
ys work with the content box dimensions. <ratio> the box’s preferred aspect ratio is the specified ratio of width / height. size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing. formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritednocomputed valueas specifiedanimation
typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet. chrome is also shipping this feature. in firefox, the internal stylesheet...
...tio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet. chrome is also shipping this feature. in firefox, the internal stylesheet rule looks like this: img, input[
type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } specifications specification status comment css box sizing module level 4the definition of 'aspect-ratio' in that specification. editor's draft initial definition browser compatibility the compatibility table on this page is generated from structured d...
background-attachment - CSS: Cascading Style Sheets
ve to the scrollable area of the element rather than to the border framing them. scroll the background is fixed relative to the element itself and does not scroll with its contents. (it is effectively attached to the element's border.) formal definition initial valuescrollapplies toall elements. it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation
typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples simple example html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. </p> css p { background-image: url("http...
... how she was ever to get out again. </p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images. you can specify a different <attachment> for each background, separated by commas. each image is matched with the corresponding attachment
type, from first specified to last. html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying 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 ...
background-image - CSS: Cascading Style Sheets
age's overall purpose, it is better to describe it semantically in the document. mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements. ...
...demos.org/files/7693/catfront.png"); background-color: transparent; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-image' in that specification. candidate recommendation from css2 revision 1, the property has been extended to support multiple backgrounds and any <image> css data
type. css level 2 (revision 1)the definition of 'background-image' in that specification. recommendation from css1, the way images with and without intrinsic dimensions are handled is now described. css level 1the definition of 'background-image' in that specification. recommendation initial definition. ...
block-size - CSS: Cascading Style Sheets
et; 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 defines the other dimension of the element. ...
...tednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation
typea length, percentage or calc(); syntax values the block-size property takes the same values as the width and height properties. ...
border-block-start-width - CSS: Cascading Style Sheets
border-block-start-width: 5px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. ...
...tageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation
typea length values <'border-width'> the width of the border. see border-width. ...
border-bottom-left-radius - CSS: Cascading Style Sheets
the ellipse to use for the border in that corner. the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner. values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data
type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the momen...
...nition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation
typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code . an arc of circle is used as the border div { border-bottom-left-radius: 40px 40px; } . an arc of ellipse is used as the border div { border-bottom-l...
border-bottom-right-radius - CSS: Cascading Style Sheets
the ellipse to use for the border in that corner. the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner. values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data
type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the momen...
...nition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation
typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code . an arc of circle is used as the border div { border-bottom-right-radius: 40px 40px; } . an arc of ellipse is used as the border div { border-bottom-...
border-color - CSS: Cascading Style Sheets
and:border-top-color: currentcolorborder-right-color: currentcolorborder-bottom-color: currentcolorborder-left-color: currentcolorapplies toall elements. ...
...ne; } 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-end-end-radius - CSS: Cascading Style Sheets
it; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property. syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data
type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the momen...
...nition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
border-end-start-radius - CSS: Cascading Style Sheets
t; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property. syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data
type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the momen...
...nition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
border-image-outset - CSS: Cascading Style Sheets
nt has border-width: 1em 2px 0 1.5rem, and border-image-outset: 2, the final border-image-outset would be calculated as 2em 4px 0 3rem. formal definition initial value0applies toall elements, except internal table elements when border-collapse is collapse. ...
...em 2px 0 1.5rem, and border-image-outset: 2, the final border-image-outset would be calculated as 2em 4px 0 3rem. formal definition initial value0applies toall elements, except internal table elements when border-collapse is collapse. ...
border-image - CSS: Cascading Style Sheets
the source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally:...
...age-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 ...
color - CSS: Cascading Style Sheets
100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30.0 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); /* global values */ color: inherit; color: initial; color: unset; the color property is specified as a single <color> value. note that the value must be a uniform color. it can't be a <gradient>, which is actually a
type of <image>. values <color> sets the color of the textual and decorative parts of the element. accessibility concerns it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page. color contrast ratio is determined by comp...
... 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> - 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 ...
...e only means of conveying a specific message, action, or result. see color and color contrast for more information. examples color value tester in this example we provide a <div> and a text input. entering a valid color into the input causes the <div> to adopt that color, allowing you to test our color values. ...
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
* <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 specified as 1em. for all other layout
types it is 0. <length> the size of the gap between columns, defined as a <length>. the <length> property's value must be non-negative. <percentage> the size of the gap between columns, defined as a <percentage>. the <percentage> property's value must be non-negative. formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer...
...n columns, defined as a <percentage>. the <percentage> property's value must be non-negative. ...
conic-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
...ic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to, or size of the <image> is set to something other than the element size. to create a conic gradient that repeats so as to fill a 360 degree rotation, use the repeating-conic-gradient() function instead. because <gradient>s belong to the <image> data
type, they can only be used where <image>s can be used. for this reason, conic-gradient() won't work on background-color and other properties that use the <color> data
type. why is it called a "conic" gradient? if the color stops are much lighter on one side than the other, it can look like a cone from above. composition of a conic gradient the conic-gradient syntax is similar to the radial-gradi...
<display-internal> - CSS: Cascading Style Sheets
e elements behave like <rt> html elements. ruby-base-container these elements behave like <rbc> html elements generated as anonymous boxes. ruby-text-container these elements behave like <rtc> html elements. examples css tables example the following example demonstrates laying out a simple form using css table layout. ...
...bc> html elements generated as anonymous boxes. ruby-text-container these elements behave like <rtc> html elements. examples css tables example the following example demonstrates laying out a simple form using css table layout. html <main> <div> <label for="name">name</label> <input
type="text" id="name" name="name"> </div> <div> <label for="age">age</label> <input
type="text" id="age" name="age"> </div> </main> css main { display: table; } div { display: table-row; } label, input { display: table-cell; margin: 5px; } result specifications specification status css display module level 3the definition of 'display-internal' in that specification. candidate recommendation ...
flex-basis - CSS: Cascading Style Sheets
or height property"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword). ...
...>1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-
type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .flex1 { flex-basis: au...
font-stretch - CSS: Cascading Style Sheets
rcentage> 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 true
type or open
type 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 for details. keyword to numeric mapping the table below shows the mapping between keyword values and numeric percentages: keyword percentage ultra-condensed 50% ...
...h less than 100% select the condensed face, while all other values select the normal face. league mono variable is a variable font that offers something like a continuous range of widths for different percentage values of font-stretch. formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation
typea font stretch formal syntax <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting font stretch percentages note that this example will only work in browsers that support <percentage> values. html <div class="container"> <p...
font-synthesis - CSS: Cascading Style Sheets
the font-synthesis 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 includ...
...japanese, korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text. in these cases, it may be desirable to switch off the browser's default font-synthesis. formal definition initial valueweight styleapplies toall elements. ...
<frequency> - CSS: Cascading Style Sheets
as with all css dimensions, there is no space between the unit literal and the number. units hz represents a frequency in hertz. examples: 0hz, 1500hz, 10000hz. khz represents a frequency in kilohertz. examples: 0khz, 1.5khz, 10khz. note: although the number 0 is always the same regardless of unit, the unit may not be omitted. in other words, 0 is invalid and does not represent 0hz or 0khz. though the units are case-insensitive, it is good practice to use a capital "h" for hz and khz, as specified in the si. ...
...ing a unit. 7 hz no space is allowed between the number and the unit. 0 although unitless zero is an allowable <length>, it's an invalid <frequency>. specifications specification status comment css values and units module level 3the definition of '<frequency>' in that specification. candidate recommendation initial definition. note: this data
type was initially introduced in css level 2 for the now-obsolete aural media
type, where it was used to define the pitch of the voice. however, the <frequency> data
type has been reintroduced in css3, though no css property is using it at the moment. ...
<gradient> - CSS: Cascading Style Sheets
linear gradient linear gradients transition colors progressively along an imaginary line. they are generated with the linear-gradient() function. ...
...e 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 css gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element to which it applies. syntax the <gradient> data
type is defined with one of the function
types listed below. linear gradient linear gradients transition colors progressively along an imaginary line. they are generated with the linear-gradient() function. radial gradient radial gradients transition colors progressively from a center point (origin). they are generated with the radial-gradient() function. repeating gradient repeating gradie...
grid-auto-flow - CSS: Cascading Style Sheets
a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes. this ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items. ...
...rete formal syntax [ row | column ] | dense examples setting grid auto-placement html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item5"></div> </div> <select id="direction" onchange="changegridautoflow()"> <option value="column">column</option> <option value="row">row</option> </select> <input id="dense"
type="checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { backg...
linear-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ted. description as with any gradient, a linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to. to create a linear gradient that repeats so as to fill its container, use the repeating-linear-gradient() function instead. because <gradient>s belong to the <image> data
type, they can only be used where <image>s can be used. for this reason, linear-gradient() won't work on background-color and other properties that use the <color> data
type. composition of a linear gradient a linear gradient is defined by an axis—the gradient line—and two or more color-stop points. each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient() fu...
margin-bottom - CSS: Cascading Style Sheets
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 containing block. auto the browser selects a suitable value to use. see margin. ...
...to the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display
types other than table-caption, table and inline-table. ...
margin-inline - CSS: Cascading Style Sheets
erties: margin-inline-end margin-inline-start syntax values the margin-inline property takes the same values as the margin-left property. ...
...omment css logical properties and values level 1the definition of 'margin-inline' in that specification. editor's draft initial definition. initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation
typediscrete ...
margin-left - CSS: Cascading Style Sheets
the border area inside the available width, if fixed. absolutely positioned layout mode flex, inline-flex any any 0, except if there is any positive horizontal free space. in this case, it is evenly distributed to all horizontal auto margins. ...
... horizontal auto margins. flexbox layout mode formal definition initial value0applies toall elements, except elements with table display
types other than table-caption, table and inline-table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation
typea length formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-left' in that specification. working draft no significant chang...
margin-right - CSS: Cascading Style Sheets
the border area inside the available width, if fixed. absolutely positioned layout mode flex, inline-flex any any 0, except if there is any positive horizontal free space. in this case, it is evenly distributed to all horizontal auto margins. ...
... horizontal auto margins. flexbox layout mode formal definition initial value0applies toall elements, except elements with table display
types other than table-caption, table and inline-table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation
typea length formal syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-right' in that specification. working draft no significant ...
margin-top - CSS: Cascading Style Sheets
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 containing block. auto the browser selects a suitable value to use. see margin. ...
...to the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display
types other than table-caption, table and inline-table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation
typea length formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specifications specification status comment css basic box modelthe definition of 'margin-top' in that specification. working draft ...
margin - CSS: Cascading Style Sheets
in that specification. recommendation removes the effect of top and bottom margins on inline elements. css level 1the definition of 'margin' in that specification. recommendation initial definition. initial valueas each of the properties of the shorthand:margin-bottom: 0margin-left: 0margin-right: 0margin-top: 0applies toall elements, except elements with table display
types other than table-caption, table and inline-table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valueas each of the properties of the shorthand:margin-bottom: the percentage as specified or the absolute lengthmargin-left: the percentage as specified or the absolute lengthmargin-right: the percentage as specified or the...
...d ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valueas each of the properties of the shorthand:margin-bottom: the percentage as specified or the absolute lengthmargin-left: the percentage as specified or the absolute lengthmargin-right: the percentage as specified or the absolute lengthmargin-top: the percentage as specified or the absolute lengthanimation
typea length ...
mask-border-mode - CSS: Cascading Style Sheets
border-mode: unset; values luminance the luminance values of the mask border image are used as the mask values. alpha the alpha values of the mask border image are used as the mask values. ...
...ed as the mask values. formal definition initial valuealphaapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation
typediscrete formal syntax luminance | alpha examples basic usage this property doesn't yet seem to have support anywhere. when browsers support it, it will specify the
type of blending mode used for the mask border — luminance or alpha: mask-border-mode: luminance; mask-border-mode: alpha; specifications specification status comment css masking module level 1the definition of 'mask-border-mode' in that specification. candidate recommendation initial definition ...
mask-mode - CSS: Cascading Style Sheets
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 luminance values of the mask layer image should be used as the mask values. if it is of
type <image>, the alpha values of the mask layer image should be used as the mask values. formal definition initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifie...
...ce>, the luminance values of the mask layer image should be used as the mask values. if it is of
type <image>, the alpha values of the mask layer image should be used as the mask values. ...
min() - CSS: Cascading Style Sheets
of the min() value as providing the maximum value a property can have. syntax the min() function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as the value. the expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument
type (like <length>). you can use different units for each value in your expression, if you wish. you may also use parentheses to establish computation order when needed. notes math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been spe...
...elf, along with the margin, border, and padding, will be 100% of its parent's width. we declare the input and label to be the lesser of 40% of the form width up to the padding or 400px wide, whichever is smaller. in other words, the widest that the label and input can be is 400px. the narrowest they will be is 40% of the form's width, which on a smartwatch's screen is very small. <form> <label>
type something:</label> <input
type="text"> </form> specifications specification status comment css values and units module level 4the definition of 'min()' in that specification. editor's draft initial definition. ...
<number> - CSS: Cascading Style Sheets
the speed of the interpolation is determined by the timing function associated with the animation. examples valid numbers 12 a raw <integer> is also a <number>. ...
...the speed of the interpolation is determined by the timing function associated with the animation. examples valid numbers 12 a raw <integer> is also a <number>. ...
offset-position - CSS: Cascading Style Sheets
t 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). ...
...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. ...
order - CSS: Cascading Style Sheets
s to the correct reading order. flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation
typean integer formal syntax <integer> examples ordering items in a flex container this example uses css to create a classic two-sidebar layout surrounding a content block. the flexible box layout module automatically creates blocks of equal vertical size and uses as much horizontal space as available. html <header>...</header> <main> <article>article</article> <nav>nav</nav> <aside>aside...
...1; } main > aside { width: 200px; order: 3; } result specifications specification status comment css flexible box layout modulethe definition of 'order' in that specification. candidate recommendation initial definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation
typean integer ...
orphans - CSS: Cascading Style Sheets
line of a paragraph that appears alone at the bottom of a page. (the paragraph continues on a following page.) syntax values <integer> the minimum number of lines that can stay by themselves at the bottom of a fragment before a fragmentation break. the value must be positive. formal definition initial value2applies toblock container elementsinheritedyescomputed valueas specifiedanimation
typediscrete formal syntax <integer> examples setting a minimum orphan size of three lines html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one. it is used to demonstrate how orphans work.</p> <p>this is the third paragraph. it has a little bit more text than the first one.</p> </div> css div { ...
... </div> css div { background-color: #8cffa0; height: 150px; columns: 3; orphans: 3; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level 3the definition of 'orphans' in that specification. candidate recommendation extends orphans to apply to any
type of fragment, including pages, regions, or columns. css level 2 (revision 1)the definition of 'orphans' 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 ...
overflow-block - CSS: Cascading Style Sheets
as visible, but still establishes a new block-formatting context. desktop browsers provide scrollbars if content overflows. formal definition initial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation
typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-block:hidden</code> — hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea c...
... status comment css overflow module level 3the definition of 'overflow-block' in that specification. working draft initial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation
typediscrete ...
overflow-wrap - CSS: Cascading Style Sheets
anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are not considered when calculating min-content intrinsic sizes. formal definition initial valuenormalapplies tonon-replaced inline elementsinheritedyescomputed valueas specifiedanimation
typediscrete formal syntax normal | break-word | anywhere examples comparing overflow-wrap, word-break, and hyphens this example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word. html <p>they say the fishing is excellent at lake <em class="normal">chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though i've never been there myself. (<code>normal...
...-word; } .word-break { word-break: break-all; } .hyphens { hyphens: auto; } result specifications specification status comment css text module level 3the definition of 'overflow-wrap' in that specification. working draft initial definition initial valuenormalapplies tonon-replaced inline elementsinheritedyescomputed valueas specifiedanimation
typediscrete ...
overscroll-behavior-y - CSS: Cascading Style Sheets
planation. /* 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 observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying...
...efreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll. none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented. formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation
typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling vertically .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a full example and explanation. specifications specification status comment css overscroll behavior module level 1the definition of 'oversc...
overscroll-behavior - CSS: Cascading Style Sheets
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 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 overfl...
...efreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll. none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented. formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation
typediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window. both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts win...
paint() - CSS: Cascading Style Sheets
custom properties are accessible to the paintworklet. specifications speci...
...custom properties are accessible to the paintworklet. specifications specification status comment css painting api level 1the definition of 'paint notation' in that specification. ...
<percentage> - CSS: Cascading Style Sheets
optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. as with all css dimensions, there is no space between the symbol and the number. ...
... element's parent object. numerous properties can use percentages, such as width, height, margin, padding, and font-size. note: only calculated values can be inherited. thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value. syntax the <percentage> data
type consists of a <number> followed by the percentage sign (%). optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. as with all css dimensions, there is no space between the symbol and the number. interpolation when animated, values of the <percentage> data
type are interpolated as real, floating-point numbers. the speed of the interpol...
position - CSS: Cascading Style Sheets
on of any other elements. this value always creates a new stacking context. note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. this effectively inhibits any "sticky" behavior (see the github issue on w3c csswg). description
types of positioning a positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (in other words, it's anything except static.) a relatively positioned element is an element whose computed position value is relative. the top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the hori...
...ints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. one solution is to add will-change: transform to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility. formal definition initial valuestaticapplies toall elementsinheritednocomputed valueas specifiedanimation
typediscretecreates stacking contextyes formal syntax static | relative | absolute | sticky | fixed examples relative positioning relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. in the example below, note how the other elements are placed as if "two" were taking up the space of its normal loc...
<position> - CSS: Cascading Style Sheets
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. ...
... 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. ...
radial-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...r stops. description as with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to. to create a radial gradient that repeats so as to fill its container, use the repeating-radial-gradient() function instead. because <gradient>s belong to the <image> data
type, they can only be used where <image>s can be used. for this reason, radial-gradient() won't work on background-color and other properties that use the <color> data
type. composition of a radial gradient a radial gradient is defined by a center point, an ending shape, and two or more color-stop points. to create a smooth gradient, the radial-gradient() function draws a series of concentric shap...
repeating-conic-gradient() - CSS: Cascading Style Sheets
the midpoint of the color transition. if omitted, the midpoint of the color transition is the midpoint between two color stops. note: rendering of color stops in css gradients follows the same rules as color stops in svg gradients. description example repeating conic gradients include starbursts. the result of the repeating-conic-gradient() function is an object of the <gradient> data
type, which is a special kind of <image>. if neither the first nor the last color stops include include a a color stop angle greater than 0deg or less than 360 degrees respectively, the conic-gradient will not repeat. as with any gradient, a repeating-conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of...
...espectively, the conic-gradient will not repeat. as with any gradient, a repeating-conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to, or the size the <image> is set to if it's set to something other than the element's size. because <gradient>s belong to the <image> data
type, they can only be used where <image>s can be used. for this reason, repeating-conic-gradient() won't work on background-color and other properties that use the <color> data
type. to create a conic gradient that doe not repeat, make the gradient a full 360 degree rotation, or use the conic-gradient() function instead. understanding repeating conic gradients the repeating-conic-gradient syntax...
repeating-linear-gradient() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
...are different, this will result in a sharp visual transition. this can be altered with repeating the first color again as the last color. as with any gradient, a repeating linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to. because <gradient>s belong to the <image> data
type, they can only be used where <image>s can be used. for this reason, repeating-linear-gradient() won't work on background-color and other properties that use the <color> data
type. syntax /* a repeating gradient tilted 45 degrees, starting blue and finishing red, repeating 3 times */ repeating-linear-gradient(45deg, blue, red 33.3%); /* a repeating gradient going from the bottom right to the...
repeating-radial-gradient() - CSS: Cascading Style Sheets
the repeating-radial-gradient() css function creates an image consisting of repeating gradients that radiate from an origin. it is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient() . the function's result is an object of the <gradient> data
type, which is a special kind of <image>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. with each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance betwe...
...lues are different, this will result in a sharp visual transition, which can be mitigated by repeating the first color as the last color. as with any gradient, a repeating radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to. because <gradient>s belong to the <image> data
type, they can only be used where <image>s can be used. for this reason, repeating-radial-gradient() won't work on background-color and other properties that use the <color> data
type. syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green, with the colors repeating every 30px */ repeating-radial-gradient(circle at center, red 0, blue, green 30...
resize - CSS: Cascading Style Sheets
ically, depending on the writing-mode and direction value). ...
... visible, and optionally replaced elements representing images or videos, and iframesinheritednocomputed valueas specifiedanimation
typediscrete formal syntax none | both | horizontal | vertical | block | inline examples disabling resizability of textareas in many browsers, <textarea> elements are resizable by default. you may override this behavior with the resize property. html <textarea>
type some text here.</textarea> css textarea { resize: none; /* disables resizability */ } result using resize with arbitrary elements you can use the resize property to make any element resizable. in the example below, a resizable <div> contains a resizable paragraph (<p> element). html <div class="resizable"> <p class="resizable"> this paragraph is resizable in all directions, bec...
scroll-margin-block-start - CSS: Cascading Style Sheets
candidate recommendation initial definition ...
...scroll-margin-block-start: 10px; scroll-margin-block-start: 1em; /* global values */ scroll-margin-block-start: inherit; scroll-margin-block-start: initial; scroll-margin-block-start: unset; values <length> an outset from the block start edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation
typeby computed value
type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-start' in that specification. candidate recommendation initial definition ...
scroll-margin-inline-end - CSS: Cascading Style Sheets
tax /* <length> values */ scroll-margin-inline-end: 10px; scroll-margin-inline-end: 1em; /* global values */ scroll-margin-inline-end: inherit; scroll-margin-inline-end: initial; scroll-margin-inline-end: unset; values <length> an outset from the inline end edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation
typeby computed value
type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html that ...
...ck. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-
type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-
type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; ...
scroll-margin-inline-start - CSS: Cascading Style Sheets
gth> values */ scroll-margin-inline-start: 10px; scroll-margin-inline-start: 1em; /* global values */ scroll-margin-inline-start: inherit; scroll-margin-inline-start: initial; scroll-margin-inline-start: unset; values <length> an outset from the inline start edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation
typeby computed value
type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html that r...
...ck. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-
type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-
type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; ...
scroll-margin-inline - CSS: Cascading Style Sheets
outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation
typeby computed value
type formal syntax <length>{1,2} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html ...
...ck. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-
type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-
type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; ...
scroll-margin - CSS: Cascading Style Sheets
outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation
typeby computed value
type formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html t...
...ck. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-
type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-
type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; ...
scroll-snap-coordinate - CSS: Cascading Style Sheets
the snap coordinates from the start edge of the element’s border box. for each pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate. ...
... <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer coordinate50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-
type: mandatory; font-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-snap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coordinate: 50px 0; } .scrollcontainer > div:nth-child(even) { bac...
scroll-snap-destination - CSS: Cascading Style Sheets
t edge of the scroll container’s visual viewport. the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
... <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer destination50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-
type: mandatory; scroll-snap-destination: 20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .scrollcontainer > div:...
widows - CSS: Cascading Style Sheets
line of a paragraph that appears alone at the top of a page. (the paragraph is continued from a prior page.) syntax values <integer> the minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. the value must be positive. formal definition initial value2applies toblock container elementsinheritedyescomputed valueas specifiedanimation
typediscrete formal syntax <integer> examples controlling column widows html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one. it is used to demonstrate how widows work.</p> <p>this is the third paragraph. it has a little bit more text than the first one.</p> </div> css div { background-color: #...
...n the first one.</p> </div> css div { background-color: #8cffa0; columns: 3; widows: 2; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level 3the definition of 'widows' in that specification. candidate recommendation extends widows to apply to any
type of fragment, including pages, regions, or columns. css multi-column layout modulethe definition of 'widows' in that specification. working draft recommendations to consider widows in relation to columns. css level 2 (revision 1)the definition of 'widows' in that specification. recommendation initial definition. ...
Web Audio playbackRate explained - Developer guides
> element, and set its src to a file of our choice. ...
...presents half normal speed (the playbackrate is a multiplier applied to the original rate.) a complete example let's create a <video> element first, and set up video and playback rate controls in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v"
type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm"
type='video/webm' /> </video> <form> <input id="pbr"
type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('input'...
Media buffering, seeking, and time ranges - Developer guides
t would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3"
type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.wi...
...end of seekable media. if range requests are enabled this value usually becomes the duration of the media almost instantly. it is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display. so let's build this. ...
DOM onevent handlers - Developer guides
on-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, onkeypress, 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<event
type>: <button onclick="handleclick()">, or by setting the corresponding property from javascript: document.queryselector("button").onclick = function(event) { … }. an onevent event handler property serves as a placeholder of sorts, to which a single event handler can be assigned. in order to allow multiple handlers to be installed for the same event on a given object, you can call its addeve...
...on. living standard html5the definition of 'event handlers' in that specification. recommendation browser compatibility detecting the presence of event handler properties you can detect the presence of an event handler property with the javascript in operator. for example: if ("onsomenewfeature" in window) { /* do something amazing */ } event handlers and proto
types you can't set or access the values of any idl-defined attributes on dom proto
type objects. that means you can't, for example, change window.proto
type.onload. in the past, event handlers (onload, etc.) weren't implemented as idl attributes in gecko, so you were able to do this for those. now you can't. this improves compatibility. ...
Event developer guide - Developer guides
events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different
types. the overview page provides an introduction to the design pattern and a summary of the
types of incidents which are defined and reacted to by modern web browsers. the custom events page describes how the event code design pattern can be used in custom code to define new event
types emitted by user objects, register listener functions to handle those events, and trigger the events in user code. the remaining pages describe how to use events of different kinds defined by web browsers. unfortunately, these events have been defined piece by piece as web br...
...in the downloading, parsing, and rendering of the web page for display to the user. the user interaction with the web page contents can trigger events. the events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. the different
types of user interaction-driven events include: the original 'click' event, mouse events, mouse gesture events, and both touch events and the earlier mozilla experimental touch events, now deprecated. the modification of the web page in structure or content might trigger some events, as explained in the mutation events page, but the use of these events has been deprecated in favour of the lig...
Content categories - Developer guides
group elements that share common characteristics. this is a loose grouping (it doesn't actually create a relationship among elements of these categories), but they help define and describe the categories' shared behavior and their associated rules, especially when you come upon their intricate details. it's also possible for elements to not be a member of any of these categories. there are three
types of content categories: main content categories, which describe common rules shared by many elements. form-related content categories, which describe rules common to form-related elements. specific content categories, which describe rare categories shared only by a few elements, sometimes only in a specific context. note: a more detailed discussion of these content categories and their co...
...ve 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 is present palpable content content is palpable when it's neither empty or hidden; it is content that is rendered and is substantive. elements whose model is flow content or phrasing content should have at least one node w...
Parsing and serializing XML - Developer guides
element.nodename); parsing url-addressable resources into dom trees using xmlhttprequest here is sample code that reads and parses a url-addressable xml file into a dom tree: var xhr = new xmlhttprequest(); xhr.onload = function() { dump(xhr.responsexml.documentelement.nodename); } xhr.onerror = function() { dump("error while getting xml."); } xhr.open("get", "example.xml"); xhr.response
type = "document"; xhr.send(); the value returned in the xhr object's responsexml field is a document constructed by parsing the xml. if the document is html, the code shown above will return a document. if the document is xml, the resulting object is actually a xmldocument. the two
types are essentially the same; the difference is largely historical, although differentiating has some practical ben...
...in some browsers it is, while in others it is simply an alias for the document interface. ...
The Unicode Bidirectional Text Algorithm - Developer guides
ng to produce localization-ready web content or apps. in this guide, we'll take a look at the bidi algorithm and learn in general what it does and how it applies to your content, so that you'll be better prepared when using the features of html and css to which the algorithm applies while determining the order and directionality of text during rendering. fundamentals (base direction, character
types, etc) the algorithm character level directionality directional runs (what they are, how base direction applies) handling neutral characters overriding the algorithm content about using html and css to override the default behavior of the algorithm; include info about isolating ranges etc. overiding bidi using unicode control characters unicode provides a number of special control charac...
...base direction to ltr, isolating the embedded content from the surrounding text right-to-left isolate (lri) u+2067 ⁧ dir="rtl" sets the base direction to rtl, isolating the embedded content from the surrounding text first strong isolate (fsi) u+2068 ⁨ dir="auto" isolates the content and sets the base direction according to the first strongly-
typed directional character in the embedded content left-to-right embedding (lre) u+202a ‪ dir="ltr" sets the base direction to ltr but allows the embedded text to interact with the surrounding content; this risks the effect spilling over to the outer content right-to-left embedding (rle) u+202b ‫ dir="rtl" sets the base direction to rtl, but let...
The Web Open Font Format (WOFF) - Developer guides
woff (the web open font format) is a web font format developed by mozilla in concert with
type supply, letterror, and other organizations. it uses a compressed version of the same table-based sfnt structure used by true
type, open
type, and open font format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired. there are three main benefits to using woff: the font data is compressed, so sites using woff will use less bandwidth and will load faster than if they used equivalent uncompressed true
type or open
type files. many font vendors that are unwilling to license their true
type or open
type format fonts for use on the web will license woff format fonts. this improves availability of fon...
...teroperable font format for the web, unlike other current font formats. there are two versions of woff; woff and woff2, they mostly differ in regard to the compression algorithm used. in @font-face they are identified by the 'woff' and respectively 'woff2' format descriptor. using woff you can use the @font-face css property to use woff fonts for text in web content. it works exactly like open
type and true
type format fonts do, except it will likely let your content download more efficiently due to the addition of compression. tools for working with woff fonts tools for working with woff fonts are available. sfnt2woff and woff2sfnt convert between woff and open
type. specifications specification status comment woff file format 2.0 recommendation new c...
Developer guides
ding reverb/compression effects to audio, or grayscale/sepia filters to video. this article provides a reference to explain what you need to do. events developer guide events refer to two things: a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page; and the naming, characterization, and use of a large number of incidents of different
types. ajax ajax is a term that defines a group of technologies allowing web applications to make quick, incremental updates to the user interface without reloading the entire browser page. this makes the application faster and more responsive to user actions. graphics on the web modern web sites and applications often need to present graphics of varying sophistication. guide to web apis a list ...
...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, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying te...
<area> - HTML: Hypertext Markup Language
" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe because it can leak origins and paths from tls-protected resources to insecure origins. rel for anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. the value is a space-separated list of link
types values. the values and their semantics will be registered by some authority that might have meaning to the document author. the default relationship, if no other is given, is void. use this attribute only if the href attribute is present. shape the shape of the associated hot spot. the specifications for html defines the values rect, which defines a rectangular region; circle, which defines a ...
... deprecated attributes name define a names for the clickable area so that it can be scripted by older browsers. nohref indicates that no hyperlink exists for the associated area. note: since html5, omitting the href attribute is sufficient. tabindex a numeric value specifying the position of the defined area in the browser tabbing order. this attribute is global in html5.
type no effect. browsers ignore it. (the w3c 5.3 fork of the html specification defines it as valid, but the canonical html specification doesn’t, and it has no effect in any user agents.) examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html" alt="click to go left"> <area shape="circle" coords="275,75,75" href="right.html" alt="click to go right"> </map> <im...
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
ole no corresponding role permitted aria roles application, document, img, none, presentation dom interface htmlembedelement attributes this element's attributes include the global attributes. height the displayed height of the resource, in css pixels. this must be an absolute value; percentages are not allowed. src the url of the resource being embedded.
type the mime
type to use to select the plug-in to instantiate. width the displayed width of the resource, in css pixels. this must be an absolute value; percentages are not allowed. usage notes you can use the object-position property to adjust the positioning of the embedded object within the element's frame, and the object-fit property to control how the object's size is adjusted to fit withi...
...t the plug-in to instantiate. width the displayed width of the resource, in css pixels. this must be an absolute value; percentages are not allowed. usage notes you can use the object-position property to adjust the positioning of the embedded object within the element's frame, and the object-fit property to control how the object's size is adjusted to fit within the frame. examples <embed
type="video/quicktime" src="movie.mov" width="640" height="480" title="title of my video"> accessibility concerns use the title attribute on an embed element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. the title's value should concisely describe the embedded content. without a title, they may not be able to determ...
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
l be a flex formatting context. otherwise, it establishes a block formatting context. you can feel free to style the <fieldset> and <legend> in any way you want to suit your page design. examples simple fieldset this example shows a really simple <fieldset> example, with a <legend>, and a single control inside it. <form action="#"> <fieldset> <legend>simple fieldset</legend> <input
type="radio" id="radio"> <label for="radio">spirit of radio</label> </fieldset> </form> disabled fieldset this example shows a disabled <fieldset> with two controls inside it. note how both the controls are disabled due to being inside a disabled <fieldset>. <form action="#"> <fieldset disabled> <legend>disabled fieldset</legend> <div> <label for="name">name: </label> ...
..." id="radio"> <label for="radio">spirit of radio</label> </fieldset> </form> disabled fieldset this example shows a disabled <fieldset> with two controls inside it. note how both the controls are disabled due to being inside a disabled <fieldset>. <form action="#"> <fieldset disabled> <legend>disabled fieldset</legend> <div> <label for="name">name: </label> <input
type="text" id="name" value="chris"> </div> <div> <label for="pwd">arche
type: </label> <input
type="password" id="pwd" value="wookie"> </div> </fieldset> </form> technical summary content categories flow content, sectioning root, listed, form-associated element, palpable content. permitted content an optional <legend> element, followed by flow cont...
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. ...
... were assigned.") in earlier versions of the html specification, the <i> element was merely a presentational element used to display text in italics, much like the <b> element was used to display text in bold letters. this is no longer true, as these tags now define semantics rather than typographic appearance. a browser will typically still display the contents of the <i> element in italic
type, but is, by definition, no longer required to do so. to display text in italic
type, authors should use the css font-style property. be sure the text in question is not actually more appropriately marked up with another element. use <em> to indicate stress emphasis. use <strong> to indicate importance, seriousness, or urgency. use <mark> to indicate relevance. use <cite> to mark u...
<keygen> - HTML: Hypertext Markup Language
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. this attribute enables you to place <keygen> elements anywhere within a document, not just as descendants of their form elements. key
type the
type of key generated. the default value is rsa. name the name of the control, which is submitted with the form data. the element is written as follows: <keygen name="name" challenge="challenge string" key
type="
type" keyparams="pqg-params"> the key
type parameter is used to specify what
type of key is to be generated. valid values are "rsa", which is the default, "dsa" and "ec".
...the keyparams attribute is required for dsa and ec key generation and ignored for rsa key generation. pqg is a synonym for keyparams. ...
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
the end tag must not be present. permitted parents <meta charset>, <meta http-equiv>: a <head> element. if the http-equiv is not an encoding declaration, it can also be inside a <noscript> element, itself inside a <head> element. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlmetaelement the
type of metadata provided by the meta element can be one of the following: if the name attribute is set, the meta element provides document-level metadata, applying to the whole page. if the http-equiv attribute is set, the meta element is a pragma directive, providing information equivalent to what can be given by a similarly-named http header. if the charset attribute is set, the meta element i...
... http-equiv defines a pragma directive. the attribute is named http-equiv(alent) because all the allowed values are names of particular http headers: content-security-policy allows page authors to define a content policy for the current page. content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks. content-
type if specified, the content attribute must have the value "text/html; charset=utf-8". note: can only be used in documents served with a text/html mime
type — not in documents served with an xml mime
type. default-style sets the name of the default css style sheet set. x-ua-compatible if specified, the content attribute must have the value "ie=edge". user agents are required to...
<noembed>: The Embed Fallback element (Obsolete) - HTML: Hypertext Markup Language
the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the
type of embedded content an author wishes to use. this element was deprecated in html 4.01 and above in favor of placing fallback content between the opening and closing tags of an <object> element. while this element currently still works in many browsers, it is obsolete and should not be used. use <object> instead, with fallback content between the opening and closing tags of the element. ...
...en the opening and closing tags of an <object> element. ...
<spacer> - HTML: Hypertext Markup Language
designers used to use to add white spaces to web pages without actually using an image. however, <spacer> no longer supported by any major browser and the same effects can now be achieved using simple css. firefox, which is the descendant of netscape's browsers, removed support for <spacer> in version 4. attributes like all other html elements, this element supports the global attributes.
type this attribute determines
type of spacer. possible values are horizontal, vertical and block. size this attribute can be used for defining size of spacer in pixels when
type is horizontal or vertical. width this attribute can be used for defining width of spacer in pixels when
type is block. height this attribute can be used for defining height of spacer in pixels when
type is block. alig...
...size of spacer in pixels when
type is horizontal or vertical. width this attribute can be used for defining width of spacer in pixels when
type is block. height this attribute can be used for defining height of spacer in pixels when
type is block. align this attribute determines alignment of spacer. possible values are left, right and center. example <span>just a text node</span> <spacer
type="horizontal" size="10"></spacer> <span>just another text node</span> <spacer
type="block" width="10" height="10"></spacer> specification not part of any specification. ...
<strong>: The Strong Importance 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. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, must have both a start tag and an end tag. ...
...reater importance, while the <b> element is used to draw attention to text without indicating that it's more important. it may help to realize that both are valid and semantic elements in html5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <strong>). each element is meant to be used in certain
types of scenarios, and if you want to bold text simply for decoration, you should instead actually use the css font-weight property. the intended meaning or purpose of the enclosed text should be what determines which element you use. communicating meaning is what semantics are all about. <em> vs. <strong> adding to the confusion is the fact that while html 4 defined <strong> as simply indicating ...
<textarea> - HTML: Hypertext Markup Language
characters. minlength the minimum number of characters (utf-16 code units) required that the user should enter. name the name of the control. placeholder a hint to the user of what can be entered in the control. carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint. note: placeholders should only be used to show an example of the
type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. see labels and placeholders in <input>: the input (form input) element for a full explanation. readonly this boolean attribute indicates that the user cannot modify the value of the control. unlike the disabled attribute, the readonly attribute does not prevent the user from c...
......
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
le). must be a valid url. this attribute must be specified and its url value must have the same origin as the document — unless the <audio> or <video> parent element of the track element has a crossorigin attribute. srclang language of the track text data. it must be a valid bcp 47 language tag. if the kind attribute is set to subtitles, then srclang must be defined. usage notes track data
types the
type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. the element points to a source file containing timed text that the browser exposes when the user requests additional data. a media element cannot have more than one track with the same kind, srclang, and label. detecting cue changes the...
...); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); examples <video controls poster="/images/sample.gif"> <source src="sample.mp4"
type="video/mp4"> <source src="sample.ogv"
type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> <track kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <track kind="subtitles" src="samplesubtitles_en.vtt" srclan...
Choosing between www and non-www URLs - HTTP
directs in this case, you need to configure the server receiving the http requests (which is most likely the same for www and non-www urls) to respond with an adequate http 301 response to any request to the non-canonical domain. this will redirect the browser trying to access the non-canonical urls to their canonical equivalent. for example, if you've chosen to use non-www urls as the canonical
type, you should redirect all www urls to their equivalent url without the www. example: a server receives a request for http://www.example.org/whaddup (when the canonical domain is example.org) the server answers with a code 301 with the header location: http://example.org/whaddup. the client issues a request to the canonical domain: http://example.org/whatddup the html5 boilerplate project h...
... <link href="http://example.org/whaddup" rel="canonical"> unlike the previous case, browser history will consider non-www and www urls as independent entries. make your page work for both with these techniques, you can configure your server to respond correctly for both, the www-prefixed and the non-www-prefixed domains. it is good advice to do this since you can't predict which url users will
type in their browser's url bar. it is a matter of choosing which
type you want to use as your canonical location, then redirecting the other
type to it. deciding the case this is a very subjective topic it could be considered a bikeshedding issue. if you wish to read deeper, please see some of the many articles on the subject. ...
Identifying resources on the Web - HTTP
he same uri: http uses a specific http header, alt-svc when the resource requested wants the client to access it at another location. urls and urns urls the most common form of uri is the uniform resource locator (url), which is known as the web address. https://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 ...
...s when using urls in html content, you should generally only use a few of these url schemes. when referring to subresources — that is, files that are being loaded as part of a larger document — you should only use the http and https schemes. increasingly, browsers are removing support for using ftp to load subresources, for security reasons. ftp is still acceptable at the top level (such as
typed directly into the browser's url bar, or the target of a link), although some browsers may delegate loading ftp content to another application. examples https://developer.mozilla.org/docs/learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git ftp://example.org/resource.txt urn:isbn:9780141036144 mailto:help@supercyberhelpdesk.info specifications specification title ...
Browser detection using the user agent - HTTP
dware (32 or 64 bits, or intel/ppc for mac). like in all cases, these strings may change in the future, one should use them only in conjunction with the detection of already released browsers. a technological survey must be in place to adapt the script when new browser versions are coming out. ...
... the future, one should use them only in conjunction with the detection of already released browsers. a technological survey must be in place to adapt the script when new browser versions are coming out. mobile, tablet or desktop the most common reason to perform user agent sniffing is to determine which
type of device the browser runs on. the goal is to serve different html to different device
types. never assume that a browser or a rendering engine only runs on one
type of device. especially don't make different defaults for different browsers or rendering engines. never use the os token to define if a browser is on mobile, tablet or desktop. the os may run on more than one
type of (for example, android runs on tablets as well as phones). the following table summarizes the way major ...
List of default Accept values - HTTP
this is typically used for requests initiated via the address bar of a browser, or via an html <a> element. ...
... accept header (ieinternals' msdn blog). edge text/html, application/xhtml+xml, image/jxr, */* opera text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 values for an image when requesting an image, like through an html <img> element, user-agent often sets a specific list of media
types to be welcomed. user agent value comment firefox image/webp,*/* (since firefox 65) */* (since firefox 47) image/png,image/*;q=0.8,*/*;q=0.5 (before) this value can be modified using the image.http.accept parameter. source safari */* chrome image/webp,image/apng,image/*,*/*;q=0.8 source internet explorer 8 o...
Content negotiation - HTTP
ent makes the choice, the server choice is always somewhat arbitrary. the information by the client is quite verbose (http/2 header compression mitigates this problem) and a privacy risk (http fingerprinting) as several representations of a given resource are sent, shared caches are less efficient and server implementations are more complex. the accept header the accept header lists the mime
types of media resources that the agent is willing to process. it is comma-separated lists of mime
types, each combined with a quality factor, a parameter indicating the relative degree of preference between the different mime
types. the accept header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an html page or an image, a video, or a script...
... the headers must be done on every request. this is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. the more precise headers are sent, the more entropy is sent, allowing for more http fingerprinting and corresponding privacy concern. from the beginnings of http, the protocol allowed another negotiation
type: agent-driven negotiation or reactive negotiation. in this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. the user is presented the resources and choose the one to use. unfortunately, the http standard does not specify the format of the page allowing to choose between the available resource, which prevents to...
Using HTTP cookies - HTTP
ils about the header attributes mentioned below, refer to the set-cookie reference article. the set-cookie and cookie headers the set-cookie http response header sends cookies from the server to the user agent. a simple cookie is set like this: set-cookie: <cookie-name>=<cookie-value> this shows the server sending headers to tell the client to store a pair of cookies: http/2.0 200 ok content-
type: text/html set-cookie: yummy_cookie=choco set-cookie: tasty_cookie=strawberry [page content] then, with every subsequent request to the server, the browser sends back all previously stored cookies to the server using the cookie header. get /sample_page.html http/2.0 host: www.example.org cookie: yummy_cookie=choco; tasty_cookie=strawberry note: here's how to use the set-cookie header in vario...
...re on, the cookie is called a first-party cookie. if the domain is different, it is a third-party cookie. while the server hosting a web page sets first-party cookies, the page may contain images or other components stored on servers in other domains (for example, ad banners), which may set third-party cookies. these are mainly used for advertising and tracking across the web. see for example the
types of cookies used by google. a third party server can build up a profile of a user's browsing history and habits based on cookies sent to it by the same browser when accessing multiple sites. firefox, by default, blocks third-party cookies that are known to contain trackers. third-party cookies (or just tracking cookies) may also be blocked by other browser settings or extensions. cookie blocking ...
Accept-Patch - HTTP
the accept-patch response http header advertises which media-
type the server is able to understand. accept-patch in response to any method means that patch is allowed on the resource identified by the request-uri. two common cases lead to this: a server receiving a patch request with an unsupported media
type could reply with 415 unsupported media
type and an accept-patch header referencing one or more supported media
types. notes: an iana registry maintains a complete list of official content encodings. two others content encoding, bzip and bzip2, are sometimes used, though not standard. they implement the algorithm used by these two unix programs. ...
...cept-patch header referencing one or more supported media
types. notes: an iana registry maintains a complete list of official content encodings. two others content encoding, bzip and bzip2, are sometimes used, though not standard. they implement the algorithm used by these two unix programs. note that the first one was discontinued due to patent licensing problems. ...
Cache-Control - HTTP
multiple directives are comma-separated. some directives have an optional argument, which can be either a token or a quoted-string. ...
...ck for updates, even when the user explicitly refreshes the page. clients that aren't aware of this extension must ignore them as per the http specification. in firefox, immutable is only honored on https:// transactions. for more information, see also this blog post. other no-transform an intermediate cache or proxy cannot edit the response body, content-encoding, content-range, or content-
type. it therefore forbids a proxy or browser feature, such as google’s web light, from converting images to minimize data for a cache store or slow connection. only-if-cached set by the client to indicate "do not use the network" for the response. the cache should either respond using a stored response, or respond with a 504 status code. conditional headers such as if-none-match should not be set...
Clear-Site-Data - HTTP
the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting website. it allows web developers to have more control over the data stored locally by a browser for their origins. header
type response header forbidden header name no syntax the clear-site-data header accepts one or more directives. if all
types of data should be cleared, the wildcard directive ("*") can be used. // single directive clear-site-data: "cache" // multiple directives (comma separated) clear-site-data: "cache", "cookies" // wild card clear-site-data: "*" directives all directives must comply with the quoted-string grammar. a directive that does not include the double quotes is invalid. "cache" indicates that the server wishes to remo...
...strations (for each service worker registration, execute serviceworkerregistration.unregister), appcache, websql databases, filesystem api data, plugin data (flash via npp_clearsitedata). "executioncontexts" indicates that the server wishes to reload all browsing contexts for the origin of the response (location.reload). "*" (wildcard) indicates that the server wishes to clear all
types of data for the origin of the response. if more data
types are added in future versions of this header, they will also be covered by it. examples sign out of web site if a user signs out of your website or service, you might want to remove locally stored data. you can achieve that by adding the clear-site-data header when sending the page confirming that logging out from the site has been ac...
Content-Encoding - HTTP
the content-encoding entity header is used to compress the media-
type. when present, its value indicates which encodings were applied to the entity-body. it lets the client know how to decode in order to obtain the media-
type referenced by the content-
type header. the recommendation is to compress data as much as possible and therefore to use this field, but some
types of resources, such as jpeg images, are already compressed. sometimes, using additional compression doesn't reduce payload size and can even make the payload longer. ...
...t lets the client know how to decode in order to obtain the media-
type referenced by the content-
type header. the recommendation is to compress data as much as possible and therefore to use this field, but some
types of resources, such as jpeg images, are already compressed. sometimes, using additional compression doesn't reduce payload size and can even make the payload longer. header
type entity header forbidden header name no syntax content-encoding: gzip content-encoding: compress content-encoding: deflate content-encoding: identity content-encoding: br // multiple, in the order in which they were applied content-encoding: gzip, identity content-encoding: deflate, gzip directives gzip a format using the lempel-ziv coding (lz77), with a 32-bit crc. t...
CSP: base-uri - HTTP
not setting this allows any url. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: child-src - HTTP
if this directive is absent, the user agent will look for the default-src directive. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inlin...
CSP: connect-src - HTTP
connect-src directive restricts the urls which can be loaded using script interfaces. the apis that are restricted are: <a> ping, fetch, xmlhttprequest, websocket, eventsource, and navigator.sendbeacon(). note: connect-src 'self' does not resolve to websocket schemas in all browsers, more info: https://github.com/w3c/webappsec-csp/issues/7 csp version 1 directive
type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the connect-src policy: content-security-policy: connect-src <source>; content-security-policy: connect-src <source> <source>; sources <source> can be one of the following: <host-source> internet...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: default-src - HTTP
directives. for each of the following directives that are absent, the user agent looks for the default-src directive and uses this value for it: child-src connect-src font-src frame-src img-src manifest-src media-src object-src prefetch-src script-src script-src-elem script-src-attr style-src style-src-elem style-src-attr worker-src csp version 1 directive
type fetch directive syntax one or more sources can be allowed for the default-src policy: content-security-policy: default-src <source>; content-security-policy: default-src <source> <source>; sources <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 opti...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: font-src - HTTP
if this directive is absent, the user agent will look for the default-src directive. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inlin...
CSP: frame-ancestors - HTTP
not setting this allows anything. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'none' refers to the empty set; that is, no urls match. the single quotes are required. examples content-security-policy: frame-ancestors 'none'; content-security-policy: frame-ancestors 'self' https://www.example.org; specifications specification status comment content security policy level 3the definition of 'frame-ance...
CSP: frame-src - HTTP
the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>. csp version 1 directive
type fetch directive fallback if this directive is absent, the user agent will look for the child-src directive (which falls back to the default-src directive). syntax one or more sources can be allowed for the frame-src policy: content-security-policy: frame-src <source>; content-security-policy: frame-src <source> <source>; sources <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 charact...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inlin...
CSP: img-src - HTTP
if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the img-src policy: content-security-policy: img-src <source>; content-security-policy: img-src <source> <source>; sources <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. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: manifest-src - HTTP
if this directive is absent, the user agent will look for the default-src directive. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inlin...
CSP: media-src - HTTP
if this directive is absent, the user agent will look for the default-src directive. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inlin...
CSP: object-src - HTTP
the http content-security-policy object-src directive specifies valid sources for the <object>, <embed>, and <applet> elements. to set allowed
types for <object>, <embed>, and <applet> elements, use the plugin-
types directive. elements controlled by object-src are perhaps coincidentally considered legacy html elements and aren't receiving new standardized features (such as the security attributes sandbox or allow for <iframe>). therefore it is recommended to restrict this fetch-directive (e.g. explicitly set object-src 'none' if possible). csp version 1 directive
type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the obje...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inlin...
CSP: prefetch-src - HTTP
if this directive is absent, the user agent will look for the default-src directive. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: report-uri - HTTP
en browsers get report-to support, you can specify both report-uri and report-to: content-security-policy: ...; report-uri https://endpoint.com; report-to groupname in browsers that support report-to, the report-uri directive will be ignored. the directive has no effect in and of itself, but only gains meaning in combination with other directives. csp version 1 directive
type reporting directive this directive is not supported in the <meta> element. syntax content-security-policy: report-uri <uri>; content-security-policy: report-uri <uri> <uri>; <uri> a uri where to post the report to. examples see content-security-policy-report-only for more information and examples. content-security-policy: default-src https:; report-uri /csp-violation-r...
... // send an email $message = "the following content-security-policy violation occurred on " . $current_domain . ":\n\n" . $json_data . "\n\nfurther cps violations will be logged to the following log file, but no further email notifications will be sent until this log file is deleted:\n\n" . $log_file; mail($email_address, $email_subject, $message, 'content-
type: text/plain;charset=utf-8'); } else if (filesize($log_file) > $log_file_size_limit) { exit(0); } file_put_contents($log_file, $json_data, file_append | lock_ex); } specifications specification status comment content security policy level 3the definition of 'report-uri' in that specification. working draft no changes. content security policy le...
CSP: script-src-attr - HTTP
if this directive is absent, the user agent will look for the script-src directive, and if both of them are absent, fallback to default-src directive. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: script-src-elem - HTTP
if this directive is absent, the user agent will look for the script-src directive, and if both of them are absent, fallback to default-src directive. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: script-src - HTTP
the http content-security-policy (csp) script-src directive specifies valid sources for javascript. this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution. csp version 1 directive
type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the script-src policy: content-security-policy: script-src <source>; content-security-policy: script-src <source> <source>; sources <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...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: style-src-attr - HTTP
if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: style-src-elem - HTTP
if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive. ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows enabling specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expres...
CSP: worker-src - HTTP
chrome 59 and higher skips the child-src directive. edge 17 skips the script-src directive (bug). ...
...ws blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob and filesystem from source directives. sites needing to allow these content
types can specify them using the data attribute. 'unsafe-eval' allows the use of eval() and similar methods for creating code from strings. you must include the single quotes. 'unsafe-hashes' allows to enable specific inline event handlers. if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inlin...
Content-Security-Policy-Report-Only - HTTP
the http content-security-policy-report-only response header allows web developers to experiment with policies by monitoring (but not enforcing) their effects. these violation reports consist of json documents sent via an http post request to the specified uri. for more information, see also this article on content security policy (csp). header
type response header forbidden header name no this header is not supported inside a <meta> element. syntax content-security-policy-report-only: <policy-directive>; <policy-directive> directives the directives of the content-security-policy header can also be applied to content-security-policy-report-only. the csp report-uri directive should be used with this header, otherwise this header will be an expensi...
...tive the name of the policy section that was violated. sample violation report let's consider a page located at http://example.com/signup.html. it uses the following policy, disallowing everything but stylesheets from cdn.example.com. content-security-policy-report-only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doc
type html> <html> <head> <title>sign up</title> <link rel="stylesheet" href="css/style.css"> </head> <body> ... content ... </body> </html> can you spot the violation? stylesheets are only allowed to be loaded from cdn.example.com, yet the website tries to load one from its own origin (http://example.com). a browser capable of enforcing csp will send the following violation report...
Digest - HTTP
the digest response http header provides a digest of the requested resource. in rfc 7231 terms this is the selected representation of a resource. the selected representation depends on the content-
type and content-encoding header values: so a single resource may have multiple different digest values. the digest is calculated over the entire representation. ...
...o a single resource may have multiple different digest values. the digest is calculated over the entire representation. the representation itself may be: fully contained in the response message body not at all contained in the message body (for example, in a response to a head request) partially contained in the message body (for example, in a response to a range request). header
type response header forbidden header name no syntax digest: <digest-algorithm>=<digest-value> digest: <digest-algorithm>=<digest-value>,<digest-algorithm>=<digest-value> directives <digest-algorithm> supported digest algorithms are defined in rfc 3230 and rfc 5843, and include sha-256 and sha-512. some of the supported algorithms, including unixsum and md5 are subject to...
Expect-CT - HTTP
the expect-ct header lets sites opt in to reporting and/or enforcement of certificate transparency requirements, to prevent the use of misissued certificates for that site from going unnoticed. ct requirements can be satisfied via any one of the following mechanisms: x.509v3 certificate extension to allow embedding of signed certificate timestamps issued by individual logs a tls extension of
type signed_certificate_timestamp sent during the handshake supporting ocsp stapling (that is, the status_request tls extension) and providing a signedcertificatetimestamplist when a site enables the expect-ct header, they are requesting that the browser check that any certificate for that site appears in public ct logs. browsers ignore the expect-ct header over http; the header only has effect...
... site appears in public ct logs. browsers ignore the expect-ct header over http; the header only has effect on https connections. the expect-ct will likely become obsolete in june 2021. since may 2018 new certificates are expected to support scts by default. certificates before march 2018 were allowed to have a lifetime of 39 months, those will all be expired in june 2021. header
type response header forbidden header name yes syntax expect-ct: report-uri="<uri>", enforce, max-age=<age> directives max-age the number of seconds after reception of the expect-ct header field during which the user agent should regard the host of the received message as a known expect-ct host. if a cache receives a value greater than it can repr...
Expect - HTTP
pond with: 100 if the information contained in the header is sufficient to cause an immediate success, 417 (expectation failed) if it cannot meet the expectation; or any other 4xx status otherwise. for example, the server may reject a request if its content-length is too large. no common browsers send the expect header, but some other clients such as curl do so by default. header
type request header forbidden header name yes syntax no other expectations except "100-continue" are specified currently. expect: 100-continue directives 100-continue informs recipients that the client is about to send a (presumably large) message body in this request and wishes to receive a 100 (continue) interim response. examples large message body a client sends a...
...e directives 100-continue informs recipients that the client is about to send a (presumably large) message body in this request and wishes to receive a 100 (continue) interim response. examples large message body a client sends a request with a expect header and waits for the server to respond before sending the message body. put /somewhere/fun http/1.1 host: origin.example.com content-
type: video/h264 content-length: 1234567890987 expect: 100-continue the server now checks the request headers and may respond with a 100 (continue) response to instruct the client to go ahead and send the message body, or it will send a 417 (expectation failed) status if any of the expectations cannot be met. specifications specification title rfc 7231, section 5.1.1: expe...
Feature-Policy - HTTP
within any <iframe> elements in the document. this header is still in an experimental state, and is subject to change at any time. be wary of this when implementing it on your website. the header has now been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change. for more information, see the main feature policy article. header
type response header forbidden header name yes syntax feature-policy: <directive> <allowlist> <directive> the feature policy directive to apply the allowlist to. see directives below for a list of the permitted directive names. <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowe...
...ould 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 allowed to use element.requestfullscreen(). when this policy is disabled, the returned promise rejects with a
typeerror. geolocation controls whether the current document is allowed to use the geolocation interface. when this policy is disabled, calls to getcurrentposition() and watchposition() will cause those functions' callbacks to be invoked with a positionerror code of permission_denied. gyroscope controls whether the current document is allowed to gather information about the orientation of the devi...
Keep-Alive - HTTP
ut and a maximum amount of requests. the connection header needs to be set to "keep-alive" for this header to have any meaning. connection-specific header fields such as connection and keep-alive are prohibited in http/2. chrome and firefox ignore them in http/2 responses, but safari conforms to the http/2 spec requirements and won’t load any response which contains them. header
type general header forbidden header name yes syntax keep-alive: parameters directives parameters a comma-separated list of parameters, each consisting of an identifier and a value separated by the equal sign ('='). the following identifiers are possible: timeout: indicating the minimum amount of time an idle connection has to be kept opened (in seconds). note that time...
...ax: indicating the maximum number of requests that can be sent on this connection before closing it. unless 0, this value is ignored for non-pipelined connections as another request will be sent in the next response. an http pipeline can use it to limit the pipelining. ...
Save-Data - HTTP
instance ensuring that the user is not served a lower-quality image from the cache when save-data header is no longer present [e.g. after having switched from cellular to wi-fi]). ...
...p/1.0 host: example.com save-data: on response: http/1.0 200 ok content-length: 102832 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-
type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-length: 481770 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-
type: image/jpeg [...] specifications specification title draft-grigorik-http-client-hints-03, section 7: save-data http client hints ...
Strict-Transport-Security - HTTP
the http strict-transport-security response header (often abbreviated as hsts) lets a web site tell browsers that it should only be accessed using https, instead of using http. header
type response header forbidden header name no syntax strict-transport-security: max-age=<expire-time> strict-transport-security: max-age=<expire-time>; includesubdomains strict-transport-security: max-age=<expire-time>; preload directives max-age=<expire-time> the time, in seconds, that the browser should remember that a site is only to be accessed using https. includesubdomains optional if this optional parameter is specified, this rule applies to all of the site's subdomains as well. preload optional see preloading strict transport security for details. not part of th...
...eter is specified, this rule applies to all of the site's subdomains as well. preload optional see preloading strict transport security for details. not part of the specification. description if a website accepts a connection through http and redirects to https, visitors may initially communicate with the non-encrypted version of the site before being redirected, if, for example, the visitor
types http://www.foo.com/ or even just foo.com. this creates an opportunity for a man-in-the-middle attack. the redirect could be exploited to direct visitors to a malicious site instead of the secure version of the original site. the http strict transport security header informs the browser that it should never load a site using http and should automatically convert all attempts to access the site u...
Transfer-Encoding - HTTP
between two nodes, not to a resource itself. each segment of a multi-node connection can use different transfer-encoding values. if you want to compress data over the whole connection, use the end-to-end content-encoding header instead. when present on a response to a head request that has no body, it indicates the value that would have applied to the corresponding get message. header
type response header forbidden header name yes syntax transfer-encoding: chunked transfer-encoding: compress transfer-encoding: deflate transfer-encoding: gzip transfer-encoding: identity // several values can be listed, separated by a comma transfer-encoding: gzip, chunked directives chunked data is sent in a series of chunks. the content-length header is omitted in this ...
... deemed acceptable. examples chunked encoding chunked encoding is useful when larger amounts of data are sent to the client and the total size of the response may not be known until the request has been fully processed. ...
Upgrade - HTTP
ly) upgrade header can be used to upgrade an already established client/server connection to a different protocol (over the same transport protocol). for example, it can be used by a client to upgrade a connection from http 1.1 to http 2.0, or an http or https connection into a websocket. http/2 explicitly disallows the use of this mechanism/header; it is specific to http/1.1. header
type request header, response header forbidden header name yes overview the upgrade header field may be used by clients to invite a server to switch to one (or more) of the listed protocols, in descending preference order. for example, the client might send a get request as shown, listing the preferred protocols to switch to (in this case "example/1" and "foo/2"): get /index.h...
...d response, to indicate that the server won't perform the request using the current protocol, but might do so if the protocol is changed. the client can then request a protocol change using the process above. more detail and examples are provided in the topic protocol upgrade mechanism. syntax connection: upgrade upgrade: protocol_name[/protocol_version] notes: the connection header with
type upgrade must always be sent with the upgrade header (as shown above). protocols are listed, comma-separated, in order of descending preference. protocol version is optional. for example: connection: upgrade upgrade: a_protocol/1, example ,another_protocol/2.2 directives any comma-separated list protocol names (each with optional protocol version) one or more protocol names with...
Warning - HTTP
ps://github.com/whatwg/fetch/issues/913) for more details. the warning general http header contains information about possible problems with the status of the message. more than one warning header may appear in a response. warning header fields can in general be applied to any message, however some warn-codes are specific to caches and can only be applied to response messages. header
type general header forbidden header name no syntax warning: <warn-code> <warn-agent> <warn-text> [<warn-date>] directives <warn-code> a three-digit warning number. the first digit indicates whether the warning is required to be deleted from a stored response after validation. 1xx warn-codes describe the freshness or validation status of the response and will be delete...
... 113 heuristic expiration sent if a cache heuristically chose a freshness lifetime greater than 24 hours and the response's age is greater than 24 hours. 199 miscellaneous warning arbitrary, non-specific warning 214 transformation applied added by a proxy if it applies any transformation to the representation, such as changing the content-coding, media-
type or the like. 299 miscellaneous persistent warning same as 199, but indicating a persistent warning examples warning: 110 anderson/1.3.37 "response is stale" date: wed, 21 oct 2015 07:28:00 gmt warning: 112 - "cache down" "wed, 21 oct 2015 07:28:00 gmt" specifications specification title rfc 7234, section 5.5: warning hypertext transfer protocol (...
X-DNS-Prefetch-Control - HTTP
tively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth. this prefetching is performed in the background, so that the dns is likely to have been resolved by the time the referenced items are needed. this reduces latency when the user clicks a link. header
type response header forbidden header name no syntax x-dns-prefetch-control: on x-dns-prefetch-control: off directives on enables dns prefetching. this is what browsers do, if they support the feature, when this header is not present off disables dns prefetching. this is useful if you don't control the link on the pages, or know that you don't want to leak information to...
...dual documents, using the http-equiv attribute on the <meta> element, like this: <meta http-equiv="x-dns-prefetch-control" content="off"> you can reverse this setting by setting content to "on". forcing lookup of specific hostnames you can force the lookup of specific hostnames without providing specific anchors using that hostname by using the rel attribute on the <link> element with a link
type of dns-prefetch: <link rel="dns-prefetch" href="https://www.mozilla.org/contribute/"> in this example, the domain name "www.mozilla.org/contribute" will be pre-resolved. similarly, the link element can be used to resolve hostnames without providing a complete url, but only, by preceding the hostname with two slashes: <link rel="dns-prefetch" href="//www.mozilla.org/contribute/"> forced pre...
Proxy servers and tunneling - HTTP
when navigating through different networks of the internet, proxy servers and http tunnels are facilitating access to content on the world wide web. a proxy can be on the user's local computer, or anywhere between the user's computer and a destination server on the internet. this page outlines some basics about proxies and introduces a few configuration options. there are two
types of proxies: forward proxies (or tunnel, or gateway) and reverse proxies (used to control and protect access to a server for load-balancing, authentication, decryption or caching). forward proxies a forward proxy, or gateway, or just "proxy" provides proxy services to a client or a group of clients. there are likely hundreds of thousands of open forward proxies on the internet. they store and forward internet ser...
...configuration (pac) a proxy auto-configuration (pac) file is a javascript function that determines whether web browser requests (http, https, and ftp) go directly to the destination or are forwarded to a web proxy server. the javascript function contained in the pac file defines the function: the auto-config file should be saved to a file with a .pac filename extension: proxy.pac and the mime
type set to: application/x-ns-proxy-autoconfig the file consists of a function called findproxyforurl. the example below will work in an environment where the internal dns server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable: function findproxyforurl(url, host) { if (isresolvable(host)) return "direct"; else ...
Redirections in HTTP - HTTP
ered by a server sending a special redirect response to a request. redirect responses have status codes that start with 3, and a location header holding the url to redirect to. when browsers receive a redirect, they immediately load the new url provided in the location header. besides the small performance hit of an additional round-trip, users rarely notice the redirection. there are several
types of redirects, sorted into three categories: permanent redirections temporary redirections special redirections permanent redirections these redirections are meant to last forever. they imply that the original url should no longer be used, and replaced with the new one.search engine robots, rss readers, and other crawlers will update the original url for the resource. code te...
...the browser will go to the indicated url. <head> <meta http-equiv="refresh" content="0; url=https://example.com/"> </head> the content attribute should start with a number indicating how many seconds the browser should wait before redirecting to the given url. always set it to 0 for accessibility compliance. obviously, this method only works with html, and cannot be used for images or other
types of content. javascript redirections redirections in javascript are performed by setting a url string to the window.location property, loading the new page: window.location = "https://example.com/"; like html redirections, this can't work on all resources, and obviously, this will only work on clients that execute javascript. on the other hand, there are more possibilities: for example, you c...
Unicode property escapes - JavaScript
perties which are either binary ("boolean-like") or non-binary. for instance, unicode property escapes can be used to match emojis, punctuations, letters (even letters from specific languages or scripts), etc. note: for unicode property escapes to work, a regular expression must use the u flag which indicates a string must be considered as a series of unicode code points. see also regexp.proto
type.unicode. note: some unicode properties encompasses much more characters than some character classes (such as \w which matches only latin letters, a to z) but the latter is better supported among browsers (as of january 2020). syntax the following section is also duplicated on this cheatsheet. do not forget to edit it as well, thanks! // non-binary values \p{unicodepropertyvalue} \p{unicode...
...ary property: unicodepropertyvalue one of the tokens listed in the values section, below. many values have aliases or shorthand (e.g. the value decimal_number for the general_category property may be written nd, digit, or decimal_number). for most values, the unicodepropertyname part and equals sign may be omitted. if a unicodepropertyname is specified, the value must correspond to the property
type given. note: as there are many properties and values available, we will not describe them exhaustively here but rather provide various examples rationale before es2018 there was no performance-efficient way to match characters from different sets based on scripts (like macedonian, greek, georgian etc.) or propertyname (like emoji etc) in javascript. check out tc39 proposal on unicode proper...
Private class fields - JavaScript
ected behaviour when using this. class baseclasswithprivatestaticfield { static #private_static_field static basepublicstaticmethod() { this.#private_static_field = 42 return this.#private_static_field } } class subclass extends baseclasswithprivatestaticfield { } let error = null try { subclass.basepublicstaticmethod() } catch(e) { error = e} console.assert(error instanceof
typeerror) private instance fields private instance fields are declared with # names (pronounced "hash names"), which are identifiers prefixed with #. the # is a part of the name itself. it is used for declaration and accessing as well. the encapsulation is enforced by the language. it is a syntax error to refer to # names from out of scope. class classwithprivatefield { #privatefield constr...
... class classwithprivatemethod { #privatemethod() { return 'hello world' } getprivatemessage() { return this.#privatemethod() } } const instance = new classwithprivatemethod() console.log(instance.getprivate...
SyntaxError: illegal character - JavaScript
the javascript exception "illegal character" occurs when there is an invalid or unexpected token that doesn't belong at this position in the code. message syntaxerror: invalid character (edge) syntaxerror: illegal character (firefox) syntaxerror: invalid or unexpected token (chrome) error
type syntaxerror what went wrong? there is an invalid or unexpected token that doesn't belong at this position in the code. use an editor that supports syntax highlighting and carefully check your code against mismatches like a minus sign ( - ) versus a dash ( – ) or simple quotes ( " ) vs non-standard quotation marks ( “ ). examples mismatched characters some characters look similar, but will cause the parser to fail interpreting your code. famous examples of this are quotes, the minus or semi...
... // <37e> is not ; but looks like this this should work: "this is actually a string"; 42 - 13; var foo = 'bar'; some editors and ides will notify you or at least use a slightly different highlighting for it, but not all. when something like this happens to your code and you're not able to find the source of the problem, it's often best to just delete the problematic line and re
type it. forgotten characters it's easy to forget a character here or there. var colors = ['#000', #333', '#666']; // syntaxerror: illegal character add the missing quote for '#333'. var colors = ['#000', '#333', '#666']; hidden characters when copy pasting code from external sources, there might be invalid characters. watch out! var foo = 'bar';ā // syntaxerror: illegal character when in...
Error: Permission denied to access property "x" - JavaScript
there was attempt to access an object for which you have no permission. this is likely an <iframe> element loaded from a different domain for which you violated the same-origin policy. ...
...s an attempt to access an object for which you have no permission. message error: permission denied to access property "x" error
type error. what went wrong? there was attempt to access an object for which you have no permission. this is likely an <iframe> element loaded from a different domain for which you violated the same-origin policy. examples no permission to access document <!doc
type html> <html> <head> <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> <script> onload = function() { console.log(frames[0].document); // error: permission denied to access property "document" } </script> </head> <body></body> </html> ...
ReferenceError: reference to undefined property "x" - JavaScript
what went wrong? the script attempted to access an object property which doesn't exist. there are two ways to access properties; see the property accessors reference page to learn more about them. ...
... invalid cases in this case, the property bar is an undefined property, so a referenceerror will occur. ...
Arrow function expressions - JavaScript
() => console.log(this.i, this), c: function() { console.log(this.i, this); } } obj.b(); // prints undefined, window {...} (or the global object) obj.c(); // prints 10, object {...} arrow functions do not have their own this. ...
...b', { get: () => { console.log(this.a,
typeof this.a, this); // undefined 'undefined' window {...} (or the global object) return this.a + 10; // represents global object 'window', therefore '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 proto
type property arrow functions do not have a proto
type property. var foo = () => {}; console.log(foo.proto
type); // 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. functi...
Default parameters - JavaScript
if no value is provided for b when multiply is called, b's value would be undefined when evaluating a * b and multiply would return nan. function multiply(a, b) { return a * b } multiply(5, 2) // 10 multiply(5) // nan ! to guard against this, something like the second line would be used, where b is set to 1 if multiply is called with only one argument: function multiply(a, b) { b = (
typeof b !== 'undefined') ? b : 1 return a * b } multiply(5, 2) // 10 multiply(5) // 5 with default parameters in es2015, checks in the function body are no longer necessary. now, you can assign 1 as the default value for b in the function head: function multiply(a, b = 1) { return a * b } multiply(5, 2) // 10 multiply(5) // 5 multiply(5, undefined) // 5 examples...
...(a, b = 1) { return a * b } multiply(5, 2) // 10 multiply(5) // 5 multiply(5, undefined) // 5 examples passing undefined vs. other falsy values in the second call in this example, even if the first argument is set explicitly to undefined (though not null or other falsy values), the value of the num argument is still the default. function test(num = 1) { console.log(
typeof num) } test() // 'number' (num is set to 1) test(undefined) // 'number' (num is set to 1 too) // test with other falsy values: test('') // 'string' (num is set to '') test(null) // 'object' (num is set to null) evaluated at call time the default argument is evaluated at call time. so, unlike (for example) python, a new object is created each time the function is ca...
Method definitions - JavaScript
{ async f() { await some_promise } } async generator methods generator methods can also be async. ...
... also be async. const obj4 = { f: async function* () { yield 1 yield 2 yield 3 } }; // the same object using shorthand syntax const obj4 = { async* f() { yield 1 yield 2 yield 3 } } method definitions are not constructable methods cannot be constructors! they will throw a
typeerror if you try to instantiate them. const obja = { method() {} } new obja.method //
typeerror: obj.method is not a constructor const objb = { * g() {} } new objb.g //
typeerror: obj.g is not a constructor (changed in es2016) examples simple test case const obj = { a: 'foo', b() { return this.a } }; console.log(obj.b()) // "foo" computed property names the shorthand syntax also supports computed property names. const bar = { foo0: function() { return 0 }, foo...
Rest parameters - JavaScript
op can be applied on it directly; the arguments object has additional functionality specific to itself (like the callee property). ...
... function sortarguments() { let args = array.from(arguments) let sortedargs = args.sort() return sortedargs } console.log(sortarguments(5, 3, 7, 1)) // 1, 3, 5, 7 specifications specification ecmascript (ecma-262)the definition of 'fun...
Functions - JavaScript
o. of zeros for (var i = 1; i <= numzeros; i++) { numstr = "0" + numstr; } return numstr; } the following statements call the padzeros function. ...
...= padzeros(42,2); // returns "42" result = padzeros(5,4); // returns "0005" determining whether a function exists you can determine whether a function exists by using the
typeof operator. in the following example, a test is performed to determine if the window object has a property called nofunc that is a function. if so, it is used; otherwise, some other action is taken. if ('function' ===
typeof window.nofunc) { // use nofunc() } else { // do something else } note that in the if test, a reference to nofunc is used—there are no brackets "()" after the function name so the actual function is not called. specifications specification ecmascript (ecma-262)the definition of 'function definitions' in that specification. ...
Array.of() - JavaScript
the difference between array.of() and the array constructor is in the handling of integer arguments: array.of(7) creates an array with a single element, 7, whereas array(7) creates an empty array with a length property of 7 (note: this implies an array of 7 empty slots, not slots with actual undefined values). ...
...ed to create the array. return value a new array instance. description this function is part of the ecmascript 2015 standard. for more information, see: array.of() array.from() proposal array.of() polyfill polyfill running the following code before any other code will create array.of() if it's not natively available. ...
ArrayBuffer() constructor - JavaScript
a new arraybuffer object of the specified size. its contents are initialized to 0. exceptions a rangeerror is thrown if the length is larger than number.max_safe_integer (>= 2 ** 53) or negative. compatibility notes starting with ecmascript 2015, arraybuffer constructors require to be constructed with a new operator. ...
... contents are initialized to 0. exceptions a rangeerror is thrown if the length is larger than number.max_safe_integer (>= 2 ** 53) or negative. compatibility notes starting with ecmascript 2015, arraybuffer constructors require to be constructed with a new operator. calling an arraybuffer constructor as a function without new, will throw a
typeerror from now on. ...
AsyncFunction - JavaScript
argn names to be used by the function as formal argument names. ...
...ion expression. invoking the asyncfunction constructor as a function (without using the new operator) has the same effect as invoking it as a constructor. ...
Atomics.compareExchange() - JavaScript
equal to the expected value or not. this atomic operation guarantees that no other write happens until the modified value is written back. 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 atomics.compareexchange(
typedarray, index, expectedvalue, replacementvalue) parameters
typedarray an integer
typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to exchange a value. expectedvalue the value to check for equality. replacementvalue the number to exchange. return value the old value at t...
...ctedvalue, replacementvalue) parameters
typedarray an integer
typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to exchange a value. expectedvalue the value to check for equality. replacementvalue the number to exchange. return value the old value at the given position (
typedarray[index]). exceptions throws a
typeerror, if
typedarray is not one of the allowed integer
types. throws a rangeerror, if index is out of bounds in the
typedarray. examples using compareexchange() const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 7; atomics.compareexchange(ta, 0, 7, 12); // returns 7, the old value atomics.load(ta, 0); // 12 specificat...
Atomics.store() - JavaScript
the static atomics.store() method stores a given value at the given position in the array and returns that 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. syntax atomics.store(
typedarray, index, value) parameters
typedarray an integer
typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to store a value in. value the number to store. return value the value that has been stored. exceptions throws a
typeerror, if
typedarray is not one of the allowed integer
types. throws a rangeerror...
...ay. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the
typedarray to store a value in. value the number to store. return value the value that has been stored. exceptions throws a
typeerror, if
typedarray is not one of the allowed integer
types. throws a rangeerror, if index is out of bounds in the
typedarray. examples using store() var sab = new sharedarraybuffer(1024); var ta = new uint8array(sab); atomics.store(ta, 0, 12); // 12 specifications specification ecmascript (ecma-262)the definition of 'atomics.store' in that specification. ...
Atomics.wait() - JavaScript
the static atomics.wait() method verifies that a given position in an int32array still contains a given value and if so sleeps, awaiting a wakeup or a timeout. it returns a string which is either "ok", "not-equal", or "timed-out". note: this operation only works with a shared int32array and may not be allowed on the main thread. syntax atomics.wait(
typedarray, index, value[, timeout]) parameters
typedarray a shared int32array. index the position in the
typedarray to wait on. value the expected value to test. timeout optional time to wait in milliseconds. infinity, if no time is provided. return value a string which is either "ok", "not-equal", or "timed-out". exceptions throws a
typeerror, if
typedarray is not a shared int32array. throws a rangeerror, if index is out ...
... examples using wait() given a shared int32array: const sab = new sharedarraybuffer(1024); const int32 = new int32array(sab); a reading thread is sleeping and waiting on location 0 which is expected to be 0. as long as that is true, it will not go on. ...
EvalError - JavaScript
the evalerror 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.proto
type.message error message. although ecma-262 specifies that evalerror should provide its own message property, in spidermonkey, it inherits error.proto
type.message. evalerror.proto
type.name error name. inherited from error. evalerror.proto
type.filename path to file that raised this error. inherited from error. evalerror.proto
type.linenumber line number in file that raised this error. inherited from error. evalerror.proto
type.columnnumber column number in line that raised this error. inherited from err...
...inherited from error. examples evalerror is not used in the current ecmascript specification and will thus not be thrown by the runtime. however, the object itself remains for backwards compatibility with earlier versions of the specification. ...
Function - JavaScript
tion) instead. function.caller specifies the function that invoked the currently executing function. this property is deprecated, and is only functional for some non-strict functions. function.displayname the display name of the function. function.length specifies the number of arguments expected by the function. function.name the name of the function. instance methods function.proto
type.apply(thisarg [, argsarray]) calls a function and sets its this to the provided thisarg. arguments can be passed as an array object. function.proto
type.bind(thisarg[, arg1[, arg2[, ...argn]]]) creates a new function which, when called, has its this set to the provided thisarg. optionally, a given sequence of arguments will be prepended to arguments provided the newly-bound function is called. ...
...[, argsarray]) calls a function and sets its this to the provided thisarg. arguments can be passed as an array object. function.proto
type.bind(thisarg[, arg1[, arg2[, ...argn]]]) creates a new function which, when called, has its this set to the provided thisarg. optionally, a given sequence of arguments will be prepended to arguments provided the newly-bound function is called. function.proto
type.call(thisarg[, arg1, arg2, ...argn]) calls a function and sets its this to the provided value. arguments can be passed as they are. function.proto
type.tostring() returns a string representing the source code of the function. overrides the object.proto
type.tostring method. examples difference between function constructor and function declaration functions created with the function construc...
GeneratorFunction - JavaScript
argn names to be used by the function as formal argument names. ...
... which the generatorfunction constructor was called. this is different from using eval with code for a generator function expression. invoking the generatorfunction constructor as a function (without using the new operator) has the same effect as invoking it as a constructor. examples creating a generator function from a generatorfunction() constructor var generatorfunction = object.getproto
typeof(function*(){}).constructor var g = new generatorfunction('a', 'yield a * 2'); var iterator = g(10); console.log(iterator.next().value); // 20 specifications specification ecmascript (ecma-262)the definition of 'generatorfunction' in that specification. ...
InternalError - JavaScript
the internalerror object indicates an error that occurred internally in the javascript engine. example cases are mostly when something is too large, e.g.: "too many switch cases", "too many parentheses in regular expression", "array initializer too large", "too much recursion". constructor internalerror() creates a new internalerror object. instance properties internalerror.proto
type.message error message. inherited from error. internalerror.proto
type.name error name. inherited from error. internalerror.proto
type.filename path to file that raised this error. inherited from error. internalerror.proto
type.linenumber line number in file that raised this error. inherited from error. internalerror.proto
type.columnnumber column number in line that raised this error. inheri...
...inherited from error. examples too much recursion this recursive function runs 10 times, as per the exit condition. ...
Intl.Locale() constructor - JavaScript
ale. keys are unicode locale tags, values are valid unicode tag values. ...
...s 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. ...
Intl.NumberFormat - JavaScript
please clone https://github.com/mdn/interactive-examples and send us a pull request. constructor intl.numberformat() creates a new numberformat object. static methods intl.numberformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. ...
...ct. static methods intl.numberformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. instance methods intl.numberformat.proto
type.format() getter function that formats a number according to the locale and formatting options of this numberformat object. intl.numberformat.proto
type.formattoparts() returns an array of objects representing the number string in parts that can be used for custom locale-aware formatting. intl.numberformat.proto
type.resolvedoptions() returns a new object with properties reflecting the locale and collation options computed during initialization of the object. examples basic usage in basic use without specifying a locale, a formatted string ...
Math.sign() - JavaScript
examples using math.sign() math.sign(3); // 1 math.sign(-3); // -1 math.sign('-3'); // -1 math.sign(0); // 0 math.sign(-0); // -0 math.sign(nan); // nan math.sign('foo'); // nan math.sign(); // nan specifications ...
... if x is negative, then negative one // || // if x is 0, -0, or nan, or not a number, // +x // then the result will be x, (or) if x is // // not a number, then x converts to number }; } in the above polyfill, no extra
type-coercing is needed to make (x > 0) or (x < 0) numbers because subtracting them from each other forces a
type conversion from booleans to numbers. examples using math.sign() math.sign(3); // 1 math.sign(-3); // -1 math.sign('-3'); // -1 math.sign(0); // 0 math.sign(-0); // -0 math.sign(nan); // nan math.sign('foo'); // nan math.sign(); // nan specifications specification ecmascript (ecma-262)the definition of 'math.sign' in that specification. ...
Number.isFinite() - JavaScript
thub.com/mdn/interactive-examples and send us a pull request. syntax number.isfinite(value) parameters value the value to be tested for finiteness. return value a boolean indicating whether or not the given value is a finite number. description in comparison to the global isfinite() function, this method doesn't forcibly convert the parameter to a number. ...
... finiteness. return value a boolean indicating whether or not the given value is a finite number. description in comparison to the global isfinite() function, this method doesn't forcibly convert the parameter to a number. this means only values of the
type number, that are also finite, return true. ...
Object() constructor - JavaScript
the object constructor creates an object wrapper for the given value. if the value is null or undefined, it will create and return an empty object. otherwise, it will return an object of a
type that corresponds to the given value. if the value is an object already, it will return the value. when called in a non-constructor context, object behaves identically to new object(). syntax new object() new object(value) parameters value any value. ...
... corresponds to the given value. if the value is an object already, it will return the value. when called in a non-constructor context, object behaves identically to new object(). syntax new object() new object(value) parameters value any value. examples creating a new object let o = new object() o.foo = 42 console.log(o) // object { foo: 42 } using object given undefined and null
types the following examples store an empty object object in o: let o = new object() let o = new object(undefined) let o = new object(null) specifications specification ecmascript (ecma-262)the definition of 'object constructor' in that specification. ...
Object.entries() - JavaScript
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]));. ...
... 'c'], ['100', 'a'] ] // getfoo is property which isn't enumerable const myobj = object.create({}, { getfoo: { value() { return this.foo; } } }); myobj.foo = 'bar'; console.log(object.entries(myobj)); // [ ['foo', 'bar'] ] // non-object argument will be coerced to an object console.log(object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] // returns an empty array for any primitive
type, since primitives have no own properties console.log(object.entries(100)); // [ ] // iterate through key-value gracefully const obj = { a: 5, b: 7, c: 9 }; for (const [key, value] of object.entries(obj)) { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" } // or, using array extras object.entries(obj).foreach(([key, value]) => { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" }...
Object.isSealed() - JavaScript
...
... var s3 = object.seal({ get p() { return 0; } }); object.isfrozen(s3); // === true // (only configurability matters for accessor properties) non-object coercion 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 treated as if it was a sealed ordinary object, simply return true. object.issealed(1); //
typeerror: 1 is not an object (es5 code) object.issealed(1); // true (es2015 code) specifications specification ecmascript (ecma-262)the definition of 'object.issealed' in that specification. ...
handler.get() - JavaScript
from the proxy. return value the get() method can return any value. description the handler.get() method is a trap for getting a property value. interceptions this trap can intercept these operations: property access: proxy[foo]and proxy.bar inherited property access: object.create(proxy)[foo] reflect.get() invariants if the following invariants are violated, the proxy will throw a
typeerror: the value reported for a property must be the same as the value of the corresponding target object property if the target object property is a non-writable, non-configurable own data property. the value reported for a property must be undefined if the corresponding target object property is a non-configurable own accessor property that has undefined as its [[get]] attribute. examples ...
... ...
handler.getOwnPropertyDescriptor() - JavaScript
value the getownpropertydescriptor() method must return an object or undefined. description the handler.getownpropertydescriptor() method is a trap for object.getownpropertydescriptor(). interceptions this trap can intercept these operations: object.getownpropertydescriptor() reflect.getownpropertydescriptor() invariants if the following invariants are violated, the proxy will throw a
typeerror: getownpropertydescriptor() must return an object or undefined. a property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object. a property cannot be reported as non-existent, if it exists as an own property of the target object and the target object is not extensible. a property cannot be reported as existent, if it does not exists a...
... ...
handler.has() - JavaScript
n value the has() method must return a boolean value. description the handler.has() method is a trap for the in operator. interceptions this trap can intercept these operations: property query: foo in proxy inherited property query: foo in object.create(proxy) with check: with(proxy) { (foo); } reflect.has() invariants if the following invariants are violated, the proxy will throw a
typeerror: a property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object. a property cannot be reported as non-existent, if it exists as an own property of the target object and the target object is not extensible. examples trapping the in operator the following code traps the in operator. const p = new proxy({}, { has: function(target, ...
... operator. const p = new proxy({}, { has: function(target, prop) { console.log('called: ' + prop); return true; } }); console.log('a' in p); // "called: a" // true the following code violates an invariant. const obj = { a: 10 }; object.preventextensions(obj); const p = new proxy(obj, { has: function(target, prop) { return false; } }); 'a' in p; //
typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[hasproperty]]' in that specification. ...
handler.isExtensible() - JavaScript
is is bound to the handler. target the target object. return value the isextensible() method must return a boolean value. description the handler.isextensible() method is a trap for object.isextensible(). interceptions this trap can intercept these operations: object.isextensible() reflect.isextensible() invariants if the following invariants are violated, the proxy will throw a
typeerror: object.isextensible(proxy) must return the same value as object.isextensible(target). examples trapping of isextensible the following code traps object.isextensible(). const p = new proxy({}, { isextensible: function(target) { console.log('called'); return true; } }); console.log(object.isextensible(p)); // "called" // true the fol...
... traps object.isextensible(). const p = new proxy({}, { isextensible: function(target) { console.log('called'); return true; } }); console.log(object.isextensible(p)); // "called" // true the following code violates the invariant. const p = new proxy({}, { isextensible: function(target) { return false; } }); object.isextensible(p); //
typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[isextensible]]' in that specification. ...
handler.ownKeys() - JavaScript
he target object. return value the ownkeys() method must return an enumerable object. description the handler.ownkeys() method is a trap for reflect.ownkeys(). interceptions this trap can intercept these operations: object.getownpropertynames() object.getownpropertysymbols() object.keys() reflect.ownkeys() invariants if the following invariants are violated, the proxy will throw a
typeerror: the result of ownkeys() 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 getownpr...
...ed" // [ 'a', 'b', 'c' ] the following code violates an invariant. const obj = {}; object.defineproperty(obj, 'a', { configurable: false, enumerable: true, value: 10 } ); const p = new proxy(obj, { ownkeys: function(target) { return [123, 12.5, true, false, undefined, null, {}, []]; } }); console.log(object.getownpropertynames(p)); //
typeerror: proxy [[ownpropertykeys]] must return an array // with only string and symbol elements specifications specification ecmascript (ecma-262)the definition of '[[ownpropertykeys]]' in that specification. ...
handler.preventExtensions() - JavaScript
r. target the target object. return value the preventextensions() method must return a boolean value. description the handler.preventextensions() method is a trap for object.preventextensions(). interceptions this trap can intercept these operations: object.preventextensions() reflect.preventextensions() invariants if the following invariants are violated, the proxy will throw a
typeerror: object.preventextensions(proxy) only returns true if object.isextensible(proxy) is false. examples trapping of preventextensions the following code traps object.preventextensions(). const p = new proxy({}, { preventextensions: function(target) { console.log('called'); object.preventextensions(target); return true; } }); console.log(object.preventextensions(p)); // "...
... ...
Proxy() constructor - JavaScript
the underlying target object. handler.apply() a trap for a function call. handler.construct() a trap for the new operator. handler.defineproperty() 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. ...
...ndler.apply() a trap for a function call. handler.construct() a trap for the new operator. handler.defineproperty() 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.getproto
typeof() a trap for object.getproto
typeof. handler.has() a trap for the in operator. handler.isextensible() a trap for object.isextensible. handler.ownkeys() a trap for object.getownpropertynames and object.getownpropertysymbols. handler.preventextensions() a trap for object.preventextensions. handler.set() a trap for setting property values. handler.setproto
typeof() a trap for object.setproto
typeof. examples selectively...
Proxy.revocable() - JavaScript
created revocable proxy object is returned. description a revocable proxy is an object with following two properties {proxy: proxy, revoke: revoke}. proxy a proxy object created with new proxy(target, handler) call. revoke a function with no argument to invalidate (switch off) the proxy. ...
...r will throw a
typeerror. once a proxy is revoked, it will remain revoked and can be garbage collected. calling revoke() again has no effect. examples using proxy.revocable var revocable = proxy.revocable({}, { get: function(target, name) { return "[[" + name + "]]"; } }); var proxy = revocable.proxy; console.log(proxy.foo); // "[[foo]]" revocable.revoke(); console.log(proxy.foo); //
typeerror is thrown proxy.foo = 1 //
typeerror again delete proxy.foo; // still
typeerror
typeof proxy // "object",
typeof doesn't trigger any trap specifications specification ecmascript (ecma-262)the definition of 'proxy revocation functions' in that specification. ...
Reflect.apply() - JavaScript
syntax reflect.apply(target, thisargument, argumentslist) parameters target the target function to call. thisargument the value of this provided for the call to target. argumentslist an array-like object specifying the arguments with which target should be called. return value the result of calling the given target function with the specified this value and arguments. exceptions a
typeerror, if the target is not callable. description in es5, you typically use the function.proto
type.apply() method to call a function with a given this value and arguments provided as an array (or an array-like object). function.proto
type.apply.call(math.floor, undefined, [1.75]); with reflect.apply() this becomes less verbose and easier to understand. examples using reflect.apply() reflect.
...ue and arguments provided as an array (or an array-like object). function.proto
type.apply.call(math.floor, undefined, [1.75]); with reflect.apply() this becomes less verbose and easier to understand. examples using reflect.apply() reflect.apply(math.floor, undefined, [1.75]); // 1; reflect.apply(string.fromcharcode, undefined, [104, 101, 108, 108, 111]) // "hello" reflect.apply(regexp.proto
type.exec, /ab/, ['confabulation']).index // 4 reflect.apply(''.charat, 'ponies', [3]) // "i" specifications specification ecmascript (ecma-262)the definition of 'reflect.apply' in that specification. ...
Reflect.defineProperty() - JavaScript
a pull request. syntax reflect.defineproperty(target, propertykey, attributes) parameters target the target object on which to define the property. propertykey 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 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 retu...
...rty, 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 // 7 checking if property definition has been successful with object.defineproperty, which returns an object if successful, or throws a
typeerror otherwise, you would use a try...catch block to catch any error that occurred while defining a property. ] because reflect.defineproperty returns a boolean success status, you can just use an if...else block here: if (reflect.defineproperty(target, property, attributes)) { // success } else { // failure } specifications specification ecmascript (ecma-262)the definit...
Reflect.getOwnPropertyDescriptor() - JavaScript
b.com/mdn/interactive-examples and send us a pull request. syntax reflect.getownpropertydescriptor(target, propertykey) parameters target the target object in which to look for the property. propertykey 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 descriptor of the given property if it exists in the target object, undefined otherwise. the only difference to object.getownpropertydescriptor() is how non-object targets are handled. examples using reflect.getownpropertydescriptor() reflect.getownpropertydescriptor({x: 'hello'}, 'x'...
...// {value: "hello", writable: true, enumerable: true, configurable: true} reflect.getownpropertydescriptor({x: 'hello'}, 'y') // undefined reflect.getownpropertydescriptor([], 'length') // {value: 0, writable: true, enumerable: false, configurable: false} difference to object.getownpropertydescriptor() if the target argument to this method is not an object (a primitive), then it will cause a
typeerror. with object.getownpropertydescriptor, a non-object first argument will be coerced to an object at first. reflect.getownpropertydescriptor('foo', 0) //
typeerror: "foo" is not non-null object object.getownpropertydescriptor('foo', 0) // { value: "f", writable: false, enumerable: true, configurable: false } specifications specification ecmascript (ecma-262)the definition...
Reflect.isExtensible() - JavaScript
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. syntax reflect.isextensible(target) parameters target the target object which to check if it is extensible. return value a boolean indicating whether or not the target is extensible. exceptions a
typeerror, if target is not an object. description the reflect.isextensible method allows you determine if an object is extensible (whether it can have new properties added to it). it is the same method as object.isextensible(). examples using reflect.isextensible() see also object.isextensible(). // new objects are extensible. let empty = {} reflect.isextensible(empty) // === true // ...but t...
...// === false // sealed objects are by definition non-extensible. let sealed = object.seal({}) reflect.isextensible(sealed) // === false // frozen objects are also by definition non-extensible. let frozen = object.freeze({}) reflect.isextensible(frozen) // === false difference to object.isextensible() if the target argument to this method is not an object (a primitive), then it will cause a
typeerror. with object.isextensible(), a non-object first argument will be coerced to an object at first. reflect.isextensible(1) //
typeerror: 1 is not an object object.isextensible(1) // false specifications specification ecmascript (ecma-262)the definition of 'reflect.isextensible' in that specification. ...
Reflect.preventExtensions() - JavaScript
epository. 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.preventextensions(target) parameters target the target object on which to prevent extensions. return value a boolean indicating whether or not the target was successfully set to prevent extensions. exceptions a
typeerror, if target is not an object. description the reflect.preventextensions() method allows you to prevent new properties from ever being added to an object (i.e., prevents future extensions to the object). it is similar to object.preventextensions(). examples using reflect.preventextensions() see also object.preventextensions(). // objects are extensible by default. let empty = {} reflect.
...ct.preventextensions() see also object.preventextensions(). // objects are extensible by default. let empty = {} reflect.isextensible(empty) // === true // ...but that can be changed. reflect.preventextensions(empty) reflect.isextensible(empty) // === false difference from object.preventextensions() if the target argument to this method is not an object (a primitive), then it will cause a
typeerror. with object.preventextensions(), a non-object target will be coerced to an object. reflect.preventextensions(1) //
typeerror: 1 is not an object object.preventextensions(1) // 1 specifications specification ecmascript (ecma-262)the definition of 'reflect.preventextensions' in that specification. ...
Symbol.isConcatSpreadable - 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. description the @@isconcatspreadable symbol (symbol.isconcatspreadable) can be defined as an own or inherited property and its value is a boolean. ...
...d flattening in these cases. for array-like objects, the default behavior is no spreading or flattening. symbol.isconcatspreadable can force flattening in these cases. ...
Symbol.iterator - JavaScript
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 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. some built-in
types have a default iteration behavior, while other
types (such as object) do not. the built-in
types with a @@iterator method are: array.proto
type[@@iterator]()
typedarray.proto
type[@@iterator]() string.proto
type[@@iterator]() map.proto
type[@@iterator]() set.proto
type[@@iterator]() see also iteration protocols for more information. property attributes of symbol.iterator ...
... ...
Symbol.match - JavaScript
the symbol.match well-known symbol specifies the matching of a regular expression against a string. this function is called by the string.proto
type.match() method. 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. description this function is also used to identify if objects have the behavior of regular expressions. for example, the methods string.proto
type.startswith(), string.proto
type.endswith() and string.proto
type.includes(), check if their first argument is a regular expression and will throw a
typeerror if they are. now, if the match symbol is set to false (or a falsy value), it indicates that the object is no...
...e. now, if the match symbol is set to false (or a falsy value), it indicates that the object is not intended to be used as a regular expression object. property attributes of symbol.match writable no enumerable no configurable no examples disabling the isregexp check the following code will throw a
typeerror: '/bar/'.startswith(/bar/); // throws
typeerror, as /bar/ is a regular expression // and symbol.match is not modified. however, if you set symbol.match to false, the isregexp check (that uses the match property) will indicate that the object is not a regular expression object. the methods startswith and endswith won't throw a
typeerror as a consequence. var re = /foo/; re[symbol.match] =...
Symbol.replace - 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. ...
Symbol.unscopables - JavaScript
lse will 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. ...
...e no examples scoping in with statements the following code works fine in es5 and below. however, in ecmascript 2015 and later, the array.proto
type.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.proto
type[@@unscopables] to prevent that some of the array methods are being scoped into the with statement. var keys = []; with (array.proto
type) { keys.push('something'); } object.keys(array.proto
type[symbol.unscopables]); // ["copywithin", "entries", "fill", "find", "findindex", // "includes", "keys", "values"] unscopables in objects you can also set unscopables for your own objects. var obj =...
WebAssembly.Table - JavaScript
epresenting a webassembly table, which stores function references. a table created by javascript or in webassembly code will be accessible and mutable from both javascript and webassembly. note: tables can currently only store function references, but this will likely be expanded in the future. constructor webassembly.table() creates a new table object. instance properties table.proto
type.length returns the length of the table, i.e. the number of elements. instance methods table.proto
type.get() accessor function — gets the element stored at a given index. table.proto
type.grow() increases the size of the table instance by a specified number of elements. table.proto
type.set() sets an element stored at a given index to a given value. examples creating a new webassembl...
...ied number of elements. table.proto
type.set() sets an element stored at a given index to a given value. examples creating a new webassembly table instance the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial size of 2 elements. we then print out the table length and contents of the two indexes (retrieved via table.proto
type.get() to show that the length is two and both elements are null. var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); // "2" console.log(tbl.get(0)); // "null" console.log(tbl.get(1)); // "null" we then create an import object that contains the table: var importobj = { js: { tbl:tbl } }; finally, we load and instantiate a wasm module (table2.was...
WebAssembly.instantiateStreaming() - JavaScript
return value a promise that resolves to a resultobject which contains two fields: module: a webassembly.module object representing the compiled webassembly module. this module can be instantiated again or shared via postmessage(). instance: a webassembly.instance object that contains all the exported webassembly functions. exceptions if either of the parameters are not of the correct
type or structure, a
typeerror is thrown. if the operation fails, the promise rejects with a webassembly.compileerror, webassembly.linkerror, or webassembly.runtimeerror, depending on the cause of the failure. examples instantiating streaming the following example (see our instantiate-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source t...
...n it fulfills. var importobject = { imports: { imported_func: arg => console.log(arg) } }; webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the resultobject's instance member is then accessed, and the contained exported function invoked. note: for this to work, .wasm files should be returned with an application/wasm mime
type by the server. specifications specification webassembly features for web embeddingthe definition of 'instantiatestreaming()' in that specification. 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 req...
WebAssembly - JavaScript
aps from the start function). webassembly.memory() an object whose buffer property is a resizable arraybuffer that holds the raw bytes of memory accessed by a webassembly instance. webassembly.module() contains stateless webassembly code that has already been compiled by the browser and can be efficiently shared with workers, and instantiated multiple times. webassembly.runtimeerror() error
type that is thrown whenever webassembly specifies a trap. webassembly.table() an array-like structure representing a webassembly table, which stores function references. static methods webassembly.instantiate() the primary api for compiling and instantiating webassembly code, returning both a module and its first instance. webassembly.instantiatestreaming() compiles and instantiates a webas...
...rom a streamed underlying source, returning both a module and its first instance. webassembly.compile() compiles a webassembly.module from webassembly binary code, leaving instantiation as a separate step. webassembly.compilestreaming() compiles a webassembly.module directly from a streamed underlying source, leaving instantiation as a separate step. webassembly.validate() validates a given
typed array of webassembly binary code, returning whether the bytes are valid webassembly code (true) or not (false). examples stream a .wasm module then compile and instantiate it the following example (see our instantiate-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source then compiles and instantiates it, the promise fulfilling with a...
isNaN() - JavaScript
eric values of non-numeric values for which no primitive numeric value is available. for example, dividing zero by zero results in a nan — but dividing other numbers by zero does not. confusing special-case behavior since the very earliest versions of the isnan function specification, its behavior for non-numeric arguments has been confusing. ...
...y zero does not. confusing special-case behavior since the very earliest versions of the isnan function specification, its behavior for non-numeric arguments has been confusing. when the argument to the isnan function is not of
type number, the value is first coerced to a number. the resulting value is then tested to determine whether it is nan. thus for non-numbers that when coerced to numeric
type result in a valid non-nan numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is surely "not a number." the confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as ieee-754 floating-point values. the fu...
Standard built-in objects - JavaScript
parsefloat() parseint() encodeuri() encodeuricomponent() decodeuri() decodeuricomponent() deprecated escape() unescape() fundamental objects these are the fundamental, basic objects upon which all other objects are based. this includes general objects, booleans, functions, and symbols. object function boolean symbol error objects error objects are a special
type of fundamental object. they include the basic error
type, as well as several specialized error
types. error aggregateerror evalerror internalerror rangeerror referenceerror syntaxerror
typeerror urierror numbers and dates these are the base objects representing numbers, dates, and mathematical calculations. number bigint math date text processing these objects represe...
... array int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array keyed collections these objects represent collections which use keys. ...
Destructuring assignment - JavaScript
combined array and object destructuring array and object destructuring can be combined. ...
...property in the object, you can do the following: const props = [ { id: 1, name: 'fizz'}, { id: 2, name: 'buzz'}, { id: 3, name: 'fizzbuzz'} ]; const [,, { name }] = props; console.log(name); // "fizzbuzz" the proto
type chain is looked up when the object is deconstructed when deconstructing an object, if a property is not accessed in itself, it will continue to look up along the proto
type chain. let obj = {self: '123'}; obj.__proto__.prot = '456'; const {self, prot} = obj; // self "123" // prot "456"ļ¼access to the proto
type chainļ¼ specifications specification ecmascript (ecma-262)the definition of 'destructuring assignment' in that specification. ...
Unary plus (+) - JavaScript
ay of converting something into a number, because it does not perform any other operations on the number. it can convert string representations of integers and floats, as well as the non-string values true, false, and null. integers in both decimal and hexadecimal (0x-prefixed) formats are supported. negative numbers are supported (though not for hex). ...
...pported. negative numbers are supported (though not for hex). using the operator on bigint values throws a
typeerror. if it cannot parse a particular value, it will evaluate to nan. examples usage with numbers const x = 1; const y = -1; console.log(+x); // 1 console.log(+y); // -1 usage with non-numbers +true // 1 +false // 0 +null // 0 +function(val){ return val } // nan +1n // throws
typeerror: cannot convert bigint value to number specifications specification ecmascript (ecma-262)the definition of 'unary plus operator' in that specification. ...
Function expression - JavaScript
as soon as it is defined. see also the chapter about functions for more information. function expression hoisting function expressions in javascript are not hoisted, unlike function declarations. you can't use function expressions before you create them: console.log(nothoisted) // undefined // even though the variable name is hoisted, the definition isn't. so it's undefined. nothoisted(); //
typeerror: nothoisted is not a function var nothoisted = function() { console.log('bar'); }; named function expression if you want to refer to the current function inside the function body, you need to create a named function expression. this name is then local only to the function body (scope). this also avoids using the non-standard arguments.callee property. let math = { 'factit': functio...
... the variable name (implicit name). if function name is present, it will be the function name (explicit name). this also applies to arrow functions (arrows don't have a name so you can only give the variable an implicit name). var foo = function() {} foo.name // "foo" var foo2 = foo foo2.name // "foo" var bar = function baz() {} bar.name // "baz" console.log(foo === foo2); // true console.log(
typeof baz); // undefined console.log(bar === baz); // false (errors because baz == undefined) examples creating an unnamed function the following example defines an unnamed function and assigns it to x. the function returns the square of its argument: var x = function(y) { return y * y; }; using a function as a callback more commonly it is used as a callback: button.addeventlistener('clic...
Expressions and operators - JavaScript
ix/prefix increment and postfix/prefix decrement operators. a++ postfix increment operator. a-- postfix decrement operator. ++a prefix increment operator. --a prefix decrement operator. unary operators a unary operation is operation with only one operand. delete the delete operator deletes a property from an object. void the void operator discards an expression's return value.
typeof the
typeof operator determines the
type of a given object. + the unary plus operator converts its operand to number
type. - the unary negation operator converts its operand to number
type and then negates it. ~ bitwise not operator. ! logical not operator. arithmetic operators arithmetic operators take numerical values (either literals or variables) as their operands and return a si...
...ject has a given property. instanceof the instanceof operator determines whether an object is an instance of another object. < less than operator. > greater than operator. <= less than or equal operator. >= greater than or equal operator. note: => is not an operator, but the notation for arrow functions. equality operators the result of evaluating an equality operator is always of
type boolean based on whether the comparison is true. == equality operator. != inequality operator. === identity operator. !== nonidentity operator. bitwise shift operators operations to shift all bits of the operand. << bitwise left shift operator. >> bitwise right shift operator. >>> bitwise unsigned right shift operator. binary bitwise operators bitwise operators treat their...
import.meta - JavaScript
dule. it contains information about the module, like the module's url. syntax import.meta description the syntax consists of the keyword import, a dot, and the identifier meta. 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 proto
type. the object is extensible, and its properties are writable, configurable, and enumerable. examples using import.meta given a module my-module.js <script
type="module" src="my-module.js"></script> you can access meta information about the module using the import.meta object. console.log(import.meta); // { url: "file:///home/user/my-module.js" } it returns an object with a url property indi...
...me/user/my-module.js" } it returns an object with a url property indicating the base url of the module. this will either be the url from which the script was obtained, for external scripts, or the document base url of the containing document, for inline scripts. note that this will include query parameters and/or hash (i.e., following the ? or #). ...
throw - JavaScript
ror object with the message of required also note that the throw statement is affected by automatic semicolon insertion (asi) as no line terminator between the throw keyword and the expression is allowed. 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(mo) { mo = mo - 1; // adjust month number for array index (1 = jan, 12 = dec) var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; if (months[mo] !== undefined) { ret...
...ound to raise the exception var monthname = getmonthname(mymonth); } catch (e) { monthname = 'unknown'; console.error(e.message, e.name); // pass exception object to err handler } another example of throwing an object the following example tests an input string for a u.s. zip code. if the zip code uses an invalid format, the throw statement throws an exception by creating an object of
type zipcodeformatexception. /* * creates a zipcode object. * * accepted formats for a zip code are: * 12345 * 12345-6789 * 123456789 * 12345 6789 * * if the argument passed to the zipcode constructor does not * conform to one of these patterns, an exception is thrown. */ function zipcode(zip) { zip = new string(zip); pattern = /[0-9]{5}([- ]?[0-9]{4})?/; if (pattern.
Transitioning to strict mode - JavaScript
ffect. if you really want to set a value to the global object, pass it as an argument and explicitly assign it as a property: var global = this; // in the top-level context, "this" always // refers to the global object function f(x) { 'use strict'; var a = 12; global.b = a + x * 35; } f(42); trying to delete a non-configurable property 'use strict'; delete object.proto
type; // error! in non-strict, this would silently fail, in contradiction with the user expectation. poisoned arguments and function properties accessing arguments.callee, arguments.caller, anyfunction.caller, or anyfunction.arguments throws an error in strict mode. the only legitimate use case would be to reuse a function as in: // example taken from vanillajs: http://vanilla-js.com/ var s = doc...
... ...
serviceworker - Web app manifests
this is the only required member of the serviceworker member. scope a string representing a url that defines a service worker's registration scope; that is, what range of urls a service worker can control. this is usually a relative url, relative to the base url of the application. ...
...f the serviceworker member. scope a string representing a url that defines a service worker's registration scope; that is, what range of urls a service worker can control. this is usually a relative url, relative to the base url of the application. by default, the scope value for a service worker registration is set to the directory where the service worker script is located.
type ? update_via_cache whether the user agent cache should be bypassed when fetching the service worker. ...
MathML attribute reference - MathML
ilable on particular element pages. notes: the mathml <mstyle> and <math> elements accept all attributes of all mathml presentation elements. see values for notes on values and units in mathml. the attributes background, color, fontfamily, fontsize, fontstyle, fontweight and xlink:href are deprecated. ...
... align <mtable> <munder>, <mover>, <munderover> <mstack> specifies different alignments of several elements (see element pages for details). ...
Handling media support issues in web content - Web media technologies
grees of popularity and with a variety of capabilities. the availability of choices is good for the user, in that they can choose the format that suits their needs best. there is a drawback, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each web browser developer is left to its own devices when deciding which media file
types and codecs to support. this places a small, but reasonably easily overcome, burden on the web developer: to properly handle the situation when the user's browser can't handle a particular
type of media. this guide covers techniques you can use to develop web content that meets your media needs while providing the most broadly compatible experience possible. topics we will examine fallbacks, bas...
...le, then update the image as it loads—or after it's finished loading—to present it in full quality. note: progressive (or interlaced) images are inherently slightly larger than the non-progressive versions of the same images. whether the interlacing will benefit your users is up to you to determine. specifying multiple sources checking compatibility in javascript htmlmediaelement.canplay
type and mediasource.is
typesupported... detecting playback errors adapting presentation with css memory management ...
Digital video concepts - Web media technologies
rods to around 6 or 7 million cones), we see detail in greyscale, with color being far less detailed. in essence, our eyes are like a camera with two image sensor chips: one greyscale and one color. the greyscale sensor is 120 megapixels, while the color sensor is only about 7 megapixels. these sensors physically occupy the same surface, called the retina, at the back of the eye. there are three
types of cones, each of which responds to a particular wavelength band of incoming light, but also to the intensity of the light at that wavelength. each
type of cone, then, captures the relative reponse peaks at various wavelengths, and the brain uses this data to figure out the intensity and hue of the color of the light arriving at that part of the retina. as our eyes capture a scene, they essenti...
...ented by a matrix of luma values, y, with each pixel's color computed using the values in the u and v matrices. for example, in the av1 codec, a record stores the encoded luma for a tile, and a second record contains the chroma data in the form of the u and v values. in broadcast television, the luma signal is the primary signal, while the chrominance data is sent on a subcarrier. the jpeg file
type's compression works by first converting the image to the y'uv color system, then compressing that data. each of y', cb, and cr are able to have values from 0 to 255. ...
Animation performance and frame rate - Web Performance
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. for animated media, such as video and animated gifs, the main performance concern is file size - downloading the file size fast enough to not negatively impact performance is the greatest issue. ...
...sed on javascript canvas api functions. when a canvas is animating a drawing, the canvas animation can be described as a waterfall consisting of the following steps: these sequenced need to fit into a single frame, since the screen isn't updated until it is complete. css property cost in the context of the rendering waterfall, some properties are more expensive than others: property
type cost examples properties that affect an element's geometry or position trigger a style recalculation, a layout and a repaint. left max-width border-width margin-left font-size properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout. color ...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
ionserverkey, which contains our successfully acquired and converted vapid key. return registration.pushmanager.subscribe({ uservisibleonly: true, applicationserverkey: convertedvapidkey }); now let's move to the subscription part — the app first sends the subscription details as json to the server using fetch. ...
...he subscribe button is defined: document.getelementbyid('doit').onclick = function() { const payload = document.getelementbyid('notification-payload').value; const delay = document.getelementbyid('notification-delay').value; const ttl = document.getelementbyid('notification-ttl').value; fetch('./sendnotification', { method: 'post', headers: { 'content-
type': 'application/json' }, body: json.stringify({ subscription: subscription, payload: payload, delay: delay, ttl: ttl, }), }); }; when the button is clicked, fetch asks the server to send the notification with the given parameters: payload is the text that to be shown in the notification, delay defines a delay in seconds u...
SVG Event Attributes - SVG: Scalable Vector Graphics
the global event attributes are available on all svg elements. other event attributes are available on a case by case basis for each elements. all event attribute are not animatable. ...
... the global event attributes are available on all svg elements. other event attributes are available on a case by case basis for each elements. all event attribute are not animatable. ...
dur - SVG: Scalable Vector Graphics
the dur attribute indicates the simple duration of an animation. ...
...the value must be greater than 0 and can be expressed with hours (h), minutes (m), s...
exponent - SVG: Scalable Vector Graphics
efs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="gamma" exponent="1"/> <fefuncg
type="gamma" exponent="1"/> <fefuncb
type="gamma" exponent="1"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="gamma" exponent="5"/> <fefuncg
type="gamma" exponent="5"/> <fefuncb
type="gamma" exponent="5"/> </fecomponenttrans...
... working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'exponent' in that specific...
intercept - SVG: Scalable Vector Graphics
the intercept attribute defines the intercept of the linear function of color component transfers when the
type attribute is set to linear. ...
...efs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="linear" intercept="0"/> <fefuncg
type="linear" intercept="0"/> <fefuncb
type="linear" intercept="0"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr
type="linear" intercept="0.3"/> <fefuncg
type="linear" intercept="0.1"/> <fefuncb
type="linear" intercept="0.8"/> ...
repeatCount - SVG: Scalable Vector Graphics
the repeatcount attribute indicates the number of times an animation will take place. ...
...it can include partial iterations expressed as fraction values. a fractional value describes a portion of the simple ...
restart - SVG: Scalable Vector Graphics
cifies whether or not an animation can restart. ...
...{ height: 100%; } a { fill: blue; text-decoration: underline; cursor: pointer; } <svg viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="100"> <animate attribute
type="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attribute
type="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennot...
scale - SVG: Scalable Vector Graphics
ilter primitive. the amount is expressed in the coordinate system established by the primitiveunits attribute on the <filter> element. ...
...80 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence
type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence
type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter);""/> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter2); transform: translatex(240px);""/> </svg> usage notes value <number> ...
visibility - SVG: Scalable Vector Graphics
recommendation css definition of the property scalable vector graphics (svg) 2the definition of 'visibility'...
... recommendation css definition of the property scalable vector graphics (svg) 2the definition of 'visibility' in that specification. candidate recommendation mainly refers to css 2.1 ...
<feTurbulence> - SVG: Scalable Vector Graphics
arble. the resulting image will fill the entire filter primitive subregion. ...
...s core attributes presentation attributes filter primitive attributes class style specific attributes basefrequency numoctaves seed stitchtiles
type dom interface this element implements the svgfeturbulenceelement interface. ...
<path> - SVG: Scalable Vector Graphics
element to define a shape. all the basic shapes can be created with a path element. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z"/> </svg> attributes d this attribute defines the shape of the path. ...
...http://www.w3.org/2000/svg"> <path d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z"/> </svg> attributes d this attribute defines the shape of the path. value
type: <string> ; default value: ''; animatable: yes pathlength this attribute lets authors specify the total length for the path, in user units. ...
<polygon> - SVG: Scalable Vector Graphics
ample of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. ...
...nd no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. value
type: <number>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units. ...
<set> - SVG: Scalable Vector Graphics
for attributes that can be reasonably be interpolated, the <animate> is usualy prefered. note: the <set> element is non-additive. the additive and accumulate attributes are not allowed, and will be ignored if specified. ...
...rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation. the value must match the requirements of the target attribute. ...
Basic shapes - SVG: Scalable Vector Graphics
must contain two numbers: an x coordinate and a y coordinate. so, the list (0,0), (1,1), and (2,2) would be written as 0, 0 1, 1 2, 2. polygon a <polygon> is similar to a <polyline>, in that it is composed of straight line segments connecting a list of points. for polygons though, the path automatically connects the last point with the first, creating a closed shape. note: a rectangle is a
type of polygon, so a polygon can be used to create a <rect/> element in cases where you need a little more flexibility. <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/> points a list of points, each number separated by a space, comma, eol, or a line feed character. each point must contain two numbers: an x coordinate and a y coordinate. so, the...
...coordinate. so, the list (0,0), (1,1), and (2,2) would be written as 0, 0 1, 1 2, 2. the drawing then closes the path, so a final straight line would be drawn from (2,2) to (0,0). path a <path> is the most general shape that can be used in svg. using a path element, you can draw rectangles (with or without rounded corners), circles, ellipses, polylines, and polygons. basically any of the other
types of shapes, bezier curves, quadratic curves, and many more. for this reason, the next section in this tutorial will be focused on paths. but for now, note that there is a single parameter used to control its shape. <path d="m20,230 q40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> d a list of points and other information about how to draw the path. see the paths section f...
Gradients in SVG - SVG: Scalable Vector Graphics
you must give the gradient an id attribute; otherwise it can't be referenced by other elements inside the file. gradients are defined in a defs section as opposed to on a shape itself to promote reusability. linear gradient linear gradients change along a straight line. to insert one, you create a <lineargradient> node inside the definitions section of your svg file. ...
...class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </lineargradient> <style
type="text/css"><![cdata[ #rect1 { fill: url(#gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#gradient2)"/> </svg> scree...
xml:base - XML: Extensible Markup Language
> </defs> <line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line> </svg> </body> </html> imagine a svg with font references. e.g. ...
... work-arounds xml:base support in old browsers https://gist.github.com/leonderijke/...
XPath snippets - XPath
example: defining a getxpathforelementāā() utility function function getxpathforelement(el, xml) { var xpath...
... the following function allows one to pass an element and an xml document to find a unique string xpath expression leading back to that element. ...
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
namespace the xslt 1.0 namespace is http://www.w3.org/1999/xsl/transform. older versions of ie used a different namespace. however these versions also used a draft version of xslt which is incompatible with what eventually became the xslt 1.0 specification. firefox only supports the official xslt 1.0 version. ...
... namespace the xslt 1.0 namespace is http://www.w3.org/1999/xsl/transform. older versions of ie used a different namespace. however these versions also used a draft version of xslt which is incompatible with what eventually became the xslt 1.0 specification. firefox only supports the official xslt 1.0 version. ...
<xsl:sort> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes 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. syntax <xsl:sort select=expression order="ascending" | "descending" case-order="upper-first" | "lower-first" lang=xml:lang-code data-
type="text" | "number" /> required attributes none. optional attributes select uses an xpath expression to specify the nodes to be sorted. order specifies whether the nodes should be processed in "ascending" or "descending" order. the default is "ascending". case-order indicates whether upper- or lowercase letters are to be ordered first. the allowable values are "upper-first" and "lower-...
...ses an xpath expression to specify the nodes to be sorted. order specifies whether the nodes should be processed in "ascending" or "descending" order. the default is "ascending". case-order indicates whether upper- or lowercase letters are to be ordered first. the allowable values are "upper-first" and "lower-first". lang specifies which language is to be used by the sort. data-
type defines whether items are to be ordered alphabetically or numerically. the allowable values are "text" and "number" with "text" being the default.
type subinstruction, always appears as a child of <xsl:for-each>, where it must appear before the template proper or of <xsl:apply-templates>. defined xslt, section10. gecko support supported. ...
Index - XSLT: Extensible Stylesheet Language Transformations
1 xslt: extensible stylesheet language transformations landing, web, xslt extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml documents. 2 common xslt errors xslt your server needs to send both the source and the stylesheet with a xml mime
type, text/xml or application/xml. to find out the current
type, load the file in mozilla and look at the page info. or use a download tool, those usually tell the mime
type. 3 index index, reference, xslt found 54 pages: 4 pi parameters xslt no summary! 5 the xslt/javascript interface in gecko xslt no summary! 6 advanced exampl...
...17 the netscape xslt/xpath reference netscape, reference, xslt, axes no summary! 18 using the mozilla javascript interface to xsl transformations xslt this document describes the javascript interface in mozilla 1.2 and up to the xslt processing engine (transformiix). 19 xslt elements reference element, overview, reference, xslt there are two
types of elements discussed here: top-level elements and instructions. a top-level element must appear as the child of either <xsl:stylesheet> or <xsl:transform>. an instruction, on the other hand, is associated with a template. a stylesheet may include several templates. a third
type of element, not discussed here, is the literal result element (lre). an lre also appears in a template. it consists of...
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
e implemented in firefox 2 (see supported versions below for details), <?xslt-param?> and <?xslt-param-namespace?>. both pis can contain "pseudo attributes" the same way that the xml-stylesheet pi does. the following document passes the two parameters "color" and "size" to the stylesheet "style.xsl". <?xslt-param name="color" value="blue"?> <?xslt-param name="size" select="2"?> <?xml-stylesheet
type="text/xsl" href="style.xsl"?> note that these pis have no effect when transformation is done using the xsltprocessor object in javascript. processing instructions the attributes in the xslt-param and xslt-param-namespace pis are parsed using the rules defined in xml-stylesheet. any unrecognized attributes must be ignored. parsing of any attribute must not fail due to the presence of an unreco...
... the local-name part of the parameter name. no syntax checking is done on the attribute, however if it is not a valid ncname it will never match any parameter in the stylesheet. namespace the namespace of the parameter name. no syntax checking is done on the attribute. value contains the string value for the parameter. the value of the attribute is used as value for the parameter. the data
type will always bestring. select an xpath expression for the parameter. the value of the attribute is parsed as an xpath expression. the result of evaluating the expression is used as value for the parameter. if the name attribute is missing or empty the pi is ignored. if the namespace attribute is missing or empty the null namespace is used. it is not an error to specify a parameter name that...
Compiling a New C/C++ Module to WebAssembly - WebAssembly
mplate/shell_minimal.html -s no_exit_runtime=1 -s "extra_exported_runtime_methods=['ccall']" if you load the example in your browser again, you'll see the same thing as before! now we need to run our new myfunction() function from javascript. first of all, open up your hello3.html file in a text editor. ...
...t opening <script
type='text/javascript'> tag. <button class="mybutton">run myfunction</button> now add the following code at the end of the first <script> element: document.queryselector('.mybutton') .addeventlistener('click', function() { alert('check console'); var result = module.ccall( 'myfunction', // name of c function null, // return
type null, // argument
types null // arguments ); }); this illustrates how ccall() is used to call the exported function. ...
WebAssembly
it is also designed to run alongside javascript, allowing both to work together. in a nutshell webassembly has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn’t have done so. ...
...assembly.instantiatestreaming() the webassembly.instantiatestreaming() function is the primary api for compiling and instantiating webassembly code, returning both a module and its first instance. webassembly.memory() a webassembly.memory object is a resizable arraybuffer that holds the raw bytes of memory accessed by an instance. webassembly.table() a webassembly.table object is a resizable
typed array of opaque values, like function references, that are accessed by an instance. webassembly.compileerror() creates a new webassembly compileerror object. webassembly.linkerror() creates a new webassembly linkerror object. webassembly.runtimeerror() creates a new webassembly runtimeerror object. examples wasmsobel see our webassembly-examples repo for a number of other examples.
XUL Coding Style Guidelines - Archive of obsolete content
to make xul files easy to read and maintain, localization friendly, and portable across user agents, we need to have a set of coding style guidelines to ensure our objectives are achievable. the author has collected a set of guidelines from various sources listed in the references section. ...
XUL Event Propagation - Archive of obsolete content
he combination of basic these two basic event flow mechanisms, event bubbling and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event. this flexibility in the xul event model is the focus of this article. ...
action - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheigh...
autohide - Archive of obsolete content
« xul reference home 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. ...
bbox - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
box - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
broadcaster - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
broadcasterset - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
clicktoscroll - Archive of obsolete content
« xul reference home clicktoscroll
type: boolean if true, the up or down arrow(s) must be clicked to scroll the content. if false, the content will scroll automatically when the cursor hovers over either arrow. ...
column - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
columns - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
conditions - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
grippy - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
hbox - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
listcol - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
listcols - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
page - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
popupset - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
queryset - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
row - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
rows - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
scrollbox - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
scrollcorner - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
spacer - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
stack - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
stringbundleset - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
tabpanel - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
titlebar - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, ...
toolbaritem - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
toolbarpalette - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
toolbarset - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight...
vbox - Archive of obsolete content
from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, query
type, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheig...
XULRunner 1.9.2 Release Notes - Archive of obsolete content
s you registered it during installation. remove the xulrunner directory. mac os x if you have multiple versions of xulrunner installed on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /library/frameworks/xul.framework directory. you also need to remove the receipt, especially if you plan on reinstalling a different version.
type sudo rm /var/db/receipts/org.mozilla.xulrunner.* installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer center. save the application archive to your desktop or another convenient place. windows run the following command from th...
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
_started_with_xulrunner appupdatesurl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner defaultdirname={pf}\my app defaultgroupname=my app allownoicons=yes outputdir=..\build\output outputbasefilename=myapp-1.0-win32 ; setupiconfile= compression=lzma solidcompression=yes [languages] name: english; messagesfile: compiler:default.isl [components] name: main; description: my app;
types: full compact custom; flags: fixed name: runtime; description: xul runner runtime;
types: full custom [tasks] name: desktopicon; description: {cm:createdesktopicon}; groupdescription: {cm:additionalicons}; flags: unchecked name: quicklaunchicon; description: {cm:createquicklaunchicon}; groupdescription: {cm:additionalicons}; flags: unchecked [files] source: c:\develop\xulrunnerinstaller\myapp\...
Specifying Startup Chrome Window - Archive of obsolete content
the toolkit.defaultchromeuri preference specifies that the xul window at chrome://xulmine/content/xulmine.xul is the main application window. specifying a single instance main window by default, each time the user launches the application xulrunner opens the window specified by toolkit.defaultchromeuri. an application wishing to have only one main window should set the toolkit.singletonwindow
type preference and specify the window
type attribute on the main application window. specifying window features by default, the main window is opened as a resizeable, non-dialog chrome window. this default can be changed by setting the toolkit.defaultchromefeatures preference. ...
toolkit.defaultChromeFeatures - Archive of obsolete content
type: string specified by: default prefs of xulrunner applications default: "chrome,dialog=no,all" example: pref("toolkit.defaultchromefeatures", "chrome,resizable=no,dialog=no"); the toolkit.defaultchromefeatures preference allows simple xulrunner-based applications to specify what features are passed to window.open() when the main application window is opened. see also: xulrunner:specifying startup chrome window, dom:window.open, toolkit.defaultchromeuri, toolkit.singletonwindow
type. ...
toolkit.defaultChromeURI - Archive of obsolete content
type: string specified by: default prefs of xulrunner applications default: none example: pref("toolkit.defaultchromeuri", "chrome://myapp/content/"); the toolkit.defaultchromeuri preference allows simple xulrunner-based applications to open a new window when the application is launched. the preference specifies the uri of a chrome window to be opened. see also: xulrunner:specifying startup chrome window, toolkit.defaultchromefeatures, toolkit.singletonwindow
type. ...
mozilla.dev.platform FAQ - Archive of obsolete content
uses the embedded framework successfully. please make sure you're using 1.8.0.4 or later (not 1.8.0.1, which had a bug that prevented this from working properly). q: when using xul elements <browser/> and <tabbrowser/> the javascript popup windows don't work out of the box, what needs to be implement? a: have the browser.chromeurl preference - this should be a xul document containing a <browser
type="content-primary"> element in which the popup window's content should get loaded. visual studio express 2005 q: when i try to run xulrunner-stub.exe i get the error "this application failed to start because msvcr80.dll was not found." a: see bug 350616 ...
Mozprofile - Archive of obsolete content
ons addons may be installed individually or from a manifest. example: from mozprofile import firefoxprofile # create new profile to pass to mozmill/mozrunner profile = firefoxprofile(addons=["adblock.xpi"]) setting preferences preferences can be set in several ways: using the api: you can pass preferences in to the profile class's constructor: obj = firefoxprofile(preferences=[("accessibility.
typeaheadfind.flashbar", 0)]) using a json blob file: mozprofile --preferences myprefs.json using a .ini file: mozprofile --preferences myprefs.ini via the command line: mozprofile --pref key:value --pref key:value [...] when setting preferences from an .ini file or the --pref switch, the value will be interpolated as an integer or a boolean (true/false) if possible. setting permissions mozprofile...
reftest opportunities files - Archive of obsolete content
rmelem http://dbaron.org/css/test/sec010303 http://dbaron.org/css/test/sec0302 http://dbaron.org/css/test/sec0302_xml http://dbaron.org/css/test/parsing http://dbaron.org/css/test/parsing2 http://dbaron.org/css/test/parsing4 http://dbaron.org/css/test/parsing5 http://dbaron.org/css/test/parsing6 http://dbaron.org/css/test/sec040102 http://dbaron.org/css/test/casesens http://dbaron.org/css/test/xml
typesel http://dbaron.org/css/test/unitless http://dbaron.org/css/test/exunit http://dbaron.org/css/test/emunit http://dbaron.org/css/test/sec040310 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/univsel http://dbaron.org/css/test/childsel http://dbaron.org/css/test/sibsel http://dbaron.org/css/test/attrsel http://dbaron.org/css/test/twocla...
Archived Mozilla and build documentation - Archive of obsolete content
nymous xul nodes. calicalendarviewcontroller a calicalendarviewcontroller provides a way for a calicalendarview to create, modify, and delete items. implementing a calicalendarviewcontroller allows for these actions to be performed in a manner consistent with the rest of the application in which the calicalendarview is included. califile
type the califile
type interface provides information about a specific file
type. chromeless [this project may not be active — check github https://github.com/mozilla/chromeless] creating a firefox sidebar extension this article describes how to create a registered sidebar for firefox 2 or greater. see the references section for information on creating extensio...
2006-10-13 - Archive of obsolete content
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=300198, regarding middle clicking on a tab. annoying firefox 2 save dialog instead of open/save ones. user questions about a open/saveas bug that already exisits: https://bugzilla.mozilla.org/show_bug.cgi?id=347230 installer for 2.0rc2 ehume gives the developers a thumbs up for the new installer for 2.0rc2 having a textfield where you can
type in the installation directory. a way to recover the toolbars from popup windows that hide it a suggestion for a way to recover toolbars from a popup window that disables it. user suggests 3 ways, and suggests a default. (no responses as of yet) selected tab looks too close to unselected tab discussion about how to change the colour of a selected tab and an unselected tab. it's suggested t...
WebGLRenderingContext.drawArrays() - Web APIs
possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. ...
WebGLRenderingContext.getTexParameter() - Web APIs
ues: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. pname a glenum specifying the information to query. possible values: pname return
type description possible return values available in a webgl 1 context gl.texture_mag_filter glenum texture magnification filter gl.linear (default value), gl.nearest. gl.texture_min_filter glenum texture minification filter gl.linear, gl.nearest, gl.nearest_mipmap_nearest, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear (def...
WebGLRenderingContext.getUniformLocation() - Web APIs
cating the location of the named variable, if it exists. if the specified variable doesn't exist, null is returned instead. the webgluniformlocation is an opaque value used to uniquely identify the location in the gpu's memory at which the uniform variable is located. with this value in hand, you can call other webgl methods to access the value of the uniform variable. the webgluniformlocation
type is compatible with the glint
type when specifying the index or location of a uniform attribute. errors the following errors may occur; to check for errors after getuniformlocation() returns, call geterror(). gl_invalid_value the program parameter is not a value or object generated by webgl. gl_invalid_operation the program parameter doesn't correspond to a glsl program generated by webgl...
WebGLRenderingContext.makeXRCompatible() - Web APIs
t's actually defined by the webxr device api rather than by webgl. examples this example demonstrates code logic you might find in a game that starts up using webgl to display menus and other ui, and uses webgl to render gameplay, but has a button on its main menu that offers an option to start the game in webxr mode. html the html for the buttons looks lke this: <button class="green button"
type="button">start game</button> <button class="blue button use-webxr"
type="button">start game (vr mode)</button> the first button starts the game, continuing to present the game onscreen as usual. the second button will be used to start the game in immersive-vr mode. note the inclusion of a use-webxr class on the vr mode button. this is important, which we'll explore shortly. javascript the cod...
WebGLRenderingContext.renderbufferStorage() - Web APIs
alpha8 (also available as an extension for webgl 1, see below) gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a2ui gl.rgba16ui gl.rgba16i gl.rgba32i gl.rgba32ui gl.depth_component24 gl.depth_component32f gl.depth24_stencil8 gl.depth32f_stencil8 when using the webgl_color_buffer_float extension: ext.rgba32f_ext: rgba 32-bit floating-point
type. ext.rgb32f_ext: rgb 32-bit floating-point
type. when using the ext_srgb extension: ext.srgb8_alpha8_ext: 8-bit srgb and alpha. when using a webgl 2 context and the ext_color_buffer_float extension: gl.r16f gl.rg16f gl.rgba16f gl.r32f gl.rg32f gl.rgba32f gl.r11f_g11f_b10f width a glsizei specifying the width of the renderb...
WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
void gl.uniform3iv(location, value); void gl.uniform4f(location, v0, v1, v2, v3); void gl.uniform4fv(location, value); void gl.uniform4i(location, v0, v1, v2, v3); void gl.uniform4iv(location, value); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify. value, v0, v1, v2, v3 a new value to be used for the uniform variable. possible
types: a floating point number for floating point values (methods with "f"). a sequence of floating point numbers (for example a float32array or an array of numbers) for floating point vector methods (methods with "fv"). an integer number for integer values (methods with "i"). an int32array for integer vector methods (methods with "iv"). return value none. examples gl.uniform1f(u_al...
Basic scissoring - Web APIs
line. <p>result of of scissoring.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.
type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // the drawing buffer to be identical to the size of the // canvas html element, as determined by css. canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl"...
Clearing by clicking - Web APIs
: 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves. the event handler removes // itself, because it only needs to run once. window.removeeventlistener(evt.
type, setupwebgl, false); // adding the same click event handler to both canvas and // button. var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-switcher"); canvas.addeventlistener("click", switchcolor, false); button.addeventlistener("click", switchcolor, false); // a variable to hold the webglrenderingcontext. var gl; // the click e...
Clearing with colors - Web APIs
manipulate it, // and to not mess up the global scope. we are giving the event // handler a name (setupwebgl) so that we can refer to the // function object within the function itself. window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves. the event handler removes // itself, because it only needs to run once. window.removeeventlistener(evt.
type, setupwebgl, false); // references to the document elements. var paragraph = document.queryselector("p"), canvas = document.queryselector("canvas"); // getting the webgl rendering context. var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); // if failed, inform user of failure. otherwise, initialize // the drawing buffer (the viewport) and clear ...
Color masking - Web APIs
display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.
type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight...
Raining rectangles - Web APIs
ht : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.
type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .addeventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0...
Data in WebGL - Web APIs
shader programs have access to three kinds of data storage, each of which has a specific use case. each kind of variable is accessible by one or both
types of shader program (depending on the data store
type) and possibly by the site's javascript code, depending on the specific
type of variable. glsl data
types <<document the basic
types, vectors, etc; see data
type (glsl) on the khronos webgl wiki>> glsl variables there are three kinds of "variable" or data storage available in glsl, each of which with its own purpose and use cases: attributes, varyings, and uniforms. attributes attributes are glsl variables which are only available to the vertex shader (as variables) and the javascript code. attributes are typically used to store color information, texture coordinates, and a...
WebGL best practices - Web APIs
al */ dstoffset, /* optional */ length) { const sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.flush(); await clientwaitasync(gl, sync, 0, 10); gl.deletesync(sync); gl.bindbuffer(target, buffer); gl.getbuffersubdata(target, srcbyteoffset, dstbuffer, dstoffset, length); gl.bindbuffer(target, null); return dest; } async function readpixelsasync(gl, x, y, w, h, format,
type, dest) { const buf = gl.createbuffer(); gl.bindbuffer(gl.pixel_pack_buffer, buf); gl.bufferdata(gl.pixel_pack_buffer, dest.bytelength, gl.stream_read); gl.readpixels(x, y, w, h, format,
type, 0); gl.bindbuffer(gl.pixel_pack_buffer, null); await getbuffersubdataasync(gl, gl.pixel_pack_buffer, buf, 0, dest); gl.deletebuffer(buf); return dest; } canvas and webgl-related some tip...
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
ion or reservation of resources that may be needed. where it matters for webrtc purposes, these are dealt with in a variety of places within the webrtc infrastructure. for example, rtcp handles qos monitoring. rtcpeerconnection and rtp each rtcpeerconnection has methods which provide access to the list of rtp transports that service the peer connection. these correspond to the following three
types of transport supported by rtcpeerconnection: rtcrtpsender rtcrtpsenders handle the encoding and transmission of mediastreamtrack data to a remote peer. the senders for a given connection can be obtained by calling rtcpeerconnection.getsenders(). rtcrtpreceiver rtcrtpreceivers provide the ability to inspect and obtain information about incoming mediastreamtrack data. a connection's receiver...
Forwarded - HTTP
e and de-facto standard versions of this header are the x-forwarded-for, x-forwarded-host and x-forwarded-proto headers. this header is used for debugging, statistics, and generating location-dependent content and by design it exposes privacy sensitive information, such as the ip address of the client. therefore the user's privacy must be kept in mind when deploying this header. header
type request header forbidden header name no syntax forwarded: by=<identifier>;for=<identifier>;host=<host>;proto=<http|https> directives <identifier> an identifier disclosing the information that is altered or lost when using a proxy. this can be either: an ip address (v4 or v6, optionally with a port, and ipv6 quoted and enclosed in square brackets), an obfuscated ...
From - HTTP
tains an internet email address for a human user who controls the requesting user agent. if you are running a robotic user agent (e.g. a crawler), the from header should be sent, so you can be contacted if problems occur on servers, such as if the robot is sending excessive, unwanted, or invalid requests. you shouldn't use the from header for access control or authentication. header
type request header forbidden header name no syntax from: <email> directives <email> a machine-usable email address. examples from: webmaster@example.org specifications specification title rfc 7231, section 5.5.1: from hypertext transfer protocol (http/1.1): semantics and content ...
Host - HTTP
server to which the request is being sent. if no port is included, the default port for the service requested (e.g., 443 for an https url, and 80 for an http url) is implied. a host header field must be sent in all http/1.1 request messages. a 400 (bad request) status code may be sent to any http/1.1 request message that lacks a host header field or that contains more than one. header
type request header forbidden header name yes syntax host: <host>:<port> directives <host> the domain name of the server (for virtual hosting). <port> optional tcp port number on which the server is listening. examples host: developer.cdn.mozilla.net specifications specification title rfc 7230, section 5.4: host hypertext transfer protoco...
If-Match - HTTP
sponse is returned. for other methods, and in particular for put, if-match can be used to prevent the lost update problem. it can check if the modification of a resource that the user wants to upload will not override another change that has been done since the original resource was fetched. if the request cannot be fulfilled, the 412 (precondition failed) response is returned. header
type request header forbidden header name no syntax if-match: <etag_value> if-match: <etag_value>, <etag_value>, … directives <etag_value> entity tags uniquely representing the requested resources. they are a string of ascii characters placed between double quotes (like "675af34563dc-tr34"). they may be prefixed by w/ to indicate that they are "weak", i.e. that they repr...
If-Modified-Since - HTTP
body; the last-modified response header of a previous request will contain the date of last modification. unlike if-unmodified-since, if-modified-since can only be used with a get or head. when used in combination with if-none-match, it is ignored, unless the server doesn't support if-none-match. the most common use case is to update a cached entity that has no associated etag. header
type request header forbidden header name no syntax if-modified-since: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive). <day> 2 digit day number, e.g. "04" or "23". <month> one of "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "de...
If-None-Match - HTTP
o common use cases: for get and head methods, to update a cached entity that has an associated etag. for other methods, and in particular for put, if-none-match used with the * value can be used to save a file not known to exist, guaranteeing that another upload didn't happen before, losing the data of the previous put; this problem is a variation of the lost update problem. header
type request header forbidden header name no syntax if-none-match: "<etag_value>" if-none-match: "<etag_value>", "<etag_value>", … if-none-match: * directives <etag_value> entity tags uniquely representing the requested resources. they are a string of ascii characters placed between double quotes (like "675af34563dc-tr34") and may be prefixed by w/ to indicate that the we...
If-Range - HTTP
ntent answer with the appropriate body. if the condition is not fulfilled, the full resource is sent back, with a 200 ok status. this header can be used either with a last-modified validator, or with an etag, but not with both. the most common use case is to resume a download, to guarantee that the stored resource has not been modified since the last fragment has been received. header
type request header forbidden header name no syntax if-range: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt if-range: <etag> directives <etag> an entity tag uniquely representing the requested resource. it is a string of ascii characters placed between double quotes (like "675af34563dc-tr34") and may be prefixed by w/ to indicate that the weak comparison alg...
If-Unmodified-Since - HTTP
tion with non-safe methods, like post, it can be used to implement an optimistic concurrency control, like done by some wikis: editions are rejected if the stored document has been modified since the original has been retrieved. in conjunction with a range request with a if-range header, it can be used to ensure that the new fragment requested comes from an unmodified document. header
type request header forbidden header name no syntax if-unmodified-since: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive). <day> 2 digit day number, e.g. "04" or "23". <month> one of "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "...
Large-Allocation - HTTP
allocated memory. for complex games, for example, these allocations can be quite large, sometimes as large as 1gb. the large-allocation tells the browser that the web content in the to-be-loaded page is going to want to perform a large contiguous memory allocation and the browser can react to this header by starting a dedicated process for the to-be-loaded document, for example. header
type response header forbidden header name no syntax large-allocation: 0 large-allocation: <megabytes> directives 0 0 is a special value which represents uncertainty as to what the size of the allocation is. <megabytes> the expected size of the allocation to be performed, in megabytes. examples large-allocation: 0 large-allocation: 500 troubleshooting errors the la...
Last-Modified - HTTP
last-modified response http header contains the date and time at which the origin server believes the resource was last modified. it is used as a validator to determine if a resource received or stored is the same. less accurate than an etag header, it is a fallback mechanism. conditional requests containing if-modified-since or if-unmodified-since headers make use of this field. header
type response header forbidden header name no cors-safelisted response header yes syntax last-modified: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive). <day> 2 digit day number, e.g. "04" or "23". <month> one of "jan", "feb", "mar", "apr", "may", ...
Location - HTTP
on are different: location indicates the target of a redirection (or the url of a newly created resource), while content-location indicates the direct url to use to access the resource when content negotiation happened, without the need of further content negotiation. location is a header associated with the response, while content-location is associated with the entity returned. header
type response header forbidden header name no syntax location: <url> directives <url> a relative (to the request url) or absolute url. examples location: /index.html specifications specification title rfc 7231, section 7.1.2: location hypertext transfer protocol (http/1.1): semantics and content ...
NEL - HTTP
the http nel response header is used to configure network request logging. ...
Origin - HTTP
from. it doesn't include any path information, but only the server name. it is sent with cors requests, as well as with post requests. it is similar to the referer header, but, unlike this header, it doesn't disclose the whole path. note: the origin header is not set on fetch requests with a method of head or get (this behavior was corrected in firefox 65 — see bug 1508661). header
type request header forbidden header name yes syntax origin: null origin: <scheme> "://" <hostname> [ ":" <port> ] directives <scheme> the protocol that is used. usually it is the http protocol or its secured version, https. <hostname> the domain name of the server (for virtual hosting) or the ip. <port> optional tcp port number on which the server is listening. if no ...
Pragma - HTTP
he cache-control http/1.1 header is not yet present. note: pragma is not specified for http responses and is therefore not a reliable replacement for the general http/1.1 cache-control header, although it does behave the same as cache-control: no-cache, if the cache-control header field is omitted in a request. use pragma only for backwards compatibility with http/1.0 clients. header
type general header, but response behavior is not specified and thus implementation-specific. forbidden header name no cors-safelisted response header yes syntax pragma: no-cache directives no-cache same as cache-control: no-cache. forces caches to submit the request to the origin server for validation before releasing a cached copy. examples pragma: no-...
Proxy-Authenticate - HTTP
the http proxy-authenticate response header defines the authentication method that should be used to gain access to a resource behind a proxy server. it authenticates the request to the proxy server, allowing it to transmit the request further. the proxy-authenticate header is sent along with a 407 proxy authentication required. header
type response header forbidden header name no syntax proxy-authenticate: <
type> realm=<realm> directives <
type> authentication
type. a common
type is "basic". iana maintains a list of authentication schemes. realm=<realm> a description of the protected area, the realm. if no realm is specified, clients often display a formatted host name instead. examples proxy-authenticate: basic proxy-authenticate: basic realm="ac...
handler.apply() - JavaScript
ed to the apply() method. this is bound to the handler. target the target object. thisarg the this argument for the call. argumentslist the list of arguments for the call. return value the apply() method can return any value. description the handler.apply() method is a trap for a function call. interceptions this trap can intercept these operations: proxy(...args) function.proto
type.apply() and function.proto
type.call() reflect.apply() invariants if the following invariants are violated, the proxy will throw a
typeerror. the target must be a callable itself. that is, it must be a function object. examples trapping a function call the following code traps a function call. const p = new proxy(function() {}, { apply: function(target, thisarg, argumentslist) { con...
handler.deleteProperty() - JavaScript
ust return a boolean indicating whether or not the property has been successfully deleted. description the handler.deleteproperty() method is a trap for the delete operator. interceptions this trap can intercept these operations: property deletion: delete proxy[foo] and delete proxy.foo reflect.deleteproperty() invariants if the following invariants are violated, the proxy will throw a
typeerror: a property cannot be deleted, if it exists as a non-configurable own property of the target object. examples trapping the delete operator the following code traps the delete operator. const p = new proxy({}, { deleteproperty: function(target, prop) { if (prop in target){ delete target[prop] console.log('property removed: ' + prop) return true } else {...
ReferenceError - JavaScript
the referenceerror object represents an error when a non-existent variable is referenced. constructor referenceerror() creates a new referenceerror object. instance properties referenceerror.proto
type.message error message. although ecma-262 specifies that referenceerror should provide its own message property, in spidermonkey, it inherits error.proto
type.message. referenceerror.proto
type.name error name. inherited from error. referenceerror.proto
type.filename path to file that raised this error. inherited from error. referenceerror.proto
type.linenumber line number in file that raised this error. inherited from error. referenceerror.proto
type.columnnumber column number in line that raised this error. inherited from error. referenceerror.proto
type.stack stack trace. inheri...
Reflect.deleteProperty() - JavaScript
eractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax reflect.deleteproperty(target, propertykey) parameters target the target object on which to delete the property. propertykey 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 whether or not the property was successfully deleted. it is almost identical to the non-strict delete operator. examples using reflect.deleteproperty() let obj = { x: 1, y: 2 } reflect.deleteproperty(obj, 'x') // true obj ...
Reflect.get() - JavaScript
. syntax reflect.get(target, propertykey[, receiver]) parameters target the target object on which to get the property. propertykey the name of the property to get. 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. it is like the property accessor syntax as a function. examples using reflect.get() // object let obj = { x: 1, y: 2 } reflect.get(obj, 'x') // 1 // array reflect.get(['zero', 'one'], 1) // "one" // proxy with a get handler let x = {p: 1}; let obj = new proxy(x, { get(t, k, ...
Reflect.ownKeys() - JavaScript
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.ownkeys(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.ownkeys 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)). examples using reflect.ownkeys() reflect.ownkeys({z: 3, y: 2, x: 1}) // [ "z", "y", "x" ] reflect.ownkeys([]) // ["length"] let ...
Reflect.set() - JavaScript
reflect.set(target, propertykey, value[, receiver]) parameters target the target object on which to set the property. propertykey 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 set a property on an object. it does property assignment 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...
Set() constructor - 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 new set([iterable]) parameters iterable optional if an iterable object is passed, all of its elements will be added to the new set. if you don't specify this parameter, or its value is null, the new set is empty. return value a new set object. ...
SharedArrayBuffer() constructor - JavaScript
length the size, in bytes, of the array buffer to create. return value a new sharedarraybuffer object of the specified size. its contents are initialized to 0. examples always use the new operator to create a sharedarraybuffer sharedarraybuffer constructors are required to be constructed with a new operator. calling a sharedarraybuffer constructor as a function without new will throw a
typeerror. var sab = sharedarraybuffer(1024); //
typeerror: calling a builtin sharedarraybuffer constructor // without new is forbidden var sab = new sharedarraybuffer(1024); specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer constructor' in that specification. ...
String() constructor - JavaScript
the string constructor is used to create a new string object. it performs
type conversion when called as a function, rather than as a constructor, which is usually more useful. syntax new string(thing) string(thing) parameters thing anything to be converted to a string. examples string constructor and string function string function and string constructor produce different results:
typeof string('hello world'); // string
typeof new string('hello world'); // object here, the function produces a string (the primitive
type) as promised. however, the constructor produces an instance of the
type string (an object wrapper) and that's why you rarely want to use the string constructor at all. specifications specification ecmascript (ecma-262)the definition of 'st...
String length - JavaScript
if you want to get the number of characters you need something like this: function getcharacterlength (str) { // the string iterator that is used here iterates over characters, // not mere code units return [...str].length; } console.log(getcharacterlength('a\ud87e\udc04z')); // 3 // while not recommended, you could add this to each string as follows: object.defineproperty(string.proto
type, 'charlength', { get () { return getcharacterlength(this); } }); console.log('a\ud87e\udc04z'.charlength); // 3 examples basic usage let x = 'mozilla'; let empty = ''; console.log(x + ' is ' + x.length + ' code units long'); /* "mozilla is 7 code units long" */ console.log('the empty string has a length of ' + empty.length); // expected output: "the empty string has a length of 0" ...
String.raw() - JavaScript
g. \n) are not. syntax string.raw(callsite, ...substitutions) string.raw`templatestring` parameters callsite well-formed template call site object, like { raw: ['foo', 'bar', 'baz'] }. ...substitutions contains substitution values. templatestring a template string, optionally with substitutions (${...}). return value the raw string form of a given template string. exceptions
typeerror a
typeerror is thrown if the first argument is not a well-formed object. description in most cases, string.raw() is used with template strings. the first syntax mentioned above is only rarely used, because the javascript engine will call this with proper arguments for you, (just like with other tag functions). string.raw() is the only built-in tag function of template strings. it works ...
Symbol.toPrimitive - JavaScript
red 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 with the help of the symbol.toprimitive property (used as a function value), an object can be converted to a primitive value. the function is called with a string argument hint, which specifies the preferred
type of the result primitive value. the hint argument can be one of "number", "string", and "default". property attributes of symbol.toprimitive writable no enumerable no configurable no examples modifying primitive values converted from an object following example describes how symbol.toprimitive prope...
URIError - JavaScript
the urierror object represents an error when a global uri handling function was used in a wrong way. constructor urierror() creates a new urierror object. instance properties urierror.proto
type.message error message. although ecma-262 specifies that urierror should provide its own message property, in spidermonkey, it inherits error.proto
type.message. urierror.proto
type.name error name. inherited from error. urierror.proto
type.filename path to file that raised this error. inherited from error. urierror.proto
type.linenumber line number in file that raised this error. inherited from error. urierror.proto
type.columnnumber column number in line that raised this error. inherited from error. urierror.proto
type.stack stack trace. inherited from error. examples catching an uri...
WeakRef - JavaScript
it, the javascript engine's garbage collector may destroy the object and reclaim its memory. if that happens, you can't get the object from a weak reference anymore. note: please see the avoid where possible section below. correct use of weakref takes careful thought, and it's best avoided if possible. constructor weakref() creates a new weakref object. instance methods weakref.proto
type.deref() returns the weakref object's target object, or undefined if the target object has been reclaimed. avoid where possible correct use of weakref takes careful thought, and it's best avoided if possible. it's also important to avoid relying on any specific behaviors not guaranteed by the specification. when, how, and whether garbage collection occurs is down to the implementation of any g...