Search completed in 1.05 seconds.
SubtleCrypto.wrapKey() - Web APIs
the
wrapkey() method of the subtlecrypto interface "
wraps" a key. this means that it exports the key in an external, portable format, then encrypts the exported key.
wrapping a key helps protect it in untrusted environments, such as inside an otherwise unprotected data store or in transmission over an unprotected network. as with subtlecrypto.exportkey(), you specify an export format for the key. to export a key, it must have cryptokey.extractable set to true. but because
wrapkey() also encrypts the key to be imported, you also need to pass in the key that must be used to encrypt it. this is sometimes called the "
wrapping key". the inverse of
wrapkey() is subtlecrypto.un
wrapkey(): while
wrapkey is composed of export + encrypt, un
wrapkey is composed of import + decrypt. syntax const res...
...must have cryptokey.extractable set to true. but because
wrapkey() also encrypts the key to be imported, you also need to pass in the key that must be used to encrypt it. this is sometimes called the "
wrapping key". the inverse of
wrapkey() is subtlecrypto.un
wrapkey(): while
wrapkey is composed of export + encrypt, un
wrapkey is composed of import + decrypt. syntax const result = crypto.subtle.
wrapkey( format, key,
wrappingkey,
wrapalgo ); parameters format is a string describing the data format in which the key will be exported before it is encrypted. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublickeyinfo format. jwk: json web key format. ...
... to use aes-ctr, pass an aesctrparams object. ...
...And 46 more matches
SubtleCrypto.unwrapKey() - Web APIs
the un
wrapkey() method of the subtlecrypto interface "un
wraps" a key. this means that it takes as its input a key that has been exported and then encrypted (also called "
wrapped"). it decrypts the key and then imports it, returning a cryptokey object that can be used in the web crypto api. as with subtlecrypto.importkey(), you specify the key's import format and other attributes of the key to import details such as whether it is extractable, and which operations it can be used for. but because un
wrapkey() also decrypts the key to be imported, you also need to pass in the key that must be used to decrypt it. this is sometimes called the "un
wrapping key". ...
...pto api. as with subtlecrypto.importkey(), you specify the key's import format and other attributes of the key to import details such as whether it is extractable, and which operations it can be used for. but because un
wrapkey() also decrypts the key to be imported, you also need to pass in the key that must be used to decrypt it. this is sometimes called the "un
wrapping key". the inverse of un
wrapkey() is subtlecrypto.
wrapkey(): while un
wrapkey is composed of decrypt + import,
wrapkey is composed of encrypt + export. syntax const result = crypto.subtle.un
wrapkey( format,
wrappedkey, un
wrappingkey, un
wrapalgo, un
wrappedkeyalgo, extractable, keyusages ); parameters format is a string describing the data format of the key to un
wrap. it can be one of the foll...
... const result = crypto.subtle.un
wrapkey( format,
wrappedkey, un
wrappingkey, un
wrapalgo, un
wrappedkeyalgo, extractable, keyusages ); parameters format is a string describing the data format of the key to un
wrap. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublickeyinfo format. jwk: json web key format.
wrappedkey is an arraybuffer containing the
wrapped key in the given format. un
wrappingkey is the cryptokey to use to decrypt the
wrapped key. the key must have the un
wrapkey usage set. un
wrapalgo is an object specifying the algorithm to be used to encrypt the exported key, and any extra parameters as required: to use rsa-oaep, pass an rsaoaepparams object. to use aes-ctr, pass an aesctrpar...
...And 39 more matches
flex-wrap - CSS: Cascading Style Sheets
the flex-
wrap css property sets whether flex items are forced onto one line or can
wrap onto multiple lines. if
wrapping is allowed, it sets the direction that lines are stacked. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. see using css flexible boxes for more properties and information. syntax flex-
wrap: no
wrap; /* default value */ flex-
wrap:
wrap; flex-
wrap:
wrap-reverse; /* global values */ flex-
wrap: inherit; flex-
wrap: initial; flex-
wrap: unset; the flex-
wrap property is specified as a single keyword chosen from the list of values below. ...
...us a pull request. see using css flexible boxes for more properties and information. syntax flex-
wrap: no
wrap; /* default value */ flex-
wrap:
wrap; flex-
wrap:
wrap-reverse; /* global values */ flex-
wrap: inherit; flex-
wrap: initial; flex-
wrap: unset; the flex-
wrap property is specified as a single keyword chosen from the list of values below. values the following values are accepted: no
wrap the flex items are laid out in a single line which may cause the flex container to overflow. the cross-start is either equivalent to start or before depending on the flex-direction value. this is the default value.
wrap the flex items break into multiple lines. the cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specif...
...re laid out in a single line which may cause the flex container to overflow. the cross-start is either equivalent to start or before depending on the flex-direction value. this is the default value.
wrap the flex items break into multiple lines. the cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.
wrap-reverse behaves the same as
wrap but cross-start and cross-end are permuted. ...
...And 15 more matches
wrappedJSObject
wrappedjsobject is a property sometimes available on xpconnect
wrappers. when available, it lets you access the javascript object hidden by the
wrapper. there are two kinds of xpconnect
wrappers that support the
wrappedjsobject property: xpcnative
wrappers which are used to protect the chrome code working with content objects. see xpcnative
wrapper for detailed documentation. regular xpconnect
wrappers which you can encounter, for example, when using xpcom components implemented in js. this article focuses on the latter kind of
wrappers, which hide any properties or methods on the component that are not part of the supported interfaces as declared in xpidl. the rest of this article demonstrates what xpconnect
wrappers do and how
wrappedjsobject can be used to bypass them. exampl...
...see how to build an xpcom component in javascript for details on creating one. for simplicity we omit the component registration code. ...
...f.com/my-component;1 contract. ...
...And 8 more matches
overflow-wrap - CSS: Cascading Style Sheets
the overflow-
wrap css property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: in contrast to word-break, overflow-
wrap will only create a break if an entire word cannot be placed on its own line without overflowing. the property was originally a nonstandard and unprefixed microsoft extension called word-
wrap, and was implemented by most browsers with the same name. it has since been renamed to overflow-
wrap, with word-
wrap being an alias. s...
... values normal lines may only break at normal word break points (such as a space between two words). ...
... values normal lines may only break at normal word break points (such as a space between two words). ...
...And 7 more matches
Cross Process Object Wrappers
note that from firefox 47 onwards, unsafe cpow usage is no longer permitted in browser code. if browser code tries an unsafe cpow operation, the browser will throw an exception and you'll see an "unsafe cpow usage forbidden” error in the browser console. add-on code is still allowed to use cpows "unsafely". however, if an add-on passes a cpow into a platform api, and that platform api then attempts an unsafe operation on it, this will throw an exception. so as a general rule, add-ons should avoid passing cpows into non-addon code. ...
...chronous. this is because the chrome process runs the firefox ui, so if it were blocked by the content process, then a slow content process could cause firefox to become unresponsive to users. converting synchronous code to be asynchronous can be difficult and time-consuming. as a migration aid, the messaging framework enables frame scripts to make content objects available to chrome through a
wrapper called a cross process object
wrapper, also known as a cpow. however, although cpows are convenient, they have serious limitations and can cause responsiveness problems, so should only be used when necessary and only as a migration aid. passing cpows from frame scripts frame scripts can send messages to chrome using one of two global functions: sendasyncmessage() or sendsyncmessage(). the op...
...nvenient, they have serious limitations and can cause responsiveness problems, so should only be used when necessary and only as a migration aid. passing cpows from frame scripts frame scripts can send messages to chrome using one of two global functions: sendasyncmessage() or sendsyncmessage(). the optional third parameter to each of these functions is an object whose properties are objects to
wrap. ...
...And 6 more matches
Widget Wrappers
attribute description id the widget's id type the type of widget (button, view, custom). ...
... attribute description id the widget's id type the type of widget (button, view, custom). ...
... attribute description id the widget's id type the type of widget (button, view, custom). ...
...And 5 more matches
XPConnect wrappers
this document is a high-level overview of xpconnect
wrapper objects (for the more technical description see xpconnect security membranes). for practical advice on dealing with
wrappers, see safely accessing content dom from chrome. developers in the know understand that
wrappers play a large role in xpconnect, and that we have a lot of them. less informed developers understand that
wrappers exist and are somehow important, but they don't know when they should use what
wrappers, or if they should be seeing a
wrapper. note:
wrappers can appear in the console log; for example "[object xray
wrapper [object blah]]". because these are
wrapped, you won't be able to peek down inside them from the console. ...
...f them. less informed developers understand that
wrappers exist and are somehow important, but they don't know when they should use what
wrappers, or if they should be seeing a
wrapper. note:
wrappers can appear in the console log; for example "[object xray
wrapper [object blah]]". because these are
wrapped, you won't be able to peek down inside them from the console. basic xpconnect objects xpc
wrappednative these objects are created when any natively implemented xpcom object (that is, any object implemented in c++) needs to be reflected into javascript. this includes all dom objects (including window) and chrome elements that are reflected into javascript. this
wrapper is responsible for mapping calls from javascript into c++. this means that when you say window.focus(), you're calling in...
...ive these objects are created when any natively implemented xpcom object (that is, any object implemented in c++) needs to be reflected into javascript. this includes all dom objects (including window) and chrome elements that are reflected into javascript. this
wrapper is responsible for mapping calls from javascript into c++. this means that when you say window.focus(), you're calling into xpc
wrappednative code. if you call 'tostring()' and get "[xpconnect
wrapped nsifoo]" then the reference is to a xpc
wrappednative object with interface nsifoo. they are implicitly created by xpconnect and you should not have to worry about how that happens. there are several types of
wrapped natives, but i won't cover those here. xpc
wrappedjs these objects are the exact opposite of xpc
wrappednative. t...
...And 5 more matches
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
flexbox was designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once. there is however the ability to
wrap flex items onto new lines, creating new rows if flex-direction is row and new columns if flex-direction is column. in this guide i will explain how this works, what it is designed for and what situations really require css grid layout rather than flexbox. making things
wrap the initial value of the flex-
wrap property is no
wrap. ...
...nd new columns if flex-direction is column. in this guide i will explain how this works, what it is designed for and what situations really require css grid layout rather than flexbox. making things
wrap the initial value of the flex-
wrap property is no
wrap. this means that if you have a set of flex items that are too wide for their container, they will overflow it. if you want to cause them to
wrap once they become too wide you must add the flex-
wrap property with a value of
wrap, or use the shorthand flex-flow with values of row
wrap or column
wrap. items will then
wrap in the container. in the next example i have ten items all with a flex-basis of 160px and the ability to grow and shrink. once the first row gets to a point where there is not enough space to place another 160 pixel item, ...
...m, a new flex line is created for the items and so on until all of the items are placed. as the items can grow, they will expand larger than 160 px in order to fill each row completely. if there is only one item on the final line it will stretch to fill the entire line. we can see the same thing happening with columns. the container will need to have a height in order that the items will start
wrapping and creating new columns, and items will stretch taller to fill each column completely.
wrapping and flex-direction
wrapping works as you might expect when combined with flex-direction. if flex-direction is set to row-reverse then the items will start from the end edge of the container and lay themselves out in reverse ordered lines. note that the reversing is only happening in the inl...
...And 5 more matches
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 un
wrapped. ...
...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 un
wrapped. obj jsobject * the object to un
wrap. 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. ...
... name type description cx jscontext * the context in which the object is being un
wrapped. obj jsobject * the object to un
wrap. 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 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 ex...
...And 4 more matches
-ms-wrap-flow - Archive of obsolete content
the -ms-
wrap-flow css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements. initial valueautoapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values auto for floated elements, an exclusion is created; for all other elements, an exclusion is not created. both inline flow content can flow on all sides of the exclusion. start inline flow content can
wrap on the start edge of the exclusion area but must leave empty the area after the end edge of the exclusion area. end inline flow content can
wrap after the end edge of the exclusion area but must leave empty the area before the start edge of the exclusion area. ...
... flow content can flow on all sides of the exclusion. start inline flow content can
wrap on the start edge of the exclusion area but must leave empty the area after the end edge of the exclusion area. end inline flow content can
wrap after the end edge of the exclusion area but must leave empty the area before the start edge of the exclusion area. maximum inline flow content can
wrap on the side of the exclusion with the largest available space for the given line, and must leave empty the other side of the exclusion. clear inline flow content can only
wrap on top and bottom of the exclusion and must leave empty the areas to the start and end edges of the exclusion box. formal syntax auto | both | start | end | maximum | clear specifications not part of any speci...
...n with the largest available space for the given line, and must leave empty the other side of the exclusion. clear inline flow content can only
wrap on top and bottom of the exclusion and must leave empty the areas to the start and end edges of the exclusion box. formal syntax auto | both | start | end | maximum | clear specifications not part of any specification. remarks the -ms-
wrap-flow property makes an element an exclusion element when it has a computed value other than auto. ...
...And 2 more matches
Drag and Drop JavaScript Wrapper - Archive of obsolete content
it works by providing an object which implements the event handlers. all you have to do is write some simpler functions which work with the data being dragged. this drag and drop interface is stored in the global package, in the file chrome://global/content/nsdraganddrop.js. ...
... function should be defined when you want something to happen when an object is dropped. the first argument is the event object and the second is the data being dragged. the third argument is the drag session. getsupportedflavours() this function should return a list of flavors that the object being dragged over can accept. this function takes 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. ofte...
...at happens when an object is dragged over. you might use it to change the appearance of the element as it is being dragged over. in many cases the function can do nothing. it must be defined for elements that accept dragged data however. next, the ondrop function should be created. its second argument is the transfer data object that holds the data being dragged. by the time ondrop is called, the
wrapper has called getsupportedflavours to determine the best flavour for the drop, so the transfer object only contains the data for the best matching flavour. the transfer object has two properties, data which holds the data and flavour which holds the flavour of the data. once you have the data, you can add it to the element is some way. for example, you might set the value of a textbox. var textob...
...escribes some of the flavours you might use. ...
FC_WrapKey
name fc_
wrapkey -
wrap a key syntax ck_rv fc_
wrapkey( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_object_handle h
wrappingkey, ck_object_handle hkey, ck_byte_ptr p
wrappedkey, ck_ulong_ptr pus
wrappedkeylen ); parameters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. h
wrappingkey [in] pointer to the public key template. hkey [in] number of attributes in the public key template. p
wrappedkey [out] pointer to the location to receive the
wrapped key or null. pus
wrappedkeylen [in, out] pointer to length of
wrapped key buffer. description fc_
wrapkey
wraps (encrypts) a key. ...
...meters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. h
wrappingkey [in] pointer to the public key template. hkey [in] number of attributes in the public key template. p
wrappedkey [out] pointer to the location to receive the
wrapped key or null. pus
wrappedkeylen [in, out] pointer to length of
wrapped key buffer. description fc_
wrapkey
wraps (encrypts) a key. if p
wrappedkey is null the length of the
wrapped key is returned in pus
wrappedkeylen and fc_
wrapkey may be called again with p
wrappedkey set to retrieve the
wrapped key. ...
...receive the
wrapped key or null. pus
wrappedkeylen [in, out] pointer to length of
wrapped key buffer. description fc_
wrapkey
wraps (encrypts) a key. if p
wrappedkey is null the length of the
wrapped key is returned in pus
wrappedkeylen and fc_
wrapkey may be called again with p
wrappedkey set to retrieve the
wrapped key. a user must log into the token (to assume the nss user role) before calling fc_
wrapkey. ...
...n, out] pointer to length of
wrapped key buffer. description fc_
wrapkey
wraps (encrypts) a key. if p
wrappedkey is null the length of the
wrapped key is returned in pus
wrappedkeylen and fc_
wrapkey may be called again with p
wrappedkey set to retrieve the
wrapped key. a user must log into the token (to assume the nss user role) before calling fc_
wrapkey. ...
mozIStorageStatementWrapper
the mozistoragestatement
wrapper interface is a storage statement
wrapper. when you call the mozistorageconnection interface's createstatement() method, you get a mozistoragestatement which has just direct bindings to sqlite. you can then
wrap that statement with a
wrapper, which implements nsixpcscriptable and provides scriptable helpers letting you execute the statement as a function, access bind variables by name as properties, etc. firefox 3.5 note firefox 3.5 adds support for these features directly into the mozistoragestatement interface, so this interface is essentially deprecated. storage/public/mozistoragestatement
wrapper.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits fro...
... this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void initialize(in mozistoragestatement astatement); void reset(); boolean step(); void execute(); attributes attribute type description statement mozistoragestatement the statement that is
wrapped. row mozistoragestatementrow the current row. throws an exception if no row is currently available. useful only from script. the value of this is only valid while the statement is still executing, and is still on the appropriate row. params mozistoragestatementparams the parameters; these can be set in lieu of using the call notation on this. methods initial...
...tementrow the current row. throws an exception if no row is currently available. useful only from script. the value of this is only valid while the statement is still executing, and is still on the appropriate row. params mozistoragestatementparams the parameters; these can be set in lieu of using the call notation on this. ...
...nd is still on the appropriate row. params mozistoragestatementparams the parameters; these can be set in lieu of using the call notation on this. methods initialize() this method initializes this
wrapper with astatement. void initialize( in mozistoragestatement astatement ); parameters astatement the statement to be initialized. reset() this method resets the
wrapped statement. void reset(); parameters none. step() this method steps the
wrapped statement. boolean step(); parameters none. return value returns true if the stepping the
wrapped statement was successful, otherwise returns false. execute() this method executes the
wrapped statement. void execute(); parameters none. see also storage mozistoragestatement mozistoragestatementrow mozistor...
-ms-wrap-margin - Archive of obsolete content
this property can be set to any supported length value. ...
...this property can be set to any supported length value. ...
...s property is a microsoft extension that specifies a margin that offsets the inner
wrap shape from other shapes. initial value0applies toexclusion elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values <length> the margin size, a non-negative value. formal syntax <length> specifications not part of any specification. remarks offsets created by the -ms-
wrap-margin property are offset from the outside of the exclusion. this property can be set to any supported length value. ...
FC_UnwrapKey
name fc_un
wrapkey - un
wrap a key syntax ck_rv fc_un
wrapkey( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_object_handle hun
wrappingkey, ck_byte_ptr p
wrappedkey, ck_ulong us
wrappedkeylen, ck_attribute_ptr ptemplate, ck_ulong usattributecount, ck_object_handle_ptr phkey ); parameters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. hun
wrappingkey [in] handle of the ket to use for un
wrapping. p
wrappedkey [in] pointer to the
wrapped key. us
wrappedkeylen [in] length of the
wrapped key. ptemplate [in] pointer to the list of attributes for the un
wrapped key. usattributecount [in] number of attributes in the template. phkey [out] pointer to the location to receive the handle of the un
wrapped key. ...
...anism to use. hun
wrappingkey [in] handle of the ket to use for un
wrapping. p
wrappedkey [in] pointer to the
wrapped key. us
wrappedkeylen [in] length of the
wrapped key. ptemplate [in] pointer to the list of attributes for the un
wrapped key. usattributecount [in] number of attributes in the template. phkey [out] pointer to the location to receive the handle of the un
wrapped key. description fc_un
wrapkey un
wraps (decrypts) a key and creates a new key opbject. if p
wrappedkey is null the length of the
wrapped key is returned in pus
wrappedkeylen and fc_un
wrapkey may be called again with p
wrappedkey set to retrieve the
wrapped key. a user must log into the token (to assume the nss user role) before calling fc_un
wrapkey. ...
...ped key. description fc_un
wrapkey un
wraps (decrypts) a key and creates a new key opbject. if p
wrappedkey is null the length of the
wrapped key is returned in pus
wrappedkeylen and fc_un
wrapkey may be called again with p
wrappedkey set to retrieve the
wrapped key. a user must log into the token (to assume the nss user role) before calling fc_un
wrapkey. ...
Components.utils.isXrayWrapper
objects that could cause them to behave in unexpected ways. for example, privileged code using an xray to a dom object sees only the original, native version of the dom object. any expando properties are not visible, and if any native properties have been redefined, this has no effect. ...
...f the dom object. any expando properties are not visible, and if any native properties have been redefined, this has no effect. use this function to determine whether a given object is an xray or not. syntax boolean components.utils.isxray
wrapper(obj); parameters obj the object to check. returns true if the object is an xray: false otherwise. ...
... to determine whether a given object is an xray or not. syntax boolean components.utils.isxray
wrapper(obj); parameters obj the object to check. returns true if the object is an xray: false otherwise. ...
-ms-wrap-through - Archive of obsolete content
the -ms-
wrap-through css property is a microsoft extension that specifies how content should
wrap around an exclusion element. initial value
wrapapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values
wrap the exclusion element inherits its parent node's
wrapping context. its descendant inline content
wraps around exclusions defined outside the element. none the exclusion element does not inherit its parent node's
wrapping context. its descendants are only subject to exclusion shapes defined inside the element. formal syntax
wrap | none specifications not part of any specification. ...
...its its parent node's
wrapping context. its descendant inline content
wraps around exclusions defined outside the element. none the exclusion element does not inherit its parent node's
wrapping context. its descendants are only subject to exclusion shapes defined inside the element. formal syntax
wrap | none specifications not part of any specification. remarks you can use the -ms-
wrap-through property to control the effect of exclusions; for instance, to cause one content block to
wrap around an exclusion element and another to intersect the same exclusion element. the
wrapping context of a box is a collection of exclusion areas contributed by its associated exclusion boxes. the inline flow content of a box is placed in the area that corresponds to the subtraction of its wra...
Wrapper - MDN Web Docs Glossary: Definitions of Web-related terms
in programming languages such as javascript, a
wrapper is a function that is intended to call one or more other functions, sometimes purely for convenience, and sometimes adapting them to do a slightly different task in the process. for example, sdk libraries for aws are examples of
wrappers. ...
... in programming languages such as javascript, a
wrapper is a function that is intended to call one or more other functions, sometimes purely for convenience, and sometimes adapting them to do a slightly different task in the process. for example, sdk libraries for aws are examples of
wrappers. ...
Grid wrapper - CSS: Cascading Style Sheets
the grid
wrapper pattern is useful for aligning grid content within a central
wrapper, while also allowing items to break out and align to the edge of the containing element or page when desired. requirements items placed on the grid should be able to align to a horizontally-centered max-width
wrapper and/or the outer edges of the grid. recipe download this example choices made this recipe uses the css grid minmax() function to define the grid track sizes in the grid-template-columns property. for the central columns with a maximum width we can set a minimum value of 0 or greater and a maximum value that specifies the maximum size the column tracks will grow to. ...
...ple choices made this recipe uses the css grid minmax() function to define the grid track sizes in the grid-template-columns property. for the central columns with a maximum width we can set a minimum value of 0 or greater and a maximum value that specifies the maximum size the column tracks will grow to. using a numeric unit (pixels, ems, rems) will create a fixed maximum size for the central
wrapper, whereas using percentage values or viewport units will mean this
wrapper grows or shrinks in response to its context. the outer two columns have a maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. useful fallbacks or alternative methods when using this recipe at page level it can be useful to set a max-width along with left...
wrap - Archive of obsolete content
« xul reference home
wrap type: string set this attribute to the value off to disable word
wrapping in the textbox. if this attribute is not specified, word
wrapping is enabled. ...
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
<prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits 1024 /* header file constants */ #define enckey_header "-----begin
wrapped enckey-----" #define enckey_trailer "-----end
wrapped enckey-----" #define mackey_header "-----begin
wrapped mackey-----" #define mackey_trailer "-----end
wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end...
nsIAuthPromptWrapper
last changed in gecko 1.7 inherits from: nsiauthprompt method overview void setpromptdialogs(in nsiprompt dialogs); methods setpromptdialogs() this method sets a prompt dialog using the given dialog implementation which will be used to display the prompts. void setpromptdialogs( in nsiprompt dialogs ); parameters dialogs the dialog implementation which will be used to display the prompts. ...
nss tech note5
iv is relevant only when using cbc mode of encryption. if not using cbc mode, just pass a null iv parm to pk11_paramfromiv function se...
...can use ckm_generic_secret_key_gen as the key gen mechanism. <big>prepare the parameter for crypto context. the param must be provided, but can be empty. secitem param; param.da...
...can use ckm_generic_secret_key_gen as the key gen mechanism. <big>prepare the parameter for crypto context. the param must be provided, but can be empty. secitem param; param.typ...
...And 73 more matches
nsIXPConnect
in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to access the xpconnect service, use code like this: nsresult rv; nscomptr<nsixpconnect> xpconnect = do_getservice(nsixpconnect::getcid(), &rv); if (ns_succeeded(rv)) { /* use the object */ } method overview void addjsholder(in voidptr aholder, in nsscriptobjecttracerptr atracer); native code only! void clearall
wrappednativesecuritypolicies(); nsixpconnectjsobjectholder createsandbox(in jscontextptr cx, in nsiprincipal principal); native code only! nsistackframe createstackframelocation(in pruint32 alanguage, in string afilename, in string afunctionname, in print32 alinenumber, in nsistackframe acaller); void debugdump(in short depth); void debugdumpevalinjsstackframe(in ...
...in jscontextptr cx, in jsobjectptr proto, in pruint32 flags, in pruint32 interfacecount, [array, size_is(interfacecount)] in nsiidptr interfacearray); jsval evalinsandboxobject(in astring source, in jscontextptr cx, in nsixpconnectjsobjectholder sandbox, in prbool returnstringonly); native code only! void flagsystemfilenameprefix(in string afilenameprefix, in prbool awantnative
wrappers); void garbagecollect(); [noscript,notxpcom] void getcaller(out jscontextptr ajscontext, out jsobjectptr aobject); jsval getcowforobject(in jscontextptr ajscontext, in jsobjectptr aparent, in jsobjectptr a
wrappedobj); native code only! obsolete since gecko 2.0 void getdefaultsecuritymanager(out nsixpcsecuritymanager amanager, out pruint16 flags); ...
...t, out jsobjectptr aobject); jsval getcowforobject(in jscontextptr ajscontext, in jsobjectptr aparent, in jsobjectptr a
wrappedobj); native code only! ...
...And 56 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
d grid, the css grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
... grid and do not place some or all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
... items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .
wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="
wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. the default flow is to arrange i...
...And 34 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
uch as flexbox, can help you create layouts that were previously impossible to build in css. it all starts by creating a grid in your grid container. the grid container we create a grid container by declaring display: grid or display: inline-grid on an element. as soon as we do this, all direct children of that element become grid items. ...
...iously impossible to build in css. it all starts by creating a grid in your grid container. the grid container we create a grid container by declaring display: grid or display: inline-grid on an element. as soon as we do this, all direct children of that element become grid items. in this example, i have a containing div with a class of
wrapper and, inside are five child elements. ...
...te a grid container by declaring display: grid or display: inline-grid on an element. as soon as we do this, all direct children of that element become grid items. in this example, i have a containing div with a class of
wrapper and, inside are five child elements. <div class="
wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> i make the .
wrapper a grid container. .
wrapper { display: grid; } * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items. in a web browser, you won’t see any d...
...And 34 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
grips with grid. one-dimensional vs. two-dimensional layout a simple example can demonstrate the difference between one- and two-dimensional layouts. in this first example, i am using flexbox to lay out a set of boxes. i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. ...
... one-dimensional vs. two-dimensional layout a simple example can demonstrate the difference between one- and two-dimensional layouts. in this first example, i am using flexbox to lay out a set of boxes. i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. ...
...one- and two-dimensional layouts. in this first example, i am using flexbox to lay out a set of boxes. i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-
wrap property to
wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will
wrap onto a new row. ...
...And 34 more matches
nsIXPCScriptable
they want to return pr_false. js/src/xpconnect/idl/nsixpcscriptable.idlnot scriptable please add a summary to this article. ...
...return pr_false. js/src/xpconnect/idl/nsixpcscriptable.idlnot scriptable please add a summary to this article. ...
...add a summary to this article. ...
...And 27 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
these properties, we are changing the alignment of the item within the grid area you have placed it. in the following example, i have four grid areas within my grid. ...
.... in the following example, i have four grid areas within my grid. ...
...sing one of the following values: auto normal start end center stretch baseline first baseline last baseline * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .
wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; } .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div class="
wrapper"> <div class="item1">item...
...And 26 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
tracks and 3 row tracks. this gives us 4 lines in each dimension. inside our grid container i have four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .
wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="
wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid. i would like the ...
...And 26 more matches
Enc Dec MAC Output Public Key as CSR
/* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define default_key_bits 1024 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin
wrapped enckey-----" #define enckey_trailer "-----end
wrapped enckey-----" #define mackey_header "-----begin
wrapped mackey-----" #define mackey_trailer "-----end
wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac---...
... (-0x2000) #define port_errortostring(err) pr_errortostring((err), pr_language_i_default) #endif #endif /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -s -r -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'g' for generating rsa keypair for
wrapping\n\n", "g"); fprintf(stderr, "%-20s specify 'e' for encrypt operation\n\n", "e"); fprintf(stderr, "%-20s specify 'd' for decrypt operation\n\n", "d"); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s s...
...eader\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* map option letter enumerated commad type */ static commandtype option2command(const char* c) { switch (*c) { case 'g': return gen_csr; case 'e': return encrypt; case 'd': return decrypt; default: return unknown; } } /* *
wrap the symkey using public key */ secstatus
wrapkey(pk11symkey* key, seckeypublickey *pubkey, secitem **
wrappedkey) { secstatus rv; secitem *data = (secitem *)port_zalloc(sizeof(secitem)); if (!data) { pr_fprintf(pr_stderr, "error while allocating memory\n"); rv = secfailure; goto cleanup; } data->len = seckey_publickeystrength(pubkey); data->data =...
...And 25 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. ...
... 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. 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 un
wraps it to its original javascript object type. the jsobject class provides an interface for invoking javascript methods and examining javascript ...
...d 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. all javascript access to java takes place with these objects, which are summarized in the following table. table 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 ...
...And 24 more matches
NSS Sample Code Sample1
nss sample code 1: key generation and transport between servers. this is an example program that demonstrates how to do key generation and transport between cooperating servers. ...
...key pair generation naming rsa key pairs looking up a previously generated key pair by name creating aes and mac keys (or encryption and mac keys in general)
wrapping symmetric keys using your own rsa key pair so that they can be stored on disk or in a database. as an alternative to token symmetric keys as a way to store large numbers of symmetric keys
wrapping symmetric keys using an rsa key from another server un
wrapping keys using your own rsa key pair the main part of the program shows a typical sequence of events for two servers that are trying to extablish a shared key pair. we will add message protection (encryption and macing) examples to this program in the future. sample code #include <iostream.h> #include "pk11pub.h" #include "key...
...cryption mechanism (des or aes) or for // integrity (md5_hmac or sha1_hmac). this key needs to be // permanent, since it may be used during several runs of the // server. (currently nss doesn't store persistant keys. steps // 1a through 1x show how to do this). // 1a. the primary host generates an rsa keypair that will be used // store keys locally. // 1b. the primary host
wraps the newly generated key using the // rsa key and stores the
wrapped key data in a local file. // 1c. the primary host un
wraps the key using the rsa key each time // access to the key is required, such as at server startup. // 2. the secondary host generates an rsa keypair that will be used // to transport keys between the primary host and itself. this // key needs to exist lo...
...And 24 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
ocument, matching the different writing modes found around the world. again, for full details of these see jen’s article. as a simple example, i have two paragraphs below. the first uses the default horizontal-tb, and the second uses vertical-rl. in the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom. ...
...efault horizontal-tb, and the second uses vertical-rl. in the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom. ...
...re. the grid in my next example has three columns and two row tracks. this means there are three tracks running down the block axis. in default writing mode, grid auto-places items starting at the top left, moving along to the right, filling up the three cells on the inline axis. ...
...And 21 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
ome clearer and easier to work with. naming lines when defining a grid you can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties. to demonstrate i’ll use the simple layout created in the guide on line-based placement. this time i’ll create the grid using named lines. * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets. those names can be anything you like. i have defined a name for the start and end of the container, both for ro...
...ame my lines inside square brackets. those names can be anything you like. i have defined a name for the start and end of the container, both for rows and columns. then defined the centre block of the grid as content-start and content-end again, both for columns and rows although you do not need to name all of the lines on your grid. you might choose to name just some key lines for your layout. .
wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; } once the lines have names, we can use the name to place the item rather than the line number. .box1 { grid-column-start: main-start; grid-row-start: main-start; grid-row-end: main...
...naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content positio...
...And 21 more matches
WebIDL bindings
om namespace and whose headers are all exported into mozilla/dom (placed in $objdir/dist/include by the build process). adding webidl bindings to a class to add a webidl binding for interface myinterface to a class mozilla::dom::myinterface that's supposed to implement that interface, you need to do the following: if your interface doesn't inherit from any other interfaces, inherit from ns
wrappercache and hook 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 ns
wrappercache in your list of parent classes. if your interface does inherit from another interface, just inher...
...appercache 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. ...
...es. 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. ...
...And 17 more matches
Floats - Learn web development
n to html), and an idea of how css works (study introduction to css.) objective: to learn how to create floated features on webpages, and to use the clear property and other methods of clearing floats. the background of floats the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text
wrapping around the left or right of it. the kind of thing you might get in a newspaper layout. but web developers quickly realized that you can float anything, not just images, so the use of float broadened, for example to fun layout effects such as drop-caps. floats have commonly been used to create entire web site layouts featuring multiple columns of information floated so they sit alongside one...
...px; background-color: rgb(207,232,220); padding: 1em; } so let's think about how the float works — the element with the float set on it (the <div> element in this case) is taken out of the normal layout flow of the document and stuck to the left-hand side of its parent container (<body>, in this case). any content that comes below the floated element in the normal layout flow will now
wrap around it, filling up the space to the right-hand side of it as far up as the top of the floated element. there, it will stop. floating the content to the right has exactly the same effect, but in reverse — the floated element will stick to the right, and the content will
wrap around it to the left. try changing the float value to right and replace margin-right with margin-left in the last rul...
...d-color: rgb(79,185,227); padding: 10px; color: #fff; } .cleared { clear: left; } you should see that the following paragraph clears the floated element and no longer comes up alongside it. the clear property accepts the following values: left: clear items floated to the left. right: clear items floated to the right. both: clear any floated items, left or right. ...
...And 14 more matches
Grid template areas - CSS: Cascading Style Sheets
yet create any layout, but we now have named areas to use in a layout. .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } having defined these names i then create my layout. this time, instead of placing my items using line numbers specified on the items themselves, i create the whole layout on the grid container. ...
...rs specified on the items themselves, i create the whole layout on the grid container. ...
...s: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="
wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using this method we do not need to specify anything at all on the indiv...
...And 14 more matches
Index
35 components.utils.evalinwindow this function enables code running in a more-privileged javascript context to evaluate a string in a less-privileged javascript context. the result is structured cloned back to the original context, unless it is native (for example, if it returns a dom node, this is not structured cloned, because the original context will see that through an xray
wrapper already), so it's guaranteed to behave predictably. this is useful for privileged code, such as add-on code, to access variables and apis defined in web content. 36 components.utils.exportfunction api, add-ons, components, extensions, language bindings, method, mozilla, non-standard, reference, webextensions, xpcom this function provides a safe way to expose a function ...
... components.utils.import was introduced in firefox 3 and is used for sharing code between different scopes easily. for example, you can import xpcomutils.jsm to avoid copy/pasting long xpcom component registration boilerplate in your component files. 41 components.utils.importglobalproperties imports various objects into a system scope. 42 components.utils.isxray
wrapper when privileged javascript in gecko accesses objects belonging to less-privileged code (such as untrusted web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways. for example, privileged code using an xray to a dom object sees only the original, native version of the dom...
...he dom object. any expando properties are not visible, and if any native properties have been redefined, this has no effect. 43 components.utils.makeobjectpropsnormal add-ons, developing mozilla, extensions, javascript, needstechnicalreview, xpcom:language bindings, xpconnect ensures that the specified object's methods are all in the object's scope, and aren't cross-component
wrappers. 44 components.utils.reporterror xpcom:language bindings, xpconnect components.utils.reporterror reports a javascript error object to the error console, and returns. it is meant for use by extension developers who have exception handler blocks which want to "eat" an exception, but still want to report it to the console. 45 components.utils.scheduleprecisegc ...
...And 11 more matches
platform/xpcom - Archive of obsolete content
class of unknown called helloworld that implements a function called hello. by creating a factory and passing it the contract id for the helloworld component and the helloworld constructor, we enable xpcom clients to access the helloworld component, given its contract id. ...
... javascript only, so we use the technique documented under the "using
wrappedjsobject" section of how to build an xpcom component in javascript. ...
...require('chrome'); var contractid = '@me.org/helloworld'; // define a component var helloworld = class({ extends: unknown, get
wrappedjsobject() this, hello: function() {return 'hello world';} }); // create and register the factory var factory = factory({ contract: contractid, component: helloworld }); // xpcom clients can retrieve and use this new // component in the normal way var
wrapper = cc[contractid].createinstance(ci.nsisupports); var helloworld =
wrapper.
wrappedjsobject; console.log(helloworld.hello()); using class id you can specify a class id for the factory by setting the id option in the factory's constructor. if you don't specify a class id, then the factory will generate one. either way, it will be accessible as the value of the factory's id property. xpcom user...
...And 10 more matches
Introduction to CSS layout - Learn web development
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 around them in magazine layouts. the position property — allows you to precisely control the placement of boxes inside other boxes. static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewpo...
...t name for the flexible box layout module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. to use flexbox, you apply display: flex to the parent element of the elements you want to lay out; all its direct children then become flex items. we can see this in a simple example. the html markup below gives us a containing element, with a class of
wrapper, inside which are three <div> elements. by default these would display as block elements, below one another, in our english language document. however, if we add display: flex to the parent, the three items now arrange themselves into columns. this is due to them becoming flex items and being affected by some initial values that flexbox sets on the flex container. they are displayed in a row,...
...etch to the height of the tallest item, because the initial value of the align-items property set on their parent is stretch. this means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. the items all line up at the start of the container, leaving any extra space at the end of the row. flexbox example 1 * {box-sizing: border-box;} .
wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .
wrapper { display: flex; } <div class="
wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. ...
...And 10 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
lem to browsers that do not support grid, and legacy code is not an issue to our grid supporting browsers. however, things are not always so simple. in this next example, i have a set of floated cards. i have given the cards a width, in order to float them. ...
...simple. in this next example, i have a set of floated cards. i have given the cards a width, in order to float them. ...
...e cards, i use a margin on the items, and then a negative margin on the container: * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .
wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .
wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .
wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } <div class="
wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>two</h2> <p>we c...
...And 10 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
tain 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 elements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
...med template areas that we learned about in the guide grid template areas. my mark-up is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
... * {box-sizing: border-box;} .
wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .
wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="
wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> <h1>main article area</h1> <p>in this layout, we display the ar...
...And 10 more matches
lang/functional - Archive of obsolete content
{ method } = require("sdk/lang/functional"); let mynumber = { times: method(times), add: method(add), number: 0 }; function times (target, x) { return target.number *= x; } function add (target, x) { return target.number += x; } console.log(mynumber.number); // 0 mynumber.add(10); // 10 mynumber.times(2); // 20 mynumber.add(3); // 23 parameters lambda : function the function to be
wrapped and returned. returns function : the
wrapped lambda. defer(fn) takes a function and returns a
wrapped version of the function. calling the
wrapped version will call the original function during the next event loop. this is similar to calling settimeout with no wait (i.e. settimeout(function () { ... }, 0)), except that the
wrapped function may be reused and does not need to be repeated eac...
... may be reused and does not need to be repeated each time. this also enables you to use these functions as event listeners. let { defer } = require("sdk/lang/functional"); let fn = defer(function myevent (event, value) { console.log(event + " : " + value); }); fn("click", "#home"); console.log("done"); // this will print 'done' before 'click : #home' since // we deferred the execution of the
wrapped `myevent` // function, making it non-blocking and executing on the // next event loop parameters fn : function the function to be deferred. returns function : the new, deferred function. remit() an alias for defer. invoke(callee, params, self) invokes callee, passing params as an argument and self as this. returns the value that is returned by callee. let { invoke } = require("sdk/la...
...h())). let { compose } = require("sdk/lang/functional"); let welcome = compose(exclaim, greet); welcome('moe'); // "hi: moe!"; function greet (name) { return "hi: " + name; } function exclaim (statement) { return statement + "!"; } parameters fn... : function takes a variable number of functions as arguments and composes them from right to left. returns function : the composed function. ...
...And 9 more matches
nsIPromptService
ns by including an ampersand ("&") in front of the character that should be the access key for that button. if you need to include an ampersand in the button's text, use two of them, like this: "&&". note: some of these interface methods use out and inout parameters. in c++, out parameters are pointers. for javascript, they are extra work, as you can't use an out parameter directly. you need to
wrap them in a temporary 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"] .ge...
...wwatcher.activewindow. adialogtitle text to appear in the title of the dialog. atext text to appear in the body of the dialog. acheckmsg text to appear with the checkbox. acheckstate contains the initial checked state of the checkbox when this method is called and the final checked state after this method returns. if you call this method from javascript you need to
wrap this argument in an object with its 'value' property set to a boolean (or use an empty object). see also the alertcheck_example. confirm() shows a dialog with ok and cancel buttons. boolean confirm( in nsidomwindow aparent, in wstring adialogtitle, in wstring atext ); parameters aparent the parent window for the dialog. if set to null the parent window will be nsiwindowwatcher.ac...
...wwatcher.activewindow. adialogtitle text to appear in the title of the dialog. atext text to appear in the body of the dialog. acheckmsg text to appear with the checkbox. acheckstate contains the initial checked state of the checkbox when this method is called and the final checked state after this method returns. if you call this method from javascript you need to
wrap this argument in an object with its 'value' property set to a boolean (or use an empty object). return value true for ok, false for cancel confirmex() puts up a dialog with up to 3 buttons and an optional, labeled checkbox. the buttons are numbered 0 - 2. the implementation can decide what order the buttons appear in, and it may not be simply right-to-left (2, 1, 0) or left-to-right (0, 1,...
...And 9 more matches
white-space - CSS: Cascading Style Sheets
the white-space css property sets how white space inside an element is handled. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: to make words break within themselves, use overflow-
wrap, word-break, or hyphens instead. syntax /* keyword values */ white-space: normal; white-space: no
wrap; white-space: pre; white-space: pre-
wrap; white-space: pre-line; white-space: break-spaces; /* global values */ white-space: inherit; white-space: initial; white-space: unset; the white-space property is specified as a single keyword chosen from the list of values below. values normal sequences of white space are col...
...; white-space: break-spaces; /* global values */ white-space: inherit; white-space: initial; white-space: unset; the white-space property is specified as a single keyword chosen from the list of values below. values normal sequences of white space are collapsed. newline characters in the source are handled the same as other white space. lines are broken as necessary to fill line boxes. no
wrap collapses white space as for normal, but suppresses line breaks (text
wrapping) within the source. pre sequences of white space are preserved. lines are only broken at newline characters in the source and at <br> elements. pre-
wrap sequences of white space are preserved. lines are broken at newline characters, at <br>, and as necessary to fill line boxes. pre-line sequences of white space ...
... a line breaking opportunity exists after every preserved white space character, including between white space characters. ...
...And 9 more matches
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
grid lines are created when you define tracks in the explicit grid using css grid layout. in the following example there is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. ...
...grid using css grid layout. in the following example there is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. ...
...s. * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="
wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .
wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } lines can be addressed using their line number. in a left-to-right language such as english, column line 1 will be on the left of the grid, row line 1 on the top. lines numbers resp...
...And 8 more matches
Multiprocess on Windows
read sta, com will still use the sta's message queue, thus defeating the purpose of using the mta in the first place! enter the interceptor to achieve the best of both worlds, we wrote our own code to facilitate the safe handing off of an inbound rpc from the content process's mta to the content main thread's sta. this uses a com technology called the interceptor. interceptors are, essentially,
wrapper objects which implement the same interfaces as the object that they are
wrapping. when an incoming rpc invokes a method on an interceptor, the interceptor dispatches a callback that allows us to do whatever we want with that request. our callback implementation forwards the method call to the main thread in order to invoke the method on the
wrapped object. the interceptor is also aware that an...
... this code lives in the mscom library, located in the tree at /ipc/mscom. its headers are exported to mozilla/mscom. ensuring that the interceptor supports your interfaces this information is current, but is likely to change when bug 1346957 is landed. ...
... won't be able to understand the interface in the other process. registering outparams that consist of arrays of interfaces recall that one of the limitations of typelibs is that their metadata isn't as rich as oicf metadata. something typelibs do not include in their metadata, is idl annotations, such as length_is and size_is. remember, for interceptors to work correctly, they must be able to
wrap any outparams that are interfaces with their own interceptors. without the support for length_is and size_is annotations, the interceptor cannot tell the difference between a scalar outparam and an array outparam. if your interface outputs an array of interfaces, the interceptor would only
wrap the first element in the array, because it cannot distinguish between scalars and arrays. note: if yo...
...And 8 more matches
NSS API Guidelines
delines in this document, are more forward-looking than documentary. these rules are here to help us all immediately achieve more consistent and usable code, but some existing code won't follow all these rules. nss api structure this section explains the structure and relationships of the nss libraries. the layering section explains how the nss code is layered, and how higher-level functions
wrap low-level functions. the libraries section descibes the nss libraries, the functionality each provides, and the layer in which the library (mostly) operates. layering each separate component of the api should live in its own layer. the functions in these apis should never call api layers above them. in addition, some low-level apis may be completely opaque to higher level layers. that is, acce...
... apis should never call api layers above them. in addition, some low-level apis may be completely opaque to higher level layers. that is, access to these functions should only be provided by the api directly above them. the nss apis are layered, as shown in this diagram: the boxes in the gray section, towards the center, are exported only through pkcs #11. ...
...the layer indicates the main layer, seen in the previous diagram, in which the library operates. ...
...And 8 more matches
Avoiding leaks in JavaScript XPCOM components
. xpcom uses reference counting. authors of javascript code that uses xpcom objects can't depend on all of the benefits of garbage collection. they face some of the disadvantages of reference counting. understanding how memory management works in xpconnect helps understand why this is the case. xpconnect basically provides two features. it allows javascript code to access xpcom objects (i.e., it
wraps native xpcom objects for javascript) and it allows javascript code to implement xpcom interfaces (i.e., it
wraps javascript objects for xpcom). for javascript objects that implement xpcom interfaces, the interface between reference counting and garbage collection is quite simple. (the implementation is slightly more complicated, but only to optimize for speed and reduce creation and destruction...
...tive xpcom objects for javascript) and it allows javascript code to implement xpcom interfaces (i.e., it
wraps javascript objects for xpcom). for javascript objects that implement xpcom interfaces, the interface between reference counting and garbage collection is quite simple. (the implementation is slightly more complicated, but only to optimize for speed and reduce creation and destruction of
wrapper objects.) the
wrapper object is reference counted, and as long as it exists, it makes the javascript object that it
wraps be one of the roots used by the javascript garbage collector's mark phase. ...
...counting and garbage collection is quite simple. (the implementation is slightly more complicated, but only to optimize for speed and reduce creation and destruction of
wrapper objects.) the
wrapper object is reference counted, and as long as it exists, it makes the javascript object that it
wraps be one of the roots used by the javascript garbage collector's mark phase. one might think that the
wrappers of native xpcom objects (to allow them to be used from javascript) would just work the other way around. and in the simple case, they do. the
wrapper owns a reference to the native object that it
wraps, and the
wrapper object is kept alive by the javascript garbage collector. this problem is only in versions of mozilla prior to mozilla 1.8. however, it's not quite that simple, because of the...
...And 8 more matches
Index - Archive of obsolete content
ry! 172 alerts and notifications code snippets non-modal notification and further interaction with users 173 autocomplete code snippets, form fill, satchel no summary! 174 bookmarks code snippets, developing mozilla, extensions, places no summary! 175 boxes code snippets make the box style="display: block" and the
wrapping behavior will occur when the box is resized: 176 canvas code snippets canvas, code snippets, graphics no summary! 177 cookies add-ons, code snippets, cookies, extensions no summary! 178 customizing the download progress bar no summary! 179 delayed execution code snippets no summary! 180 dialogs and...
...ces used by the download manager. this article provides a list of them. 425 drag and drop mozilla, xul this section describes how to implement objects that can be dragged around and dropped onto other objects. 426 drag and drop example xul an example of implementing drag and drop will be implemented in this section. 427 drag and drop javascript
wrapper xul no summary! 428 drag and drop events firefox 3 firefox 3 adds two new events that allow you to determine when drag operations begin and end. these events are new in the current working draft of the html 5 specification. 429 editor embedding guide embedding mozilla, guide, midas, needshelp given an nsiwebbrowser instance, get an nsidomwind...
...developers have been doing this for some time, but ...
...And 7 more matches
Index - Web APIs
erty couldn't be validated. the returned string explains the error and should offer suggestions for how to correct it. ...
...he returned string explains the error and should offer suggestions for how to correct it. 42 aescbcparams api, aescbcparams, dictionary, reference, web crypto api the aescbcparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.
wrapkey(), or subtlecrypto.un
wrapkey(), when using the aes-cbc algorithm. 43 aesctrparams api, aesctrparams, dictionary, reference, web crypto api the aesctrparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.
wrapkey(), or subtlecrypto.un
wrapkey(), when using the aes-ctr algorithm. ...
... 45 aeskeygenparams api, aeskeygenparams, dictionary, reference, web crypto api see the examples for subtlecrypto.generatekey(). ...
...And 7 more matches
Legacy layout methods - Learn web development
e both. we will create a 12 column grid — a very common choice that is seen to be very adaptable to different situations given that 12 is nicely divisible by 6, 4, 3, and 2. a simple fixed width grid lets first create a grid system that uses fixed width columns. start out by making a local copy of our sample simple-grid.html file, which contains the following markup in its body. ...
... <div class="col span6">14</div> <div class="col span3">15</div> <div class="col span2">16</div> </div> </div> the aim is to turn this into a demonstration grid of two rows on a twelve column grid — the top row demonstrating the size of the individual columns, the second row some different sized areas on the grid. in the <style> element, add the following code, which gives the
wrapper container a width of 980 pixels, with padding on the right hand side of 20 pixels. this leaves us with 960 pixels for our total column/gutter widths — in this case, the padding is subtracted from the total content width because we have set box-sizing to border-box on all elements on the site (see changing the box model completely for more explanation). * { box-sizing: border-box; } body ...
...h padding on the right hand side of 20 pixels. this leaves us with 960 pixels for our total column/gutter widths — in this case, the padding is subtracted from the total content width because we have set box-sizing to border-box on all elements on the site (see changing the box model completely for more explanation). * { box-sizing: border-box; } body { width: 980px; margin: 0 auto; } .
wrapper { padding-right: 20px; } now use the row container that is
wrapped around each row of the grid to clear one row from another. add the following rule below your previous one: .row { clear: both; } applying this clearing means that we don’t need to completely fill each row with elements making the full twelve columns. the rows will remain separated, and not interfere with each other. t...
...And 6 more matches
Getting started with HTML - Learn web development
: to gain basic familiarity with html, and practice writing a few html elements. what is html? html (hypertext markup language) is not a programming language. it is a markup language that tells web browsers how to structure the web pages you visit. it can be as complicated or as simple as the web developer wants it to be. html consists of a series of elements, which you use to enclose,
wrap, or mark up different parts of content to make it appear or act in a certain way. the enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on. for example, consider the following line of text: my cat is very grumpy if we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph (<p>) element: <p>...
...title>, <title>, <title>, <title>, etc., and it will work. however, it is best practice to write all tags in lowercase for consistency, readability, and other reasons. anatomy of an html element let's further explore our paragraph element from the previous section: the anatomy of our element is: the opening tag: this consists of the name of the element (in this example, p for paragraph),
wrapped in opening and closing angle brackets. this opening tag marks where the element begins or starts to take effect. in this example, it precedes the start of the paragraph text. the content: this is the content of the element. in this example, it is the paragraph text. the closing tag: this is the same as the opening tag, except that it includes a forward slash before the element name. this mar...
...he same as the opening tag, except that it includes a forward slash before the element name. this marks where the element ends. failing to include a closing tag is a common beginner error that can produce peculiar results. the element is the opening tag, followed by content, followed by the closing tag. active learning: creating your first html element edit the line below in the input area by
wrapping it with the tags <em> and </em>. to open the element, put the opening tag <em> at the start of the line. to close the element, put the closing tag </em> at the end of the line. doing this should give the line italic text formatting! see your changes update live in the output area. if you make a mistake, you can clear your work using the reset button. if you get really stuck, press the show s...
...And 6 more matches
Places utilities for JavaScript
lean nodeisdynamiccontainer(nsinavhistoryresultnode 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 atype, nsiuri aoverrideuri); array un
wrapnodes(string blob, string atype); nsitransaction maketransaction(string data, string type, nsinavhistoryresultnode container, int index, boolean copy); nsinavhistoryresult getfoldercontents(int afolderid, boolean aexcludeitems, boolean aexpandqueries); boolean showaddbookmarkui(n...
...) parameters anode the node to check. return type return true if the node is a folder, false otherwise. getindexofnode() gets the index of a node within its parent container int getindexofnode(anode) parameters anode the node to look up return type returns the index of the node within its parent container, or -1 if the node was not found or the node specified has no parent. ...
...node the node to check. return type return true if the node is a folder, false otherwise. getindexofnode() gets the index of a node within its parent container int getindexofnode(anode) parameters anode the node to look up return type returns the index of the node within its parent container, or -1 if the node was not found or the node specified has no parent. ...
...And 6 more matches
Content Processes - Archive of obsolete content
abs or add-ons, so instead, each content script is loaded in a sandbox. sandboxes were explained this article. accessing the dom the global for the content sandbox has the window object as its prototype. this allows the content script to access any property on the window object, even though that object lives outside the sandbox. recall that the window object inside the sandbox is actually a
wrapper to the real object. a potential problem with the content script having access to the window object is that a malicious page could override methods on the window object that it knows are being used by the add-on, in order to trick the add-on into doing something it does not expect. similarly, if the content script defines any values on the window object, a malicious page could potentially ...
...content script defines any values on the window object, a malicious page could potentially steal that information. to avoid problems like this, content scripts should always see the built-in properties of the window object, even when they are overridden by another script. conversely, other scripts should not see any properties added to the window object by the content script. this is where xray
wrappers come in. xray
wrappers automatically
wrap native objects like the window object, and only exposes their native properties, even if they have been overridden on the
wrapped object. conversely, any properties defined on the
wrapper are not visible from the
wrapped object. this avoids both problems we mentioned earlier. the fact that you can't override the properties of the window object via a ...
...this feature should only be used when you really need it, however. ...
...And 5 more matches
Block and Line Layout Cheat Sheet - Archive of obsolete content
dition; for example, due to system limitations. currently, the only way to get an unflowable frame is to have a frame tree that is "too deep". (see nsframe::isframetreetoodeep().) ns_frame_has_dirty_children ns_frame_has_view ns_frame_independent_selection ns_frame_is_special nsblockframe mflags these flags are the private flags that are meaningful to block frames. ns_block_shrink_
wrap causes the block to "shrink-
wrap" around its content. this means the block will determine its children's width and make its content area that wide. finally, it will add padding and border to determine the final width. is this where the "tending towards zero width" stuff comes in? ns_block_no_auto_margins ns_block_margin_root indicates that this is a frame from which child margins can be calc...
...be calculated. the absence of this flag implies that child margin calculations should ignore the frame and look further up the parent chain. used in nsblockreflowcontext::computecollapsedtopmargin(). this flag causes the nsblockreflowstate's constructor to set the brs_istopmarginroot and brs_isbottommarginroot flags. ...
... nslinebox a block consists of lines and other blocks, stacked vertically. a block frame has one nslinebox for each line, and one nslinebox for each block child. these are stored as a doubly-linked list in the mlines member of nsblockframe. ...
...And 5 more matches
HTML basics - Learn web development
could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. as the title suggests, this article will give you a basic understanding of html and its functions. so what is html? html is not a programming language; it is a markup language that defines the structure of your content. html consists of a series of elements, which you use to enclose, or
wrap, different parts of the content to make it appear a certain way, or act a certain way. the enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. for example, take the following line of content: my cat is very grumpy if we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing i...
...g line of content: my cat is very grumpy if we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags: <p>my cat is very grumpy</p> anatomy of an html element let's explore this paragraph element a bit further. the main parts of our element are as follows: the opening tag: this consists of the name of the element (in this case, p),
wrapped in opening and closing angle brackets. this states where the element begins or starts to take effect — in this case where the paragraph begins. the closing tag: this is the same as the opening tag, except that it includes a forward slash before the element name. this states where the element ends — in this case where the paragraph ends. failing to add a closing tag is one of the standard ...
...ve the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. an attribute should always have the following: a space between it and the element name (or the previous attribute, if the element already has one or more attributes). the attribute name followed by an equal sign. the attribute value
wrapped by opening and closing quotation marks. note: simple attribute values that don't contain ascii whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable. nesting elements you can put elements inside other elements too — this is called nesting. if we wanted t...
...And 5 more matches
Mozilla accessibility architecture
neral rules for the directory structure: interfaces, both internally-used cross-platform and toolkit-specific interfaces exist in accessible/public. the implementations for each kind of object (document, text, table, edit box, button, etc.) exist in accessible/src. code and interfaces for specific toolkits should go in the appropriate directoy. toolkit specific implementations should have "
wrap" appended to the class name. for example, document specific code for each toolkit goes in nsdocaccessible
wrap: public nsdocaccessible. directory purpose accessible/public common interfaces shared by all toolkits accessible/public/msaa custom com interfaces that we use to extend msaa's iaccessible accessible/pu...
...i toolkits which share only about 75% of their code, there is a lot of toolkit-specific code that needs to live somewhere. in the past, this was accomplished through aggregation -- two separate trees of objects were kept, one in accessible/src and one in widget/src. ...
...it-specific code that needs to live somewhere. in the past, this was accomplished through aggregation -- two separate trees of objects were kept, one in accessible/src and one in widget/src. however, because this would have caused a lot of difficulty when implementing the accessibility cache, the code was moved in to the "
wrap" classes in a source directory specific to each toolkit. ...
...And 5 more matches
CustomizableUI.jsm
l); void unregisterarea(aareaid, adestroyplacements); void addwidgettoarea(awidgetid, aareaid, [optional] aposition); void removewidgetfromarea(awidgetid); void movewidgetwithinarea(awidgetid, aposition); void ensurewidgetplacedinwindow(awidgetid, awindow); void beginbatchupdate(); void endbatchupdate(aforcedirty); widgetgroup
wrapper createwidget(awidgetspecification); void destroywidget(awidgetid); widgetgroup
wrapper getwidget(awidgetid); array getunusedwidgets(awindow); array getwidgetidsinarea(aareaid); array getwidgetsinarea(aareaid); string getareatype(aareaid); domelement getcustomizetargetforarea(aareaid, awindow); void reset(); void un...
...o reduce (possibly sync) io. calls to begin/endbatchupdate may be nested. callers should ensure that no matter what happens they call endbatchupdate once for each call to beginbatchupdate, even if there are exceptions in the code in the batch update. otherwise, for the duration of the firefox session, customization state is never saved. typically, you would do this using a try...finally block
wrapped around your insertion code. endbatchupdate() end a batch update. see the documentation for beginbatchupdate above. state is not saved if we believe it is identical to the last known saved state. state is only ever saved when all batch updates have finished (that is, there has been 1 endbatchupdate call for each beginbatchupdate call). if any of the endbatchupdate calls pass aforcedirty=tr...
... we will flush to the prefs file. parameters aforcedirty force customizableui to flush to the prefs file when all batch updates have finished. createwidget() create a widget. to create a widget, you should pass an object with its desired properties. for a list of supported properties, see api-provided widgets. parameters aproperties the specification for the widget return value a
wrapper around the created widget. note: if your extension is compatible with versions of firefox below 29, i.e. before customizableui was introduced, then you have to make sure that in case of running on newer browsers, xul overlay does not contain description of the button that you are creating with createwidget() method. otherwise, conflicting static xul overlay button and dynamic customizableui b...
...And 5 more matches
textbox - Archive of obsolete content
tiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
... attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
...s, searchbutton, size, spellcheck, tabindex, timeout, type, value,
wrap,
wraparound properties accessibletype, 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 decimal places to display.
...And 4 more matches
Supporting older browsers - Learn web development
acy techniques we have already covered, which are then overwritten by your grid layout in modern browsers that understand it. in the below example, we have floated three <div>s so they display in a row. any browser that does not support css grid layout will see the row of boxes as a floated layout. ...
... see the row of boxes as a floated layout. a floated item that becomes a grid item loses the float behaviour, which means that by turning the
wrapper into a grid container, the floated items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. ...
...play the grid view, if not it ignores the display: grid and related properties and the floated layout is used. * {box-sizing: border-box;} .
wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } <div class="
wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a grid layout. fallback methods there are a number of layout methods which can be used in a similar way to t...
...And 4 more matches
Script security
ory. normal content windows are globals, of course, but so are chrome windows, sandboxes, workers, the contentframemessagemanager in a frame script, and so on. gecko guarantees that javascript code running in a given compartment is only allowed to access objects in the same compartment. when code from compartment a tries to access an object in compartment b, gecko gives it a cross-compartment
wrapper. this is a proxy in compartment a for the real object, which lives in compartment b. inside the same compartment, all objects share a global and are therefore same-origin with each other. therefore there's no need for any security checks, there are no
wrappers, and there is no performance overhead for the common case of objects in a single window interacting with each other. whenever cross...
...nt a for the real object, which lives in compartment b. inside the same compartment, all objects share a global and are therefore same-origin with each other. therefore there's no need for any security checks, there are no
wrappers, and there is no performance overhead for the common case of objects in a single window interacting with each other. whenever cross-compartment access happens, the
wrappers enable us to implement the appropriate security policy. because the
wrapper we choose is specific to the relationship between the two compartments, the security policy it implements can be static: when the caller uses the
wrapper, there's no need to check who is making the call or where it is going. cross-compartment access same-origin as we've already seen, the most common scenario for sa...
... policy it implements can be static: when the caller uses the
wrapper, there's no need to check who is making the call or where it is going. cross-compartment access same-origin as we've already seen, the most common scenario for same-origin access is when objects belonging to the same window object interact. this all takes place within the same compartment, with no need for security checks or
wrappers. when objects share an origin but not a global - for example two web pages from the same protocol, port, and domain - they belong to two different compartments, and the caller gets a transparent
wrapper to the target object. transparent
wrappers allow access to all the target's properties: functionally, it's as if the target is in the caller's compartment. cross-origin if the two compar...
...And 4 more matches
PKCS11 Implement
and cfk_user_pin_initialized = false. session management c_opensession the nss calls c_opensession whenever it initializes a token and keeps the session open as long as possible. the nss almost never closes a session after it finishes doing something with a token. it uses a single session for all single-part rsa operations such as logging in, logging out, signing, verifying, generating keys,
wrapping keys, and so on. the nss opens a separate session for each part of a multipart encryption (bulk encryption). if it runs out of sessions, it uses the initial session for saves and restores. c_closesession the nss calls c_closesession to close sessions created for bulk encryption. c_closeallsessions the nss may call c_closeallsessions when it closes down a slot. c_getsessioninfo the ns...
...if they have a read/write value and can't generate a key pair, nss uses its own c_generatekeypair and loads the...
...if they have a read/write value and can't generate a key pair, nss uses its own c_generatekeypair and loads the key with c_cr...
...And 4 more matches
NSS functions
lot mxr 3.11 and later pk11_getalltokens mxr 3.2 and later pk11_getallslotsforcert mxr 3.12 and later pk11_getbestkeylength mxr 3.2 and later pk11_getbestslot mxr 3.2 and later pk11_getbestslotmultiple mxr 3.2 and later pk11_getbest
wrapmechanism mxr 3.2 and later pk11_getblocksize mxr 3.2 and later pk11_getcertfromprivatekey mxr 3.9.3 and later pk11_getcurrent
wrapindex mxr 3.2 and later pk11_getdefaultarray mxr 3.8 and later pk11_getdefaultflags mxr 3.8 and later ...
...k11_getsymkeynickname mxr 3.4 and later pk11_getsymkeytype 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_get
wrapkey mxr 3.2 and later pk11_hashbuf mxr 3.2 and later pk11_hasrootcerts mxr 3.4 and later pk11_importcert mxr 3.5 and later pk11_importcertforkeytoslot mxr 3.2 and later pk11_importcrl mxr 3.6 and later pk11_importdercert mxr ...
...henticationpath mxr 3.4 and later pk11_pubdecryptraw mxr 3.2 and later pk11_pubderive mxr 3.2 and later pk11_pubderivewithkdf mxr 3.9 and later pk11_pubencryptpkcs1 mxr 3.9.3 and later pk11_pubencryptraw mxr 3.2 and later pk11_pubun
wrapsymkey mxr 3.2 and later pk11_pubun
wrapsymkeywithflags mxr 3.6 and later pk11_pubun
wrapsymkeywithflagsperm mxr 3.9 and later pk11_pub
wrapsymkey mxr 3.2 and later pk11_randomupdate mxr 3.2 and later pk11_readrawattribute mxr 3.9.2 and later ...
...And 4 more matches
nsIWebBrowserPersist
sist;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 aoutputcontenttype, in unsigned long aencodingflags, in unsigned long a
wrapcolumn); 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 areferrerpolicy, in nsiinputstream apostdata, in string aextrahe...
...is ready to save data. persist_state_saving 2 persister is saving data. persist_state_finished 3 persister has finished saving data. encode_flags_selection_only 1 output only the current selection as opposed to the whole document. encode_flags_formatted 2 for plain text output. convert html to plain text that looks like the html. implies
wrap (except inside <pre>), since html
wraps. html output: always do prettyprinting, ignoring existing formatting. encode_flags_raw 4 output without formatting or
wrapping the content. this flag may be used to preserve the original formatting as much as possible. encode_flags_body_only 8 output only the body section, no html tags. encode_flags_preformatted 16 ...
... encode_flags_format_flowed 64 for plain text output. output for format flowed (rfc 2646). this is used when converting to text for mail sending. ...
...And 4 more matches
Debugger.Object - Firefox Developer Tools
nce to store metadata about particular debuggee objects. javascript code in different compartments can have different views of the same object. for example, in firefox, code in privileged compartments sees content dom element objects without redefinitions or extensions made to that object’s properties by content code. (in firefox terminology, privileged code sees the element through an “xray
wrapper”.) to ensure that debugger code sees each object just as the debuggee would, each debugger.object instance presents its referent as it would be seen from a particular compartment. this “viewing compartment” is chosen to match the way the debugger came across the referent. as a consequence, a single debugger instance may actually have several debugger.object instances: one for each compar...
...ible effect on debugger.object instances. accessor properties of the debugger.object prototype a debugger.object instance inherits the following accessor properties from its prototype: proto the referent’s prototype (as a new debugger.object instance), or null if it has no prototype. 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. callable true if the referent is a callable object (such as a function or a function proxy); false otherwise. name the name of the referent, if it is a named function. if the referent is an anonymous function, or not a function at all, this is undefined. this accessor returns whatever name appeared after t...
...a typeerror exception. promisetimetoresolution if the referent is a promise, this is the number of milliseconds elapsed between when the promise was created and when it was resolved. if the referent hasn’t been resolved or is not a promise, throw a typeerror exception. global a debugger.object instance referring to the global object in whose scope the referent was allocated. this does not un
wrap cross-compartment
wrappers: if the referent is a
wrapper, the result refers to the
wrapper’s global, not the
wrapped object’s global. the result refers to the global directly, not via a
wrapper. allocationsite if object allocation site tracking was enabled when this debugger.object’s referent was allocated, return the javascript execution stack captured at the time of the allocation. othe...
...And 4 more matches
Using custom elements - Web Components
stantiated. 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. ...
...w 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. ...
...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. ...
...And 4 more matches
Appendix D: Loading Scripts - Archive of obsolete content
d 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 augmented or rarified to add or remove privileges as necessary. under ordinary circumstances, native objects passed out of sandboxes are
wrapped in xray
wrapper objects, which means that only native properties of these objects are directly exposed to privileged code. this behavior can be reversed by setting the wantsxrays parameter to false when constructing the sandbox. disadvantages performance: there are several significant performance disadvantages inherent in this method: there is currently no way to load code into sand...
... that modules are loaded only once globally, this method can be easily misused to re-load scripts for each new window where they would be better loaded only once globally per session. because sandbox objects are evaluated in their own javascript compartment, they are separated by a membrane from other javascript code. this means that any and all javascript objects passed in our out of them are
wrapped in inter-compartment proxy objects, which consume additional memory and add an extra layer of complexity to 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...
...ects, which consume additional memory and add an extra layer of complexity to 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...
...And 3 more matches
Accessibility/XUL Accessibility Reference - Archive of obsolete content
m label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine. ...
...the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine. ...
...ing implementation, description elements appear to not associate correctly with controls whereas labels do. label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine. ...
...And 3 more matches
JSException - Archive of obsolete content
tion description jsexception is an exception which is thrown when javascript 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: get
wrappedexception instance method get
wrappedexception. get
wrappedexceptiontype instance method get
wrappedexceptiontype 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...
... jsexception constructors, deprecated in javascript 1.4, constructs a jsexception object with an optional detail message. declaration 1. public jsexception() 2. public jsexception(string s) 3. ...
...ing s, string filename, int lineno, string source, int tokenindex) arguments s the detail message. filename the url of the file where the error occurred, if possible. lineno the line number of the file, if possible. source the string containing the javascript code being evaluated. tokenindex the index into the source string where the error occurred. ...
...And 3 more matches
Advanced form styling - Learn web development
of appearence to get rid of some system-level styling. ...
...vel styling. ...
... icon that indicates it is a dropdown differs across browsers. it also tends to change if you increase the size of the select box, or resize in an ugly fashion. to fix this in our example we first used our old friend appearance: none to get rid of the icon altogether: select { -webkit-appearance: none; appearance: none; } we then created our own icon using generated content. ...
...And 3 more matches
Advanced text formatting - Learn web development
e audience (but not to other 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 audien...
... textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; quotations html also has features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation. blockquotes if a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should
wrap it inside a <blockquote> element to signify this, and include a url pointing to the source of the quote inside a cite attribute. for example, the following markup is taken from the mdn <blockquote> element page: <p>the <strong>html <code><blockquote></code> element</strong> (or <em>html block quotation element</em>) indicates that the enclosed text is an extended quotation.</p> to turn th...
...<cite>mdn q page</cite></a>.</p> citations are styled in italic font by default. active learning: who said that? time for another active learning example! in this example we'd like you to: turn the middle paragraph into a blockquote, which includes a cite attribute. turn "the need to eliminate negative self talk" in the third paragraph into an inline quote, and include a cite attribute.
wrap the title of each source in <cite> tags and turn each one into a link to that source. the citation sources you need are: http://www.brainyquote.com/quotes/authors/c/confucius.html for the confucius quote http://www.affirmationsforpositivethinking.com for "the need to eliminate negative self talk". if you make a mistake, you can always reset it using the reset button. if you get really stu...
...And 3 more matches
HTML text fundamentals - Learn web development
t to give it structure and meaning—including paragraphs, headings, lists, emphasis, and quotations. the basics: headings and paragraphs most structured text consists of headings and paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc. structured content makes the reading experience easier and more enjoyable. in html, each paragraph has to be
wrapped in a <p> element, like so: <p>i am a paragraph, oh yes i am.</p> each heading has to be
wrapped in a heading element: <h1>i am the title of the story.</h1> there are six heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. each element represents a different level of content in the document; <h1> represents the main heading, <h2> represents subheadings, <h3> represents sub-subheadings...
...access to given text content. among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. if headings are not available, they will be forced to listen to the whole document read out loud. to style content with css, or make it do interesting things with javascript, you need to have elements
wrapping the relevant content, so css/javascript can effectively target it. we therefore need to give our content structural markup. active learning: giving our content structure let's jump straight in with a live example. in the example below, add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can alw...
...n "stop," and a green traffic light to mean "go." things can get tricky very quickly if the wrong semantics are applied. (do any countries use red to mean "go"? i hope not.) in a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. in this context the <h1> element is also a semantic element, which gives the text it
wraps around the role (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using css). more importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned ...
...And 3 more matches
Drawing graphics - Learn web development
size of the image on the canvas. we just want to keep its original size, so we specify 102 and 148 as the width and height. now we'll alter the sprite value after each draw — well, after some of them anyway. add the following block to the bottom of the draw() function: if (posx % 13 === 0) { if (sprite === 5) { sprite = 0; } else { sprite++; } } we are
wrapping the whole block in if (posx % 13 === 0) { ... }. we use the modulo (%) operator (also known as the remainder operator) to check whether the posx value can be exactly divided by 13 with no remainder. if so, we move on to the next sprite by incrementing sprite (
wrapping to 0 after we're done with sprite #5). this effectively means that we are only updating the sprite on every 13th frame, or r...
...d line appends the <canvas> element created by the renderer to the document's <body>. now anything the renderer draws will be displayed in our window. next, we want to create the cube we'll display on the canvas. ...
...canvas> element created by the renderer to the document's <body>. now anything the renderer draws will be displayed in our window. next, we want to create the cube we'll display on the canvas. ...
...And 3 more matches
Mozilla DOM Hacking Guide
cript, 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 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 |doc...
...turns a non-refcounted nsiclassinfo pointer to an instance of the helper class corresponding to the data passed in. the implementation is detailed in section 1.6. static void shutdown(): releases the interface pointers. static nsiclassinfo* docreate(nsdomclassinfodata* adata): inline function that returns a nsiclassinfo pointer to a new instance of the nsdomclassinfo class. static nsresult
wrapnative(...): xpconnect fu, not our problem. static nsresult throwjsexception(jscontext *cx, nsresult aresult);: help me! static nsresult initdomjsclass(jscontext *cx, jsobject *obj);: help me! static jsclass sdomjsclass;: help me! protected section: const nsdomclassinfodata* mdata;: help me! static nsresult init(): called only once, it is used to initialize the remaining members of ...
...etting it. if (str == slocation_id) { // setting the location property. nscomptr<nsidomwindow> window(do_queryinterface(native)); ns_ensure_true(window, ns_error_unexpected); nscomptr<nsidomlocation> location; rv = window->getlocation(getter_addrefs(location)); ns_ensure_success(rv, rv); // use the dom to get the location object of the window object. jsval v; rv =
wrapnative(cx, obj, location, ns_get_iid(nsidomlocation), &v); // this xpconnect method creates a
wrapper for the location object on the // window object. ns_ensure_success(rv, rv); if (!::js_defineucproperty(cx, obj, ::js_getstringchars(str), ::js_getstringlength(str), v, nsnull, nsnull, 0)) { return ns_error_failure; } ...
...And 3 more matches
Cryptography functions
lot mxr 3.11 and later pk11_getalltokens mxr 3.2 and later pk11_getallslotsforcert mxr 3.12 and later pk11_getbestkeylength mxr 3.2 and later pk11_getbestslot mxr 3.2 and later pk11_getbestslotmultiple mxr 3.2 and later pk11_getbest
wrapmechanism mxr 3.2 and later pk11_getblocksize mxr 3.2 and later pk11_getcertfromprivatekey mxr 3.9.3 and later pk11_getcurrent
wrapindex mxr 3.2 and later pk11_getdefaultarray mxr 3.8 and later pk11_getdefaultflags mxr 3.8 and later ...
...k11_getsymkeynickname mxr 3.4 and later pk11_getsymkeytype 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_get
wrapkey mxr 3.2 and later pk11_hashbuf mxr 3.2 and later pk11_hasrootcerts mxr 3.4 and later pk11_importcert mxr 3.5 and later pk11_importcertforkeytoslot mxr 3.2 and later pk11_importcrl mxr 3.6 and later pk11_importdercert mxr ...
...henticationpath mxr 3.4 and later pk11_pubdecryptraw mxr 3.2 and later pk11_pubderive mxr 3.2 and later pk11_pubderivewithkdf mxr 3.9 and later pk11_pubencryptpkcs1 mxr 3.9.3 and later pk11_pubencryptraw mxr 3.2 and later pk11_pubun
wrapsymkey mxr 3.2 and later pk11_pubun
wrapsymkeywithflags mxr 3.6 and later pk11_pubun
wrapsymkeywithflagsperm mxr 3.9 and later pk11_pub
wrapsymkey mxr 3.2 and later pk11_randomupdate mxr 3.2 and later pk11_readrawattribute mxr 3.9.2 and later ...
...And 3 more matches
PKCS11 FAQ
tion? will nss potentially open more than one session at a time? read-only sessions, read/write sessions, serial, parallel? nss typically holds one session read-only session per slot, in which some of the non-multipart functions are handled. multipart functions, such as bulk encryption, hashing, and mac functions (for example, c_digest and c_sign) and those that require overlapped operation (c_un
wrap, c_decrypt) are handled by creating new sessions. if no new sessions are available, the one read-only session is used, and the state is saved and restored after each multipart operation. nss never uses parallel mode. nss opens new read/write sessions for key generation, some password management, and storage of new certificates. if your token is read/write and has only one session, nss will ope...
... the services nss calls to get to other pkcs #11 modules, which show up separately under cryptographic modules. our plugin provides several slots with different capabilities. for example, one does all the hashing/symmetric operations, while another does only asymmetric rsa operations. can this kind of division lead to problems? the only issue is dealing with keys. for example, if the rsa slot un
wraps a key, nss needs to move that key to a slot that can do the symmetric operations. nss itself uses two tokens internally--one that provides generic cryptographic services without authentication, and one that provides operations based on the keys stored in the user's database and do need authentication. nss does this to avoid having to prompt for a password when performing an rsa verify operation,...
...nss needs to do anything with a private key, it calls the pcks #11 module that holds the key. if a pkcs #11 library reports that, for example, it does not support rsa signing operations, does nss expect to be able to pull an rsa private key off the token using the c_getattributevalue call and then do the operation in software? no. nss will never try to pull private keys out of tokens (except as
wrapped objects for pkcs #12). operations the token does not support are considered impossible for the key to support. nss may try to pull and load symmetric keys, usually if the key exchange happens in a token that does not support the symmetric algorithm. nss works very hard not to have to pull any key out of a token (since that operation does not always work on all tokens). if so, by what means d...
...And 3 more matches
JSFunctionSpec
nargs uint16_t the value used for function.length. ...
... nargs uint16_t the value used for function.length. ...
... nargs uint16_t the value used for function.length. ...
...And 3 more matches
JSPropertySpec
defines a single property for an object. ...
... defines a single property for an object. ...
... defines a single property for an object. ...
...And 3 more matches
nsISecurityCheckedComponent
"noaccess" unconditionally allow or deny access to the operation. all code has the "allaccess" capability, and no code has the "noaccess" capability. this interface is used in mozilla by xpconnect and a handful of things that need special handing (xul controllers, the ui for the <video> tag, etc.). method overview string cancallmethod(in nsiidptr iid, in wstring methodname); string cancreate
wrapper(in nsiidptr iid); string cangetproperty(in nsiidptr iid, in wstring propertyname); string cansetproperty(in nsiidptr iid, in wstring propertyname); methods cancallmethod() returns a capability string indicating what permissions are required to call the specified method on the given interface. string cancallmethod( in nsiidptr iid, in wstring methodname ); parameters iid the iid of...
...ing indicating what permissions are required to call the specified method on the given interface. string cancallmethod( in nsiidptr iid, in wstring methodname ); parameters iid the iid of the interface this method exists on. methodname the name of the method to be called on the interface. return value the capability required to call this method. see capability strings for details. ...
... given interface. string cancallmethod( in nsiidptr iid, in wstring methodname ); parameters iid the iid of the interface this method exists on. methodname the name of the method to be called on the interface. return value the capability required to call this method. see capability strings for details. cancreate
wrapper() returns a string indicating what permissions are required to create a
wrapper for the given interface. ...
...And 3 more matches
CryptoKey - Web APIs
the cryptokey interface of the web crypto api represents a cryptographic key obtained from one of the subtlecrypto methods generatekey(), derivekey(), importkey(), or un
wrapkey(). for security reasons, the cryptokey interface can only be used in a secure context. properties cryptokey.type string which may take one of the following values: "secret": this key is a secret key for use with a symmetric algorithm. "private": this key is the private half of an asymmetric algorithm's cryptokeypair. "public": this key is the public half of an asymmetric algorithm's cryptokeypair. cryptokey.extractable boolean indicating whether or not the key may be extracted using subtlecrypto.exportkey() or subtlecrypto.
wrapkey(). true: the key may be extracted. false the ke...
...ate": this key is the private half of an asymmetric algorithm's cryptokeypair. "public": this key is the public half of an asymmetric algorithm's cryptokeypair. cryptokey.extractable boolean indicating whether or not the key may be extracted using subtlecrypto.exportkey() or subtlecrypto.
wrapkey(). true: the key may be extracted. false the key may not be extracted. exportkey() or
wrapkey() will throw an exception if used to extract this key. cryptokey.algorithm an object describing the algorithm for which this key can be used and any associated extra parameters. aeskeygenparams if the algorithm is any of the aes variants. rsahashedkeygenparams if the algorithm is any of the rsa variants. eckeygenparams if the algorithm is any of the ec variants. hmackeygenpa...
... what can be done with the key. possible values for array elements are: "encrypt": the key may be used to encrypt messages. "decrypt": the key may be used to decrypt messages. "sign": the key may be used to sign messages. "verify": the key may be used to verify signatures. "derivekey": the key may be used in deriving a new key. "derivebits": the key may be used in deriving bits. ...
...And 3 more matches
WebGL constants - Web APIs
1 passed to getparameter to get the value the stencil will be cleared to. stencil_func 0x0b92 passed to getparameter to get the current stencil function. returns never, always, less, equal, lequal, greater, gequal, or notequal. stencil_fail 0x0b94 passed to getparameter to get the current stencil fail function. should return keep, replace, incr, decr, invert, incr_
wrap, or decr_
wrap. stencil_pass_depth_fail 0x0b95 passed to getparameter to get the current stencil fail function should the depth buffer test fail. should return keep, replace, incr, decr, invert, incr_
wrap, or decr_
wrap. stencil_pass_depth_pass 0x0b96 passed to getparameter to get the current stencil fail function should the depth buffer test pass. should return keep, ...
... stencil_ref 0x0b97 passed to getparameter to get the reference value used for stencil tests. ...
... stencil_ref 0x0b97 passed to getparameter to get the reference value used for stencil tests. ...
...And 3 more matches
Using textures in WebGL - Web APIs
e); // 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 (ispowerof2(image.width) && ispowerof2(image.height)) { // yes, it's a power of 2. generate mips. gl.generatemipmap(gl.texture_2d); } else { // no, it's not a power of 2. ...
...s non power of 2 images so check if the image is a // power of 2 in both dimensions. if (ispowerof2(image.width) && ispowerof2(image.height)) { // yes, it's a power of 2. generate mips. gl.generatemipmap(gl.texture_2d); } else { // no, it's not a power of 2. ...
...dimensions. if (ispowerof2(image.width) && ispowerof2(image.height)) { // yes, it's a power of 2. generate mips. gl.generatemipmap(gl.texture_2d); } else { // no, it's not a power of 2. turn off mips and set //
wrapping to clamp to edge gl.texparameteri(gl.texture_2d, gl.texture_
wrap_s, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_
wrap_t, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); } }; image.src = url; return texture; } function ispowerof2(value) { return (value & (value - 1)) == 0; } the loadtexture() routine starts by creating a webgl texture object texture by calling the webgl createtexture() function. it then uploads a single blue pixel using teximage2d(). th...
...And 3 more matches
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this article provides a set of mixins for those who want to mess around with flexbox using the native support of current browsers. this set uses: fallbacks using 2009 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit browsers without flex
wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers. instead, you will...
... -webkit-flex-wr...
...ion: reverse; -moz-box-orient: vertical; } @else { -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; } -webkit-flex-direction: $value; -ms-flex-direction: $value; flex-direction: $value; } // shorter version: @mixin flex-dir($args...) { @include flex-direction($args...); } flexbox
wrap the flex-
wrap property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in. values: no
wrap (default) |
wrap |
wrap-reverse spec: https://drafts.csswg.org/css-flexbox/#flex-
wrap-property @mixin flex-
wrap($value: no
wrap) { // no webkit/ff box fallback. -webkit-flex-
wrap: $value; @...
...And 3 more matches
clear - CSS: Cascading Style Sheets
hat the element is moved down to clear floats on end side of its containing block, that is the right floats on ltr scripts and the left floats on rtl scripts. ...
...| left | right | both | inline-start | inline-end examples clear: left html <div class="
wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. ...
...p> <p class="left">this paragraph clears left.</p> </div> css .
wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: right html <div class="
wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. ...
...And 3 more matches
line-break - CSS: Cascading Style Sheets
ne-break: inherit; line-break: initial; line-break: unset; syntax values auto break text using the default line break rule. loose break text using the least restrictive line break rule. typically used for short lines, such as in newspapers. normal break text using the most common line break rule. strict break text using the most stringent line break rule. anywhere there is a soft
wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the gl, wj, or zwj character class or mandated by the word-break property. the different
wrapping opportunities must not be prioritized. hyphenation is not ap...
...introduced by characters with the gl, wj, or zwj character class or mandated by the word-break property. the different
wrapping opportunities must not be prioritized. hyphenation is not applied. formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | loose | normal | strict | anywhere examples setting text
wrapping see whether the text is
wrapped before "々", "ぁ" and "。". ...
... different
wrapping opportunities must not be prioritized. hyphenation is not applied. formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | loose | normal | strict | anywhere examples setting text
wrapping see whether the text is
wrapped before "々", "ぁ" and "。". ...
...And 3 more matches
The Box Model - Archive of obsolete content
ish strings. you should avoid using long blocks text, and also avoid designing your ui so that everything fits just right around text. you should always keep in mind that the text can be much longer, and your ui should adapt to it. labels should generally be short, and they should always be displayed in a single line. descriptions may be longer, and in general you should plan it so that they can
wrap into multiple lines. in order to have
wrapping descriptions, you need to set the text as a child node instead of using the value attribute: <description>&xulschoolhello.description.label;</description> even then, the text will extend as much as it can in a single line, so you need to add some css limits in order to make it
wrap inside a xul dialog or window. you can use the css property wid...
...tions, you need to set the text as a child node instead of using the value attribute: <description>&xulschoolhello.description.label;</description> even then, the text will extend as much as it can in a single line, so you need to add some css limits in order to make it
wrap inside a xul dialog or window. you can use the css property width to restrict the width of the description so that it
wraps as you need it to. never cut text lines into separate locale strings in order to bypass
wrapping difficulties. ...
...one way to work around this is using a textbox element instead. ...
...And 2 more matches
JavaScript Client API - Archive of obsolete content
ould live in a js module. first off we're going to import the files mentioned above at the top the file. we're also going to import ''util.js'' as it contains many useful helpers. const cu = components.utils; cu.import("resource://services-sync/engines.js"); cu.import("resource://services-sync/record.js"); cu.import("resource://services-sync/util.js"); the record object the record object is a
wrapper around a single instance of whatever data it is that you are syncing -- a single bookmark, history url, password or form data entry. for some sync engines, it makes sense to bundle all data into one record. the tabs and preferences engines work that way. for other engines, it makes sense to have multiple records per sync. it all depends on the data model. if in doubt, consult the sync develope...
...l data into one record. the tabs and preferences engines work that way. for other engines, it makes sense to have multiple records per sync. it all depends on the data model. if in doubt, consult the sync developers. the base record objects are defined in services/sync/modules/record.js. there's a base record object, which defines the basic record api. but, you want to use a derived class, crypto
wrapper, which seamlessly encrypts and decrypts records on the client. this makes your synchronized data more secure and unreadable by the server operators. all you have to do is write an object that extends crypto
wrapper and maintains a property called cleartext. cleartext must be a json-able object. put into it all values that you want to have encrypted, stored on the server, decrypted, and synced u...
...o
wrapper and maintains a property called cleartext. cleartext 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. ...
...And 2 more matches
JavaScript crypto - Archive of obsolete content
es() function loads certificates into the nss database or smartcard if the corresponding key is found there. the popchallengeresponse() function is not implemented. ...
... enrollment form user action initiates script script calls key generation method (generatecrmfrequest) signing and encryption keys are generated encryption private key is
wrapped with public key of key recovery authority (kra) (passed in in the form of a certificate as part of the script, and checked against a pre-installed certificate copy in the local certificate database) the public keys,
wrapped encryption private key, and text string from the script (possibly containing naming or enrollment info) are signed by the user signed blob is returned to the script script submits 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 bac...
... you want your token to supply the default implementation for these functions. normally mozilla uses its own internal module to supply these functions. these flags override that preference. ...
...And 2 more matches
Venkman Internals - Archive of obsolete content
cts variables. things like msg.alert define variables msg_alert. venkman-utils.js defines the dd debug dump and friends windowrecord representation of the open windows. filecontainerrecord - list of script tags found in the parent record's window.document property. to obtain the antecedent files: doc.getelementsbytagname("script"); then extract the urls from the src attributes. script
wrapper newsgroup, 2002, rgrinda here is a bit more information about how venkman tracks files and functions... a script
wrapper is a pure js object defined only inside venkman. as you pointed out, there is a 1:1 relationship between script
wrappers and functions. script
wrapper has-a jsdscript property, which is an object which supports the jsdiscript interface. jsdiscript is a lower level access to th...
...nda here is a bit more information about how venkman tracks files and functions... a script
wrapper is a pure js object defined only inside venkman. as you pointed out, there is a 1:1 relationship between script
wrappers and functions. script
wrapper has-a jsdscript property, which is an object which supports the jsdiscript interface. jsdiscript is a lower level access to the function than the script
wrapper. in order to set a breakpoint in a particular function, you'll want to call script
wrapper.setbreakpoint(pc[, parentbp]); where |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 mig...
...n 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 prototype for this object at http://lxr.mozilla.org/mozilla/sourc...ebugger.js#914 script
wrapper.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 in an array located at script
wrapper.scriptinstance.sourcetext.lines. this array is 0...
...And 2 more matches
description - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a block of text. the text can be set either with the value attribute or 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. ...
... 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 accessibletype, 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. ...
... attributes crop, disabled, tabindex value properties accessibletype, 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. ...
...And 2 more matches
Flexbox - Learn web development
adding the following declaration to your <section> rule: flex-direction: column; you'll see that this puts the items back in a column layout, much like they were before we added any css. before you move on, delete this declaration from your example. note: you can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. ...
... this declaration from your example. note: you can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. experiment with these values too! ...
...lexbox children will overflow their container, breaking the layout. have a look at our flexbox-
wrap0.html example, and try viewing it live (take a local copy of this file now if you want to follow along with this example): here we see that the children are indeed breaking out of their container. one way in which you can fix this is to add the following declaration to your <section> rule: flex-
wrap:
wrap; also, add the following declaration to your <article> rule: flex: 200px; try this now; you'll see that the layout looks much better with this included: we now have multiple rows — as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. the flex: 200px declaration set on the articles means that each will be at least 200px wide...
...And 2 more matches
Positioning - Learn web development
d height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
...d height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
...ode> element, not the <code><html></code> element!</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
...And 2 more matches
DMD
build with these options: ac_add_options --enable-dmd prep in order to prepare your device for running fennec with dmd enabled, you will need to do a few things. first, you will need to push the libdmd.so library to the device so that it can by dynamically loaded by fennec. you can do this by running: adb push $objdir/dist/bin/libdmd.so /sdcard/ second, you will need to make an executable
wrapper for fennec which sets an environment variable before launching it. (if you are familiar with the recommended "--es env0" method for setting environment variables when launching fennec, note that you cannot use this method here because those are processed too late in the startup process. if you are not familiar with that method, you can ignore this parenthetical note.) first make the executable...
...er for fennec which sets an environment variable before launching it. (if you are familiar with the recommended "--es env0" method for setting environment variables when launching fennec, note that you cannot use this method here because those are processed too late in the startup process. if you are not familiar with that method, you can ignore this parenthetical note.) first make the executable
wrapper on your host machine using the editor of your choice. name the file dmd_fennec and enter this as the contents: #!/system/bin/sh export moz_replace_malloc_lib=/sdcard/libdmd.so exec "$@" if you want to use other dmd options, you can enter additional environment variables above. you will need to push this to the device and make it executable. since you cannot mark files in /sdcard/ as executa...
...@" if you want to use other dmd options, you can enter additional environment variables above. you will need to push this to the device and make it executable. since you cannot mark files in /sdcard/ as executable, we will use /data/local/tmp for this purpose: adb push dmd_fennec /data/local/tmp adb shell cd /data/local/tmp chmod 755 dmd_fennec the final step is to make android use the above
wrapper script while launching fennec, so that the environment variable is present when fennec starts up. assuming you have done a local build, the app identifier will be org.mozilla.fennec_$username ($username is your username on the host machine) and so we do this as shown below. if you are using a dmd-enabled try build, or build from other source, adjust the app identifier as necessary. adb shell ...
...And 2 more matches
Index
ndle for the programmer to use. once the application is done with a handle, it should be released, allowing nss to free the associated resources. when working with handles to private keys it's usually difficult (and undesired) that an application gets access to the raw key data; therefore it may be difficult to extract such data from nss. the usual minimum requirement is that private keys must be
wrapped using a protective layer (such as password-based encryption). the intention is to make it easier to review code for security. the less code that has access to raw secret keys, the less code that must be reviewed. nss has only limited functionality to look up raw keys. the preferred approach is to use certificates, and to look up certificates by properties such as the contained subject name ...
...will analyze the asn.1 data stream accordingly. the templates are usually closely aligned to definitions found in rfc documents. a data block described as der is usually in asn.1 format. you must know which data you are expecting, and use the correct template for parsing, based on the context of your software's interaction. data described as pem is a base64 encoded presentation of der, usually
wrapped between human readable begin/end lines. nss prefers the binary presentation, but is often capable to use base64 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. look...
...le the collection of sample code here demonstrates how nss can be used for cryptographic operations, certificate handling, ssl, etc. it also demonstrates some best practices in the application of cryptography. 170 enc dec mac output public key as csr generates encryption/mac keys and outputs public key as certificate signing request 171 enc dec mac using key
wrap certreq pkcs10 csr generates encryption/mac keys and outputs public key as pkcs11 certificate signing request 172 encdecmac using token object - sample 3 encdecmac, html, ncc, ncc article, web, web development no summary! 173 encrypt decrypt_mac_using token generates encryption/mac keys and uses token for storing. 174 hashing - samp...
...And 2 more matches
GCIntegration - SpiderMonkey Redirect 1
and compacting) is under way, but only in the javascript shell so far. we're still thinking about how the apis for moving gc should work. overview before digging too deep, here are some quick rules of thumb for how to write code that will work smoothly with the gc regardless of changes that happen in the future. avoid having c++ objects that point to js objects (unless it's just to their own
wrapper--that's okay). it's safe for js objects to point to other js objects or to c++ objects. if there is a choice between storing a gc thing inside a c++ object or its js corresponding representation, prefer to store it in the js representation. never store gc things in a jsobject's private pointer (i.e., via js_setprivate()). it's better to store them in reserved slots, since those will automatic...
...ivate pointer (i.e., via js_setprivate()). it's better to store them in reserved slots, since those will automatically be traced if the object is native. as much as possible, avoid trace hooks. if objects are structured as described above, there should be no need for them. this should be obvious by now, but never ever allow a gc thing point to a gc thing in a different compartment unless it's a
wrapper that's registered in the cross-compartment
wrapper map. now, on to the details... gc/cc interaction <to be done later.> incremental gc incremental gc divides gc marking into time slices. in between these slices, non-gc code is allowed to run. done naively, this technique can lead to reachable object not being marked. consider the following example. {{ svg{source: "http://people.mozilla.
...d. now let's assume, between the left and right frames, that some code has read the weak pointer to c and then created a regular (strong) reference from b to c. now c is reachable, but it won't be marked because b was already fully marked. no write barrier is invoked when creating the pointer from b to c because no pointer is being destroyed. as a concrete example of this, imagine that we call get
wrapper() on an ns
wrappercache instance. this will return a jsobject *. then this pointer is installed as a property on another jsobject that was already marked. the solution to this problem is to require a read barrier on every weak reference. whenever the weak pointer is read during incremental marking, we mark the object that it points to. in the example above, c would be marked when reading it ou...
...And 2 more matches
GC Rooting Guide
his: js::rootedobject localobj(cx, js_getobjectofsomesort(cx)); spidermonkey makes it easy to remember to use js::rooted<t> types instead of a raw pointer because all of the api methods that may gc take a js::handle<t>, as described below, and js::rooted<t> autoconverts to js::handle<t> but a bare pointer does not. js::handle<t> all gc thing pointers that are parameters to a function must be
wrapped in js::handle<t>. a js::handle<t> is a reference to a js::rooted<t>, and is created implicitly by referencing a js::rooted<t>: it is not valid to create a js::handle<t> manually (the whole point of a handle is that it only reference pointers that the gc knows about so it can update them when they move). like js::rooted<t>, a js::handle<t> can be used as if it were the underlying pointer. sinc...
...e js::handle<t> for all function parameters taking gc thing pointers (except out-parameters, which are described below). for example, instead of: jsobject * somefunction(jscontext *cx, jsobject* obj) { // ... } you should write: jsobject * somefunction(jscontext *cx, js::handleobject obj) { // ... } js::mutablehandle<t> all gc thing pointers that are used as out-parameters must be
wrapped in a js::mutablehandle<t>. a js::mutablehandle<t> is a reference to a js::rooted<t> that, unlike a normal handle, may modify the underlying js::rooted<t>. all js::mutablehandle<t>s are created through an explicit "&" - address of operator - on a js::rooted<t> instance. js::mutablehandle<t> is exactly like a js::handle<t> except that it adds a .set(t &t) method and must be created from a js::ro...
...&value); // ... } you should write: bool maybegetvalue(jscontext *cx, js::mutablehandlevalue valueout) { // ... if (!waserror) valueout.set(resultvalue); return waserror; } void otherfunction(jscontext *cx) { js::rootedvalue value(cx); bool success = maybegetvalue(cx, &value); // ... } return values it's ok to return raw pointers! these do not need to be
wrapped in any of rooting classes, but they should be immediately used to initialize a js::rooted<t> if there is any code that could gc before the end of the containing function; a raw pointer must never be stored on the stack during a gc. one rare but especially tricky case to watch out for is where an raii destructor could gc in a function that is returning a bare pointer. consider: jsobject* some...
...And 2 more matches
Index
they define which error to throw in case of a runtime error. jsexn_none marks an unthrowable error. 101 jsextendedclass jsapi reference, obsolete, spidermonkey to implement a custom class that uses any of the jsextendedclass callbacks: 102 jsextendedclass.outerobject jsapi reference, obsolete, spidermonkey see split objects. ...
...rmonkey to implement a custom class that uses any of the jsextendedclass callbacks: 102 jsextendedclass.outerobject jsapi reference, obsolete, spidermonkey see split objects. 103 jsextendedclass.
wrappedobject jsapi reference, obsolete, spidermonkey 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 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. 104 jsfun_bound_method jsapi reference, obsolete, spidermonkey ...
... allocated by the instance which wouldn't normally be cleaned up by the garbage collector (private data stored in the object by the application, file handles, etc.) 108 jsfreeop jsapi reference, reference, référence(2), spidermonkey various finalization api takes not jscontext * but rather either jsfreeop structure or its library-private counterpart freeop. these structures
wrap parameters that are passed to the finalizers removing most of explicit dependencies on jscontext in the finalization code. 109 jsfunction api, guide, jsapi, needscontent, spidermonkey jsfunction is a type in the jsapi. the apis js_newfunction, js_definefunction, js_compilefunction, and their unicode equivalents return values of type jsfunction *. 110 jsfunctionspec...
...And 2 more matches
Web Replay
ree: shared memory accesses which would otherwise race are either protected by locks or use apis that perform atomic operations. if we record and later replay the order in which threads acquire locks (and, by extension, release locks and use condvars) then accesses on lock-protected memory will occur in the same order. atomic variables can be handled by treating reads and writes as if they were
wrapped by a lock acquire/release during recording. it is not enough, however, to just record all these non-deterministic sources and reproduce those behaviors exactly in the replaying process. the ipc and debugger integration components may behave differently between recording and replaying, or between different replays. both of these involve inter-thread communication and calls to non-determinist...
...on it was held while recording. recording a recording content process differs from a normal content process in the following ways: calls to certain functions are intercepted by hooking them (rewriting the machine code at their entry points to call a different function with the same signature), including the function used to dispatch mach messages. when a call or message is intercepted, the
wrapped call/message is first performed normally and then it and its outputs are recorded in a data stream for the thread performing the call. during execution of the
wrapped call/message, recording of any inner calls is suppressed, so that they are performed normally without affecting the recording. the functions which are intercepted are generally at the system call and the system library level. ...
...de associated with the non-deterministic components, such as during gc or ion compilation, to help track down behaviors that should go unrecorded. replaying a replaying content process behaves in the same way as a recording process, except for the following: the calls and mach messages which were intercepted during recording are also intercepted here. when a call/message is intercepted, the
wrapped call/message is not performed, but rather the results of the call/message are read from the data stream and returned to the caller, emulating the behavior of the call/message. this requires the process to be deterministic enough that events play out in the same order on each thread between recording and replay. the data stream should have enough error checking in place that we can immediatel...
...And 2 more matches
How to build an XPCOM component in JavaScript
if not // pro...
... your profile directory. restart application. for firefox: copy helloworld.js, and helloworld.xpt (only if you defined and compiled the idl) to the {objdir}/dist/bin/components directory, if running from the source. delete compreg.dat and xpti.dat from the components directory. delete compreg.dat and xpti.dat from your profile directory. restart application. ...
...ory, if running from the source. delete compreg.dat and xpti.dat from the components directory. delete compreg.dat and xpti.dat from your profile directory. restart application. using your component using
wrappedjsobject if you only intend to access your component from javascript, i.e. ...
...And 2 more matches
XPCOM changes in Gecko 2.0
nsion manager and perform the necessary installing, uninstalling, and updating of any installed extensions. once that's done, the extensions can then be loaded by simply reading their manifests, loading their components, and continuing the startup process, all without having to restart the browser. electrolysis content processes can simply read the component registrations during startup. xpcnative
wrapper changes you can't disable xpcnative
wrappers from your manifest specifying xpcnative
wrappers=no in your manifest (that is, xpcnative
wrapper automation) is no longer supported. this was always intended to be a short-term workaround to allow extensions to continue to work while their authors updated their code to use xpcnative
wrappers. if your add-on depends upon xbl bindings attached to content ...
...if you need to be able to call functions or access properties defined by web content, you'll need to do this as well. ...
...if you need to be able to call functions or access properties defined by web content, you'll need to do this as well. ...
...And 2 more matches
Detailed XPCOM hashtable guide
le implementations: pldhash - low-level c api; stores keys and data in one large memory structure; uses the heap efficiently; client must declare an "entry class" and 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. ...
... 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. client writes their own entry class which can include complex key and data types. nsdatahashtable/nsinterfacehashtable/nsclasshashtable - high-level c++
wrappers around pldhash; simplifies the common usage pattern mapping a simple keytype to a simple datatype; client does not need to declare or manage an entry class; nsdatahashtable datatype is a scalar such as pruint32; nsinterfacehashtable datatype is an interface; nsclasshashtable datatype is a class pointer owned by the hashtable. which hashtable should i use? key type: i...
... nsstring> <nsisupportshashkey, nsstring> complex (structures, etc.) nsthashtable<...> pldhash the pldhash implementation is a fairly low-level implementation, written in c. it is extremely flexible, but requires some time to understand and use. a basic guide is included here, but you should read most of xpcom/glue/pldhash.h if you intend to use pldhash. the c++
wrappers for pldhash (see below) are often much easier and safer to use in c++ code, as many potential casting errors are easily avoided. you must declare an entry struct type, deriving from pldhashentryhdr. this entry struct should contain whatever data you wish to store in the hashtable (any pointer or fixed-length data type). note: because of the double-hashing implementation, entries may move in ...
...And 2 more matches
Components.utils.waiveXrays
when privileged javascript in gecko accesses objects belonging to less-privileged code (such as untrusted web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways. for example, privileged code using an xray to a dom object sees only the original, native version of the dom object. any expando properties are not visible, and if any native properties have been redefined, this has no effect. xray vision is designed to make most simple operations safe. ...
...s of that object (and their properties, and so on). if you waive xray vision, you can no longer trust that any of the object's properties are what you expect: any of them, including prototypes and accessors, could have been redefined by the less-privileged code. to undo waivexrays and get xray vision back, call components.utils.unwaivexrays on the object. the result of waivexrays is just like the
wrappedjsobject property for xrayed objects, but it's more useful because you can call it on primitives or objects that aren't xrays, in which case it just returns the argument you passed in. this means you don't have to care whether the initial object is an xray or not. syntax waived = components.utils.waivexrays(obj); parameters obj the object for which we wish to waive xrays. returns if ...
...e useful because you can call it on primitives or objects that aren't xrays, in which case it just returns the argument you passed in. this means you don't have to care whether the initial object is an xray or not. syntax waived = components.utils.waivexrays(obj); parameters obj the object for which we wish to waive xrays. returns if the argument obj is an xray, this function returns a
wrapper that transitively waives xray behavior on the underlying object and anything that comes off the object. if obj is not an xray, this function just returns obj. example suppose a page script adds an expando to its global window: // page script foo = "i'm an expando"; by default, chrome code won't see foo, because it sees the content window with xray vision, but the chrome code can waive xray p...
...And 2 more matches
nsIAuthModule
req_mutual_auth (1 << 0) client and ser...
... req_mutual_auth (1 << 0) client and server will be authenticated. req_delegate (1 << 1) the server is allowed to impersonate the client. the req_mutual_auth flag may also ...
...sername, in wstring apassword ); parameters aservicename the service name, which may be null if not applicable (for example, for ntlm, this parameter should be null). aserviceflags a bitwise-or of the req_ constants (pass req_default for default behavior). adomain the authentication domain, which may be null if not applicable. ausername the user's login name. apassword the user's password. un
wrap() this method is used to unpack, decrypt, and verify the checksums on data returned by a server when security layers are in use. void un
wrap( [const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength ); parameters aintoken a buffer containing the data received from the server. aintokenlength the length of the input token. aout...
...And 2 more matches
nsMsgNavigationType
efined as a global variable in thunderbird: var nsmsgviewcommandtype = components.interfaces.nsmsgviewcommandtype; 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 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 nsmsgviewcommandtype togglethreadkilled. firstunreadmessage 6 go to the first unread message in the view. nextunreadmessage 7 go to the next unread messag...
... lastunreadmessage 9 go to the last unread message in the view. ...
... lastunreadmessage 9 go to the last unread message in the view. ...
...And 2 more matches
Storage
arameters much easier: var statement = dbconn.createstatement("select * from table_name where id = :row_id"); statement.params.row_id = 1234; use :boundparametername the same way for numeric and non-numeric columns. do not put the :boundparametername within apostrophes, because that the binding mechanism does that for you. you can still use this helper object by manually creating the statement
wrapper, mozistoragestatement
wrapper, which is provided in gecko 1.9.1 and later. using named parameters in c++ is a lot more difficult, so it's generally accepted to use numerical placeholders instead. the example below uses mozistoragestatement.bindint32parameter(). the full list of binding functions can be found with the mozistoragestatement documentation. c++ example: nscomptr<mozistoragestatem...
...ou to enumerate all the results produced by the statement. as you step through each row, you can obtain each parameter by name through a helper object (mozistoragestatementrow) in javascript ( ) like so: while (statement.executestep()) { let value = statement.row.column_name; } you can create this helper object yourself if it's not available in your version of gecko. see mozistoragestatement
wrapper 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 ...
... interface or method is, so do not use them on different threads at the same time! if you want to use concurrency to work on your database, you should use the asynchronous apis provided by storage. see also mozistorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database. ...
...And 2 more matches
Debugger.Object - Firefox Developer Tools
nstance to store metadata about particular debuggee objects. javascript code in different compartments can have different views of the same object. for example, in firefox, code in privileged compartments sees content dom element objects without redefinitions or extensions made to that object's properties by content code. (in firefox terminology, privileged code sees the element through an "xray
wrapper".) to ensure that debugger code sees each object just as the debuggee would, each debugger.object instance presents its referent as it would be seen from a particular compartment. this "viewing compartment" is chosen to match the way the debugger came across the referent. as a consequence, a single debugger instance may actually have several debugger.object instances: one for each compartment ...
... whose handler object was allocated by debuggee code, its construction trap function—the function called when the function proxy is called via a new expression. if the referent is not a function proxy whose handler object was allocated by debuggee code, this is null. global a debugger.object instance referring to the global object in whose scope the referent was allocated. this does not un
wrap cross-compartment
wrappers: if the referent is a
wrapper, the result refers to the
wrapper's global, not the
wrapped object's global. the result refers to the global directly, not via a
wrapper. hostannotations a javascript object providing further metadata about the referent, or null if none is available. the metadata object is in the same compartment as this debugger.object instance. the ...
...properties are as given byproperties, as ifproperties were passed to debugger.object.prototype.defineproperties, with the new debugger.object instance as the this value. makedebuggeevalue(value) return the debuggee value that representsvalue in the debuggee. ifvalue is a primitive, we return it unchanged; ifvalue is an object, we return the debugger.object instance representing that object,
wrapped appropriately for use in this debugger.object's referent's compartment. note that, ifvalue is an object, it need not be one allocated in a debuggee global, nor even a debuggee compartment; it can be any object the debugger wishes to use as a debuggee value. as described above, each debugger.object instance presents its referent as viewed from a particular compartment. given a debugger.obje...
...And 2 more matches
CustomElementRegistry.define() - Web APIs
dow(). examples autonomous custom element the following code is taken from our popup-info-box-web-component example (see it live also). ...
...the following code is taken from our popup-info-box-web-component example (see it live also). ...
...om our popup-info-box-web-component example (see it live also). ...
...And 2 more matches
Timing element visibility with the Intersection Observer API - Web APIs
meouts for each individual ad, or other techniques that tend to slow the page down. using this api lets everything get streamlined by the browser to reduce the impact on performance substantially. let's get started! site structure: the html the site's structure is not too complicated. we'll be using css grid to style and lay out the site, so we can be pretty straightforward here: <div class="
wrapper"> <header> <h1>a fake blog</h1> <h2>showing intersection observer in action!</h2> </header> <aside> <nav> <ul> <li><a href="#link1">a link</a></li> <li><a href="#link2">another link</a></li> <li><a href="#link3">one more link</a></li> </ul> </nav> </aside> <main> </main> </div> this is the framework for the entire site. at the ...
... of the site defined, we turn to the styling for the site. let's look at the style for each component of the page individually. the basics we provide styles for the <body> and <main> elements to define the site's background as well as the grid the various parts of the site will be placed in. ...
...ans-serif; background-color: aliceblue; } .
wrapper { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr); max-width: 700px; margin: 0 auto; background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" as the background color. then the "
wrapper" class is defined; it
wraps the entire blog, including the header, sidebar, and body content (articles and ads). the
wrapper establishes a css grid with two columns and two rows. the first column (sized automatically based on its content) is used for the sidebar and the second column (which will be used for body content) is sized to be at least the width of the contents of the column and at m...
...And 2 more matches
Intersection Observer API - Web APIs
resholds every 10% of visibility (0%, 10%, 20%, etc.). the last box has thresholds each 25%. ...
...ple <template id="boxtemplate"> <div class="samplebox"> <div class="label topleft"></div> <div class="label topright"></div> <div class="label bottomleft"></div> <div class="label bottomright"></div> </div> </template> <main> <div class="contents"> <div class="
wrapper"> </div> </div> </main> .contents { position: absolute; width: 700px; height: 1725px; } .
wrapper { position: relative; top: 600px; } .samplebox { position: relative; left: 175px; width: 150px; background-color: rgb(245, 170, 140); border: 2px solid rgb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; ...
...the // first box's thresholds are set programmatically // since there will be so many of them (for each percentage // point). let thresholdsets = [ [], [0.5], [...
...And 2 more matches
SubtleCrypto - Web APIs
do-random bits derived from the master key and specific algorithm given as parameters. subtlecrypto.importkey() returns a promise that fulfills with a cryptokey corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters. subtlecrypto.exportkey() returns a promise that fulfills with a buffer containing the key in the requested format. ...
...cific algorithm given as parameters. subtlecrypto.importkey() returns a promise that fulfills with a cryptokey corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters. subtlecrypto.exportkey() returns a promise that fulfills with a buffer containing the key in the requested format. subtlecrypto.
wrapkey() returns a promise that fulfills with a
wrapped symmetric key for usage (transfer and storage) in insecure environments. the
wrapped key matches the format specified in the given parameters, and
wrapping is done by the given
wrapping key, using the specified algorithm. subtlecrypto.un
wrapkey() returns a promise that fulfills with a cryptokey corresponding to the
wrapped key given in the parameter. using subtlecrypto we can split the fu...
...de your app, you need to export the key, and that's what exportkey() is for. you can choose one of a number of export formats. the inverse of exportkey() is importkey(). you can import keys from other systems, and support for standard formats like pkcs #8 and json web key helps you do this. the exportkey() function exports the key in an unencrypted format. if the key is sensitive you should use
wrapkey(), which exports the key and then encrypts it using another key; the api calls a "key-
wrapping key". the inverse of
wrapkey() is un
wrapkey(), which decrypts then imports the key. storing keys cryptokey objects can be stored using the structured clone algorithm, meaning that you can store and retrieve them using standard web storage apis. the specification expects that most developers will u...
...And 2 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
nd then siblings, etc. every navigation function such as accnavigate(), get_accchild() and get_accparent() returns an iaccessible pointer. to create the root iaccessible for a window the first time it gets the wm_getobject message in, nswindow.cpp first generates an internal event called ns_getaccessible, which is handled in presshell::handleeventinternal() via the creation of an nsdocaccessible
wrap for an inner window or nsrootaccessible
wrap for a top level window. these classes implement both nsiaccessible, our cross platform api, as well as iaccessible, which is specific to windows/msaa/com. the cross-platform nsdocaccessible and nsrootaccessible classes they inherit from are then told to start listening for dom, page load and scroll events. these events cause msaa-specific events, such a...
... between the interfaces used in the two trees (iaccessible and isimpledomnode). if there is no msaa node for a dom node, paccessible->queryinterface(iid_iaccessible) will return null. a variety of implementations for iaccessible there are two main kinds of classes in mozilla's accessibility class hierarchy, platform-specifc and cross-platform. all of the platform-specific classes have the word "
wrap" appended to them. the
wrap classes contain implementations and interfaces specific to msaa or atk. these platform-specific classes inherit from cross-platform classes, where the most of the implementation is done. for example, nsaccessible
wrap inherits from nsaccessible. every accessible object in the msaa tree has an implementation dertived from nsaccessible, which exposes accessibility informa...
...hen 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 nsaccessible
wrap 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 each class is tailored to the specific abilities and properties of the html or xul/ui objects it applies to, and can support both msaa, atk and hopefully any future accessibility api's we need to support. for example nshtmlbuttonacce...
...And 2 more matches
Basic concepts of flexbox - CSS: Cascading Style Sheets
en creating a flex container all of the contained flex items will behave in the following way. items display in a row (the flex-direction property's default is row). the items start from the start edge of the main axis. the items do not stretch on the main dimension, but can shrink. the items will stretch to fill the size of the cross axis. the flex-basis property is set to auto. the flex-
wrap property is set to no
wrap. the result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. if there are more items than can fit in the container, they will not
wrap but will instead overflow. if some items are taller than others, all items will stretch along the cross axis to fill its full size. you can see in the live example belo...
...tart and end lines are switched. if we change flex-direction to column the main axis switches and our items now display in a column. set column-reverse and the start and end lines are again switched. the live example below has flex-direction set to row-reverse. try the other values — row, column and column-reverse — to see what happens to the content. multi-line flex containers with flex-
wrap while flexbox is a one dimensional model, it is possible to cause our flex items to
wrap onto multiple lines. in doing so, you should consider each line as a new flex container. any space distribution will happen across that line, without reference to the lines either side. to cause
wrapping behaviour add the property flex-
wrap with a value of
wrap. now, should your items be too large to all di...
...nsional model, it is possible to cause our flex items to
wrap onto multiple lines. in doing so, you should consider each line as a new flex container. any space distribution will happen across that line, without reference to the lines either side. to cause
wrapping behaviour add the property flex-
wrap with a value of
wrap. now, should your items be too large to all display in one line, they will
wrap onto another line. the live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. as flex-
wrap is set to
wrap, the items
wrap. ...
...And 2 more matches
Overview of CSS Shapes - CSS: Cascading Style Sheets
the css shapes level 1 specification describes geometric shapes in css. they are, in level 1 of the specification, designed to be applied to floated items. this article provides an overview of what you can do with shapes. you could for example float an item left, which would cause the text to
wrap round the right and bottom of the item in a rectangular fashion. if you then apply a circle shape, the text would then
wrap round the line of the circle. there are a number of ways to create these shapes and in these guides we will find out how css shapes work, and consider some ways you might like to use them. what does the specification define? the specification defines three new properties: shape-outside — allows definition of basic shapes shape-image-threshold — sets an opacity thres...
...you do not have shapes support in the browser, the user will see content flowing around the sides of a rectangular box as before. if they do have shapes support then the visual display is enhanced. basic shapes the value circle(50%) is an example of a basic shape. the specification defines four <basic-shape> values, which are: inset() circle() ellipse() polygon() using the value inset()
wraps text around a rectangular shape however you are able to add offset values, thus pulling the line boxes of any
wrapping content closer to the object than would otherwise happen. we have already seen how circle() creates a circular shape. an ellipse() is essentially a squashed circle. if none of these simple shapes do the trick you can create a polygon() and make the shape as complex as you want.
... content-box margin-box in the example below you can change the value border-box to any of the other allowed values to see how the shape moves closer or further away from the box. to explore the box values in more detail see our guide covering shapes from box values. shapes from images an interesting way to generate your path is to use an image with an alpha channel — the text will then
wrap around the non-transparent parts of the image. this allows the overlay of
wrapped content around an image, or the use of an image which is never displayed on the page purely as a method of creating a complex shape without needing to carefully map a polygon. note that images used in this way must be cors compatible, otherwise shape-outside will act as if none had been given as the value, and you ...
...And 2 more matches
flex-flow - CSS: Cascading Style Sheets
the flex-flow css shorthand property specifies the direction of a flex container, as well as its
wrapping behavior. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ction of a flex container, as well as its
wrapping behavior. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: flex-direction flex-
wrap syntax /* flex-flow: <'flex-direction'> */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* flex-flow: <'flex-
wrap'> */ flex-flow: no
wrap; flex-flow:
wrap; flex-flow:
wrap-reverse; /* flex-flow: <'flex-direction'> and <'flex-
wrap'> */ flex-flow: row no
wrap; flex-flow: column
wrap; flex-flow: column-reverse
wrap-reverse; /* global values */ flex-flow: inherit; flex-flow: initial; flex-flow: unset; values see flex-direction and flex-
wrap for details on the values. formal definition initial valueas each o...
...And 2 more matches
String - JavaScript
d strings returned from string calls in a non-constructor context (that is, called without using the new keyword) are primitive strings. javascript automatically converts primitives to string objects, so that it's possible to use string object methods for primitive strings. in contexts where a method is to be invoked on a primitive string or a property lookup occurs, javascript will automatically
wrap the string primitive and call the method or perform the property lookup. let s_prim = 'foo' let s_obj = 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 object...
...xxxx is 1–6 hex digits; range of 0x0–0x10ffff) utf-32 code unit / unicode code point between u+0000 and u+10ffff \xxx (where xx is 2 hex digits; range of 0x00–0xff) iso-8859-1 character / unicode code point between u+0000 and u+00ff long literal strings sometimes, your code will include strings which are very long. ...
...make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. ...
...And 2 more matches
Using shadow DOM - Web Components
, which defines all the functionality the element will have when an instance of it is instantiated. ...
...element will have when an instance of it is instantiated. ...
...nce of it is instantiated. ...
...And 2 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
u can read more about event delegation here. it is important to note, however, that this method can have severe performance implications for certain events, namely mouseover, mouseout, and friends, which are fired very often while the mouse is moving. ...
...friends, which are fired very often while the mouse is moving. monkey patching in many instances, especially when dealing with chrome code, the best way to modify actions which result in dom mutations is by
wrapping the functions that trigger those changes. ...
... let res = originaldoawesomedomstuff.apply(this, arguments); doawesomerdomstuff(res, arguments); return res; }; } now, whenever doawesomedomstuff() is called, the original function will be called, followed by your own doawesomerdomstuff() function, which can then further modify the dom as needed. variations on this method include modifying the arguments passed to the
wrapped function, modifying its return value, and making changes both before and after the original method is called. this scheme is highly flexible and can be made to work under most circumstances. css animation events this technique, which works on firefox 5+, has some particular advantages. because it is based on css, it can be keyed to match new elements of any arbitrary css selector. and becaus...
...tructor has run. this is most easily done by adding a :not clause to the css selector that attaches your binding. for instance, when using the selector div:not([foo-binding-done]), you can detach your binding by running this.setattribute("foo-binding-done", true) in your constructor. monkey patching dom methods when you are interested in changes to particular nodes, sometimes the best way is to
wrap the dom methods of those elements, as in the monkey patching section above. for instance, if you need to know about attribute changes to a particular node, then you should replace its setattribute method with a function that calls the original setattribute function as originalsetattribute.apply(this, arguments) before running your necessary event code. ...
jspage - Archive of obsolete content
;};object.reset=function(a,c){if(c==null){for(var e in a){object.reset(a,e); }return a;}delete a[c];switch($type(a[c])){case"object":var d=function(){};d.prototype=a[c];var b=new d;a[c]=object.reset(b);break;case"array":a[c]=$unlink(a[c]); break;}return a;};new native({name:"class",initialize:class}).extend({instantiate:function(b){b._prototyping=true;var a=new b;delete b._prototyping;return a; },
wrap:function(a,b,c){if(c._origin){c=c._origin;}return function(){if(c._protected&&this._current==null){throw new error('the method "'+b+'" cannot be called.'); }var e=this.caller,f=this._current;this.caller=f;this._current=arguments.callee;var d=c.apply(this,arguments);this._current=f;this.caller=e;return d;}.extend({_owner:a,_origin:c,_name:b}); }});class.implement({implement:function(a,d){if($type(...
...llee;var d=c.apply(this,arguments);this._current=f;this.caller=e;return d;}.extend({_owner:a,_origin:c,_name:b}); }});class.implement({implement:function(a,d){if($type(a)=="object"){for(var e in a){this.implement(e,a[e]);}return this;}var f=class.mutators[a];if(f){d=f.call(this,d); if(d==null){return this;}}var c=this.prototype;switch($type(d)){case"function":if(d._hidden){return this;}c[a]=class.
wrap(this,a,d);break;case"object":var b=c[a]; if($type(b)=="object"){$mixin(b,d);}else{c[a]=$unlink(d);}break;case"array":c[a]=$unlink(d);break;default:c[a]=d;}return this;}});class.mutators={extends:function(a){this.parent=a; this.prototype=class.instantiate(a);this.implement("parent",function(){var b=this.caller._name,c=this.caller._owner.parent.prototype[b];if(!c){throw new error('the method "'+b+'...
...ar o=n[s||l];var q=[];while(o){if(o.nodetype==1&&(!m||element.match(o,m))){if(!p){return document.id(o,r); }q.push(o);}o=o[l];}return(p)?new elements(q,{ddup:false,cash:!r}):null;};var e={html:"innerhtml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","no
wrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.paren...
...n(l){l=document.id(l,true);if(l){this.appendchild(l);}},this);return this;},appendtext:function(m,l){return this.grab(this.getdocument().newtextnode(m),l); },grab:function(m,l){a[l||"bottom"](document.id(m,true),this);return this;},inject:function(m,l){a[l||"bottom"](this,document.id(m,true));return this;},replaces:function(l){l=document.id(l,true); l.parentnode.replacechild(this,l);return this;},
wraps:function(m,l){m=document.id(m,true);return this.replaces(m).grab(m,l);},getprevious:function(l,m){return j(this,"previoussibling",null,l,false,m); },getallprevious:function(l,m){return j(this,"previoussibling",null,l,true,m);},getnext:function(l,m){return j(this,"nextsibling",null,l,false,m);},getallnext:function(l,m){return j(this,"nextsibling",null,l,true,m); },getfirst:function(l,m){return j(...
Index - Archive of obsolete content
developers have been doing this for some time, but th...
...developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in des...
...owserfind xul properties, xul reference no summary! 883 webnavigation needshelp, xul properties, xul reference no summary! 884 webprogress xul properties, xul reference no summary! 885 width xul properties, xul reference no summary! 886 wizardpages xul properties, xul reference no summary! 887
wraparound xul properties, xul reference no summary! 888 year xul properties, xul reference no summary! 889 yearleadingzero xul properties, xul reference no summary! 890 providing command-line options add-ons, command line, extensions, guide, xulrunner extensions and xul applications can modify the way command line parameters are...
...tribute determines which child is displayed. 1114 description xul elements, xul reference this element is used to create a block of text. the text can be set either with the value attribute or 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. 1115 dialog xul elements, xul reference this element should be used in place of the window element for dialog boxes. the buttons attribute may be used to set which buttons should appear in the dialog box. these buttons will be placed in the correct locations for the user's platform. 1116...
Manifest Files - Archive of obsolete content
owser/content/. the final field is the path where the files are located. this can be either a local file path using a file url or a jar archive using a jar url, which will be described in a moment. you can specify multiple packages by including another line in the manifest file. ...
... this can be either a local file path using a file url or a jar archive using a jar url, which will be described in a moment. you can specify multiple packages by including another line in the manifest file. the browser.manifest file used by firefox looks like this: content branding jar:browser.jar!/content/branding/ xpcnative
wrappers=yes content browser jar:browser.jar!/content/browser/ xpcnative
wrappers=yes overlay chrome://global/content/viewsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://global/content/viewpartialsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul two packages are listed here, 'branding' and 'browser'. three overlays are also specified, which allow co...
...chive. for the 'tests' package created above, the files are not packaged into an archive, so a direct file path is used instead. this is good for development since you don't have to package up all the files every time you change them. however, when distributing an application or extension, you will want to package them into an archive to avoid having to install lots of smaller files. the xpcnative
wrappers=yes part at the end of the manifest line is a flag that may optionally be used. in javascript, it is possible for a web page to override built-in functions with their own code. if the xpcnative
wrappers flag is specified, it indicates that scripts running in a privileged context don't call these overridden versions, but the original built-in versions instead. otherwise, if an extension attempt...
...iginal built-in versions instead. otherwise, if an extension attempted to call the modified versions, it would likely not work properly, or worse, create a security hole. this flag was added to prevent this problem and should always be used for newer extensions, but is left out for older extensions that might not be compatible with the change. for more information about this feature, see xpcnative
wrapper. themes and locales the themes and locales, the syntax is similar as for content packages, but you also need to specify the content package you are providing a theme or locale for. for example: skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/ locale browser en-us jar:en-us.jar!/locale/browser/ for these, the extra field has been added to indicate that the skin and locale applie...
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
be created in the implicit grid. the implicit grid is the grid created automatically due to content being added outside of the tracks defined. in the example below i have created an explicit grid of three columns and two rows. the third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks. ...
...being added outside of the tracks defined. in the example below i have created an explicit grid of three columns and two rows. the third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks. ...
...he grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks. ...
...cks. ...
Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
grid areas must be rectangular in nature; it is not possible to create, for example, a t- or l-shaped grid area. in the example below i have a grid container with two grid items. i have named these with the grid-area property and then laid them out on the grid using grid-template-areas. this creates two grid areas, one covering four grid cells, the other two. ...
...haped grid area. in the example below i have a grid container with two grid items. i have named these with the grid-area property and then laid them out on the grid using grid-template-areas. this creates two grid areas, one covering four grid cells, the other two. ...
...hem out on the grid using grid-template-areas. this creates two grid areas, one covering four grid cells, the other two. ...
... background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .
wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 100px 100px; grid-template-areas: "a a b" "a a b"; } .item1 { grid-area: a; } .item2 { grid-area: b; } <div class="
wrapper"> <div class="item1">item</div> <div class="item2">item</div> </div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns grid-template-areas grid-area further reading css grid layout guide: basic concepts of grid layout css grid layout guide: grid template areas definition of grid areas in the css grid layout specif...
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
be placed one into each individual grid cell by the auto-placement algorithm. additional row or column tracks will be created to create enough cells to hold all items. in the example we have created a three column track grid. the five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two. ...
...umn tracks will be created to create enough cells to hold all items. in the example we have created a three column track grid. the five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two. ...
... placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two. ...
...maining two. ...
Making asynchronous programming easier with async and await - Learn web development
{ return await response.blob(); } } myfetch().then((blob) => { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }).catch(e => console.log(e)); you can try typing in the example yourself, or running our live example (see also the source code). but how does it work? you'll note that we've
wrapped the code inside a function, and we've included the async keyword before the function keyword. this is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, await only works inside of async functions. inside the myfetch() function definition you can see that the code closely resembles the previous promise version, ...
... method, so we use await here as well. when the result of operation returns, we return it out of the myfetch() function. this means that when we call the myfetch() function, it returns a promise, so we can chain a .then() onto the end of it inside which we handle displaying the blob onscreen. you are probably already thinking "this is really cool!", and you are right — fewer .then() blocks to
wrap around code, and it mostly just looks like synchronous code, so it is really intuitive. adding error handling and if you want to add error handling, you've got a couple of options. you can use a synchronous try...catch structure with async/await. this example expands on the first version of the code we showed above: async function myfetch() { try { let response = await fetch('coffee.jpg...
...see that the fetchanddecode() function has been converted easily into an async function with just a few changes. see the promise.all() line: let values = await promise.all([coffee, tea, description]); by using await here we are able to get all the results of the three promises returned into the values array, when they are all available, in a way that looks very much like sync code. we've had to
wrap all the code in a new async function, displaycontent(), and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the .then() block provides a nice, useful simplification, leaving us with a much more readable program. for error handling, we've included a .catch() block on our displaycontent() call; this will handle errors ocurring in both functions. n...
...wait their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds! you'll have to test your code carefully, and bear this in mind if performance starts to suffer. another minor inconvenience is that you have to
wrap your awaited promises inside an async function. async/await class methods as a final note before we move on, you can even add async in front of class/object methods to make them return promises, and await promises inside them. take a look at the es class code we saw in our object-oriented javascript article, and then look at our modified version with an async method: class person { construct...
Video and Audio APIs - Learn web development
the <video> element contains two <source> elements so that different formats can be loaded depending on the browser viewing the site. the controls html is probably the most interesting: we have four <button>s — play/pause, stop, rewind, and fast forward. each <button> has a class name, a data-icon attribute for def...
...r index.html file. call it custom-player.js. ...
... next, insert the following at the bottom of your code: media.removeattribute('controls'); controls.style.visibility = 'visible'; these two lines remove the default browser controls from the video, and make the custom controls visible. ...
... then we initialize two more variables — minutevalue and secondvalue. the two if statements work out whether the number o...
Styling Vue components with CSS - Learn web development
ze; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-
wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px...
...k; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: rect(1px, 1px, 1px, 1px); white-space: no
wrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem;...
...n 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. ...
... 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 we can add as well. we'll also add the input__lg class to our <input> element. ...
JavaScript-DOM Prototypes in Mozilla
prototype 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. ...
... as an example of this let's look at an html image element in a document. ...
...ed htmlelement as a result of resolving the name htmlimageelement earlier, the recursion will stop right there. ok, so that's how class constructor and their prototype properties are set up, what about the actual prototype chain of a xpconnected dom object? the beauty of this code is that the prototype property of a class constructor is the real xpconnect prototype for that class. when xpconnect
wraps a dom object (i.e. creates a xpconnect javascript
wrapper for a dom object), xpconnect will call the scriptable helper method nsdomclassinfo::postcreate() which will make sure the prototype chain of the
wrapper jsobject is properly set up. in this call, the nsdomclassinfo code just needs to resolve the name of the class on the global object, and the prototype will be set up by the resolving code...
...obj.__proto__.__proto__) has been set up already, if it has, then there's nothing left to do in nsdomclassinfo::postcreate(). ...
source-editor.jsm
rt that code module; it is essentially an implementation detail. its functionality is all exposed through source-editor.jsm. ...
...ementation detail. its functionality is all exposed through source-editor.jsm. ...
...alue indicating the offset into the text at which to begin the find operation. the default is 0 if backwards is false, or text.length if backwards is true. findnext() finds the next occurrence of the search operation started by the last call to find(). note: this ignores the value you specified for backwards in the original search; it always searches forward. number findnext( boolean a
wrap }; parameters a
wrap if true, the search operation will
wrap around to the beginning of the text. otherwise, the search stops if the end of the text is reached. return value the offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found. findprevious() finds the previous occurrence of the search operation started by the last call to find(). ...
...end of the text is reached. return value the offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found. findprevious() finds the previous occurrence of the search operation started by the last call to find(). note: this ignores the value you specified for backwards in the original search; it always searches backward. number findnext( boolean a
wrap }; parameters a
wrap if true, the search operation will
wrap around to the end of the text. otherwise, the search stops if the beginning of the text is reached. return value the offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found. focus() makes the editor the focus for user input. void focus(); parameters none. getbreakpoints ret...
Leak-hunting strategies and tips
lding 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 nsxpc
wrappedjs 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 folder, then selecting a message, and then other activities one does while reading mail. once you've done this, and it doesn't leak much, then try the action under trace-malloc or lsan or valgri...
...giving a derived class of it an nscomptr member variable) and delete that object through a pointer to the base class using delete, its destructor better be virtual. (but we have many virtual destructors in the codebase that don't need to be -- don't do that.) debugging leaks that go through xpconnect many large object graphs that leak go through xpconnect. this can mean there will be xpconnect
wrapper objects showing up as owning the leaked objects, but it doesn't mean it's xpconnect's fault (although that has been known to happen, it's rare). debugging leaks that go through xpconnect requires a basic understanding of what xpconnect does. xpconnect allows an xpcom object to be exposed to javascript, and it allows certain javascript objects to be exposed to c++ code as normal xpcom objects. ...
...connect's fault (although that has been known to happen, it's rare). debugging leaks that go through xpconnect requires a basic understanding of what xpconnect does. xpconnect allows an xpcom object to be exposed to javascript, and it allows certain javascript objects to be exposed to c++ code as normal xpcom objects. when a c++ object is exposed to javascript (the more common of the two), an xpc
wrappednative object is created. this
wrapper owns a reference to the native object until the corresponding javascript 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...
...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 nsxpc
wrappedjs 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 nsxpc
wrappedjs object creates a gc root that exists as long as the
wrapper does. the
wrapper itself is just a normal reference-counted object, so a leaked nsxpc
wrappedjs can be debugged using the normal refcount-balancer tools. ...
NSS Sample Code sample2
nss sample code 2: symmetric encryption /* example code to illustrate des enccryption/decryption using nss. * the example skips the details of obtaining the key & iv to use, and * just uses a hardcoded key & iv. * note: iv is only needed if cipher blocking chaining (cbc) mode of encryption * is used * * the recommended approach is to store and transport
wrapped (encrypted) * des keys (ivs can be in the clear). however, it is a common (and dangerous) * practice to use raw des keys. this example shows the use of a raw key. */ #include "nss.h" #include "pk11pub.h" /* example key & iv */ unsigned char gkey[] = {0xe8, 0xa7, 0x7c, 0xe2, 0x05, 0x63, 0x6a, 0x31}; unsigned char giv[] = {0xe4, 0xbb, 0x3b, 0xd3, 0xc3, 0x71, 0x2e, 0x58}; int main(int argc, char **argv) { ck_m...
...lot == 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. ...
... "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. ...
... 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_originun
wrap * to indicate the key was un
wrapped - which is what should be done * normally anyway - using raw keys isn't a good idea */ symkey = pk11_importsymkey(slot, ciphermech, pk11_originun
wrap, cka_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. * when not using cbc mode, ivitem.data and ivitem.len can be 0, or you * can simply pass null for the iv parameter in pk11_paramfromiv func */ iv...
Hacking Tips
<incomplete sequence \354\200> (gdb) x/2i 0xf7fd25a8 0xf7fd25a8: sub $0x80,%esp 0xf7fd25ae: mov 0x94(%esp),%ecx on arm, the compiled js code will always be arm machine code, whereas spidermonkey itself is frequently thumb2. since there isn't debug info for the jitted code, you will need to tell gdb that you are looking at arm code: (gdb) set arm force-mode arm or you can
wrap the x command in your own command: def xi set arm force-mode arm eval "x/%di %d", $arg0, $arg1 set arm force-mode auto end printing asm.js/wasm generated assembly code (from gdb) set a breakpoint on js::wasm::instance::callexport (defined in wasminstance.cpp as of november 18th 2016). this will trigger for *any* asm.js/wasm call, so you should find a way to set this breakpoi...
...; done wait until it hits a failure. now you can run rr replay to replay that last (failed) run under gdb. rr with reftest to break on the write of a differing pixel: find the x/y of a pixel that differs use 'run z' where z is the mark in the log for test-start. for example in '[rr 28496 607198]reftest test-start | file:///home/bgirard/mozilla-central/tree/image/test/reftest/bmp/bmpsuite/b/
wrapper.html?badpalettesize.bmp' z would be 607198. break 'mozilla::dom::canvasrenderingcontext2d::drawwindow(nsglobalwindow&, double, double, double, double, nsastring_internal const&, unsigned int, mozilla::errorresult&)' cont break 'presshell::renderdocument(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((c...
.../4 to be something more apropriate for your architecture. benchmarking with sub-milliseconds (js shell) in the shell we have 2 simple ways to benchmark a script, we can either use the -b shell option (--print-timing) which will evaluate a script given on the command line without any need to instrument the benchmark and print an extra line showing the run-time of the script. the other way is to
wrap the section that you want to measure with the datenow() function call which returns the number of milliseconds, with a decimal part for sub-milliseconds. js> datenow() - datenow() -0.0009765625 benchmarking with sub-milliseconds (browser) in a simillar way as datenow() in the js shell, you can use performance.now() in the javascript code of a page. dumping the javascript heap from the shell...
... benchmarking without a phone if you do not have a mobile device or prefer to test on your desktop first, you will need to downgrade your computer such as it is able to run programs as fast as-if they were running on a phone. on linux, you can manage the resources available to one program by using cgroup, and to do you can install libcgroup which provides some convenient tools such as cgexec to
wrap the program that you want to benchmark. the following list of commands is used to create 3 control groups. the top-level control group is just to group the mask and the negate-mask. the mask control group is used to run the program that we want to benchmark. the negate-mask control group is used to reserve resources which might be used by the other program if not reserved. $ sudo cgcreate -a ...
Language bindings
ls.sandbox constructor.components.utils.evalinwindowthis function enables code running in a more-privileged javascript context to evaluate a string in a less-privileged javascript context. the result is structured cloned back to the original context, unless it is native (for example, if it returns a dom node, this is not structured cloned, because the original context will see that through an xray
wrapper already), so it's guaranteed to behave predictably. this is useful for privileged code, such as add-on code, to access variables and apis defined in web content.components.utils.exportfunctionthis function provides a safe way to expose a function from a privileged scope to a less-privileged scope.components.utils.forcegccomponents.utils.forcegc lets scripts force a garbage collection cycle.
... the resulting object.components.utils.importcomponents.utils.import was introduced in firefox 3 and is used for sharing code between different scopes easily. for example, you can import xpcomutils.jsm to avoid copy/pasting long xpcom component registration boilerplate in your component files.components.utils.importglobalpropertiesimports various objects into a system scope.components.utils.isxray
wrapperwhen privileged javascript in gecko accesses objects belonging to less-privileged code (such as untrusted web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways. for example, privileged code using an xray to a dom object sees only the original, native version of the dom object. any...
...em to behave in unexpected ways. for example, privileged code using an xray to a dom object sees only the original, native version of the dom object. any expando properties are not visible, and if any native properties have been redefined, this has no effect.components.utils.makeobjectpropsnormalensures that the specified object's methods are all in the object's scope, and aren't cross-component
wrappers.components.utils.reporterrorcomponents.utils.reporterror reports a javascript error object to the error console, and returns. it is meant for use by extension developers who have exception handler blocks which want to "eat" an exception, but still want to report it to the console.components.utils.sandboxcomponents.utils.sandbox is used to create a sandbox object for use with evalinsandbox().c...
... modules. this can be particularly handy with restartless (boostrapped) extensions, so that you can unload an old version of a code module when a new version of your add-on is installed.components.utils.unwaivexraysundo a previous call to components.utils.waivexrays(), restoring xray vision for the caller.components.utils.waivexrayswaives xray vision for an object, giving the caller a transparent
wrapper to the underlying object.javaxpcomjavaxpcom allows for communication between java and xpcom, such that a java application can access xpcom objects, and xpcom can access any java class that implements an xpcom interface. javaxpcom is not actively maintained.plxpcomplxpcom (perl xpcom) provides language bindings letting you use xpcom from perl code. the resources here provide information about t...
mozIStorageConnection
the table's schema. this should be specified using the same syntax the create table statement uses. for example: "foo integer, bar string". exceptions thrown ns_error_failure table already exists or the requested table couldn't be created. executeasync() asynchronously executes an array of queries created with this connection, using any currently bound parameters. the statements are run
wrapped in a transaction. note: the statements may be reused immediately, and the statements do not need to be reset individually. mozistoragependingstatement executeasync( [array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, in mozistoragestatementcallback acallback optional ); parameters astatements the array of statements to execut...
...xists a table with the given name. boolean tableexists( in autf8string atablename ); parameters atablename the sql table whose existence should be checked. return value returns true if the table exists, false otherwise. ...
...ion and how-to article mozistoragestatement create and execute sql statements on a sqlite database. mozistoragevaluearray
wraps an array of sql values, such as a result row. mozistoragefunction create a new sqlite function. mozistorageaggregatefunction create a new sqlite aggregate function. ...
...zistoragestatement create and execute sql statements on a sqlite database. mozistoragevaluearray
wraps an array of sql values, such as a result row. mozistoragefunction create a new sqlite function. mozistorageaggregatefunction create a new sqlite aggregate function. ...
mozIStorageStatement
() obtains the index of the column with the specified name. unsigned long getcolumnindex( in autf8string aname ); parameters aname name of the column. return value the zero-based numerical index for the column to get data from. reset() resets the bound parameters and statement execution state. this must be called before reusing the statement. note: javascript callers should always
wrap their execution in a try block, and have a reset statement in a finally block. see the overview document on storage for more details. void reset() escapestringforlike() escapes a string for sql like search. note: consumers will have to use same escape char when doing statements such as: ...like '?1' escape '/'.... see the sample code for more details. astring escapestringforlike( in astr...
...an step() return value true if there are more rows left in the results, otherwise false. execute() execute the query, ignoring any results. this is accomplished by calling executestep(), and then calling reset(). ...
...nnection database connection to a specific file or in-memory data storage mozistoragevaluearray
wraps an array of sql values, such as a result row. mozistoragefunction create a new sqlite function. mozistorageaggregatefunction create a new sqlite aggregate function. mozistorageprogresshandler monitor progress during the execution of a statement. ...
...on to a specific file or in-memory data storage mozistoragevaluearray
wraps an array of sql values, such as a result row. mozistoragefunction create a new sqlite function. mozistorageaggregatefunction create a new sqlite aggregate function. mozistorageprogresshandler monitor progress during the execution of a statement. ...
Using the clipboard
lication to the clipboard. three xpcom objects are needed to handle clipboard operations. the first is an object that holds the data to put on the clipboard. the second is the clipboard object. the third is an object which is used to transfer the data from the first object to the clipboard. the clipboard model in mozilla requires you to perform the following steps to copy data: create an xpcom
wrapper for the data which you want to put on the clipboard. this is needed because you can put anything on the clipboard from text to images. create a transferring object. this object can be the component @mozilla.org/widget/transferable;1 which implements the interface nsitransferable. initialize the transferring object with the nsiloadcontext obtained from the window that is the source of the cli...
...esn't understand html, it can use the plain text version. if it does understand html, it can grab that version. the transferring object will hold the clipboard contents until the application has decided what it needs. this allows the clipboard to be used by another application right away. let's break down the steps needed to copy data to the clipboard. first, we need to create an xpcom object to
wrap what we want to copy. we'll assume that we want to copy some text. we will use the interface nsisupportsstring which can be used to represent strings (specifically, unicode strings). the following boilerplate utility functions will be used in all later code examples. // import the services module for future use, if we're not in // a browser window where it's already loaded. components.utils.imp...
...nents.utils.import('resource://gre/modules/services.jsm'); // create a constructor for the built-in supports-string class. ...
... if (source instanceof ci.nsidomwindow) // note: in gecko versions >16, you can import the privatebrowsingutils.
EventTarget.addEventListener() - Web APIs
s a reminder, arrow functions do not have their own this context. my_element.addeventlistener('click', (e) => { console.log(this.classname) // warning: `this` is not `my_element` console.log(e.currenttarget === this) // logs `false` }) if an event handler (for example, onclick) is specified on an element in the html source, the javascript code in the attribute value is effectively
wrapped in a handler function that binds the value of this in a manner consistent with the addeventlistener(); an occurrence of this within the code represents a reference to the element. <table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' --> ... </table> note that the value of this inside a function, called by the code in the attribute value, be...
...ototype.preventdefault=function() { this.returnvalue=false; }; } if (!event.prototype.stoppropagation) { event.prototype.stoppropagation=function() { this.cancelbubble=true; }; } if (!element.prototype.addeventlistener) { var eventlisteners=[]; var addeventlistener=function(type,listener /*, usecapture (will be ignored) */) { var self=this; var
wrapper=function(e) { e.target=e.srcelement; e.currenttarget=self; if (typeof listener.handleevent != 'undefined') { listener.handleevent(e); } else { listener.call(self,e); } }; if (type=="domcontentloaded") { var
wrapper2=function(e) { if (document.readystate=="complete") {
wrapper(e); } ...
...urrenttarget=self; if (typeof listener.handleevent != 'undefined') { listener.handleevent(e); } else { listener.call(self,e); } }; if (type=="domcontentloaded") { var
wrapper2=function(e) { if (document.readystate=="complete") {
wrapper(e); } }; document.attachevent("onreadystatechange",
wrapper2); eventlisteners.push({object:this,type:type,listener:listener,
wrapper:
wrapper2}); if (document.readystate=="complete") { var e=new event(); e.srcelement=window;
wrapper2(e); } } else { this.attachevent("on"+type,
wrapper); eventlisteners.push({object:this,type:type,listener:listener,
wrapper:
wrapper}); } }; ...
...istener=function(type,listener /*, usecapture (will be ignored) */) { var counter=0; while (counter<eventlisteners.length) { var eventlistener=eventlisteners[counter]; if (eventlistener.object==this && eventlistener.type==type && eventlistener.listener==listener) { if (type=="domcontentloaded") { this.detachevent("onreadystatechange",eventlistener.
wrapper); } else { this.detachevent("on"+type,eventlistener.
wrapper); } eventlisteners.splice(counter, 1); break; } ++counter; } }; element.prototype.addeventlistener=addeventlistener; element.prototype.removeeventlistener=removeeventlistener; if (htmldocument) { htmldocument.prototype.addeventlistener=adde...
HTMLElement.offsetLeft - Web APIs
the htmlelement.offsetleft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the htmlelement.offsetparent node. for block-level elements, offsettop, offsetleft, offsetwidth, and offsetheight describe the border box of an element relative to the offsetparent. however, for inline-level elements (such as span) that can
wrap from one line to the next, offsettop and offsetleft describe the positions of the first border box (use element.getclientrects() to get its width and height), while offsetwidth and offsetheight describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position). therefore, a box with the left, top, width and height of offsetleft, offsettop, offsetwidth and o...
...ribe the positions of the first border box (use element.getclientrects() to get its width and height), while offsetwidth and offsetheight describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position). ...
...unding box for a span with
wrapped text. syntax left = element.offsetleft; left is an integer representing the offset to the left in pixels from the closest relatively positioned parent element. example var colortable = document.getelementbyid("t1"); var toleft = colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that
wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span. <div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>short span. ...
... colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that
wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span. <div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>short span. ...
Node.normalize() - Web APIs
the node.normalize() method puts the specified node and all of its sub-tree into a "normalized" form. in a normalized sub-tree, no text nodes in the sub-tree are empty and there are no adjacent text nodes. ...
... the node.normalize() method puts the specified node and all of its sub-tree into a "normalized" form. in a normalized sub-tree, no text nodes in the sub-tree are empty and there are no adjacent text nodes. ...
... the node.normalize() method puts the specified node and all of its sub-tree into a "normalized" form. in a normalized sub-tree, no text nodes in the sub-tree are empty and there are no adjacent text nodes. ...
...ts the specified node and all of its sub-tree into a "normalized" form. in a normalized sub-tree, no text nodes in the sub-tree are empty and there are no adjacent text nodes. syntax element.normalize(); example let
wrapper = document.createelement("div");
wrapper.appendchild( document.createtextnode("part 1 ") );
wrapper.appendchild( document.createtextnode("part 2 ") ); // at this point,
wrapper.childnodes.length === 2 //
wrapper.childnodes[0].textcontent === "part 1 " //
wrapper.childnodes[1].textcontent === "part 2 "
wrapper.normalize(); // now,
wrapper.childnodes.length === 1 //
wrapper.childnodes[0].textcontent === "part 1 part 2 " specifications specification status comment domthe definition of 'node: normalize' in that specification. living sta...
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
ted bugs apply to old browser versions and are fixed in current browsers. each of the bugs has a workaround listed — which can save you many hours of puzzling. if you want to include very old browsers with flexbox support then you can include the vendor prefixes in your css in addition to the unprefixed version. this is becoming less and less of a requirement today as support is widespread. .
wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } autoprefixer online is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. you can also check can i use for information about when prefixes were removed in browsers to make your decision. useful fallback techniques given that ...
...and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” - 3. flex containers in the following live example, i have floated two blocks and then set display: flex on the container. the items are now flex items, which means they stretch to equal height. any float behaviour does not apply. you can test the fallback behaviour by removing display: flex from the
wrapper. display: inline-block once an inline-block item becomes a flex item, it is blockified and so behavior of display: inline-block like preserving white space between items no longer applies. remove display: flex to see the fallback behavior. you'll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items...
... css table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as internet explorer 8. if you use display: table-cell on an item in your html it takes on the styling of an html table cell. css creates anonymous boxes to represent these items so that you do not need to
wrap each item in a
wrapper to represent the html table row, and a second one to represent the table element itself, you can’t see or style these anonymous boxes; they are there purely to fix up the tree. if you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table displa...
...a flex item — losing any of the table display features. “note: some values of display normally trigger the creation of anonymous boxes around the original box. if such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. for example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being
wrapped into a single anonymous table.” - 4. flex items the vertical-align property the live example below demonstrates use of the vertical-align property along with display: inline-block. both display: table-cell and display: inline-block allow for the use of this property. use of vertical-align enables vertical alignment prior to flexbox. the property is ignored by flexbox and so you can use ...
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
th a very simple example. in this example i have used grid to lay out a set of boxes that contain links. i have used the line-based placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. ...
...inks. i have used the line-based placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. ...
...in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. ...
....
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .
wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column: 1; grid-row: 2; } <div class="
wrapper"> <div class="box box1"><a href="">one</a></div> <div class="box box2"><a href="">two</a></div> <div class="box box3"><a href="">three</a></div> <div class="box box4"><a href="">four</a></div> <div class="box box5"><a href="">five</a></div> </div> the specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source...
CSS Grid Layout - CSS: Cascading Style Sheets
ey were with tables. for example, a grid container's child elements could position themselves so they actually overlap and layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...
... child elements could position themselves so they actually overlap and layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...
...ck grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...
... margin: 0 auto; } .
wrapper > div { border: 2px solid rgb(233,171,88); border-radius: 5px; background-color: rgba(233,171,88,.5); padding: 1em; color: #d9480f; } html <div class="
wrapper"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> <div class="five">five</div> <div class="six">six</div> </div> css .
wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } .one { grid-column: 1 / 3; grid-row: 1; } .two { grid-column: 2 / 4; grid-row: 1 / 3; } .three { grid-column: 1; grid-row: 2 / 5; } .four { grid-column: 3; grid-row: 3; } .five { grid-column: 2; grid-row: 4; } .six { grid-column: 3; grid-row: 4; } r...
shape-outside - 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. ...
... the source for this interactive example is stored in a github repository. if 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. ...
...<gradient> value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the list below, which define the float area for float elements. the float area determines the shape around which inline content (float elements)
wrap. values none the float area is unaffected. inline content
wraps around the element's margin box, like usual. <shape-box> the float area is computed according to the shape of a float element's edges (as defined by the css box model). this can be margin-box, border-box, padding-box, or content-box. the shape includes any curvature created by the border-radius property (behavior which is simi...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
your html is actually really easy to do, and you can add color to nearly anything. we're going to touch on most of what you'll need to know when using color, including a list of what you can color and what css properties are involved, how you describe colors, and how to actually use colors both in stylesheets and in scripts. we'll also take a look at how to let the user pick a color. then we'll
wrap things up with a brief discussion of how to use color wisely: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities. things that can have color at the element level, everything in html can have color applied to it. instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth...
...simply specify colors in the css that's used when rendering elements. while we won't use every single property mentioned previously, we'll look at a couple of examples. the concept is the same anywhere you use color. let's take a look at an example, starting by looking at the results we're trying to achieve: html the html responsible for creating the above example is shown here: <div class="
wrapper"> <div class="box boxleft"> <p> this is the first box. </p> </div> <div class="box boxright"> <p> this is the second box. </p> </div> </div> this is pretty simple, using a <div> as a
wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph (<p>) in each box. the magic happens, as usual, in the css, whe...
...this establishes the size of the container using width and height as well as its margin and padding. ...
...ently with a single paragraph (<p>) in each box. the magic happens, as usual, in the css, where we'll apply colors define the layout for the html above. css we'll look at the css to create the above results a piece at a time, so we can review the interesting parts one by one. .
wrapper { width: 620px; height: 110px; margin: 0; padding: 10px; border: 6px solid mediumturquoise; } the .
wrapper class is used to assign styles to the <div> that encloses all of our other content. this establishes the size of the container using width and height as well as its margin and padding. of more interest to our discussion here is the use of the border property to establish a border around the outside edge of the element. this border is a solid line, 6 pixels wide, in the color mediumturquoise. ...
<input type="range"> - HTML: Hypertext Markup Language
creenshotlive sample unfortunately, no major browsers currently support vertical range controls directly. transform: rotate(-90deg) you can, however, create a vertical range control by drawing a horizontal range control on its side. the easiest way is to use css: by applying a transform to rotate the element, you can make it vertical. let's take a look. ...
...ontrol by drawing a horizontal range control on its side. the easiest way is to use css: by applying a transform to rotate the element, you can make it vertical. let's take a look. html the html needs to be updated to
wrap the <input> in a <div> to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page): <div class="slider-
wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div> css now we need some css. ...
...ement, you can make it vertical. let's take a look. html the html needs to be updated to
wrap the <input> in a <div> to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page): <div class="slider-
wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div> css now we need some css. first is the css for the
wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things. ...
...="slider-
wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div> css now we need some css. first is the css for the
wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things. .slider-
wrapper { display: inline-block; width: 20px; height: 150px; padding: 0; } then comes the style information for the <input> element within the reserved space: .slider-
wrapper input { width: 150px; height: 20px; margin: 0; transform-origin: 75px 75px; transform: rotate(-90deg); } the size of the control is set to be 150 pixels long by 20 pixels tall. the margins are set to 0 and t...
Using Promises - JavaScript
nhandled. that default action usually involves logging the error to console, and this is indeed the case for node. ideally, of course, you should examine the rejected promises to make sure none of them are actual code bugs before just discarding these events. creating a promise around an old callback api a promise can be created from scratch using its constructor. this should be needed only to
wrap old apis. in an ideal world, all asynchronous functions would already return promises. unfortunately, some apis still expect success and/or failure callbacks to be passed in the old way. the most obvious example is the settimeout() function: settimeout(() => saysomething("10 seconds passed"), 10*1000); mixing old-style callbacks and promises is problematic. if saysomething() fails or contains...
...fortunately, some apis still expect success and/or failure callbacks to be passed in the old way. the most obvious example is the settimeout() function: settimeout(() => saysomething("10 seconds passed"), 10*1000); mixing old-style callbacks and promises is problematic. if saysomething() fails or contains a programming error, nothing catches it. settimeout is to blame for this. ...
... failure callbacks to be passed in the old way. the most obvious example is the settimeout() function: settimeout(() => saysomething("10 seconds passed"), 10*1000); mixing old-style callbacks and promises is problematic. if saysomething() fails or contains a programming error, nothing catches it. settimeout is to blame for this. luckily we can
wrap settimeout in a promise. best practice is to
wrap problematic functions at the lowest possible level, and then never call them directly again: const wait = ms => new promise(resolve => settimeout(resolve, ms)); wait(10*1000).then(() => saysomething("10 seconds")).catch(failurecallback); basically, the promise constructor takes an executor function that lets us resolve or reject a promise manually. since settimeout() doesn't really fail, we l...
...tended. separate chains also have separate error handling, leading to uncaught errors. the second mistake is to nest unnecessarily, enabling the first mistake. nesting also limits the scope of inner error handlers, which—if unintended—can lead to uncaught errors. a variant of this is the promise constructor anti-pattern, which combines nesting with redundant use of the promise constructor to
wrap code that already uses promises. the third mistake is forgetting to terminate chains with catch. unterminated promise chains lead to uncaught promise rejections in most browsers. a good rule-of-thumb is to always either return or terminate promise chains, and as soon as you get a new promise, return it immediately, to flatten things: dosomething() .then(function(result) { return dosomethinge...
SyntaxError: unterminated string literal - JavaScript
es. to fix this error, check if: you have opening and closing quotes (single or double) for your string literal, you have escaped your string literal correctly, your string literal isn't split across multiple lines. ...
... var longstring = 'this is a very long string which needs to
wrap across multiple lines because otherwise my code is unreadable.'; // syntaxerror: unterminated string literal instead, use the + operator, a backslash, or template literals. the + operator variant looks like this: var longstring = 'this is a very long string which needs ' + 'to
wrap across multiple lines because ' + 'otherwise my code is unreadable.'; or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. that form looks like this: var longst...
...'otherwise my code is unreadable.'; or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. ...
...e break), or as an indent; otherwise it will not work. ...
Symbol - JavaScript
= 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. ...
... that symbol("foo") does not coerce the string "foo" into a symbol. ...
...g 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() function: let sym = symbol('foo') typeof sym // "symbol" let symobj = object(sym) typeof symobj // "object" shared symbols in the global symbol registry the above syntax using the symbol() function will not create a global symbol that is available in your whole codebase. to create symbols available across files and even across realms (each of which h...
...wnpropertysymbols() to get these. let obj = {} obj[symbol('a')] = 'a' obj[symbol.for('b')] = 'b' obj['c'] = 'c' obj.d = 'd' for (let i in obj) { console.log(i) // logs "c" and "d" } symbols and json.stringify() symbol-keyed properties will be completely ignored when using json.stringify(): json.stringify({[symbol('foo')]: 'foo'}) // '{}' for more details, see json.stringify(). symbol
wrapper objects as property keys when a symbol
wrapper object is used as a property key, this object will be coerced to its
wrapped symbol: let sym = symbol('foo') let obj = {[sym]: 1} obj[sym] // 1 obj[object(sym)] // still 1 specifications specification ecmascript (ecma-262)the definition of 'symbol' in that specification. ...
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.prototype.get() on an existing table. by accessing a function exported from a wasm module instance v...
...nt32), 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.prototype.get() on an existing table. by accessing a function exported from a wasm module instance via instance.exports. either way, you get the same kind of
wrapper for the underlying function. from a javascript point of view, it's as if every wasm function is a javascript function too — but they are encapsulated by the exported wasm function object instance and there are only limited ways to access them. an example let's look at an example to clear things up (you can find this on github as table-set.html; see it running live also, and check out the ...
...e this, we then retrieve these references back from othertable and print their results to console too, which gives the same results. they are real functions in the previous example, the return value of each table.prototype.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() retur...
...d 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 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 j...
Compiling an Existing C Module to WebAssembly - WebAssembly
s function. to compile this program, you need to tell the compiler where it can find libwebp's header files using the -i flag and also pass it all the c files of libwebp that it needs. a useful strategy is just gave it all the c files and relied on the compiler to strip out everything that was unnecessary. it seemed to work brilliantly: $ emcc -o3 -s wasm=1 -s extra_exported_runtime_methods='["c
wrap"]' \ -i libwebp \ webp.c \ libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c note: this strategy will not work with every c project. many projects rely on autoconf/automake to generate system-specific code before compilation. emscripten provides emconfigure and emmake to
wrap these commands and inject the appropriate parameters. you can find more in the emscripten documentation. now y...
...for example, v0.6.1 is encoded as 0x000601 = 1537. ...
...f(uint8_t)); } emscripten_keepalive void destroy_buffer(uint8_t* p) { free(p); } the create_buffer() function allocates a buffer for the rgba image — hence 4 bytes per pixel. the pointer returned by malloc() is the address of the first memory cell of that buffer. when the pointer is returned to javascript land, it is treated as just a number. ...
...es a buffer for the rgba image — hence 4 bytes per pixel. the pointer returned by malloc() is the address of the first memory cell of that buffer. when the pointer is returned to javascript land, it is treated as just a number. after exposing the function to javascript using c
wrap, you can use that number to find the start of our buffer and copy the image data: const api = { version: module.c
wrap('version', 'number', []), create_buffer: module.c
wrap('create_buffer', 'number', ['number', 'number']), destroy_buffer: module.c
wrap('destroy_buffer', '', ['number']), }; const image = await loadimage('./image.jpg'); const p = api.create_buffer(image.width, image.height); module.heap8.set(image.data, p); // ... call encoder ... api.destroy_buffer(p); encode the image the image is now avail...
window/utils - Archive of obsolete content
ndows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. globals functions getmostrecentbrowserwindow() get the topmost browser window, as an nsidomwindow instance. returns nsidomwindow: the topmost browser window. getinnerid(window) returns the id of the specified window's current inner window. this function
wraps nsidomwindowutils.currentinnerwindowid. parameters window : nsidomwindow the window whose inner window we are interested in. returns id: the given window's id. getouterid(window) returns the id of the specified window's outer window. this function
wraps nsidomwindowutils.outerwindowid. parameters window : nsidomwindow the window whose outer window we are interested in. returns id: th...
...returns the nsiloadcontext. parameters window : nsidomwindow returns nsiloadcontext open(uri, options) this function is used to open top level (application) windows. it takes the uri of the window document as its first argument and an optional hash of options 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...
...{ name: 'jetpack window', features: { width: 200, height: 50, popup: true } }); args object extra 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 ...
Label and description - Archive of obsolete content
line breaking under normal conditions, a description will not break long-running text and the text may be cropped or hidden. to cause the text to
wrap: ensure the long-running text is a text node child of <description/> or <label/> (i.e., do not specify the long-running text in the value attribute of these elements). the default style for these xul elements includes white-space:
wrap;. this reduces all whitespace chunks (including newlines) to single spaces. text is permitted to
wrap. <description>i am your father's brother's nephew's cousin's former roommate. what's that make us? absolutely nothing!</description> with white-space: pre; all whitespace, including newlines, is rendered literally. text cannot
wrap automatically but can still be achieved with <html:br/> if desired. <descri...
...ding newlines) to single spaces. text is permitted to
wrap. <description>i am your father's brother's nephew's cousin's former roommate. what's that make us? absolutely nothing!</description> with white-space: pre; all whitespace, including newlines, is rendered literally. text cannot
wrap automatically but can still be achieved with <html:br/> if desired. <description style="white-space: pre-
wrap;">i am your father's brother's nephew's cousin's former roommate. what's that make us? absolutely nothing!</description> with white-space: pre-
wrap; all whitespace is rendered literally, but text is additionally permitted to
wrap at spaces. note: prior to firefox 3, it was necessary to use -moz-pre-
wrap instead of -pre-
wrap. you may wish to use both for backward compatibility. <description s...
...dered literally, but text is additionally permitted to
wrap at spaces. note: prior to firefox 3, it was necessary to use -moz-pre-
wrap instead of -pre-
wrap. you may wish to use both for backward compatibility. <description style="white-space: pre;">i am your father's brother's nephew's cousin's former roommate. what's that make us? absolutely nothing!</description> text can also be made to
wrap by inserting an <html:br/> element regardless of the css style, but this creates a hard-break that does not change as parent elements resize. <description>i am your father's brother's nephew's cousin's former roommate.<html:br/> what's that make us?<html:br/> absolutely nothing!</description> using labels as anchors its possible to make a label look and act like an html <a> tag: <label class...
Preferences - Archive of obsolete content
it applications (firefox, thunderbird, nvu), you should provide default values for your extension's preferences (see above for information on how to do it). it has the following benefits: you don't have to duplicate default values in various parts of your code. the code for reading preferences is simplified, since you don't need to worry about the get methods throwing exceptions. ...
...ide default values for your extension's preferences (see above for information on how to do it). it has the following benefits: you don't have to duplicate default values in various parts of your code. the code for reading preferences is simplified, since you don't need to worry about the get methods throwing exceptions. ...
... fixme: ...
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
the menu item that will open the window (listing 4). fixme: listing 4: event handler clock handler create the window that displays the clock (listing 5) and its controller (listing 6). we’ve already covered the dialog element in chapter 3. in this case, we only want to display an ok button, so we set the buttons attribute to accept. within the window are a label element and textbox element,
wrapped in a hbox element so that they are arranged horizontally. listing 5: content for clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="clock" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content...
...take note that when using an extension to create an overlay on the browser window, any global variables and functions defined within javascript that get opened as overlays on top of browser.xul all become propert...
...store. take note that when using an extension to create an overlay on the browser window, any global variables and functions defined within javascript that get opened as overlays on top of browser.xul all become properties of the browser.xul window object. this means that all those variables and functions get mixed up with those defined by firefox itself and any other extensions that are running.
wrapping everything in one object is a good way to isolate extensions from each other and keep them from trampling each others’ toes. defining a class would be another good way. initializing when opening browser window with extensions, there are a lot of situations where you want to perform some kind of initialization when the browser window opens. to do that, add an event listener for the load ev...
Promises - Archive of obsolete content
{ tmppath: configpath + "." + math.random(), encoding: "utf-8" }) timestamp = new date; }); http requests http requests should, in nearly all circumstances, be made via the standard xmlhttprequest api. while this api does not have direct support for promises, its standard usage is very easy to adapt to a promise-based 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.responsetype = "json"; xhr.send(); })...
...t [row] = yield db.execute( "select value from nodes where key = 'timestamp' \ order by value desc limit 1"); latesttimestamp = row.getresultbyindex(0); } finally { // make sure to close the database when finished. // failure to do this will prevent firefox from shutting down // cleanly. yield db.close(); } }); promise
wrappers and helpers the following are some example promise-based
wrappers for common callback-based asynchronous apis. addonmanager var aom = { __proto__: addonmanager, addon: function addon(addon) { if (!(addon && "getdatadirectory" in addon)) return addon; return { __proto__: addon, getdatadirectory: function getdatadirectory() { ...
...have been written. ...
CSS3 - Archive of obsolete content
everal types definition, like <ident> and <custom-ident>, have been deferred to css values and units module level 4. css flexible box layout module candidate recommendation add a flexbox layout to the css display property and several new css properties to control it: flex, flex-align, flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, and flex-
wrap. css cascading and inheritance level 3 candidate recommendation adds: the initial, unset values for properties. the css all property. the scoping mechanism. clarifies: interaction of media-dependent @import statements and style sheet loading requirements. css writing modes module level 3 propose...
...tandardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module. css shapes module level 1 candidate recommendation defines geometric shapes, which can be applied to floats. these shapes describe areas, around which inline content
wraps instead of
wrapping around the bounding box. css masking module level 1 candidate recommendation defines a way for partially or fully hiding portions of visual elements. it describes how to use another graphical element or image as a luminance or alpha mask. css fragmentation module level 3 candidate recommendation defines how partitions of...
...this is useful to align number on the decimal point. the css word-spacing and letter-spacing properties with range constraints to control flexibility in justification. adds: control on how whitespaces are displayed using the css text-space-collapse and tab-size properties. control on line breaks and word boundaries using the css line-break, word-break, hyphens, text-
wrap, overflow-
wrap, and text-align-last properties. control on how justification is happening, in order to support more type of scripts, using the css text-justify property. control on edge effect using the css text-indent and hanging-punctuation properties. a few features present in early css text level 3 draft have being postponed to the next iteration of this module . ...
Images, Tables, and Mysterious Gaps - Archive of obsolete content
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 doctype. 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 "shrink
wrapping" 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 constructed in order to understand what just happened, let's take a look at the construction of a line box, the placement of images within a line box, and the placement of a line box ...
...pect to the text around them. again, we could class images, cells, or rows in order to narrow down the focus of the effect. however, the styles shown above won't overcome the problem of one-pixel images, because the line box surrounding them will be the height of the font-size for the table cell, and so won't shrink down. the image will move to the bottom of the cell, but the cell won't "shrink
wrap" the image. in addition, any other image which is shorter than the line box is tall will still have space appear around it-- as happened with the red spacer cell. the one-pixel image in the cell is aligned with the bottom of the cell now, but the line box is back and it's the size of normal text. see, for example, figure 11, where the font-size of the document has been raised to a large amount. ...
...css2, the problem of inline images in table cells forcing open unwanted space has come to the attention of the css working group. there have been many proposals to fix the problem, but one of the most promising approaches is the property line-box-contain, which has been proposed for inclusion in css3. should this property be adopted, then any browser supporting it could emulate traditional "shrink
wrap" behavior without risking other layout upset with the following rule: td {line-box-contain: font replaced;} /* proposed for css3 */ there are other possible fixes contained within the current css3 working drafts, such as line-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 dif...
Notes on HTML Reflow - Archive of obsolete content
onds to the geometric information for (roughly) a single element in the content model; the frames are arranged into a hierarchy that parallels the containment hierarchy in the content model. a frame is rectangular, with width, height, and an offset from the parent frame that contains it. more than one frame may be needed to represent a single element from the content model; for example, text that
wraps is broken into several frames, one per
wrapped line. in this case, the primary frame is the frame containing the first line of text, with continuing frames (or continuations ) created for subsequent lines. html uses a flow based layout model, meaning that most of the time it is possible to compute the geometry in a single pass. elements later "in the flow" typ...
...luding the initial reflow , begins at the root frame , which corresponds to the <html> element of the html document. reflow proceeds recursively through some or all of the frame hierarchy, computing geometric information for each frame object that requires it. reflow may have the side-effect of creating new continuation frames, for example, for a text frame when the text must be
wrapped. some reflows are immediate in response to user or script actions; for example, resizing the window or changing the document's default font. these are dispatched directly from the presentation shell (e.g., nsipresshell::stylechangereflow), and affect the entire frame tree. other reflows are incremental and are dealt with asynchronously; for example, when content streams in fr...
... instead, they're directly enqueued to the presentation shell's reflow queue. html and xul interaction as mentioned above, html and xul have fundamentally different layout models, the former being a flow-based model, and the latter being a constraint based model. these differences are mediated by two adapter classes: nsboxframe and nsboxtoblockadaptor. nsboxframe nsboxframe is an html frame that "
wraps" a xul box. its purpose is to convert html reflows their box analog. nsboxtoblockadaptor nsboxtoblockadaptor is a xul box that
wraps an html block frame, used to convert changes in the box layout into html reflows. original document information author(s): chris waterson last updated date: december 4, 2004 copyright information: portions of this content are © 1998–2007 by ind...
Menu - Archive of obsolete content
set() are the recommended methods of adding items to a menu. parameters items a single menuitem or an array of menuitems. clear() removes all items from the menu, even items not added by the feature. contexton(node) binds the menu to a given node as its context menu. parameters node the menu is attached to this node, which may be either a raw dom node or a dom node
wrapped by jquery. hide() hides the menu if it is showing. insertbefore(newitems, target) inserts new items before an existing item. parameters newitems a single menuitem or an array of menuitems. target indicates the existing item. see targets. if no such target exists, the position at which the items are added is at the discretion of jetpack. item(target) returns an ...
...it will reflect the changes immediately. parameters target indicates the existing item. see targets. return value a menuitem object, or null if no such target exists. popupon(node) binds the menu to a given node. the menu will be shown when the node is left-clicked. parameters node the menu is attached to this node, which may be either a raw dom node or a dom node
wrapped by jquery. remove(target) removes an item from the menu. parameters target indicates the existing item to remove. see targets. if no such target exists, the call silently fails. replace(target, newitems) replaces an item with new items. parameters target indicates the existing item to replace. see targets. if no such target exists, the call silently fails. ...
...ent to clear(). set(items) equivalent to calling reset() and then add(items). this method and add() are the recommended methods of adding items to a menu. parameters items a single menuitem or an array of menuitems. show(anchornode) shows the menu immediately. parameters anchornode the menu will pop up on this node, 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...
Using XPInstall to Install Plugins - Archive of obsolete content
sed on mozilla (such as netscape 7) are deployed. it can be a way to ensure a smooth user-experience when obtaining plugins, without obliging the user to exit the browsing environment to launch a binary installer (the classic setup.exe experience on windows) or obliging the user to restart their browser. for plugin vendors who have already written a native code (e.g. exe) installer, xpinstall can
wrap this native installer and run it so that the user never has to leave the browsing environment and click on the exe to run it. this article presents a guideline for improving the plugin installation experience for netscape gecko browsers using xpinstall. a definition of terms xpinstall is an installer technology, and the name itself stands for "cross platform install" (hence "xp" -- an abbrevia...
...all to a secondary location, and to write to the windows system registry to disclose this secondary location. this section traces some of the xpinstall apis that can do this. a complete template of an xpi package is also presented in this section. not all the work needs to be done in javascript -- if you have a native installer (exe) that recognizes netscape gecko browsers, and you merely wish to
wrap the exe installer in an xpi package for a streamlined delivery to the client, you can easily do so. this section refers extensively to the xpinstall api documentation. initializing installation with plugin identifier all xpinstall installations are initiated with the initinstall method of the install object. since the install object is available to the install script, it need not be mentioned ...
...the xpi package is running on browsers that treat "=" as an illegal token, the workaround is to handle the error and invoke initinstall again. using xpinstall to run an exe (native code) installer if you wish to run a native installer (exe) to install plugin software, but wish to make the delivery of this native installer streamlined and within the browser's process, then you ought to consider
wrapping it in an xpi package. from javascript, you can call xpinstall's execute method of the install object to execute the binary. you can also call the execute method of the file object if you wish to actually install the file you are executing, rather than have it deleted. you can pass command line parameters to the executable. an example of calling the execute method from the install object on an...
Adding Labels and Images - Archive of obsolete content
ents for this purpose. label element the most basic way to include text in a window is to use the label element. it should be used when you want to place a descriptive label beside a control, such as a button. an example is shown below: example 1 : source view <label value="this is some text"/> the value attribute can be used to specify the text that you wish to have displayed. the text will not
wrap, so the text will all be displayed on a single line. this syntax is the most common of labels. if the text needs to
wrap, you can place the text content inside opening and closing tags as in the following example: example 2 : <label>this is some longer text that will
wrap onto several lines.</label> as with html, line breaks and extra whitespace are collapsed into a single space. later, we'll fi...
...control attribute you can use the control attribute to set which control the label is associated with. when the user clicks on an associated label, that control will be focused. this association is also important for accessibility, so that screen readers read aloud the label for the control as the user tabs to it. ...
.... it is more common to use the attribute syntax for labels, and the text content syntax for descriptions. example 4 : source view <description> this longer section of text is displayed. </description> you can set the text via script using the textcontent property, as in the following example: <description id="text" width="200"/> document.getelementbyid('text').textcontent = "some lengthy word
wrapped text goes here."; internally, both the label element and the description elements are the same. the label element is intended for labels of controls, such as text fields. the control attribute is only supported for labels. the description element is intended for other descriptive text such as informative text at the top of a dialog box. images xul has an element to display images within a win...
Bounding volume collision detection with THREE.js - Game development
intersection tests point vs. box3 / sphere both box3 and sphere have a containspoint method to do this test. var point = new three.vector3(2, 4, 7); knotbbox.containspoint(point); box3 vs. box3 the box3.intersectsbox method is available for performing this test. knotbbox.intersectsbox(otherbox); note: this is different from the box3.containsbox method, which checks whether the box3 fully
wraps another one. sphere vs. sphere in a similar fashion as before, there is a sphere.intersectssphere method to perform this test. knotbsphere.intersectssphere(othersphere); sphere vs. box3 unfortunately this test is not implemented in three.js, but we can patch sphere to implement a sphere vs. aabb intersection algorithm. // expand three.js sphere to support collision tests vs box3 // we are...
... in three.js. you will miss sphere tests, but the tradeoffs are well worth it. the advantages of using this helper are: it has an update() method that will resize its bounding box mesh if the linked mesh rotates or changes its dimensions, and update its position. it takes into account the child meshes when computing the size of the bounding box, so the original mesh and all its children are
wrapped. we can easily debug collisions by rendering the meshes that boxhelper creates. by default they are created with a linebasicmaterial material (a three.js material for drawing wireframe-style geometries). the main disadvantage is that it only creates box bounding volumes, so if you need spheres vs aabb tests you need to create your own sphere objects. to use it, we need to create a new boxh...
...ition. var box3 = new three.box3(); box3.setfromobject(knotboxhelper); if we change the mesh position, rotation, scale, etc. we need to call the update() method so the boxhelper instance matches its linked mesh. we also need to call setfromobject again in order to make the box3 follow the mesh. knot.position.set(-3, 2, 1); knot.rotation.x = -math.pi / 4; // update the bounding box so it stills
wraps the knot knotboxhelper.update(); box3.setfromobject(knotboxhelper); performing collision tests is done in the same way as explained in the above section — we use our box3 object in the same way as described above. // box vs box box3.intersectsbox(otherbox3); // box vs point box3.containspoint(point.position); demos there are two demos you can take a look at on our live demos page. the firs...
3D collision detection - Game development
an introduction to the different bounding volume techniques used to implement collision detection in 3d environments. followup articles will cover implementations in specific 3d libraries. axis-aligned bounding boxes as with 2d collision detection, axis-aligned bounding boxes (aabb) are the quickest algorithm to determine whether the two game entities are overlapping or not. this consists of
wrapping game entities in a non-rotated (thus axis-aligned) box and checking the positions of these boxes in the 3d coordinate space to see if they are overlapping. the axis-aligned constraint is there because of performance reasons. the overlapping area between two non-rotated boxes can be checked with logical comparisons alone, whereas rotated boxes require additional trigonometric operations, wh...
...y are overlapping. the axis-aligned constraint is there because of performance reasons. the overlapping area between two non-rotated boxes can be checked with logical comparisons alone, whereas rotated boxes require additional trigonometric operations, which are slower to calculate. if you have entities that will be rotating, you can either modify the dimensions of the bounding box so it still
wraps the object, or opt to use another bounding geometry type, such as spheres (which are invariant to rotation.) the animated gif below shows a graphic example of an aabb that adapts its size to fit the rotating entity. the box constantly changes dimensions to snugly fit the entity contained inside. note: check out the bounding volumes with three.js article to see a practical implementation of t...
...use this: function intersect(a, b) { return (a.minx <= b.maxx && a.maxx >= b.minx) && (a.miny <= b.maxy && a.maxy >= b.miny) && (a.minz <= b.maxz && a.maxz >= b.minz); } bounding spheres using bounding spheres to detect collisions is a bit more complex than aabb, but still fairly quick to test. the main advantage of spheres is that they are invariant to rotation, so if the
wrapped entity rotates, the bounding sphere would still be the same. their main disadvantage is that unless the entity they are
wrapping is actually spherical, the
wrapping is usually not a good fit (i.e.
wrapping a person with a bounding sphere will cause a lot of false positives, whereas an aabb would be a better match). point vs. sphere to check whether a sphere contains a point we need to calcul...
Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms
ich indicates a portion of the available space in the grid container. the example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. one part is given to column 2, 3 parts to column 3. ...
... a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. one part is given to column 2, 3 parts to column 3. ...
...vailable in the grid container, the remaining space is divided by 4. one part is given to column 2, 3 parts to column 3. * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .
wrapper { display: grid; grid-template-columns: 200px 1fr 3fr; } <div class="
wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> track sizing in the implicit grid tracks created in the implicit grid are auto-sized by default, however you can define a size for these tracks using the grid-auto-rows and grid-auto-columns properties. ...
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
gutters or alleys are spacing between content tracks. these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. in the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20px-gaps between row tracks. ...
...n content tracks. these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. in the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20px-gaps between row tracks. ...
...e have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20px-gaps between row tracks. * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #fff8f8; padding: 1em; color: #d9480f; } .
wrapper { display: grid; grid-template-columns: repeat(3,1.2fr); grid-auto-rows: 45%; grid-column-gap: 20px; grid-row-gap: 20px; } <div class="
wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> in terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap. the gap acts as if...
CSS values and units - Learn web development
u change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work. to see this in action you'll have to try the example after opening it in its own browser tab. the third box uses em units. these are relative to the font size. i've set a font size of 1em on the containing <div>, which has a class of .
wrapper. change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size. after following the instructions above, try playing with the values in other ways, to see what you get. ems and rems em and rem are the two relative lengths you are likely to encounter most frequently when sizing ...
...e as a percentage it will be a percentage of the font-size of the element's parent. if you use a percentage for a width value, it will be a percentage of the width of the parent. in the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. both sets are 200px and 40% wide respectively. the difference is that the second set of two boxes is inside a
wrapper that is 400 pixels wide. the second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one! try changing the width of the
wrapper or the percentage value to see how this works. the next example has font sizes set in percentages. each <li> has a font-size of 80%, therefore the nested list items become progressivel...
... css function. this function gives you the ability to do simple calculations inside your css. it's particularly useful if you want to work out values that you can't define when writing the css for your project, and need the browser to work out for you at runtime. for example, below we are using calc() to make the box 20% + 100px wide. the 20% is calculated from the width of the parent container .
wrapper and so will change if that width changes. we can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use calc() to tell the browser to do it for us. test your skills! we have covered a lot in this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you m...
Fundamental text and font styling - Learn web development
r it is bold, italic, etc. text layout styles: properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box. note: bear in mind that the text inside an element is all affected as one single entity. you can't select and style subsections of text unless you
wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element's text), ::first-line (selects the first line of an element's text), or ::selection (selects the text currently highlighted by the cursor.) fonts let's move straight on to look at properties for styling fonts. in this example we'll app...
...lly it's better to let html handle that part as it is tied to the text content.) hyphens: switch on and off hyphenation for supported languages. line-break: relax or strengthen line breaking for asian languages. text-align-last: define how the last line of a block or a line, right before a forced line break, is aligned. text-orientation: define the orientation of the text in a line. overflow-
wrap: specify whether or not the browser may break lines within words in order to prevent overflow. writing-mode: define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow. font shorthand many font properties can also be set through the shorthand property font. these are written in the following order: font-style, font-variant, font-weig...
...ctive learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce! you can either do this using offline html/css files, or enter your code into the live editable example below. if you make a mistake, you can always reset it using the reset button. ...
Example 1 - Learn web development
/* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : no
wrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : ...
.../* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : no
wrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : ...
...1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : no
wrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select...
How to structure a web form - Learn web development
ns uncommented — screenreaders will definitely get confused if you have multiple labels and multiple inputs with the same id! common html structures used with forms beyond the structures specific to web forms, it's good to remember that form markup is just html. this means that you can use all the power of html to structure a web form. as you can see in the examples, it's common practice to
wrap a label and its widget with a <li> element within a <ul> or <ol> list. <p> and <div> elements are also commonly used. lists are recommended for structuring multiple checkboxes or radio buttons. in addition to the <fieldset> element, it's also common practice to use html titles (e.g. <h1>, <h2>) and sectioning (e.g. <section>) to structure complex forms. above all, it is up to you to find a comf...
...ese ideas into practice and build a slightly more involved form — a payment form. this form will contain a number of control types that you may not yet understand. don't worry about this for now; you'll find out how they work in the next article (basic native form controls). for now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which
wrapper elements we are using to structure the form, and why. to start with, make a local copy of our blank template file and the css for our payment form in a new directory on your computer. apply the css to the html by adding the following line inside the html <head>: <link href="payment-form.css" rel="stylesheet"> next, create your form by adding the outer <form> element: <form> </form>...
... create your form by adding the outer <form> element: <form> </form> inside the <form> tags, add a heading and paragraph to inform users how required fields are marked: <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> next we'll add a larger section of code into the form, below our previous entry. here you'll see that we are
wrapping the contact information fields inside a distinct <section> element. moreover, we have a set of two radio buttons, each of which we are putting inside its own list (<li>) element. we also have two standard text <input>s and their associated <label> elements, each contained inside a <p>, and a password input for entering a password. add this code to your form: <section> <h2>contact inform...
Document and website structure - Learn web development
for quick access to popular content. a "typical website" could be structured something like this: html for structuring content the simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. some websites have more columns, some are a lot more complex, but you get the idea. with the right css, you could use pretty much any elements to
wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job. this is because visuals don't tell the whole story. we use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired peop...
...s a child of <body> it defines the global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings). <nav> contains the main navigation functionality for the page. secondary links, etc., would not go in the navigation. <footer> represents a group of end content for a page. non-semantic
wrappers sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or
wrap some content. sometimes you might want to just group a set of elements together to affect them all as a single entity with some css or javascript. for cases like these, html provides the <div> and <span> elements. you should use these preferably with a suitable class a...
...ther to affect them all as a single entity with some css or javascript. for cases like these, html provides the <div> and <span> elements. you should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted. <span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to
wrap your content, or don't want to add any specific meaning. for example: <p>the king walked drunkenly back to his room at 01:00, the beer doing nothing to aid him as he staggered through the door <span class="editor-note">[editor's note: at this point in the play, the lights should be down low]</span>.</p> in this case, the editor's note is supposed to merely provide extra direction for the direct...
HTML table advanced features and accessibility - Learn web development
however very useful for styling and layout — acting as useful hooks for adding css to your table. to give you some interesting examples, in the case of a long table you could make the table header and footer repeat on every printed page, and you could make the table body display on a single page and have the contents available by scrolling up and down. ...
...splay on a single page and have the contents available by scrolling up and down. to use them: the <thead> element must
wrap the part of the table that is the header — this is usually the first row containing the column headings, but this is not necessarily always the case. if you are using <col>/<colgroup> element, the table header should come just below those. the <tfoot> element needs to
wrap the part of the table that is the footer — this might be a final row with items in the previous rows summed, for example. ...
...it will appear below the table header or sometimes footer, depending on how you decided to structure it. note: <tbody> is always included in every table, implicitly if you don't specify it in your code. ...
Index - Learn web development
should put it somewhere where you can easily find it, maybe on your desktop, in your home folder, or at the root of your hard drive. 39 html basics beginner, codingscripting, html, learn, web, l10n:priority html is not a programming language; it is a markup language that defines the structure of your content. html consists of a series of elements, which you use to enclose, or
wrap, different parts of the content to make it appear a certain way, or act a certain way. the enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. for example, take the following line of content: 40 how the web works beginner, client, dns, http, ip, infrastructure, learn, server, tcp, l10n:priority ...
...e are a few other things you could learn about table html, but we have really given all you need to know at this moment in time. at this point, you might want to go and learn about styling html tables — see styling tables. 229 html table basics article, beginner, codingscripting, html, learn, tables, basics, cell, col, colgroup, colspan, header, row, rowspan that just about
wraps up the basics of html tables. in the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people. 230 introduction to html codingscripting, html, introduction to html, landing, links, structure, text, head, semantics at its heart, html is a fairly simple language made up of elements, which c...
...assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla! 249 responsive images article, beginner, codingscripting, design, graphics, guide, html, image, intermediate, jpeg, png, pictures, captions, hyperlinks, img, picture, sizes, src, srcset that's a
wrap for responsive images — we hope you enjoyed playing with these new techniques. as a recap, there are two distinct problems we've been discussing here: 250 video and audio content article, audio, beginner, guide, html, video, captions, subtitles, track and that's a
wrap; we hope you had fun playing with video and audio in web pages! in the next article, we'll look at other w...
Handling text — strings in JavaScript - Learn web development
program is raising such errors, then go back and check all your strings to make sure you have no missing quote marks. the following will work if you previously defined the variable string — try it now: let badstring = string; badstring; badstring is now set to have the same value as string. single quotes vs. double quotes in javascript, you can choose single quotes or double quotes to
wrap your strings in. both of the following will work okay: let sgl = 'single quotes.'; let dbl = "double quotes"; sgl; dbl; 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 ret...
...n our console: 'front ' + 242; you might expect this to return 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. try the following (we are using the typeof operator to check whether the variable is a number or a string): let mydate = '19' + '67'; typeof mydate; if you have a numeric variable that you want to convert to a string but not change otherwise, or a string variable that you want to convert to a number but not change otherwise, you can use the following two constructs: ...
... be fiddly to write: let score = 9; let highestscore = 10; let output = 'i like the song "' + song + '". i gave it a score of ' + (score/highestscore * 100) + '%.'; template literals simplify this enormously: output = `i like the song "${ song }". i gave it a score of ${ score/highestscore * 100 }%.`; there is no more need to open and close multiple string pieces — the whole lot can just be
wrapped in a single pair of backticks. when you want to include a variable or expression inside the string, you include it inside a ${ } construct, which is called a placeholder. you can include complex expressions inside template literals, for example: let examscore = 45; let examhighestscore = 70; examreport = `you scored ${ examscore }/${ examhighestscore } (${ math.round((examscore/examhighestsc...
Beginning our React todo list - Learn web development
roject, we're going to provide two things: an app() function to replace the one you have now, and some css to style your app. ...
... text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-
wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: no
wrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2...
... #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-
wrap:
wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; displa...
Starting our Svelte Todo list app - Learn web development
ou'll see our todos.svelte component being rendered: adding static markup for the moment we will start with a static markup representation of our app, so you can see what it will look like. ...
...olor: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn__primary:disabled { color: darkgrey; background-color:#565656; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-
wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: no
wrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2...
... #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-
wrap:
wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; displa...
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
put the following contents inside it: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let name = '' const addtodo = () => { dispatch('addtodo', name) name = '' } const oncancel = () => name = '' </script> <form on:submit|preventdefault={addtodo} on:keydown={e => e.key === 'escape' && oncancel()}> <h2 class="label-
wrapper"> <label for="todo-0" class="label__lg">what needs to be done?</label> </h2> <input bind:value={name} type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled={!name} class="btn btn__primary btn__lg">add</button> </form> here we are binding the <input> to the name variable with bind:value={name} and disabling the add button when it is em...
...nce to the name input dom node const addtodo = () => { dispatch('addtodo', name) name = '' nameel.focus() // give focus to the name input } const oncancel = () => { name = '' nameel.focus() // give focus to the name input } </script> <form on:submit|preventdefault={addtodo} on:keydown={e => e.key === 'escape' && oncancel()}> <h2 class="label-
wrapper"> <label for="todo-0" class="label__lg">what needs to be done?</label> </h2> <input bind:value={name} bind:this={nameel} type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled={!name} class="btn btn__primary btn__lg">add</button> </form> try the app out — type a new todo name in to the <input> field, press tab to give focus to the add ...
...={name} bind:this={nameel} use:selectonfocus type="text" id="todo-0" autocomplete="off" class="input input__lg" /> with a few lines of code we can add functionality to regular html elements, in a very reusable and declarative way. it just takes an import and a short directive like use:selectonfocus that clearly depicts its purpose. and we can achieve this without the need to create a custom
wrapper element like textinput, myinput or similar. moreover, you can add as many use:action directives as you want to an element. also, we didn't have to struggle with onmount(), ondestroy() or tick() — the use directive takes care of the component lifecycle for us. other actions improvements in the previous section, while working with the todo components, we had to deal with bind:this, tick(), ...
Vue conditional rendering: editing existing todos - Learn web development
this is a useful way to help reinforce everything you've learned so far. this code sets up the core of the edit functionality. we create a form with an <input> field for editing the name of our to-do.
...this is a useful way to help reinforce everything you've learned so far. this code sets up the core of the edit functionality. we create a form with an <input> field for editing the name of our to-do. ther...
... we've also added "edit" and "delete" buttons: the "edit" button, when clicked, will toggle displaying the todoitemeditform component so we can use it to edit our todo item, via an event handler function called toggletoitemeditform(). this handler will set an isediting flag to true. to do that, we'll need to first define it inside our dat...
Introduction to automated testing - Learn web development
a very similar way to gulp, except that it relies on tasks specified in a config file, rather than using written javascript. see getting started with grunt for more details. you can also run tasks directly using npm scripts located inside your package.json file, without needing to install any kind of extra task runner system. this works on the premise that things like gulp plugins are basically
wrappers around command line tools. so, if you can work out how to run the tools using the command line, you can then run them using npm scripts. it is a bit trickier to work with, but can be rewarding for those who are strong with their command line skills. why npm scripts? provides a good introduction with a good deal of further information. using commercial testing services to speed up browser te...
...ients available to allow you to make calls to the api using your favourite environment, be it php, java, node.js, etc. let's have a brief look at how we'd access the api using node.js and node-saucelabs. first, set up a new npm project to test this out, as detailed in setting up node and npm. use a different directory name than before, like sauce-test for example. install the node sauce labs
wrapper using the following command: npm install saucelabs create a new file inside your project root called call_sauce.js. give it the following contents: const saucelabs = require('saucelabs'); let myaccount = new saucelabs({ username: "your-sauce-username", password: "your-sauce-api-key" }); myaccount.getaccountdetails(function (err, res) { console.log(res); myaccount.getservicesta...
... clients you can use to interact with the api, including clients for nodejs, python, ruby, java and php. below is an example on how to interact with the testingbot api with the nodejs client testingbot-api. first, set up a new npm project to test this out, as detailed in setting up node and npm. use a different directory name than before, like tb-test for example. install the node testingbot
wrapper using the following command: npm install testingbot-api create a new file inside your project root called tb.js. give it the following contents: const testingbot = require('testingbot-api'); let tb = new testingbot({ api_key: "your-tb-key", api_secret: "your-tb-secret" }); tb.gettests(function (err, tests) { console.log(tests); }); you'll need to fill in your testingbot key a...
Setting up your own test automation environment - Learn web development
e google_test_multiple if you are using a mac and do decide to test safari, you might get an error message along the lines of "could not create a session: you must enable the 'allow remote automation' option in safari's develop menu to control safari via webdriver." if you get this, follow the given instruction and try again. so here we've done the test as before, except that this time we've
wrapped it inside a function, searchtest(). we've created new browser instances for multiple browsers, then passed each one to the function so the test is performed on all three browsers! fun huh? let's move on, look at the basics of webdriver syntax, in a bit more detail. webdriver syntax crash course let's have a look at a few key features of the webdriver syntax. for more complete details, you s...
...cepts a value that specifies the time to wait in milliseconds — the method returns a promise that resolves at the end of that time, at which point the code inside the then() executes. in this case we get the title of the current page with the gettitle() method, then return a pass or fail message depending on what its value is. we could add a sleep() method to our quick_test.js test too — try
wrapping your last line of code in a block like this: driver.sleep(2000).then(function() { input.sendkeys('filling in my form'); input.getattribute("value").then(function(value) { if(value !== '') { console.log('form input editable'); } }); }); webdriver will now wait for 2 seconds before filling in the form field. we then test whether its value got filled in (i.e. is not empty) ...
...ium, check out getting started with selenium for automated website testing, and instant selenium node.js tests. filling in sauce labs test details programmatically you can use the sauce labs api to annotate your test with more details, such as whether it passed, the name of the test, etc. ...
Accessibility API cross-reference
a dial or a knob. msaa only. dial n/a n/a n/a a dialog or message box. dialog dialog dialog dialog <dialog> a list of references to members of a group, such as a static table of contents. directory see <nav> if it really is a table of contents, use <toc> containing <toci> elements (which are
wrappers for internal hyperlinks in such a table). for an index, use <index> with a <l>(list) inside. no default semantics in html, but semantics and other accessibility features may be provided with aria. see also span n/a n/a n/a <div> <div> but if you need custom semantic structure, use <nonstruct> instead window that corresponds to an mdi document. ...
... indicator n/a n/a n/a abstract role - a generic type of widget that allows user input. input n/a hypertext link that can be on image or text link n/a link <a> <link> according to the pdf 1.7 spec, a <link> must not be a direct child of a <toci> (table of contents item). in such a case, they should be
wrapped in a <reference> pragmatically however, user agents should expect to find <link> tags as direct children of <toci> abstract role - a perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. such a...
...d in a summary of the page. such a page summary could be generated dynamically by a user agent or assistive technology. landmark n/a hypertext link that can be on image or text link n/a link <a> <link> according to the pdf 1.7 spec, a <link> must not be a direct child of a <toci> (table of contents item). ...
Accessible Toolkit Checklist
ge font themes. go beyond section 508. implement true usability for everyone, and make your toolkit follow the guidelines for each platform. the approaches there are two basic kinds of toolkits, which each provide different challenges when implementing accessibility: native widget toolkits , like eclipse and wxwidgets, already have some accessibility built-in. these toolkits
wrap the widgets implemented by the os with a consistent api for each platform. since the individual widgets predominately come from the operating system, they already implement standard keyboard commands and follow the operating system's visual theme. also, assistive technologies already understand native widgets so it is only necessary to implement microsoft active accessibility (msaa) api support f...
...stent api for each platform. since the individual widgets predominately come from the operating system, they already implement standard keyboard commands and follow the operating system's visual theme. also, assistive technologies already understand native widgets so it is only necessary to implement microsoft active accessibility (msaa) api support for custom controls. however, be aware that the
wrapping layer will introduce accessibility bugs, and thus you will need to test extensively and fill in the holes. you will also need to provide a way for custom and owner drawn controls to easily accessibility api support, as wxwidgets does. there will be custom and owner drawn controls -- there always are. for example, lists of checkboxes are implemented in windows with images of checked and unchec...
...cancel button alt+space opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable. default tab order should be in document order. ...
Chrome registration
t can only be loaded in the main process. note: extensions can't currently (bug 1131065) register components to load in the content process using the manifest file so this flag is largely useless to extension developers. component {09543782-22b1-4a0b-ba07-9134365776ee} maincomponent.js process=main component {98309951-ac89-4642-afea-7b2b6216bcef} contentcomponent.js process=content xpcnative
wrappers chrome packages can decide whether to use the xpcnative
wrapper security mechanism to automatically protect their code against malicious content that they might access. see safely accessing content dom from chrome for details. this flag is enabled by default since firefox 1.5. disabling it manually was possible by specifying xpcnative
wrappers=no until firefox 4. note: support for this flag...
...r security mechanism to automatically protect their code against malicious content that they might access. see safely accessing content dom from chrome for details. this flag is enabled by default since firefox 1.5. disabling it manually was possible by specifying xpcnative
wrappers=no until firefox 4. note: support for this flag has been removed in gecko 2.0. you can no longer disable xpcnative
wrappers. to update your add-on to work without this flag: if your add-on depends upon xbl bindings attached to content objects (that is, it needs to be able to call functions or get and set properties created by the xbl binding), you'll need to use the object's
wrappedjsobject property to obtain a
wrapped object. if you need to call functions or access properties defined by the content -- for exa...
...s (that is, it needs to be able to call functions or get and set properties created by the xbl binding), you'll need to use the object's
wrappedjsobject property to obtain a
wrapped object. if you need to call functions or access properties defined by the content -- for example, if your add-on wants to add a button to the page that calls a javascript function defined by the page. the xpcnative
wrappers flag applies only to content packages; it is not recognized for locale or skin registration. example chrome manifest content necko jar:comm.jar!/content/necko/ locale necko en-us jar:en-us.jar!/locale/necko/ content xbl-marquee jar:comm.jar!/content/xbl-marquee/ content pipnss jar:pipnss.jar!/content/pipnss/...
PromiseWorker.jsm
e by the post function described above. atransferlist to transfer an arraybuffer object, pass an array containing it as atransferlist argument. myworker.post('func', [buffer], null, [buffer]); this is simpler if the you know what to transfer at the callsite. basepromiseworker.meta above code can also be done with the meta object. each special data argument that you want to transfer, you can
wrap in a basepromiseworker.meta object. the above example can be rewritten like this: myworker.post('func', [new basepromiseworker.meta(buffer, {transfers: [buffer]})]); this is convenient if the function's arguments are generated by some other functions or passed from somewhere else. post callsite doesn't have to know which object should be transferred. for example: myworker.post('func', [foo(),...
...data from worker to main thread just as it was possible to transfer special data from main thread to worker, it is possible to transfer data from the worker to the main thread. transferring is possible only when resolving the promise from the worker. unlike when sending/transferring from the main thread, transferring from worker does not require each piece of data that you want transferred to be
wrapped in its own meta object. instead, the whole return should be
wrapped. also unlike sending/transferring from the main thread, when sending/transferring from worker there are no alternative syntaxes, it must be
wrapped in a meta object. this example shows how to transfer a single value, which is an arraybuffer. return new promiseworker.meta(abuf, {transfers: [abuf]}); if you want to return an ...
...nsferring from the main thread, when sending/transferring from worker there are no alternative syntaxes, it must be
wrapped in a meta object. this example shows how to transfer a single value, which is an arraybuffer. return new promiseworker.meta(abuf, {transfers: [abuf]}); if you want to return an object or an array and transfer only certain parts of this data, it would all have to be return
wrapped in this meta object like so: return new promiseworker.meta({ thebuf: abuf, othernontrans: 'this string is not transfered but copied' }, {transfers: [abuf]}); a simple demo showing 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 suppo...
Sqlite.jsm
sqlite.jsm offers some compelling advantages over the low-level storage xpcom interfaces: automatic statement management. sqlite.jsm will create, manage, and destroy statement instances for you. you don't need to worry about caching created statement instances, destroying them when you are done, etc. this translates to fewer lines of code to talk to sqlite. all operations are asynchronous. use of synchronous storage apis is discouraged because they block the main thread. all the functionality in sqlite.jsm is asynchronous. easier memory management. ...
... if the original connection is using the shared cache, this parameter will be ignored and the clone will be as privileged as the original connection. transactioninprogress this boolean property indicates whether a transaction is in progress. this is rarely needed by external callers. shrinkmemory() this function can be called to shrink the memory usage of the connection. this is a glorified
wrapper around the pragma shrink_memory statement, which tells sqlite to shrink its memory usage (by clearing caches, etc). while calling this has the benefit of shrinking memory, it can make your database slower, especially if you will be interacting with it shortly after calling this function. this is because sqlite will need to page the database back into memory from disk. therefore, caution shoul...
...nts that were discarded. table and schema management these apis deal with management of tables and database schema. getschemaversion() the user-set version associated with the schema for the current database. if no schema version has been set, this will return the string "0". setschemaversion(value) sets value as the new version associated with the schema for the current database. this is a
wrapper around the pragma user_version statement. tableexists(name) this function determines whether a table exists in the current database. it returns a promise 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...
NSS_3.12_release_notes.html
_sha tls_dh_anon_with_camellia_256_cbc_sha tls_ecdh_anon_with_null_sha tls_ecdh_anon_with_rc4_128_sha tls_ecdh_anon_with_3des_ede_cbc_sha tls_ecdh_anon_with_aes_128_cbc_sha tls_ecdh_anon_with_aes_256_cbc_sha bugs fixed the following bugs have been fixed in nss 3.12. bug 354403: nsslist_createiterator returns pointer to a freed memory if the function fails to allocate a lock bug 399236: pkix
wrapper must print debug output into stderr bug 399300: pkix error results not freed after use. bug 414985: crash in pkix_pl_ocsprequest_destroy bug 421870: strsclnt crashed in pkix tests. bug 429388: vfychain.main leaks memory bug 396044: warning: usage of uninitialized variable in ckfw/object.c(174) bug 396045: warning: usage of uninitialized variable in ckfw/mechanism.c(719) bug 401986: mac os x le...
...- null pointer dereference in cert_certchainfromcert bug 353374: klocwork 76494 - null ptr derefs in cert_formatname bug 353375: klocwork 76513 - null ptr deref in nsscertificatelist_docallback bug 353413: klocwork 76541 free uninitialized pointer in cert_findcerturlextension bug 353416: klocwork 76593 null ptr deref in nsscryptokiprivatekey_setcertificate bug 353423: klocwork bugs in nss/lib/pk11
wrap/dev3hack.c bug 353739: klocwork null ptr dereferences in instance.c bug 353741: klocwork cascading memory leak in mpp_make_prime bug 353742: klocwork null ptr dereference in ocsp_decoderesponsebytes bug 353748: klocwork null ptr dereferences in pki3hack.c bug 353760: klocwork null pointer dereference in p7decode.c bug 353763: klocwork null ptr dereferences in pk11cert.c bug 353773: klocwork null ...
...rror message wrongly uses the term database bug 391651: need config.mk file for windows vista bug 396322: fix secutil's code and nss tools that print public keys bug 417641: miscellaneous minor nss bugs bug 334914: hopefully useless null check of out it in jar_find_next bug 95323: ckfw should support cipher operations. ...
Python binding for NSS
vides an abstraction of common operating system services but because nss and nspr are tightly bound python-nss exposes elements of nspr. for information on nss and nspr, see the following: network security services (nss). nss project page. netscape portable runtime. nspr project page. nspr reference. nspr api documentation. design goals nss and nspr are c language api's which python-nss "
wraps" and exposes to python programs. the design of python-nss follows these basic guiding principles: be a thin layer with almost a one-to-one mapping of nss/nspr calls to python methods and functions. programmers already familiar with nss/nspr will be quite comfortable with python-nss. be "pythonic". the term pythonic means to follow accepted python paradigms and idoms in the python language an...
...es and values to be justified when printing objects the following classes were added rsagenparams the following class methods were added nss.nss.certificate.get_extension nss.nss.pk11slot.generate_key_pair nss.nss.dsapublickey.format nss.nss.dsapublickey.format_lines the following module functions were added nss.nss.pub_
wrap_sym_key the following internal utilities were added pystring_utf8 secitem_new_alloc() the following class constructors were modified to accept intialization parameters keypqgparams (dsa generation parameters) the following were deprecated nss.nss.make_line_pairs (replaced by nss.nss.make_line_fmt_tuples) deprecated func...
...ease 0.7.0 release date 2009-09-18 scm tag source download change log general modifications: add support for symmetric encryption/decryption more support for digests (hashes) the following classes added: pk11symkey pk11context the following methods and functions added: get_best_
wrap_mechanism get_best_key_length key_gen derive get_key_length digest_key clone_context digest_begin digest_op cipher_op finalize digest_final read_hex hash_buf sec_oid_tag_str sec_oid_tag_name sec_oid_tag_from_name key_mechanism_type_name key_mechanism_type_from_name pk11_attribute_type_name pk11_att...
NSPR functions
he application. call pr_cleanup to shut down nspr and clean up its resources. pr_cleanup error reporting nss uses nspr's thread-specific error code to report errors. call pr_geterror to get the error code of the last failed nss or nspr function. call pr_seterror to set the error code, which can be retrieved with pr_geterror later. the nss functions port_geterror and port_seterror are simply
wrappers of pr_geterror and pr_seterror. pr_geterror pr_seterror calendar time nss certificate verification functions take a prtime parameter that specifies the time instant at which the validity of the certificate should verified. the nspr function pr_now returns the current time in prtime. pr_now interval time the nspr socket i/o functions pr_recv and pr_send (used by the nss ssl functions) tak...
...rt a time interval in seconds or milliseconds to printervaltime. pr_secondstointerval pr_millisecondstointerval nspr i/o layering nspr file descriptors can be layered, corresponding to the layers in the network stack. the ssl library in nss implements the ssl protocol as an nspr i/o layer, which sits on top of another nspr i/o layer that represents tcp. ...
...rotocol as an nspr i/o layer, which sits on top of another nspr i/o layer that represents tcp. you can implement an nspr i/o layer that
wraps your own tcp socket code. the following nspr functions allow you to create your own nspr i/o layer and manipulate it. pr_getuniqueidentity pr_createiolayerstub pr_getdefaultiomethods pr_getidentitieslayer pr_getlayersidentity pr_pushiolayer pr_popiolayer
wrapping a native file descriptor if your current tcp socket code uses the standard bsd socket api, a lighter-weight method than creating your own nspr i/o layer is to simply import a native file descriptor into nspr. this method is convenient and works for most applications. pr_importtcpsocket socket i/o functions as mentioned above, the ssl library in nss implements the ssl protocol as an nspr i/...
Bytecode Descriptions
k: val ⇒ val throw a typeerror if val is null or undefined. implements: requireobjectcoercible. but most instructions that require an object will perform this check for us, so of the dozens of calls to requireobjectcoercible in the spec, we need this instruction only for destructuring assignment and initialization. toasynciter stack: iter, next ⇒ asynciter create and push an async iterator
wrapping the sync iterator iter. next should be iter's .next method. implements: createasynctosynciterator. the spec says this operation takes one argument, but that argument is a record with two relevant fields, [[iterator]] and [[nextmethod]]. used for for await loops. setprototype mutateproto stack: obj, protoval ⇒ obj set the prototype of obj. obj must be an object. implements: b.3.1 proto ...
...whether awaiting 'value' can be skipped. this is part of an optimization for await expressions. programs very often await values that aren't promises, or promises that are already resolved. we can then sometimes skip suspending the current frame and returning to the microtask loop. if the circumstances permit the optimization, tryskipawait replaces value with the result of the await expression (un
wrapping the resolved promise, if any) and pushes true. otherwise, it leaves value unchanged and pushes 'false'. resumekind operands: (generatorresumekind resumekind (encoded as uint8_t)) stack: ⇒ resumekind pushes one of the generatorresumekind values as int32value. checkresumekind stack: rval, gen, resumekind ⇒ rval handle throw and return resumption. gen must be the generator object for t...
...step 28 ("note: a separate environment record is needed..."). note: the spec also pushes a new variableenvironment on entry to every function, but the vm takes care of that as part of pushing the stack frame, before the function script starts to run, so jsop::pushvarenv is not needed. format: jof_scope enterwith operands: (uint32_t staticwithindex) stack: val ⇒ push a withenvironmentobject
wrapping toobject(val) to the environment chain. implements: evaluation of with statements, steps 2-6. operations that may need to consult a withenvironment can't be correctly implemented using optimized instructions like jsop::getlocal. a script must use the deoptimized jsop::getname, bindname, setname, and delname instead. since those instructions don't work correctly with optimized locals and argum...
SpiderMonkey 1.8.5
lueroot and js_addstringroot; similar changes were made for js_addnamedroot and js_removeroot. since jsdoubles are now stored in the jsval, instead of on the heap, we no longer need to define roots for them. compartments spidermonkey 1.8.5 introduces the concept of compartments. a compartment is a global object, a context, and a set of related objects with no outside references (crosscompartment
wrappers excepted). the new garbage collector can perform per-container garbage collection, which can be a significant performance improvement for certain workloads. no compartment may execute js code or call into jsapi on two os threads at the same time. for more information, see spidermonkey compartments. type changes jsval the base data type, jsval, which represents all possible values in javascri...
...ations; embedders are expected find another mechanism (such as a watchdog thread) to trigger regular callbacks, via js_triggeroperationcallback. regexp apis js_clearregexpstatics, js_newregexpobject, js_newregucexpobject, and js_setregexpinput now receive a pointer to the global object. this change was made in bug 571355 to move the regexp statics out of the context, to simplify cross compartment
wrappers. property accessors js_propertystub, js_resolvestub, and user-defined functions of type jspropertyop (e.g. getters and setters) changed from passing jsvals to passing jsid as part of bug 549143. this bug introduced "fat" (64-bit) unboxed valued into the engine. garbage collection js_markgcthing was changed in bug 549143 to mark jsvals rather than void pointers (gc root addresses), improving t...
...s to help tie lexical scope to the conservative gc for cases where the compiler might optimize away important stack/register roots (such as when we access the jschars in a jsstring). a c analogue, js_anchorptr, was introduced with bug 630209. bug 630209 also removed the need for js_newscriptobject, by modifying the script compilation interfaces to handle the creation and management of the object
wrapper directly; similarly, the script execution interfaces now accept a jsobject pointer than a pointer to jsscript. affected interfaces are: js_compilescript js_compilescriptforprincipals js_compilescriptforprincipalsversion js_compileucscript js_compileucscriptforprincipals js_compileucscriptforprincipalsversion js_compilefile js_compilefilehandle js_compilefilehandleforprincipals js_co...
SpiderMonkey 1.8.7
lueroot and js_addstringroot; similar changes were made for js_addnamedroot and js_removeroot. since jsdoubles are now stored in the jsval, instead of on the heap, we no longer need to define roots for them. compartments spidermonkey 1.8.5 introduces the concept of compartments. a compartment is a global object, a context, and a set of related objects with no outside references (crosscompartment
wrappers excepted). the new garbage collector can perform per-container garbage collection, which can be a significant performance improvement for certain workloads. no compartment may execute js code or call into jsapi on two os threads at the same time. for more information, see spidermonkey compartments. type changes jsval the base data type, jsval, which represents all possible values in javascri...
...ations; embedders are expected find another mechanism (such as a watchdog thread) to trigger regular callbacks, via js_triggeroperationcallback. regexp apis js_clearregexpstatics, js_newregexpobject, js_newregucexpobject, and js_setregexpinput now receive a pointer to the global object. this change was made in bug 571355 to move the regexp statics out of the context, to simplify cross compartment
wrappers. property accessors js_propertystub, js_resolvestub, and user-defined functions of type jspropertyop (e.g. getters and setters) changed from passing jsvals to passing jsid as part of bug 549143. this bug introduced "fat" (64-bit) unboxed valued into the engine. garbage collection js_markgcthing was changed in bug 549143 to mark jsvals rather than void pointers (gc root addresses), improving t...
... to help tie lexical scope to the conservative gc for cases where the compiler might optimize away important stack/register roots (such as when we access the jschars in a jsstring). a c analogue, js_anchorptr, was introduced with bug 630209. bug 630209 also removed the need for js_newscriptobject, by modifying the script compilation interfaces to handle the creation and management of the object
wrapper directly; similarly, the script execution interfaces now accept a jsobject pointer than a pointer to jsscript. affected interfaces are: js_compilescript js_compilescriptforprincipals js_compilescriptforprincipalsversion js_compileucscript js_compileucscriptforprincipals js_compileucscriptforprincipalsversion js_compilefile js_compilefilehandle js_compilefilehandleforprincipals js_co...
Shell global objects
that was installed, but it references the same shared memory. getsharedarraybuffer performs an ordering memory barrier. setsharedarraybuffer() install the sharedarraybuffer object in the cross-worker mailbox. setsharedarraybuffer performs an ordering memory barrier. shapeof(obj) get the shape of obj (an implementation detail). groupof(obj) get the group of obj (an implementation detail). un
wrappedobjectshavesameshape(obj1, obj2) returns true iff obj1 and obj2 have the same shape, false otherwise. both objects are un
wrapped first, so this can be used on objects from different globals. sleep(dt) sleep for dt seconds. compile(code) compiles a string to bytecode, potentially throwing. parsemodule(code) parses source text as a module and returns a module object. setmoduleresolvehook(...
... at a time. if fun is not careful, hook could be asked to retrieve the source code for compilations that occurred long before it was set, and that it knows nothing about. the reverse applies as well: the original hook, that we reinstate after the call to fun completes, might be asked for the source code of compilations that fun performed, and which, presumably, only hook knows how to find.
wrapwithproto(obj)
wrap an object into a noop
wrapper with prototype semantics. note: this is not fuzzing safe because it can be used to construct deeply nested
wrapper chains that cannot exist in the wild. trackedopts(fun) returns an object describing the tracked optimizations of fun, if any. if fun is not a scripted function or has not been compiled by ion, null is returned. dumpscopechain(obj) ...
...hen obj is given, gc only its zone. if zone is given, gc any zones that were scheduled for gc via schedulegc. if shrinking is passed as the optional second argument, perform a shrinking gc rather than a normal gc. minorgc([abouttooverflow]) run a minor collector on the nursery. when abouttooverflow is true, marks the store buffer as about-to-overflow before collecting. gcparam(name [, value])
wrapper for js_[gs]etgcparameter. the name is one of: maxbytes maxmallocbytes gcbytes gcnumber mode unusedchunks totalchunks slicetimebudget markstacklimit highfrequencytimelimit highfrequencylowlimit highfrequencyhighlimit highfrequencyheapgrowthmax highfrequencyheapgrowthmin lowfrequencyheapgrowth dynamicheapgrowth dynamicmarkslice allocationthreshold minempty...
Mozilla internal string guide
etter_copies(), the caller would need to free the string: { char16_t* val; getvalue(&val); if (somecondition) { // don't forget to free the value! ns_free(val); return ns_error_failure; } ... // and later, still don't forget to free! ns_free(val); } with getter_copies() you never have to worry about this. you can just use getter_copies() to
wrap a string class argument, and the class will remember to free the buffer when it goes out of scope: { nsstring val; getvalue(getter_copies(val)); // val will free itself here if (somecondition) return ns_error_failure; ... // and later, still nothing to free } the resulting code is much simpler, and easy to read. literal strings a literal string is a raw strin...
...alues when an nsastring or nsacstring is required. two user-defined literals are provided that implicitly convert to const nsstring& resp. const nscstring&: ""_ns for 8-bit literals, converting implicitly to const nscstring& u""_ns for 16-bit literals, converting implicitly to const nsstring& the benefits of the user-defined literals may seem unclear, given that nsdependentcstring will also
wrap a string value in an nscstring. the advantage of the user-defined literals is that the length of these strings is calculated at compile time, so the string does not need to be scanned at runtime to determine its length. nowadays, all supported platforms have 16-bit literals using u""_ns, so we longer need to rely on macros for portability. // call init(const char16_t*) - bad signature, will nee...
...ing nsautocstring class member variables nsstring nscstring method parameter types nsastring nsacstring use abstract classes for parameters. use const nsastring& for "in" parameters and nsastring& for "out" parameters. retrieving "out" string/wstrings nsstring nscstring use getter_copies(). similar to nsstring / nscstring.
wrapping character buffers nsdependentstring nsdependentcstring
wrap const char* / const char16_t* buffers. literal strings nsliteralstring nsliteralcstring similar to nsdependent[c]string, but pre-calculates length at build time. appendix b - nsastring reference read-only methods. length() isempty() isvoid() - xpconnect will convert void nsastrings to javascr...
Components.utils.cloneInto
t to attach the object to. options : object this optional parameter is an object with the following optional properties: clonefunctions: a boolean value that determines if functions should be cloned. if omitted the default value is false. cloned functions have the same semantics as functions exported using components.utils.exportfunction. see cloning objects that have functions below.
wrapreflectors: a boolean value that determines if objects reflected from c++, such as dom objects, should be cloned. if omitted the default value is false. see cloning objects that contain dom elements below. returns a reference to the cloned object. example this add-on script creates an object, clones it into the content window and makes it a property of the content window global: // add-on script ...
... {clonefunctions: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that contain dom elements by default, if the object you clone contains objects that are reflected from c++, such as dom elements, the cloning operation will fail with an error. ...
... cloning operation will fail with an error. if you pass the {
wrapreflectors:true} flag, then the object you clone is allowed to contain these objects: // add-on script var addonscriptobject = { body: contentwindow.document.body }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {
wrapreflectors: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(window.addonscriptobject.body.innerhtml); }, false); access to these objects in the target scope is subject to the normal security checks. ...
Components.utils.evalInWindow
ble as of firefox 34. see bug 1042840 for details. this function enables code running in a more-privileged javascript context to evaluate a string in a less-privileged javascript context. the result is structured cloned back to the original context, unless it is native (for example, if it returns a dom node, this is not structured cloned, because the original context will see that through an xray
wrapper already), so it's guaranteed to behave predictably. this is useful for privileged code, such as add-on code, to access variables and apis defined in web content. even so, while the code is being evaluated it is in the content's context, so the caller has to be prepared for the possibility that the content could have redefined behavior (for example, a setter in the script may have been redef...
...texporthelpers option set in the sandbox() constructor. syntax var result = components.utils.evalinwindow(script, window); parameters script : string the script to evaluate in the other window. window : object the window in which to evaluate the script. returns the result of evaluating the script. if this is just native (for example, a dom node), then the function relies on xray
wrappers to
wrap the returned content, otherwise the result is structured-cloned. this does impose some restrictions on the sorts of things that can be returned: in particular, the result can't contain any functions, because functions can't be structured-cloned. example suppose a page script defines a variable: // page-script.js var somelocalvariable = { name: "selection1", node: document.documen...
...if the returned object contains a function, calls to evalinwindow() will throw an error: // page-script.js function bar() { } var somelocalvariablecontainingafunction = {name: "selection1", foo : bar}; // add-on-script.js components.utils.evalinwindow("somelocalvariablecontainingafunction", contentwindow); // error, function can't be cloned ...
Components.utils
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 import into the scope. isxray
wrapper() test whether a given object is an xray or not. unload() unloads a js module loaded with import(). isdead
wrapper() determines whether this object is backed by a deadobjectproxy. lookupmethod() looks up a native (i.e. declared in the interface) method or property of an xpcom object. serves the same purpose as xpcnative
wrapper. makeobjectpropsn...
...may only be called from javascript code. nondeterministicgetweakmapkeys() return the keys in a weak map. this operation is non-deterministic because it is affected by the scheduling of the garbage collector and the cycle collector. this should only be used to write tests of the interaction of the gc and cc with weak maps. ...
...weakmapkeys() return the keys in a weak map. this operation is non-deterministic because it is affected by the scheduling of the garbage collector and the cycle collector. this should only be used to write tests of the interaction of the gc and cc with weak maps. obsolete since gecko 45 the function was moved to threadsafechromeutils nukesandbox() recompute
wrappers() to be called from js only. this is for gecko internal use only, and may disappear at any moment. reporterror() reports a javascript error object to the error console. setwantxrays() to be called from js only. this is for gecko internal use only, and may disappear at any moment. scheduleprecisegc() schedules a garbage collection cycle for some time in ...
Components.utils.unwaiveXrays
. example suppose a page script adds an expando to its global window: // page script foo = "i'm an expando"; by default, chrome code won't see foo, because it sees the content window with xray vision, but the chrome code can waive xray protection. ...
...ay protection: // chrome code // contentwindow is an xray var isxray = components.utils.isxray
wrapper(gbrowser.contentwindow); // true // expandos are not visible in xrays var foo = gbrowser.contentwindow.foo; // undefined // you can waive xray vision for an object var waived = components.utils.waivexrays(gbrowser.contentwindow); isxray = components.utils.isxray
wrapper(waived); // false foo = waived.foo; // "i'm an expando" // waiving is transitive isxray = components.utils.isxray
wrapper(waived.document); // false // use unwaivexrays to undo the waiver var unwaived = components.utils.unwaivexrays(waived); isxray = components.utils.isxray
wrapper(unwaived); ...
...itive isxray = components.utils.isxray
wrapper(waived.document); // false // use unwaivexrays to undo the waiver var unwaived = components.utils.unwaivexrays(waived); isxray = components.utils.isxray
wrapper(unwaived); // true foo = unwaived.foo; // undefined // unwaiving is transitive isxray = components.utils.isxray
wrapper(unwaived.document); // true ...
mozIStorageProgressHandler
ection indicating the connection for which the callback was invoked. return value return true to abort the request or false to allow it to continue. ...
...ion and how-to article mozistorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database. ...
...istorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database. mozistoragevaluearray
wraps an array of sql values, such as a result row. ...
nsIDOMWindowUtils
read only. exceptions thrown ns_error_not_available there is no current inner window displaydpi float the dpi of the display. read only. doccharsetisforc...
...on with adata. both compositionupdate event and compositionend event are fired automatically if they are necessary. adata the data value of dispatching composition event. if atype is "compositionstart" or "compositioncommitasis", this is ignored. alocale the locale value of dispatching composition event. getclassname() returns the real classname (possibly of the mostly-transparent security
wrapper) of aobj. sendcontentcommandevent() generate a content command event. cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. void sendcontentcommandevent( in astring atype, in nsitransferable atransferable optional ); parameters atype type of command content event to send. can be one o...
...ptcontents(). void stoppccountprofiling(); parameters none. suppresseventhandling() suppresses/unsuppresses user initiated event handling in window's document and subdocuments. void suppresseventhandling( in boolean asuppress ); parameters asuppress suspendtimeouts() suspend/resume timeouts on this window and its descendant windows. void suspendtimeouts(); parameters none.
wrapdomfile()
wraps the specified nsidomfile in a dom file object. nsidomfile
wrapdomfile( nsifile afile ); parameters afile the nsifile object to
wrap in a dom file object. return value an nsidomfile object, which is a dom file. you can then use that object with dom methods that use the file api. ...
Working with windows in chrome code
elements which are descendants of your chrome document (but nevertheless in a different context). accessing content documents assume you have a document loaded in a <tabbrowser>, <browser>, or <iframe> element inside your document. you can use browser.contentdocument to access that document and browser.contentwindow to access the window object of that document. you should be aware of xpcnative
wrappers when working with untrusted content. with xpcnative
wrappers 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 xpcnative
wrapper to work with content javascript directly can lead to security problems. see interaction between privileged and non-privileged pages if you need to interact wit...
...indowwatcher for passing an arbritrary javascript object it is still possible to pass any javascript object using nsiwindowwatcher, it just takes a little more effort. in this example a single object is passed, though it is possible to pass multiple objects and primitives using a combination of this and the example above. // in the calling code var args = { param1: true, param2: 42 }; args.
wrappedjsobject = args; var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); watcher.openwindow(null, url, windowname, features, args); // in the window code var args = window.arguments[0].
wrappedjsobject; this uses the
wrappedjsobject trick. by passing args to openwindow xpconnect will automat...
...ject = args; var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); watcher.openwindow(null, url, windowname, features, args); // in the window code var args = window.arguments[0].
wrappedjsobject; this uses the
wrappedjsobject trick. by passing args to openwindow xpconnect will automatically
wrap it as a generic nsisupports. the opened window can then just get at the underlying javascript object using
wrappedjsobject. advanced data sharing the above code is useful when you need to pass data from one window to another or to a set of windows, but sometimes you just want to share a javascript variable in common between different windows. you could declare a local variable in each window al...
Document.getElementsByTagNameNS() - Web APIs
utton> </body> </html> potential workaround for other browsers which do not support if the desired browser did not support xpath, another approach (such as traversing the dom through all its children, identifying all @xmlns instances, etc.) would be necessary to find all tags with the desired local name and namespace, but xpath is much faster. ...
...not support xpath, another approach (such as traversing the dom through all its children, identifying all @xmlns instances, etc.) would be necessary to find all tags with the desired local name and namespace, but xpath is much faster. ...
...versing the dom through all its children, identifying all @xmlns instances, etc.) would be necessary to find all tags with the desired local name and namespace, but xpath is much faster. ...
Element: overflow event - Web APIs
the overflow event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible). it is a proprietary event specific to gecko (firefox). ...
...ate (only works for elements styled with overflow != visible). it is a proprietary event specific to gecko (firefox). ...
...nknown examples <div id="
wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #
wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var
wrapper = document.getelementbyid("
wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle");
wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false);
wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { ...
Element: underflow event - Web APIs
rd underflow event, which is specific to firefox, is fired when an element is no longer overflowed by its content. this only works for elements for which overflow is not set to visible. the counterpart overflow event is fired when overflow occurs. ...
... for elements for which overflow is not set to visible. the counterpart overflow event is fired when overflow occurs. ...
...nknown examples <div id="
wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #
wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var
wrapper = document.getelementbyid("
wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle");
wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false);
wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { ...
SubtleCrypto.deriveKey() - Web APIs
as a cryptokey using subtlecrypto.importkey(). derivedkeyalgorithm is an object defining the algorithm the derived key will be used for. for hmac: pass an hmackeygenparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass an aeskeygenparams object. extractable is a boolean indicating whether it will be possible to export the key using subtlecrypto.exportkey() or subtlecrypto.
wrapkey(). keyusages is an array indicating what can be done with the derived key. note that the key usages must be allowed by the algorithm set in derivedkeyalgorithm. possible values of the array are: encrypt: the key may be used to encrypt messages. decrypt: the key may be used to decrypt messages. sign: the key may be used to sign messages. verify: the key may be used to verify si...
...he algorithm set in derivedkeyalgorithm. possible values of the array are: encrypt: the key may be used to encrypt messages. decrypt: the key may be used to decrypt messages. sign: the key may be used to sign messages. verify: the key may be used to verify signatures. derivekey: the key may be used in deriving a new key. "derivebits": the key may be used in deriving bits. "
wrapkey": the key may be used to
wrap a key. "un
wrapkey": the key may be used to un
wrap a key. return value result is a promise that fulfills with a cryptokey. exceptions the promise is rejected when one of the following exceptions are encountered: invalidaccesserror raised when the master key is not a key for the requested derivation algorithm or if the cryptokey.usages value of t...
...or raised when the master key is not a key for the requested derivation algorithm or if the cryptokey.usages value of that key doesn't contain derivekey. notsupported raised when trying to use an algorithm that is either unknown or isn't suitable for derivation, or if the algorithm requested for the derived key doesn't define a key length. syntaxerror raised when keyusages is empty but the un
wrapped key is of type secret or private. supported algorithms the three algorithms supported by derivekey() have quite different characteristics and are appropriate in different situations. ecdh ecdh (elliptic curve diffie-hellman) is a key-agreement algorithm. it enables two people who each have an ecdh public/private key pair to generate a shared secret: that is, a secret that they — and noo...
Window.find() - Web APIs
awholeword unimplemented boolean. ...
... awholeword unimplemented boolean. if true, specifies a whole word search. this is not implemented; see bug 481513. asearchinframes boolean. if true, specifies a search in frames. ...
... awholeword unimplemented boolean. if true, specifies a whole word search. this is not implemented; see bug 481513. asearchinframes boolean. if true, specifies a search in frames. returns true if the string is found; otherwise, false. ...
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
is passed to settimeout, 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. ...
... in array methods like foreach, reduce, etc. and as shown below, using call to set this doesn't work either. ...
...f settimeout and setinterval is preserved, but... settimeout.call(myarray, myarray.mymethod, 2.0*1000); // prints "zero,one,two" after 2 seconds settimeout.call(myarray, myarray.mymethod, 2.5*1000, 2); // prints "two" after 2.5 seconds note: javascript 1.8.5 introduced the function.prototype.bind() method to set the value of this for all calls to a given function. this can avoid having to use a
wrapper function to set the value of this in a callback. example using bind(): myarray = ['zero', 'one', 'two']; myboundmethod = (function (sproperty) { console.log(arguments.length > 0 ? this[sproperty] : this); }).bind(myarray); myboundmethod(); // prints "zero,one,two" because 'this' is bound to myarray in the function myboundmethod(1); // prints "one" settimeout(myboundmethod, 1.0*1000); //...
WindowProxy - Web APIs
specifications specification status comment html living standardthe definition of 'windowproxy' in that specification. ...
... specifications specification status comment html living standardthe definition of 'windowproxy' in that specification. ...
... specifications specification status comment html living standardthe definition of 'windowproxy' in that specification. living standard initial definition. ...
ARIA annotations - Accessibility
aren’t part of the new aria annotations features, but they are of central relevance. role="mark" — semantically denotes html elements containing text that is marked/highlighted for reference purposes. this is semantically equivalent to the html <mark> element. role="suggestion" — semantically denotes a single proposed change to an editable document. this should be used on an element that
wraps a single insertion and deletion (see role="insertion" and role="deletion" above). role="comment" — semantically denotes a comment/reaction to some content on the page, or to a previous comment. to provide a semantic association between the document content being annotated and the annotation, an aria-details attribute can be set on the annotated content that contains the id of the annotated ...
...letion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span>.</p> however, this often isn’t enough — when you’ve got a content change like the one above that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not. this is the job of role="suggestion", which should be set on an element
wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"><span role="deletion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span></span>. </p> we could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via aria-details: <p>freida’s pet is a <span role="suggestion" aria-...
... let’s say we have a comment box like so: <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> we’ve used role="comment" to mark this up as a comment. to associate the comment with the text being commented, we need to
wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment. <mark> is a suitable element for this purpose (a comment is a reference annotation), so the annotation could look like this: <p>the last half of the song is a slow-rising crescendo that peaks at the <mark aria-details="thread-1">end of the guitar solo</mark>, before fadin...
Box-shadow generator - CSS: Cascading Style Sheets
' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="
wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="colorpicker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_select...
...t_color"> </div> </div> <div class="block info"> <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> </div> </div> </div> </div> <div class="
wrap-right"> <div id="shadow_properties" class="category"> <div class="title"> shadow properties </div> <div class="group"> <div class="group property"> <div class="ui-slider-name"> inset </div> <div class="ui-checkbox" data-topic='inset'></div> </div> ...
...play : block; position: absolute; z-index: -1; } #obj-after { height: 100%; width: 100%; background: #ddd; border: 1px solid #ccc; text-align: right; display : block; position: absolute; z-index: -1; } /******************************************************************************/ /******************************************************************************/ /** * controls */ .
wrap-left { float: left; overflow: hidden; } .
wrap-right { float: right; overflow: hidden; } .
wrap-left > * { float: left; } .
wrap-right > * { float: right; } @media (min-width: 960px) { .
wrap-left { width: 45%; } .
wrap-right { width: 55%; } } @media (max-width: 959px) { .
wrap-left { width: 30%; } .
wrap-right { width: 70%; } } #controls { color: #444; margin: 10px 0...
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
d max-content — these keywords are defined in the css intrinsic and extrinsic sizing specification, and can be used in place of a length unit. in the live example below for instance i have two paragraph elements that contain a string of text. the first paragraph has a width of min-content. in a browser that supports this keyword you should be able to see that the text has taken all of the soft
wrapping opportunities available to it, becoming as small as it can be without overflowing. this then, is the min-content size of that string. essentially, the longest word in the string is dictating the size. the second paragraph has a value of max-content and so it does the opposite. it gets as big as it possibly can be, taking no soft-
wrapping opportunities. it would overflow the box it is in if t...
... proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.” the second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. ...
...as the box gets smaller space is then just removed from the third item. in practice the shrinking behaviour does tend to give you reasonable results. ...
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
— why do we have two specifications that sometimes appear to be doing the same thing? the most straightforward answer to this question is defined in the specifications themselves. flexbox is a one-dimensional layout method whereas grid layout is a two-dimensional layout method. the example below has a flex layout. as already described in the basic concepts article, flex items can be allowed to
wrap but, once they do so, each line becomes a flex container of its own. when space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other. if we create a very similar layout using grid, we can control the layout in both rows and columns. these examples point to another key difference between these layout methods. in grid layout ...
...ver item sizing needs to happen on the items themselves. in some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your css. there is rarely a right or wrong answer. as a rule of thumb, if you are adding widths to flex items in order to make items in one row of a
wrapped flex container line up with the items above them you really want two-dimensional layout. in this case it is likely that the component would be better laid out using css grid layout. it isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension...
...ever layout method the parent would have been part of. this is much easier to see with an example. in the following live example i have a flex container with three child elements. one of these flex items has two elements nested inside it, which would not ordinarily participate in flex layout. flex layout only applies to the direct children of a flex container. by adding display: contents to the
wrapper around the nested elements, you can see that that item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container. you can try removing the display: contents line to see it return. note that this only removes the box from the layout; the sub-children don’t become direct children in any other way. you can see that as i ...
CSS reference - CSS: Cascading Style Sheets
display<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-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfon...
...nter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-rotate:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-blockoverflow-inlineoverflow-
wrapoverflow-xoverflow-yoverscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-yppad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percent...
... basic selectors basic selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors. universal selector *, ns|*, *|*, |* t...
Visual formatting model - CSS: Cascading Style Sheets
targeted and styled like a regular box because there is no element to target. the same thing happens when you have text runs interspersed with block elements. in the next example i have a string inside a <div>; in the middle of my string is a <p> element containing part of the text. the string is split into three boxes in the box tree. the part of the string before the paragraph element is
wrapped in an anonymous box, then we have the <p>, which generates a box, and then another anonymous box. something to consider about these anonymous boxes is that they inherit styles from their direct parent, but you cannot change how they look by targeting the anonymous box. in my examples, i am using a direct child selector to target the children of the container. this does not change the anonymou...
...om their direct parent, but you cannot change how they look by targeting the anonymous box. in my examples, i am using a direct child selector to target the children of the container. this does not change the anonymous boxes, as they are not a child of the parent block. inline anonymous boxes are created when a string is split by an inline element, for example, a sentence that includes a section
wrapped with <em></em>. this splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section
wrapped in the <em> element, then a final anonymous inline box. as with the anonymous block boxes, these anonymous inline boxes cannot be styled independently in the way the <em> can; they just inherit the styles of their container. other formatting contexts ...
...urning strings of text into a grid item with an anonymous box. multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted. table layout will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with display: table-row. line boxes line boxes are the boxes that
wrap each line of text. you can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a background color. in the following example, the line boxes following the floated <div> are shortened to
wrap around the float. the background of the box runs behind the float, as the floated item has been taken out of flow. positioning schem...
align-content - CSS: Cascading Style Sheets
teractive example below use grid layout to demonstrate some of the values of this property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on single line flex containers (i.e. ones with flex-
wrap: no
wrap). syntax /* basic positional alignment */ /* align-content does not take left and right values */ align-content: center; /* pack items around the center */ align-content: start; /* pack items from the start */ align-content: end; /* pack items from the end */ align-content: flex-start; /* pack flex items from the start */ align-content: flex-end; /* pack flex items fro...
...n> = [ first | last ]? ...
... first | last ]? ...
grid-column-end - CSS: Cascading Style Sheets
l definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
...screte formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
...ass="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div> css .
wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comm...
grid-column-start - CSS: Cascading Style Sheets
definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
...rete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
...ass="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div> css .
wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comm...
grid-row-end - CSS: Cascading Style Sheets
rmal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
...ediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
...ass="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div> css .
wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comm...
grid-row-start - CSS: Cascading Style Sheets
al definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
...iscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
...ass="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> </div> css .
wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .
wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comm...
scroll-snap-stop - CSS: Cascading Style Sheets
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. ...
...is duplicated from scroll-snap-type with minor variances. ...
...ot, body { height: 100%; display: flex; align-items: center; justify-content: space-between; flex-flow: column no
wrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row no
wrap; } .container.y { width: 256px; height: 256px; flex-flow: column no
wrap; } /* 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-...
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
est value in the range of permitted values. if the value entered into the element exceeds this, the element fails constraint validation. if the value of the max attribute isn't a number, then the element has no maximum value. there is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may
wrap around; for example, this allows you to specify a time range from 10 pm to 4 am. maxlength valid for text, search, url, tel, email, and password, it defines the maximum number of characters (as utf-16 code units) the user can enter into the field. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the field has no maximum length. this ...
...value is applied. if the min attribute is valid and a non-empty value is less than the minimum allowed by the min attribute, constraint validation will prevent form submission. see client-side validation for more information. there is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may
wrap around; for example, this allows you to specify a time range from 10 pm to 4 am. minlength valid for text, search, url, tel, email, and password, it defines the minimum number of characters (as utf-16 code units) the user can enter into the entry field. this must be an non-negative integer value smaller than or equal to the value specified by maxlength. if no minlength is specified, or an i...
...ur, including a rangeunderflow error if the value is less than 2, rangeoverflow if greater than 10, stepmismatch if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the step attribute), or typemismatch if the value is not a number. for the input types whose domain of possible values is periodic (that is, at the highest possible value, the values
wrap back around to the beginning rather than ending), it's possible for the values of the max and min properties to be reversed, which indicates that the range of permitted values starts at min,
wraps around to the lowest possible value, then continues on until max is reached. this is particularly useful for dates and times, such as when you want to allow the range to be from 8 pm to 8 am: <input ty...
<textarea> - HTML: Hypertext Markup Language
whether the <textarea> is subject to spell checking by the underlying browser/os. the value can be: true: indicates that the element needs to have its spelling and grammar checked. default : indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. false : indicates that the element should not be spell checked.
wrap indicates how the control
wraps text. possible values are: hard: the browser automatically inserts line breaks (cr+lf) so that each line has no more than the width of the control; the cols attribute must also be specified for this to take effect. soft: the browser ensures that all line breaks in the value consist of a cr+lf pair, but does not insert any additional line breaks. off : lik...
...ically inserts line breaks (cr+lf) so that each line has no more than the width of the control; the cols attribute must also be specified for this to take effect. soft: the browser ensures that all line breaks in the value consist of a cr+lf pair, but does not insert any additional line breaks. off : like soft but changes appearance to white-space: pre so line segments exceeding cols are not
wrapped and the <textarea> becomes horizontally scrollable. if this attribute is not specified, soft is its default value. styling with css <textarea> is a replaced element — it has intrinsic dimensions, like a raster image. by default, its display value is block. compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc. being easily manip...
... yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yes
wrapchrome full support yesedge full support 12firefox full support yesie full support yesopera full support yessafari full support ye...
JavaScript modules - JavaScript
follows: index.html main.js modules/ canvas.js square.js note: all of the examples in this guide have basically the same structure; the above should start getting pretty familiar. the modules directory's two modules are described below: canvas.js — contains functions related to setting up the canvas: create() — creates a canvas with a specified width and height inside a
wrapper <div> with a specified id, which is itself appended inside a specified parent element. returns an object containing the canvas's 2d context and the
wrapper's id. createreportlist() — creates an unordered list appended inside a specified
wrapper element, which can be used to output report data into. returns the list's id. square.js — contains: name — a constant containing t...
... color: color }; } you can export functions, var, let, const, and — as we'll see later — classes. they need to be top-level items; you can't use export inside a function, for example. a more convenient way of exporting all the items you want to export is to use a single export statement at the end of your module file, followed by a comma-separated list of the features you want to export
wrapped in curly braces. for example: export { name, draw, reportarea, reportperimeter }; importing features into your script once you've exported some features out of your module, you need to import them into your script to be able to use them. the simplest way to do this is as follows: import { name, draw, reportarea, reportperimeter } from './modules/square.js'; you use the import statement, f...
...eportperimeter }; importing features into your script once you've exported some features out of your module, you need to import them into your script to be able to use them. the simplest way to do this is as follows: import { name, draw, reportarea, reportperimeter } from './modules/square.js'; you use the import statement, followed by a comma-separated list of the features you want to import
wrapped in curly braces, followed by the keyword from, followed by the path to the module file — a path relative to the site root, which for our basic-modules example would be /js-examples/modules/basic-modules. however, we've written the path a bit differently — we are using the dot (.) syntax to mean "the current location", followed by the path beyond that to the file we are trying to find. thi...
BigInt - JavaScript
th 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 operators are supported as well, except >>> (zero-fill right shift) as all bigints are signed. also unsupported is the unary operator (+), in order to not break asm.js. ...
..., 0n] mixed.sort() // default sorting behavior // ↪ [ -12n, 0, 0n, 10, 4n, 4, 6 ] mixed.sort((a, b) => a - b) // won't work since subtraction will not work with mixed types // typeerror: can't convert bigint to number // sort with an appropriate numeric comparator mixed.sort((a, b) => (a < b) ? -1 : ((a > b) ? ...
... within a conditional test like an if statement. if (0n) { console.log('hello from the if!') } else { console.log('hello from the else!') } // ↪ "hello from the else!" 0n || 12n // ↪ 12n 0n && 12n // ↪ 0n boolean(0n) // ↪ false boolean(12n) // ↪ true !12n // ↪ false !0n // ↪ true constructor bigint() creates a new bigint value. static methods bigint.asintn()
wraps a bigint value to a signed integer between -2width-1 and 2width-1 - 1. bigint.asuintn()
wraps a bigint value to an unsigned integer between 0 and 2width - 1. instance methods bigint.prototype.tolocalestring() returns a string with a language-sensitive representation of this number. overrides the object.prototype.tolocalestring() method. bigint.prototype.tostring() returns a string repr...
Object - JavaScript
longer true (e.g. with object.setprototypeof). changes to the object prototype object are seen by all objects through prototype chaining, unless the properties and methods subject to those changes are overridden further along the prototype chain. 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. 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(). see also the object initializer / literal syntax. deleting...
...the value. when called in a non-constructor context, object behaves identically to new object(). see also the object initializer / literal syntax. deleting a property from an object there isn't any method in an object itself to delete its own properties (such as map.prototype.delete()). to do so, one must use the delete operator. constructor object() creates a new object object. it is a
wrapper for the given value. static methods object.assign() copies the values of all enumerable own properties from one or more source objects to a target object. object.create() creates a new object with the specified prototype object and properties. object.defineproperty() adds the named property described by a given descriptor to an object. object.defineproperties() adds the named prope...
...for example, this (untested) code will pre-conditionally execute custom logic before the built-in logic or someone else's extension is executed. when a function is called, the arguments to the call are held in the array-like "variable" arguments. for example, in the call myfn(a, b, c), the arguments within myfn's body will contain 3 array-li...
Symbol() constructor - JavaScript
let sym3 = symbol('foo') the above code creates three new symbols. note that symbol("foo") does not coerce the string "foo" into a symbol. ...
...") does not coerce the string "foo" into a symbol. ...
...g 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() 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. ...
async function - JavaScript
functions. if you use it outside of an async function's body, you will get a syntaxerror. the purpose of async/await is to simplify the syntax necessary to consume promise-based apis. the behavior of async/await is similar to combining generators and promises. async functions always return a promise. if the return value of an async function is not explicitly a promise, it will be implicitly
wrapped in a promise. for example, the following: async function foo() { return 1 } ...is equivalent to: function foo() { return promise.resolve(1) } the body of an async function can be thought of as being split by zero or more await expressions. top-level code, up to and including the first await expression (if there is one), is run synchronously. in this way, an async function without ...
... consider the following rewrite of the above code. it returns null if processdatainworker rejects with an er...
... v = await downloadfallbackdata(url) } return processdatainworker(v) } in the above example, notice there is no await statement after the return keyword, although that would be valid too: the return value of an async function is implicitly
wrapped in promise.resolve - if it's not already a promise itself (as in this example). return await promisevalue vs. return promisevalue the implicit
wrapping of return values in promise.resolve does not imply that return await promisevalue is functionally equivalent to return promisevalue. consider the following rewrite of the above code. it returns null if processdatainworker rejects with an error: async function getprocesseddata(url) { let v try { v = await downloaddata(url) } catch(e) { v = await downloadfallbackdata(url) } ...
Modules - Archive of obsolete content
ces of the built-in constructors. this is exactly what sandboxes are for. a sandbox is a global object that lives in a separate compartment. compartments are a fairly recent addition to spidermonkey, and can be seen as a separate memory space. objects living in one compartment cannot be accessed directly from another compartment: they need to be accessed through an intermediate object, known as a
wrapper. compartments are very useful from a security point of view: each compartment has a set of privileges that determines what a script running in that compartment can and cannot do. compartments with chrome privileges have access to the components object, giving them full access to the host platform. in contrast, compartments with content privileges can only use those features available to ordina...
...ill you). otherwise, the compartment will have content privileges by default. rewriting the loadscript function using sandboxes, we end up with: function loadscript(url, imports) { let global = components.utils.sandbox(url); global.imports = imports; global.exports = {}; loader.loadsubscript(url, global); return global.exports; } note that the object returned by sandbox is a
wrapper to the sandbox, not the sandbox itself. a
wrapper behaves exactly like the
wrapped object, with one difference: for each property access/function it performs an access check to make sure that the calling script is actually allowed to access/call that property/function. if the script being loaded is less privileged than the loading script, the access is prevented, as the following example shows...
/loader - Archive of obsolete content
of a specific loader. the sdk builds a higher level api on top of this for handling unloads and performing cleanup: let unloadsubject = require('@loader/unload'); let observerservice = cc['@mozilla.org/observer-service;1']. ...
...ervice = cc['@mozilla.org/observer-service;1']. getservice(ci.nsiobserverservice); let observer = { observe: function onunload(subject, topic, reason) { // if this module is unloaded then `subject.
wrappedjsobject` will be // `unloadsubject`. `topic` will be `'sdk:loader:destroy'`, and // `reason` will be a string describing the reason (e.g. `'disable'`). if (subject.
wrappedjsobject === unloadsubject) console.log("i am about to unload, reason is " + reason); }}; observerservice.addobserver(observer, 'sdk:loader:destroy', false); unload the loader module exposes an unload() function that can be used to unload specific loader instance and undo changes made by modules loaded into it. unload takes loader as a first argument and optionally a reason string identi...
core/promise - Archive of obsolete content
= 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 prototype argument to achieve the same effect. treat all values as promises module provides a simple function for
wrapping values into promises: const { resolve } = require('sdk/core/promise'); var a = resolve(5).then(function(value) { return value + 2; }); a.then(console.log); // => 7 also resolve not only takes values, but 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 t...
...=> 7 also resolve not only takes values, but 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 cust...
system/unload - Archive of obsolete content
therefore, when you register an object with ensure(), you can call its destructor method yourself, you can let it happen for you, or you can do both. ...
... therefore, when you register an object with ensure(), you can call its destructor method yourself, you can let it happen for you, or you can do both. ...
Boxes - Archive of obsolete content
wrapping contents in html you can 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. ...
...
wrapping contents in html you can 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. ...
getAttributeNS - Archive of obsolete content
as some browsers do not support getattributens, the following might be used to work on them as well. while namespaced attributes are less common than namespaced elements, some standards such as xlink depend on them. note that all gecko-based browsers (including firefox) support dom:element.getattributens. this function is not necessary for gecko-based browsers. ...
...on current element, conditionally on whether its prefix matches a declared namespace see also http://www.w3.org/tr/dom-level-3-cor...mespaceurialgo ...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
e modified bsd license was originally created by the university of california at berkeley for distributing a unix-like operating system. because it has so few restrictions, it is often used by universities and the like for the products of research. however, the fact that software derived from bsd-licensed code can be redistributed under a different license creates the possibility that it will be
wrapped in another proprietary program. the deleted advertising clause the original bsd license contained an advertising clause, which stated that “any advertising for software using an modification of this source code must display the name of the original developer.” this clause has been removed. the modified bsd license is the version that does not include the advertising clause. mozilla pub...
...se permits more lax criteria for linking other code with the library. under the lgpl, a program that calls a library does not need to be published as a derivative work. note that the fsf currently does not recommend applying the lgpl to libraries. pros and cons programs that have been released under the gpl mandate that any derivative works also be released under the gpl, so the code cannot be
wrapped in a proprietary program. however, compared to the bsd license, its terms are complicated, and can be difficult for users to understand. points to understand about oss licenses i’ll explain some important aspects of oss licensing that you should be aware of. you don’t have to give it away there’s nothing in an oss license that prevents you from charging money for software. one of the...
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
that the content resizes until it reaches its minimum size and begin to be cropped (cut), making ui elements disappear. you should test that your toolbar resizes gracefully and doesn't force firefox to crop content before it's strictly necessary. when you need something more elaborate than a button in your toolbar, you can use the toolbaritem element instead. this element is nothing more than a
wrapper, so you can have whatever xul content you want in it. however, you should keep in mind that odd-looking toolbars are likely to confuse and annoy users. use custom toolbar items sparingly. toolbar button icons creating the icons for toolbar buttons is one of the most difficult tasks when making extensions. it is not too hard to come up with some graphics for the buttons, but it can be hard to...
...ements to your toolbar that are not toolbarbutton or toolbaritem will cause it to fail. make sure your icons look ok while the customize dialog is open, and after clicking on the ok button. if you use xbl bindings, make sure everything works normally after customizing toolbars. all of this is very important to test because, when the dialog is opened, firefox changes the dom of the toolbar, adding
wrapper elements that allow the customization. this tends to break very specific css, and xbl bindings lose their internal state when moved around the dom. adding toolbar buttons to existing toolbars finally, there is the very common case where you just want to add one button to the main toolbar. in this case you still need to add the button to the palette using an overlay. in order to add your butt...
Source code directories overview - Archive of obsolete content
tables. it is used for the auto-completion feature on the url edit box (stored in netscape.hst in mozilla classic) and for the cached pages index (stored in fat.db in mozilla classic). this code originated at uc berkeley. directory contains the ldap sdk. docshell contains c interfaces and code for loading and displaying a single web page (e.g. scroll). the [#seamonkey-embedding embedding] code
wraps this code with higher level browser functions like forward, back and history. dom contains c interfaces and code for implementing and tracking dom (document object model) objects in javascript. it forms the c substructure which creates, destroys and manipulates built-in and user-defined objects according to the javascript script. for example, if the javascript script adds a user-defined attribu...
...ozilla classic), for plain text and html mail composition and for text fields and text areas throughout the product. the editor is designed like a "browser window with editing features" with extra classes for editing text and managing undo/redo. embedding contains c interfaces and code for generic high-level browser functions (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...
Space Manager High Level Design - Archive of obsolete content
mponent diagram nsspacemanager: the central point of management of the space taken up by floats in a block nsbanddata: provides information about the frames occupying a band of occupied or available space nsblockbanddata: a specialization of nsbanddata that is used by nsblockreflowstate to determine the available space, float impacts, and where floats are cleared. essentially a css-specific
wrapper for generic nsbanddata. bandrect: keeps the bounds of a band, along with the frames associated with the band. bandrects are a linked list (provided by prcliststr super-class) and also provide some geometry-management methods (splitvertically, splithorizontally) and some methods that query or manipulate the frames associated with the band (isoccupiedby, addframe, removeframe). bandlist: a sub...
... instance (which was setup in the blockreflowstate's constructor based on the space manager passed in and computed content area). blockbanddata then gets the band data from the space manager via a call to the space manager associated with the blockbanddata instance. the blockbanddata then walks the collection of trapezoids that were returned by the spacemanager method getbanddata (as nsbanddata
wrappers) and determines the right-most edge of the available space. the blockreflowstate then stores this available space rect for use in the rest of the reflow chain. use case 4: propagation of float damage: detecting and handling float damage this process is driven by the block frame. a non-dirty line is encountered by the block frame in reflowdirtylines block frame calls its propagatefloatd...
String Quick Reference - Archive of obsolete content
* 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! ...
...verting 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! ...
How to implement a custom XUL query processor component - Archive of obsolete content
be ok too. the querytype 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 querytype used in the xul template block. ...
... instead of a string for convenient comparison purposes // or null to say just use string value getbindingobjectfor: function(avar) { return null; }, // called when a rule matches this item. ...
insertItem - Archive of obsolete content
usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. ...
...with the given id to the toolbar. the new item is added just before the item given by the second argument. if the second argument is null, but the beforepermanent argument is true, the item is added to the beginning of the toolbar before the first permanent item. otherwise, if the beforepermanent argument is false, the new item is added to the end of the toolbar. the third argument can be used to
wrap the new item in another element. usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. some special ids may also be used to create special spacing items: separator: a separator, which is drawn as a vertical bar. spacer: a non-flexible space. spring: a flexible space. the method returns ...
textbox (Toolkit autocomplete) - Archive of obsolete content
e 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. 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 ...
...te. highlightnonmatches new in thunderbird 1 requires seamonkey 1.0 type: boolean gets and sets the value of the highlightnonmatches attribute. ignoreblurwhilesearching type: boolean gets and sets the value of the ignoreblurwhilesearching (or ignoreblurwhilesearching) attribute. inputfield type: textbox element in mozilla, the xul textbox is implemented as a
wrapper around an html input element. this read only property holds a reference to this inner input element. label type: string gets and sets the value of the label attribute. maxlength type: integer the maximum number of characters that the textbox allows to be entered. maxrows type: integer gets and sets the value of the maxrows attribute. minresultsforpop...
Textbox (XPFE autocomplete) - Archive of obsolete content
e 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. 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 ...
...te. highlightnonmatches new in thunderbird 1 requires seamonkey 1.0 type: boolean gets and sets the value of the highlightnonmatches attribute. ignoreblurwhilesearching type: boolean gets and sets the value of the ignoreblurwhilesearching (or ignoreblurwhilesearching) attribute. inputfield type: textbox element in mozilla, the xul textbox is implemented as a
wrapper around an html input element. this read only property holds a reference to this inner input element. issearching type: boolean this property is set to true while a search is occuring. iswaiting type: boolean this property is set to true during the period while waiting for the timeout between the time when a user has pressed a key and a search is performed. label type: strin...
Element Positioning - Archive of obsolete content
han that minimum size. examples of setting widths and heights <button label="1" style="width: 100px;"/> <button label="2" style="width: 100em; height: 10px;"/> <button label="3" flex="1" style="min-width: 50px;"/> <button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/> <textbox flex="1" style="max-width: 10em;"/> <description style="max-width: 50px">this is some boring but simple
wrapping text.</description> example 1 the first button will be displayed with a width of 100 pixels (px means pixels). you need to add the unit or the width will be ignored. example 2 the second button will be displayed with a height of ten pixels and a width of 100 ems (an em is the size of a character in the current font). example 3 the third button is flexible so it will grow based on ...
...he text input is flexible but will never grow to be larger than 10 ems. you will often want to use ems when specifying sizes with text in them. this unit is useful for textboxes so that the font can change and the textboxes would always be a suitable size, even if the font is very large. example 6 the description element is constrained to have a maximum width of 50 pixels. the text inside will
wrap to the next line, after fifty pixels. our find files dialog let's add some of these styles to the find files dialog. we'll make it so that the textbox will resize to fit the entire window. <textbox id="find-text" flex="1" style="min-width: 15em;"/> here, the text input has been made flexible. this way, it will grow if the user changes the size of the dialog. this is useful if the user wa...
Using the Editor from XUL - Archive of obsolete content
l character keys, that falls into nshtmleditor::editorkeypress(). nshtmleditor::editorkeypress() gets the character code from the key event, puts that into a string, and calls nshtmleditor::typedtext(), which simply calls nshtmleditor::inserttext(). nshtmleditor::inserttext() hides quite a bit of complexity in some stack-based classes. ...
...these functions call beforeedit() and afteredit() on the current typing rules. now, we initialize a nstextrulesinfo with the information about the string being inserted, and call willdoaction() on the current editing rules. ...
tabs - Archive of obsolete content
appenditem( label, value ) return type: element creates a new item ...
...ns(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata advanceselectedtab( dir,
wrap ) return type: no return value if the argument dir is set to 1, the currently selected tab changes to the next tab. if the argument dir is set to -1, the currently selected tab changes to the previous tab. if the
wrap argument is true, the adjustment will
wrap around when the first or last tab is reached. appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items. you may optionally set a value. the function returns the newly created element. getindexofitem( item ) return type: integer returns the zero-based position of th...
toolbar - Archive of obsolete content
toolbox this toolbar is a member of. this will either be the toolbox's parent (if it's in a toolbox), or, if the toolbar is an external toolbar (that is, one not contained in a toolbox), the id of the toolbox it should be considered to be part of. this makes it possible to have toolbars that are not contained within toolboxes, such as the add-on bar. methods insertitem( id, beforenode,
wrapper, beforepermanent ) not in seamonkey 1.x return type: element add an item with the given id to the toolbar. the new item is added just before the item given by the second argument. if the second argument is null, but the beforepermanent argument is true, the item is added to the beginning of the toolbar before the first permanent item. otherwise, if the beforepermanent argument is false, the...
...with the given id to the toolbar. the new item is added just before the item given by the second argument. if the second argument is null, but the beforepermanent argument is true, the item is added to the beginning of the toolbar before the first permanent item. otherwise, if the beforepermanent argument is false, the new item is added to the end of the toolbar. the third argument can be used to
wrap the new item in another element. usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. some special ids may also be used to create special spacing items: separator: a separator, which is drawn as a vertical bar. spacer: a non-flexible space. spring: a flexible space. the method returns ...
JS-Engine FAQ - Archive of obsolete content
t of mozilla browser which makes it available to script in the browser using xpconnect. an alternative would be to use built-in e4x. newly created threads in js from mozilla_1_8_branch causes to hang in windows patch from bug 351602 should fix the problem. after applying that patch, recompile js and define js_use_only_nspr_locks in the build. spidermonkey library loading mechanism? to write
wrappers in pure javascript to interface with any c library on the system there are mechanisms such as xpcshell, wxjs, jsdb, jsni coding spidermonkey in c check out this tutorial how to compile tamarin on linux/x86 there is a patch that allows you to compile it. rhino what is the performance between rhino js and native java rhino js is significantly slower in run-time than native java. even whe...
...ase 2 2005 09 19</tt>. how to compile javascript into java invoking compiler: java org.mozilla.javascript.tools.jsc.main [options] file1.js [file2.js...] this results in a class file. compiler options can be vied here. non-js-engine questions can i call functions in mozilla extensions from web page? no, accessing anything in the web page's script may lead to security problems. see xpcnative
wrapper. ...
Debug.msTraceAsyncCallbackStarting - Archive of obsolete content
hronous operation after the call to debug.mstraceasyncoperationcompleted. note: some debugging tools do not display the information sent to the debugger. asyncoperationid must correspond to the operation name previously returned from debug.mstraceasyncoperationstarting. example the following code provides an example of tracing an asynchronous call for a windows 8.x store app. function async
wrapperfunction() { var opid = debug.mstraceasyncoperationstarting('async trace'); dosomethingasync().then(function (result) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_success); debug.mstraceasynccallbackstarting(opid); // process result of async operation. }, function (error) { debug.mstraceasyncoperationcompleted(opid, debug.ms_a...
...tatus_success); debug.mstraceasynccallbackstarting(opid); // process result of async operation. }, function (error) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_error); debug.mstraceasynccallbackstarting(opid); }); debug.mstraceasynccallbackcompleted(); } function dosomethingasync() { return winjs.promise.as(true); } async
wrapperfunction(); requirements supported in the internet explorer 11 standards document mode. also supported in store apps (windows 8.1 and windows phone 8.1). not supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards. not supported in windows 8. ...
Debug.msTraceAsyncCallbackCompleted - Archive of obsolete content
.mstraceasyncoperationstarting. the possible values for status include: debug.ms_async_op_status_success debug.ms_async_op_status_canceled debug.ms_async_op_status_error note: some debugging tools do not display the information sent to the debugger. example the following code provides an example of tracing an asynchronous call for a windows 8.x store app. function async
wrapperfunction() { var opid = debug.mstraceasyncoperationstarting('async trace'); dosomethingasync().then(function (result) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_success); debug.mstraceasynccallbackstarting(opid); // process result of async operation. }, function (error) { debug.mstraceasyncoperationcompleted(opid, debug.ms_a...
...tatus_success); debug.mstraceasynccallbackstarting(opid); // process result of async operation. }, function (error) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_error); debug.mstraceasynccallbackstarting(opid); }); debug.mstraceasynccallbackcompleted(); } function dosomethingasync() { return winjs.promise.as(true); } async
wrapperfunction(); requirements supported in the internet explorer 11 standards document mode. also supported in store apps (windows 8.1 and windows phone 8.1). not supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards. not supported in windows 8. ...
JSObject - Archive of obsolete content
summary 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 un
wraps it to its original javascript object type. ...
...see the core javascript 1.5 guide for more information about data type conversions. 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. ...
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 componenttype, 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 componenttype 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...
...o 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 javaarray is passed back to java, the array is un
wrapped and can be used by java code. see the core javascript 1.5 guide for more information about data type conversions. in javascript 1.4 and later, the methods of java.lang.object are inherited by javaarray. backward compatibility javascript 1.3 and earlier the methods of java.lang.object are not inherited by javaarray. in addition, the tostring method is inherited from the object object and re...
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...
...see the core javascript 1.5 guide for more information about data type conversions. properties inherits public data members from the java class of which it is an instance as properties. ...
Building up a basic demo with Three.js - Game development
ed so far: you can also check it out on github. more shapes and materials now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. let's move the cube to the left, to make space for some friends. adding the following line just below the previous one: cube.position.x = -25; now onto more shapes and materials. what might happen when you add a torus,
wrapped in the phong material? try adding the following lines, just below the lines defining the cube. var torusgeometry = new three.torusgeometry(7, 1, 6, 12); var phongmaterial = new three.meshphongmaterial({color: 0xff9500}); var torus = new three.mesh(torusgeometry, phongmaterial); scene.add(torus); these lines will add a torus geometry; the torusgeometry() method's parameters define, and the p...
...e the render() function: var t = 0; now let's increase the value by a given constant value, on each frame of the animation. add the following lines, just below the requestanimationframe() invocation: t += 0.01; torus.scale.y = math.abs(math.sin(t)); we use math.sin, ending up with quite an interesting result. this scales the torus, repeating the process, as sin is a periodic function. we're
wrapping the scale value in math.abs, to pass the absolute values, greater or equal to 0. as sin is between -1 and 1, negative values might render out torus in unexpected way. in this case it looks black half the time. now, onto movement. moving aside from rotation, and scaling, we can additionally move objects around the scene. add the following, again just below our requestanimationframe() invoc...
Cross Axis - MDN Web Docs Glossary: Definitions of Web-related terms
is runs along the rows. alignment of items on the cross axis is achieved with the align-items property on the flex container or align-self property on individual items. ...
...case of a multi-line flex container, with additional space on the cross axis, you can use align-content to control the spacing of the rows. ...
Flex - MDN Web Docs Glossary: Definitions of Web-related terms
f the properties defined in the css flexible box layout module may be applied. the flex property is a shorthand for the flexbox properties flex-grow, flex-shrink and flex-basis. in addition <flex> can refer to a flexible length in css grid layout. ...
...ntent order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide: relationship of flexbox to other layout methods css flexbox guide: aligning items in a flex container css flexbox guide: ordering flex items css flexbox guide: controlling ratios of flex items along the main axis css flexbox guide: mastering
wrapping of flex items css flexbox guide: typical use cases of flexbox ...
Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
k. space can be assigned to the items themselves, or distributed between or around the items. flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items. ...
...ntent order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide: relationship of flexbox to other layout methods css flexbox guide: aligning items in a flex container css flexbox guide: ordering flex items css flexbox guide: controlling ratios of flex items along the main axis css flexbox guide: mastering
wrapping of flex items css flexbox guide: typical use cases of flexbox ...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
, for example, a browser in a web context. 478 validator beginner, glossary, security a validator is a program that checks for syntax errors in code. validators can be created for any format or language, but in our context we speak of tools that check html, css, and xml. 479 value codingscripting, glossary, needscontent in the context of data or an object
wrapper around that data, the value is the primitive value that the object
wrapper contains. in the context of a variable or property, the value can be either a primitive or an object reference. 480 variable codingscripting, glossary, javascript a variable is a named reference to a value. that way an unpredictable value can be accessed through a predetermined name. 481 ...
...s, javascript, and other computer languages. 504 world wide web glossary, infrastructure, www, world wide web the world wide web—commonly referred to as www, w3, or the web—is an interconnected system of public webpages accessible through the internet. the web is not the same as the internet: the web is one of many applications built on top of the internet. 505
wrapper codingscripting, glossary,
wrapper in programming languages such as javascript, a
wrapper is a function that is intended to call one or more other functions, sometimes purely for convenience, and sometimes adapting them to do a slightly different task in the process. 506 xforms codingscripting, glossary, obsolete, xforms xforms is a convention for building web fo...
Intrinsic Size - MDN Web Docs Glossary: Definitions of Web-related terms
r example, inline elements are sized intrinsically: width, height, and vertical margin and padding have no impact, though horizontal margin and padding do. how intrinsic sizes are calculated is defined in the css intrinsic and extrinsic sizing specification. intrinsic sizing takes into account the min-content and max-content size of an element. for text the min-content size would be if the text
wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-
wrapping as possible. for a box containing a string of text, the min-content size would be defined by the longest word. the keyword value of min-content for the width property will size an element according to the min-content size. the max-content size is the opposite — in the case of text, this would...
...sing an overflow, doing as much soft-
wrapping as possible. for a box containing a string of text, the min-content size would be defined by the longest word. the keyword value of min-content for the width property will size an element according to the min-content size. the max-content size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-
wrapping, even if an overflow was caused. the keyword value max-content exposes this behavior. ...
Value - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of data or an object
wrapper around that data, the value is the primitive value that the object
wrapper contains. in the context of a variable or property, the value can be either a primitive or an object reference. ...
... in the context of data or an object
wrapper around that data, the value is the primitive value that the object
wrapper contains. in the context of a variable or property, the value can be either a primitive or an object reference. ...
Pseudo-classes and pseudo-elements - Learn web development
o existing elements. pseudo-elements start with a double colon ::. ::pseudo-element-name note: some early pseudo-elements used the single colon syntax, so you may sometimes see this in code or examples. modern browsers support the early pseudo-elements with single- or double-colon syntax for backwards compatibility. for example, if you wanted to select the first line of a paragraph you could
wrap it in a <span> element and use an element selector; however, that would fail if the number of words you had
wrapped were longer or shorter than the parent element's width. as we tend not to know how many words will fit on a line — as that will change if the screen width or font-size changes — it is impossible to robustly do this by adding html. the ::first-line pseudo-element selector will d...
...lement's width. as we tend not to know how many words will fit on a line — as that will change if the screen width or font-size changes — it is impossible to robustly do this by adding html. the ::first-line pseudo-element selector will do this for you reliably — if the number of words increases and decreases it will still only select the first line. it acts as if a <span> was magically
wrapped around that first formatted line, and updated each time the line length changed. you can see that this selects the first line of both paragraphs. combining pseudo-classes and pseudo-elements if you wanted to make the first line of the first paragraph bold you could chain the :first-child and ::first-line selectors together. try editing the previous live example so it uses the following css.
Beginner's guide to media queries - Learn web development
debar { background-color: rgba(207, 232, 220, 0.5); padding: 10px; } article { margin-bottom: 1em; } we've made no layout changes, however the source of the document is ordered in a way that makes the content readable. this is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable. ...
...d li { border: 1px solid #666; padding: 10px; } open the grid layout example in the browser, or view the source. with the example open in your browser, make the screen wider and narrower to see the number of column tracks change. the nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. it might seem strange to
wrap up a section about media queries with a suggestion that you might not need one at all! however, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results. test your skills! you've reached the end of this article, but can you remember the most important information? you can find a test to verify that you've retained this information...
Normal Flow - Learn web development
horizontal-tb) — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them. in english therefore, or any other horizontal, top to bottom writing mode, block-level elements are laid out vertically. inline elements behave differently — they don't appear on new lines; instead, they sit on the same line as one another and any adjacent (or
wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. if there isn't space, then the overflowing text or elements will move down to a new line. if two adjacent elements both have the margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called margin collapsing, and we ha...
...ght is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
Other form controls - Learn web development
any default value is put inside the value attribute. note that even though you can put anything inside a <textarea> element (including other html elements, css, and javascript), because of its nature, it is all rendered as if it was plain text content. (using contenteditable on non-form controls provides an api for capturing html/"rich" content instead of plain text). visually, the text entered
wraps and the form control is by default resizable. modern browsers provide a drag handle that you can drag to increase/decrease the size of the text area. the following screenshots show default, focused, and disabled <textarea> elements in firefox 71 and safari 13 on macos, and edge 18, yandex 14, firefox 71 and chrome 79 on windows 10. note: you can find a slightly more interesting example of t...
...cter widths. this is effectively the starting width, as it can be changed by resizing the <textarea>, and overriden using css. the default value if none is specified is 20. rows specifies the number of visible text rows for the control. this is effectively the starting height, as it can be changed by resizing the <textarea>, and overriden using css. the default value if none is specified is 2.
wrap specifies how the control
wraps text. the values are soft (the default value), which means the text submitted is not
wrapped but the text rendered by the browser is
wrapped; hard (the cols attribute must be specified when using this value), which means both the submitted and rendered texts are
wrapped, and off, which stops
wrapping. controlling textarea resizability the ability to resize a <t...
Structuring a page of content - Learn web development
he main title for the page, the site logo, and the navigation menu. the title and logo appear side by side once styling is applied, and the navigation appears below those two items. a main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails. a footer containing copyright information and credits. you need to add a suitable
wrapper for: the header the navigation menu the main content the welcome text the image sidebar the footer you should also: apply the provided css to the page by adding another <link> element just below the existing one provided at the start. hints and tips use the w3c nu html checker to catch unintended mistakes in your html, css, and svg — mistakes you might have otherwise missed...
...s to do this assessment; you just need to put the provided css inside an html element. the provided css is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page. if you are getting stuck and can't envisage what elements to put where, draw out a simple block diagram of the page layout, and write on the elements you think should
wrap each block. this is extremely helpful. example the following screenshot shows an example of what the homepage might look like after being marked up. 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 t...
Responsive images - Learn web development
r, portrait image on mobile, which zooms in on the person. the <picture> element allows us to implement just this kind of solution. returning to our original not-responsive.html example, we have an image that badly needs art direction: <img src="elva-800w.jpg" alt="chris standing up holding his daughter elva"> let's fix this, with <picture>! like <video> and <audio>, the <picture> element is a
wrapper containing several <source> elements that provide different sources for the browser to choose from, followed by the all-important <img> element. the code in responsive.html looks like so: <picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="chris standing up holding hi...
...o create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths. test your skills! you've reached the end of this article, but can you remember the most important information? you can find a detailed assessment that tests these skills at the end of the module; see mozilla splash page. summary that's a
wrap for responsive images — we hope you enjoyed playing with these new techniques. as a recap, there are two distinct problems we've been discussing here: art direction: the problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in for a mobile layout.
HTML table basics - Learn web development
need to use the <tr> element ('tr' stands for 'table row'). let's investigate this now. place the four cells you've already created inside <tr> tags, like so: <tr> <td>hi, i'm your first cell.</td> <td>i'm your second cell.</td> <td>i'm your third cell.</td> <td>i'm your fourth cell.</td> </tr> now you've made one row, have a go at making one or two more — each row needs to be
wrapped in an additional <tr> element, with each cell contained in a <td>. this should result in a table that looks something like the following: hi, i'm your 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 ...
...le attribute are background-color:#dcc48e; border:4px solid #c1437a; the last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px; see how you get on with the example. if you get stuck, or want to check your work, you can find our version on github as timetable-fixed.html (see it live also). summary that just about
wraps up the basics of html tables. in the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people. overview: tables next in this module html table basics html table advanced features and accessibility structuring planet data ...
Graceful asynchronous programming with Promises - Learn web development
return response.blob(); } }); each call to .then() creates a new promise. this is very useful; because the blob() method also returns a promise, we can handle the blob object it returns on fulfillment by invoking the .then() method of the second promise. because we want to do something a bit more complex to the blob than just run a single method on it and return the result, we'll need to
wrap the function body in curly braces this time (otherwise it'll throw an error). add the following to the end of your code: let promise3 = promise2.then(myblob => { }) now let's fill in the body of the executor function. add the following lines inside the curly braces: let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; docum...
... promise() constructor. the main situation in which you'll want to do this is when you've got code based on an old-school asynchronous api that is not promise-based, which you want to promis-ify. this comes in handy when you need to use existing, older project code, libraries, or frameworks along with modern promise-based code. let's have a look at a simple example to get you started — here we
wrap a settimeout() call with a promise — this runs a function after two seconds that resolves the promise (using the passed resolve() call) with a string of "success!". let timeoutpromise = new promise((resolve, reject) => { settimeout(function(){ resolve('success!'); }, 2000); }); resolve() and reject() are functions that you call to fulfil or reject the newly-created promise. in this ca...
Ember resources and troubleshooting - Learn web development
ather than having them filled with bespoke logic. see also: reactiveconf 2017: secrets of the glimmer vm what is the state of the mut helper? mut was not covered in this tutorial and is really baggage from a transitional time when ember was moving from two-way bound data to the more common and easier-to-reason-about one-way bound data flow. it could be thought of as a build-time transform that
wraps its argument with a setter function. more concretely, using mut allows for template-only settings functions to be declared: <checkbox @value={{this.somedata}} @ontoggle={{fn (mut this.somedata) (not this.somedata)}} /> whereas, without mut, a component class would be needed: import component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@...
...t-helper and ember-box. both of these try to solve the problems of mut by introducing more obvious / "less magic" concepts, avoiding build-time transforms and implicit glimmer vm behavior. with ember-set-helper: <checkbox @value={{this.somedata}} @ontoggle={{set this "somedata" (not this.somedata)}} /> with ember-box: {{#let (box this.somedata) as |somedata|}} <checkbox @value={{un
wrap somedata}} @ontoggle={{update somedata (not this.somedata)}} /> {{/let}} note that none of these solutions are particularly common among members of the community, and as a whole, people are still trying to figure out an ergonomic and simple api for setting data in a template-only context, without backing js. what is the purpose of controllers? controllers are singletons, which may help m...
Focus management with Vue refs - Learn web development
so when we call focusonedit(), the "edit" button has not been rendered yet. instead, we need to wait until after vue undergoes the next dom update cycle. to do that, vue components have a special method called $nexttick(). this method accepts a callback function, which then executes after the dom updates. since the focusoneditbutton() method needs to be invoked after the dom has updated, we can
wrap the existing function body inside a $nexttick() call. focusoneditbutton() { this.$nexttick(() => { const editbuttonref = this.$refs.editbutton; editbuttonref.focus(); }); } now when you activate the "edit" button and then cancel or save your changes via the keyboard, focus should be returned to the "edit" button. success! vue lifecycle methods next, we need to move focus to the ed...
...eupdate() — runs whenever data in your component changes, but before the changes are rendered to the dom. updated() — runs whenever data in your component has changed and after the changes are rendered to the dom. beforedestroy() — runs before a component is removed from the dom. destroyed() — runs after a component has been removed from the dom activated() — only used in components
wrapped in a special keep-alive tag. runs after the component is activated. deactivated() — only used in components
wrapped in a special keep-alive tag. runs after the component is deactivated. note: the vue docs provide a 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 gon...
Reviewer Checklist
to mozilla source code needn't be complex. this article provides a list of best practices for your patch content that reviewers will check for or require. following these best practices will lead to a smoother, more rapid process of review and acceptance. good web citizenship make sure new web-exposed apis actually make sense and are either standards track or preffed off by default. in c++,
wrapper-cache as needed. if your object can be gotten from somewhere without creating it in the process, it needs to be
wrapper-cached. correctness the bug being fixed is a valid bug and should be fixed. the patch fixes the issue. the patch is not unnecessarily complicated. the patch does not add duplicates of existing code ('almost duplicates' could mean a refactor is needed). commonly this r...
...tring changes. when making ui changes, be aware of the fact that strings will be different lengths in different locales. documentation the commit message should describe what the patch is changing (not be a copy of the bug summary). the first line should be a short description (since only the first line is shown in the log), and additional description, if needed, should be present, properly
wrapped, in later lines. adequately document any potentially confusing pieces of code. flag a bug with dev-doc-needed if any addon or web apis are affected. use javadocs extensively, especially on any new non-private methods. when moving files, ensure blame/annotate is preserved. accessibility for html pages, images should have the alt attribute set when appropriate. similarly, a button that ...
Limitations of chrome scripts
at in a frame script loaded into the content process". this is one of a pair of articles: the other one lists limitations of frame scripts. compatibility shims for many of the patterns described here we've implemented compatibility shims so the patterns still work. for example: whenever extensions try to access web content from the chrome process, the browser will return a cross process object
wrapper that gives the chrome code synchronous access to the content. you'll get the shims for your add-on by default, unless you set the multiprocesscompatible flag in your add-on's install manifest. however, these shims are not a substitute for migrating extensions: they are only a temporary measure, and will be removed eventually they can have a bad effect on responsiveness there are likely ...
...cts in fresh <browser> elements may run into trouble. to make the shim unnecessary: factor the code that needs to access content into a separate script, load that script into the content process as a frame script, and communicate between the chrome script and the frame script using the message-passing apis. see the article on using the message manager. limitations of cpows cross process object
wrappers (cpows) are a migration aid giving chrome code synchronous access to content objects. however, there are various limitations on the kinds of things you can do with a cpow. note that from firefox 47 onwards, unsafe cpow usage is no longer permitted in browser code. if browser code tries an unsafe cpow operation, the browser will throw an exception and you'll see an "unsafe cpow usage forbidd...
HTTP Cache
remove) any intermediate cache data held in memory for faster access (more about the intermediate cache below) nsiloadcontextinfo distinguishes the scope of the storage demanded to open. mandatory argument to *storage methods of nsicachestorageservice. ...
...er way is to directly call the nsicachestorageservice.purge method. that method is also called automatically on the "memory-pressure" indication. access to the hashtables is protected by a global lock. we also - in a thread-safe manner - count the number of consumers keeping a reference on each entry. the open callback actually doesn't give the consumer directly the cacheentry object but a small
wrapper class that manages the 'consumer reference counter' on its cache entry. this both mechanisms ensure thread-safe access and also inability to have more then a single instance of a cacheentry for a single <scope+enhanceid+url> key. cachestorage, implementing the nsicachestorage interface, is forwarding all calls to internal methods of cachestorageservice passing itself as an argument. cachesto...
IME handling guide
ow. how does gecko disable ime in tsf mode on windows mozilla::widget::tsftextstore sets focus to a dummy context which disables the keyboard. how does gecko disable ime on mac mozilla::widget::textinputhandler::handlekeydownevent() doesn't call focused view's interpretkeyevents. this prevents native key events to be passed to ime. how does gecko disable ime on gtk mozilla::widget::imcontext
wrapper sets focus to a dummy context which doesn't have ime composition. how does gecko disable ime on android ? mhtmlinputtype the value is a string representing the focused editor. "text", "password", "number", etc. when an <input> element gets focus, the value is the type of the input element. "textarea" when a <textarea> element gets focus, the value is "textarea". "" when an html ...
...t::plugintextinputhandler inherits textinputhandlerbase and handles key events and ime events on focused plugin. mozilla::widget::imeinputhandler inherits textinputhandlerbase and handles ime related events. mozilla::widget::textinputhandler inherits textinputhandlerbase and implements nstextinput protocol of cocoa. the instance is created per nschildview instance. gtk mozilla::widget::imcontext
wrapper handles ime. the instance is created per top level window. android nswindow::geckoviewsupport handles native ime events and just dispatches widget*event. ...
Following the Android Toasts Tutorial from a JNI Perspective
tent/context;. for convenience, let's make an object called sig and populate it with our types. let sig = { context: 'landroid/content/context;', charsequence; 'ljava/lang/charsequence;', int: 'i', toast: 'landroid/widget/toast;', void: 'v', }; get java environment before we go on to declare the other important features, we need to load our environment variable. we want to
wrap this in a try-catch statement so if any errors occur we make sure to unload the classes and the java environment, this is good for performance. this is the template that will follow our object of signatures: var my_jenv = null; try { my_jenv = jni.getforthread(); // do the jni work here } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } the reason we choose my...
... static. so we will not need a group in the third argument of loadclass for fields, we will only need static_fields. fields do not accept arguments, so the "method format" is not used, we simply tell the sig the type of the field, which we find out from the android documentation website. ...
XPCOMUtils.jsm
nd bar.jsm, and foo.jsm needs to load bar.jsm, it can do so like this: components.utils.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.importrelative(this, "bar.jsm"); in other words: importrelative will only work from other code modules (such as jsm files). it will not work from overlay scripts or bootstrap.js or etc. details can be found here: bug 628669 itersimpleenumerator()
wraps an nsisimpleenumerator instance into a javascript generator that can be easily iterated over. generator itersimpleenumerator( enumerator, interface ); parameters enumerator the nsisimpleenumerator instance to iterate over. interface the expected interface for each element. return value a generator yielding enumerated objects. example const nsifile = components.interfaces.nsifil...
...rator, interface ); parameters enumerator the nsisimpleenumerator instance to iterate over. interface the expected interface for each element. return value a generator yielding enumerated objects. example const nsifile = components.interfaces.nsifile; for (var file in xpcomutils.itersimpleenumerator(dir.directoryentries, nsifile)) console.log(file.path); iterstringenumerator()
wraps an nsistringenumerator or nsiutf8stringenumerator instance into a javascript generator that can be easily iterated over. generator iterstringenumerator( enumerator ); parameters enumerator the nsistringenumerator or nsiutf8stringenumerator instance to iterate over. return value a generator yielding enumerated strings. example for (var section in xpcomutils.iterstringenumerator(inip...
Creating localizable web applications
number format you can make the number format localizable using the information returned by localeconv() in php. snippet 1. bad: printf(_("%s mb>"), $size); snippet 2. good: function num_format($num, $decimals) { $locale_info = localeconv(); return number_format($num, $decimals, $locale_info['decimal_point'], $locale_info['thousands_sep']); } printf(_("%s mb"), num_format($size, 1));
wrap as few html tags as possible when
wrapping the localizable content with the gettext function calls, put all the code that irrelevant to localization outside the function call. snippet 1. bad: <?= _("<a href=\"https://addons.mozilla.org/firefox/downloads/latest/10900\" class=\"get-personas\" id=\"download\"><span>get personas for firefox - free</span>");?><span class="arrow"></span></a> snipp...
...p> snippet 2. bad: <p class="added"><strong><?= _("added:") ?></strong><?= $persona['date']; ?></p> snippet 3. good: <p class="added"><? printf( /* l10n: %s is a date */ _("<strong>added:</strong> %s"), $persona['date']);?></p> the first bad snippet puts the <strong/> html elements inside the gettext function call and concatenates the $persona['date'] variable to it. following the rule about
wrapping as few html elements with the gettext function call as possible, you could try to put the <strong/> html tag outside of the php code (cf. snippet 2). however, in this snippet, the concatenation of the $persona['date'] variable is still hardcoded and only allows one ordering of the sentence, while some grammars might require, for instance, to put the date in front of the "added" descriptor. fo...
Mozilla Quirks Mode Behavior
nce gecko 50 list bullets do not inherit the font size of the list (bug 97351). removed in firefox 50 (bug 648331). don't inherit font properties into tables except for font-family. make table borders gray rather than using the foreground color. collapse top margin of body and td and bottom margin of td. collapse the bottom or top margins of empty elements (bug 97361). support <pre
wrap>, <pre cols>, <pre width>. orphaned dd has generated content :before instead of margin (bug 5119). indent nested dl elements (bug 8749). map acts like an inline, not a block. give floated img a 3px margin (bug 58899). residual style tags' size info does not take precedence over heading tags' size (bug 77352). use box-sizing:border-box for most input types and textarea. give f...
...yle of inset or outset, the border color is based on the background color of the table or of the nearest ancestor with non-transparent background. [this may have been an accurate description when written in june 2001, but it no longer appears correct. i don't follow the code in nscssrenderingborders well enough to tell, though.] in quirks mode a fixed width specified on a table cell resets the no
wrap attribute. if the no
wrap attribute is present the cell width will never be smaller than the specified fixed width (bug 277232). in quirks mode, tables with no rows/rowgroups have zero height even when a height is specified (bug 241161). something about the overhanging border (i.e., the half of the border that's outside the border-box) in border-collapse tables differs between quirks mode and st...
JS::PerfMeasurement
zero. uint64 cpu_cycles, uint64 instructions, etc. each potentially-measurable event corresponds to a regular old instance variable, which you can read and even modify. all presently-measurable events are measured with counters, not timers; that is, there is no defined relation between the numbers you get from this interface, and wall-clock time. perfmeasurement* js::extractperfmeasurement(jsval
wrapper) if you are the c++ side of an xpcom interface, and you want to benchmark only part of your execution time but 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 perfmeasur...
...lot. 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. ...
An overview of NSS Internals
ndle for the programmer to use. once the application is done with a handle, it should be released, allowing nss to free the associated resources. when working with handles to private keys it's usually difficult (and undesired) that an application gets access to the raw key data; therefore it may be difficult to extract such data from nss. the usual minimum requirement is that private keys must be
wrapped using a protective layer (such as password-based encryption). the intention is to make it easier to review code for security. the less code that has access to raw secret keys, the less code that must be reviewed. nss has only limited functionality to look up raw keys. the preferred approach is to use certificates, and to look up certificates by properties such as the contained subject name ...
...will analyze the asn.1 data stream accordingly. the templates are usually closely aligned to definitions found in rfc documents. a data block described as der is usually in asn.1 format. you must know which data you are expecting, and use the correct template for parsing, based on the context of your software's interaction. data described as pem is a base64 encoded presentation of der, usually
wrapped between human readable begin/end lines. nss prefers the binary presentation, but is often capable to use base64 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. look...
JSS FAQ
ode; with that understanding, the best directory to look for sample code is in the org/mozilla/jss/tests directory: http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/tests org/mozilla/jss/tests/closedbs.java org/mozilla/jss/tests/keyfactorytest.java org/mozilla/jss/tests/digesttest.java org/mozilla/jss/tests/jcasigtest.java org/mozilla/jss/tests/key
wrapping.java org/mozilla/jss/tests/listcerts.java org/mozilla/jss/tests/pk10gen.java org/mozilla/jss/tests/sdr.java org/mozilla/jss/tests/selftest.java org/mozilla/jss/tests/setupdbs.java org/mozilla/jss/tests/sigtest.java org/mozilla/jss/tests/symkeygen.java org/mozilla/jss/tests/testkeygen.java org/mozilla/jss/tests/sslclientauth.java org/...
...d "internal key storage token". you can look it up by name using cryptomanager.gettokenbyname(), but a better way is to call cryptomanager.getinternalkeystoragetoken(), which works no matter what the token is named. in general, a key is a handle to an underlying object on a pkcs #11 token, not merely a java object residing in memory. symmetric key usage: basically encrypt/decrypt is for data and
wrap/un
wrap is for keys. jss 3.2 has jca support. when will jss have jsse support? not in the near future due to pluggability is disabled in the jsse version included in j2se 1.4.x for export control reasons. ...
JSS Provider Notes
des deskeyspec desede des aes rc4 secretkeyspec for increased security, some secretkeys may not be extractable from their pkcs #11 token. in this case, the key should be
wrapped (encrypted with another key), and then the encrypted key might be extractable from the token. this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the source key, and then tries to create a new key on the target toke...
...c.pbekeyspec or org.mozilla.jss.crypto.pbekeygenparams. secretkey supported algorithms notes aes des desede (des3 ) hmacsha1 rc2 rc4 secretkey is implemented by the class org.mozilla.jss.crypto.secretkeyfacade, which acts as a
wrapper around the jss class symmetrickey. any secretkeys handled by jss will actually be secretkeyfacades. this should usually be transparent. securerandom supported algorithms notes pkcs11prng this invokes the nss internal pseudorandom number generator. ...
Mozilla-JSS JCA Provider notes
getkeyspec supports the following transformations: key algorithm keyspec class desede desedekeyspec des deskeyspec desede des aes rc4 secretkeyspec for increased security, some secretkeys may not be extractable from their pkcs #11 token. in this case, the key should be
wrapped (encrypted with another key), and then the encrypted key might be extractable from the token. this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the source key, and then tries to create a new key on the target token from the encoded ...
...va.security.spec.pbekeyspec. instead, you can use org.mozilla.jss.crypto.pbekeygenparams. if you are using jdk (or jre) 1.4 or later, you can use java.security.spec.pbekeyspec or org.mozilla.jss.crypto.pbekeygenparams. secretkey supported algorithms notes aes des desede (des3) hmacsha1 rc2 rc4 secretkey is implemented by the class org.mozilla.jss.crypto.secretkeyfacade, which acts as a
wrapper around the jss class symmetrickey. any secretkeys handled by jss will actually be secretkeyfacades. this should usually be transparent. securerandom supported algorithms notes pkcs11prng this invokes the nss internal pseudorandom number generator. signature supported algorithms notes sha1withdsa (dsa, dss, sha/dsa, sha-1/dsa, sha1/dsa, dsawithsha1, shawithdsa) sha-1/rsa (sha1/rsa, sh...
sslerr.html
ssl_error_md5_digest_failure -12215 "md5 digest function failed." ssl_error_sha_digest_failure -12214 "sha-1 digest function failed." ssl_error_mac_computation_failure -12213 "message authentication code computation failed." ssl_error_sym_key_context_failure -12212 "failure to create symmetric key context." ssl_error_sym_key_un
wrap_failure -12211 "failure to un
wrap the symmetric key in client key exchange message." ssl_error_iv_param_failure -12209 "pkcs11 code failed to translate an iv into a param." ssl_error_init_cipher_suite_failure -12208 "failed to initialize the selected cipher suite." ssl_error_session_key_gen_failure -12207 "failed to generate session keys for ssl ...
... an iv into a param." ssl_error_init_cipher_suite_failure -12208 "failed to initialize the selected cipher suite." ssl_error_session_key_gen_failure -12207 "failed to generate session keys for ssl session." on a client socket, indicates a failure of the pkcs11 key generation function. on a server socket, indicates a failure of one of the following: (a) to un
wrap the pre-master secret from the clientkeyexchange message, (b) to derive the master secret from the premaster secret, (c) to derive the mac secrets, cryptographic keys, and initialization vectors from the master secret. if encountered repeatedly on a server socket, this can indicate that the server is actively under a "million question" attack. ssl_error_decompression_failure -1217...
Tutorial: Embedding Rhino
ent java.lang.runnable in a rhino shell session: js> obj = { run: function() { print("hi"); } } [object object] js> obj.run() hi js> r = new java.lang.runnable(obj); [object object] js> t = new java.lang.thread(r) thread[thread-0,5,main] js> t.start() hi adding java objects the next example is runscript2. ...
...} } [object object] js> obj.run() hi js> r = new java.lang.runnable(obj); [object object] js> t = new java.lang.thread(r) thread[thread-0,5,main] js> t.start() hi adding java objects the next example is runscript2. this is the same as runscript, but with the addition of two extra lines of code: object
wrappedout = context.javatojs(system.out, scope); scriptableobject.putproperty(scope, "out",
wrappedout); these lines add a global variable out that is a javascript reflection of the system.out variable: $ java runscript2 "out.println(42)" 42.0 undefined using javascript objects from java after evaluating a script it's possible to query the scope for variables and functions, extracting values and calling javascript functions. this is illustrated in the runscript3 example. this example a...
Scripting Java
the class provides additional importpackage() and importclass() global functions for scripts but their extensive usage has tendency to pollute the global name space with names of java classes and prevents loaded classes from garbage collection. see bugzilla 245882 for details. java exceptions exceptions thrown by java methods can be caught by javascript code using try...catch statement. ...
... names of java classes and prevents loaded classes from garbage collection. see bugzilla 245882 for details. java exceptions exceptions thrown by java methods can be caught by javascript code using try...catch statement. ...
SpiderMonkey compartments
previous versions of spidermonkey, the garbage collector would walk the entire heap of all javascript objects when garbage collection was needed. with compartments, garbage collection can run per compartment. this can result in significant performance improvements in some applications. an object in one compartment cannot touch an object in another compartment, except through a cross-compartment
wrapper. compartment example the firefox browser embeds spidermonkey. in firefox 4 and above, compartments are used and all javascript objects that belong to a certain origin (such as "http://mail.google.com/" or "http://www.bank.com/") are placed in a separate compartment. this has some important implications: all objects created by a website reside in the same compartment and hence are located...
...so) are only allowed to touch objects in the same compartment. this invariant is very useful for security purposes. the javascript engine enforces this requirement at a very low level. it means that a "google.com" object can never accidentally leak into an untrusted website such as "evil.com". only a special object type can cross the compartment boundaries. we call these objects cross-compartment
wrappers. spidermonkey tracks the creation of these cross-compartment
wrappers and thus it knows at all times what objects from a compartment are kept alive by outside references (through cross-compartment
wrappers). this allows the garbage collecting of individual compartments, in addition to global collection. spidermonkey simply assumes that all objects referenced from outside the compartment are l...
Garbage collection
arena holds objects all of the same size and finalization behavior. compartments the js heap is partitioned into compartments. some key properties of compartments are: every cell (js heap object) belongs to at most one compartment. (some cells are shared across all compartments in a zone.) an object may not hold a direct pointer to an object in another compartment. ...
.... (some cells are shared across all compartments in a zone.) an object may not hold a direct pointer to an object in another compartment. instead, it must store a
wrapper for the other object. this allows compartments to be used for security checks: objects in the same compartment have the same access requirements, so no checks are needed, but checks may be done when traversing cross-compartment
wrappers. the engine may gc a single compartment without gcing the others. the engine can also gc a set of compartments without gcing the rest. cross-compartment
wrappers are used as roots for single- and multi-compartment gcs. compartments are a fundamental cross-cutting concept in spidermonkey (see also compartments), though anything related to memory is now more concerned with zones, especially ...
JSExtendedClass
a jsextendedclass with the js_initclass and js_newobject apis to create objects that have custom methods and properties implemented in c/c++. syntax struct jsextendedclass { jsclass base; jsequalityop equality; jsobjectop outerobject; jsobjectop innerobject; jsiteratorop iteratorobject;// added in spidermonkey 1.8 jsobjectop
wrappedobject; // added in spidermonkey 1.8 ...and additional reserved fields. }; name type description base jsclass the basic class information and callbacks for this class. this contains some required fields. equality jsequalityop optional. overrides the javascript == and != operators. outerobject jsobjectop optional. return the curren...
...javascript == and != operators. outerobject jsobjectop optional. return the current outer object. this is used to implement split objects. innerobject jsobjectop optional. return the current inner object. this is used to implement split objects. iteratorobject jsiteratorop added in spidermonkey 1.8 optional. creates and returns a new iterator.
wrappedobject jsobjectop added in spidermonkey 1.8 optional. if non-null, an object of this class may serve as a
wrapper for another object.
wrappers sometimes transparently behave like the object they
wrap. for example, an object and its
wrappers are all equal under ===. description to implement a custom class that uses any of the jsextendedclass callbacks: create a jsextendedclass and ...
Split object
page b that refers to global variables in page b. if page a gets a reference to that function, then by calling it, it is indirectly accessing tab tb's window. the function object carries a reference to the window, via the scope chain. to further complicate matters, a and b are in the same security domain, so security checks between them automatically succeed. this makes the problem resistant to a
wrapper-based approach.) older versions of firefox accomplished this by blowing away all window properties every time a user navigated to another page, then reusing the window. each page, even on back, had to load from scratch. this was slow. circa firefox 1.5, the decision was made to cache layout information and javascript state across navigation. a new approach for window was needed. secu...
... chain is the global object for the script. but what jsprincipals should be attached to a window object? the principals of the page the window is currently displaying? but then the page that called window.open could use a with statement to inject that window into its scope chain, gaining access to that window's privileges. (note: with does add an object to the scope chain, but it's a special with
wrapper object that is skipped, or something, during the search described here. this security feature is not peculiar to split objects. ...and yet, there is special code in jsobj.h with a comment about fixing some kind of interaction between with an split objects. write that down, it'll be on the test.) split objects were the solution. the inner window object is different for each page a browser wi...
Bundling multiple binary components
n developers trying to support multiple gecko versions (firefox 2 and 3, for example). possible solutions this article covers two possible ways to make binary components support multiple version of gecko: dynamic method loading stub loader dynamic method loading the idea with this approach is to figure out all the methods imported from gecko and dynamically load the methods. create small
wrappers for calling the methods, as you may need to thunk parameters depending on how much has changed between gecko versions. this means using something like loadlibrary / getprocaddress / freelibrary on windows. actually, nspr has portable versions of those features that work across platforms. this approach uses only one binary for each platform (win/mac/linux) but creates complexity in the binari...
...eed to thunk parameters depending on how much has changed between gecko versions. this means using something like loadlibrary / getprocaddress / freelibrary on windows. actually, nspr has portable versions of those features that work across platforms. this approach uses only one binary for each platform (win/mac/linux) but creates complexity in the binaries - loading the methods and creating the
wrappers. the costs get higher if you have many methods that need to be loaded. stub loader this approach involves using a stub loader component. the stub component is an xpcom component itself and when registered by xpcom, the code would sniff the runtime version and operating system then the stub load the appropriate "real" xpcom component for the current configuration. it's pretty simple to do an...
Finishing the Component
this method expects to parse the incoming string and create an object which implements an nsiuri interface. the two nsnull parameters...
...this method expects to parse the incoming string and create an object which implements an nsiuri interface. ...
Starting WebLock
ocation with the deallocation. suppose you call malloc from object a and pass this buffer to another object b, for example. but if object b is using a special allocator that does garbage collection, then when object b deletes a buffer allocated by object a's allocator, the results are unpredictable: probably an assertion will be raised, possibly a memory leak, or a crash. the nsmemory class is a
wrapper around the nsimemory interface, whose only implementation is part of xpcom. when you use nsmemory, you are guaranteed to be using this same memory allocator in all cases, and this avoids the problem described here. removesite removesite deletes a node from the linked list: // a simple link list. struct urlnode { char* urlstring; struct urlnode* next; }; /* void addsite (in string url)...
... need random access to the elements in a nsisimpleenumerator, you can read them from the nsisimpleenumerator, store them in an array, and access them there. the getnext method returns a nsisupports interface pointer. when you want to pass primitive data types like numbers, strings, characters, void *, and others, the solution is to use one of the nsisupportsprimitive interfaces. these interfaces
wrap primitive data types and derive from nsisupports. this allows types like the strings that represent urls in the weblock component to be passed though methods that take an nsisupports interface pointer. this becomes clear when when you see the implementation of setsites: ns_imethodimp weblock::setsites(nsisimpleenumerator * asites) { prbool more = pr_true; while (more) { nscomptr<nsisup...
Using XPCOM Utilities to Make Things Easier
. the first thing to note is that the string classes themselves are not frozen, which means that you should not link against them when you can avoid it. linking the full string library (.lib or .a) into a component may raise its footprint by more than 100k (on windows), which in many cases is an unacceptable gain (see the xpcom string guide). for weblock, where the string classes need to be only
wrappers around already existing string data, trading advanced functionality for a much smaller footprint is the right way to go. the weblock string classes don't need to append, concatenate, search, or do any other real work on the string data; they just need to represent char* and other data and pass them to methods that expect an nsacstring. nsembedstring and nsembedcstring the strings used in th...
...// ... if (ns_failed(error)) return; // ... } the style or syntax may be unfamilar, but smart pointers are worth learning and using because they simplify the task of managing references. nscomptr is a c++ template class that acts almost exactly like raw pointers, that can be compared and tested, and so on. when you pass them to a getter, you must do something special, however: you must
wrap the variable with the function getter_addrefs, as in the example above. you cannot call the nsisupports addref or release methods on a nscomptr. but this restriction is desirable, since the nscomptr is handling reference counting for you. if for some reason you need to adjust the reference count, you must assign the nscomptr to a new variable and addref that. this is a common pattern when you ha...
Interfacing with the XPCOM cycle collector
have something in the js object pointer you need to use mozilla::holdjsobjects to tell the gc to trace it and keep the object alive: ... msomeobj = ... ; mozilla::holdjsobjects(this); ... in the unlink method (or destructor) you need to set the object pointer to null: ns_impl_cycle_collection_unlink_begin(nsfoo) ... ns_impl_cycle_collection_unlink(msomemember) ... //if your class is a
wrapper cache: //ns_impl_cycle_collection_unlink_preserved_
wrapper tmp->msomeobj = nullptr; ns_impl_cycle_collection_unlink_end in the destructor, you should call mozilla::dropjsobjects(this); in your traverse method you need to list members involved in the cycle collector, i-e no js objects: ns_impl_cycle_collection_traverse_begin(nsfoo) ... ns_impl_cycle_collection_traverse(msomemember...
...ects(this); in your traverse method you need to list members involved in the cycle collector, i-e no js objects: ns_impl_cycle_collection_traverse_begin(nsfoo) ... ns_impl_cycle_collection_traverse(msomemember) ... ns_impl_cycle_collection_traverse_end finally, you need to manually add the js object to the trace method: ns_impl_cycle_collection_trace_begin(nsfoo) //if your class is a
wrapper cache: //ns_impl_cycle_collection_trace_preserved_
wrapper ns_impl_cycle_collection_trace_js_member_callback(msomeobj) ns_impl_cycle_collection_trace_end note that if your class is a
wrapper cache then you likely have generate code that uses ns_impl_cycle_collection_
wrappercache_# macro instead of ns_impl_cycle_collection_#. unfortunately this macro defines the trace method and so you ca...
Components.Constructor
contract id of the xpcom component to create. the component is then returned immediately, with only the base interface nsisupports available on it; you must call nsisupports.queryinterface() on it to call methods on the object. ...
...the arguments used with the initialization method are the arguments passed to the components.constructor()-create...
Components.classes
to access a service (a singleton component, only single instance of which exists at any time), you should use getservice instead of createinstance: var os = components.classes["@mozilla.org/observer-service;1"] .getservic...
... shortcut to var obj = components.classes["@mozilla.org/supports-array;1"] .createinstance(); obj.queryinterface(components.interfaces.nsisupportsarray); if you don't provide a specific interface to createinstance(), it will return an xpconnect
wrapper for the component, which only exposes the methods of the nsisupports interface (and under certain circumstances the special
wrappedjsobject property). to access a service (a singleton component, only single instance of which exists at any time), you should use getservice instead of createinstance: var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); the first time anyone accesses a service, the corresponding component is created unde...
XPConnect
th javascript objects from within xpcom components. xpconnect is part of firefox and is actively used in xul applications. documentation architecture basics xpconnect, javascript, xpcom, xul... using components how to talk with xpcom components. xpconnect and xpidl faq a faq about using xpconnect and xpidl. this page needs to migrate to mdn. ...
...ithin xpcom components. xpconnect is part of firefox and is actively used in xul applications. documentation architecture basics xpconnect, javascript, xpcom, xul... using components how to talk with xpcom components. xpconnect and xpidl faq a faq about using xpconnect and xpidl. this page needs to migrate to mdn. ...
nsIChromeRegistry
converts...
...ext. the extension, ext, is one of: xul for a "content" package. css for a "skin" package. dtd for a "locale" package. nsiuri convertchromeurl( in nsiuri achromeurl ); parameters achromeurl the url that is to be converted. return value a new nsiuri object containing the loadable uri for the specified chrome url. violates the xpcom interface guidelines
wrappersenabled() returns whether xpcnative
wrappers are enabled for the specified uri. boolean
wrappersenabled( in nsiuri auri ); parameters auri the uri for which to determine if xpcnative
wrappers are enabled. return value true if xpcnative
wrappers are enabled for the specified uri; otherwise false. see also chrome registration ...
nsIEditor
n astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframes); selected content removal void deleteselection(in short action, in short strip
wrappers); document info and file methods void resetmodificationcount(); long getmodificationcount(); void incrementmodificationcount(in long amodcount); void incrementmodificationcount(in long amodcount); transaction methods void dotransaction(in nsitransaction txn); void enableundo(in boolean enable); void undo(in unsig...
... direction controller void switchtextdirection(); output methods astring outputtostring(in astring formattype, in unsigned long flags); example: // flags are declared in base/public/nsidocumentencoder.idl // outputselectiononly = 1, outputformatted = 2, // outputraw = 4, outputbodyonly = 8, // outputpreformatted = 16, output
wrap = 32, // outputformatflowed = 64, outputabsolutelinks = 258, // outputencodew3centities = 256, outputcrlinebreak = 512, // outputlflinebreak = 1024, outputnoscriptcontent = 2048, // outputnoframescontent = 4096, outputnoformattinginpre = 8192, // outputencodebasicentities=16384, outputencodelatin1entities=32768, // outputencodehtmlentities=65536, outputpersistnbsp=131072 edi...
nsIEditorMailSupport
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 ty...
... in long aselectiontype ); parameters acitation the "mid" url of the source message. aselectiontype text or html? pasteasquotation() paste the text in the os clipboard at the cursor position, as a quotation (whose representation is dependent on the editor type), replacing the selected text (if any). void pasteasquotation( in long aselectiontype ); parameters aselectiontype text or html? re
wrap() re
wrap the selected part of the document, re-quoting if necessary. void re
wrap( in boolean arespectnewlines ); parameters arespectnewlines try to maintain newlines in the original? stripcites() strip any citations in the selected part of the document. void stripcites(); parameters none. ...
nsIMsgDBView
void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selectable_p, out nsmsgviewcommandcheckstatevalue selected_p); void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsgkey resultid, out nsmsgviewindex resultindex, out nsmsgviewindex threadindex, in boolean
wrap); boolean navigatestatus(in nsmsgnavigationtypevalue motion); nsmsgkey getkeyat(in nsmsgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex index); nsimsgfolder getfolderforviewindex(in nsmsgviewindex index); acstring geturiforviewindex(in nsmsgviewindex index); nsimsgdbview clonedbview(in nsimessenger amessengerinstance, in nsimsgwind...
... return the notused value most of the time. viewnavigate() change the view to show a particular message. this method will automatically expand the destination thread. void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsgkey resultid, out nsmsgviewindex resultindex, out nsmsgviewindex threadindex, in boolean
wrap); parameters motion the nsmsgnavigationtypevalue. defined in the interface: nsmsgnavigationtype.
wrap whether to
wrap around messages from the last to first (or vice versa). return values resultid the key of the result message. nsmsgkey is defined as an unsigned long in mailnewstypes2.idl. resultindex the index of the result message. nsmsgviewindex is defined as a unsigned long in...
nsIParserUtils
use this from within gecko--use nscontentutils, nstreesanitizer, and so on directly instead. implemented by: @mozilla.org/parserutils;1 as a service: var parserutils = components.classes["@mozilla.org/parserutils;1"] .getservice(components.interfaces.nsiparserutils); method overview astring converttoplaintext(in astring src, in unsigned long flags, in unsigned long
wrapcol); nsidomdocumentfragment parsefragment(in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in nsidomelement element); astring sanitize(in astring src, in unsigned long flags); constants constant value description sanitizerallowcomments (1 << 0) flag for sanitizer: allow comment nodes. sanitizerall...
...ropmedia (1 << 5) flag for sanitizer: drops <img>, <video>, <audio>, and <source>, and flattens out svg. sanitizerlogremovals (1 << 6) flag for sanitizer: log messages to the console for everything that gets sanitized. methods converttoplaintext() converts html to plain text. astring converttoplaintext( in astring src, in unsigned long flags, in unsigned long
wrapcol ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value.) flags conversion option flags defined in nsidocumentencoder.
wrapcol number of characters per line; 0 for no auto-
wrapping. return value the plain text conversion of the html specified in src. parsefragment() parses markup into a sanitized document f...
nsIPropertyBag
rating system specifics. the window scope is not always accessible so the window.navigator cannot be accessed. ...
...from window.navigator are: appcodename:"mozilla" appname:"netscape" appversion:"5.0 (windows)" battery:batterymanager buildid:"20140529161749" cookieenabled:true donottrack:"yes" geolocation:geolocation language:"en-us" mimetypes:mimetypearray mozalarms:null mozapps:xpc
wrappednative_nohelper mozcameras:cameramanager mozconnection:mozconnection mozcontacts:contactmanager mozid:null mozkeyboard:xpc
wrappednative_nohelper mozpay:null mozpermissionsettings:null mozphonenumberservice:phonenumberservice mozpower:mozpowermanager moztcpsocket:null online:true oscpu:"windows nt 5.1" platform:"win32" plugins:pluginarray product:"gecko" productsub:"20100101" useragent:"mozilla/5.0 (windows nt 5.1; rv:30.0) gecko/20100101 firefox/30.0" vendor:"" vendorsub:"" __proto__:navigatorprototype from here we can ...
nsIScriptableIO
nner in which the stream is accessed. if none of these modes are desired, specify an empty string. text: read unicode-converted text. the default character set is utf-8; to read text in another character set, set the acharset argument to the desired character set. buffered: a stream that uses a buffer to hold a block of the next piece of the data to be read. this mode is generally used as a
wrapper for other streams. by default, the buffer size is 1024 bytes; however, the size may be changed by specifying the abuffersize parameter. if the text mode is specified, a buffer is always used, regardless of whether or not it is specifically requested. block: when this mode is specified, reading from a transport such as a socket when no data is available will block until data is available befo...
...tring of mode terms controlling the manner in which the stream is accessed. if none of these modes are desired, specify an empty string. text: write unicode-converted text. the default character set is utf-8; to write text in another character set, set the acharset argument to the desired character set. buffered: a stream that buffers the data being written. this mode is generally used as a
wrapper for other streams. by default, the buffer size is 1024 bytes; however, the size may be changed by specifying the abuffersize parameter. if the text mode is specified, a buffer is always used, regardless of whether or not it is specifically requested. append: when writing to files, indicates to append to the file rather than overwrite the existing file. the write position will be set to the e...
nsISelectionPrivate
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...
...ttextrangestyleref textrangestyle ); parameters range textrangestyle startbatchchanges() will stop user interface updates while multiple selection methods are called. call endbatchchanges() to resume user interface updates. void startbatchchanges(); parameters none. tostringwithformat() wstring tostringwithformat( in string formattype, in unsigned long flags, in print32
wrapcolumn ); parameters formattype flags
wrapcolumn return value ...
nsISyncMessageSender
es 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 the objects property of the received message, with each original object replaced with a cross process object
wrapper for it. principal nsiprincipal returns array: an array of 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 ...
...me 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 becomes the objects property of the received message, with each original object replaced with a cross process object
wrapper for it. principal nsiprincipal returns array: an array of 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. ...
XPCOM Interface Reference
gregatefunctionmozistorageasyncstatementmozistoragebindingparamsmozistoragebindingparamsarraymozistoragecompletioncallbackmozistorageconnectionmozistorageerrormozistoragefunctionmozistoragependingstatementmozistorageprogresshandlermozistorageresultsetmozistoragerowmozistorageservicemozistoragestatementmozistoragestatementcallbackmozistoragestatementparamsmozistoragestatementrowmozistoragestatement
wrappermozistoragevacuumparticipantmozistoragevaluearraymozitxttohtmlconvmozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiac...
...zilla_2_0nsiapplicationcachensiapplicationcachechannelnsiapplicationcachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthprompt
wrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentry...
XPCOM Interface Reference by grouping
were made by somewhat arbitrary decision by the author. (i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.) the primary sections consist of: browser this section contains elements associated with the view pane or the content of the "browser window" proper. it is
wrapped by system, but displayed for convenience. data this section contains data
wrappers and core object definitions. security this section contains apis for secure channel communications system this section contains application level interfaces including calls to external support elements (such as device calls). this is the root element and may contain some functions defined in ot...
... nsisupportsweakreference nsivariant do not use nsienumerator nsiinprocesscontentframemessagemanager nsiscriptableio nsixpcscriptable future nsixmlhttprequestupload obsolete nsixmlrpcclient nsixmlrpcfault security auth nsiauthmodule nsiauthprompt nsiauthpromptprovider nsiauthprompt
wrapper nsiasyncverifyredirectcallback content nsicontentpolicy credentials nsilogininfo nsiloginmanager using nsiloginmanager nsiloginmanagerstorage nsiloginmetainfo history nsiglobalhistory nsiglobalhistory2 nsiglobalhistory3 ssl nsib...
Getting Started Guide
eferent, if any, and (unless you tell it you already have) addrefs the new. you use an nscomptr exactly as you would a raw xpcom interface pointer in almost all cases. you won't have to explictly call addref or release through it, nor will the compiler allow it. the only place you can't use an nscomptr without change is where a raw xpcom interface pointer is an `out' parameter. in this case, you
wrap the nscomptr with getter_addrefs (see comparison 4). when assigning into an nscomptr, you will usually just supply another pointer (either a raw xpcom interface pointer or an nscomptr), with no additional directives (see, e.g., the nscomptr side of comparison 1). as stated above, with no directives, the nscomptr will release its old referent, if any, and addref the new. this is appropriate when ...
...nd addref the new. this is appropriate when the thing you're assigning in hasn't yet been addrefed to account for the new reference. this is typically the case when you are assigning in a pointer that you didn't call a function to get, e.g., one that was passed in as a parameter, or that you pulled out of a structure. you can tell nscomptr it doesn't need to addref the new value on assignment by
wrapping the new value in dont_addref. do this, for example, when you got the new value from a function which, like all good xpcom getters, already called addref on your behalf. you may not assign in a pointer to a different interface type; you must first query it to the right type (see, e.g., comparison 6 and the surrounding discussion). nscomptr never calls queryinterface implicitly, i.e., you must...
XPCOM
ut doesnot keep that object alive. if the referent object is destroyed before the weak reference, the pointer inside the weak reference is set to nsnull.working with multiple versions of interfacesin this short note we illustrate how one can update an xpcom module in order for it to work in both firefox 2 and firefox 3, even if the interfaces have changed in the interim.working with out parameters
wrappedjsobject
wrappedjsobject is a property sometimes available on xpconnect
wrappers. when available, it lets you access the javascript object hidden by the
wrapper.xpcom abixpcom abi is the binary interface of xpcom components. while xpcom components written in a scripting language (such as javascript) can be moved across platforms (such as windows and os x) without adaptation, those written in a c...
...a fairly self-contained library, so as not to encumber clients with any unnecessary external dependencies.xpcom thread synchronizationxpcom thread synchronization primitives have the same semantics as those in 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.xptcall faqxptcall is a small low level xpcom method call library. it is implemented using platform specific c/c++ and assembly language code. it is used to facilitate cross language and cross thread method calls. porting this code is required in order to make mozilla run on any given platform.xptcall porting guideoriginal author: john bandhauer, 31 may 1999.xptcall porting stat...
Xray vision
ive: for example, if you need to see expandos on dom objects. in cases like this you can waive xray protection, but then you can no longer rely on any properties or functions being, or doing, what you expect. any of them, even setters and getters, could have been redefined by untrusted code. ...
...by untrusted code. to waive xray vision for an object you can use components.utils.waivexrays(object), or use the object's
wrappedjsobject property: // chrome code var waivedwindow = components.utils.waivexrays(gbrowser.contentwindow); var transfer = waivedwindow.confirm("transfer all my money?"); // calls the redefined implementation // chrome code var waivedwindow = gbrowser.contentwindow.
wrappedjsobject; var transfer = waivedwindow.confirm("transfer all my money?"); // calls the redefined implementation waivers are transitive: so if you waive xray vision for an object, then you automatically waive it for all the object's properties. for example, window.
wrappedjsobject.document gets you the waived version of document. to undo the waiver again, call components.utils.unwaivexrays(waiv...
Activity Manager examples
ptr<nsiactivityevent> copyevent(do_createinstance("@mozilla.org/activity-event;1")); // the initiator of this particular event is copyservice. we want to // associate it with the event since we are going to use it in the // undo handler. // same for the source folder, it is required for undo operation, but // since it is the subject of this activity (event), it goes into the // subject list. ...
...source folder, it is required for undo operation, but // since it is the subject of this activity (event), it goes into the // subject list. ...
Virtualenv
l: creates isolated virtual environments of python packages. due to its utility, tools have been built around this functionality. ...
...the virtualenv is created in ${objdir}/_virtualenv and should be recreated as part of the configure step. the populate_virtualenv.p...
Mozilla
in addition to firefox and other applications, mozilla developers have created a number of useful javascript libraries you can use in your projects. documentation for these libraries can be found here. javascript tips javascript-dom prototypes 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. all the methods t...
...e 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 prototype of the jsobject for the
wrapper (unless the c++ object's class info has the flag nsixpcscriptable::dont_share_prototype set, but lets assume that's not the case here). js-ctypes js-ctypes 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-ctypes. for a discussion o...
AesCtrParams - Web APIs
aes is a block cipher, meaning that it splits the message into blocks and encrypts it a block at a time. in ctr mode, every time a block of the message is encrypted, an extra block of data is mixed in. this extra block is called the "counter block". ...
...ng (the aes block size). the rightmost length bits of this block are used for the counter, and the rest is used for the nonce. for example, if length is set to 64, then the first half of counter is the nonce and the second half is used for the counter. length a number — the number of bits in the counter block that are used for the actual counter. the counter must be big enough that it doesn't
wrap: if the message is n blocks and the counter is m bits long, then the following must be true: n <= 2m. the nist sp800-38a standard, which defines ctr, suggests that the counter should occupy half of the counter block (see appendix b.2), so for aes it would be 64. examples see the examples for subtlecrypto.encrypt() and subtlecrypto.decrypt(). specifications specification status ...
HTMLTableCellElement - Web APIs
many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by htmltablecellelement.ch. this property was optional and was not very well supported. htmltablecellelement.height a domstring containing a length of pixel of the hinted height of the cell. it reflects the obsolete height attribute. htmltablecellelement.no
wrap a boolean value reflecting the no
wrap attribute and indicating if cell content can be broken in several lines. htmltablecellelement.valign a domstring representing an enumerated value indicating how the content of the cell must be vertically aligned. it reflects the valign attribute and can have one of the following values: "top", "middle", "bottom", or "baseline". use the css vertical-ali...
... specifications specification status comment html living standardthe definition of 'htmltablecellelement' in that specification. living standard no change from html5. html5the definition of 'htmltablecellelement' in that specification. recommendation the following properties have been obsoleted: align, axis, bgcolor, height, width, ch, choff, no
wrap, and valign. the headers property is now read-only and contains a domsettabletokenlist rather than a mere domstring. the colspan and rowspan properties are now unsigned long. document object model (dom) level 2 html specificationthe definition of 'htmltablecellelement' in that specification. obsolete the cellindex property is now read-only. document object model (dom...
HTMLTextAreaElement - Web APIs
aliditystate object: returns the validity states that this element is in. value string: returns / sets the raw value contained in the control. willvalidate read only boolean: returns whether the element is a candidate for constraint validation. false if any conditions bar it from constraint validation, including its readonly or disabled property is true.
wrap string: returns / sets the
wrap html attribute, indicating how the control
wraps text. htmltextareaelement.labelsread only nodelist: returns a list of label elements associated with this element. the two properties tabindex and accesskey are inherited from htmlelement from html5 on, but were defined on htmltextareaelement in dom level 2 html and earlier specifications. me...
... html living standardthe definition of 'htmltextareaelement' in that specification. living standard html5the definition of 'htmltextareaelement' in that specification. recommendation the attributes tabindex and accesskey, as well as the methods blur() and focus() are now defined on htmlelement. the following attributes have been added: autofocus, placeholder, dirname,
wrap, maxlength, required, textlength, labels, selectionstart, selectionend, selectiondirection, validity, validationmessage, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), and setselectionrange(). document object model (dom) level 2 html specificationthe definition of 'htmltextareaelement' in that specification. obsolete the property ...
Using the MediaStream Recording API - Web APIs
e 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; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%);...
...next, we call getusermedia() and inside it define: the constraints: only audio is to be captured for our dictaphone. the success callback: this code is run once the getusermedia call has been completed successfully. the error/failure callback: the code is run if the getusermedia call fails for whatever r...
Capabilities, constraints, and settings - Web APIs
hen click the "apply constraints" button to try them out. the actual settings the browser selected and is using are shown in the boxes on the right. ...
...on" id="stopbutton"> stop video </div> <div id="log"> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } .
wrapper { margin-bottom: 10px; width: 600px; } .trackrow { height: 200px; } .leftside { float: left; width: calc(calc(100%/2) - 10px); } .rightside { float: right; width: calc(calc(100%/2) - 10px); } textarea { padding: 8px; } h3 { margin-bottom: 3px; } #supportedconstraints { column-count: 2; -moz-column-count: 2; } #log { padding-top: 10px; } javascript content now l...
SubtleCrypto.generateKey() - Web APIs
for rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep: pass an rsahashedkeygenparams object. for ecdsa or ecdh: pass an eckeygenparams object. for hmac: pass an hmackeygenparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass an aeskeygenparams object. extractable is a boolean indicating whether it will be possible to export the key using subtlecrypto.exportkey() or subtlecrypto.
wrapkey(). keyusages is an array indicating what can be done with the newly generated key. possible values for array elements are: encrypt: the key may be used to encrypt messages. decrypt: the key may be used to decrypt messages. sign: the key may be used to sign messages. verify: the key may be used to verify signatures. derivekey: the key may be used in deriving a new key. de...
...be done with the newly generated key. possible values for array elements are: encrypt: the key may be used to encrypt messages. decrypt: the key may be used to decrypt messages. sign: the key may be used to sign messages. verify: the key may be used to verify signatures. derivekey: the key may be used in deriving a new key. derivebits: the key may be used in deriving bits.
wrapkey: the key may be used to
wrap a key. un
wrapkey: the key may be used to un
wrap 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 priva...
SubtleCrypto.importKey() - Web APIs
for hmac: pass an hmacimportparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass the string identifying the algorithm or an object of the form { "name": algorithm }, where algorithm is the name of the algorithm. for pbkdf2 : pass the string pbkdf2. extractable is a boolean indicating whether it will be possible to export the key using subtlecrypto.exportkey() or subtlecrypto.
wrapkey(). keyusages is an array indicating what can be done with the key. possible array values are: encrypt: the key may be used to encrypt messages. decrypt: the key may be used to decrypt messages. sign: the key may be used to sign messages. verify: the key may be used to verify signatures. derivekey: the key may be used in deriving a new key. derivebits: the key may be used ...
...an array indicating what can be done with the key. possible array values are: encrypt: the key may be used to encrypt messages. decrypt: the key may be used to decrypt messages. sign: the key may be used to sign messages. verify: the key may be used to verify signatures. derivekey: the key may be used in deriving a new key. derivebits: the key may be used in deriving bits.
wrapkey: the key may be used to
wrap a key. un
wrapkey: the key may be used to un
wrap 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 un
wrapped key is of type secret or private. typeerror raise...
WebGLRenderingContext.getTexParameter() - Web APIs
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 (default value), gl.linear_mipmap_linear. gl.texture_
wrap_s glenum
wrapping function for texture coordinate s gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. gl.texture_
wrap_t glenum
wrapping function for texture coordinate t gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. additionally available when using the ext_texture_filter_anisotropic extension ext.textur...
...xture_immutable_levels gluint ? any uint values. gl.texture_max_level glint maximum texture mipmap array level any int values. gl.texture_max_lod glfloat texture maximum level-of-detail value any float values. gl.texture_min_lod glfloat texture minimum level-of-detail value any float values. gl.texture_
wrap_r glenum
wrapping function for texture coordinate r gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. return value returns the requested texture information (as specified with pname). if an error occurs, null is returned. examples gl.gettexparameter(gl.texture_2d, gl.texture_mag_filter); specifications specification status comment ...
WebGLRenderingContext.texParameter[fi]() - Web APIs
pname description param available in webgl 1 gl.texture_mag_filter texture magnification filter gl.linear (default value), gl.nearest. gl.texture_min_filter texture minification filter gl.linear, gl.nearest, gl.nearest_mipmap_nearest, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear (default value), gl.linear_mipmap_linear. gl.texture_
wrap_s
wrapping function for texture coordinate s gl.repeat (default value),gl.clamp_to_edge, gl.mirrored_repeat. gl.texture_
wrap_t
wrapping function for texture coordinate t gl.repeat (default value),gl.clamp_to_edge, gl.mirrored_repeat. additionally available when using the ext_texture_filter_anisotropic extension ext.texture_max_anisotropy_ext maximum aniso...
... gl.texture_compare_mode texture comparison mode gl.none (default value), gl.compare_ref_to_texture. gl.texture_max_level maximum texture mipmap array level any int values. gl.texture_max_lod texture maximum level-of-detail value any float values. gl.texture_min_lod texture minimum level-of-detail value any float values. gl.texture_
wrap_r
wrapping function for texture coordinate r gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. return value none. examples gl.texparameterf(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear_mipmap_nearest); specifications specification status comment webgl 1.0the definition o...
Taking still photos with WebRTC - Web APIs
iv class="output"> <img id="photo" alt="the screen capture will appear in this box."> </div> that's all of the relevant html. the rest is just some page layout fluff and a bit of text offering a link back to this page. the javascript code now let's take a look at the javascript code. we'll break it up into a few bite-sized pieces to make it easier to explain. initialization we start by
wrapping the whole script in an anonymous function to avoid global variables, then setting up various variables we'll be using. (function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those vari...
...en the click event is issued: startbutton.addeventlistener('click', function(ev){ takepicture(); ev.preventdefault(); }, false); this method is simple enough: it just calls our takepicture() function, defined below in the section capturing a frame from the stream, then calls event.preventdefault() on the received event to prevent the click from being handled more than once.
wrapping up the startup() method there are only two more lines of code in the startup() method: clearphoto(); } this is where we call the clearphoto() method we'll describe below in the section clearing the photo box. clearing the photo box clearing the photo box involves creating an image, then converting it into a format usable by the <img> element that displays the most recently captured...
Example and tutorial: Simple synth keyboard - Web APIs
s based on audioscheduledsourcenode, this is to some extent an example for that as well. the video keyboard html there are three primary components to the display for our virtual keyboard. the first is the musical keyboard itself. we draw this in a pair of nested <div> elements so that we can make the keyboard horizontally scrollable if all the keys don't fit on the screen, without having them
wrap around. the keyboard first, we create space to build the keyboard into. we will be programmatically constructing the keyboard, because doing so gives us the flexibility to configure each key as we determine the appropriate data for the corresponding note. in our case, we get each key's frequency from a table, but it could be calculated algorithmically as well. <div class="container"> <div cl...
... name="waveform"> <option value="sine">sine</option> <option value="square" selected>square</option> <option value="sawtooth">sawtooth</option> <option value="triangle">triangle</option> <option value="custom">custom</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660px; height: 110px; white-space: no
wrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-us...
ARIA: Comment role - Accessibility
the comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment. examples in the following example we have a document section that has been commented. the commented section is marked up using <span role="mark">. the related comment is marked up using an html structure
wrapped with a <div> containing role="comment". <p>the last half of the song is a slow-rising crescendo that peaks at the <span role="mark" aria-details="thread-1">end of the guitar solo</span>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> to associ...
... multiple comments since aria-details can now accept multiple ids, we can associate multiple comments with the same annotation, like so: <p>the last half of the song is a slow-rising crescendo that peaks at the <mark aria-details="thread-1 thread-2">end of the guitar sol...
ARIA: Mark role - Accessibility
accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document. using too many landmark roles...
..."comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> the related comment is marked up using an html structure
wrapped with a <div> containing role="comment". to associate the comment with the text being commented, we need to
wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment. 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 pract...
Using feature queries - CSS: Cascading Style Sheets
he width if display: grid is supported. this is exactly the situation feature queries solve. we can set the width back to auto if grid is supported. in the above scenario, it doesn't matter that ie11 doesn't support feature queries or css grid — it would get the floated version anyway, which is then overwritten by browsers that do support grid. an alternate way to write the above code is to
wrap all of the grid code in a feature query as follows. this may mean you have a little more code but comes with the benefit of being able to test the fallback by misspelling the property or value name. you can try this in the live example above by changing display: grid in the @supports rule to display: grip or similar. summary feature queries can help you start to use newer features by enhanci...
... you have a little more code but comes with the benefit of being able to test the fallback by misspelling the property or value name. you can try this in the live example above by changing display: grid in the @supports rule to display: grip or similar. summary feature queries can help you start to use newer features by enhancing a simpler display of the site used for older browsers. as you can
wrap up the css for supporting browsers, you do not run the risk of styles used for the fallback display leaking through, as shown in our grid example above. see also the @supports rule learn layout: supporting older browsers css grid layout and progressive enhancement using feature queries in css ...
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
f will align the items to the left and right. you can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example. aligning content on the cross axis — the align-content property so far we have been aligning the items, or an individual item inside the area defined by the flex-container. if you have a
wrapped multiple-line flex container then you might also want to use the align-content property to control the distribution of space between the rows. in the specification this is described as packing flex lines. for align-content to work you need more height in your flex container than is required to display the items. it then works on all the items as a set, and dictates what happens with that free...
...on: column. then flex-start will then be where the top of your first paragraph of text would start. if you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. flex-start will then change to the end of that axis — so to the location where your lines would
wrap if working in rows, or at the end of your last paragraph of text in the block direction. using auto margins for main axis alignment we don’t have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. however it is possible to do some individual alignment in order to separate an item or a group of items from others by us...
CSS Flexible Box Layout - CSS: Cascading Style Sheets
d right items being flush with the edges of the flex container. you can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch. the items stretch to the height of the flex container, making them each appear as tall as the tallest item. reference css properties flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-
wrap order alignment properties the properties align-content, align-self, align-items and justify-content initially appeared in the flexbox specification, but are now defined in box alignment. the flexbox spec now refers to the box alignment specification for up to date definitions. also additional alignment properties are now defined in box alignment. justify-content align-content align-it...
...ethods, and other css specifications aligning items in a flex container how the box alignment properties work with flexbox. ordering flex items explaining the different ways to change the order and direction of items, and covering the potential issues in doing so. controlling ratios of flex items along the main axis explaining the flex-grow, flex-shrink and flex-basis properties. mastering
wrapping of flex items how to create flex containers with multiple lines and control the display of the items in those lines. typical use cases of flexbox common design patterns that are typical flexbox use cases. backwards compatibility of flexbox browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec specifications specification ...
Consistent list indentation - CSS: Cascading Style Sheets
has no marker (otherwise known as a "bullet") and is not yet part of a list itself. it hangs alone in the void, simple and unadorned, as shown in figure 1. that dotted red border represents outer edges of the content-area of the list item. remember that, at this point, the list item has no padding or borders. if we add two more list items, we get a result like that shown in figure 2. now we
wrap these in a parent element; in this case, we'll
wrap them in an unordered list (i.e., <ul>). according to the css box model, the list items' boxes must be displayed within the parent element's content area. since that parent has no padding or margins yet, we get the situation shown in figure 3. here, the dotted blue border shows us the edges of the <ul> element's content area. since we have no ...
... now we add the list item markers. since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in figure 4. visually, the markers are outside the content area of the <ul>, but that's not the important part here. what's key is that the markers are placed outside the "principal box" of the <li> elements, not the <ul>. ...
Inline formatting context - CSS: Cascading Style Sheets
this box will be large enough to contain all of the inline boxes in that line; when there is no more room in the inline direction another line will be created. therefore a paragraph is a set of inline line boxes, stacked in the block direction. when an inline box is split, margins, borders, and padding have no visual effect where the split occurs. in the next example there is a (<span>) element
wrapping a set of words
wrapping onto two lines. the border on the <span> breaks at the
wrapping point. margins, borders, and padding in the inline direction are respected. in the example below you can see how the margin, border, and padding on the inline <span> element are added. note: i am using the logical, flow-relative properties — padding-inline-start rather than padding-left — so tha...
...he inline boxes within their line box. try changing the value of text-align below to end. effect of floats line boxes usually have the same size in the inline direction, therefore the same width if working in a horizontal writing mode, or height if working in a vertical writing mode. if there is a float within the same block formatting context however, the float will cause the line boxes that
wrap the float to become shorter. ...
Column layouts - CSS: Cascading Style Sheets
ntainer and will place each direct child into a new column. this is a different behavior to what you saw with multicol. there is currently no way to add a rule between flex items, and browser support for the column-gap and row-gap properties is limited. therefore to create gaps between items use a margin. download this example flexbox can also be used to create layouts where the flex items
wrap onto new rows, by setting the flex-
wrap property on the container to
wrap. these new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you'll see in the example below. this is why flexbox is described as one-dimensional. it is designed for controlling layout as a row or a column, but not both at the same time. ...
...ine up with items in the line above, as you'll see in the example below. this is why flexbox is described as one-dimensional. it is designed for controlling layout as a row or a column, but not both at the same time. download this example use flexbox: for single rows or columns of items. when you want to do alignment on the cross axis after laying out your items. when you are happy for
wrapped items to share out space along their line only and not line up with items in other lines. lining items up in rows and columns — grid layout if what you want is a layout where items line up in rows and columns then you should choose css grid layout. grid layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of...
Sticky footers - CSS: Cascading Style Sheets
or creating one in this recipe. requirements the sticky footer pattern needs to meet the following requirements: footer sticks to the bottom of the viewport when content is short. if the content of the page extends past the viewport bottom, the footer then sits below the content as normal. the recipe download this example note: in this example and the following one we are using a
wrapper set to min-height: 100% in order that our live example works. you could also achieve this for a full page by setting a min-height of 100vh on the <body> and then using it as your grid container. choices made in the above example we achieve the sticky footer using css grid layout. the .
wrapper has a minimum height of 100% which means it is as tall as the container it is in. we then create a ...
...tent into the 1fr track and the footer into the final auto sized track. the 1fr track will take up all available space and so grows to fill the gap. alternate method if you need compatibility with browsers that do not support grid layout you can also use flexbox to create a sticky footer. the flexbox example starts out in the same way, but we use display:flex rather than display:grid on the .
wrapper; we also set flex-direction to column. then we set our main content to flex-grow: 1 and the other two elements to flex-shrink: 0 — this prevents them from shrinking smaller when content fills the main area. ...
Linear-gradient Generator - CSS: Cascading Style Sheets
ont-size: 13px; overflow: hidden; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #output .css-property { width: 90%; margin: 5px 5%; color: #777; position: relative; float: left; } #output .property { height: 100%; width: 12%; position: absolute; left: 0; } #output .value { width: 88%; position: absolute; white-space: pre; word-
wrap: break-word; display: block; right: 0; } javascript content var uicolorpicker = (function uicolorpicker() { 'use strict'; function getelembyid(id) { return document.getelementbyid(id); } var subscribers = []; var pickers = []; /** * rgba color class * * hsv/hsb and hsl (hue, saturation, value / brightness, lightness) * @param hue 0-360 * @param saturation 0-100 * ...
...= document.createelement('div'); var preview_color = document.createelement('div'); preview_box.classname = 'preview'; preview_color.classname = 'preview-color'; this.preview_color = preview_color; preview_box.appendchild(preview_color); this.node.appendchild(preview_box); }; colorpicker.prototype.newinputcomponent = function newinputcomponent(title, topic, onchangefunc) { var
wrapper = document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span');
wrapper.classname = 'input';
wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text');
wrapper.appendchild(info);
wrapper.appendchild(input); this.node.appendchild(
wrapper); inpu...
WebKit CSS extensions - CSS: Cascading Style Sheets
-webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-style -webkit-column-rule-width -webkit-column-span -webkit-column-width -webkit-columns f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-
wrap -webkit-font-feature-settings -webkit-font-kerning -webkit-font-variant-ligatures g-j -webkit-grid -webkit-grid-area -webkit-grid-auto-columns -webkit-grid-auto-flow -webkit-grid-auto-rows -webkit-grid-column -webkit-grid-column-end -webkit-grid-column-gap -webkit-grid-column-start -webkit-grid-gap -webkit-grid-row -webkit-grid-row-end -webkit-grid-row-gap -webkit-grid-row-st...
...r-radius -webkit-box-align**, *** -webkit-box-direction**, *** -webkit-box-flex**, *** -webkit-box-orient**, *** -webkit-box-pack**, *** -webkit-box-shadow -webkit-box-sizing -webkit-border-top-left-radius -webkit-border-top-right-radius f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-
wrap j -webkit-justify-content m -webkit-mask -webkit-mask-clip -webkit-mask-composite* -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-position-x** -webkit-mask-position-y** -webkit-mask-repeat -webkit-mask-size o-p -webkit-order -webkit-perspective -webkit-perspective-origin t -webkit-text-fill-color** -webkit-text-size-adjust -webkit-text-s...
align-items - CSS: Cascading Style Sheets
erflow-position>? <self-position> ]where <baseline-position> = [ first | last ]? ...
...-position>? <self-position> ]where <baseline-position> = [ first | last ]? ...
border-image-slice - CSS: Cascading Style Sheets
word is used) — varying this away from 30 causes the border to look somewhat irregular, but can have some interesting effects. border-width: changes the width of the border. the sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an svg image). ...
...div> <ul> <li> <label for="width">slide to adjust <code>border-width</code></label> <input type="range" min="10" max="45" id="width"> <output id="width-output">30px</output> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <input type="range" min="10" max="45" id="slice"> <output id="slice-output">30</output> </li> </ul> css .
wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslid...
float - CSS: Cascading Style Sheets
the element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning). the source for this interactive example is stored in a github repository. if 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 floating element is one where the computed value of float is not none. ...
...is shifted to the left, or right, until it touches the edge of its containing box, or another floated element. in this example, there are three colored squares. two are floated left, and one is floated right. note that the second "left" square is placed to the right of the first. additional squares would continue to stack to the right, until they filled the containing box, after which they would
wrap to the next line. a floated element is at least as tall as it's tallest nested floated children. we gave the parent width: 100% and floated it to ensure it is tall enough to encompass it's floated children, and to make sure it takes up the width of the parent so we don't have to clear it's adjacent sibling. html <section> <div class="left">1</div> <div class="left">2</div> <div class="ri...
gap (grid-gap) - CSS: Cascading Style Sheets
o except on multi-column elementsanimation typeas each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentage or calc(); formal syntax <'row-gap'> <'column-gap'>? ...
...pt on multi-column elementsanimation typeas each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentage or calc(); formal syntax <'row-gap'> <'column-gap'>? ...
hyphens - CSS: Cascading Style Sheets
it can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. hyphenation rules are language-specific. in html, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. ...
... from browser to browser. syntax /* keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* global values */ hyphens: inherit; hyphens: initial; hyphens: unset; the hyphens property is specified as a single keyword value chosen from the list below. values none words are not broken at line breaks, even if characters inside the words suggest line break points. lines will only
wrap at whitespace. manual words are broken for line-
wrapping only where characters inside the word suggest line break opportunities. see suggesting line break opportunities below for details. auto the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. however, suggested line break opportunities (see suggesting line break opportunit...
left - CSS: Cascading Style Sheets
nition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples positioning elements html <div id="
wrap"> <div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>the only containing element for this div is the main window, so it positions itself in relation to it.</p> </div> <div id="example_2"> <pre> position: relative; top: 0; right: 0; </pre> <p>relative position in relation to its siblings.</p> </div> ...
...e> position: absolute; bottom: 10px; right: 20px; </pre> <p>absolute position inside of a parent with relative position</p> </div> <div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>absolute position with both left and right declared</p> </div> </div> </div> css #
wrap { width: 700px; margin: 0 auto; background: #5c5c5c; } pre { white-space: pre; white-space: pre-
wrap; white-space: pre-line; word-
wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px; background-color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; background-col...
mask-position - CSS: Cascading Style Sheets
ercentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? ...
... setting mask position css #
wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="
wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <op...
position - CSS: Cascading Style Sheets
d height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
... recommendation css positioned layout module level 3the definition of 'position' in that specification. working draft adds sticky property value. browser compatibil...
scroll-snap-type - CSS: Cascading Style Sheets
iv> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y proximity-scroll-snapping" dir="rtl"> <div>y prox. ...
...div> <div>5</div> </div> </div> css /* setup */ html, body, .holster { height: 100%; } .holster { display: flex; align-items: center; justify-content: space-between; flex-flow: column no
wrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row no
wrap; } .container.y { width: 256px; height: 256px; flex-flow: column no
wrap; } /* 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...
text-overflow - CSS: Cascading Style Sheets
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. the text-overflow property doesn't force an overflow to occur. to make text overflow its container you have to set other css properties: overflow and white-space. for example: overflow: hidden; white-space: no
wrap; the text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example). syntax the text-overflow property may be specified using one or two values. if one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end...
... of the line box are clipped to the width of the line box. ...
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
treated as rtl. some other characters (such as spaces and some punctuation) are treated as neutral and are assigned directionality based on that of their surrounding characters. usually, the bidirectional algorithm will do the right thing without the author having to provide any special markup but, occasionally, the algorithm needs help. that's where <bdi> comes in. the <bdi> element is used to
wrap a span of text and instructs the bidirectional algorithm to treat this text in isolation from its surroundings. this works in two ways: the directionality of text embedded in <bdi> does not influence the directionality of the surrounding text. the directionality of text embedded in <bdi> is not influenced by the directionality of the surrounding text. for example, consider some text like: ...
...f the surrounding text. for example, consider some text like: embedded-text - 1st place if embedded-text is ltr, this works fine. but if embedded-text is rtl, then - 1 will be treated as rtl text (because it consists of neutral and weak characters). the result will be garbled: 1 - embedded-textst place if you know the directionality of embedded-text in advance, you can fix this problem by
wrapping embedded-text in a <span> with the dir attribute set to the known directionality. but if you don't know the directionality - for example, because embedded-text is being read from a database or entered by the user - you should use <bdi> to prevent the directionality of embedded-text from affecting its surroundings. though the same visual effect can be achieved using the css rule unicode-bidi:...
<input type="time"> - HTML: Hypertext Markup Language
for example, specifying a min of 14:00 and a max of 2:00 means that the permitted time values start at 2:00 pm, run through midnight to the next day, ending at 2:00 am. see more in the making min and max cross midnight section of this article. list the values of the list attribute is the id of a <datalist> element located in the same document. the <datalist> ...
...s that: only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid. depending on what browser you're using, you might find that times outside the specified range might not even be selectable in the time picker (e.g. edge). making min and max cross midnight by setting a min attribute greater than the max attribute, the valid time range will
wrap around midnight to produce a valid time range which crosses midnight. this functionality is not supported by any other input types. while this feature is in the html spec, it is not yet universally supported. chrome-based browsers support it starting in version 82 and firefox added it in version 76. no information is yet available about when or if safari will add it. be prepared for this situatio...
<nobr>: The Non-Breaking Text element (obsolete) - HTML: Hypertext Markup Language
the non-standard, obsolete html <nobr> element prevents the text it contains from automatically
wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. this element was never standard html and was not widely implemented, so you shouldn't use it. ...
...standard, obsolete html <nobr> element prevents the text it contains from automatically
wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. this element was never standard html and was not widely implemented, so you shouldn't use it. ...
Function.prototype.bind() - JavaScript
as the thisarg for the new function. arg1, arg2, ...argn optional arguments to prepend to arguments provided to the bound function when invoking func. return value a copy of the given function with the specified this value, and initial arguments (if provided). description the bind() function creates a new bound function, which is an exotic function object (a term from ecmascript 2015) that
wraps the original function object. calling the bound function generally results in the execution of its
wrapped function. a bound function has the following internal properties: [[boundtargetfunction]] the
wrapped function object [[boundthis]] the value that is always passed as this value when calling the
wrapped function. [[boundarguments]] a list of values whose elements are used as the fi...
... [[call]] executes code associated with this object. invoked via a function call expression. the arguments to the internal method are a this value and a list containing the arguments passed to the function by a call expression. ...
Promise.prototype.then() - JavaScript
r or returns a rejected promise. promise.resolve() .then(() => { // makes .then() return a rejected promise throw new error('oh no!'); }) .then(() => { console.log('not called.'); }, error => { console.error('onrejected function called: ' + error.message); }); in all other cases, a resolving promise is returned. ...
...console.log('not called.'); }, error => { console.error('onrejected function called: ' + error.message); }); in all other cases, a resolving promise is returned. in the following example, the first then() will return 42
wrapped in a resolving promise even though the previous promise in the chain was rejected. promise.reject() .then(() => 99, () => 42) // onrejected returns 42 which is
wrapped in a resolving promise .then(solution => console.log('resolved with ' + solution)); // resolved with 42 in practice, it is often desirable to catch rejected promises rather than use then's two case syntax, as demonstrated below. promise.resolve() .then(() => { // makes .then() return a rejected promise throw new error('oh no!'); }) .catch(error => { console.error('onrejec...
edgeMode - SVG: Scalable Vector Graphics
ositioned at or near the edge of the input image. two elements are using this attribute: <feconvolvematrix> and <fegaussianblur> feconvolvematrix for <feconvolvematrix>, edgemode determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. value duplicate |
wrap | none default value duplicate animatable yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
wrap this value indicates that the input image is extended by taking the color values from the opposite edge of the image. none this value ind...
...pposite edge of the image. none this value indicates that the input image is extended with pixel values of zero for r, g, b and a. fegaussianblur for <fegaussianblur>, edgemode determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. value duplicate |
wrap | none default value none animatable yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
wrap this value indicates that the input image is extended by taking the color values from the opposite edge of the image. none this value indicate...
text-anchor - SVG: Scalable Vector Graphics
for those cases you should use text-align. for multi-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
...for those cases you should use text-align. for multi-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
widget - Archive of obsolete content
e add-on code using the postmessage() api or the port api. the crucial difference is that these scripts access the postmessage and port objects through the addon object, whereas content scripts access them through the self object. to show the difference, convert the player add-on above to use normal page scripts instead of content scripts. ...
content/loader - Archive of obsolete content
take the appropriate action. the loader is used by modules that use content scripts but don't themselves load content, such as page-mod. modules that load their own content, such as panel and page-worker, use the symbiont module instead. symbiont inherits from loader but contains its own frame into which it loads content supplied as the contenturl option. ...
Listening for Load and Unload - Archive of obsolete content
ng a string describing the reason it was loaded as well as any arguments passed to it. if your add-on exports a function called onunload(), then that function will be called when the add-on is unloaded, and it will be passed a string describing the reason it was unloaded. you don't have to use exports.main() or exports.onunload(). you can just place your add-on's code at the top level instead of
wrapping it in a function assigned to exports.main(). it will be loaded in the same circumstances, but you won't get access to the load/unload reason or arguments. exports.main() your add-on's main.js code is executed as soon as it is loaded. it is loaded when it is installed, when it is enabled, or when firefox starts. if your add-on exports a function called main(), that function will be called i...
Localization - Archive of obsolete content
erence localized strings from your main add-on code, you do this: var _ = require("sdk/l10n").get; console.log(_("hello_id")); assigning to "_" in particular is not required, but is a convention from the gettext tools and will make it possible to work with existing tools that expect "_" to indicate localizable strings. import the l10n module, and assign its get function to "_" (underscore).
wrap all references to localizable strings with the _() function. if you run it you'll see the expected output for the current locale: info: hello! info: bonjour ! note that because you can't require() modules in content scripts, you can't yet reference localized strings from content scripts. plurals the l10n module supports plural forms. different languages have different rules for the forma...
Canvas code snippets - Archive of obsolete content
losepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be
wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'strokestyle', 'textalign', 'textb...
JavaScript Debugger Service - Archive of obsolete content
you can use insertfilter (jsdifilter filter, jsdifilter after) to insert the filter after a particular filter; you can pass null for jsdifilter after to insert at the head of the list. you can also use swapfilters (jsdifilter filter_a, jsdifilter filter_b) to swap filters, and r...
Post data to window - Archive of obsolete content
of an nsiinputstream (because they eventually call nsiwebnavigation.loaduri()) while post data can be created using nsimimeinputstream. most of the time, post data starts as a data string in the form of "name1=data1&name2=data2&...", so you must convert it before passing the data to one of the methods. here is an example: var datastring = "name1=data1&name2=data2"; // post method requests must
wrap the encoded text in a mime // stream const cc = components.classes; const ci = components.interfaces; var stringstream = cc["@mozilla.org/io/string-input-stream;1"]. createinstance(ci.nsistringinputstream); if ("data" in stringstream) // gecko 1.9 or newer stringstream.data = datastring; else // 1.8 or older stringstream.setdata(datastring, datastring.length); var postdata...
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
unctions are now available via the new string api - appendutf16toutf8(srcstring, deststring); + deststring.append(ns_convertutf16toutf8(srcstring)); the signatures of the find methods differ between the two apis. if you are only finding a single character, prefer the findchar method. the (lossy)copy(ascii|utf8|16)to(ascii|utf8|16) do not accept character pointer parameters. you must explicitly
wrap them in an appropriate dependent string. you cannot make a dependent string from an abstract string. nor can you use nspromiseflat(c)string. you probably meant to use promiseflat(c)string instead. note that you don't need to promise a flat string if you already have an ns(c)(auto)string type, since they are already flat. you cannot mix string variables and literals in comparison operators. in par...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
such as descriptive text. the value of the value attribute is the text that will be displayed. the control attribute takes as its value an id reference to another xul element with that id; clicking that label or giving it focus can be used to pass the focus to the referenced xul element. this can also be used to display longer chunks of text. if you want to insert long strings that automatically
wrap to the window’s width, you can use the flex attribute as shown in listing 14, which will automatically expand it; in this case you don't set the value using the value attribute, instead you should place it in the contents of the element. figure 10 shows the output from this listing. <hbox> <label flex="1"> proceeding with this action will send your personal information to a server. are you...
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
in rejection if submitted to addons.mozilla.org. permit by dialog try adding the contents of listing 2 to test.xul, before the line var ioservice = …, and re-open it in firefox. you should now see the confirmation dialog shown in figure 1. pressing the "permit" button grants universalxpconnect permission in this execution context, making it possible to run xpconnect temporarily. an xpconnect-
wrapped nsiioservice message should appear. if you check “apply these privileges in the future”, all local files will be able to run xpconnect without confirmation in the future. this is extremely dangerous, and you should never check this option. editing prefs.js opening test.xul will produce the dialog shown in figure 1. this can get annoying. to run the file's scripts without manual confirma...
Adding Events and Commands - Archive of obsolete content
s. use oncommand instead. onfocus and onblur. used when an element receives or loses focus when the user is navigating with the keyboard. you can combine these with -moz-user-focus to add custom focus behavior to elements that normally wouldn't have it. drag and drop. drag and drop operations involve several events. since drag and drop is a complicated thing to manage, there are some high level
wrappers that facilitate working with it. also keep in mind that there are 2 drag and drop apis, the newest (and preferred) one introduced in firefox 3.5. event handlers can take an event argument, which is an event object that holds information on the event. you can get information on key modifiers (in case the user was holding a modifier key like alt while performing the event), screen coordinates...
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
ar addtab = (auri) => tabbrowser.addtab(auri); same as with "passing functions/code as strings" above, patching a function to with fragments of externally retrieved data will create security vulnerabilities. alternative: replace + function.apply() you may replace the original function with a new function, keeping a reference to the original function which you then call from the new one. //
wrap in an anonymous function (which is called immediately). // this will encapsulate local variables such as _original and // not pollute the global namespace. (function() { // keep a reference to the original function. var _original = gbrowser.addtab; // override a function. gbrowser.addtab = function() { // execute some action before the original function call. try { myadd...
JavaScript Object Management - Archive of obsolete content
vascript feature (quirk would be a better word for it) called method binding. the consequence of doing this wrong is to have a this reference that doesn't do what you expected it to do. there are a few workarounds for this, and we use the ones we have found to be the most elegant and clear to read. the general guideline we follow is this: whenever you have to set a callback function parameter,
wrap it in an anonymous function. that is, something like function() { /* your code, usually a single function call. */ }. if you have to use a reference to this inside the function, declare a variable called that that equals this, and use that in the anonymous function. javascript has a host of features that make it extremely flexible, but it also has some disadvantages, as it is not as strict as ...
Index of archived content - Archive of obsolete content
dehydra object reference installing dehydra using dehydra developing new mozilla features devmo 1.0 launch roadmap download manager improvements in firefox 3 download manager preferences drag and drop drag and drop example drag and drop javascript
wrapper drag and drop events editor embedding guide embedding faq embedding mozilla in a java application using javaxpcom error console exception logging in javascript existing content extension frequently asked questions external cvs snapshots in mozilla-central fast graphics p...
List of Mozilla-Based Applications - Archive of obsolete content
midbrowser mobile web browser mockery mockup creation tool built on xulrunner mongodb database project uses spidermonkey moyura email client part of the khmeros linux distro mozcards, jolistopwatch, jolitimer simple apps for maemo uses xulrunner moznet .net control embeddable gecko for .net applications
wraps xulrunner for use in .net applications my internet browser localized browser uses gecko myna application server javascript application server for java uses mozilla rhino nextcms (fr) cms nightingale music player community run effort to continue songbird support for linux olpc web browser browser oneteam jabb...
Drag and Drop Example - Archive of obsolete content
nd 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 the stack. a maximum size ...
Drag and Drop - Archive of obsolete content
his point, the user has already released the mouse button. the element can simply ignore the event or can handle it some way, such as pasting the dragged object into itself. ondragend called when the drag operation is finished. there are two ways that drag and drop events can be handled. this first involves using the drag and drop xpcom interfaces directly. the second is to use a javascript
wrapper object that handles some of this for you. the code for this
wrapper can be found in a file named toolkit/content/nsdraganddrop.js nsdraganddrop.js which is contained in the widget-toolkit (or global) package. xpcom drag and drop interfaces two interfaces are used to support drag and drop. the first is a drag service, nsidragservice and the second is the drag session, nsidragsession. the nsi...
Editor Embedding Guide - Archive of obsolete content
boolean), "state_enabled" (boolean) docommand no parameters example normal superscript cmd_subscript toggles subscript style on selection. getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters example normal subscript cmd_nobreak toggles nobreak style on selection. text is not
wrapped by word. getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters note this one is not visually notable in the general case. cmd_em toggles emphasis on selection. getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_en...
Layout FAQ - Archive of obsolete content
could check the dirty and dirty_children framestate flags. that won't help with pending style changes, but it'll work to detect cases when the popup or something in it needs to be reflown. ...
Style System Overview - Archive of obsolete content
ted any data, and mark dependent bits on the path up to that rule node. managing style contexts style contexts must (in most cases) be created before frames are constructed, to determine what frame to create. parent style context determines inheritance; it should always be the content parent. [design flaw in frame/sc relationship] three functions for creating style contexts on nsistyleset,
wrapped by similarly named ones on nsiprescontext: resolvestylecontextfor: for elements. resolvepseudostylecontextfor: for pseudo-elements (:first-letter, :before, etc.) resolvestylecontextfornonelement: skips rule matching and uses root rule node (text frame optimization) managing style contexts style context resolving functions will walk the rule processors in stylesetimpl::fil...
Creating a Help Content Pack - Archive of obsolete content
e enough. open up your favorite text editor and create the file content-pack.rdf. insert into it the following text: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> </rdf:rdf> if you're familiar with html or xml, you might recognize this as the container element for the whole document. it serves as a
wrapper around the entire contents of the file, marking it as rdf. next, you'll need to insert a rdf:description element into the file, inside the rdf:rdf element just created: <rdf:description rdf:about="urn:root" nc:title="" nc:defaulttopic="" nc:base=""> </rdf:description> fill in the attributes as follows: rdf:about must...
generateCRMFRequest() - Archive of obsolete content
egtoken" a value used to authenticate the user to the ra/ca. "authenticator" a value that the user can authenticate with in the future when their private key is not available. can be used for key recovery or revocation requests. "escrowauthoritycert" if this value is null, then no key escrow will be performed. this value specifies which kra certificate should be used to
wrap the private key being escrowed. the user will be prompted for confirmation whenever a key will be escrowed. only key exchange keys will be escrowed. if a dual use key is being generated, it will not be escrowed. the value of this argument is a base-64 encoded certificate. "crmf generation done code" this parameter is javascript to execute when the crmf generation is complete. ...
Twitter - Archive of obsolete content
.lib.twitter.statuses.update() -- without providing a username or password, firefox will prompt the user for them if she is not already authenticated with twitter. both methods use http basic authentication. in the future, the library may support oauth. see twitter's authentication documentation for related information. faq see twitter's api faq. since jetpack's twitter library is a very thin
wrapper around twitter's api, most everything there applies here, and not much applies here that doesn't apply there. example usage tweeting jetpack.lib.twitter.statuses.update({ status: "o frabjous day!" }); firefox will prompt for a username and password if the user is not already authenticated with twitter. user info jetpack.lib.twitter.users.show({ id: "mozlabs", success: function (data, sta...
Mozilla Application Framework in Detail - Archive of obsolete content
and javascript. modular, embeddable: gecko's modular architecture enables developers to add or remove modules with little effort, fitting the software to the available hardware and adjusting functionality to match product requirements. gecko is implemented as a collection of xpcom components that can be easily added or removed. flexible programming interfaces such as the web shell api, the java
wrapper api and the gecko activex control make gecko easily embeddable into applications and devices. full browser functionality: gecko allows any desktop application as well as new devices, products and appliances to be web-enabled, with complete browser functionality. supported standards and features include data transport protocols, multilingual character data, image data, java and plugins. open ...
Nanojit - Archive of obsolete content
n acronym for "low-level intermediate representation". a compiler's lir is typically one of several partly-compiled representations of a program that a compiler produces on the way from raw source code to machine code. an application using nanojit creates a nanojit::lirbuffer object to hold lir instructions. it creates a nanojit::lirbufwriter object to write instructions to the buffer. then it
wraps the lirbufwriter in zero or more other lirwriter objects, all of which implement the same interface as lirbufwriter. this chain of lirwriter objects forms a pipeline for the instructions to pass through. each lirwriter can perform an optimization or other task on the program as it passes through the system and into the lirbuffer. once the instructions are in the lirbuffer, the application call...
RDF Datasource How-To - Archive of obsolete content
ssert() to set up the in-memory datasource. when flush() is called, or the last reference to the datasource is released, a routine walks the in-memory datasource and re-serializes the graph back to the original file format. for examples of an implementation like this, look at the rdf/xml datasource or the bookmarks datasource. you may want to choose this implementation if your primary goal is to "
wrap" a legacy data store. this implementation may cause problems if your data store can be modified "on the fly" by other agents. aggregate the in-memory datasource. this is an extreme case of delegation, where you use xpcom aggregation to implement the nsirdfdatasource interface. see aggregating the in-memory datasource for technical details. if you take this approach, you won't be able to selecti...
Table Layout Strategy - Archive of obsolete content
ble width="200px" border> <tbody> <tr><td>foo</td><td width="100%">bar</td></tr> </tbody> </table> the conflict free solution, the column should have the minimum width. so we specify it (this breaks in some other browsers) <col width="0*"><col><tbody></tbody>foobar <table border width="200px"> <col width="0*"><col> <tbody> <tr><td>foo</td><td>bar</td></tr> </tbody> </table> this shrink
wrapping width has usually the suffix 0proportional effective columns <tbody></tbody>foobarbazzap <table width="200px" border> <tbody> <tr><td>foo</td><td colspan="2" width="120px">bar</td></tr> <tr><td>baz</td><td>zap</td></tr> </tbody> </table> the colspan here is bogus, so the third column should not get any width. one would expect the first column to be 80 px and the second to be 120 px ...
Actionscript Acceptance Tests - Archive of obsolete content
e tests for instructions on running the acceptance test suite. the most common tests are written in actionscript and end with .as. the acceptance test template can be found here. testing versioned bug fixes when testing versioned bug fixes (using avmplus.system.swfversion) there are a couple of requirements: you must use system.swfversion when looking up the swfversion. the test file can not be
wrapped in a package or define classes as the file will be
wrapped in a function when used in the ats. if you must use classes, define them in a sub-dir with the same name as the test. you must create a testname.as.avm_args file with the uses_swfversion directive. support files: there are a variety of support files available for non-standard actionscript tests. testname.as.asc_args this file specifi...
The new nsString class implementation (1999) - Archive of obsolete content
by default, nsstrings use a 2-byte ucs2 character storage model. the nsstring class is very lightweight since it gets its functionality from the nsstrimpl static library. in addition to the nsstrimpl api shown above, nsstring, nsautostring and nscstring all offer additional api's (that all degrade to those found in nsstrimpl) for construction, searching and comparison. also note...
Example Sticky Notes - Archive of obsolete content
this way you protect yourselve from < and > signs breaking your xml layout. it also speeds up the parsing as the engine doesn't go through cdata sections but simply skip on them. --> <constructor><![cdata[ /** * the code below will be called one time only after * the binding is successfully prepared and bound. * "this" in thi...
Windows stub installer - Archive of obsolete content
e packages-win file for it's simple syntax and semantics. add an <component>.jst install script template file. the jst extension stands for javascript template indicating this is a template for the final install.js for the <component>.xpi. checkin the <component>.jst to the: <http://lxr.mozilla.org/seamonkey/sou...ckager/windows> directory. note that there are several macro strings--a macro name
wrapped in dollar ($) signs--which may be used in the .jsts, including: $version$ which is replaced at packages time with the browser version. $spacerequired$ which is replaced at package time with the amount of space in kb required for the package when it is fully extracted. other macro strings listed in makejs.pl can be found by searching for "version", which is one of the macro strings, until yo...
gestalt - Archive of obsolete content
information about the operating environment. method of install object syntax int gestalt ( string selector ); parameters the gestalt method takes the following parameters: selector the selector code for the information you want. returns returns the requested information. the format depends on the select code specified in the selector parameter. description the gestalt method is a
wrapper for the gestalt function of the macintosh toolbox. for information on that function, see inside macintosh: operating system utilities. this method returns null on unix and windows platforms. ...
textbox.type - Archive of obsolete content
e 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. 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 ...
Attribute (XUL) - Archive of obsolete content
opup 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 windowtype
wrap wraparound ...
Deprecated and defunct markup - Archive of obsolete content
er> (clickable tray in <scrollbar> which holds <thumb>; do not use alone) also used as part of <scale> --neil 03 march 2011 <spinner> (spinbox; <spinbuttons> with a textbox whereby spinning affects value in textbox; not usable) <spring> (use @flex instead) <strut> (replaced by @debug?) <tabcontrol> (contained tabbox and tabpanel) <text> (like <label> or <description> but does not
wrap; like <label crop="end">; had been used in menus/toolbars) <textfield> (like <textbox>) <thumb> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar) <title> (to add a caption on a <titledbox> <titledbox> (box with a frame) <titledbutton> (attempt to combine text and images before <button>) <toolbarpaletteitem> required to embed non-buttons in custom...
advanceSelectedTab - Archive of obsolete content
« xul reference home advanceselectedtab( dir,
wrap ) return type: no return value if the argument dir is set to 1, the currently selected tab changes to the next tab. if the argument dir is set to -1, the currently selected tab changes to the previous tab. if the
wrap argument is true, the adjustment will
wrap around when the first or last tab is reached. ...
PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu. this allows items within the menu to be navigated with the cursor keys. the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down,
wrapping around if necessary. on linux and the macintosh, disabled items within the menu are skipped over when navigating with the cursor keys. cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. home/end move the highlight to the beginning or the end of the menu, selecting the ...
Property - Archive of obsolete content
ate 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 useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages
wraparound year yearleadingzero related dom element properties dom:element.attributes dom:element.baseuri dom:element.childelementcount dom:element.childnodes dom:element.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 ...
Providing Command-Line Options - Archive of obsolete content
changeme: change "myapp" to your command line flag (no argument) if (cmdline.handleflag("myapp", false)) { openwindow(chrome_uri, null); cmdline.preventdefault = true; } }, // changeme: change the help info as appropriate, but // follow the guidelines in nsicommandlinehandler.idl // specifically, flag descriptions should start at // character 24, and lines should be
wrapped at // 72 characters with embedded newlines, // and finally, the string should end with a newline helpinfo : " -myapp open my application\n" + " -viewapp <uri> view and edit the uri in my application,\n" + "
wrapping this description\n" }; var nsgetfactory = xpcomutils.generatensgetfactory([commandlinehandler]); ...
Attribute Substitution - Archive of obsolete content
are only needed after a variable. one last thing to point out is that since the only characters that can separate a variable are a caret, a space or the end of the attribute, this means that any other character is valid as a variable name. however, for readability, you should restrict variable names to letters, numbers and perhaps hyphens to separate words. it may be desirable to have longer text
wrap by placing it as the content of a description element. this means that we want to do variable replacement as text, not as an attribute value. a special tag is used for this purpose, the textnode tag. it has one attribute, the value attribute, which may use variable substitution like other attributes. however, the textnode element is not copied into the generated content, but instead a dom text no...
The Joy of XUL - Archive of obsolete content
ured open source calendar library, libical, was harvested for the calendar project. libical is an open source implementation of the ietf's icalendar calendaring and scheduling protocols (rfc 2445, rfc 2446, and rfc 2447). it parses ical components and provides a c api for manipulating the component properties, parameters, and subcomponents. the library was initially integrated by writing an xpcom
wrapper to adapt its interface. to improve performance a greater proportion of application logic was migrated from javascript to the xpcom component. separation of presentation from logic makes applications resilient to change.the original ui implementation made extensive use of graphics for rendering the month and week views. later, as the developers learned more about xul and the implementation of ...
Things I've tried to do with XUL - Archive of obsolete content
bel or some other element inside, there will be a different amount of "empty space" to allocate in different boxes. enn: percentages won't have any effect in these examples though, since the actual height of the container isn't known, and 30% of an unknown number is still an unknown number. vlad: sure; the snippets assume that there's some enclosing structure that will provide the actual height.
wrap the whole thing in a <vbox height="300"> or something. :) silver: if you set height="0" and include "overflow: hidden" on each box that is sharing the space, current gecko will quite happily split the space out according to flex, ignoring the contents of each box, as desired. from my reading of the code, just height="0" should work, but it doesn't seem to. this trick doesn't work in 1.4, but work...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
n" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" onclick="myextension.onclick(event);"/> </toolbarpalette> onclick: function(event) { switch(event.button) { case 0: // left click break; case 1: // middle click break; case 2: // right click break; } } to add more buttons, put more <toolbarbutton> elements inside the <toolbarpalette> element.
wrap elements other than <toolbarbutton> in <toolbaritem>. adding the button bootstrap style adding a button to the browserpalette on runtime in a bootstrap addon is a bit different because the browserpalette is indirectly reached. a simple document.getelementbyid('browsertoolbarpalette') will not work. this is the code to create and add it in. let button = doc.createelement("toolbarbutton"); butto...
Custom toolbar button - Archive of obsolete content
he file. explanation: this xul file adds the button to the application's toolbar customization palette. it also links to the stylesheet and javascript code that the button uses. the last section specifies details of the button. 7. create a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. ...
Input Controls - Archive of obsolete content
r entering one line of text. html also has a textarea element for creating a larger text entry area. in xul, you can use the textbox element for this purpose as well -- two separate elements are not necessary. if you set the multiline attribute to true, the text entry field will display multiple rows. example 2 : source view <textbox multiline="true" value="this is some text that could
wrap onto multiple lines."/> like the html textarea, you can use the rows and cols attributes to set the size. this should be set to the number of rows and columns of characters to display. our find files example let's add a search entry field to the find file dialog. we'll use the textbox element. <label value="search for:" control="find-text"/> <textbox id="find-text"/> <button id="find-butto...
More Button Features - Archive of obsolete content
, but you might use it when creating custom elements. for example, the following will create a button where two of the words are red: example 4 : source view <button> <description value="this is a"/> <description value="rather strange" style="color: red;"/> <description value="button"/> </button> any xul element may be placed 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 typ...
The Box Model - Archive of obsolete content
ented vertically as was indicated by the box. to change the buttons so that they are oriented horizontally, all you need to do is change the vbox element to a hbox element. login prompt example you can add as many elements as you want inside a box, including other boxes. in the case of a horizontal box, each additional element will be placed to the right of the previous one. the elements will not
wrap at all so the more elements you add, the wider the window will be. similarly, each element added to a vertical box will be placed underneath the previous one. the example below shows a simple login prompt: example 2 : source view <vbox> <hbox> <label control="login" value="login:"/> <textbox id="login"/> </hbox> <hbox> <label control="pass" value="password:"/> <textbox i...
XUL accessibility guidelines - Archive of obsolete content
...> <window id="mywindow" title="my application" ...> <wizard id="reg_window" title="register your software" ...> form labels labels are not automatically associated to form elements. use the control attribute to bind a text label (from a label element) to a form element. screen readers will then read aloud the label when entering 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 diffi...
browser - Archive of obsolete content
the document object in the browser. contentvieweredit type: nsicontentvieweredit this read-only property contains the nsicontentvieweredit which handles clipboard operations on the document. contentviewerfile type: nsicontentviewerfile reference to the nsicontentviewerfile interface for the document. contentwindow type: todo use the contentwindow.
wrappedjsobject to obtain a dom(html) window object currenturi type: nsiuri this read-only property contains the currently loaded url. to change the url, use the loaduri method. docshell type: nsidocshell this read-only property contains the nsidocshell object for the document. documentcharsetinfo obsolete since gecko 12.0 type: nsidocum...
editor - Archive of obsolete content
ccessibletype type: integer a value indicating the type of accessibility object for the element. commandmanager type: nsicommandmanager the command manager handles operations on the editor. contentdocument type: document this read-only property contains the document object in the element. contentwindow type: todo use the contentwindow.
wrappedjsobject to obtain a dom(html) window object docshell type: nsidocshell this read-only property contains the nsidocshell object for the document. editingsession type: nsieditingsession the editing session for the editor which is used to initialize the editor. you would not normally need to use this. editortype type: one of the values...
iframe - Archive of obsolete content
ource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. contentdocument type: document this read-only property contains the document object in the element. contentwindow type: todo use the contentwindow.
wrappedjsobject to obtain a dom(html) window object docshell type: nsidocshell this read-only property contains the nsidocshell object for the document. webnavigation type: nsiwebnavigation this read-only property contains the nsiwebnavigation object for the document. most of its methods are callable directly on the element itself, such as goback and gofor...
label - Archive of obsolete content
orrectly inherit from nsidomxulcontrolelement. the caption is in the "value" attribute remember that the label element has a "value" attribute, unlike value in html whereas buttons, checkboxes use label="foo" as the attribute <label label="a caption"/> <!-- wrong --> <label value="a caption"/> <label value="click the button"/> <button label="a button"/> <checkbox label="a decision" value="1"/>
wrapping by default, label text does not
wrap. to enable
wrapping, use a text node instead of the value attribute. <label control="email">email address</label> <textbox id="email"/> if the text node contains no tags, it can easily be accessed and manipulated from javascript using node.textcontent. ...
tabbrowser - Archive of obsolete content
of the document object in the browser. contentvieweredit type: nsicontentvieweredit this read-only property contains the nsicontentvieweredit which handles clipboard operations on the document. contentviewerfile type: nsicontentviewerfile reference to the nsicontentviewerfile interface for the document. contentwindow type: todo use the contentwindow.
wrappedjsobject to obtain a dom(html) window object currenturi type: nsiuri this read-only property contains the currently loaded url. to change the url, use the loaduri method. docshell type: nsidocshell this read-only property contains the nsidocshell object for the document. documentcharsetinfo obsolete since gecko 12.0 type: nsidocument...
toolbaritem - Archive of obsolete content
if you don't need the thing you're placing in the toolbar to be customized then it doesn't need to be in a toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
window - Archive of obsolete content
if this code is placed between window tags it messes up all other controls on the window. if it is placed between box tags, window controls are rendered fine, but still there is this error message. the problem can be solved as follows: <html:link rel="icon" href="chrome://myextension/content/path/to/favicon.png" style="display:none"/> or <html:head> <html:link rel="icon" hre...
XULRunner Hall of Fame - Archive of obsolete content
ocument viewer cross-platform viewer for opendocument files. taskpool taskpool is a little application to help keep track of time. you can add tasks to a pool, turn them on and off, and it will tick off seconds. svgclock an svg-based clock. crowbar a web scraping environment based on the use of a server-side headless mozilla-based browser. 30b a xulrunner-based
wrapper for 30boxes.com xul explorer "a lightweight xul ide... an easy way to experiment with xul" xulexplorer a patched version of xul explorer to re-enable application and extension skeleton generation. foxkeh clock (for japanese page) a clock application based charactor foxkeh. pyjamas-desktop a python web widget toolkit (similar to pyqt4 and pygtk2) that uses xulrun...
XULRunner tips - Archive of obsolete content
tory unzip the package copy the following files: chrome/inspector.jar to the chrome directory of your xulrunner application components/inspector-cmdline.js to your components directory defaults/preferences/inspector.js to your preferences directory open your chrome.manifest file and add these lines: content inspector jar:inspector.jar!/content/inspector/ xpcnative
wrappers=no locale inspector en-us jar:inspector.jar!/locale/inspector/ skin inspector modern/1.0 jar:inspector.jar!/skin/modern/inspector/ skin inspector classic/1.0 jar:inspector.jar!/skin/classic/inspector/ overlay chrome://inspector/content/popupoverlay.xul chrome://inspector/content/viewers/dom/popupoverlay.xul overlay chrome://inspector/content...
nsIContentPolicy - Archive of obsolete content
ttributes is a no-no). query any dom properties that depend on layout (e.g., offset* properties). query any dom properties that depend on style (e.g., computed style). query any dom properties that depend on the current state of the dom outside the "context" node (e.g., lengths of node lists). [javascript implementations only] access properties of any sort on any object without using xpcnative
wrapper (either explicitly or implicitly). due to various dom0 things, this leads to item 4. if you do any of these things in your shouldload() implementation, expect unpredictable behavior, possibly including crashes, content not showing up, content showing up doubled, etc. if you need to do any of the things above, do them off timeout or event. note: when multiple content policies are used (for ...
xbDesignMode.js - Archive of obsolete content
ross browser design mode code. * * the initial developer of the original code is * netscape communications corporation. * portions created by the initial developer are copyright (c) 2003 * the initial developer. all rights reserved. ...
Gecko Compatibility Handbook - Archive of obsolete content
which depended upon these bugs in order to work properly. this can cause problems in gecko browsers since it implements the standards strictly. the old "code to the bugs" approach will not work for netscape 6.x, netscape 7.x and other mozilla based browsers. example - putting forms in tables invalid html to eliminate line break in <form>. in older browsers, this results in the td cell tightly
wrapping around the input element. <table border="1"> <tr> <form name="form2"> <td> <input type="text"> </td> </form> </tr> <table> this approach is commonly used to get around the fact that <form> is a block level element in html and will naturally begin on a new line in the page. unfortunately, this is invalid html and can cause problems both when parsing the page and when applying...
2006-09-29 - Archive of obsolete content
* percentages, but not including actual values * resulting from 'auto'. * @param aborder the sum of the left and right border widths of the * frame. * @param apadding the sum of the left and right margins of the * frame, including actual values resulting from * percentages. * @param ashrink
wrap whether the frame is in a context where * non-replaced blocks should shrink-
wrap (e.g., * it's floating, absolutely positioned, or * inline-block). */ virtual nssize computesize(nscoord aavailwidth, nscoord amargin, nscoord aborder, nscoord apadding, prbool ashrinkw...
Introduction to Public-Key Cryptography - Archive of obsolete content
systems, such as the underlying operating system, that rely on passwords or other forms of authentication. object signing communicator supports a set of tools and technologies called object signing. object signing uses standard techniques of public-key cryptography to let users get reliable information about code they download in much the same way they can get reliable information about shrink-
wrapped software. most importantly, object signing helps users and network administrators implement decisions about software distributed over intranets or the internet-for example, whether to allow java applets signed by a given entity to use specific computer capabilities on specific users' machines. the "objects" signed with object signing technology can be applets or other java code, javascript s...
CSS - Archive of obsolete content
property is a microsoft extension that specifies the color of the track element of a scrollbar.-ms-text-autospacethe -ms-text-autospace css property is a microsoft extension that specifies the autospacing and narrow space width adjustment of text.-ms-touch-selectthe -ms-touch-select css property is a microsoft extension that toggles the gripper visual elements that enable touch text selection.-ms-
wrap-flowthe -ms-
wrap-flow css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements.-ms-
wrap-marginthe -ms-
wrap-margin css property is a microsoft extension that specifies a margin that offsets the inner
wrap shape from other shapes.-ms-
wrap-throughthe -ms-
wrap-through css property is a microsoft extension that specifies how content should w...
Processing XML with E4X - Archive of obsolete content
"; var doc = <{h}><body>{text}</body></{h}>; alert(doc.toxmlstring()); // gives <html> <body>here's some text</body> </html> working with attributes xml literal syntax has a significant advantage over the xml constructor when you need to create markup dynamically. with e4x it is easy to embed dynamic values in markup. variables and expressions can be used to create attribute values by simply
wrapping them with braces ({}) and omitting quotation marks that would normally go around an attribute value, as the following example illustrates: var a = 2; var b = <foo bar={a}>"hi"</foo>; upon execution the variable is evaluated and quotes are automatically added where appropriate. the preceding example would result in an xml object which looks like this: <foo bar="2">"hi"</foo>. in attribut...
String.prototype.quote() - Archive of obsolete content
obsolete since gecko 37 (firefox 37 / thunderbird 37 / seamonkey 2.34)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. the non-standard quote() method returns a copy of the string, replacing various special characters in the string with their escape sequences and
wrapping the result in double-quotes ("). syntax str.quote() return value a new string representing the original string
wrapped in double-quotes, with any special characters escaped. examples using quote in the table below the quote() method replaces any special characters and
wraps the strings in double-quotes. also note the third column where a
wrapped eval() evaluates the escape sequences again. str...
LiveConnect Reference - Archive of obsolete content
this section documents the java classes used for liveconnect, along with their constructors and methods. javascript-to-java these classes allow a java object to access javascript code. jsexception the public class jsexception extends runtimeexception, and is thrown when javascript returns an error. jsobject the public class jsobject extends object. javascript objects are
wrapped in an instance of the class jsobject and passed to java, allowing java to manipulate javascript objects. java-to-javascript global objects java packages netscape sun javaarray javaclass javaobject javapackage ...
JavaClass - Archive of obsolete content
ge, such as netscape.javascript.jsobject. a javapackage object is a reference to a java package, such as netscape.javascript. in javascript, the javapackage and javaclass hierarchy reflect the java package and class hierarchy. you can pass a javaclass object to a java method which requires an argument of type java.lang.class. backward compatibility javascript 1.3 and earlier you must create a
wrapper around an instance of java.lang.class before you pass it as a parameter to a java method -- javaclass objects are not automatically converted to instances of java.lang.class. properties the properties of a javaclass object are the static fields of the java class. methods the methods of a javaclass object are the static methods of the java class. examples example: using javaclass in the ...
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
ing). since all the fish images are 150 pixels wide, that's a good interval between image and text. the last thing to do was style the paragraphs of text in each card. in most cases, there is only one paragraph per card, but a few have two. therefore, i just added a half-em margins on card paragraphs, and then changed the left margin to be 160px, which makes sure the text in the paragraphs won't
wrap under the floated images. this is desirable for the cases where only one word would
wrap under an image. it's better to keep the text as if it's in a column of its own. div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; bord...
Writing JavaScript for XHTML - Archive of obsolete content
s, you can write something like document.cookie = "key=value"; in xml as well, but nothing is saved in cookie storage. solution: use the storage object with firefox 2 there was a new feature enabled, the html 5 storage object. although this feature is not free of critics, you can use it to bypass the non-existing cookie, if your document is of type xml. again, you will have to write your own
wrapper to respect any given combination of mime type and browser. problem: i can't use document.write() this problem has the same cause as the one above. this method does not exist in xmldocuments anymore. there are reasons why this decision was made, one being that a string of invalid markup will instantly break the whole document. solution: use dom methods many people avoided dom methods becaus...
XQuery - Archive of obsolete content
for its support across many languages (c++, java, python, perl, php, etc.) (besides its also being open source), but now some problems may exist with bdbxml (unlike saxon). a simple usage example is available. notes for developers wishing to access xquery in their own extensions at present, the extension works simply by using liveconnect to work with berkeley db xml's java api (and via a java
wrapper class which circumvents liveconnect's current inability to handle some types of java exceptions properly). however, use of the approach of the java firefox extension might be used to turn the above extension concept into an xpcom component (giving it access to all open windows), and for berkeley db xml, possibly implementing it in c++ instead, which is that database's original language of dev...
XUL Parser in Python - Archive of obsolete content
ents take elements on the command line and only spell them out build new chrome subdirectories (i.e. new "packages") on the fly using search and replace. as i adapt the script in these ways and try to further generalize the actual code as i get time, i will make it available here. in the explanation section below, i try to say a little something about how this script works. it's really just a
wrapper around python's xmllib xml parser, but i had to sort of fool around with it. python's support for xml (and potential with xul) is extensive, and so it's more a matter of choosing an approach and hooking things up than anything else. source code the source code for the xul parser is available. it only runs as a hard-coded script right now, so if you want to use it you have to go in and chang...
Game distribution - Game development
e desktop games, e.g. simple time killer games to be played while on the move rather than huge immersive experiences. such games are often designed to be played with two, or even one finger, so you can hold the device, play the game and be able to use the second hand for whatever you currently need. saying this, desktop platforms can be used for distribution quite easily with the availability of
wrappers that can help you prepare native builds of your game see packaging games. it's also nice to provide desktop controls for your games even if you're mostly targeting mobile. players are enjoying your games on any platform available, and desktop is one of them. plus, it is usually easier to build and test the game first on desktop, and then move on to debugging mobile. publishing the game ther...
Explaining basic 3D theory - Game development
lates final colors based on the given parameters. textures textures are 2d images used in the 3d space to make the objects look better and more realistic. textures are combined from single texture elements called texels the same way picture elements are combined from pixels. applying textures onto objects during the fragment processing stage of the rendering pipeline allows us to adjust it by
wrapping and filtering it if necessary. texture
wrapping allows us to repeat the 2d image around the 3d object. texture filtering 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 obj...
Building up a basic demo with the PlayCanvas engine - Game development
eltatime*20 on the y axis and deltatime*30 on the z axis, on very frame — giving us a smooth animation. scaling we can also scale a given object — there's a function for that called setlocalscale. add the following, again into the callback: cylinder.setlocalscale(1, math.abs(math.sin(timer)), 1); here we are using math.sin to scale the cylinder in a cycle, bigger and smaller again. we're
wrapping the y scale value in math.abs to pass the absolute values (greater or equal to 0); sin varies between -1 and 0, and for negative values the cylinder scaling can render unexpectedly (in this case it looks black half the time.) now onto the movement part. moving beside rotation and scaling we can also move objects around the scene. add the following code to achieve that. cone.setposition(2,...
Square tilemaps implementation: Static maps - Game development
index 1, the second index 2, etc.) the gettile() helper method returns the tile contained at the specified column and row. if tiles were a 2d matrix, then the returned value would just be tiles[column][row]. however, it's usually more common to represent the grid with a 1-dimensional array. in this case, we need to map the column and row to an array index: var index = row * map.cols + column;
wrapping up, an example of a tilemap object could look like the following. this features an 8 x 8 map with tiles 64 x 64 pixels in size: var map = { cols: 8, rows: 8, tsize: 64, tiles: [ 1, 3, 3, 3, 1, 1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1,...
Gecko FAQ - Gecko Redirect 1
eb content and web application developers worldwide. are gecko's apis based on activex? com? javabeans? gecko is reusable on all platforms thanks to xpcom, a subset of com that works across platforms. com, developed by digital and later adopted by microsoft, is the de facto standard for modular interfaces on windows platforms. additionally, on the windows platform, gecko's xpcom interfaces are
wrapped in an activex control that vb developers can utilize (activex
wrappers are not available on other platforms because activex is a windows-only technology). a javabean
wrapper is not currently under development, but there is nothing in gecko's architecture that precludes such development in the future. source code and documentation for these interfaces are available through mozilla.org. for fu...
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
he external foo. for more information, see closures. (note that window.foo could still be used to access the external foo variable.) in conclusion, any changes inside our functions won't affect the original foo at all, as we are modifying copies of it that's why primitives are immutable - instead of changing them directly, we're modifying a copy, without affecting the original. primitive
wrapper objects in javascript except for null and 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 k...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
stand 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 large font size to make it look like a heading (although you could style it to look like anything you wanted). on the other hand, you could make any element look like a top level heading. consider the following: <s...
String - MDN Web Docs Glossary: Definitions of Web-related terms
in any computer programming language, a string is a sequence of characters used to represent text. in javascript, a string is one of the primitive values and the string object is a
wrapper around a string primitive. learn more general knowledge string (computer science) on wikipedia javascript data types and data structures ...
XLink - MDN Web Docs Glossary: Definitions of Web-related terms
s and attempts to click on the relevant points in the xml tree. for those who may have found xlink 1.0 cumbersome for regular links, xlink 1.1 drops the need to specify xlink:type="simple" for simple links. xlink is used in svg, mathml, and other important standards. specification xlink 1.0 xlink 1.1 (currently a working draft) see also xml in mozilla code snippets:getattributens - a
wrapper for dealing with some browsers not supporting this dom method code snippets:xml:base function - a rough attempt to find a full xlink-based on an xlink:href attribute (or <xi:include href=>) and its or an ancestor's xml:base. ...
MDN Web Docs Glossary: Definitions of Web-related terms
ort voip w w3c wai wcag web performance web server web standards webassembly webdav webextensions webgl webidl webkit webm webp webrtc websockets webvtt whatwg whitespace world wide web
wrapper x xforms xhr (xmlhttprequest) xhtml xinclude xlink xml xpath xquery xslt other 404 502 alpn at-rule attack byte-order mark character set client cryptosystem debug digital signa...
Assessment: Accessibility troubleshooting - Learn web development
a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors? semantic html the content is still not very accessible — report on what happens when you try to navigate it using a screenreader. can you update the article text to make it easier for screenreader users to navigate? the navigation menu part of the site (
wrapped in <div class="nav"></div>) could be made more accessible by putting it in a proper html5 semantic element. which one should it be updated to? make the update. note: you'll need to update the css rule selectors that style the tags to their proper equivalents for the semantic headings. once you add paragraph elements, you'll notice the styling looking better. the images the images are cu...
CSS and JavaScript accessibility best practices - Learn web development
logical, legible, and comfortable to read. make sure your headings stand out from your body text, typically big and bold like the default styling. your lists should look like lists. your text color should contrast well with your background color. see html text fundamentals and styling text for more information. emphasised text inline markup that confers specific emphasis to the text that it
wraps: <p>the water is <em>very hot</em>.</p> <p>water droplets collecting on surfaces is called <strong>condensation</strong>.</p> you might want to add some simple coloring to your emphasised text: strong, em { color: #a60000; } you will however rarely need to style emphasis elements in any significant way. the standard conventions of bold and italic text are very recognisable, and changing t...
HTML: A good basis for accessibility - Learn web development
ode size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slow connections). another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <div> elements, but it is better to use appropriate sectioning elements to
wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>), etc. these provide extra semantics for screen readers (and other tools) to give user extra clues about the content they are navigating (see screen reader support for new html5 section elements for an idea of what screen reader support is like). note: in addition to having good semantics and an attractive layou...
HTML: A good basis for accessibility - Learn web development
ode size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slow connections). another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <div> elements, but it is better to use appropriate sectioning elements to
wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>), etc. these provide extra semantics for screen readers (and other tools) to give user extra clues about the content they are navigating (see screen reader support for new html5 section elements for an idea of what screen reader support is like). note: in addition to having good semantics and an attractive layou...
Test your skills: HTML accessibility - Learn web development
tics are good. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html accessibility 2 in the second task, you have a form containing three input fields. you need to: semantically associate the input with their labels. assume that these inputs will be part of a larger form, and
wrap them in an element that associates them all together as a single related group. give the group a description/title that summarises all of the information as personal data. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html accessibility 3 in this task you are required to tur...
Advanced styling effects - Learn web development
derstand some of the layout properties above, like position, top, bottom, z-index, etc. we will cover these in detail in our css layout module. css shapes while it is true that everything in css is a rectangular box, and images are a physical rectangular box, we can make it look as if our content flows around non-rectangular things by using css shapes. the css shapes specification enables the
wrapping of text around a non-rectangular shape. it's especially useful when working with an image which has some white-space you might want to float text around. in the image below we have a pleasingly round balloon. the actual file is rectangular, but by floating the image (shapes only apply to floated elements) and using the shape-outside property with a value of circle(50%), we can give the effec...
Debugging CSS - Learn web development
t in particular when you need to edit the css on an existing site, you will find yourself having a hard time getting some css to apply. no matter what you do, the element just doesn't seem to take the css. what is generally happening here is that a more specific selector is overriding your changes, and here devtools will really help you out. in our example file there are two words that have been
wrapped in an <em> element. one is displaying as orange and the other hotpink. in the css we have applied: em { color: hotpink; font-weight: bold; } above that in the stylesheet however is a rule with a .special selector: .special { color: orange; } as you will recall from the lesson on cascade and inheritance where we discussed specificity, class selectors are more specific than element sel...
Handling different text directions - Learn web development
of the mapped properties on the mdn page for logical properties and values. logical values we have so far looked at logical property names. there are also some properties that take physical values of top, right, bottom, and left. these values also have mappings, to logical values — block-start, inline-end, block-end, and inline-start. for example, you can float an image left to cause text to
wrap round the image. you could replace left with inline-start as shown in the example below. change the writing mode on this example to vertical-rl to see what happens to the image. change inline-start to inline-end to change the float. here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is. currently, only firefox supports f...
Images, media, and form elements - Learn web development
this includes all the items mentioned in the last three sections: button, input, select, textarea { font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; } textarea { overflow: auto; } note: normalizing stylesheets are used by many dev...
Organizing your CSS - Learn web development
t is handy to know a little bit about it. post-processing for optimization if you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the css by stripping out anything unnecessary in the production version. an example of a post-processor solution for doing this would be cssnano.
wrapping up this is the final part of our learning css guide, and as you can see there are many ways in which your exploration of css can continue from this point. to learn more about layout 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, an...
Overflowing content - Learn web development
mple above, we only need to scroll on the y axis, however we get scrollbars in both axes. to just scroll on the y axis, you could use the overflow-y property, setting overflow-y: scroll. you can also scroll on the x axis using overflow-x, although this is not a recommended way to accommodate long words! if you have a long word in a small box, you might consider using the word-break or overflow-
wrap properties. in addition, some of the methods discussed in sizing items in css may help you create boxes that scale better with varying amounts of content. as with scroll, you get a scrollbar in the scrolling dimension whether or not there is enough content to cause a scrollbar. note: you can specify x and y scrolling using the overflow property, passing two values. if two keywords are specif...
Test your skills: Selectors - Learn web development
e 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. selectors one without changing the html, use css to do the following things: make h1 headings blue. give h2 headings a blue background and white text. cause text
wrapped in a span to have a font-size of 200%. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of...
CSS selectors - Learn web development
certain states of an element. the :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer: a:hover { } it also includes pseudo-elements, which select a certain part of an element rather than the element itself. for example, ::first-line always selects the first line of text inside an element (a <p> in the below case), acting as if a <span> was
wrapped around the first formatted line and then selected. p::first-line { } combinators the final group of selectors combine other selectors in order to target elements within our documents. the following for example selects paragraphs that are direct children of <article> elements using the child combinator (>): article > p { } next steps you can take a look at the reference table of selectors...
The box model - Learn web development
onal complexity, there is a standard and an alternate box model. parts of a box making up a block box in css we have the: content box: the area where your content is displayed, which can be sized using properties like width and height. padding box: the padding sits around the content as white space; its size can be controlled using padding and related properties. border box: the border box
wraps the content and any padding. its size and style can be controlled using border and related properties. margin box: the margin is the outermost layer,
wrapping the content, padding and border as whitespace between this box and other elements. its size can be controlled using margin and related properties. the below diagram shows these layers: the standard css box model in the standard box ...
Test your skills: floats - Learn web development
g line of text (which has a class of .below) to display underneath it. you can see the desired result in this image. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. float three finally, we have a floated element in this example. the box
wrapping the float and text is displaying behind the float. use the most up to date method available to cause the box background to extend to below the float as in the image. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or furth...
Test Your Skills: Fundamental layout comprehension - Learn web development
bute to point to the new image location. your tasks you now need to implement your layout. the tasks you need to achieve are: to display the navigation items in a row, with an equal amount of space between the items. the navigation bar should scroll with the content and then become stuck at the top of the viewport when it reaches it. the image that is inside the article should have text
wrapped around it. the <article> and <aside> elements should display as a two column layout. the columns should be a flexible size so that if the browser window shrinks smaller the columns become narrower. the photographs should display as a two column grid with a 1 pixel gap between the images. you will not need to edit the html in order to achieve this layout and the techniques you should use ar...
Multiple-column layout - Learn web development
find in a newspaper. a basic example we will now explore how to use multiple-column layout, often referred to as multicol. you can follow along by downloading the multicol starting point file and adding the css into the appropriate places. at the bottom of the section you can see a live example of what the final code should look like. our starting point contains some very simple html; a
wrapper with a class of container inside which is a heading and some paragraphs. the <div> with a class of container will become our multicol container. we switch on multicol by using one of two properties column-count or column-width. the column-count property will create as many columns as the value you give it, so if you add the following css to your stylesheet and reload the page, you will get th...
Responsive design - Learn web development
ed at 1fr. this will create three column tracks, each taking one part of the available space in the container. you can find out more about this approach to create a grid in the learn layout grids topic, under flexible grids with the fr unit. .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } note: the grid layout version is even simpler as we can define the columns on the .
wrapper: example, source code. responsive images the simplest approach to responsive images was as described in marcotte's early articles on responsive design. basically, you would take an image that was at the largest size that might be needed, and scale it down. this is still an approach used today, and in most stylesheets, you will find the following css somewhere: img { max-width: 100%; } ...
Getting started with CSS - Learn web development
ellow; background-color: black; padding: 5px; } this will style any element with a class of special, which is inside a <p>, which comes just after an <h1>, which is inside a <body>. phew! in the original html we provided, the only element styled is <span class="special">. don't worry if this seems complicated at the moment — you'll soon start to get the hang of it as you write more css.
wrapping up in this tutorial, we have taken a look at a number of ways in which you can style a document using css. we will be developing this knowledge as we move through the rest of the lessons. however you now already know enough to style text, apply css based on different ways of targeting elements in the document, and look up properties and values in the mdn documentation. in the next lesson we...
Styling links - Learn web development
rules and add your own declarations to make the links look really cool. use your imagination, go wild. we are sure you can come up with something cooler and just as functional as our example above. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to insert the example we showed above. ...
Styling lists - Learn web development
1.5 of their font-size. give the ordered list lower alphabetical bullets. feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see a potential answer. ...
Example 2 - Learn web development
solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : no
wrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : ...
Example 3 - Learn web development
solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : no
wrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : ...
Example 4 - Learn web development
solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : no
wrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : ...
Example 5 - Learn web development
solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : no
wrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : ...
How to build custom form controls - Learn web development
support linear gradients. */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width. if the content overflows, we display an ellipsis */ display : inline-block; width : 100%; overflow : hidden; white-space : no
wrap; text-overflow: ellipsis; vertical-align: top; } we don't need an extra element to design the down arrow; instead, we're using the :after pseudo-element. it could also be implemented using a simple background image on the select class. .select:after { content : "▼"; /* we use the unicode character u+25bc; make sure to set a charset meta tag */ position: absolute; z-index : 1; /* thi...
UI pseudo-classes - Learn web development
hang the generated content on: <div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> the immediate problem with this was that the span was dropping onto a new line below the input because the input and label are both set with width: 100%. to fix this we style the parent <div> to become a flex container, but also tell it to
wrap its contents onto new lines if the content becomes too long: fieldset > div { margin-bottom: 20px; display: flex; flex-flow: row
wrap; } the effect this has is that the label and input sit on separate lines because they are both width: 100%, but the <span> has a width of 0 so can sit on the same line as the input. now onto the generated content. we create it using this css: input + span...
CSS basics - Learn web development
ts.) in css, you choose which properties you want to affect in the rule. property value to the right of the property—after the colon—there is the property value. this chooses one out of many possible appearances for a given property. (for example, there are many color values in addition to red.) note the other important parts of the syntax: apart from the selector, each ruleset must be
wrapped in curly braces. ({}) within each declaration, you must use a colon (:) to separate the property from its value or values. within each ruleset, you must use a semicolon (;) to separate each declaration from the next one. to modify multiple property values in one ruleset, write them separated by semicolons, like this: p { color: red; width: 500px; border: 1px solid black; } selectin...
The web and web standards - Learn web development
you go" [downloads files and renders web page] the actual syntax for http messages (called requests and responses) is not that human-readable, but this gives you the basic idea. html, css, and javascript html, css, and javascript are the main three technologies you'll use to build a website: hypertext markup language, or html, is a markup language consisting of different elements you can
wrap (mark up) content in to give it meaning (semantics) and structure. simple html looks like this: <h1>this is a top-level heading</h1> <p>this is a paragraph of text.</p> <img src="cat.jpg" alt="a picture of my cat"> if we adopted a house-building analogy, html would be like the foundations and walls of the house, which give it structure and hold it together. cascading style sheets (css)...
Creating hyperlinks - Learn web development
ng the file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on). for example, the bbc homepage contains a many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more. anatomy of a link a basic link is created by
wrapping the text or other content, see block level links, inside an <a> element and using the href attribute, also known as a hypertext reference, or target, that contains the web address. <p>i'm creating a link to <a href="https://www.mozilla.org/">the mozilla homepage</a>. </p> this gives us the following result: i'm creating a link to the mozilla homepage. adding supporting information with th...
Debugging HTML - Learn web development
u can see what the rendered markup looks like: using the dom inspector, let's explore our code in detail to see how the browser has tried to fix our html errors (we did the review in firefox; other modern browsers should give the same result): the paragraphs and list items have been given closing tags. it isn't clear where the first <strong> element should be closed, so the browser has
wrapped each separate block of text with its own strong tag, right down to the bottom of the document! the incorrect nesting has been fixed by the browser as shown here: <strong>strong <em>strong emphasised?</em> </strong> <em> what is this?</em> the link with the missing double quote has been deleted altogether. the last list item looks like this: <li> <strong>unclosed attribute...
Adding vector graphics to the Web - Learn web development
to svg elements and style them with css, either within the svg or wherever you put the css style rules for your html document. in fact, you can use any svg presentation attribute as a css property. inlining svg is the only approach that lets you use css interactions (like :focus) and css animations on your svg image (even in your regular stylesheet.) you can make svg markup into a hyperlink by
wrapping it in an <a> element. cons this method is only suitable if you're using the svg in only one place. duplication makes for resource-intensive maintenance. extra svg code increases the size of your html file. the browser cannot cache inline svg as it would cache regular image assets, so pages that include the image will not load faster after the first page containing the image is loaded. ...
Images in HTML - Learn web development
could go in several places in the page's linear flow. provides essential information supporting the main text. a figure could be several images, a code snippet, audio, video, equations, a table, or something else. active learning: creating a figure in this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:
wrap it in a <figure> element. copy the text out of the title attribute, remove the title attribute, and put the text inside a <figcaption> element below the image. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see an answer: playable code 2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </d...
Choosing the right approach - Learn web development
= await fetch('coffee.jpg'); let myblob = await response.blob(); let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } myfetch(); pitfalls you can't use the await operator inside a non-async function, or in the top level context of your code. this can sometimes result in an extra function
wrapper needing to be created, which can be slightly frustrating in some circumstances. but it is worth it most of the time. browser support for async/await is not as good as that for promises. if you want to use async/await but are concerned about older browser support, you could consider using the babeljs library — this allows you to write your applications using the latest javascript and let bab...
Build your own function - Learn web development
on — see test your skills: functions. these tests require skills that are covered in the next article, so you might want to read those first before trying it. conclusion congratulations on reaching the end! this article took you through the entire process of building up a practical custom function, which with a bit more work could be transplanted into a real project. in the next article we'll
wrap up functions by explaining another essential related concept — return values. previous overview: building blocks next in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to events image gallery ...
Looping code - Learn web development
ile loop is very similar, but provides a variation on the while structure: initializer do { // code to run final-expression } while (condition) in this case, the initializer again comes first, before the loop starts. the keyword directly precedes the curly braces containing the code to run and the final expression. the differentiator here is that the condition comes after everything else,
wrapped in parentheses and preceded by a while keyword. in a do...while loop, the code inside the curly braces is always run once before the check is made to see if it should be executed again (in while and for, the check comes first, so the code might never be executed). let's rewrite our cat listing example again to use a do...while loop: let i = 0; do { if (i === cats.length - 1) { info +=...
Making decisions in your code — conditionals - Learn web development
ed, that is, white, black, purple, yellow, or psychedelic. note that the values are case sensitive, and should equal the <option> element value values rather than the visual labels. for each case, the update() function should be run, and be passed two color values, the first one for the background color, and the second one for the text color. remember that color values are strings, so need to be
wrapped in quotes. if you make a mistake, you can always reset the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. playable code 2 <h2>live output</h2> <div class="output" style="height: 300px;"> <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> ...
Storing the information you need — Variables - Learn web development
ther whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). you don't need to declare variable types in javascript, unlike some other programming languages. when you give a variable a number value, you don't include quotes: let myage = 17; strings strings are pieces of text. when you give a variable a string value, you need to
wrap it in single or double quote marks; otherwise, javascript tries to interpret it as another variable name. let dolphingoodbye = 'so long and thanks for all the fish'; booleans booleans are true/false values — they can have two values, true or false. these are generally used to test a condition, after which code is run as appropriate. so for example, a simple case would be: let iamalive = tru...
Working with JSON - Learn web development
he response to our request (available in the response property) in a variable called superheroes; this variable now contains the javascript object based on the json! we are then passing that object to two function calls — the first one fills the <header> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <section>. we have
wrapped the code in an event handler that runs when the load event fires on the request object (see onload) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it. populating the header now that we've retrieved the json data and converted it into ...
Ember interactivity: Events, classes and state - Learn web development
ms we are importing using javascript module syntax) — the rest of the file is vanilla javascript, and would work in any application. the @action decorator declares that the function is an "action", meaning it's a type of function that will be invoked from an event that occurred in the template. @action also binds the this of the function to the class instance. note: a decorator is basically a
wrapper function, which
wraps and calls other functions or properties, providing additional functionality along the way. for example, the @tracked decorator (see slightly later on) runs code it is applied to, but additionally tracks it and automatically updates the app when values change. read javascript decorators: what they are and when to use them for more general information on decorators. comin...
Componentizing our React app - Learn web development
urself a new form() component with the same basic structure as todo(), and export that component. copy the <form> tags and everything between them from inside app.js, and paste them inside form()’s return statement. export form at the end of the file. ...
Getting started with React - Learn web development
features of modern javascript for many of its patterns. its biggest departure from javascript comes with the use of jsx syntax. jsx extends javascript's syntax so that html-like code can live alongside it. for example: const heading = <h1>mozilla developer network</h1>; this heading constant is known as a jsx expression. react can use it to render that <h1> tag in our app. suppose we wanted to
wrap our heading in a <header> tag, for semantic reasons? the jsx approach allows us to nest our elements within each other, just like we do with html: const header = ( <header> <h1>mozilla developer network</h1> </header> ); note: the parentheses in the previous snippet aren't unique to jsx, and don’t have any effect on your application. they're a signal to you (and your computer) that t...
Creating our first Vue component - Learn web development
script> section below your template section. inside the <script> tags, add a default exported object export default {}, which is your component object. your file should now look like this: <template> </template> <script> export default {}; </script> we can now begin to add actual content to our todoitem. vue templates are currently only allowed a single root element — one element 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="checkbo...
Adding a new todo form: Vue events, methods, and models - Learn web development
nts the event's default behavior. equivalent to event.preventdefault(). .self: triggers the handler only if the event was dispatched from this exact element. {.key}: triggers the event handler only via the specified key. mdn has a list of valid key values; multi-word keys just need to be converted to kebab case (e.g. page-down). .native: listens for a native event on the root (outer-most
wrapping) element on your component. .once: listens for the event until it's been triggered once, and then no more. .left: only triggers the handler via the left mouse button event. .right: only triggers the handler via the right mouse button event. .middle: only triggers the handler via the middle mouse button event. .passive: equivalent to using the { passive: true } parameter when cr...
Implementing feature detection - Learn web development
y features. as an example, if the browser didn't support flexbox at all, <html> would be given a class name of no-flexbox. if it did support modern flexbox, it would get a class name of flexbox. if you search through the class list, you'll also see others relating to flexbox, like: flexboxlegacy for the old flexbox spec (2009). flexboxtweener for 2011 in between syntax supported by ie10. flex
wrap for the flex-
wrap property, which isn't present in some implementations. note: you can find a list of what all the class names mean — see features detected by modernizr. moving on, let's update our css to use modernizr rather than @supports. go into modernizr-css.css, and replace the two @supports blocks with the following: /* properties for browsers with modern flexbox */ .flexbox main ...
Accessibility information for UI designers and developers
submit a form or open an overlay). links can be styled as buttons and vice versa, but designers are advised to avoid this where possible. motion on pages with transitions and animations, note that some users could experience distraction, dizziness or nausea. pages with a parallax effect can particularly cause troubles. to help these users, you could offer a setting to turn off animations, or
wrap the css in the prefers-reduce-motion media query. see also: understanding success criterion 2.3.3: animation from interactions content on hover or focus if content is revealed on hover or focus, for example in tooltips, there are some things to keep in mind: if the extra content obscures existing content, there should be a way to close it without moving focus if the extra content is opened...
Creating Sandboxed HTTP Connections
est has finished. onchannelredirect - when a redirect happens, a new nsichannel is created, and both the old and new ones are passed in as arguments. since nsistreamlistener does not cover cookies, the current channel being used will need to be stored as a global, since another listener will be used for cookie notifications (covered in the next section). it is usually best to use a javascript
wrapper that implements all the required methods and calls the specified callback function when the connection has completed. below is an example: // global channel var gchannel; // init the channel // the io service var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioserv...
Debugging Table Reflow
at this step the final size is 360 twips. min_con des_con fix min_adj des_adj fix_adj pct pct_adj min_pro final 360 540 1230 -1 -1 -1 -1 -1 -1 360 there was no change till the entrance of balancecolumnwidths balancecolumnwidths en count=1 ***start table dump*** mcolwidths=360 360 360...
Debugging on Windows
n7\packages\debugger\autoexp.dat the file has information about the format in the beginning, and after a little practice you should be well on your way. here are some entries that will make your life easier: ;; mozilla (1.7beta and later) nsautostring=<mdata,su> nsstring=<mdata,su> nscstring=<mdata,s> nscautostring=<mdata,s> nsrect=x=<x,d> y=<y,d> width=<width,d>; height=<height,d> nsstaticatom
wrapper=<mstaticatom->mstring,s> nsiatom=<mstring,su> ; the following are not necessary in vc8 nscomptr<*>=<mrawptr,x> nsrefptr=<mrawptr,x> nsautoptr=<mrawptr,x> after you have made the changes and saved the file, you will need to restart visual c++ for the changes to take effect. for xpcom strings (the "external" string api) you can use the following values: ;; mozilla (1.9) ; internal strings ns...
Configuring Build Options
nfig . ./mozconfig-common # build thunderbird mk_add_options moz_objdir=@topsrcdir@/obj-thunderbird ac_add_options --enable-application=comm/mail to build firefox, run the following commands: export mozconfig=/path/to/mozilla/mozconfig-firefox ./mach build to build thunderbird, run the following commands: export mozconfig=/path/to/mozilla/mozconfig-thunderbird ./mach build using mozconfig
wrapper mozconfig
wrapper is similar to using multiple mozconfig files except that it abstracts and hides them so you don't have to worry about where they live or which ones you've created. it also saves you from having to export the mozconfig variable each time. for information on installing and configuring mozconfig
wrapper, see https://github.com/ahal/mozconfig
wrapper. ...
Makefile - variables
python_unit_tests list of python scripts to check exit status for make check xpc_shell_tests no_xpcshell_manifest_check inhibit validating manifest files when running xpcshell tests. compiler variable description ...
Makefiles - Best practices and suggestions
rbage_dirs += $(ts) maintain clean targets - makefiles should be able to remove all content that is generated so "make clean" will return the sandbox/directory back to a clean state. targets = foo bar tans timestampdir = .ts all: $(timestampdir) $(targets) %: %.c $(cc) -o $@ $< $(timestampdir): $(mkdir) $@ # "clean" target garbage += $(targets) garbage_dirs += $(timestampdir)
wrapper check/unit tests with a enable_tests conditional so tests can be disabled on demand. ifdef enable_tests ifeq ($(null),$(filter winnt os2,$(os_arch))) dirs += test endif # win endif # enable_tests ...
Eclipse CDT
. be aware that when eclipse gives results for any of the actions that follow, it will not include results for sections of the code that are ifdef'ed out by the configuration used to create your object directory. for example, if you are using a mac and you search for callers of nsdisplaylistbuilder::isintransform, the results will not include the caller in nsobjectframe.cpp because that caller is
wrapped in "#ifndef xp_macosx". just something to keep in mind. ;-) to jump to the definition of a symbol (or the declaration of a symbol if already at the definition), hover over the symbol, hold down the ctrl/cmd key, move the mouse slightly to linkify the symbol, then click on it. (having to move the mouse slightly is eclipse bug 26873). alternately, you can jump to the definition of the symbol un...
SVG Guidelines
of metadata since it doesn't bring much value. you shouldn't include doctypes in your svgs either; they are a source of many issues, and the svg wg recommends not to include them. see svg authoring guidelines. avoid the use of cdata sections cdata sections are used to avoid parsing some text as html. most of time, cdata isn't needed, for example, the content in <style> tags doesn't need to be
wrapped in a cdata section as the content inside the tag is already correctly parsed as css. invisible shapes there are two kinds of invisible shapes: the off-screen ones and the uncolored ones. the offscreen shapes are hard to spot, even with an automated tool, and are usually context aware. those kinds of shapes are visible but off the svg view box. here's an example of a file with offscreen shap...
Error codes returned by Mozilla APIs
o (0x80570027) ns_error_xpc_interface_not_scriptable (0x80570028) ns_error_xpc_interface_not_from_nsisupports (0x80570029) ns_error_xpc_cant_get_jsobject_of_dom_object (0x8057002a) ns_error_xpc_cant_set_read_only_constant (0x8057002b) ns_error_xpc_cant_set_read_only_attribute (0x8057002c) ns_error_xpc_cant_set_read_only_method (0x8057002d) ns_error_xpc_cant_add_prop_to_
wrapped_native (0x8057002e) ns_error_xpc_call_to_scriptable_failed (0x8057002f) ns_error_xpc_jsobject_has_no_function_named (0x80570030) ns_error_xpc_bad_id_string (0x80570031) ns_error_xpc_bad_initializer_name (0x80570032) ns_error_xpc_has_been_shutdown (0x80570033) ns_error_xpc_cant_modify_prop_on_wn (0x80570034) ns_error_xpc_bad_convert_js_zero_isnot_null (0x80570035) ...
Communicating with frame scripts
can include json-serializable objects as arguments. the api is mostly symmetrical, with one major exception: frame scripts can send asynchronous or synchronous messages to chrome, but chrome can only send asynchronous messages to content. this is an intentional design decision made to prevent content code from making chrome code unresponsive. where absolutely necessary, frame scripts can pass
wrappers called cross process object
wrappers (also known as cpows) to chrome, and chrome can use these
wrappers to get synchronous access to content objects. content to chrome the frame script can choose to send synchronous or asynchronous messages to chrome code. asynchronous messaging to send an asynchronous message the frame script uses the global sendasyncmessage() function: // frame script ...
Multiprocess Firefox
some elements of multiprocess firefox have been retained for compatibility. this page is an informal index of leftovers, mostly revolving around the message manager and the related cross process object
wrappers. message manager a complete guide to the objects used to communicate between chrome code and web content. cross process object
wrappers cross process object
wrappers are a migration aid, giving chrome code synchronous access to web content. limitations of chrome scripts practices that will no longer work in chrome code, and how to update them. limitation...
Performance best practices for Firefox front-end engineers
y better than storing and retrieving json from a file—particularly if the json encoding or decoding is occurring on the main thread. indexeddb will do javascript object serialization and deserialization for you using the structured clone algorithm, meaning that you can stash things like maps, sets, dates, blobs, and more, without having to do conversions for json compatibility. a promise-based
wrapper for indexeddb, indexeddb.jsm, is available for chrome code. test on weak hardware for the folks paid to work on firefox, we tend to have pretty powerful hardware for development. this is great, because it reduces build times, and means we can do our work faster. we should remind ourselves that the majority of our user base is unlikely to have similar hardware. look at the firefox hardware r...
Overview of Mozilla embedding APIs
y::alloc nsmemory::realloc nsmemory::free this helper class provides static accessors to the global nsmemory service. ns_getglobalcomponentmanager this function returns an instance of the component 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 i...
Roll your own browser: An embedding how-to
le non-bloated gtk+ interface, familiar netscape 4.x keyboard shortcuts, context menus, etc. (screenshot) xparts: kde extension that allows mozilla to be embedded into the konqueror browser. uses gtkmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/. (news release, screenshot) mozilla examples gtkmozembed widget: gtk widget
wrapper for the mozilla gecko engine. testgtkembed: basic browser built with the gtkmozembed widget. url location field, menu bar, html area, supports ssl. windows external projects k-meleon browser: the windows answer to galeon. fast ie-look-alike browser, uses ie and ns bookmarking system, fast loading time, privacy features, java support and complete control of the menus and "hotkeys". imple...
IPDL Best Practices
o facilitate serialization/deserialization and message passing. do not use them as data structures outside of ipdl, or wou will eventually find yourself in bad situations to implement proper memory management. a good example of this problem is the amount of memory management bugs that we have had with using surfacedescriptor directly everywhere. implement (preferably reference counted) classes to
wrap the shared data instead of letting several objects reference surfacedescriptors or their content directly. reference counting protocol actors is tricky here is the easiest way to get it right the first time (lessons learned from the http channel and geolocation protocols): allocpprotocol calls addref deallocpprotocol calls release this ensures that the actor will not disappear from under ip...
Creating a New Protocol
olchild. it must implement abstract methods for receiving the appropriate messages on each side. the method signatures can be read from the generated pnewprotocolparent.h and pnewprotocolchild.h headers. writing the tests protocols which are managed by pbrowser must be tested using the mochitest-chrome test framework with a <browser remote="true">. it is acceptable to use synchronous calls on jpw
wrappers for testing purposes. it may be possible to test protocols unrelated to a particular window using the xpcshell testing framework, which has additional primitives in electrolysis for launching and running js commands in a content process. ...
Introduction to Layout in Mozilla
overview basic data flow key data structures detailed walk-through incrementalism future tech-talks
wrap-up, q&a basic data flow source document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, compute style, render; repeat css used for rendering all content content theoretically separate from “presentation” key data structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame ...
JavaScript Tips
var uniquename = { _privatemember: 3, publicmember: "a string", init: function() { this.dosomething(this.anothermember); }, dosomething: function(aparam) { alert(aparam); } }; xpconnect don't use object methods and properties more than you have to. it is often faster to store the result in a temporary variable. don't call methods that you don't have to. for instance, windowmanager.getenumerator(atype).hasmoreelements() may be replaced with windowmanager.getmostrecentwindow(atype) != null for a single window. ...
Http.jsm
httprequest supports the following parameters: name meaning headers an array of headers postdata this can be: a string: send it as is an array of parameters: encode as form values null/undefined: no post data. method get, post or put (this is automatically set if postdata exists). onload a function handle to call when the load is complete, it takes two parameters: the responsetext and the xhr object. ...
NetUtil.jsm
returned method will allow access to the specified data. aorigincharset the optional character set to use when interpreting awhattoload as a string; this is ignored if awhattoload is not a string. defaults to utf-8 if not provided. abaseuri the base uri for the spec, specified as an nsiuri. only used if awhattoload is a string. newuri() the newuri() method creates a new nsiuri. this method
wraps the nsiioservice.newuri(). note: starting in gecko 2, this method supports specifying an nsifile as the target of the uri. in previous versions of gecko, you must use a string to specify the uri. nsiuri newuri( atarget, [optional] aorigincharset, [optional] abaseuri ); parameters atarget specifies the target of the uri as either a uri string or (starting in gecko 2) as an nsifile...
Examples
filescontent is an array of strings; each string is the content of one file. console.log(filescontent); }, function onfail() { console.error("failed to load all files"); } ); see also the ask.m.o topic: doing multiple promises in function in pareallel, how return when last done? simple example user defined promise function 2 whenever you want to make a function a promise. always
wrap that function in a try catch and make that catch return promise.reject(ex) otherwise it will not trigger the rejection function of the promise.then. this way if any error happens it will reject the promise. in the example below we try alerting an undefined variable. components.utils.import("resource://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(...
Using JavaScript code modules
pulated 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 any subsequent import of the module will reload it and give a n...
JavaScript code modules
alue pair dictionaries. downloadlastdir.jsm supplies the path to the directory into which the last download occurred. downloads.jsm provides a single entry point to interact with the downloading capabilities of the platform. fileutils.jsm provides helpers for dealing with files. geometry.jsm provides routines for performing basic geometric operations on points and rectangles. http.jsm a
wrapper for xmlhttprequest that provides convenient and simplified api for dealing with http requests. jni.jsm abstracts the js-ctypes 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...
Localizing with Koala
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\locale\x-testing\3.6" if you enabled mercurial (recommended), koala will ask you if you wish to clone the remote repository. click "ok" (even if you're creating a new localization and there is no remote repository). existing localizatio...
Localization technical reviews
-locales tool on the new locale to get the statistics on translation of strings and report basic errors. defines.inc the file for each app (like browser/defines.inc) contains the names of all contributors that a localization team would like to credit the work to. localizers can specify the team responsible for the work by listing the name just after the moz_langpack_creator. the team can also
wrap contributors with <em:contributor> tags just after the moz_langpack_contributors section. make sure that the the text content is
wrapped with emptylines. leading comments are ok, but watch out for #filter emptylines #define ... # comment #define ... #unfilter emptylines in toolkit/defines.inc, the native name of the language is specified, which is used as description for the built language p...
Extras
&applyfunction;</mo> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> rather than repeating the instructions, some css might be used to provide a visual cue. ...
Various MathML Tests
overview of presentation mathml elements testing tensor indices <mmultiscripts>: r i1 j2 k3 ; this with <none/>, a qp i a bit of calculus: ∫ a b f ( x ) dx ∂ ∂ x f ( x , y ) + ∂ ∂ y f ( x , y ) here is the alphabet with invisible portions
wrapped by <mphantom> in between: a b c d e f g h i j k l m n o p q r s t u v w x y z . testing mathml <msub>: a b ; a i ; a i k testing mathml <msup>: d b 2 a x 2 2 x ( 1 2 ) y a x . testing mathml <munder>, <mover>, and <munderover>: abcd un abcd ov abcd under over . testing mathml <msubsup>: a p q a b + c x . testing mathml <mrow>: d ( a b ) x 2 + 4 * x + p q = 0 , with this <mfrac> hanging here d * t ( i + j n ...
mozilla::CondVar
please see introduction_to_nspr for a high-level summary of its semantics. #include "condvar.h" methods constructor condvar(mutex& amutex, const char* aname) initialize the condvar with its associated mutex and a name to reference it by. wait() nsresult wait( in printervaltime interval = pr_interval_no_timeout ); wait on this condvar until it is notifyed. notify() nsresult notify(void); notify one thread waiting on this condvar. notifyall() nsresult notifyall(void); notify all threads waiting on this condvar. assertcurrentthreadownsmutex() assert that the current thread has successfully locked the mutex undergirding this condvar. ...
mozilla::Monitor
please see introduction_to_nspr for a high-level summary of its semantics. methods enter() enter the monitor. exit() exit the monitor. wait() nsresult wait( in printervaltime interval = pr_interval_no_timeout ); wait on this monitor until it is notifyed. notify() nsresult notify(void); notify one thread waiting on this monitor. notifyall() nsresult notifyall(void); notify all threads waiting on this monitor. assertcurrentthreadin() assert that the current thread is in this monitor. does not incur a runtime penalty in optimized builds. assertnotcurrentthreadin() assert that the current thread is not in this monitor. does not incur a runtime penalty in optimized builds. ...
mozilla::Mutex
please see introduction_to_nspr for a high-level summary of its semantics. #include <mozilla/mutex.h> methods constructor mutex(const char* aname) initialize the mutex with a name that can reference it. lock() lock the mutex. unlock() unlock the mutex. assertcurrentthreadowns() assert that the current thread has locked this mutex. does not incur a runtime penalty in optimized builds. assertnotcurrentthreadowns() assert that the current thread does not own this mutex. does not incur a runtime penalty in optimized builds. ...
mozilla::MutexAutoLock
estructor will unlock() the underlying mozilla::mutex. because of mozilla::mutexautounlock, the rule for determining if your code owns the mutex underlying the mutexautolock is slightly more complicated than that for monitorautoenter. this is because mutexautounlocks can be nested within mutexautolocks and vice versa, indefinitely deeply. important: when a mozilla::mutexautolock is the mutex raii
wrapper most recently pushed on the stack, your code is guaranteed to own the underlying mozilla::mutex. constructors mutexautolock( in mozilla::mutex& lock; ); this parameter is a reference so as to guarantee that your code has already properly constructed the mozilla::mutex. methods none. see also mozilla::mutex mozilla::mutexautounlock ...
mozilla::MutexAutoUnlock
r will lock() the underlying mozilla::mutex. because of mozilla::mutexautolock, the rule for determining if your code does not own the mutex underlying the mutexautounlock is slightly more complicated than that for monitorautoenter. this is because mutexautounlocks can be nested within mutexautolocks and vice versa, indefinitely deeply. important: when a mozilla::mutexautounlock is the mutex raii
wrapper most recently pushed on the stack, your code is guaranteed not to own the underlying mozilla::mutex. constructors mutexautounlock( in mozilla::mutex& lock; ); this parameter is a reference so as to guarantee that your code has already properly constructed the mozilla::mutex. methods none. see also mozilla::mutex mozilla::mutexautolock ...
Investigating leaks using DMD heap scan mode
0 [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 (htmlscriptelement)] --[un
wrapdomobject(obj)]--> 0x7f0882fe3230 the first two lines mean that the script element 0x7f0882fe3230 contains a strong reference to the eventlistenermanager 0x7f0899b4e550. "[via hash] mlistenermanager" is a description of that strong reference. together, these lines show a chain of strong references from an object the cycle collector thinks needs to be kept alive, 0x7f0899b4e550, to the object 0x7f...
AsyncTestUtils extended framework
heir return values through. for example, you would do "yield async_move_messages(...);" and be done with it. helpers for the asynchronous function contract it can be annoying to have to write interface boilerplate just to call async_driver. if you have the following types of listeners you can use the following pre-defined helpers: nsiurllistener: asyncurllistener (predefined). if you need to
wrap an existing url listener or need a callback or fancy promise, create an instance of asyncurllistener. copy listener: asynccopylistener. bringing messages into the picture synthetic set definitions most of the code involved in creating synthetic messages takes an object that defines how to generate the set. the following is a list of frequently used attributes where the default value is li...
About NSPR
ipv4 or ipv6. time timing facilities are available in two forms: interval timing and calendar functions. interval timers are based on a free running, 32-bit, platform dependent resolution timer. such timers are normally used to specify timeouts on i/o, waiting on condition variables and other rudimentary thread scheduling. since these timers have finite namespace and are free running, they can
wrap at any time. nspr does not provide an epoch , but expects clients to deal with that issue. the granularity of the timers is guaranteed to be between 10 microseconds and 1 millisecond. this allows a minimal timer period in of approximately 12 hours. but in order to deal with the
wrap-around issue, only half that namespace may be utilized. therefore, the minimal usable interval available from the t...
NSPR Contributor Guide
st 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 prototype, 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: xxx ownership of your contribution when you contribute something to nspr, you must have intellectual property rights to that contribution. this means th...
NSPR Poll Method
criptor, whereas pr_poll operates on a collection of nspr file descriptors. pr_poll uses the poll method behind the scene, but it is also possible to use the poll method directly. we consider a stack of nspr i/o layers on top of the network transport. each i/o layer is represented by a prfiledesc structure and the protocol of that layer is implemented by a priomethods table. the bottom layer is a
wrapper for the underlying network transport. the nspr library provides a reference implementation of the bottom layer using the sockets api, but you can provide your own implementation of the bottom layer using another network transport api. the poll method is one of the functions in the priomethods table. the prototype of the poll method is print16 poll_method(prfiledesc *fd, print16 in_flags, prin...
PRIntervalTime
ime; #define pr_interval_min 1000ul #define pr_interval_max 100000ul #define pr_interval_no_wait 0ul #define pr_interval_no_timeout 0xfffffffful description the units of printervaltime are platform-dependent. they are chosen to be appropriate for the host os, yet provide sufficient resolution and period to be useful to clients. the increasing interval value represented by printervaltime
wraps. it should therefore never be used for intervals greater than approximately 6 hours. interval times are accurate regardless of host processing requirements and are very cheap to acquire. the constants pr_interval_min and pr_interval_max define a range in ticks per second. these constants bound both the period and the resolution of a printervaltime object. the reserved constants pr_interval_no_...
PR ImportTCPSocket
file descriptor from working in non-blocking mode. warning in theory, code that uses pr_importtcpsocket may break when nspr's implementation changes. in practice, this is unlikely to happen because nspr's implementation has been stable for years and because of nspr's strong commitment to backward compatibility. using pr_importtcpsocket is much more convenient than writing an nspr i/o layer that
wraps your native tcp sockets. of course, it is best if you just use pr_opentcpsocket or pr_newtcpsocket. if you are not sure whether pr_importtcpsocket is right for you, please ask in the mozilla.dev.tech.nspr newsgroup. ...
NSS Certificate Download Specification
s to be imported together. the contents of the version, digestalgorithms, contentinfo, crls, and signerinfos fields are ignored. netscape certificate sequence: this is another pkcs#7 object format, and like the signeddata format, it allows multiple certificates to be imported together. this format is simpler than the pkcs#7 signeddata object format. it consists of a pkcs#7 contentinfo structure,
wrapping a sequence of certificates. the contenttype field oid must be netscape-cert-sequence (see object identifiers). the content field is the following asn.1 structure: certificatesequence ::= sequence of certificate see the section below on certificate chains for more information about how multiple certificates are handled. text formats any of the above binary formats can also be imported...
Encrypt Decrypt MAC Keys As Session Objects
key(slot, ckm_generic_secret_key_gen, 160/8, &mackeyid, pwdata); if (mackey == null) { pr_fprintf(pr_stderr, "generatesymkey for macing returned null.\n"); rv = secfailure; goto cleanup; } /* get the encrypt key cka_id */ rv = gathercka_id(enckey, &encckaid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "error while
wrapping encrypt key\n"); goto cleanup; } /* get the mac key cka_id */ rv = gathercka_id(mackey, &macckaid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "can't get the mac key cka_id.\n"); goto cleanup; } if (noisefilename) { rv = seedfromnoisefile(noisefilename); if (rv != secsuccess) { port_seterror(pr_end_of_file_error)...
Encrypt and decrypt MAC using token
key(slot, ckm_generic_secret_key_gen, 160/8, &mackeyid, pwdata); if (mackey == null) { pr_fprintf(pr_stderr, "generatesymkey for macing returned null.\n"); rv = secfailure; goto cleanup; } /* get the encrypt key cka_id */ rv = gathercka_id(enckey, &encckaid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "error while
wrapping encrypt key\n"); goto cleanup; } /* get the mac key cka_id */ rv = gathercka_id(mackey, &macckaid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "can't get the mac key cka_id.\n"); goto cleanup; } if (noisefilename) { rv = seedfromnoisefile(noisefilename); if (rv != secsuccess) { port_seterror(pr_end_of_file_error)...
FIPS Mode - an explanation
ust implement the us government standard algorithms (also specified in other fips documents) such as aes, triple-des, sha-1 and sha-256, that are needed to do whatever job the application wants it to perform. it must generate or derive cryptographic keys and store them internally. except for "public keys", it must not allow any keys to leave it (to get outside of it) unless they are encrypted ("
wrapped") in a special way. this makes it difficult to move keys from one device to another, and consequently, all crypto engines and key storage must be in a single device rather than being split up into several devices. how does this affect firefox users? these requirements have several implications for users. in fips mode, every user must have a good strong "master password", and must enter it ...
NSS_3.11.10_release_notes.html
match usage bug 374247: modutil -disable command not disabling modules' slots bug 384459: certification path validation fails when authority key identifier extension contains key identifier bug 385946: can't import certificate into cert database in fips mode (certutil). bug 387892: add entrust root ca certificate(s) to nss bug 396999: pk11_authenticate bug 397478: lock from ssl_initsym
wrapkeyslock not freed on selfserv shutdown. bug 397486: session cache locks not freed on strsclnt shutdown. bug 398680: assertion botch in ssl3_registerserverhelloextensionsender doing second handshake with ssl_forcehandshake bug 403240: threads hanging in nss_initlock bug 403888: memory leak in trustdomain.c bug 416067: certutil -l -h token doesn't report token authentication failure bug...
NSS 3.12.9 release notes
ons new ssl options new error codes bugs fixed the following bugs have been fixed in nss 3.12.9. bug 609068: implement j-pake in freebl bug 607058: crash [@ nss_cms_decoder_work_data] bug 613394: november/december 2010 batch of nss root ca changes bug 610843: need way to recover softoken in child after fork() bug 617492: add pk11_keygenwithtemplate function to pk11
wrap (for firefox sync) bug 610162: sha-512 and sha-384 hashes are incorrect for inputs of 512mb or larger when running under windows and other 32-bit platforms (fx 3.6.12 and 4.0b6) bug 518551: vfychain crashes in pkits tests. bug 536485: crash during ssl handshake in [@ intel_aes_decrypt_cbc_256] bug 444367: nss 3.12 softoken returns the certificate type of a certificate object as ckc_x_509_...
NSS 3.15.4 release notes
method, which is the new default, and will fall back to the http post method. implemented ocsp server functionality for testing purposes (httpserv utility). support sha-1 signatures with tls 1.2 client authentication. added the --empty-password command-line option to certutil, to be used with -n: use an empty password when creating a new database. added the -w command-line option to pp: don't
wrap long output lines. new functions cert_forcepostmethodforocsp cert_getsubjectnamedigest cert_getsubjectpublickeydigest ssl_peercertificatechain ssl_recommendedcanfalsestart ssl_setcanfalsestartcallback new types cert_rev_m_force_post_method_for_ocsp: when this flag is used, libpkix will never attempt to use the http get method for ocsp requests; it will always use post. new pkcs #11 me...
NSS 3.16.2 release notes
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 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 a...
NSS 3.16 release notes
the environment variable nss_disable_ecc=1 when building nss. bug 903885: (cve-2014-1492) in a wildcard certificate, the wildcard character should not be embedded within the u-label of an internationalized domain name. see the last bullet point in rfc 6125, section 7.2. bug 962760: libpkix should not include the common name of ca as dns names when evaluating name constraints. bug 981170: aeskey
wrap_decrypt should not return secsuccess for invalid keys. bug 974693: fix a memory corruption in sec_pkcs12_new_asafe. bug 956082: if the nss_sdb_use_cache environment variable is set, skip the runtime test sdb_measureaccess. the built-in roots module has been updated to version 1.97, which adds, removes, and distrusts several certificates. the atob utility has been improved to automatically ign...
NSS 3.30 release notes
f a pkcs#11 object in a given slot has a specific boolean attribute set. in ssl.h ssl_alertreceivedcallback - register a callback function, that will be called whenever an ssl/tls alert is received ssl_alertsentcallback - register a callback function, that will be called whenever an ssl/tls alert is sent ssl_setsessionticketkeypair - configures an asymmetric key pair, for use in
wrapping session ticket keys, used by the server. this function currently only accepts an rsa public/private key pair. new macros in ciferfam.h pkcs12_aes_cbc_128, pkcs12_aes_cbc_192, pkcs12_aes_cbc_256 - cipher family identifiers corresponding to the pkcs#5 v2.1 aes based encryption schemes used in the pkcs#12 support in nss in pkcs11n.h cka_nss_mozilla_ca_policy - identi...
NSS 3.45 release notes
pts on solaris sparc so that libfreebl_64fpu_3.so builds bug 1554336 - optimize away unneeded loop in mpi.c bug 1559906 - fipstest: use ckm_tls12_master_key_derive instead of vendor specific mechanism bug 1558126 - tls_aes_256_gcm_sha384 should be marked as fips compatible bug 1555207 - helloretryrequestcallback return code for rejecting 0-rtt bug 1556591 - eliminate races in uses of pk11_set
wrapkey bug 1558681 - stop using a global for anti-replay of tls 1.3 early data bug 1561510 - fix a bug where removing -arch xxx args from cc didn't work bug 1561523 - add a string for the new-ish error ssl_error_missing_post_handshake_auth_extension this bugzilla query returns all the bugs fixed in nss 3.45: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&que...
NSS 3.46 release notes
uration the next nss team plans to make two changes to the default tls configuration in nss 3.47, which will be released in october: tls 1.3 will be the default maximum tls version. see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. ...
Encrypt Decrypt_MAC_Using Token
key(slot, ckm_generic_secret_key_gen, 160/8, &mackeyid, pwdata); if (mackey == null) { pr_fprintf(pr_stderr, "generatesymkey for macing returned null.\n"); rv = secfailure; goto cleanup; } /* get the encrypt key cka_id */ rv = gathercka_id(enckey, &encckaid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "error while
wrapping encrypt key\n"); goto cleanup; } /* get the mac key cka_id */ rv = gathercka_id(mackey, &macckaid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "can't get the mac key cka_id.\n"); goto cleanup; } if (noisefilename) { rv = seedfromnoisefile(noisefilename); if (rv != secsuccess) { port_seterror(pr_end_of_file_error)...
NSS Sample Code Sample_3_Basic Encryption and MACing
key(slot, ckm_generic_secret_key_gen, 160/8, &mackeyid, pwdata); if (mackey == null) { pr_fprintf(pr_stderr, "generatesymkey for macing returned null.\n"); rv = secfailure; goto cleanup; } /* get the encrypt key cka_id */ rv = gathercka_id(enckey, &encckaid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "error while
wrapping encrypt key\n"); goto cleanup; } /* get the mac key cka_id */ rv = gathercka_id(mackey, &macckaid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "can't get the mac key cka_id.\n"); goto cleanup; } if (noisefilename) { rv = seedfromnoisefile(noisefilename); if (rv != secsuccess) { port_seterror(pr_end_of_file_error)...
sample2
clude <keyhi.h> #include <pk11priv.h> #include <cert.h> #include <base64.h> #include <secerr.h> #include <secport.h> #include <secoid.h> #include <secmodt.h> #include <secoidt.h> #include <sechash.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits 1024 /* header file constants */ #define enckey_header "-----begin
wrapped enckey-----" #define enckey_trailer "-----end
wrapped enckey-----" #define mackey_header "-----begin
wrapped mackey-----" #define mackey_trailer "-----end
wrapped mackey-----" #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 "...
nss tech note7
roperate with a protocol that isn't implemented by nss, then you may need to use the pk11_ functions. (this api pretty much consists of what was needed to implement ssl and s/mime, plus a few enhancements over the years to support jss.) when using the pk11_ interfaces, the same principal applies: use the highest available function. if you are really trying to send a key, you should use pk11_pub
wrapsymkey(). for a low level signature, use pk11_sign(). both of these functions do the pkcs #1
wrapping of the data. pk11_sign does not do the ber encoding of the hash (as is done in sgn_ functions). if you are trying to just send data, use pk11_pubencryptpkcs1. pk11_pubencryptraw is the lowest level function. it takes a modulus size data and does a raw rsa operation on the data. it's used to ...
FC_DeriveKey
name fc_derivekey - derive a key from a base key syntax ck_rv fc_derivekey( ck_session_handle hsession, ck_mechanism_ptr pmechanism, ck_object_handle hbasekey, ck_attribute_ptr ptemplate, ck_ulong usattributecount, ck_object_handle_ptr phkey ); parameters hsession [in] session handle. pmechanism [in] pointer to the mechanism to use. hbasekey [in] handle of the base key. p
wrappedkey [in] pointer to the
wrapped key. ptemplate [in] pointer to the list of attributes for the new key. usattributecount [in] number of attributes in the template. phkey [out] pointer to the location to receive the handle of the new key. description fc_derivekey derives (decrypts) a key and creates a new key object. a user must log into the token (to assume the nss user role) before calling f...
FIPS mode of operation
hmac. fc_verifyinit fc_verify fc_verifyupdate fc_verifyfinal fc_verifyrecoverinit fc_verifyrecover dual-function cryptographic functions fc_digestencryptupdate fc_decryptdigestupdate fc_signencryptupdate fc_decryptverifyupdate key management functions fc_generatekey: dsa domain parameters (pqg) fc_generatekeypair: dsa, rsa, and ecdsa. performs pair-wise consistency test. fc_
wrapkey: rsa key
wrapping fc_un
wrapkey: rsa key
wrapping fc_derivekey: diffie-hellman, ec diffie-hellman random number generation functions fc_seedrandom fc_generaterandom: performs continuous random number generator test. parallel function management functions fc_getfunctionstatus fc_cancelfunction ...
S/MIME functions
keyid mxr 3.7 and later nss_cmsrecipientinfo_createwithsubjkeyidfromcert mxr 3.7 and later nss_cmsrecipientinfo_destroy mxr 3.2 and later nss_cmsrecipientinfo_encode mxr 3.8 and later nss_cmsrecipientinfo_getcertandkey mxr 3.8 and later nss_cmsrecipientinfo_un
wrapbulkkey mxr 3.7.2 and later nss_cmsrecipientinfo_
wrapbulkkey mxr 3.7.2 and later nss_cmssigneddata_addcertchain mxr 3.2 and later nss_cmssigneddata_addcertlist mxr 3.2 and later nss_cmssigneddata_addcertificate mxr 3.2 and later nss_cmssigneddata_adddigest ...
Pork Tool Development
n refers to macro expansion when using mcpp (see installing pork). for the rename_class.cpp test, generate the file with "gcc -e -wp,-w0,-k rename_class.cpp > rename_class.cc" and run the renamer with "../renamer -rename foo bar rename_class.cc". for terminology, suppose "my_foo" --> "foo". then any post-location variables refer to "foo" and pre-location variables refer to "my_foo". cppsourceloc
wraps sourceloc, providing information about macro expansion. cppsourceloc will change the previously provided location information (in variable cpp_source_loc._loc) from post-location to pre-location. all values from the ast refer to the post-location. notes the #static channel on irc.mozilla.org is for discussion of pork, dehydra, and other static analysis tools. ...
Rhino Examples
a script from the command line. the control class control.java is a program that executes a simple script and then manipulates the result. javascript shell shell.java is a program that executes javascript programs; it is a simplified version of the shell in the tools package. the programs may be specified as files on the command line or by typing interactively while the shell is running. primitive
wrapfactory primitive
wrapfactory.java is an example of a
wrapfactory that can be used to control the
wrapping behavior of the rhino engine on calls to java methods. multithreaded script execution dynamicscopes.java is a program that creates a single global scope object and then shares it across multiple threads. sharing the global scope allows both information to be shared across threads, and amortize...
The JavaScript Runtime
types are represented by implementing the function interface. since javascript is a dynamically typed language, the static java type of a javascript value is java.lang.object. the behavior of the javascript engine is undefined if a value of any type other than the ones described above is introduced into javascript. (this caveat does not apply to scripts that use liveconnect; the java values are
wrapped and un
wrapped as appropriate to conform to the above type constraints.) property access properties in javascript objects may be accessed using either string or numeric identifiers. conceptually, all accessors are converted to strings in order to perform the lookup of the property in the object. however, this is not the implementation used in practice because a number to string conversion is ...
FOSS
getting started here. ...
Introduction to the JavaScript shell
"\n"); 00044: 15 name "print" 00047: 15 pushobj 00048: 15 string "you entered " 00051: 15 getvar 0 00054: 15 add 00055: 15 string " and " 00058: 15 add 00059: 15 getvar 1 00062: 15 add 00063: 15 string "\\n" 00066: 15 add 00067: 15 call 1 00070: 15 pop 00071: 15 stop dumpheap(([filename[, start[, tofind[, maxdepth[, toignore]]]]]) dump gc information. this is a thin
wrapper for js_dumpheap. gczeal(zeal) enable extra-frequent gc, to help find gc hazards. zeal is an integer. the meaning is the same as for the parameter to js_setgczeal. notes([function]) shows the source notes for the specified function. source notes contain information that map the bytecode to the source code, which is used when decompiling the code, such as when using the dissrc() function. ...
JSAPI User Guide
ll(), and isundefined(). if a js::value contains a jsobject, double, or jsstring, you can cast it to its underlying data type using the toobject(), todouble(), and tostring() member functions, respectively. this is useful in some cases where your application or a jsapi function requires a variable or argument of a specific data type, rather than a js::value. similarly, you can create a js::value
wrapping a jsobject, double, or jsstring pointer to a js::value using js::objectvalue(jsobject&), js::doublevalue(double), or js::stringvalue(jsstring*). garbage collection as it runs, javascript code implicitly allocates memory for objects, strings, variables, and so on. garbage collection is the process by which the javascript engine detects when those pieces of memory are no longer reachable—t...
JSFreeOp
name type description rt jsruntime * a runtime to store in this structure. methods method description jsruntime *runtime() const returns a pointer to jsruntime passed to constructor. description various finalization api takes not jscontext * but rather either jsfreeop structure or its library-private counterpart freeop. these structures
wrap parameters that are passed to the finalizers removing most of explicit dependencies on jscontext in the finalization code. see also mxr id search for jsfreeop js_freeop js_getdefaultfreeop jsfinalizecallback jsdestroycompartmentcallback bug 737365 ...
JSObjectOp
rowsers, 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. typedef jsobject * (*jsobjectop)(jscontext *cx, jsobject *obj); the callbacks of this type are: jsextendedclass.outerobject jsextendedclass.innerobject jsextendedclass.
wrappedobject jsobjectops.thisobject ...
JS_AddArgumentFormatter
omjs tells the formatter to convert zero or more jsvals at sp to zero or more c values accessed via pointers-to-values at ap, updating both sp (via *vpp) and ap (via *app) to point past the converted arguments and their result pointers on the c stack. when called from js_pushargumentsva, the formatter is invoked thus: formatter(cx, "aa...", js_false, &sp, &ap); where js_false for fromjs means to
wrap the c values at ap according to the format specifier and store them at sp, updating ap and sp appropriately. the "..." after "aa" is the rest of the format string that was passed into js_{convert,push}arguments{,va}. the actual format trailing substring used in each convert or pusharguments call is passed to the formatter, so that one such function may implement several formats, in order to share...
JS_DefineFunction
quest on this jscontext. obj js::handle<jsobject*> object for which to define a function as a property (method). name const char * or const char16_t * name to assign to the function. id js::handle<jsid> a pointer to jsid for name to assign to the function. added in spidermonkey 17 call jsnative the native c/c++ function to be
wrapped by the new function. nargs unsigned number of arguments that are passed to the function when it is called. flags unsigned the logical or of zero or more property attributes. description js_definefunction exposes a c/c++ function to scripts by defining a new method on an existing javascript object. it creates the new function object as though by calling js_ne...
JS_IsArrayObject
text * a context. value js::handlevalue the value to examine. obj js::handleobject the object to examine. isarray bool whether the value/object is an array. description js_isarrayobject determines if a specified object, obj or value, is an array object. on success, returns true and sets isarray indicating whether obj is an array object or a
wrapper around one. otherwise returns false on failure. see also mxr id search for js_isarrayobject bug 959787 - added value bug 1179003 - added isarray ...
JS_NewFunction
is null, the new function has no name. id js::handle<jsid> a pointer to jsid of the name to assign to the new function. added in spidermonkey 17 description js_newfunction creates a new javascript function implemented in c/c++. (to create a new function implemented in javascript, use js_compilefunction instead.) call is a c/c++ function pointer that the new function
wraps. nargs is the number of arguments the function expects. if flags is jsfun_constructor, a created function can be called as a constructor. parent may be used to specify the new function's parent; null is usually the right thing here. name is the name to assign to the function. if name is null, the new function has no name. (js_getfunctionid, passed the new function, will return null.) on success...
JS_NewScriptObject
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. ...
JS_PSGS
6 the bitwise or of any number of property attributes. gettername const char * the function's name in self-hosted javascript code for getter function. settername const char * the function's name in self-hosted javascript code for setter function. description these macros encapsulate the definition of jsnative-backed jspropertyspecs, by defining the jsnative
wrappers for them. see also mxr id search for js_psg mxr id search for js_psgs mxr id search for js_self_hosted_get mxr id search for js_self_hosted_getset jspropertyspec js_defineproperties js_initclass bug 684526 - added. bug 938728 - added js_self_hosted_get and js_self_hosted_getset. ...
JS_ValueToBoolean
aluetoboolean converts a specified javascript value, v, to a boolean value. it implements the toboolean operator specified in ecma 262-3 §9.2. on success, js_valuetoboolean stores the converted value in *bp and returns js_true. on error or exception, it returns js_false, and the value left in *bp is undefined. for versions greater than jsversion_1_2, all objects convert to js_true, even boolean
wrapper objects like the one produced by new boolean(false). this is the behavior specified in ecma 262-3 §9.2. see related discussion on google groups. see also mxr id search for js_valuetoboolean js::toboolean bug 934557 ...
JS_ValueToObject
ct. description 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. if v is a boolean value, a 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=jstype_object.) the resulting object is subjec...
JS_freeop
this article covers features introduced in spidermonkey 17 a
wrapper for js_free. syntax void js_freeop(jsfreeop *fop, void *p); name type description fop jsfreeop * a pointer to jsfreeop structure to be used to get the implementation of free. p void * a pointer to the allocated memory to be freed. description js_freeop is a
wrapper for js_free(p) that may delay js_free(p) invocation as a performance optimization as specified by the given jsfreeop instance. see also mxr id search for js_freeop jsfreeop js_free bug 737365 ...
JSAPI reference
bsolete since javascript 1.8.5 js_poparguments obsolete since javascript 1.8.5 js_addargumentformatter obsolete since jsapi 18 js_removeargumentformatter obsolete since jsapi 18 the following functions convert js values to various types. they can be safely applied to jsvals of any type. they may return new objects. for example, js_valuetoobject(cx, s) where s is a string creates a new string
wrapper object. these functions may call javascript methods. for example, js_valuetostring(cx, obj) may call obj.tostring(). js::toboolean added in spidermonkey 17 js::touint16 added in spidermonkey 17 js::toint32 added in spidermonkey 17 js::touint32 added in spidermonkey 17 js::toint64 added in spidermonkey 17 js::touint64 added in spidermonkey 17 js::tonumber added in spidermonkey 17 js::...
SpiderMonkey 1.8.8
alue api changes break out and discuss all api changes here... jsclass prototype has changed a number of optional members have been removed from the jsclass prototype. jsclass callback changes many of the jsclass callbacks such as jsresolveop, jsenumerateop and jspropertyop, have a type change on their arguments to jshandleobject, jshandleid, jshandlemutableobject etc. atleast for the c api this
wraps an extra pointer around these objects, so you would cast the argument to jsobject**, in the callback function. removal of jscontext* parameters to many methods the js_getclass method now takes only a jsobject*, where previously it also required a jscontext* in threadsafe builds. (the js_get_class macro abstracting away this difference has accordingly been removed.) javascript shell changes deta...
SpiderMonkey 1.8
re a statement could appear, such as in the argument to eval(). functions that were js_threadsafe-only in spidermonkey 1.7 (js_beginrequest, for example) are now present, but do nothing, in non-js_threadsafe builds. this is to help applications share and reuse code regardless of whether they use threads. there are two new jsextendedclass hooks, jsextendedclass.iteratorobject and jsextendedclass.
wrappedobject. both are documented but obscure. many new memory management features have been added as well. the new function js_setscriptstackquota limits the size of the javascript stack. two new functions, js_setgczeal and js_dumpheap, aim to help developers debug gc-related problems. these functions are only present in debug builds. js_setgczeal is especially helpful. when gc zeal is enabled...
SpiderMonkey 17
uota api changes break out and discuss all api changes here... jsclass prototype has changed a number of optional members have been removed from the jsclass prototype. jsclass callback changes many of the jsclass callbacks such as jsresolveop, jsenumerateop and jspropertyop, have a type change on their arguments to jshandleobject, jshandleid, jshandlemutableobject etc. atleast for the c api this
wraps an extra pointer around these objects, so you would cast the argument to jsobject**, in the callback function. removal of jscontext* parameters to many methods the js_getclass method now takes only a jsobject*, where previously it also required a jscontext* in threadsafe builds. (the js_get_class macro abstracting away this difference has accordingly been removed.) garbage collection functions ...
SpiderMonkey 31
monkey, cleaning up memory and allocations performed by js_init. it is not required to call js_shutdown at present, but it is strongly recommended: calling it may be required in a future spidermonkey release. javascript shell changes detail added/removed methods here... on posix platforms, building a threadsafe shell no longer requires nspr. embedders still need to build with nspr, as the new
wrappers require using spidermonkey internal functions which are not exposed to the public api. known issues detail any known issues here... future direction ...insert details on future plans... spidermonkey embedders should be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi stable for embedders. we have chosen to concentrate on performance and correctness as primary concer...
SavedFrame
v function b from chrome.js | v function c from content.js the content compartment will ever have one view of this stack: a -> c. however, a chrome compartment has a choice: it can either take the same view that the content compartment has (a -> c), or it can view all stack frames, including the frames from chrome compartments (a -> b -> c). to view everything, use an xray
wrapper. this is the default
wrapper. to see the stack as the content compartment sees it, waive the xray
wrapper with components.utils.waivexrays: const contentviewofstack = components.utils.waivexrays(somestack); accessor properties of the savedframe.prototype object source the source url for this stack frame, as a string. line the line number for this stack frame. column the column number for th...
Secure Development Guidelines
strncpy does not guarantee \0 termination. strncat confusing size argument; can write 1 byte beyond the size. snprintf, vsnprintf return value differs on various platforms. ...
Places Developer Guide
ave been "starred", but not places in any folder. nsinavbookmarksservice.tagsfolder - subfolders of this folder are tags, and their children are uris that have been tagged with that folder's name. other bookmarks apis note: this document covers the toolkit places services. ...
Aggregating the In-Memory Datasource
introduction you can use xpcom aggregation1 with the in-memory datasource. why would you want to do this? say you were writing a datasource2, and the way you chose to implement it was to "
wrap" the in-memory datasource; i.e., myclass : public nsimyinterface, public nsirdfdatasource { private: nscomptr<nsirdfdatasource> minner; public: // nsirdfdatasource methods ns_imethod init(const char* auri) { return minner->init(auri); } ns_imethod geturi(char* *auri) { return minner->geturi(auri); } // etc., for each method in nsirdfdatasource! }; very painful, prone to errors, and fragile as the interfaces are still in flux (a wee bit). aggregation to the rescue! here are the gory details on how. when it won't work although this magic is terribly con...
Fun With XBL and XPConnect
now i can pass the result of autocompletelistener into methods that require an auto 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 c...
XPCOM array guide
erators. for example, if you need to iterate an array returned from another object, you might use enumerate(). ... // get the array nscomptr<nsiarray> array; foo->getelements(getter_addrefs(array)); // make an enumerator nscomptr<nsisimpleenumerator> enumerator; array->enumerate(getter_addrefs(enumerator)); // now enumerate the elements ... typesafe arrays nscomarray<t> nscomarray<t> is a
wrapper around nstarray<t>, so it has a similar api. it enforces both typesafety and xpcom reference counting by keeping an owning reference to each element in the array. usage it is most often used as a member of a c++ class to store a list of well-typed xpcom objects. it is also usually declared as an inline member rather than a pointer. as a class member, nscomarray<t> is preferred over nsiarray ...
Building the WebLock UI
ntime - is described in overlaying new user interface into mozilla. the finished dialog appears below. web lock manager dialog as you can see, it's a simple interface, providing just enough widgetry to lock and unlock the browser and to add new sites to the list. the entire xul file for the web lock manager dialog is defined in weblock.xul below. the locking ui once you have the basic xul
wrapper set up for your interface, the next step is to define that part of the interface that locks and unlocks the browser. one of the most efficient ways to expose this is to use radio buttons, which allow the user to toggle a particulart state, as the figure above illustrates. in xul individual <radio/> elements are contained within a parent element called <radiogroup/>. grouping radio elements to...
XPCOM Stream Guide
trying to create to a temporary file. if everything goes well, calling the stream's .finish() method overwrites the original file with the new file. using streams in c++ using streams in javascript input streams input streams are not scriptable - you cannot directly call .read() on them, for example. to solve this, there is a special nsiscriptableinputstream interface and "scriptable stream"
wrapper. if you have an input stream called nativestream, you can use code like this: var stream = components.classes["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); stream.init(nativestream); the stream provides .read(count), .available(), and .close() methods. output streams output streams are usually scriptable: yo...
Components.utils.Sandbox
e each page sees a "vanilla" view of the other. the protection is bidirectional: the caller sees the bonafide dom objects without being confused by sneakily-redefined properties, and the target receives appropriate privacy from having its expandos inspected by untrusted callers. in situations where only unidirectional protection is needed, callers have the option to waive the x-ray behavior using
wrappedjsobject or xpcnative
wrapper.un
wrap(). in general, when accessing same-origin content, script gets a transparent
wrapper rather than an xray
wrapper. however, sandboxes are often used when chrome wants to run script as another origin, possibly to interact with the page. in this case, same-origin xrays are desirable, and wantxrays should be set to true. see safely accessing content dom from ...
Components.utils.exportFunction
iew of the original object. for the full details refer to the documentation for xray vision, but for example: functions are not visible in the xrays of javascript object types. ...
Components.utils.makeObjectPropsNormal
ensures that the specified object's methods are all in the object's scope, and aren't cross-component
wrappers. syntax void components.utils.makeobjectpropsnormal(obj); parameters obj the object for which to ensure all methods are in its scope. example for an example, see components.utils.createobjectin(). ...
Components object
its prototype chain at birth, for example). utils.getweakreference gets a weak reference for the object passed in. utils.import loads a javascript module into the current script, without sharing a scope. utils.lookupmethod looks up a native (i.e. declared in the interface) method or property of an xpcom object. serves the same purpose as xpcnative
wrapper. utils.makeobjectpropsnormal ensures that all functions come from the specified object's scope, and aren't cross-compartment
wrappers. may only be called from javascript code. utils.methodjit obsolete since gecko 24.0 provides access to the value of the methodjit property in the javascript environment. utils.methodjit_always obsolete since g...
Using components
ccomponents_classes] results=[object nsxpccomponents_results] issuccesscode=function issuccesscode() { [native code] } constructor=[object nsxpccomponents_constructor] queryinterface=function queryinterface() { [native code] } interfacesbyid=[object nsxpccomponents_interfacesbyid] classesbyid=[object nsxpccomponents_classesbyid] stack=js frame :: scratchpad/4 :: cdump :: line 8 manager=[xpconnect
wrapped nsicomponentmanager] id=[object nsxpccomponents_id] exception=[object nsxpccomponents_exception] reporterror=function reporterror() { [native code] } cancreate
wrapper=function cancreate
wrapper() { [native code] } cancallmethod=function cancallmethod() { [native code] } cangetproperty=function cangetproperty() { [native code] } cansetproperty=function cansetproperty() { [native code] } ...
Observer Notifications
ager-ui-done called when the list of downloads in the download manager windows finishes updating. this can happen multiple times, such as when the window first opens, when multiple items are removed, and when entering private browsing mode. download-manager-remove-download called when a download of the list is removed or all the list is cleared. the subject will be the download id
wrapped in nsisupportspruint32, for one download removed, or null for multi download remove, for example when the download list is cleared. extension manager note: these notifications are no longer available starting with gecko 2.0, instead use addonmanager.addaddonlistener() to receive similar events. this topic indicates when the extension manager performs some action. note that any actio...
nsACString
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 data with embedded null bytes. thus, the length of the data contained in the nsacstring should be determined by calling the nsacstring::length() method. the methods defined on nsacstring are implemented as inline
wrappers around the xpcom string functions, prefixed with ns_cstring. see, for example, ns_cstringgetdata. see also nsacstring::length() ns_cstringgetdata nsembedcstring ...
nsAString
ticular 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 hold data with embedded null values. thus, the length of the data contained in the nsastring should be determined by calling the nsastring::length method. the methods defined on nsastring are implemented as inline
wrappers around the xpcom string functions, prefixed with ns_string. see, for example, ns_stringgetdata. see also nsastring::length, endreading, ns_stringgetdata, nsembedstring ...
nsAString (External)
class declaration this header provides
wrapper classes around the frozen string api which are roughly equivalent to the internal string classes. <map id="classes" name="classes"> <area alt="" coords="963,6,1045,54" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,676,246" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,246" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="937,1...
nsDependentCSubstring
it is the client code's responsibility to ensure that the external buffer remains valid for a long as the string is alive. ...
nsDependentSubstring
it is the client code's responsibility to ensure that the external buffer remains valid for a long as the string is alive. ...
nsEmbedCString
] an alias for the abstract string type this class specializes. methods nsembedcstring constructors for nsembedcstring. get the get function returns a const pointer to the string's null-terminated, internal buffer. operators operator= this operator is a shortcut for the inherited nsacstring::assign family of functions. remarks the methods defined on nsembedcstring are implemented as inline
wrappers around the xpcom string functions, prefixed with ns_cstring. see, for example, ns_cstringcontainerinit. see also ns_cstringcontainerinit, nsacstring ...
nsEmbedString
string] an alias for the abstract string type this class specializes. methods nsembedstring constructors for nsembedstring. get the get function returns a const pointer to the string's null-terminated, internal buffer. operators operator= this operator is a shortcut for the inherited nsastring::assign family of functions. remarks the methods defined on nsembedstring are implemented as inline
wrappers around the xpcom string functions, prefixed with ns_string. see, for example, ns_stringcontainerinit. see also ns_stringcontainerinit, nsastring ...
RefPtr
245) 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<nsisupports> a; nscomptr<nsifoo> foo; and for concrete c...
XPCOM glue classes
245) 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. ...
jsdIStackFrame
it will result in an ns_error_illegal_value. opt_* values above, or'd together. last version set on this context. scripts typically select this with the "language" attribute. see the version_* consts on jsdidebuggerservice. unique tag among all valid jsdicontext objects, useful as a hash key. private data for this context, if it is an nsisupports, |null| otherwise. retrieve the underlying context
wrapped by this jsdicontext. top of the scope chain for this context. |true| if this context should be allowed to run scripts, |false| otherwise. this attribute is only valid for contexts which implement nsiscriptcontext. setting or getting this attribute on any other context will throw a ns_error_no_interface exception. stack frame objects. these are only valid inside the jsdiexecutionhook which gave...
mozIRegistry
s the new interface that will surface essentially the same function as is currently provided by libreg (aka "netscape registry") as declared in mozilla/modules/libreg/include/nsreg.h. clients will obtain this interface via the service manager (see mozilla/xpcom/public/nsiservicemanager.h). mozregistry this is the simplistic implementation of the moziregistry interface. it is built as a simple c
wrapper for the functions in nsreg.h. it is intended to provide a (slightly) lighter-weight implementation that is entirely compatible with current libreg usage. mozrdfregistry this is an rdf-based moziregistry implementation that will provide additional capabilities. note that these additional capabilities will not be utilized by nsrepository. it is envisioned that there will be multiple flavors of...
mozIStorageFunction
getter_addrefs(stmt) ); ns_ensure_success(rv, rv); prbool hasmore; while (ns_succeeded(stmt->executestep(&hasmore)) && hasmore) { // handle the results } see also storage introduction and how-to article mozistorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database. mozistoragevaluearray
wraps an array of sql values, such as a result row. mozistorageaggregatefunction create a new sqlite aggregate function. mozistorageprogresshandler monitor progress during the execution of a statement. mozistoragestatement
wrapper storage statement
wrapper ...
mozIStorageValueArray
o article mozistorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database. mozistoragefunction create a new sqlite function. mozistorageaggregatefunction create a new sqlite aggregate function. mozistorageprogresshandler monitor progress during the execution of a statement. mozistoragestatement
wrapper storage statement
wrapper ...
mozITXTToHTMLConv
on 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 attributes, such as converting "*some text*" to boldfaced "some text" by
wrapping in the html <strong> element. kurls unsigned long enables automatic addition of hyperlinks for urls in the text. methods scantxt() scans the specified text, applying the requested conversions and outputting html. wstring scantxt( in wstring text, in unsigned long whattodo ); parameters text the original, plain text to scan and convert into html. whattodo a...
nsIAlertsService
ame, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([optional] in astring name, [optional] in nsiprincipal principal); methods showalertnotification() displays a notification window. note: if you are calling this function from javascript, you should
wrap it in a try/catch because it can fail on mac os x prior to firefox 22. void showalertnotification( in astring imageurl, in astring title, in astring text, in boolean textclickable, optional in astring cookie, optional in nsiobserver alertlistener, optional in astring name, optional in astring dir, optional in astring lang, optional in astring data, optional in nsiprincipal ...
nsIAppShellService
nce gecko 1.8 controls whether the window should try to load a default content page on its own. achromemask chrome flags affecting the kind of os border given to the window. (see nsibrowserwindow for bit/flag definitions). ainitialwidth width, in pixels, of the window. width of window at creation. can be overridden by the "width" tag in the xul. set to ns_sizetocontent to force the window to
wrap to its contents. ainitialheight height, in pixels, of the window. height of window at creation. can be overridden by the "height" tag in the xul. set to ns_sizetocontent to force the window to
wrap to its contents. aappshell a widget "appshell" (event processor) to associate with the new window. return value returns the newly created window. destroyhiddenwindow() destroys a hidden windo...
nsIAuthPromptAdapterFactory
netwerk/base/public/nsiauthpromptadapterfactory.idlscriptable an interface for
wrapping nsiauthprompt interfaces to make them usable via an nsiauthprompt2 interface. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview nsiauthprompt2 createadapter(in nsiauthprompt aprompt); methods createadapter()
wrap an object implementing nsiauthprompt so that it's usable via nsiauthprompt2. nsiauthprompt2 createadapter( in nsiauthprompt aprompt ); parameters aprompt the nsiauthprompt to
wrap. return value an nsiauthprompt2. see also nsiauthprompt nsiauthprompt2 ...
nsICommandLineHandler
g/browser/clh-final;1 method overview void handle(in nsicommandline acommandline); attributes attribute type description helpinfo autf8string when the application is launched with the -help argument, this attribute is retrieved and displayed to the user (on stdout). the text should have embedded newlines which
wrap at 76 columns, and should include a newline at the end. by convention, the right column which contains flag descriptions begins at the 24th character. read only. methods handle() processes a command line. if this handler finds arguments that it understands, it should perform the appropriate actions (such as opening a window), and remove the arguments from the command-line array. void han...
nsIConverterInputStream
this allows reading unicode strings from a stream, automatically converting the bytes from a selected character encoding. 1.0 66 introduced gecko 1.8 inherits from: nsiunicharinputstream last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/converter-input-stream;1. ...
nsIDOMWindowInternal
pened and the specified resource is loaded into its browsing context.">open(in domstring url, in domstring name, in domstring options) nsidomwindow nsisupports aextraargument) void close() void updatecommands(in domstring action) boolean find([optional] in domstring str,[optional] in boolean casesensitive, [optional] in boolean backwards, [optional] in boolean
wraparound, [optional] in boolean wholeword, [optional] in boolean searchinframes, [optional] in boolean showdialog) domstring atob(in domstring aasciistring) domstring btoa(in domstring abase64data) nsivariant showmodaldialog(in nsivariant aargs, [optional] in domstring aoptions) void postmessage(in domstring message, in domstring targetorigin) attributes ...
nsIHttpServer
; } 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.org/file/local;1'] .createinstance(components.interfaces.nsilocalfile); file.initwithpath(filepath); return server.registerfile(path, file); }, registerdirectory...
nsIMessageBroadcaster
es 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 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. ...
nsIMessageListener
me. this is the first argument passed into the message-sending function. sync true if the message was sent using sendsyncmessage, false otherwise. data a structured clone of the message payload: the second argument passed into the message-sending function. json same as data. deprecated. objects an object whose properties are any cross process object
wrappers exposed by the sender as the third argument to the message-sending function. principal principal for the window app. each listener is invoked with its own copy of the message parameter. when the listener is called, 'this' value is the target of the message. if the message is synchronous, the possible return value is returned as json (will be changed to use structured clon...
nsIMessageSender
es 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 the objects property of the received message, with each original object replaced with a cross process object
wrapper for it. principal nsiprincipal ...
nsIMessageWakeupService
ame of interface to instantiate the component as (e.g. "nsimyinterface"). the method to call to instantiate the component (either "getservice" or "createinstance"). a comma-separated list of messages for which your component should be instantiated. alternatively, it is possible to register a wakeup entry programmatically via the nsicategorymanager interface. currently, services must expose a
wrappedjsobject in order to support this; however, once bug 593407 is fixed, the service to be woken up must implement nsiframemessagelistener. ...
nsIMsgHeaderParser
to parse. aemailaddresses missing description anames missing description afullnames missing description count missing description exceptions thrown missing exception missing description native code only!reformatheaderaddresses given a string which contains a list of header addresses, returns a new string with the same data, but inserts missing commas, parses and reformats it, and
wraps long lines with newline-tab. string reformatheaderaddresses( in string line ); parameters line the header line to parse. return value the reformatted header line. exceptions thrown missing exception missing description reformatunquotedaddresses() given a string, will make it safe to use by adding missing quote and escaping needed quote wstring reformatunquotedaddresses( in...
nsIMsgWindow
the message pane. this is equivalent to calling loaduri on the nsiwebnavigation object with a data: url specifying the html. void displayhtmlinmessagepane(in astring title, in astring body, in boolean clearmsghdr); parameters title not used. body the html to display in the message pane. note that the html is
wrapped in <html> and <body> tags for you. clearmsghdr whether or not the existing message pane and header should be cleared before the html is displayed. stopurls() this is equivalent to calling stop(nsiwebnavigation::stop_network) on the nsiwebnavigation object. void stopurls(); closewindow() when the msg window is being unloaded from the content window, this notification can be use...
nsIPluginHost
ntags = pluginhost.getplugintags(); for (let i = 0; i < plugintags.length; ++i) { let plugintag = plugintags[i]; let mimetypes = plugintag.getmimetypes(); console.warn('plugintag:', plugintag.name, 'mimetypes:', mimetypes); // go through all the mime types and get the handler service for (let j = 0; j < mimetypes.length; ++j) { let type = mimetypes[j]; let
wrappedhandlerinfo = mimeservice.getfromtypeandextension(type, null); console.log('handler info for type', type,
wrappedhandlerinfo); } } resultingagentstring ...
nsIPrefLocalizedString
modules/libpref/public/nsipreflocalizedstring.idlscriptable this interface is simply a
wrapper interface for nsisupportsstring so the preferences service can have a unique identifier to distinguish between requests for normal wide strings nsisupportsstring) and 'localized' wide strings, which get their default values from properites files. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void setdatawithlength(in unsigned long length, [size_is(length)] in wstring data); wstring tostring(); attributes attribute type description data wstring provides access to string data stored in this property. methods setdatawithlength() used to set the contents of thi...
nsIPrivateBrowsingService
npn_getvalue() function to check the current value of the npnvprivatemodebool variable. implemented by: @mozilla.org/privatebrowsing;1. to get access to the service from javascript, use: var pbs = components.classes["@mozilla.org/privatebrowsing;1"] .getservice(components.interfaces.nsiprivatebrowsingservice); c++ callers should use the contract id @mozilla.org/privatebrowsing-
wrapper;1 instead. method overview void removedatafromdomain(in autf8string adomain); attributes attribute type description autostarted boolean indicates whether or not private browsing was started automatically at application launch time. this is only ever true if privatebrowsingenabled is also true. read only. ...
nsIScriptableInputStream
is incapable of expressing the entire size of the underlying data source. unsigned long available(); parameters none. return value the number of bytes. exceptions thrown ns_base_stream_closed if called after the stream has been closed. close() closes the stream. note: the close method may be called more than once, but subsequent calls are ignored. void close(); parameters none. init()
wrap the given nsiinputstream with this nsiscriptableinputstream. note: the init method may be called more than once, allowing a nsiscriptableinputstream instance to be reused. void init( in nsiinputstream ainputstream ); parameters ainputstream the nsiinputstream to be
wrapped. read() read data from the stream. warning: if the data contains a null byte, then this method will return ...
nsISearchSubmission
netwerk/base/public/nsibrowsersearchservice.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) attributes attribute type description postdata nsiinputstream the post data associated with a search submission,
wrapped in a mime input stream. may be null. read only. uri nsiuri the uri to submit a search to. read only. ...
nsIStructuredCloneContainer
; attributes attribute type description formatversion unsigned long get the version of the structured clone algorithm which was used to generate this container's serialized buffer. read only. serializednbytes unsigned long long get the size in bytes of this container's serialized data. read only. methods deserializetovariant() deserialize the object this container holds, returning it
wrapped as an nsivariant. nsivariant deserializetovariant(); parameters none. return value an nsivariant. getdataasbase64() get this structured clone container's data as a base-64-encoded string. astring getdataasbase64(); parameters none. return value a base-64-encoded string. initfrombase64() initialize this structured clone container from a base-64-encoded byte stream. void initfrombase64( in a...
nsITXTToHTMLConv
@mozilla.org/streamconv;1?from=text/plain&to=text/html". you should normally obtain an instance via the nsistreamconverterservice interface. method overview void preformathtml(in boolean value); void settitle(in wstring text); prior versions of the interface named the methods using the initialcaps style instead of the intercaps style. methods preformathtml() specifies whether or not to
wrap the resulting html in an <pre> block. void preformathtml( in boolean value ); parameters value true to
wrap the resulting html in a <pre> block. settitle() sets the title to use on the resulting html document. void settitle( in wstring text ); parameters text title to set for the html document. ...
nsITaskbarProgress
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 setprogressstate(in nstaskbarprogressstate state, in unsigned long long currentvalue optional, in unsigned long long maxvalue optional); constants constant value description state_no_progress 0 stop displaying progress on the taskbar button. ...
nsIWebBrowserFind
search through all frames in the content area. default is true. note: that you can control whether the search propagates into child or parent frames explicitly using nsiwebbrowserfindinframes, but if one, but not both, of searchsubframes and searchparentframes are set, this returns false. searchstring wstring the string to search for. this must be non-empty to search.
wrapfind boolean whether the search
wraps around to the start (or end) of the document if no match was found between the current position and the end (or beginning). works correctly when searching backwards. default is false. methods findnext() finds, highlights, and scrolls into view the next occurrence of the search string, using the current search settings. fails if the search string is...
nsIXmlRpcFault
obsolete since gecko 1.9 (firefox 3)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. extensions/xml-rpc/idl/nsixmlrpcclient.idlscriptable an xml-rpc exception. xml-rpc server fault codes are returned
wrapped in this; access it using nsixpconnect.getpendingexception->data. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void init(in print32 faultcode, in string faultsring); string tostring(); attributes attribute type description faultcode print32 read only. faultstring string read only. methods init() void getdata( in print32 fa...
nsIZipReader
ns path to file in zip, and it uses forward slashes remember) var entry = zr.getentry(entrypointer); // should return true on `entry instanceof ci.nsizipentry` console.log('entrypointer', entrypointer); /* console output * "entrypointer" "bootstrap.js" scratchpad/1:18 */ console.info('entry', entry); /* console output * "entry" xpc
wrappednative_nohelper { queryinterface: queryinterface(), compression: getter, size: getter, realsize: getter, crc32: getter, isdirectory: getter, lastmodifiedtime: getter, issynthetic: getter, permissions: getter, compression: 8 } scratchpad/1:19 */ if (!entry.isdirectory) { var inputstream = zr.getinputstream(entrypointer); reusablestreaminstance.init(inputs...
NS_CStringAppendData
a raw character array to copy into 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. return values the ns_cstringappenddata function returns ns_ok if successful. otherwise, it returns an error code. remarks this function is defined inline as a
wrapper around ns_cstringsetdatarange. example nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello"); ns_cstringappenddata(str, " world"); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello world" ns_cstringcontainerfinish(str); history this function was frozen for mozilla 1.7. see bug 239123 for details. see also ns_...
NS_CStringCutData
[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. pass pr_uint32_max to specify the length from acutstart to the end of the string. return values the ns_cstringcutdata function returns ns_ok if successful. otherwise, it returns an error code. remarks this function is defined inline as a
wrapper around ns_cstringsetdatarange . example code nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello world"); // remove " world" portion of string ns_cstringcutdata(str, 5, pr_uint32_max); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello" ns_cstringcontainerfinish(str); history this function was froz...
NS_CStringInsertData
[in] a raw character array to copy into 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. return values the ns_cstringinsertdata function returns ns_ok if successful. otherwise, it returns an error code. remarks this function is defined inline as a
wrapper around ns_cstringsetdatarange. example code nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello"); ns_cstringinsertdata(str, 5, " world"); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello world" ns_cstringcontainerfinish(str); history this function was frozen for mozilla 1.7. see bug 239123 for det...
NS_StringAppendData
in] a raw character array to copy into 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. return values the ns_stringappenddata function returns ns_ok if successful. otherwise, it returns an error code. remarks this function is defined inline as a
wrapper around ns_stringsetdatarange note: gcc requires the -fshort-wchar option to compile this example since prunichar is an unsigned short. this example should compile by default under msvc. example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello"); ns_stringappenddata(str, l" world"); const prunichar* data; ns_stringgetdata(str, &data); //...
NS_StringCutData
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. pass pr_uint32_max to specify the length from acutstart to the end of the string. return values the ns_stringcutdata function returns ns_ok if successful. otherwise, it returns an error code. remarks this function is defined inline as a
wrapper around ns_stringsetdatarange. note: gcc requires the -fshort-wchar option to compile this example since prunichar is an unsigned short. this example should compile by default under msvc. example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello world"); // remove " world" portion of string ns_stringcutdata(str, 5, pr_uint32_max); const pru...
NS_StringInsertData
in] a raw character array to copy into 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. return values the ns_stringinsertdata function returns ns_ok if successful. otherwise, it returns an error code. remarks this function is defined inline as a
wrapper around ns_stringsetdatarange . note: gcc requires the -fshort-wchar option to compile this example since prunichar is an unsigned short. this example should compile by default under msvc. example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello"); ns_stringinsertdata(str, 5, l" world"); const prunichar* data; ns_stringgetdata(str, &data);...
Setting HTTP request headers
rld", false); } } }; note: the above code was changed to reflect that in a firefox add-on one can not directly access components.interfaces und components.classes anymore but must use the require line introduced to the sample code above. so where you see ci and cc in this page there used to be components.interfaces and components.classes. please also note that the code itself usually is
wrapped inside a exports.main = function() { ... } block. note that the number of parameter that the observe method takes is important. it takes 3 parameters (as we've shown in the example code above). for the "http-on-modify-request" topic, the first parameter (named subject in the code above) will be the nsihttpchannel. however, it is passed to us as an nsisupports. so we need to change the nsisuppo...
XPCOM Thread Synchronization
this article covers the api of mozilla synchronization only. for a higher-level introduction to thread synchronization, see introduction_to_nspr. ...
XPCOM tasks
nshashtable our various array classes in some cases, this might initially be provided by additional interfaces. in all cases, we want to transition the primary apis toward the standard. p2 our various enumerator classes should be made compatible with the enumerators from the standard c library, so that we can apply the standard algorithms to our containers. this is probably best done with a c
wrapper around an xpcom enumerator. p2 do we still require our own version of quicksort? and if so, can we narrow it to only those platforms that need it? p3 we need to check for aggregation in createinstance(). see bug 16763 p3 improve the performance of the registry. explore the idea of using a separate registry. 5.1 if the build hierarchy were fixed, the registry could exploit expat and dbm. it...
Creating a gloda message query
er of the message. you probably should not be using this. foldermessage: return the nsimsgdbhdr that corresponds to the message. an nsimsgdbhdr is the low-level, old-school, thunderbird xpcom representation of a message. you should not need to use this unless you are dealing with other old-school code or you need to manipulate the state of a message. in the future, the steel layer should provide
wrappers to make manipulation clean and fun. note that this message may return "null" if gloda is unable to locate the underlying message anymore. attributes provided by fundattr.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:...
LDAP Support
(the default value is 0 for no comment), and that the value for the comment is a custom string unique to each directory. the commentformat preference is set on each directory. it acts as a template, specifying 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 ...
Creating a Custom Column
erver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { addcustomcolumnhandler(); } } in this example we have a function addcustomcolumnhandler() that is called whenever the event is fired. this function is a simple one liner along the lines of: function addcustomcolumnhandler() { gdbview.addcolumnhandler("colreplyto", columnhandler); }
wrap up as you have seen it is quite easy to add your own custom column handler. most of the dirty tasks (displaying and sorting) are done for you in the background - so that all that's left to you, the extension developer is to populate the code with your feature. don't forget that columns aren't restricted to text - they can also load images (via getimagesrc()) so that your extension can display a...
Using Objective-C from js-ctypes
ck. reading the apple developer :: programming with objective-c - working with blocks you can learn more about blocks. to create a block with js-ctypes, use the function: function createblock(afunctypeptr) { /** * creates a c block instance from a js function. * blocks are regular objective-c objects in obj-c, and can be sent messages; * thus block instances need are creted using the core.
wrapid() function. */ // apple docs :: working with blocks - https://developer.apple.com/library/ios/documentation/cocoa/conceptual/programmingwithobjectivec/workingwithblocks/workingwithblocks.html var _nsconcreteglobalblock = ctypes.open(ctypes.libraryname('objc')).declare('_nsconcreteglobalblock', ctypes.voidptr_t); // //github.com/realityripple/uxp/blob/master/js/src/ctypes/library.cpp?offset...
Declaring and Using Callbacks
funcptrtype(); var callback = funcptrtype(myjscallback); js-ctypes detects that funcptrtype is a type of function pointer, and adds a special case to its constructor. in the ordinary case, invoking the type object creates a regular cdata object containing a pointer to the data. however, if the first argument is a function, js-ctypes creates a special object (known internally as a cclosure) that
wraps the javascript function within an ordinary c function. this can all be done in a single line of code, like so: var callback = ctypes.functiontype(...).ptr(function(...) {...}); note: the use of .ptr() here isn't a method call; we're accessing a property that dynamically creates a callable object, and then invoking the result. if two arguments are passed to the callback constructor, the secon...
ctypes
4-bit integer. uint64_t unsigned 64-bit integer. float32_t 32-bit floating-point value. float64_t 64-bit floating-point value. note: some 64-bit values are outside the range of numeric values supported by javascript. because of this, ctypes.int64 and ctypes.uint64 do not automatically convert to javascript numbers. instead, they convert to objects of the
wrapper types ctypes.int64 and ctypes.uint64, which are javascript objects rather than cdata objects. see 64-bit integers for details. types that act like specific c types these types are designed to work exactly like the corresponding type on the native platform. type description bool a boolean type that behaves like the corresponding c type on the platform. short ...
Debugger.Script - Firefox Developer Tools
f the instance refers to a jsscript, the length, in characters, of this script’s code within the debugger.source instance given by source. if the instance refers to webassembly code, throw a typeerror. global if the instance refers to a jsscript, a debugger.object instance referring to the global object in whose scope this script runs. the result refers to the global directly, not via a
wrapper or a windowproxy (“outer window”, in firefox). if the instance refers to webassembly code, throw a typeerror. format if the instance refers to a jsscript, "js". if the instance refers to webassembly code, "wasm". function properties of the debugger.script prototype object the functions described below may only be called with a this value referring to a debugger.script instan...
Debugger - Firefox Developer Tools
t. return this debugger’s debugger.object instance referring to the designated global. the valueglobal may be any of the following: a global object. an html5 windowproxy object (an “outer window”, in firefox terminology), which is treated as if the window object of the browsing context’s active document (the “inner window”) were passed. a cross-compartment
wrapper of an object; we apply the prior rules to the
wrapped object. a debugger.object instance belonging to this debugger instance; we apply the prior rules to the referent. any other sort of value is treated as a typeerror. (note that each rule is only applied once in the process of resolving a givenglobal argument. thus, for example, a debugger.object referring to a second debugg...
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
debugger; // this makes hacking on the demo *much* more // pleasant. dbg.uncaughtexceptionhook = handleuncaughtexception; // find the current tab's main content window. var w = gbrowser.selectedbrowser.contentwindow; console.log("tracking allocations in page: " + w.location.href); // make that window a debuggee of our debugger. dbg.adddebuggee(w.
wrappedjsobject); // enable allocation tracking in dbg's debuggees. dbg.memory.trackingallocationsites = true; } window.demoplotallocations = function() { // grab the allocation log. var log = dbg.memory.drainallocationslog(); // neutralize the debugger, and drop it on the floor // for the gc to collect. console.log("stopping allocation tracking."); dbg.removeall...
Debugger-API - Firefox Developer Tools
in the page’s context. showing how many objects different call paths allocate. gecko-specific features while the debugger core api deals only with concepts common to any javascript implementation, it also includes some gecko-specific features: [global tracking][global] supports debugging all the code running in a gecko instance at once—the ‘chrome debugging’ model. [object
wrapper][
wrapper] functions help manipulate object references that cross privilege boundaries. source metadata generated from file: js/src/doc/debugger/debugger-api.md watermark: sha256:6ee2381145a0d2e53d2f798f3f682e82dd7ab0caa0ac4dd5e56601c2e49913a7 changeset: ffa775dd5bd4 ...
Migrating from Firebug - Firefox Developer Tools
cally and not grouped (see bug 977128) and there is no option to hide the mozilla specific styles, therefore there is an input field allowing to filter the properties. inspect events events assigned to an element are displayed in the events side panel in firebug. in the devtools they are shown when clicking the small 'ev' icon besides an element within the node view. both tools allow to display
wrapped event listeners (e.g. listeners
wrapped in jquery functions). to improve the ui of the devtools, there is also a request to add an events side panel to 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 javasc...
Edit Shape Paths in CSS - Firefox Developer Tools
a different editor. note that the shape path editor does not persist between page reloads — if you reload your page you will need to select the element again. understanding the lines drawn by the editor once you have selected a shape on your page, the shape path editor will draw lines to help you understand the path that is being created. a solid line shows the outline of the shape that is
wrapping the text. this is your shape. if the shape is clipped by the margin box then the margin box will make up part of this line. a dashed line demonstrates the outline of the shape which extends past the margin box reference; this is the area that will be clipped by the margin box. to understand the margin box, and other boxes used by css shapes see our guide to shapes from box values. editin...
Animation inspector example: CSS transitions - Firefox Developer Tools
{ padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: no
wrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.targ...
Animation inspector example: Web Animations API - Firefox Developer Tools
">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: no
wrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; ...
View Source - Firefox Developer Tools
age source press ctrl + u on windows and linux, or cmd + u on macos the command opens a new tab with the source for the current page. view source features view source has three additional features, which can be accessed from the context menu in the view source tab: go to line scrolls to the specified line. if the number is higher than the lines in a file, you receive an error message.
wrap long lines (toggle)
wraps long lines to the width of the page. syntax highlighting (toggle) applies syntax highlighting to the code.when syntax highlighting is on, view source also highlights parsing errors in red. hovering your mouse over errors displays a tooltip explaining the error. this feature is useful when you're looking for html errors. to access go to line from the keyboard, pre...
AesCbcParams - Web APIs
properties name a domstring. this should be set to aes-cbc. iv a buffersource. the initialization vector. must be 16 bytes, unpredictable, and preferably cryptographically random. however, it need not be secret (for example, it may be transmitted unencrypted along with the ciphertext). ...
AesGcmParams - Web APIs
for details of how to supply appropriate values for this parameter, see the specification for aes-gcm: nist sp800-38d, in particular section 5.2.1.1 on input data. properties name a domstring. this should be set to aes-gcm. iv a buffersource — the initialization vector. ...
AudioNode - Web APIs
alysernode.smoothingtimeconstant = 0.5; you are free to use either constructors or factory methods, or mix both, however there are advantages to using the constructors: all parameters can be set during construction time and don't need to be set individually. you can sub-class an audio node. while the actual processing is done internally by the browser and cannot be altered, you could write a
wrapper around an audio node to provide custom properties and methods. slightly better performance: in both chrome and firefox, the factory methods call the constructors internally. keep in mind that microsoft edge does not yet appear to support the constructors; it will throw a "function expected" error when you use the constructors. brief history: the first version of the web audio spec only def...
Basic animations - Web APIs
stify-content: center; align-self: center; align-items: center; font-size: -webkit-xxx-large; font-weight: 900; color: #fff; transition: .5s; opacity: .1; border-radius: 7px } .keypress { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; flex-
wrap:
wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>div:hover { opacity: 1 } .touch { background: #8bc34a } .off { background: #f44336 } .hide { opacity: 0 } </style> </html> javascript function tmz() { var e = new date(t), i = new date, n =...
CryptoKeyPair - Web APIs
y object representing the public key. for encryption and decryption algorithms, this key is used to encrypt. for signing and verification algorithms it is used to verify signatures. examples the examples for subtlecrypto methods often use cryptokeypair objects. for example: subtlecrypto.generatekey() subtlecrypto.derivekey() subtlecrypto.importkey() subtlecrypto.exportkey() subtlecrypto.
wrapkey() subtlecrypto.un
wrapkey() subtlecrypto.encrypt() subtlecrypto.decrypt() subtlecrypto.sign() subtlecrypto.verify() specifications specification status comment web cryptography apithe definition of 'cryptokeypair' in that specification. recommendation initial definition. ...
Document.documentURIObject - Web APIs
document.documenturiobject read-only property returns an nsiuri object representing the uri of the document. this only works for privileged (universalxpconnect) scripts, including extension code. for web content this property doesn't have any special meaning and can be used just like any other custom property. privileged code must be careful not to try getting or setting this property on a non-
wrapped content object (e.g., on a
wrappedjsobject of an xpcnative
wrapper). see bug 324464's comments for details. syntax var uri = document.documenturiobject; example // check that the uri scheme of the current tab in firefox is 'http', // assuming this code runs in context of browser.xul let uriobj = content.document.documenturiobject; let uriport = uriobj.port; if (uriobj.schemeis('http')) { ...
Document.execCommand() - Web APIs
n integer from 1-7 as a value argument. forecolor changes a font color for the selection or at the insertion point. this requires a hexadecimal color value string as a value argument. formatblock adds an html block-level element around the line containing the current selection, replacing the block element containing the line if one exists (in firefox, <blockquote> is the exception — it will
wrap any containing block element). requires a tag-name string as a value argument. virtually all block-level elements can be used. (internet explorer and edge support only heading tags h1–h6, address, and pre, which must be
wrapped in angle brackets, such as "<h1>".) forwarddelete deletes the character ahead of the cursor's position, identical to hitting the delete key on a windows keyboard. hea...
Document.open() - Web APIs
ko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin. starting with gecko 1.9.2, document.open() uses the principal of the document whose uri it uses, instead of fetching the principal off the stack. as a result, you can no longer call document.write() into an untrusted document from chrome, even using
wrappedjsobject. see security check basics for more about principals. three-argument document.open() there is a lesser-known and little-used three-argument version of document.open() , which is an alias of window.open() (see its page for full details). this call, for example opens github.com in a new window, with its opener set to null: document.open('https://www.github.com','', 'noopener=true') ...
EXT_shader_texture_lod - Web APIs
ext(sampler2d sampler, vec2 p, vec2 dpdx, vec2 dpdy) vec4 texture2dprojgradext(sampler2d sampler, vec3 p, vec2 dpdx, vec2 dpdy) vec4 texture2dprojgradext(sampler2d sampler, vec4 p, vec2 dpdx, vec2 dpdy) vec4 texturecubegradext(samplercube sampler, vec3 p, vec3 dpdx, vec3 dpdy) examples enabling the extensions: gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when
wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications ...
EcKeyImportParams - Web APIs
properties name a domstring. this should be set to ecdsa or ecdh, depending on the algorithm you want to use. namedcurve a domstring representing the name of the elliptic curve to use. ...
Element.innerHTML - Web APIs
replace the existing contents of an element with new content. for example, you can erase the entire contents of a document by clearing the contents of the document's body attribute: document.body.innerhtml = ""; this example fetches the document's current html markup and replaces the "<" characters with the html entity "<", thereby essentially converting the html into raw text. this is then
wrapped in a <pre> element. then the value of innerhtml is changed to this new string. as a result, the document contents 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 s...
Element.scrollWidth - Web APIs
to clientwidth this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). syntax var xscrollwidth = element.scrollwidth; xscrollwidth is the width of the content of element in pixels. ...
FileException - Web APIs
u might encounter while accessing the file system using the synchronous api. it extends the fileexception interface described in file writer and adds several new error codes. basic concepts synchronous apis do not have error callbacks, which makes it difficult to catch errors. the added complexity of using webworkers with this api makes debugging even more challenging. to simplify things a bit,
wrap your worker code in a try/catch. 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 a...
HTMLImageElement.alt - Web APIs
vivamus consectetur rhoncus elit eget porta. etiam pulvinar ex id sapien laoreet, quis aliquet odio lobortis. nam ac mauris at risus laoreet cursus vitae et sapien. etiam molestie auctor eros, ac porta risus scelerisque sit amet. ut nunc neque, porta eu auctor at, tempor et arcu. </p> </div> css the main feature of the css here is the use of clip-path and shape-outside to
wrap the text around the icon in an appealing way. .container { max-width: 500px; } .pageinfo-badge { width: 9em; padding-right: 1em; float: left; clip-path: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); shape-outside: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); } .contents { margin-top: 1em; f...
HTMLImageElement.srcset - Web APIs
<img src="/files/16797/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x"> </div> css the css simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. also provided is the word-break attribute, using the break-all value to tell the browser to
wrap the string within the width available regardless of where in the string the
wrap must occur. .box { width: 200px; border: 2px solid rgba(150, 150, 150, 255); padding: 0.5em; word-break: break-all; } .box img { width: 200px; } javascript the following code is run within a handler for the window's load event. it uses the image's currentsrc property to fetch and display the url selec...
Using microtasks in JavaScript with queueMicrotask() - Web APIs
ction run without the risk of interfering with another script's execution, yet also ensures that the microtask runs before the user agent has the opportunity to react to actions taken by the microtask. javascript promises and the mutation observer api both use the microtask queue to run their callbacks, but there are other times when the ability to defer work until the current event loop pass is
wrapping up. in order to allow microtasks to be used by third-party libraries, frameworks, and polyfills, the queuemicrotask() method is exposed on the window and worker interfaces through the windoworworkerglobalscope mixin. tasks vs microtasks to properly discuss microtasks, it's first useful to know what a javascript task is and how microtasks differ from tasks. this is a quick, simplified explan...
HmacImportParams - Web APIs
properties name a domstring. this should be set to hmac. hash a domstring representing the name of the digest function to use. the can take a value of sha-256, sha-384, or sha-512. warning: although you can technically pass sha-1 here, this is strongly discouraged as it is considered vulnerable. length optional a number representing the length in bits of the key. ...
KeyboardEvent.code - Web APIs
et spaceship = document.getelementbyid("spaceship"); next comes the function updateposition(). this function takes as input the distance the ship is to be moved, where positive is a forward movement and negative is a backward movement. this function computes the new position of the ship given the distance moved and the current direction the ship is facing. it also handles ensuring that the ship
wraps across the boundaries of the play field instead of vanishing. function updateposition(offset) { let rad = angle * (math.pi/180); position.x += (math.sin(rad) * offset); position.y -= (math.cos(rad) * offset); if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) ...
Location - Web APIs
an>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:no
wrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title...
MediaDevices.getUserMedia() - Web APIs
t get ahold of the legacy getusermedia, if present var getusermedia = navigator.webkitgetusermedia || navigator.mozgetusermedia; // some browsers just don't implement it - return a rejected promise with an error // to keep a consistent interface if (!getusermedia) { return promise.reject(new error('getusermedia is not implemented in this browser')); } // otherwise,
wrap the call to the old navigator.getusermedia with a promise return new promise(function(resolve, reject) { getusermedia.call(navigator, constraints, resolve, reject); }); } } navigator.mediadevices.getusermedia({ audio: true, video: true }) .then(function(stream) { var video = document.queryselector('video'); // older browsers may not have srcobject if ("srcobject" in video) ...
MediaRecorder() - Web APIs
t is adaptive, depending upon the sample rate and the number of channels. exceptions notsupportederror the specified mime type is not supported by the user agent. example this example shows how to create a media recorder for a specified stream, whose audio bit rate is set to 128 kbit/sec and whose video bit rate is set to 2.5 mbit/sec. the recorded media data will be stored in an mp4
wrapper (so if you gather the chunks of media data and save them to disk, they will be in an mp4 file). ... if (navigator.mediadevices.getusermedia) { var constraints = { audio: true, video: true }; var chunks = []; var onsuccess = function(stream) { var options = { audiobitspersecond : 128000, videobitspersecond : 2500000, mimetype : 'video/mp4' } var mediarecord...
Recording a media element - Web APIs
edia element (namely <audio> or <video>) as the source of the mediastream to be recorded. in this article, we'll look at an example that does just that. html content <p>click the "start" button to begin video recording for a few seconds. you can stop the video by clicking the creatively-named "stop" button. the "download" button will download the received data (although it's in a raw, un
wrapped form that isn't very useful). </p> <br> let's start by looking at the key bits of the html. there's a little more than this, but it's just informational rather than being part of the core operation of the app. <div class="left"> <div id="startbutton" class="button"> start </div> <h2>preview</h2> <video id="preview" width="160" height="120" autoplay muted></video> </div> we...
Node.isConnected - Web APIs
nsole.log(test.isconnected); // returns false document.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .
wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; positions: absolute; bottom: 20px; left: 10px; z-index: 3 } `; // attach the created style element to the shadow dom shadow.appendchild(style); console.log(style.i...
Node - Web APIs
ontent) } }) the above will result in the following strings printing to the user's console: "\n\t", "foo", "\n\t", "bar", "\n\t", "baz" note: whitespace forms part of a text node, meaning indentation and newlines form separate text between the element nodes. realistic usage the following demonstrates a real-world use of the eachnode() function: searching for text on a web-page. ...
PaymentRequest.canMakePayment() - Web APIs
ng the request using the paymentrequest constructor. if the payment can't be processed, the promise receives a value of false. note: if you call this too often, the browser may reject the returned promise with a domexception. parameters none examples in the following example, is excerpted from a demo that asynchronously builds a paymentrequest object for both apple pay and credit cards. it
wraps the call to canmakepayment() in feature detection, and calls an appropriate callback depending on the resolution of the promise. async function initpaymentrquest() { const details = { total: { label: "total", amount: { currency: "usd", value: "0.00", }, }, }; const supportsapplepay = new paymentrequest( [{ supportedmethods: "https://apple.co...
Pointer Lock API - Web APIs
ner("mousemove", updateposition, false); } else { console.log('the pointer lock status is now unlocked'); document.removeeventlistener("mousemove", updateposition, false); } } the updateposition() function updates the position of the ball on the canvas (x and y), and also includes if() statements to check whether the ball has gone off the edges of the canvas. if so, it makes the ball
wrap around to the opposite edge. it also includes a check whether a requestanimationframe() call has previously been made, and if so, calls it again as required, and calls the canvasdraw() function that updates the canvas scene. a tracker is also set up to write out the x and y values to the screen, for reference. var tracker = document.getelementbyid('tracker'); var animation; function updateposit...
RsaHashedImportParams - Web APIs
properties name a domstring. this should be set to rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep, depending on the algorithm you want to use. hash a domstring representing the name of the digest function to use. this can be one of sha-256, sha-384, or sha-512. ...
RsaOaepParams - Web APIs
properties name a domstring. this should be set to rsa-oaep. label optional a buffersource — an array of bytes that does not itself need to be encrypted but which should be bound to the ciphertext. a digest of the label is part of the input to the encryption operation. ...
SVGFEConvolveMatrixElement - Web APIs
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 interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes. svgfeconvolvematrixelement.in1 read only an svganimatedstring corresponding to the in attribute of the given element. svgf...
SVGFEGaussianBlurElement - Web APIs
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 interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes. svgfegaussianblurelement.in1 read only an svganimatedstring corresponding to the in attribute of the given element. svgfeg...
SubtleCrypto.encrypt() - Web APIs
{ let encoded = getmessageencoding(); // counter will be needed for decryption counter = window.crypto.getrandomvalues(new uint8array(16)); return window.crypto.subtle.encrypt( { name: "aes-ctr", counter, length: 64 }, key, encoded ); } let iv = new uint8array(16); let key = new uint8array(16); let data = new uint8array(12345); //crypto functions are
wrapped in promises so we have to use await and make sure the function that //contains this code is an async function //encrypt function wants a cryptokey object const key_encoded = await crypto.subtle.importkey( "raw", key.buffer, 'aes-ctr' , false, ["encrypt", "decrypt"]); const encrypted_content = await window.crypto.subtle.encrypt( { name: "aes-ctr", counter: iv, len...
SubtleCrypto.exportKey() - Web APIs
ts a key: that is, it takes as input a cryptokey object and gives you the key in an external, portable format. to export a key, the key must have cryptokey.extractable set to true. keys can be exported in several formats: see supported formats in the subtlecrypto.importkey() page for details. keys are not exported in an encrypted format: to encrypt keys when exporting them use the subtlecrypto.
wrapkey() api instead. syntax const result = crypto.subtle.exportkey(format, key); parameters format is a string value describing the data format in which the key should be exported. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublickeyinfo format. jwk: json web key format. key is the cryptokey to export. return value result i...
WakeLock.request() - Web APIs
exceptions notallowederror thrown when wake lock is not available, which can happen because: document is not allowed to use screen wake lock due to screen-wake-lock policy. document is not fully active. document is hidden. user agent could not acquire platform's wake lock. examples the following asynchronous function requests a wakelocksentinel object. the request() method is
wrapped in a try...catch statement to account for if the browser refuses the request for any reason. const requestwakelock = async () => { try { const wakelock = await navigator.wakelock.request('screen'); } catch (err) { // the wake lock request fails - usually system related, such low as battery console.log(`${err.name}, ${err.message}`); } } requestwakelock(); specification...
WakeLock - Web APIs
e screens from dimming or locking when an application needs to keep running. the system wake lock is exposed through the global navigator.wakelock property. methods request requests a wakelocksentinel object, which returns a promise that resolves with a wakelocksentinel object. examples the following asynchronous function requests a wakelocksentinel object. the wakelock.request method is
wrapped in a try...catch statement to account for if the browser refuses the request for any reason. const requestwakelock = async () => { try { const wakelock = await navigator.wakelock.request('screen'); } catch (err) { // the wake lock request fails - usually system related, such low as battery console.log(`${err.name}, ${err.message}`); } } requestwakelock(); specification...
WebGL2RenderingContext.getSamplerParameter() - Web APIs
um indicating the texture comparison mode. gl.texture_mag_filter: returns a glenum indicating the texture magnification filter. gl.texture_max_lod: returns a glfloat indicating the maximum level-of-detail value. gl.texture_min_filter: returns a glenum indicating the texture minification filter gl.texture_min_lod: returns a glfloat indicating the minimum level-of-detail value. gl.texture_
wrap_r: returns a glenum indicating the texture
wrapping function for the texture coordinate r. gl.texture_
wrap_s: returns a glenum indicating the texture
wrapping function for the texture coordinate s. gl.texture_
wrap_t: returns a glenum indicating the texture
wrapping function for the texture coordinate t. return value depends on the pname parameter, either a glenum or a glfloat. example...
WebGL2RenderingContext.samplerParameter[if]() - Web APIs
gl.texture_compare_mode: a glenum specifying the texture comparison mode. gl.texture_mag_filter: a glenum specifying the texture magnification filter. gl.texture_max_lod: a glfloat specifying the maximum level-of-detail value. gl.texture_min_filter: a glenum specifying the texture minification filter gl.texture_min_lod: a glfloat specifying the minimum level-of-detail value. gl.texture_
wrap_r: a glenum specifying the texture
wrapping function for the texture coordinate r. gl.texture_
wrap_s: a glenum specifying the texture
wrapping function for the texture coordinate s. gl.texture_
wrap_t: a glenum specifying the texture
wrapping function for the texture coordinate t. param a glint (samplerparameteri) or a glfloat (samplerparameterf) specifying a value for pname. return va...
WebGLRenderingContext.stencilOp() - Web APIs
sting is disabled. the default value is gl.keep. return value none. constants gl.keep keeps the current value. gl.zero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. clamps to the maximum representable unsigned value. gl.incr_
wrap increments the current stencil buffer value.
wraps stencil buffer value to zero when incrementing the maximum representable unsigned value. gl.decr decrements the current stencil buffer value. clamps to 0. gl.decr_
wrap decrements the current stencil buffer value.
wraps stencil buffer value to the maximum representable unsigned value when decrementing a stencil buffer value of 0. gl.invert ...
WebGLRenderingContext.stencilOpSeparate() - Web APIs
sting is disabled. the default value is gl.keep. return value none. constants gl.keep keeps the current value. gl.zero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. clamps to the maximum representable unsigned value. gl.incr_
wrap increments the current stencil buffer value.
wraps stencil buffer value to zero when incrementing the maximum representable unsigned value. gl.decr decrements the current stencil buffer value. clamps to 0. gl.decr_
wrap decrements the current stencil buffer value.
wraps stencil buffer value to the maximum representable unsigned value when decrementing a stencil buffer value of 0. gl.invert ...
Animating textures in WebGL - Web APIs
evel = 0; const internalformat = gl.rgba; const width = 1; const height = 1; const border = 0; const srcformat = gl.rgba; const srctype = gl.unsigned_byte; const pixel = new uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, srctype, 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.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_
wrap_t, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); return texture; } here's what the updatetexture() function looks like; this is where the real wo...
Writing a WebSocket server in C# - Web APIs
string text = encoding.utf8.getstring(decoded); console.writeline("{0}", text); } else console.writeline("mask bit not set"); console.writeline(); } } } } client.html <!doctype 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.queryselector("button"), output = document.queryselector("#output"), textarea = document.queryselector(...
The WebSocket API (WebSockets) - Web APIs
y the websocket object when the connection closes. messageevent the event sent by the websocket object when a message is received from the server. guides writing websocket client applications writing websocket servers writing a websocket server in c# writing a websocket server in java tools humblenet: a cross-platform networking library that works in the browser. it consists of a c
wrapper around websockets and webrtc that abstracts away cross-browser differences, facilitating the creation of multi-user networking functionality for games and other apps. µwebsockets: highly scalable websocket server and client implementation for c++11 and node.js. clusterws: lightweight, fast and powerful framework for building scalable websocket applications in node.js. cws: fast c++ websoc...
Movement, orientation, and motion: A WebXR example - Web APIs
e texture coordinates for each surface of the cube, and the array of vertex indices (specifying which entry in the vertex list represents each corner of the cube). an object containing references to eard loadtexture() loads the image at a given url and creates a webgl texture from it. if the image's dimensions aren't both powers of two (see the ispowerof2() function), mipmapping is disabled and
wrapping is clamped to the edges. this is because optimized rendering of mipmapped textures only works for textures whose dimensions are powers of two in webgl 1. webgl 2 supports arbitratily-sized textures for mipmapping. ispowerof2() returns true if the specified value is a power of two; otherwise returns false. putting it all together when you take all of this code and add in the html and the ...
Advanced techniques: Creating and sequencing audio - Web APIs
schedule audio (sec) let's create a function that moves the note forwards by one beat, and loops back to the first when it reaches the 4th (last) one: let currentnote = 0; let nextnotetime = 0.0; // when the next note is due. function nextnote() { const secondsperbeat = 60.0 / tempo; nextnotetime += secondsperbeat; // add beat length to last beat time // advance the beat number,
wrap to zero currentnote++; if (currentnote === 4) { currentnote = 0; } } we want to create a reference queue for the notes that are to be played, and the functionality to play them using the functions we've previously created: const notesinqueue = []; function schedulenote(beatnumber, time) { // push the note on the queue, even if we're not playing. notesinqueue.pu...
Using Web Workers - Web APIs
re sent to a dedicated worker, multiplied together, and the result is returned to the page and displayed. this example is rather trivial, but we decided to keep it simple while introducing you to basic worker concepts. more advanced details are covered later on in the article. worker feature detection for slightly more controlled error handling and backwards compatibility, it is a good idea to
wrap your worker accessing code in the following (main.js): if (window.worker) { ... } spawning a dedicated worker creating a new worker is simple. all you need to do is call the worker() constructor, specifying the uri of a script to execute in the worker thread (main.js): var myworker = new worker('worker.js'); sending messages to and from a dedicated worker the magic of workers happens...
Window.open() - Web APIs
features given with their corresponding values in the form "name=value". these features include options such as the window's default size and position, whether or not to include toolbar, and so forth. there must be no whitespace in the string. see window features below for documentation of each of the features that can be specified. return value a windowproxy object, which is basically a thin
wrapper for the window object representing the newly created window, and has all its features available. if the window couldn't be opened, the returned value is instead null. the returned reference can be used to access properties and methods of the new window as long as it complies with same-origin policy security requirements. description the open() method creates a new secondary browser window, s...
XDomainRequest - Web APIs
note: the xdr.onprogress event should always be defined, even as an empty function, or xdomainrequest may not fire onload for duplicate requests. security the xdomainrequest is built to be secure in multiple ways. the or...
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
se it's really hard to // do on b2g18. on mozilla-central we want a proper tcperror that ideally // sub-classes domerror. bug 867872 has been filed to implement this and // contains a documented tcperror.webidl that maps all the error codes we use in // this file to slightly more readable explanations. ...
Using the alertdialog role - Accessibility
ved to that control when the alert dialog appears. generally alert dialogs have at least a confirmation, close or cancel button that can be used to move focus to. additionally, alert dialogs can have other interactive controls such as text fields, tabs or checkboxes. which particular control focus should be moved to depends on the purpose of the dialog. the tab order inside the alert dialog must
wrap. the difference with regular dialogs is that the alertdialog role should only used when an alert, error, or warning occurs. in other words, when a dialog's information and controls require the user's immediate attention alertdialog should be used instead of dialog. it is up to the developer to make this distinction though. because of its urgent nature, alert dialogs must always be modal. note...
ARIA: figure role - Accessibility
s, code snippets, or other content that puts across information in a different way to a regular flow of text. <div role="figure" aria-labelledby="caption"> <img src="image.png" alt="full alternative image description"> <p id="caption">figure 1: the caption</p> </div> in the above example, we have a figure that consists of two separate content items — an image and a caption. this is
wrapped by a <div> element that identifies the content as a figure using role="figure". instead of using aria to create a figure, consider using the native, semantic html <figure> element. along with the <figcaption> element. see best practices below. description any content that should be grouped together and consumed as a figure (which could include images, video, audio, code snippets, or other ...
ARIA: form role - Accessibility
use sparingly landmark roles are intended 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. inputs are not forms you do not need to declare role="form" on every form element (inputs, text areas, selects, etc.). it should be declared on the html element that
wraps the form elements. ideally, use the <form> element as the
wrapping element and do not declare role="form". search if a form is used to search, you should use the more specialized role="search" value. labeling landmarks each <form> element and form role that needs to be exposed as a landmark must be given an accessible name. this name will allow an assitive technology user to be able to quick...
ARIA: Suggestion role - Accessibility
the suggestion landmark role semantically denotes a single proposed change to an editable document. this should be used on an element that
wraps an element with an insertion role, and one with a deletion role. examples when you’ve got a content change that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not. this is the job of role="suggestion", which should be set on an element
wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>. </p> we could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via a...
ARIA: dialog role - Accessibility
for dialogs that only provide a basic message, it could be an "ok" button. for dialogs containing a form it could be the first field in the form. after the dialog is dismissed, keyboard focus should be moved back to where it was before it moved into the dialog. otherwise the focus can be dropped to the beginning of the page. for most dialogs, the expected behavior is that the dialog's tab order
wraps, which means that when the user tabs through the focusable elements in the dialog, the first focusable element will be focused after the last one has been reached. in other words, the tab order should be contained within and by the dialog. if the dialog can be moved or resized, ensure that these actions must be performable by keyboard users as well as mouse users. similarly, if a dialog provide...
WAI-ARIA Roles - Accessibility
e or more rows of cells, grid cells, column headers, or row headers within a grid, table or treegrid.aria: search rolethe search landmark role is used to identify a section of the page used to search the page, site, or collection of sites.aria: suggestion rolethe suggestion landmark role semantically denotes a single proposed change to an editable document. ...
Architecture - Accessibility
t contains text and is contained within text. this means that we have an exact mirror to the dom, but text lives in the parents instead of in the leaves, which now don't really provide additional useful information. they are only provided under msaa/ia2 for backward compatibility. implementation classes here are some notes on the classes we use: nshypertextaccessible is for any container that may
wrap both text and embedded object: nsiaccessibletext is supported if there is potentially any text in the container nsiaccessiblehypertext is supported if there is potentially text and embedded objects together in the container. nsiaccessibleeditabletext is supported if the area is potentially editable. if it's actually editable it will also provide state_editable. nsaccessible still represen...
Accessibility documentation index - Accessibility
tified as significant. it is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate. 50 aria: suggestion role aria, aria role, reference, annotations, suggestion the suggestion landmark role semantically denotes a single proposed change to an editable document. this should be used on an element that
wraps an element with an insertion role, and one with a deletion role. 51 aria: alert role aria, aria role, aria alert, aria widget, reference the alert role can be used to tell the user an element has been dynamically updated. screen readers will instantly start reading out the updated content when the role is added. if the user is expected to close the alert, then the alertdialo...
Understandable - Accessibility
attribute on the page's <html> element, giving it a value equal to the language code that best represents the language the page is written in. see setting the primary language of the document. 3.1.2 language of parts (aa) in cases where the content of a page includes words or phrases that are in a different language to the primary language, use the lang attribute on an element
wrapped around the term in question (e.g. a <span> if no semantic element is available) to set an appropriate language for it. you don't need to set a different language for words or phrases that are the same regardless of language (for example proper names, technical terms that aren't part of a specific language). 3.1.3 unusual words (aaa) where technical terms, jargon, or id...
:host() - CSS: Cascading Style Sheets
' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
:host-context() - CSS: Cascading Style Sheets
' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
:host - CSS: Cascading Style Sheets
select a custom element from inside its shadow dom. note: this has no effect when used outside a shadow dom. /* selects a shadow root host */ :host { font-weight: bold; } syntax :host examples styling the shadow host the following snippets are taken from our host-selectors example (see it live also). ...
unicode-range - CSS: Cascading Style Sheets
n ampersand, that we want to style with a different font. to make it obvious, we will use a sans-serif font, helvetica, for the text, and a serif font, times new roman, for the ampersand. in the css we are in effect defining a completely separate @font-face that only includes a single character in it, meaning that only this character will be styled with this font. we could also have done this by
wrapping the ampersand in a <span> and applying a different font just to that, but that is an extra element and rule set. html <div>me & you = us</div> css @font-face { font-family: 'ampersand'; src: local('times new roman'); unicode-range: u+26; } div { font-size: 4em; font-family: ampersand, helvetica, sans-serif; } result specifications specification status commen...
overflow-inline - CSS: Cascading Style Sheets
ces posuere cubilia curae; nunc velit erat, tempus id rutrum sed, dapibus ut urna. integer vehicula nibh a justo imperdiet rutrum. nam faucibus pretium orci imperdiet sollicitudin. nunc id facilisis dui. proin elementum et massa et feugiat. integer rutrum ullamcorper eleifend. proin sit amet tincidunt risus. sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css p { white-space: no
wrap; } @media (overflow-inline: scroll) { p { color: red; } } result specifications specification status comment media queries level 4the definition of 'overflow-inline' in that specification. candidate recommendation initial definition. ...
Box alignment in Flexbox - CSS: Cascading Style Sheets
to margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space. the gap properties row-gap column-gap gap creating fixed size gaps between items on the main axis, the column-gap property will create fixed size gaps between adjacent items. on the cross axis the row-gap property will create spacing between adjacent flex lines, therefore flex-
wrap must also be set to
wrap for this to have any effect. reference css properties justify-content align-content place-content justify-items align-items place-items align-self row-gap column-gap gap glossary entries cross axis main axis guides alignment in flexbox external resources box alignment cheatsheet css grid, flexbox and box alignment thoughts on partial im...
Color picker tool - CSS: Cascading Style Sheets
= document.createelement('div'); var preview_color = document.createelement('div'); preview_box.classname = 'preview'; preview_color.classname = 'preview-color'; this.preview_color = preview_color; preview_box.appendchild(preview_color); this.node.appendchild(preview_box); }; colorpicker.prototype.newinputcomponent = function newinputcomponent(title, topic, onchangefunc) { var
wrapper = document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span');
wrapper.classname = 'input';
wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text');
wrapper.appendchild(info);
wrapper.appendchild(input); this.node.appendchild(
wrapper); inpu...
Basic Concepts of Multicol - CSS: Cascading Style Sheets
u would like the content to be displayed as. the browser will then assign the correct amount of space to each column box to create the requested number of columns. in the below example we use the column-count property to create three columns on the .container element. the content, including the children of .container is then split between the three columns. in the above example the content is
wrapped in paragraph p tags with default styling. therefore, there is a margin above each paragraph. you can see how this margin causes the first line of text to be pushed down. this is because a multicol container creates a new block formatting context (bfc) which means margins on child elements do not collapse with any margin on the container. the column-width property the column-width property i...
CSS Display - CSS: Cascading Style Sheets
legacy> guides css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering
wrapping of flex items ordering flex items relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values ...
Typical use cases of Flexbox - CSS: Cascading Style Sheets
comes to styling form controls. forms have lots of markup and lots of small elements that we typically want to align with each other. a common pattern is to have an <input> element paired with a <button>, perhaps for a search form or where you simply want your visitor to enter an email address. flexbox makes this type of layout easy to achieve. i have contained my <button> and <input> field in a
wrapper which i have given a border and set to display: flex. i then use the flex properties to allow the <input> field to grow, while the button does not grow. this means we have a pair of fields, with the text field growing and shrinking as the available space changes. you could add a label or icon to the left as easily as we popped the button onto the right. i have added a label, and other than ...
Block and inline layout in normal flow - CSS: Cascading Style Sheets
he containing block for all of the boxes a box can break onto a new line. the lines created are known as line boxes. in the following example, we have three inline boxes created by a paragraph with a <strong> element inside it. the boxes around the words before the <strong> element and after the <strong> element are referred to as anonymous boxes, boxes introduced to ensure that everything is
wrapped in a box, but ones that we cannot target directly. the line box size in the block direction (so the height when working in english) is defined by the tallest box inside it. in the next example, i have made the <strong> element 300%; that content now defines the height of the line box on that line. find out more about how block and inline boxes behave in our guide to the visual formatting m...
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
rection, and text-orientation properties. it is defined primarily in terms of its inline base direction and block flow direction.” the specification defines the inline base direction as the direction in which content is ordered on a line. this defines the start and end of the inline direction. the start is where sentences start and the end is where a line of text ends before it would begin to
wrap onto a new line. the block flow direction is the direction in which boxes, for example paragraphs, stack in that writing mode. the css writing-mode property controls the block flow direction. if you want to change your page, or part of your page, to vertical-lr then you can set writing-mode: vertical-lr on the element and this will change the direction of the blocks and therefore the inline dire...
In Flow and Out of Flow - CSS: Cascading Style Sheets
to the paragraphs, and then floated the div left. the div is now out of flow. as a float it is first laid out according to where it would be in normal flow, then taken out of flow and moved to the left as far as possible. you can see the background colour of the following paragraph running underneath, it is only the line boxes of that paragraph that have been shortened to cause the effect of
wrapping content around the float. the box of our paragraph is still displaying according to the rules of normal flow. this is why, to make space around a floated item, you must add a margin to the item, in order to push the line boxes away from it. you cannot apply anything to the following in-flow content to achieve that. absolute positioning giving an item position: absolute or position: fixed re...
CSS Fragmentation - CSS: Cascading Style Sheets
it also occurs when a block spans more than one column inside a column layout container, or spans a page break when printed. each piece of the rendering for the element is called a fragment. ...
Basic Shapes - CSS: Cascading Style Sheets
o circle() except that we have to specify two radii x and y in that order. these may then be followed by position values as with circle() to move the centre of the ellipse around. in the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. this means that the centre of the ellipse is on the left edge of the box giving us a half ellipse shape to
wrap our text around. you can change these values to see how the ellipse changes. the keyword values of closest-side and farthest-side are useful to create a quick ellipse based on the size of the floated element reference box. polygon() the final basic shape is the most complex and enables the creation of many side shapes by way of creating a polygon(). this shape accepts three or more pairs o...
Shapes from box values - CSS: Cascading Style Sheets
nt-box padding-box border-box margin-box the border-radius values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape. css box model the values listed above correspond to the various parts of the css box model. a box in css has content, padding, border, and margin. by using box values for shapes we can
wrap our content around the edges defined by these values. in all of the examples below i am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow. margin-box the margin-box is the shape defined by the outside margin edge and includes the corner radius of the shape, should border-radius have been used in defining th...
Shapes From Images - CSS: Cascading Style Sheets
at is not fully opaque. the shape-image-threshold property is used to set a threshold for this opacity. pixels that are more opaque than this value will be used to calculate the area of the shape. as a simple example, i have an image of a star with a solid red area and an area which is fully transparent. i use the path to the image file as the value of the shape-outside property. the content now
wraps around the star shape. i can use shape-margin to move the text away from the shape, giving a margin around the created shape and the text. cors compatibility something that you will run into when creating shapes from an image is that the image you use must be cors compatible. an image hosted on the same domain as your site should work, however if your images are hosted on a different doma...
CSS Shapes - CSS: Cascading Style Sheets
css shapes describe geometric shapes for use in css. for the level 1 specification, css shapes can be applied to floating elements. the specification defines a number of different ways to define a shape on a floated element, causing
wrapping lines to
wrap round the shape rather than following the rectangle of the element's box. basic example the example below shows an image that has been floated left, and the shape-outside property applied with a value of circle(50%). this creates a circle shape, and the content
wrapping the float now
wraps around that shape. this changes the length of the
wrapping text's line boxes. reference properties shape-image-threshold shape-margin shape-outside data types <basic-shape> guides overview of css shapes shapes from box values bas...
CSS Text - CSS: Cascading Style Sheets
css text is a module of css that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation. reference properties hanging-punctuation hyphens letter-spacing line-break overflow-
wrap tab-size text-align text-align-last text-indent text-justify text-size-adjust text-transform white-space word-break word-spacing specifications specification status comment css logical properties and values level 1 editor's draft updates some properties to be independent of the directionality of the text. css text module level 3 working draft css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
CSS Layout cookbook - CSS: Cascading Style Sheets
of links to allow the visitor to navigate back up through the page hierarchy. flexbox list group with badges a list of items with a badge to display a count. flexbox, box alignment pagination links to pages of content (such as search results). flexbox, box alignment card a card component, which displays in a grid of cards. grid layout grid
wrapper for aligning grid content within a central
wrapper, while also allowing items to break out. css grid contribute a recipe as with all of mdn we would love you to contribute a recipe in the same format as the ones shown above. see this page for a template and guidelines for writing your own example. ...
Layout mode - CSS: Cascading Style Sheets
w — all elements are part of normal flow until you do something to take them out of it. normal flow includes block layout, designed for laying out boxes such as paragraphs and inline layout, which lays out inline items such as text. table layout, designed for laying out tables. float layout, designed to cause an item to position itself left or right with the rest of the content in normal flow
wrapping around it. positioned layout, designed for positioning elements without much interaction with other elements. multi-column layout, designed for laying content out in columns as in a newspaper. flexible box layout, designed for laying out complex pages that can be resized smoothly. grid layout, designed for laying out elements relative to a fixed grid. note: not all css properties apply...
Microsoft CSS extensions - CSS: Cascading Style Sheets
ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-track-color -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-max -ms-scroll-limit-x-min -ms-scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-
wrap-flow -ms-
wrap-margin -ms-
wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregion...
animation - CSS: Cascading Style Sheets
0z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-
wrap:
wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .over...
box-decoration-break - CSS: Cascading Style Sheets
etical box is sliced into pieces for each line/column/page. note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. see the css specification for details. clone each box fragment is rendered independently with the specified border, padding, and margin
wrapping each fragment. the border-radius, border-image, and box-shadow are applied to each fragment independently. the background is also drawn independently for each fragment, which means that a background image with background-repeat: no-repeat may nevertheless repeat multiple times. formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typedisc...
box-lines - CSS: Cascading Style Sheets
out in a single row or column. multiple box elements layout in multiple rows or columns. formal definition initial valuesingleapplies tobox elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax single | multiple examples simple usage example in the original version of the spec, box-lines allowed you to specify that you wanted your flex container's children to
wrap onto multiple lines. this was only supported in webkit-based browsers, with a prefix. div { display: box; box-orient: horizontal; box-lines: multiple; } the modern flexbox equivalent is flex-
wrap. specifications not part of any standard. ...
break-inside - CSS: Cascading Style Sheets
elit. nulla vitae fringilla mauris. quisque commodo eget nisi sed pretium. mauris luctus nec lacus in ultricies. mauris vitae hendrerit arcu, ac scelerisque lacus. aliquam lobortis in lacus sit amet posuere. fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p> <figure> <img src="https://udn.realityripple.com/samples/fe/4508d88f78.png"> <figcaption>the firefox logo — fox
wrapped around the world</figcaption> </figure> <p>praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. cras suscipit porta leo sit amet rutrum. sed vehicula ornare tincidunt. curabitur a ipsum ac diam mattis volutpat ac ut elit. nullam luctus justo non vestibulum gravida. morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p> <p>in finibus viverra enim vel suscipit. ...
clip-path - CSS: Cascading Style Sheets
"91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; background: #eee; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-
wrap:
wrap; } .col { flex: 1 auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; flex: 1; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: no
wrap; } .note + .row .cell { margin-top: 0; } .container { display: inline-block; border: 1px dotted...
<color> - CSS: Cascading Style Sheets
tional notation: hsl[a](h, s, l[, a]) h (hue) is an <angle> of the color circle given in degs, rads, grads, or turns in css color module level 4. when written as a unitless <number>, it is interpreted as degrees, as specified in css color module level 3. by definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. as an <angle>, it implicitly
wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc. s (saturation) and l (lightness) are percentages. 100% saturation is completely saturated, while 0% is completely unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is “normal.” a (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opa...
column-count - CSS: Cascading Style Sheets
of columns is determined by other css properties, such as column-width. <integer> is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. if the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns. formal definition initial valueautoapplies toblock containers except table
wrapper boxesinheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> | auto examples splitting a paragraph across three columns html <p class="content-box"> this is a bunch of text split into three columns using the css `column-count` property. the text is equally distributed over the columns. </p> css .content-box { column-count: 3; } result specific...
column-width - CSS: Cascading Style Sheets
he specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. the value must be strictly positive or the declaration is invalid. percentage values are also invalid. auto the width of the column is determined by other css properties, such as column-count. formal definition initial valueautoapplies toblock containers except table
wrapper boxesinheritednocomputed valuethe absolute length, zero or largeranimation typea length formal syntax <length> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation u...
columns - CSS: Cascading Style Sheets
umber of columns into which the element's content should be flowed, defined as an <integer> or the keyword auto. if neither this value nor the column's width are auto, it merely indicates the maximum allowable number of columns. see column-count. ...
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
pose is to create a new block formatting context (bfc). a bfc ensures that everything inside your box stays inside it, and things from outside the box cannot intrude into it. the most obvious use-case for creating a new bfc is to contain floats, and avoid the need for clearfix hacks. in the example below we have a floated item inside a container. the float is contained by the bordered box, which
wraps it and the text alongside. if you remove the line display: flow-root then the float will poke out of the bottom of the box. if you are using firefox you can replace it with the newer display: block flow-root, which will achieve the same as the single flow-root value. the flow-root value makes sense if you think about block and inline layout, which is sometimes called normal flow. our html pag...
display - CSS: Cascading Style Sheets
yntax of display css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering
wrapping of flex items ordering flex items relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values ...
filter - CSS: Cascading Style Sheets
th:25%; height:auto; } #img3 { height:100%; } hue-rotate() the hue-rotate() function applies a hue rotation on the input image. the value of angle defines the number of degrees around the color circle the input samples will be adjusted. a value of 0deg leaves the input unchanged. the lacuna value for interpolation is 0. though there is no maximum value; the effect of values above 360deg
wraps around. filter: hue-rotate(90deg) <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> ...
flex-basis - CSS: Cascading Style Sheets
="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: auto; } .flex1:after { content: 'au...
font-weight - CSS: Cascading Style Sheets
</div> css /* mutator sans is created by letterror (https://github.com/letterror/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: no
wrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0;...
mix-blend-mode - CSS: Cascading Style Sheets
0"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; background: #eee; } .grid { width: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-
wrap:
wrap; height: auto; } .col { display: flex; flex: 1 auto; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: no
wrap; } .note + .row .cell { margin-top: ...
object-fit - CSS: Cascading Style Sheets
t-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.3em; } div { display: flex; flex-direction: column; flex-
wrap:
wrap; align-items: flex-start; height: 940px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications ...
overflow - CSS: Cascading Style Sheets
s.overflow.moz-scrollbars.enabled to true description overflow options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area. specifying a value other than visible (the default) creates a new block formatting context. this is necessary for technical reasons — if a float intersected with the scrolling element it would forcibly re
wrap the content after each scroll step, leading to a slow scrolling experience. in order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to no
wrap. setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto. the javascript element.scrolltop property may ...
place-content - CSS: Cascading Style Sheets
writingm.addeventlistener("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; flex-
wrap:
wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8ff; } .small { font-size: 12px; height: 40px; } .large { font-size: ...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
de absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-
wrap:
wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: ...
scroll-snap-coordinate - CSS: Cascading Style Sheets
<div>2</div> <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: no
wrap; 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...
scroll-snap-destination - CSS: Cascading Style Sheets
<div>2</div> <div>3</div> </div> </div> <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: no
wrap; 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-al...
scroll-snap-points-x - CSS: Cascading Style Sheets
lueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: no
wrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(odd) { background-color: #87ccea; } result specifications not par...
table-layout - CSS: Cascading Style Sheets
to accomodate its contents, despite the specified width. html <table> <tr><td>ed</td><td>wood</td></tr> <tr><td>albert</td><td>schweitzer</td></tr> <tr><td>jane</td><td>fonda</td></tr> <tr><td>william</td><td>shakespeare</td></tr> </table> css table { table-layout: fixed; width: 120px; border: 1px solid red; } td { border: 1px solid blue; overflow: hidden; white-space: no
wrap; text-overflow: ellipsis; } result specifications specification status comment css level 2 (revision 1)the definition of 'table-layout' in that specification. recommendation initial definition. ...
text-indent - CSS: Cascading Style Sheets
; text-indent: unset; values <length> indentation is specified as an absolute <length>. negative values are allowed. see <length> values for possible units. <percentage> indentation is a <percentage> of the containing block's width. each-line indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft
wrap break. hanging inverts which lines are indented. all lines except the first line will be indented. formal definition initial value0applies toblock containersinheritedyespercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute length, plus any keywords as specifiedanimation typea length, percentage or calc(); formal syntax <length-perc...
transform-box - CSS: Cascading Style Sheets
box; transform-box: fill-box; transform-box: stroke-box; transform-box: view-box; /* global values */ transform-box: inherit; transform-box: initial; transform-box: unset; syntax the transform-box property is specified as one of the keyword values listed below. values content-box the content box is used as the reference box. the reference box of a <table> is the border box of its table
wrapper box, not its table box. border-box the border box is used as the reference box. the reference box of a <table> is the border box of its table
wrapper box, not its table box. fill-box the object bounding box is used as the reference box. stroke-box the stroke bounding box is used as the reference box. view-box the nearest svg viewport is used as the reference box. if a viewbox attribu...
word-break - CSS: Cascading Style Sheets
values below. values normal use the default line break rule. break-all to prevent overflow, word breaks should be inserted between any two characters (excluding chinese/japanese/korean text). keep-all word breaks should not be used for chinese/japanese/korean (cjk) text. non-cjk text behavior is the same as for normal. break-word has the same effect as word-break: normal and overflow-
wrap: anywhere, regardless of the actual value of the overflow-
wrap property. note: in contrast to word-break: break-word and overflow-
wrap: break-word (see overflow-
wrap), word-break: break-all will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break). formal definition initial valu...
Getting Started - Developer guides
ly, competing functions calling makerequest() can overwrite each other, causing a race condition. declaring the httprequest variable local to a closure containing the ajax functions avoids this. in the event of a communication error (such as the server going down), an exception will be thrown in the onreadystatechange method when accessing the response status. ...
DOM onevent handlers - Developer guides
de><br>`); result for historical reasons, some attributes/properties on the <body> and <frameset> elements instead set event handlers on their parent window object. (the html specification names these: onblur, onerror, onfocus, onload, and onscroll.) event handler's parameters, this binding, and the return value when the event handler is specified as an html attribute, the specified code is
wrapped into a function with the following parameters: event — for all event handlers except onerror. event, source, lineno, colno, and error for the onerror event handler. note that the event parameter actually contains the error message as a string. when the event handler is invoked, the this keyword inside the handler is set to the dom element on which the handler is registered. for more de...
Overview of events and handlers - Developer guides
t object as an argument. the function, in turn, would perform whatever action was chosen by the programmer, in this case to open an html alert dialog. note that the handler has access to the ev object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred. as a second example, much modern javascript integrated into web pages is
wrapped into an event function call to ensure that the code is only executed when the html has been processed and is available for alteration or decoration. for example, code might be attached as: var funcinit = function(){ // user code goes here and can safely address all the html elements from the page // since the document has successfully been 'loaded' } document.addeventlistener('domcont...
Rich-Text Editing in Mozilla - Developer guides
kos.</strong> <strong><em><u>dinosaurs are big.</u></em></strong> another difference between mozilla and ie is how to access the document object of an iframe, which is usually used in conjunction with designmode. mozilla uses the w3c standard way, namely iframeelement.contentdocument, while ie requires iframeelement.document. devedge provides a javascript helper class, xbdesignmode, which is a
wrapper for the designmode feature which hides the differences between ie and mozilla. event handling disabled a further difference for mozilla is that once a document is switched to designmode, all events on that particular document are disabled. once designmode is turned off however (as this now seems possible in mozilla 1.5) the events become active again. more information can be found in the ...
Making content editable - Developer guides
between browsers. for example, even something as simple as what happens when you press enter/return to create a new line of text inside an editable element was handled differently across the major browsers (firefox inserted <br> elements, ie/opera used <p>, chrome/safari used <div>). fortunately, in modern browsers things are somewhat more consistent. as of firefox 60, firefox will be updated to
wrap the separate lines in <div> elements, matching the behavior of chrome, modern opera, edge, and safari. try it out in the above example. note: internet explorer, which is no longer being developed, uses <p> elements instead of <div>. if you want to use a different paragraph separator, the above browsers all support document.execcommand, which provides a defaultparagraphseparator command to al...
Using HTML sections and outlines - Developer guides
link</a></li> <li> <a href="#">primary link</a> <ul> <li><a href="#">secondary link</a></li> <li><a href="#">secondary link</a></li> </ul> </li> <li><a href="#">primary link</a></li> </ul> </nav> collection of links use the <nav> element only for site navigation menus. collections of links such as social media profiles or a blogroll should not be
wrapped in the <nav> element. html elements in <nav> while list elements are common for navigation they are not required. you can use other elements such as <p>. article element the <article> element indicates self-contained content, meaning that if you removed all the other html except the <article> element, the content would still make sense to a reader. <article> <h1>how to become an mdn con...
HTML attribute reference - HTML: Hypertext Markup Language
defines a default value which will be displayed in the element on page load. width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> for the elements listed here, this establishes the element's width. note: for all other instances, such as <div>, this is a legacy attribute, in which case the css width property should be used instead.
wrap <textarea> indicates whether the text should be
wrapped. content versus idl attributes in html, most attributes have two faces: the content attribute and the idl (interface definition language) attribute. the content attribute is the attribute as you set it from the content (the html code) and you can set it or get it via element.setattribute() or element.getattribute(). the conten...
<br>: The Line Break element - HTML: Hypertext Markup Language
to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as you can see from the above example, a <br> element is included at each point where we want the text to break. the text after the <br> begins again at the start of the next line of the text block. note: do not use <br> to create margins between paragraphs;
wrap them in <p> elements and use the css margin property to control their size. attributes this element's attributes include the global attributes. deprecated attributes clear indicates where to begin the next line after the break. styling with css the <br> element has a single, well-defined purpose — to create a line break in a block of text. as such, it has no dimensions or visual outp...
<button>: The Button element - HTML: Hypertext Markup Language
isten to the element's events, which are triggered when the events occur. value defines the value associated with the button’s name when it’s submitted with the form data. this value is passed to the server in params when the form is submitted. notes a submit button with the attribute formaction set, but without an associated form does nothing. you have to set a form owner, either by
wrapping it in a <form> or set the attribute form to the id of the form. <button> elements are much easier to style than <input> elements. you can add inner html content (think <i>, <br>, or even <img>), and use ::after and ::before pseudo-elements for complex rendering. if your buttons are not for submitting form data to a server, be sure to set their type attribute to button. otherwise they will t...
<code>: The Inline Code element - HTML: Hypertext Markup Language
lement interface for this element. attributes this element only includes the global attributes. example a paragraph of text that includes <code>: <p>the function <code>selectall()</code> highlights all the text in the input field so the user can, for example, copy or delete the text.</p> the output generated by this html looks like this: notes to represent multiple lines of code,
wrap the <code> element within a <pre> element. the <code> element by itself only represents a single phrase of code or line of code. a css rule can be defined for the code selector to override the browser's default font face. preferences set by the user might take precedence over the specified css. specifications specification status comment html living standardthe defi...
<dd>: The Description Details element - HTML: Hypertext Markup Language
is no more content in the parent element. permitted parents <dl> or (in whatwg html) a <div> that is inside a <dl>. previous sibling <dt> or another <dd> element. implicit aria role definition permitted aria roles no role permitted dom interface htmlelement attributes this element's attributes include the global attributes. no
wrap if the value of this attribute is set to yes, the definition text will not
wrap. the default value is no. example for an example, see <dl> examples. specifications specification status comment html living standardthe definition of '<dd>' in that specification. living standard html5the definition of '<dd>' in that specification. recommendation...
<del>: The Deleted Text element - HTML: Hypertext Markup Language
cerns the presence of the del element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. del::before, del::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: no
wrap; width: 1px; } del::before { content: " [deletion start] "; } del::after { content: " [deletion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been deleted would adversely affect understanding. s...
<dl>: The Description List element - HTML: Hypertext Markup Language
criptions, by combining the examples above. metadata description lists are useful for displaying metadata as a list of key-value pairs. <dl> <dt>name</dt> <dd>godzilla</dd> <dt>born</dt> <dd>1952</dd> <dt>birthplace</dt> <dd>japan</dd> <dt>color</dt> <dd>green</dd> </dl> tip: it can be handy to define a key-value separator in the css, such as: dt::after { content: ": "; }
wrapping name-value groups in <div> elements whatwg html allows
wrapping each name-value group in a <dl> element in a <div> element. this can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes. <dl> <div> <dt>name</dt> <dd>godzilla</dd> </div> <div> <dt>born</dt> <dd>1952</dd> </div> <div> <dt>birthplace</dt> <d...
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
rmatting context. if the <fieldset> is styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. by default there is a 2px groove border surrounding the contents, and a small amount of default padding. the element has min-inline-size: min-content by default. if a <legend> is present, it is placed over the block-start border. the <legend> shrink-
wraps, and also establishes a formatting context. the display value is blockified. (for example, display: inline behaves as block.) there will be an anonymous box holding the contents of the <fieldset>, which inherits certain properties from the <fieldset>. if the <fieldset> is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. if the <fieldse...
<ins> - HTML: Hypertext Markup Language
rns the presence of the <ins> element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. ins::before, ins::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: no
wrap; width: 1px; } ins::before { content: " [insertion start] "; } ins::after { content: " [insertion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been inserted would adversely affect understanding. ...
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
ltiple keystrokes, you can nest multiple <kbd> elements, with an outer <kbd> element representing the overall input and each individual keystroke or component of the input enclosed within its own <kbd>. unstyled first, let's look at what this looks like as just plain html. html <p>you can also create a new document using the keyboard shortcut <kbd><kbd>ctrl</kbd>+<kbd>n</kbd></kbd>.</p> this
wraps the entire key sequence in an outer <kbd> element, then each individual key within its own, in order to denote the components of the sequence. note: you don't need to do all this
wrapping; you can choose to simplify it by leaving out the external <kbd> element. in other words, simplifying this to just <kbd>ctrl</kbd>+<kbd>n</kbd> would be perfectly valid. depending on your style sheet, though...
<mark>: The Mark Text element - HTML: Hypertext Markup Language
ns the presence of the mark element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. mark::before, mark::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: no
wrap; width: 1px; } mark::before { content: " [highlight start] "; } mark::after { content: " [highlight end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been highlighted would adversely affect understandi...
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
es the global attributes. cols contains the preferred count of characters that a line should have. it was a non-standard synonym of width. to achieve such an effect, use css width instead. width contains the preferred count of characters that a line should have. though technically still implemented, this attribute has no visual effect; to achieve such an effect, use css width instead.
wrap is a hint indicating how the overflow must happen. in modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use css white-space instead. example html <p>using css to change the font color is easy.</p> <pre> body { color: red; } </pre> result accessibility concerns it is important to provide an alternate description for any image...
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
{{embedinteractiveexample("pages/tabbed/rb.html", "tabbed-standard")}} the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content as a child of a <ruby> element. ...
<s> - HTML: Hypertext Markup Language
ty concerns the presence of the s element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. s::before, s::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: no
wrap; width: 1px; } s::before { content: " [start of stricken text] "; } s::after { content: " [end of stricken text] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been struck out would adversely affect unde...
<section>: The Generic Section element - HTML: Hypertext Markup Language
fic semantic element to represent it — contained within an html document. typically, but not always, sections have a heading. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as an example, a navigation menu should be
wrapped in a <nav> element, but a list of search results and a map display and its controls don't have specific elements, and could be put inside a <section>. note: if the contents of the element would make sense syndicated as a standalone piece, the <article> element may be a better choice. content categories flow content, sectioning content, palpable content. permitted conte...
HTML elements reference - HTML: Hypertext Markup Language
lumn layout element (<multicol>) was an experimental element designed to allow multi-column layouts and must not be used. <nextid> <nextid> is an obsolete html element that served to enable the next web designing tool to generate automatic name labels for its anchors. <nobr> the non-standard, obsolete html <nobr> element prevents the text it contains from automatically
wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. <noembed> the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use. <noframes...
HTML documentation index - HTML: Hypertext Markup Language
obsolete, reference, web <nextid> is an obsolete html element that served to enable the next web designing tool to generate automatic name labels for its anchors. 164 <nobr>: the non-breaking text element (obsolete) element, html, non-standard, obsolete, reference, web, nobr the non-standard, obsolete html <nobr> element prevents the text it contains from automatically
wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. 165 <noembed>: the embed fallback element (obsolete) element, embedded content, embedding, html, non-standard, obsolete, reference, noembed the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for brow...
Set-Cookie - HTTP
-cookie: <cookie-name>=<cookie-value>; domain=<domain-value>; secure; httponly attributes <cookie-name>=<cookie-value> a cookie begins with a name-value pair: a <cookie-name> can be any us-ascii characters, except control characters, spaces, or tabs. it also must not contain a separator character like the following: ( ) < > @ , ; : \ " / [ ] ? = { }. a <cookie-value> can optionally be
wrapped in double quotes and include any us-ascii characters excluding control characters, whitespace, double quotes, comma, semicolon, and backslash. encoding: many implementations perform url encoding on cookie values, however it is not required per the rfc specification. it does help satisfying the requirements about which characters are allowed for <cookie-value> though. __secure- prefix: cookie...
HTTP Public Key Pinning (HPKP) - HTTP
ect-ct header. http public key pinning (hpkp) was a security feature that used to tell a web client to associate a specific cryptographic public key with a certain web server to decrease the risk of mitm attacks with forged certificates. it has been removed in modern browsers and is no longer supported. to ensure the authenticity of a server's public key used in tls sessions, this public key is
wrapped into a x.509 certificate which is usually signed by a certificate authority (ca). web clients such as browsers trust a lot of these cas, which can all create certificates for arbitrary domain names. if an attacker is able to compromise a single ca, they can perform mitm attacks on various tls connections. hpkp can circumvent this threat for the https protocol by telling the client which public...
Closures - JavaScript
an anonymous function, which is executed as soon as it has been defined (also known as an iife). the lexical environment contains two private items: a variable called privatecounter, and a function called changeby. you can't access either of these private members from outside the anonymous function. instead, you can access them using the three public functions that are returned from the anonymous
wrapper. those three public functions are closures that share the same lexical environment. thanks to javascript's lexical scoping, they each have access to the privatecounter variable and the changeby function. notice that i defined an anonymous function that creates a counter, and then i call it immediately and assign the result to the counter variable. you could store this function in a separate...
JavaScript data types and data structures - JavaScript
and creates an unnecessary maintenance burden. use strings for textual data. when representing complex data, parse strings, and use the appropriate abstraction. symbol type a symbol is a unique and immutable primitive value and may be used as the key of an object property (see below). in some programming languages, symbols are called "atoms". for more details see symbol and the symbol object
wrapper in javascript. objects in computer science, an object is a value in memory which is possibly referenced by an identifier. properties in javascript, objects can be seen as a collection of properties. with the object literal syntax, a limited set of properties are initialized; then properties can be added and removed. property values can be values of any type, including other objects, which ...
Grammar and types - JavaScript
guage. however, when writing your own code, you should explicitly declare the missing elements as undefined. doing this increases your code's clarity and maintainability. boolean literals the boolean type has two literal values: true and false. be careful: do not confuse the primitive boolean values true and false with the true and false values of the boolean object. the boolean object is a
wrapper around the primitive boolean data type. see boolean for more information. numeric literals number and bigint types can be written in decimal (base 10), hexadecimal (base 16), octal (base 8) and binary (base 2). a decimal numeric literal is a sequence of digits without a leading 0 (zero). a leading 0 (zero) on a numeric literal, or a leading 0o (or 0o) indicates it is in octal. octal num...
Text formatting - JavaScript
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. see also string.fromcodepoint() or string.prototype.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 ...
Working with objects - JavaScript
roperty n': value_n }; // or a string where obj is the name of the new object, each property_i is an identifier (either a name, a number, or a string literal), and each value_i is an expression whose value is assigned to the property_i. the obj and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (note that you may need to
wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.) object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. identical object initializers create distinct objects that will not compare to each o...
Deprecated and obsolete features - JavaScript
33) keys (bug 1007334, firefox 33) escape sequences octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals. the escape and unescape functions are deprecated. use encodeuri, encodeuricomponent, decodeuri or decodeuricomponent to encode and decode escape sequences for special characters. string methods html
wrapper methods like string.prototype.fontsize and string.prototype.big. string.prototype.quote is removed from firefox 37. non standard flags parameter in string.prototype.search, string.prototype.match, and string.prototype.replace are deprecated. string.prototype.substr probably won't be removed anytime soon, but it's defined in annex b of the ecma-262 standard, whose introduction states: "… p...
TypeError: can't access dead object - JavaScript
lding a strong (keep alive) reference to a dom element that persists even after it was destroyed in the dom. to avoid these issues, references to dom nodes in foreign document should instead be stored in an object which is specific to that document, and cleaned up when the document is unloaded, or stored as weak references. examples checking if an object is dead components.utils offers a isdead
wrapper() method, which privileged code might use. if (components.utils.isdead
wrapper(window)) { // dead } unprivileged code has no access to component.utils and might just be able catch the exception. try { string(window); } catch (e) { console.log("window is likely dead"); } ...
Arrow function expressions - JavaScript
the concise body syntax params => {object:literal} will not work as expected. var func = () => { foo: 1 }; // calling func() returns undefined! var func = () => { foo: function() {} }; // syntaxerror: function statement requires a name this is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal). you must
wrap the object literal in parentheses: var func = () => ({ foo: 1 }); line breaks an arrow function cannot contain a line break between its parameters and its arrow. var func = (a, b, c) => 1; // syntaxerror: expected expression, got '=>' however, this can be amended by putting the line break after the arrow or using parentheses/braces as seen below to ensure that the code stays pretty and flu...
AggregateError() constructor - JavaScript
syntax new aggregateerror(errors[, message]) parameters errors an iterable of errors, may not actually be error instances. messageoptional an optional human-readable description of the aggregate error. ...
AggregateError - JavaScript
it is thrown when multiple errors need to be reported by an operation, for example by promise.any(), when all promises passed to it reject. constructor aggregateerror() creates a new aggregateerror object. instance properties aggregateerror.prototype.message error message, defaults to "". aggregateerror.prototype.name error name, defaults to aggregateerror. ...
Array.prototype.reduce() - JavaScript
insequence(arr, input) { return arr.reduce( (promisechain, currentfunction) => promisechain.then(currentfunction), promise.resolve(input) ) } // promise function 1 function p1(a) { return new promise((resolve, reject) => { resolve(a * 5) }) } // promise function 2 function p2(a) { return new promise((resolve, reject) => { resolve(a * 2) }) } // function 3 - will be
wrapped in a resolved promise by .then() function f3(a) { return a * 3 } // promise function 4 function p4(a) { return new promise((resolve, reject) => { resolve(a * 4) }) } const promisearr = [p1, p2, f3, p4] runpromiseinsequence(promisearr, 10) .then(console.log) // 1200 function composition enabling piping // building-blocks to use for composition const double = x => x + x const t...
BigInt.asIntN() - 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 bigint.asintn(width, bigint); parameters width the amount of bits available for the integer size. bigint the integer to clamp to fit into the supplied bits. returns the value of bigint modulo 2width as a signed integer. examples staying in 64-bit ranges the bigint.asintn() method can be useful to stay in the range of 64-bit arithmetic. ...
BigInt.asUintN() - 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 bigint.asuintn(width, bigint); parameters width the amount of bits available for the integer size. bigint the integer to clamp to fit into the supplied bits. returns the value of bigint modulo 2width as an unsigned integer. examples staying in 64-bit ranges the bigint.asuintn() method can be useful to stay in the range of 64-bit arithmetic. ...
BigInt.prototype.valueOf() - 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 bigintobj.valueof() return value a bigint representing the primitive value of the specified bigint object. ...
Boolean - JavaScript
description the value passed as the first parameter is converted to a boolean value, if necessary. if the value is omitted or is 0, -0, null, false, nan, undefined, or the empty string (""), the object has an initial value of false. all other values, including any object, an empty array ([]), or the string "false", create an object with an initial value of true. do not confuse the primitive boolean values true and false with the true and false values of the boolean object. any object of which the value is not undefined or null, including a boolean object whose value is false, evaluates to true when passed to a conditional statement. ...
Intl.NumberFormat() constructor - JavaScript
play the currency in currency formatting. possible values are: "symbol" to use a localized currency symbol such as €, this is the default value, "narrowsymbol" to use a narrow format symbol ("$100" rather than "us$100"), "code" to use the iso currency code, "name" to use a localized currency name such as "dollar", currencysign in many locales, accounting format means to
wrap the number with parentheses instead of appending a minus sign. you can enable this formatting by setting the currencysign option to "accounting". the default value is "standard". 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. notation the formatting that shoul...
JSON.parse() - JavaScript
text .replace(rx_two, "@") .replace(rx_three, "]") .replace(rx_four, "") ) ) { // in the third stage we use the eval function to compile the text into a // javascript structure. the "{" operator is subject to a syntactic ambiguity // in javascript: it can begin a block or an object literal. we
wrap the text // in parens to eliminate the ambiguity. j = eval("(" + text + ")"); // in the optional fourth stage, we recursively walk the new structure, passing // each name/value pair to a reviver function for possible transformation. return (typeof reviver === "function") ? walk({ "": j ...
Math.log2() - JavaScript
is a static method of math, you always use it as math.log2(), rather than as a method of a math object you created (math is not a constructor). this function is the equivalent of math.log(x) / math.log(2). for log2(e) use the constant math.log2e which is 1 / math.ln2. polyfill this polyfill emulates the math.log2 function. note that it returns imprecise values on some inputs (like 1 << 29),
wrap into math.round() if working with bit masks. if (!math.log2) math.log2 = function(x) { return math.log(x) * math.log2e; }; examples using math.log2() math.log2(3); // 1.584962500721156 math.log2(2); // 1 math.log2(1); // 0 math.log2(0); // -infinity math.log2(-2); // nan math.log2(1024); // 10 specifications specification ecmascript (ecma-262)the defini...
Number.prototype.valueOf() - 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 numobj.valueof() return value a number representing the primitive value of the specified number object. description this method is usually called internally by javascript and not explicitly in web code. ...
Number - JavaScript
the number constructor contains constants and methods for working with numbers. values of other types can be converted to numbers using the number() function. the javascript number type is a double-precision 64-bit binary format ieee 754 value, like double in java or c#. 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. the largest value a number can hold is about 1.8×10308. numbers beyond that are replaced with the special number constant infinity. ...
Object() constructor - JavaScript
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. ...
Object.assign() - JavaScript
ties on the prototype chain and non-enumerable properties cannot be copied const obj = object.create({ foo: 1 }, { // foo is on obj's prototype chain. bar: { value: 2 // bar is a non-enumerable property. }, baz: { value: 3, enumerable: true // baz is an own enumerable property. } }); const copy = object.assign({}, obj); console.log(copy); // { baz: 3 } primitives will be
wrapped to objects const v1 = 'abc'; const v2 = true; const v3 = 10; const v4 = symbol('foo'); const obj = object.assign({}, v1, null, v2, undefined, v3, v4); // primitives will be
wrapped, null and undefined will be ignored. // note, only string
wrappers can have own enumerable properties. console.log(obj); // { "0": "a", "1": "b", "2": "c" } exceptions will interrupt the ongoing copying task co...
Object.create() - JavaScript
roperties along its prototype 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 prototype 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 erro...
Promise() constructor - JavaScript
the source for this interactive demo is stored in a github repository. if you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax new promise(executor) parameters executor a function to be executed by the constructor, during the process of constructing the promiseobj. the executor is custom code that ties an outcome to a promise. you, the programmer, write the executor. the signature of this function is expected to be: function(resolutionfunc, rejectionfunc){ // typically, some asynchronous operation. ...
Promise - JavaScript
unc,rejectionfunc) => { resolutionfunc(777); }); // at this point, "promisea" is already settled. promisea.then( (val) => console.log("asynchronous logging has val:",val) ); console.log("immediate logging"); // produces output in this order: // immediate logging // asynchronous logging has val: 777 constructor promise() creates a new promise object. the constructor is primarily used to
wrap functions that do not already support promises. static methods promise.all(iterable) wait for all promises to be resolved, or for any to be rejected. if the returned promise resolves, it is resolved with an aggregating array of the values from the resolved promises ,in the same order as defined in the iterable of multiple promises. if it rejects, it is rejected with the reason from the fi...
Proxy() constructor - JavaScript
it can be any sort of object, including a native array, a function, or even another proxy. handler an object whose properties are functions that define the behavior of the proxy when an operation is performed on it. description use the proxy() constructor to create a new proxy object. this constructor takes two mandatory arguments: target is the object for which you want to create the proxy handler is the object that defines the custom behavior of the proxy. ...
Proxy.revocable() - JavaScript
it can be any sort of object, including a native array, a function, or even another proxy. handler an object whose properties are functions define the behavior of proxy p when an operation is performed on it. return value a newly 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. ...
String() constructor - JavaScript
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 'string constructor' in that specification. ...
WebAssembly.Table - JavaScript
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.prototype.length returns the length of the table, i.e. the number of elements. instance methods table.prototype.get() accessor function — gets the element stored at a given index. ...
Lexical grammar - JavaScript
e comment until we're done. */ console.log('hello world!'); } comment(); you can also use it in the middle of a line, if you wish, although this can make your code harder to read so it should be used with caution: function comment(x) { console.log('hello ' + x /* insert the value of x */ + ' !'); } comment('world'); in addition, you can use it to disable code to prevent it from running, by
wrapping code in a comment, like this: function comment() { /* console.log('hello world!'); */ } comment(); in this case, the console.log() call is never issued, since it's inside a comment. any number of lines of code can be disabled this way. hashbang comments a specialized third comment syntax, the hashbang comment, is in the process of being standardized in ecmascript (see the hashbang gramm...
switch - JavaScript
u were not probably expecting. this is because the first let message = 'hello'; conflicts with second let statement let message = 'hi'; even they're within their own separate case clauses case 'say_hello': and case 'say_hi':. ultimately, this is due to both let statements being interpreted as duplicate declarations of the same variable name within the same block scope. ...
Strict mode - JavaScript
n't possible to blindly concatenate conflicting scripts. consider concatenating a strict mode script with a non-strict mode script: the entire concatenation looks strict! the inverse is also true: non-strict plus strict looks non-strict. obviously, concatenation of scripts is never ideal, but if you must, consider enabling strict on a function-by-function basis. you can also take the approach of
wrapping the entire contents of a script in a function and having that outer function use strict mode. this eliminates the concatenation problem and it means that you have to explicitly export any shared variables out of the function scope. strict mode for functions likewise, to invoke strict mode for a function, put the exact statement "use strict"; (or 'use strict';) in the function's body before ...
<math> - MathML
in addition you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it. attributes in addition to the following attributes, the <math> element accepts any attributes of the <mstyle> element. class, id, style provided for use with stylesheets. dir overall directionality of formulas. possible values are either ltr (left to right) or rtl (right to left). href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. ...
MathML documentation index - MathML
thml, mathml reference this is an alphabetical list of mathml presentation elements. 10 <maction> mathml, mathml reference, mathml:element, mathml:enlivening expressions the following example uses the "toggle" actiontype: 11 <math> mathml, mathml reference, mathml:element the top-level element in mathml is <math>. every valid mathml instance must be
wrapped in <math> tags. in addition you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it. 12 <menclose> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <menclose> element renders its content inside an enclosing notation specified by the notation attribute. 13 <merror>...
Image file type and format guide - Web media technologies
png. if you do choose a lossy format, such as jpeg or lossy webp, carefully weigh the compression level to avoid causing text or other shapes to become fuzzy or unclear. best choice fallback svg png providing image fallbacks while the standard html <img> element doesn't support compatibility fallbacks for images, the <picture> element does. <picture> is used as a
wrapper for a number of <source> elements, each specifying a version of the image in a different format or under different media conditions, as well as an <img> element which defines where to display the image and the fallback to the default or "most compatible" version. for example, if you're displaying a diagram best displayed with svg, but wish to offer a fallback to a png or gif of the diagram, y...
Progressive loading - Progressive web apps (PWAs)
or not. if it's not, we just load the images using the more basic approach covered earlier. improvements remember that there are many ways to optimize loading times, and this example is exploring only one of the approaches. you could try to make your apps more bulletproof by making them work without javascript — either using <noscript> to show the image with final src already assigned, or by
wrapping <img> tags with <a> elements pointing at the target images, so the user can click and access them when desired. we won't do that because the app itself is dependent on javascript — without it, the list of games wouldn't even be loaded, and the service worker code wouldn't be executed. we could rewrite the loading process to load not only the images, but the complete items consisting of fu...
The building blocks of responsive design - Progressive web apps (PWAs)
l 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 javascript constructs depending on whether a media query returns true or not. we opened up the brick.js file and
wrapped the whole lot in the following: if (window.matchmedia("(max-width: 480px)").matches) { // the whole of brick.js goes here! } this causes nothing inside the brick.js file to be run unless the viewport width is 480px or less. problem solved. really wide screens one thing you might notice is that when the viewport gets very wide (such as on a cinema display), the layout stops getting wider,...
<textPath> - SVG: Scalable Vector Graphics
to render text along the shape of a <path>, enclose the text in a <textpath> element that has an href attribute with a reference to the <path> element. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- to hide the path, it is usually
wrapped in a <defs> element --> <!-- <defs> --> <path id="mypath" 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. value type: <url> ; default value: none; animatable:...
SVG documentation index - SVG: Scalable Vector Graphics
ermines the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image. the topmost row of the matrix is row number zero. the value must be such that: 0 <= targety < ordery. 218 text-anchor svg, svg attribute the text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-
wrapped text where the
wrapping area is determined from the inline-size property relative to a given point. 219 text-decoration svg, svg attribute the text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. 220 text-rendering svg, svg attribute the text-rendering attribute provides hints to the renderer ab...
Using templates and slots - Web Components
</details> <hr> </template> that <template> element has several features: the <template> has a <style> element with a set of css styles that are scoped just to the document fragment the <template> creates. the <template> uses <slot> and its name attribute to make three named slots: <slot name="element-name"> <slot name="description"> <slot name="attributes"> the <template>
wraps the named slots in a <details> element. creating a new <element-details> element from the <template> next, let’s create a new custom element named <element-details> and use element.attachshadow to attach to it, as its shadow root, that document fragment we created with our <template> element above. this uses exactly the same pattern as we saw in our earlier trivial example. customelements.
WebAssembly Concepts - WebAssembly
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 symmetric in many ways to es2015 modules. webassembly key concepts there are several key concepts needed to understand how webassembly runs ...
Compiling from Rust to WebAssembly - WebAssembly
, let's build the package. type this into your terminal: $ wasm-pack build this does a number of things (and they take a lot of time, especially the first time you run wasm-pack). to learn about them in detail, check out this blog post on mozilla hacks. in short, wasm-pack build: compiles your rust code to webassembly. runs wasm-bindgen on that webassembly, generating a javascript file that
wraps up that webassembly file into a module npm can understand. creates a pkg directory and move that javascript file and your webassembly code into it. reads your cargo.toml and produces an equivalent package.json. copies your readme.md (if you have one) into the package. the end result? you have an npm package inside of the pkg directory. a digression about code size if you check out the gen...
Understanding WebAssembly text format - WebAssembly
to enable webassembly to be read and edited by humans, there is a textual representation of the wasm binary format. this is an intermediate form designed to be exposed in text editors, browser developer tools, etc. this article explains how that text format works, in terms of the raw syntax, and how it is related to the underlying bytecode it represents — and the
wrapper objects representing wasm in javascript. note: this is potentially overkill if you are a web developer who just wants to load a wasm module into a page and use it in your code (see using the webassembly javascript api), but it is more useful if for example, you want to write wasm modules to optimize the performance of your javascript library, or build your own webassembly compiler. s-expressions in both the binary and ...